{"id":13415442,"url":"https://github.com/storybookjs/design-system","last_synced_at":"2025-05-13T15:10:42.790Z","repository":{"id":38984011,"uuid":"184698484","full_name":"storybookjs/design-system","owner":"storybookjs","description":"🗃 Storybook Design System","archived":false,"fork":false,"pushed_at":"2024-11-26T10:13:11.000Z","size":6861,"stargazers_count":1955,"open_issues_count":23,"forks_count":592,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-05-11T02:24:47.581Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://master--5ccbc373887ca40020446347.chromatic.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/storybookjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2019-05-03T04:28:13.000Z","updated_at":"2025-05-04T06:51:32.000Z","dependencies_parsed_at":"2025-04-10T23:28:14.197Z","dependency_job_id":"13da83ec-11d5-405c-a337-c539f1aebae8","html_url":"https://github.com/storybookjs/design-system","commit_stats":{"total_commits":1158,"total_committers":36,"mean_commits":"32.166666666666664","dds":0.6658031088082901,"last_synced_commit":"6a96cd02217902beda750c97507418697239229f"},"previous_names":[],"tags_count":214,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Fdesign-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Fdesign-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Fdesign-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/storybookjs%2Fdesign-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/storybookjs","download_url":"https://codeload.github.com/storybookjs/design-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253685221,"owners_count":21947306,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-07-30T21:00:48.799Z","updated_at":"2025-05-13T15:10:42.685Z","avatar_url":"https://github.com/storybookjs.png","language":"TypeScript","funding_links":[],"categories":["JavaScript","Alternatives","Pattern library","TypeScript","📦 Legacy \u0026 Inactive Projects"],"sub_categories":["Pattern libraries articles"],"readme":"# Storybook Design System\n\n\u003cimg src=\"src/design-system.png\" width=\"100%\" /\u003e\n\n[![NPM](https://img.shields.io/npm/v/@storybook/design-system.svg)](https://www.npmjs.com/package/@storybook/design-system) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\n## Used by\n\n- [Storybook homepage](https://storybook.js.org/)\n- [LearnStorybook.com](https://www.learnstorybook.com/)\n- [Chromatic.com](https://www.chromatic.com/)\n\nNote: this design system is not used in Storybook's UI. The stack is different and theming requirements of Storybook add complexity beyond the scope of this project. However, Storybook's visual design is identical to what's here.\n\n## Tech stack\n\nBuilding components\n\n- 📚 [Storybook](https://storybook.js.org) for UI component development and [auto-generated docs](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)\n- 👩‍🎤 [Storybook theming |](https://emotion.sh/) for component-scoped styling\n- ⚛️ [React](https://reactjs.org/) declarative component-centric UI\n\nMaintaining the system\n\n- 📦 [NPM](https://www.npmjs.com/) for [packaging and distribution](https://blog.hichroma.com/how-packaging-makes-it-dead-simple-to-share-ui-components-29912593539d)\n- ✅ [Chromatic](https://www.chromatic.com/) to prevent UI bugs in components (by Storybook maintainers)\n- 🚥 [CircleCI](https://circleci.com/) Continuous integration\n\n## Why\n\nThe Storybook design system codifies existing UI components into a central, well-maintained repository. It is built to address having to paste the same components into multiple projects again and again. This simplifies building UI's with Storybook's design patterns.\n\n#### What we're doing\n\n- Build and maintain a design system in the open\n- Share UI components between multiple apps\n- Dogfood upcoming Storybook features\n- Welcome contributors of all levels and backgrounds\n\n#### What we're not doing\n\n- Rewrite all new components from scratch\n- Overhaul the visual design of components\n- Typescript (the consumer apps don't use it)\n- Compete with more general design systems like ANT or Material.\n\n## Install\n\n```bash\nnpm install --save @storybook/design-system\n```\n\n## Global Styles\n\nComponents within the design system assume that a set of global styles have been configured. Depending upon the needs of the application, this can be done several ways:\n\n#### Option 1: Render the `GlobalStyle` component\n\nUseful when you don't need any custom `body` styling in the application, typically this would be placed in a layout component that wraps all pages, or a top-level `App` component.\n\n```javascript\nimport { global } from '@storybook/design-system';\nconst { GlobalStyle } = global;\n```\n\n```javascript\n/* Render the global styles once per page */\n\u003cGlobalStyle /\u003e\n```\n\n#### Option 2: Use the `bodyStyles` to apply styling\n\nUseful when you want build upon the shared global styling.\n\n```javascript\nimport { Global, css } from '@storybook/theming';\nimport { global } from '@storybook/design-system';\nconst { bodyStyles } = global;\n\nconst customGlobalStyle = css`\n  body {\n    ${bodyStyles}// Custom body styling for the app\n  }\n`;\n\nconst CustomGlobalStyle = () =\u003e \u003cGlobal styles={customGlobalStyle} /\u003e;\n```\n\n```javascript\n/* Render the global styles once per page */\n\u003cCustomGlobalStyle /\u003e\n```\n\n## Font Loading\n\nRather than `@import` fonts in the `GlobalStyle` component, the design system's font URL is exported with the intention of using it in a `\u003clink\u003e` tag as the href. Different frameworks and environments handle component re-renders in their own way (a re-render would cause the font to be re-fetched), so this approach allows the design system consumers to choose the font loading method that is most appropriate for their environment.\n\n#### Option 1: Build the link tag manually\n\n```javascript\nimport { global } from '@storybook/design-system';\n\nconst fontLink = document.createElement('link');\n\nfontLink.href = global.fontUrl;\nfontLink.rel = 'stylesheet';\n\ndocument.head.appendChild(fontLink);\n```\n\n#### Option 2: Render the link tag in a component\n\n```jsx\nimport React from 'react';\nimport { global } from '@storybook/design-system';\n\nconst Layout = ({ children }) =\u003e (\n  \u003chtml\u003e\n    \u003chead\u003e\n      \u003clink href={global.fontUrl} rel=\"stylesheet\" /\u003e\n    \u003c/head\u003e\n\n    \u003cbody\u003e{children}\u003c/body\u003e\n  \u003c/html\u003e\n);\n\nexport default Layout;\n```\n\n## Development Scripts\n\n#### `yarn release`\n\n\u003e Bump the version\n\n\u003e Push a release to GitHub and npm\n\n\u003e Push a changelog to GitHub\n\n_Notes:_\n\n- Requires authentication with [`npm adduser`](https://docs.npmjs.com/cli/adduser.html)\n- [`auto`](https://github.com/intuit/auto) is used to generate a changelog and push it to GitHub. In order for this to work correctly, **environment variables called `GH_TOKEN` and `NPM_TOKEN` are needed** that reference a [GitHub personal access token](https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line) and a [NPM \"Publish\" token](https://docs.npmjs.com/creating-and-viewing-access-tokens) with the appropriate permissions to update the repo.\n\n## License\n\nMIT © [shilman](https://github.com/shilman)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstorybookjs%2Fdesign-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstorybookjs%2Fdesign-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstorybookjs%2Fdesign-system/lists"}