kemal.earth
ec6f55c00b
* feat: remove unused chart files * chore: regenerate registry * fix: logs bar chart positioning * feat: add charts page to ui patterns * chore: alphabetise ui patterns nav * feat: base composable chart components * chore: prettier for charts.mdx * chore: slowly putting example together * feat: add chart header components * feat: add chart content wrapper * feat: add recharts to source * feat: add empty state handling * feat: add loading state for content area as well * feat: starting on actual recharts pieces * feat: add basic api to documentation * feat: add disabled state too * feat: couple of basic chart types * chore: tidy up for now * feat: modify eslint rules for our demo files * fix: recharts logo colour on light mode * feat: absorb metric card into chart * feat: align prop for chart header * feat: refactor chart content * feat: example with table * chore: format for prettier * fix: pkg lock merge conflict * fix: small bits from danny * feat: add link in ui pattern intro to charts * chore: remove charts link from atoms * chore: update metric padding to saxon suggestion * feat: table footer overrides by default * feat: update api props in table * chore: formating
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.
Adding components
The design system references components rather than housing them. That’s an important distinction to make, as everything that follows here is about the documentation of components. You can add or edit components in one of these two places:
packages/ui: basic UI componentspackages/ui-patterns: components which are built using NPM libraries or amalgamations of components frompatterns/ui
With that out of the way, there are several parts of this design system that need to be manually updated after components have been added or removed (from documentation). These include:
config/docs.ts: list of components in the sidebarcontent/docs: the actual component documentationregistry/examples.ts: list of example componentsregistry/default/example: the actual example componentsregistry/charts.ts: chart componentsregistry/fragments.ts: fragment components
You will probably need to rebuild the design system’s registry after making new additions. You can do that via:
cd apps/design-system
pnpm build:registry