https://github.com/28stoneconsulting/design-system

28Stone Design System
https://github.com/28stoneconsulting/design-system

design-system emotion material-ui react storybook typescript

Last synced: 14 days ago
JSON representation

28Stone Design System

• Host: GitHub
• URL: https://github.com/28stoneconsulting/design-system
• Owner: 28StoneConsulting
• Created: 2021-03-01T12:25:27.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2023-01-31T09:54:52.000Z (about 2 years ago)
• Last Synced: 2024-12-29T21:38:03.300Z (about 1 month ago)
• Topics: design-system, emotion, material-ui, react, storybook, typescript
• Language: TypeScript
• Homepage:
• Size: 6.9 MB
• Stars: 3
• Watchers: 2
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 28Stone Design System

28Stone Design System is a reusable component library that helps 28Stone employees to build internal application UIs faster. The goal is to make building durable UIs more productive and satisfying.

The latest version is published [here](https://28stoneconsulting.github.io/design-system).

## Install

28SDS components are written in React, and its stories are written in [Component Story Format](https://medium.com/storybookjs/component-story-format-66f4c32366df).

Add 28SDS to your project.

`npm install --save @28stoneconsulting/design-system`

or

`yarn add @28stoneconsulting/design-system`

To use the legacy v4 of material-ui:

`npm install --save @28stoneconsulting/[email protected]`

or

`yarn add @28stoneconsulting/[email protected]`

### **Use**

28SDS is using material-ui theming approach and emotion for syling. Add the following imports into the ts/js file:

```js

import CssBaseline from '@mui/material/CssBaseline';

import { ThemeProvider as MuiThemeProvider, StyledEngineProvider } from '@mui/material/styles';

import { themeDark as theme, Button, Badge } from '@28stoneconsulting/design-system';

import { ThemeProvider } from '@emotion/react';

```

and use them like so

```jsx

const example = () => (

  

    

      

      

        


           {}}>

            Do something

          

           {}}>Cool

        

      

    

  

);

```


For legacy version <=1.0.18 use 28SDS like so:

```js

import CssBaseline from '@material-ui/core/CssBaseline/CssBaseline';

import { StylesProvider, MuiThemeProvider } from '@material-ui/core/styles';

import { ThemeProvider } from '@emotion/react';

import { themeDark as theme, Button, Badge } from '@28stoneconsulting/design-system';

```

and use them like so

```jsx

const example = () => (

  

    

      

      

        


           {}}>

            Do something

          

           {}}>Cool

        

      

    

  

);

```


The codesandbox example can be accessed [here](https://codesandbox.io/s/28stone-design-system-usage-expample-1qdbn?file=/src/App.tsx)

### **Run and develop 28SDS locally**

Clone the [28SDS GitHub project](https://github.com/28StoneConsulting/design-system) then start Storybook.

`yarn && yarn storybook`

### **Deployment**

`yarn build-storybook`

`yarn build-docs`

Push changes and PR into main.

The version number will bump automatically.

The CHANGELOG.md will update automatically.

### **Resources**

- [GitHub repository](https://github.com/28StoneConsulting/design-system)