Storybook Design System to work with Design and Engineering Team at AVANA.

🚅 Quick start

You can pick one of the solution, first one is manual installation.

Manual Instalation

The installation is pretty straight forward, run this npm install git+https://github.com/avanaone/marathon-library.git#master to add the library into main application, make sure you login with your account in organization github, oh no!? you didn't have the access, go find someone can give you the access.

The Boilerplate

Follow this if you prefer to use the boilerplate that we already prepared, clone the following repo and then you good to go to create new product

TODO: To be worked on

Tips

Add this config into your .zshrc or .bashrc file so the nodejs version is automatically used the right version using nvm.

Config: https://github.com/nvm-sh/nvm#automatically-call-nvm-use

🔎 What's inside?

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

.
├── .storybook
├── cypress
├── dist
├── node_modules
├── public
├── src
| ├── components
| ├── icons
| └── utils
├── storybook-static
├── .babelrc
├── .env.local
├── .gitignore
├── cypress.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── README.md
├── setupFile.js
├── tailwind.config.js
└── webpack.config.js

1. .storybook: This directory contains Storybook's configuration files.

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

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

4. src: This directory will contain all of the code related to what you will see on your application: icons for icon library, components for component library, and utils for useful-utility library.

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

6. 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.

7. package-lock.json: 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).

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

Learning Storybook

1. Read our introductory tutorial at Learn Storybook.
2. Learn how to transform your component libraries into design systems in our Design Systems for Developers tutorial.
3. See our official documentation at Storybook.