A centralised location to develop and test web components for Domin UI's.

This project should only contain pure and presentational components. These components deal with how UI appears, respond exclusively to props, do not contain app-specific business logic, and are agnostic to how data loads. These properties are essential in allowing the component to be reusable between all Domin projects.

“Storybook is a powerful frontend workshop environment tool that allows teams to design, build, and organize UI components (and even full screens!) without getting tripped up over business logic and plumbing.” – Brad Frost, Author of Atomic Design

🚅 Quick start

1. Clone the application.

   # Clone the template
   git clone [email protected]:Domin-co/web-components.git

2. Install the dependencies.

   Navigate into the folder's directory and install the necessary dependencies.

   # Navigate to the directory
   cd web-components/
   
   # Install the dependencies
   yarn

3. start editing!

   Open the web-components directory in your code editor of choice and build a component!

4. running

   # Run the application
   yarn storybook

🔎 What's inside?

A quick look at the top-level files and directories included with this template.

.
├── node_modules
├── public
├── src
├── .gitignore
├── .env
├── LICENSE
├── package.json
├── yarn.lock
└── README.md

1. node_modules: This directory contains all of the modules of code that this project depends on (npm packages).

2. public: This directory will contain the development and production build of the site.

3. src: This directory will contain all of the code related to what you will see on the application.

4. .env: This file will contain the necessary environment variables for the application.

5. .gitignore: This file tells git which files it should not track or maintain during the development process of the project.

6. LICENSE: This project is adapted from a template licensed under the MIT licence.

7. package.json: Standard manifest file for Node.js projects, which typically includes project specific metadata (such as the project's name, the author among other information). It's based on this file that npm will know which packages are necessary to the project.

8. yarn.lock: This is an automatically generated file based on the exact versions of your npm dependencies that were installed for your project. (Do not change it manually).

9. README.md: A text file containing useful reference information about the project.

Learning Storybook

1. Read the introductory tutorial over at Storybook tutorials.