Design System for the Synapse environment
npm install @getsynapse/design-systemBefore you jump into creating components, make sure you've read this.
* Everyday Types
* React Prop Types with TypeScript
* Conditional React props with TypeScript
#### 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.
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.
.
āāā 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 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.
$3
npm i yalc -gIn the design-system root folder:
yalc publishIn the learnops-frontend root folder:
yalc link @getsynapse/design-system$3
Whenever you need to publish a change to the client pacakge:
npm run build && yalc pushThis will automatically push the changes to the frontend app. You may need to refresh.
$3
Install and run the YALC tool under node v17+. Run a separate terminal to build design-system in v14.
Extras
* Design System Figma files
* 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
* Tailwindcss is a utility class framework, so I recommend you enable autocomplete for it. I've found this plugin very useful: Tailwind CSS IntelliSenseP.S. This repo uses
npm and node v14` (Fermium)