npm package: @getsynapse/design-system
Description: Design System for the Synapse environment
Latest version: 5.88.1-0

# Design System
Welcome to the repo for Synapse's Design System 🎉

Before you jump into creating components, make sure you've read this.

## Typescript
This project uses Typescript to build the library, as oposed to plain Javascript; if you're new to Typescript (and TSX), these links should help get started with Typescript's type checking:

* [Everyday Types](https://www.typescriptlang.org/docs/handbook/2/everyday-types.html)
* [React Prop Types with TypeScript](https://www.benmvp.com/blog/react-prop-types-with-typescript/)
  * [Conditional React props with TypeScript](https://www.benmvp.com/blog/conditional-react-props-typescript/)

## Atomic Design
The Design System is built using the Atomic Design methodology; this means we're thinking of components in hierarchical way, where we have Atoms, Molecules, Organisms, Templates, and Pages, and each level in the hierarchy is composed of elements from the levels below. Here are a couple of links with more information:
* [Atomic Design Methodology](https://atomicdesign.bradfrost.com/chapter-2/)
* [Atomic Design Principles & Methodology 101](https://xd.adobe.com/ideas/process/ui-design/atomic-design-principles-methodology-101/)

## Libraries
### **[Tailwindcss](https://tailwindcss.com/)**
Instead of relying on CSS files and preprocessors, like Sass, we're opting for a CSS utility framework. Colors and breakpoints are already configured for the project.

#### **Colors**
The colors in the Design System specifications are aleady configured here, but keep in mind that more semantic names were used, where the main color in each section is the default one, so something like `SYN2_DARK_BLUE` will be `primary-dark`.

Note that the `tertiary` and `system` colors were renamed. `Tertiary` colors are implemented as their color names (`teal` and `purple`). `System` colors use names related to their roles (`success`, `error`, and `warning`).

This is with the intentions to make theming easier to implement.

### **[Reach UI](https://reach.tech/)**
Accessibilty is a requirement for the Design System, and not all common web patterns are straighforward, so we're leveraging a library that provides some React components with accessibility features already in place. It's also good practice to get familiarized with [WAI-ARIA practices](https://www.w3.org/TR/wai-aria-practices-1.2/).

This library isn't installed already, since each component can be installed individually, we'll add it as needed. If you do need to install a component, make sure the stylesheet attached to it is imported at the top of `src/index.ts` and  `.storybook/preview.js`.

### **[Storybook](https://storybook.js.org/docs/react/get-started/introduction)**
Along with any component created, be sure to include it's stories. This helps us see how the components behave as we're developing, it helps other devs know how the components work without having to implement them, and it can also provide designers a way to see the implementation of their work.

### **[Jest](https://jestjs.io/)**
Whenever you create (or modify) a component, try to also think of potential ways the component can fail and include tests to make sure the component works as expected. This can help catch errors before a component is published, and it also helps prevent new erros being introduced.

## Creating Components
Every component created needs to be placed inside a folder named after the component, along with it's stories and tests file
```
.
└── src
    ├── Atoms
    │   └── Foo
    │       ├── Foo.stories.tsx
    │       ├── Foo.test.tsx
    │       └── Foo.tsx
    └── index.ts
```
Where `index.ts` would contain mostly lines like `export { Foo } from './Atoms/Foo/Foo';`

## Scripts
* `storybook` - Run the Storybook server
* `build` - Generate a new bundle
* `test` - Run Jest tests
* `release` - Bundle files, bump version, and publish to NPM. It takes a `--level` argument that corresponds to `npm version`'s parameter (major | minor | patch | premajor | preminor | prepatch | prerelease | from-git)

## Development with YALC

[YALC](https://github.com/wclr/yalc) is a tool to sidestep the need to publish incremental updates to the NPM repo and still use changes in the main learn_ops application.

### Installation

`npm i yalc -g`

In the design-system root folder:
`yalc publish`

In the learnops-frontend root folder:
`yalc link @getsynapse/design-system`

### Development

Whenever you need to publish a change to the client pacakge:
`npm run build && yalc push`

This will automatically push the changes to the frontend app.  You may need to refresh.

### NPM

Install and run the YALC tool under node v17+.  Run a separate terminal to build design-system in v14.

## Extras
* [Design System Figma files](https://www.figma.com/file/wRs4r6ALLpFZ5uY2Xjed2J/Design-Systems-V2)
* Make sure Prettier runs on save, to make sure styling is applied before commiting the code. For VSCode, I recommend you check this extension: [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
* Tailwindcss is a utility class framework, so I recommend you enable autocomplete for it. I've found this plugin very useful: [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)

P.S. This repo uses `npm` and node `v14` (Fermium)