Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/seb-oss/green

Green is an open-source design system built by SEB.
https://github.com/seb-oss/green

angular lit react storybook

Last synced: 3 days ago
JSON representation

Green is an open-source design system built by SEB.

Host: GitHub
URL: https://github.com/seb-oss/green
Owner: seb-oss
License: apache-2.0
Created: 2021-05-04T12:26:51.000Z (over 3 years ago)
Default Branch: main
Last Pushed: 2024-11-13T12:30:08.000Z (2 months ago)
Last Synced: 2024-11-13T12:39:03.261Z (2 months ago)
Topics: angular, lit, react, storybook
Language: TypeScript
Homepage: https://storybook.seb.io/
Size: 482 MB
Stars: 37
Watchers: 8
Forks: 52
Open Issues: 104
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        


    

        

    

    


    


    Green Design System



Green is an open-source design system built by SEB.


   


## Getting started

If you are new to Green, checkout [@sebgroup/green-core](https://github.com/seb-oss/green/tree/main/libs/core).

We also provide components for the following technologies:

- [React](https://github.com/seb-oss/green/tree/main/libs/react)

- [Angular](https://github.com/seb-oss/green/tree/main/libs/angular)

If you're trying to find something specific, here's a full list of packages that we support!

| Package name                                                                                     | Latest stable version                                                                                                                                     |                                                                                          | Description                                                             |

| ------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ----------------------------------------------------------------------- |

| [@sebgroup/green-core](https://github.com/seb-oss/green/tree/main/libs/core)                     | [![Stable version](https://img.shields.io/npm/v/@sebgroup/green-core/latest.svg)](https://www.npmjs.com/package/@sebgroup/green-core)                     | [Changelog](https://github.com/seb-oss/green/tree/main/libs/core/CHANGELOG.md)           | Web Component library built with [Lit](https://lit.dev)                 |

| [@sebgroup/green-react](https://github.com/seb-oss/green/tree/main/libs/react)                   | [![Stable version](https://img.shields.io/npm/v/@sebgroup/green-react/latest.svg)](https://www.npmjs.com/package/@sebgroup/green-react)                   | [Changelog](https://github.com/seb-oss/green/tree/main/libs/react/CHANGELOG.md)          | React component library                                                 |

| [@sebgroup/green-angular](https://github.com/seb-oss/green/tree/main/libs/angular)               | [![Stable version](https://img.shields.io/npm/v/@sebgroup/green-angular/latest.svg)](https://www.npmjs.com/package/@sebgroup/green-angular)               | [Changelog](https://github.com/seb-oss/green/tree/main/libs/angular/CHANGELOG.md)        | Angular component library                                               |

| [@sebgroup/chlorophyll](https://github.com/seb-oss/green/tree/main/libs/chlorophyll)             | [![Stable version](https://img.shields.io/npm/v/@sebgroup/chlorophyll/latest.svg)](https://www.npmjs.com/package/@sebgroup/chlorophyll)                   | [Changelog](https://github.com/seb-oss/green/tree/main/libs/chlorophyll/CHANGELOG.md)    | Styling framework                                                       |

| [@sebgroup/green-tokens](https://github.com/seb-oss/green/tree/main/libs/tokens)                 | [![Stable version](https://img.shields.io/npm/v/@sebgroup/green-tokens/latest.svg)](https://www.npmjs.com/package/@sebgroup/green-tokens)                 | [Changelog](https://github.com/seb-oss/green/tree/main/libs/tokens/CHANGELOG.md)         | Design Tokens package                                                   |

| [@sebgroup/green-charts](https://github.com/seb-oss/green/tree/main/libs/charts)                 | [![Stable version](https://img.shields.io/npm/v/@sebgroup/green-charts/latest.svg)](https://www.npmjs.com/package/@sebgroup/green-charts)                 | [Changelog](https://github.com/seb-oss/green/tree/main/libs/charts/CHANGELOG.md)         | An SEB wrapper of [Billboard.js](https://naver.github.io/billboard.js/) |

| [@sebgroup/green-react-charts](https://github.com/seb-oss/green/tree/main/libs/react-charts)     | [![Stable version](https://img.shields.io/npm/v/@sebgroup/green-react-charts/latest.svg)](https://www.npmjs.com/package/@sebgroup/green-react-charts)     | [Changelog](https://github.com/seb-oss/green/tree/main/libs/react-charts/CHANGELOG.md)   | A React version of the charts wrapper                                   |

| [@sebgroup/green-angular-charts](https://github.com/seb-oss/green/tree/main/libs/angular-charts) | [![Stable version](https://img.shields.io/npm/v/@sebgroup/green-angular-charts/latest.svg)](https://www.npmjs.com/package/@sebgroup/green-angular-charts) | [Changelog](https://github.com/seb-oss/green/tree/main/libs/angular-charts/CHANGELOG.md) | An Angular version of the charts wrapper                                |

| [@sebgroup/fonts](https://github.com/seb-oss/green/tree/main/libs/fonts) | [![Stable version](https://img.shields.io/npm/v/@sebgroup/fonts/latest.svg)](https://www.npmjs.com/package/@sebgroup/fonts) | [Changelog](https://github.com/seb-oss/green/tree/main/libs/fonts/CHANGELOG.md) | This package contains SEBs primary font SEB SansSerif                           |

## 📋 Table of content

- [Documentation](https://github.com/seb-oss/green?tab=readme-ov-file#-documentation)

- [Working from SEB](https://github.com/seb-oss/green?tab=readme-ov-file#-working-from-seb)

- [Contribute](https://github.com/seb-oss/green?tab=readme-ov-file#-contribute)

- [Working locally with this repo](https://github.com/seb-oss/green?tab=readme-ov-file#-working-locally-with-this-repo)

## 📚 Documentation

Documentation currently resides in a few different locations:

- [User Interface Guidelines (Design Library)](https://designlibrary.sebgroup.com/)

- [Storybook (@sebgroup/chlorophyll)](https://storybook.seb.io/latest/chlorophyll/)

- [Storybook (@sebgroup/green-core)](https://storybook.seb.io/latest/core/)

- [Storybook (@sebgroup/green-react)](https://storybook.seb.io/latest/react/)

- [Storybook (@sebgroup/green-angular)](https://storybook.seb.io/latest/angular/)

## 🏦 Working from SEB

Working from SEB and on SEB machines you need to setup things in a specific way for everything to work smooth. Checkout our [Developer Guidelines](https://github.sebank.se/pages/seb-common/Developer-garden/detail_pages/green.html) over at Developer Garden.

## 🎉 Contribute

We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our [Contributing Guide](https://github.com/seb-oss/green/blob/main/CONTRIBUTING.md)! 👀

## 🔨 Working locally with this repo

### Start Storybook locally

To start Storybooks locally on your machine you run the following command:

```bash

npx nx run [PROJECT]:storybook

```

Where you replace `[PROJECT]` with a folder name from `green\libs`.

So to start Storybook for each component library run:

```bash

npx nx run chlorophyll:storybook

npx nx run core:storybook

npx nx run react:storybook

npx nx run angular:storybook

```

If you install nx globally you can omit the npx above.

```bash

# Install nx globally

npm install nx -g

# And start the storybooks

nx run chlorophyll:storybook

nx run core:storybook

nx run react:storybook

nx run angular:storybook

```