https://github.com/mitodl/smoot-design

Design system components for MITODL Projects
https://github.com/mitodl/smoot-design

Last synced: 25 days ago
JSON representation

Design system components for MITODL Projects

• Host: GitHub
• URL: https://github.com/mitodl/smoot-design
• Owner: mitodl
• License: bsd-3-clause
• Created: 2024-11-07T18:45:57.000Z (2 months ago)
• Default Branch: main
• Last Pushed: 2024-12-18T00:58:35.000Z (25 days ago)
• Last Synced: 2024-12-18T01:41:35.366Z (25 days ago)
• Language: TypeScript
• Size: 1.77 MB
• Stars: 0
• Watchers: 12
• Forks: 0
• Open Issues: 10
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# smoot-design

Design system components for MITODL Projects

## Development and Release

All PR titles and commits to `main` should use the [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) format. During release, the types of commits included since the last release inform what sort of version bump should be made. For example, bugfixes yield a new patch version, whereas breaking changes trigger a major version bump.

To trigger a release, run the "Release" github action. Using [semantic-release](https://semantic-release.gitbook.io/semantic-release), this action will:

1. Inspect the commit history since previous release for [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) an

2. Determine whether the version bump should be major, minor, or patch based on commit types. Breaking changes (e.g., `feat!: remove Button variant 'outlined'`) will result in major version bumps.

3. Publish the package to NPM and the repository's [Github Releases](https://github.com/mitodl/smoot-design/releases).

## Documentation

Documentation for `smoot-design` components is available at https://mitodl.github.io/smoot-design.

### Storybook

Components in `smoot-design` are documented using Storybook's [autodocs](https://storybook.js.org/docs/writing-docs/autodocs) feature.

Autodocs _should_ infer props and comments from Typescript + JSDoc comments. However, autodocs can be a bit finnicky. Tips:

- **Filename should match Component Name:** If you're documenting `Button`, it must be exported from a file called `Button.tsx`.

- **Component `displayName`:** Some components may need an explicit `displayName`, this can be set by `Button.displayName="Button"`.

  - _React component display names are not visible to end users; they are used in React's Dev Tools. React automatically adds display names for most components while transpiling, but autodocs uses un-transpiled code to generate documentation._