Ds-storybook NPM

View Latest Build

The latest version of the storybook can be viewed here

Getting Started

To get a local copy up and running follow these steps.

Installation

Clone the repo

git clone https://github.com/Solera-Engineering/global-design-storybook.git

Install NPM packages
```
npm install
```
Run App
```
npm start
```

Development Process

After cloning and setting up the project, here is the general workflow for contributing to the repo. This process will likely evolve over time as we become more experienced.

After being assigned a component or feature, create a corresponding issue in GitHub if one does not already exist. Be sure to add the appropriate label and assign it to yourself.
Create a new branch for the issue. The easiest way to do this is directly from the issue page. Switch to this branch before starting development work.
Create a new folder for your component in src/solera_components and begin developing the component. The easiest way to do this is to start by copying the old version of the component. Source code for the components can be found here, here, or by installing the package through NPM into another project and finding it in the node_modules folder.
Once the old version has been copied, fix any references to @solera-components so that they point towards the new versions that are local to the project.
The old component will most likely have an scss file but you will also need to create a style.css file and reference it in your index.jsx. Look through the code of your component and any sub-components for css class names and then search for that in the style.css file from @solera-components/theme. That file can be found here under package->dist->css
Copy any css that matches the classes of your component into the style.css file in your component folder. In the near future we will rework how our theming is organized and developed but this is the easiest way to get the component ready for testing and keep the styling local to the components it affects.
After having a starting point for the component, create a basic story so that you can view and debug it. Do this by creating a new file in src/stories with the naming scheme of componentname.stories.js
Set up the file in the same way as the other story files in the folder. When you're ready to add the args for the different versions of the component, it can be helpful to reference the story definitions from the original storybook which can be found here by going to the story for the component and then clicking on the story tab.
It is important to note that the syntax for defining stories in the old storybook is no longer supported by the version we are using today, so you aren't able to just copy and paste the old ones.
At this point you should be able to run the app and see the story for your component listed on the side bar. More than likely the component will throw an error or not display correctly right away. There is no single way to resolve these errors, you will just have to debug and fix the issues one at a time until it renders.
Finally, you can now begin tweaking the component so that it matches the design created by the UI team. Don't forget to check the component list page and view any design documents that are attached to the component. If you have any questions about the design, consult with a member of the UX team.
Once your changes are complete, push your commits to the repo and create a pull request. All PRs should receive two developer approvals before being approved and merged by the UI team.

Publish Component Library

This library could be publish allowing all projects to use its components.

How to Publish

Make your changes.
Change the version number in package.json file.
Build the library
```
npm run build
```
Make sure that your .npmrc file is configured to use in the repository that you want to publish the library.
Publish the library
```
npm publish
```
A new version of the library is published.

Use the component Library

The published library could be use by any project.

How to install it

Make sure that your .npmrc file is configured to use with the repository that the library is published.
Install the library
```
npm install ds-solera
```
Components are ready to be used in your project.
Enjoy the library :)