Skip to content

#zapatillasFromMars๐Ÿ‘Ÿ๐Ÿš€ A awesome design system for your products and experiences!

Notifications You must be signed in to change notification settings

klaufel/pattern-library-skeleton

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

#zapatillasFromMars๐Ÿ‘Ÿ๐Ÿš€

๐Ÿ‘‹ Welcome to pattern library skeleton

An awesome design system for your products and experiences!

Netlify Status

Overview โ€ข Getting Started โ€ข Architecture โ€ข Guidelines โ€ข Testing

Design tokens figma file

๐Ÿ”ฅ Overview

We use the best tools to improve our workflow, allowing us to create an awesome library of components!

๐Ÿš€ Getting Started

To get started you need to meet the prerequisites, and then follow the installation instructions.

Figma design tokens example

Figma file: https://www.figma.com/file/IGr2xoqcZX91CU7CDr4ZsI

For more info on configuring your design tokens file, visit "How to configure design tokens with Figma API"

Installing

You can clone our Git repository:

$ git clone git@github.com:klaufel/pattern-library-skeleton.git

Wiring up your development environment

Hooking it up is as easy as running:

$ npm run install

This command will install all the required dependencies. Please note that npm install is only required on your first start, or in case of updated dependencies.

Initializing Storybook

$ npm run storybook

Generate design tokens as variables

$ npm run tokens

๐Ÿ“ Architecture

Based on the Atomic Design principles, a methodology for creating design systems, there are five distinct levels of components:

  • Atomic Design component structure:
    • Atoms
    • Molecules
    • Organism
    • Templates
    • Pages

When we use a UI library, the highest abstraction of components that we expose would be an organism. The rest of the template and page components are built within the application that imports the library.

Source project structure:
โ””โ”€โ”€ src
    โ”œโ”€โ”€ components
    โ”‚	โ”œโ”€โ”€ atoms
    โ”‚	โ”œโ”€โ”€ molecules
    โ”‚	โ”œโ”€โ”€ organism
    โ”‚	โ””โ”€โ”€ pages *
    โ”œโ”€โ”€ docs
    โ”œโ”€โ”€ figma-tokens
    โ”œโ”€โ”€ styles
    โ””โ”€โ”€ index.js (entry point)
  • src: The place where we put our application source code - components Add your components here! This folder is divided from Atomic Design principles.
  • docs Our documentation as stories for the design system.
  • figma-tokens Directory containing functions to generate figma design tokens with API.
  • styles Directory to add global styles and theme to build components.
  • index.js Entry point, import all components and export to generate package to use in project as a dependency.

Example of component structure
โ””โ”€โ”€ MyComponent
    โ”œโ”€โ”€ __stories__
    โ”‚   โ””โ”€โ”€ MyComponent.stories.{js|mdx}
    โ”œโ”€โ”€ __tests__
    โ”‚	โ”œโ”€โ”€ __snapshots__
    โ”‚	โ”‚   โ””โ”€โ”€ MyComponent.test.js.snap
    โ”‚   โ””โ”€โ”€ MyComponent.test.js
    โ”œโ”€โ”€ MyComponent.styles.js
    โ””โ”€โ”€ index.js
  • mycomponent: Directory containing our component.
    • __stories__: Directory containing the stories for Storybook.
      • MyComponent.stories.js: File containing the component stories.
    • __tests__: Directory containing the tests for Jest.
      • __snapshots__: Directory containing the autogenerated Jest Snapshots.
        • MyComponent.test.js.snap: Autogenerated Snapshot file.
      • MyComponent.test.js: File containing the component tests.
    • MyComponent.styles.js: File containing the component styles (styled-components / CSS-in-JS).
    • index.js: File containing the React component, HTML or other imports from ui-library.

๐Ÿ’… Guidelines

Linting

$ npm run lint Find problems in your code (js)

Formatter

$ npm run prettier:check Find format problems in your code.

$ npm run prettier:write Fix format problems in your code.

๐Ÿ™ Testing the application

Jest, a delightful javascript testing framework and Testing Library build on top of DOM testing library by adding APIs for working with React components.

Running your tests

$ npm run test Will perform your unit testing.

$ npm run test:update Will perform your unit testing and update snapshots.

$ npm run test:watch Will perform your unit testing and watchers tests.

$ npm run test:coverage Will perform your unit testing and show coverage.

$ npm run test:coverage-web Will perform your unit testing, show coverage, and open the report in your default browser.

About

#zapatillasFromMars๐Ÿ‘Ÿ๐Ÿš€ A awesome design system for your products and experiences!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published