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
• React Prop Types with TypeScript
  • Conditional React props with 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
• Atomic Design Principles & Methodology 101

Libraries

Tailwindcss

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

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.

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

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

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 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
• 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 IntelliSense

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