Components Base

Usage in project

npm install krzyszti-software-funhouse/components-base
# or
yarn add krzyszti-software-funhouse/components-base

and then use code:

import { Example } from 'components-base';

Pre-use steps

npm install

Scripts

Start (will start storybook server)

npm run start

Export (will export files with storybook output)

npm run export

Deploy (will deploy Storybook current master's version)

npm run deploy:storybook

Deploy branch (will deploy Storybook from BRANCH instead of master)

npm run deploy:storybook -- --source-branch=BRANCH

Build (will run rollup to build files)

npm run build

During development scripts

Create component

# Creates Atom component
npm run component:create:atom [ComponentName]

# Creates Molecule component
npm run component:create:molecule [ComponentName]

# Creates Organism component
npm run component:create:organism [ComponentName]

# Creates Template component
npm run component:create:template [ComponentName]

# Creates Page component
npm run component:create:page [ComponentName]

It will create component under src/components/[ComponentName]/ structured:

src
└── components
    ├── atoms
    │    [ComponentName]
    │    │   ├── [ComponentName].stories.tsx
    │    │   ├── [ComponentName].styled.ts
    │    │   ├── [ComponentName].tsx
    │    │   └── [ComponentName].types.ts
    │    └── index.ts
    ├── molecules
    │    [ComponentName]
    │    │   ├── [ComponentName].stories.tsx
    │    │   ├── [ComponentName].styled.ts
    │    │   ├── [ComponentName].tsx
    │    │   └── [ComponentName].types.ts
    │    └── index.ts
    ├── molecules
    │    [..]
    ├── organisms
    │    [..]
    ├── templates
    │    [..]
    └── pages
         [..]