@billomat/ui

➡️ UI Storybook

Requirements

• React v18.x
• Storybook v.7.x

Prerequistes

Create a .npmrc file in the root of the project to have access to some private company packages. ( If this file is not existing )

# .npmrc

# NPM AUTOMATION CI TOKEN
//registry.npmjs.org/:_authToken=*** AUTHTOKEN HERE ***

Preparing:

1. Clone this repository

$ git clone [e-mail]:billomat/ui.git

Installation and Start:

1. npm ci
2. npm start

Testing locally installing package:

1. npm run build && npm pack
2. npm install ../path/to/ui-x.x.x.tgz // somewhere in your app-project that uses UI

Publishing

// Change Version:
$ npm version major[, minor, patch ]

// Pushing
$ git push --tags

// Publishing
$ npm publish

// Or as a one-liner
$ npm version patch && git push --tags && npm publish

Usage:

1. Install via npm i @billomat/ui

import { FC } from 'react';
import { Button } from '@billomat/ui';

const SomeComponent: FC = () => (
    <div>
        <Button label="Button Text" />
    </div>
);

export default SomeComponent;

2. Somewhere on top in your main (s)css file

@import '~@billomat/ui/dist/index.css';

Working together with UI-Iconset

Add this part below to the webpack configuration file

module: {
    rules: [
        {
            // @svgr is installed
            test: /\.svg$/,
            exclude: /node_modules/,
            use: ['@svgr/webpack'],
        },
        {
            // All UI Icons
            test: /@billomat[\\/]ui.*\.svg$/,
            type: 'asset/resource',
            generator: {
                filename: 'icons/[name].[contenthash][ext]',
            },
        },
        {
            // All other SVG files
            test: /\.svg$/,
            exclude: /@billomat[\\/]ui/,
            type: 'asset/resource',
            generator: {
                filename: 'assets/[name].[contenthash][ext]',
            },
        },
    ],
},

Directory Structure

┌─ config                          # All about configurations like webpack, babel, jest
├─ dist                            # Bundled JS and TS declaration file for deployed npm package
├─ src                             # All the source code
│  ├─ assets                       # Asset files, like fonts, images, etc.
│  ├─ components                   # React components
│  │  └─ Button                    # Component directory
│  │     ├─ Button.tsx             # Component for npm package
│  │     ├─ Button.scss            # Component style
│  │     ├─ Button.stories.mdx     # Component story for storybook
│  │     └─ Button.test.tsx        # Component test using jest
│  ├─ utils                        # Storybook internal shared utils
│  ├─ scss                         # Common scss directory
│  ├─ index.ts                     # Production entry that exports all components
│  ├─ declarations.d.ts            # Some module declarations
│  └─ types.d.ts                   # Gobal type definitions
├─ .gitignore                      # Excluded files for ignoring Git version control
├─ index.scss                      # Important scss entrypoint to use with `npm link`
├─ index.ts                        # Important js entrypoint to use with `npm link`
├─ readme.md                       # This file
├─ package-lock.json               # Package settings that locked the version of dependencies packages
├─ package.json                    # Package settings that listed dependencies packages, npm scripts, project name etc.
└─ tsconfig.json                   # TypeScript settings