Commit Graph
13 Commits
Author SHA1 Message Date
Danny White 31046e7a7f perf(design-system): improve local dev content reload (#50069)
## What kind of change does this PR introduce?

Performance improvement for design-system doc page reload in local dev.

## What is the current behavior?

Doc pages import all compiled MDX from a single `.velite/allDocs.json`
bundle (~27MB for 105 docs). Velite rebuilds are fast, but every MDX
save forces Next to re-parse that entire file.

## What is the new behavior?

- Writes each doc's compiled MDX to `.velite/codes/{codeId}.json`;
`allDocs.json` keeps metadata only (~367KB)
- Loads doc code on demand in `lib/docs.ts` via `readFile`, with
`connection()` + dynamic `import('@/.velite')` in dev so pages re-read
fresh output after Velite rebuilds
- Skips `generateStaticParams` in dev
- Velite `output.clean` only in production
- README notes the per-doc output and adds commented getting-started
commands

Dev workflow is unchanged: `pnpm dev` still runs `velite dev` alongside
Next.js.

## To test

Local-only:

1. `cd apps/design-system && pnpm dev`
2. Open http://localhost:3003/design-system/docs/components/button
3. Edit `content/docs/components/button.mdx`, wait for `[VELITE] rebuild
finished`, refresh: change should land in ~200ms, not multi-second

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **Documentation**
- Updated design-system setup instructions for environment
configuration, installation, development, and the local browser URL.
- Added guidance for building documentation content and regenerating
components.
  - Updated alternative command examples.
  - Removed the previous “Hot reload” section.

- **Improvements**
- Improved documentation page loading during development and production
builds.
- Documentation pages now reliably display their associated code
examples.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-09-14 09:40:17 +10:00
Danny White facc2df09e chore(design-system): generate and ignore registry output (#49290)
## What kind of change does this PR introduce?

Chore. Stops committing generated design-system registry output
([DEPR-647](https://linear.app/supabase/issue/DEPR-647/generate-and-ignore-design-system-registry-output)).

## What is the current behavior?

`apps/design-system/__registry__` is build output from `registry/`, but
the chart snapshots and index are committed. That makes reviews noisy,
and a forgotten `build:registry` leaves `master` out of date until
someone else regenerates it.

## What is the new behavior?

`pnpm dev` and `pnpm typecheck` generate `__registry__` automatically.
The directory is gitignored, and the previously tracked snapshots are
removed. `pnpm build` still generates it as before.

## To test

- From the repo root, run `pnpm --filter=design-system
generate:registry` and confirm
`apps/design-system/__registry__/index.tsx` is created locally and is
untracked.
- Run `pnpm dev:design-system`, open
[http://localhost:3003](http://localhost:3003), and open any component
docs page with a live preview (for example Charts). Previews and source
panels should still load.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **Documentation**
* Clarified when the component registry is generated and how to
regenerate it.
* Expanded component documentation guidance, including content sources
and generated-file editing restrictions.

* **Chores**
* Improved registry generation across development, type checking,
builds, and cleanup.
* Generated registry files are now excluded from version control and
linting.
* Improved reliability when creating and refreshing generated registry
files.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-20 18:34:46 +10:00
Ivan VasilovandClaude Opus 4.8 369744eb2b chore: replace concurrently with npm-run-all in docs and design-system (#47697)
## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.

YES

## What kind of change does this PR introduce?

Chore / dependency cleanup.

## What is the current behavior?

`apps/docs` and `apps/design-system` use the `concurrently` package to
run their parallel dev scripts, while the rest of the monorepo (e.g.
`packages/pg-meta`) already relies on `npm-run-all`.

## What is the new behavior?

Both apps now use `npm-run-all` (`run-p`), and `concurrently` is dropped
from their dependencies and the lockfile; `apps/docs` keeps its
kill-on-exit behavior via `run-p --race`, and `apps/design-system`'s
`dev:full` is collapsed into `dev` using the `run-p dev:*` glob (with
`dev:next`/`dev:content` sub-tasks and README updated to match).

## Additional context

N/A

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Documentation**
* Updated design system setup instructions to reflect the new
development workflow and MDX watching behavior.
* **Chores**
* Simplified local development scripts for the design system and docs
apps.
* Split the dev workflow into separate commands for the app server and
content watcher, making it easier to run and troubleshoot.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-07 15:47:23 +00:00
Danny White b09b569a59 chore(design-system): sandwiched admonition (#43120)
## What kind of change does this PR introduce?

- Design system docs addition

## What is the current behavior?

- We used a ’sandwiched’ style Admonition a lot but have no clear
docs/examples for it

## What is the new behavior?

- An example file and documentation around the sandwiched Admonition
- Minor unrelated changes
	- Copywriting docs expansion on capitalization and declarative writing
	- `pnpm format` on charts

## Additional context

| Preview |
| --- |
| <img width="1714" height="612" alt="CleanShot 2026-02-24 at 16 02
21@2x"
src="https://github.com/user-attachments/assets/f547bdea-ca31-4ba7-85eb-bd9bcbf30d35"
/> |
2026-02-27 16:23:08 +11:00
Danny WhiteandJoshen Lim 60dfcc00ea fix(studio): PageSectionSummary alignment (#42019)
* system

* nit

* docs and fixes

* more resilient component

* remove redundant text

* format

* nit

* PRettier

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2026-01-21 10:18:15 +08:00
Danny White 40f7abc2cd docs(design-system): design system improvements (#40196)
* font smoothing

* remove sidebar

* fix typo

* data grid empty state

* basic data grid

* remove figma

* empty state docs
2025-11-11 14:13:06 +11:00
Danny White 83bdc22723 chore(design-system): empty state documentation (#39890)
* suppress webpack/Turbopack warning

* empty states first draft

* todo note

* empty state documentation

* remove empty code block and confusing examples
2025-11-04 15:50:56 +11:00
Danny White 73f8a15203 chore(studio): consistent copy/reveal input behaviour (#39509)
* user newer input in api keys

* user newer input in s3 connection settings

* improve input read-only styles

* make API text selectable

* disable text until reveal button tapped

* fix build

* revert change

* fix other cases

* revert hardcoded example

* nice region field

* documentation

* cleanup

* better docs

* colour tweaks
2025-10-16 13:44:40 +11:00
Danny WhiteandJoshen Lim 5ff03b2971 feat: custom bucket icons (#39280)
* chore: separate interfaces per bucket type

* chore: reuse existing bucket creation modal for files

* chore: allow external trigger for new bucket modal

* chore: minor fixes

* chore: full-size empty state

* chore: files other tabs

* fix: show tab bar when on file subroute

* chore: use existing table component to list buckets

* fix: tests

* fix: build error

* chore: remove future bucket type components from PR

* fix: dependency

* Couple of refactors to simplify implementation

* Fix TS

* chore: move s3 settings out to sidebar

* fix: minor nits

* fix: reuse existing loading spinners from schema visualiser

* fix: loading for files

* fix: prevent loading of table for zero buckets

* chore: improved loading state

* chore: shimmer on table

* chore: copywriting on S3

* chore: improve empty states

* fix: deprecated input instructions

* fix: filter/search bucket table

* chore: tidy

* fix: tests

* first commit

* improve documentation and fix icon build error

* change svg kebab case to camel case for React

* copy nits

* fix svg codeblock color

* add bucket (normal) icon

* add bucket icon to policies

* add bucket icon to other storage bucket surfaces

* fix spacing on empty state

* fix inconsistent icons in home sections

Make 1:1 with what we have in the sidebar with optically-correct strokeWidth.

* fix icons

Like the previous commit, this makes sure we use the same product icons as in the sidebar.

* clearer bucket add icon naming

* remove unused layouts

* fix naming collision

* Tinnnnyyy nit

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-10-08 13:14:03 +11:00
Danny White 3068a6eabe docs(design-system): NavMenu component (#39188)
* chore: separate interfaces per bucket type

* chore: reuse existing bucket creation modal for files

* chore: allow external trigger for new bucket modal

* chore: minor fixes

* chore: full-size empty state

* chore: files other tabs

* fix: show tab bar when on file subroute

* chore: use existing table component to list buckets

* fix: tests

* fix: build error

* chore: remove future bucket type components from PR

* fix: dependency

* docs: add navigation and navmenu to design system

* chore: clarify readme instructions

* fix: remove unrelated changes

* forgot changelog

* improve contentlayer readme

* mention PageLayout component
2025-10-08 10:18:43 +11:00
65b962e771 design system: text color contrast (#38343)
* Refactor Drawer component and add date-fns dependency

Refactored the Drawer component for improved slot-based structure, updated styles, and added 'use client' directive. Added 'date-fns' as a dependency in design-system, updated tsconfig paths for icons, and marked ToggleGroup as a client component.

* nit: add env for svg path

* fix: instructions

* accent color docs and basic tidy

* copy value feature

* improve color contrast

* increase contrast on text-warning in light mode

* update changelog

* replace outdated text-warning utility classes

* remove redundant warning-600

* minor design-system docs updates

* docs updates

* remove unused brand-button class

* update docs

* fix: restore brand default

* update docs brand text color

* low hanging branded text fruit

* Nit refactor and clean  up

* re-add Kemal’s README instructions for hot reload

---------

Co-authored-by: Jonathan Summers-Muir <MildTomato@users.noreply.github.com>
Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2025-09-09 11:45:08 +10:00
kemal.earth 1681208896 feat(design-system): add contentlayer watch task to package.json (#38459)
* feat: add contentlayer watch task to pkg json

* chore: update design system readme
2025-09-05 11:19:49 +01:00
b8243e06d8 Feat/design system site (#26586)
* init site

* add nav menu

* add props table component

* init all the examples

• also includes moving a bunch of ./ui files to ./ui-patterns

* update package

• might need to remove some of these

* Update rehype-component.ts

* move nav

* more changes

* add new source information to contentlayer

* fix copy buttons

* add text-confirm. start new concept of "fragments"

* move base path. add homepage. add theme selection

* added colors

* add form-item-layout

* temporary fix code blocks in light mode. they currently don't switch theme to theme

* start adding code themes

* Update dark.json

* update code block themes

* fix animations

* add cdmk search

* export registry of icons in ./icons package

* add comments

* add icon copy stuff

* Update icons.tsx

* more docs

* more docs. cleaned up colors and icons docs

* Update theming.mdx

* add more docs

* update

* add package

* Update tailwind.config.js

* update content

* Update drawer-demo.tsx

* Update aspect-ratio-demo.tsx

* add new blocks

* Update source-panel.tsx

* Update source-panel.tsx

* Update source-panel.tsx

* add new source block

* Update source-panel.tsx

* Update _app.tsx

* Update page.tsx

* Delete layout-old.tsx

* remove old themes

* remove old ui registry

* comment out nav items

* Update package-lock.json

* Update AssistantChatForm.tsx

* move back

* move again

* update

* Update index.tsx

* Update package-lock.json

* Update package-lock.json

* Update package-lock.json

* update package

* udpate prettier

* fix tag issues

* Update package-lock.json

* update to contentlayer2

* update package-lock.json

* fix type errors

* ignore spelling

* Update avoid-typos.yml

* Update avoid-typos.yml

* Update package-lock.json

* Use ui type definitions.

* move tsconfig base stuff. fix content layer issue

* Update package-lock.json

* Update package-lock.json

---------

Co-authored-by: Alaister Young <a@alaisteryoung.com>
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
2024-05-23 17:39:56 +08:00