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';

Extras

• Design System Figma files
• Be sure to have Prettier and ESLint support in you editor

More coming soon...

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