Danny WhiteandJoshen Lim
5ff03b2971
* 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>
Supabase Design System
Design resources for building consistent user experiences at Supabase.
Getting started
First, make a copy of .env.local.example and name it env.local. Then install any required packages and start the development server:
cd apps/design-system
pnpm i
pnpm dev:full
The dev:full command runs both the Next.js development server and Contentlayer concurrently, which is recommended for most development workflows.
Alternative commands
You can also run the development server and content watcher separately:
# Run only the Next.js development server
pnpm dev
# Run only the content watcher (in a separate terminal shell)
pnpm content:dev
Or run the development server from the root directory:
pnpm dev:design-system
To run both the development server and content watcher from the root directory, you can use:
# Run the development server
pnpm dev:design-system
# Run the content watcher (in a separate terminal shell)
pnpm --filter=design-system content:dev
Open http://localhost:3003 in your browser to see the result.
Watching for MDX changes
The dev:full command automatically watches for changes to MDX files with hot reload. If you're running the pnpm dev separately, you'll need to run pnpm content:dev in a separate terminal shell to watch for content changes.