Webtretho Storybook

🔗 What is insided?

• TypeScript
• Sass
• classnames
• Storybook
• React Testing Library
• Eslint
• Storybook Deployer

🧾 Prerequisites

• NodeJS (v16.0+)
• Docker (TBD)
• Docker Compose (TBD)

🛠 How to use

@storybook/cli

npm install -g @storybook/cli

Install and Start

yarn && yarn storybook
# or npm install && npm run storybook  

📌 Scripts

• test: run all jest tests
• storybook: Start and launch Storybook. Run storybook on 6006 port
• lint: Lints and fixes files. run the linter on all components
• build-storybook: Compiles and minifies for production. Create the build version of storybook

👏 Absolute paths

TypeScript

// anyComponent.tsx
import { Component } from 'packages/Component';
import sass from 'sass/*';

SCSS

// component.module.scss
@import "sass/*";
@import "sass/config/colors";

Read more

• Distribute UI across an organization

• Introduction to design systems

🕹 Usage

After publishing our lib (@webtretho/webtretho-storybook) you can import and use the component:

//
import React from 'react'
import { Button } from '@webtretho/webtretho-storybook'

const App = () => {
  render() {
    return <Button />
  }
}

🚀 How to publish the library to NPM

Checkout the latest version of the master branch

git checkout master
git pull

Update the library version number

Can be "major", "minor", or "patch". Almost always use "patch", unless implementing significant changes.

npm version patch

or the following for a prerelease:

npm version prerelease --preid=alpha

Push the newly created version and tag

git push origin <BRANCH> --follow-tags

Build the library

npm run build

Authorize NPM

Add your username, password, email

npm adduser

Publish the library

If this is a standard release of the current major version use:

npm publish

If this is an experimental release, use the "alpha" tag.

npm publish --tag alpha

This will ensure that the "latest" tag doesn't get updated.