Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nordcloud/gnui
💅 Nordcloud's design system for SaaS products.
https://github.com/nordcloud/gnui
component-library hacktoberfest react storybook typescript ui-library
Last synced: 5 days ago
JSON representation
💅 Nordcloud's design system for SaaS products.
- Host: GitHub
- URL: https://github.com/nordcloud/gnui
- Owner: nordcloud
- License: mit
- Created: 2020-02-04T20:29:52.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2025-01-27T17:45:16.000Z (6 days ago)
- Last Synced: 2025-01-27T18:43:44.367Z (6 days ago)
- Topics: component-library, hacktoberfest, react, storybook, typescript, ui-library
- Language: TypeScript
- Homepage: https://master.du3gff836giqw.amplifyapp.com/
- Size: 19.7 MB
- Stars: 30
- Watchers: 14
- Forks: 15
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
[](http://makeapullrequest.com)
[](#contributors)
# General Nordcloud UI
This repo contains the Nordcloud Design System - a collection of reusable React components used in Nordcloud's SaaS products.
## Components
1. Design System (`/src/components`)
2. Storybook (`/src/stories`)
## Install
```bash
npm install @nordcloud/gnui
```
or
```bash
yarn add @nordcloud/gnui
```
Make sure you have a proper versions of required packages installed, they are specified in `peerDependencies` field inside `package.json`.
Version 7 or greater of `npm` should install them automatically, if not, run:
```bash
npm install react react-dom styled-components
```
Don't forget to install types if you are using TypeScript:
```bash
npm install -D @types/react @types/react-dom @types/styled-components
```
## Usage
Apply global GNUI styles at the top level of your app:
```tsx
import { SetGlobalStyle } from "@nordcloud/gnui";
ReactDOM.render(
,
document.getElementById("root")
);
```
Switch themes:
```tsx
import {
Button,
SVGIcon,
useThemeSwitcher,
THEME_OPTIONS,
} from "@nordcloud/gnui";
function UserSettings() {
const { currentTheme, setTheme } = useThemeSwitcher();
return (
setTheme(nextTheme)}>
Switch to {THEME_OPTIONS[nextTheme].toLowerCase()} theme
);
}
```
## Storybook deployment
Storybook allows you to preview components. It deploys the code automatically with Amplify Console triggered by changes on branch `master`. Pipeline steps are found in `amplify.yml`.
When you create a PR against the `master` branch, Amplify creates a new deployment automatically - the environment will be attached to the PR at Github. Reviewers can preview changes using this deployment - after the PR gets merged or rejected, the environment is destroyed automatically by Amplify Console.
## Contributing to this repo
- Please create your components in `src/components` and update stories in `stores`.
- Code should be formatted using [Prettier](https://prettier.io/).
- We are using styled-components for styling.
- All code should be written using TS.
- Every component props should be described using "type" instead of "interface".
- Name types with Pascal Case naming convention and Props or Data prefix.
## Local setup
### 1. Clone the repo
### 2. Setup Node
Below versions of Node & npm are required:
```bash
"node": ">=18.12.0",
"npm": ">=8.19.2"
```
Run `nvm use` to use supported version.
### 3. Install packages
```bash
npm install
```
### 4. Run Storybook to verify everything works
```bash
npm run storybook
```
## Development
- Make sure to check out [Storybook Design System](https://github.com/storybookjs/design-system)
## Local testing
There is a possibility to build & test the package locally in the project it's currently used in.
```bash
npm run build
npm pack
```
You will get a tarball with the freshly built package, you can copy it inside your project's folder and install with
```bash
npm install nordcloud-gnui-${VERSION}.tgz
```
After the successful installation it's ready to be tested (remember to restart the dev server)
## Contributors
raczyk
Dominik N
Jan Osio
Horay
This project follows the [all-contributors](https://allcontributors.org) specification.
Contributions of any kind are welcome!
## License
Licensed under the MIT License, Copyright © 2020 Nordcloud Engineering
See [LICENSE](./LICENSE) for more information.