# pattern-library-skeleton > A awesome pattern library for your products and experiences! Latest version **1.0.0** (published 2020-04-15) Β· ISC license Β· 0 weekly downloads ## Install ```sh npm install pattern-library-skeleton pnpm add pattern-library-skeleton yarn add pattern-library-skeleton bun add pattern-library-skeleton ``` ## Health **Score 15/100 (F)** β€” status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2020-04-15 | | First published | 2020-04-15 | | Weekly downloads | 0 | | License | ISC | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 5 | | Unpacked size | 420 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Juan Carlos Ruiz | | Maintainers | nuriall | ## Links - npm: https://www.npmjs.com/package/pattern-library-skeleton - Repository: https://github.com/klaufel/pattern-library-skeleton - Homepage: https://github.com/klaufel/pattern-library-skeleton#readme - Issues: https://github.com/klaufel/pattern-library-skeleton/issues - npm.io page: https://npm.io/package/pattern-library-skeleton ## Dependencies (5) - [react](https://npm.io/package/react.md) ^16.13.1 - [react-dom](https://npm.io/package/react-dom.md) ^16.13.1 - [prop-types](https://npm.io/package/prop-types.md) ^15.7.2 - [styled-components](https://npm.io/package/styled-components.md) ^5.1.0 - [@edma/design-tokens](https://npm.io/package/@edma/design-tokens.md) ^4.2.8 ## Recent versions - 1.0.0 (latest) β€” 2020-04-15 ## README

#zapatillasFromMarsπŸ‘ŸπŸš€

πŸ‘‹ Welcome to pattern library skeleton

A awesome design system for your products and experiences!

Netlify Status

Overview β€’ Getting Started β€’ Architecture β€’ Guidelines β€’ Testing

Design tokens figma file

## :fire: Overview We use of the best tools to improve the workflow to allow you to create an awesome library of components! - [ReactJs](https://facebook.github.io/react/) v16 - Type checking with [PropTypes](https://www.npmjs.com/package/prop-types) - [styled-components](https://styled-components.com/) for styling components and application - Compiled of modern JavaScript with [Babel](https://github.com/babel/babel) and bundle with [Webpack](https://webpack.js.org/) - [Jest](https://jestjs.io/) and [Testing library](https://testing-library.com/) for unit/ui testing - Automate Git hooks with [Husky](https://github.com/typicode/husky) - Code linting using [Eslint](https://github.com/eslint/eslint) - Code formatter using [Prettier](https://prettier.io/) - Developing isolated UI components with [Storybook](https://storybook.js.org/) ## :rocket: Getting Started To get you 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](https://www.figma.com/file/IGr2xoqcZX91CU7CDr4ZsI) For more info to config your design tokens file, visit ["How to configure design tokens with Figma API"](https://pattern-library-skeleton.netlify.com/?path=/docs/overview-intro--page) #### Installing You can clone our Git repository: `$ git clone git@github.com:klaufel/pattern-library-skeleton.git` #### Wiring up your development environment Setting 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` ## :triangular_ruler: Architecture Based on [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles, methodology for creating design systems. There are five distinct levels of components: - Atomic Design component structure: - Atoms - Molecules - Organism - Templates - Pages When we use the library, the maximum level of component that we are going to have would be an `organism`, the rest of the `templates`and `pages` components are built in 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 to put our application source code - `components` Add your components here! This folder is divided from [Atomic Design](https://bradfrost.com/blog/post/atomic-web-design/) principles. - `docs` Add documentation as stories for design system. - `figma-tokens` Folder all functions to generate figma design tokens with API. - `styles` Folder 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**: Folder which contains our component. - `__stories__`: Folder to contains the stories for Storybook. - `MyComponent.stories.js`: Contains the stories of component for Storybook - `__tests__`: Folder to contains the tests of component. - `__snapshots__`: Folder to contains the snapthots tests, autogenerated for jest. - `MyComponent.test.js.snap`: Snapshot file, autogenerated for jest. - `MyComponent.test.js`: Contains the test of component. - `MyComponent.styles.js`: Contain the styles of component (styled-components / CSS-in-JS). - `index.js`: Contains the React component, HTML or other imports from ui-library. ## :nail_care: 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. ## :pray: Testing the application [Jest](https://jestjs.io/), a delightful javascript testing framework and [Testing Library](https://testing-library.com/) builds 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 and show coverage and open report in your default browser. --- _Source: https://npm.io/package/pattern-library-skeleton Β· Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._