@vchasno/ui-kit NPM

UI-Kit library for Vchasno web applications

📦 Install

npm install @vchasno/ui-kit

yarn add @vchasno/ui-kit

🔨 Usage

Before consuming components, you need to import required CSS into your project. Preferable way is to use global css import or postcss imports:

import directly into your project if your bundler supports it

// index.tsx
// optional reset styles
import '@vchasno/ui-kit/dist/css/_base.css';
import '@vchasno/ui-kit/dist/css/_reset.css';
// required main css which includes variables and styles
import '@vchasno/ui-kit/dist/css/vchasno-ui.css';
// override theme if needed (more info in "Styling and customization" section)
import 'src/styles/_theme-override.css';

using postcss @import statement

/* globals.css */
// optional reset styles
@import '@vchasno/ui-kit/dist/css/_base.css';
@import '@vchasno/ui-kit/dist/css/_reset.css';
// required main css which includes variables and styles
@import '@vchasno/ui-kit/dist/css/vchasno-ui.css';
// override theme if needed (more info in "Styling and customization" section)
@import './styles/_theme-override.css';

Configure webpack to import vchasno-ui.css file in global mode if needed. For example:

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    {
                        loader: 'css-loader',
                        options: {
                            import: true,
                            modules: {
                                mode: (resourcePath) => {
                                    if (/\/node_modules\//i.test(resourcePath)) {
                                        return 'global';
                                    }

                                    return 'local';
                                },
                                localIdentName: '[name]__[local]__[hash:base64:5]',
                            },
                            importLoaders: 2,
                        },
                    },
                ],
            },
        ],
    },
};

Now you can import react components based on your needs

import React from 'react';

import { Button } from '@vchasno/ui-kit';

const App = () => (
    <>
        <Button type="primary">PRESS ME</Button>
    </>
);

Styling and customization

vchasno-ui is using global styles with prefix vchasno-ui- css variables start with the prefix --vchasno-ui-

To customize styles you can use CSS variables and override them

/* theme-override.css */
:root {
  --vchasno-ui-transition-duration-sec: 0.5s; // default 0.3s
}

... or more specific styles

/* button-override.css */
:global(.vchasno-ui-button.--sm) {
  padding: 0 20px; // default 0 15px
}

TypeScript

vchasno-ui is written in TypeScript with complete definitions

🌍 Internationalization

Supports only Ukrainian language

🔗 Links

Development

Install dependencies

npm install

Add new component

npm run storybook

npm run generate-component <ComponentName>

Go to http://localhost:6006/ and start developing

To create story see Storybook docs or other components

Build storybook

npm run build-storybook

Build

npm run build

Publish new version

0.2 versions

Should develop in v0.2 branch. All merge requests should be merged to v0.2 branch

0.3 version

Should develop in v0.3 branch. All merge requests should be merged to v0.3 branch

0.4 version - latest

Should develop in master branch. All merge requests should be merged to master branch

Publish version to npm registry

Publish new version to npm registry can only be done with CI/CD

To publish new version:

Make changes in new branch (e.g. feature/new-component)
Add changes to CHANGELOG.md (see Keep a Changelog)
Commit changes
Create tag with version (e.g. v0.1.2) run npm version patch|minor|major
Push tag to remote repository
Publish job will be started in CI/CD pipeline (only for master branch or version tag)
Confirm (CI/CD prepared manual stage) publish - new version will be published to npm registry