UI-Kit library for Vchasno web applications

📦 Install

npm install @vchasno/ui-kit

yarn add @vchasno/ui-kit

🔨 Usage

1. 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,
                        },
                    },
                ],
            },
        ],
    },
};

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

• Home page
• Change Log

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 version to npm registry

Publishing to npm registry is only done through CI/CD pipeline.

To publish a new version:

1. Create a feature branch (e.g. feature/new-component)

2. Make your changes

3. Update CHANGELOG.md (see Keep a Changelog)

4. Commit changes and create a merge request to master

5. After merge to master, checkout master and pull latest changes

6. Create a version tag by running one of:

   Note: This package is in alpha stage (0.x.x), versioning works differently:

   • npm version patch - for bug fixes or backward-compatible features (0.0.x)
   • npm version minor - for features with breaking changes (0.x.0)

   DO NOT USE npm version major until v1.0 stable release

7. Push the changes with the tag: git push --follow-tags or git push && git push --tags

8. CI/CD pipeline will start the publish job

9. Manually confirm the publish stage in CI/CD to release to npm registry