@vchasno/ui-kit NPM

UI-Kit library for Vchasno web applications

📦 Install

npm install @vchasno/ui-kit

yarn add @vchasno/ui-kit

🔨 Usage

Supports React ^16.8.0 || ^17.0.0 || ^18.0.0

import React from 'react';

import { Button } from '@vchasno/ui-kit';
// import complex components (separate bundles)
import Datepicker from '@vchasno/ui-kit/Datepicker';
import Select from '@vchasno/ui-kit/Select';
import SelectCreatable from '@vchasno/ui-kit/SelectCreatable';

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

🔨 Package entry points

@vchasno/ui-kit - ES bundle, TypeScript typings - common components
@vchasno/ui-kit/Datepicker - ES bundle, TypeScript typings and base react-datepicker dependencies
@vchasno/ui-kit/Select - ES bundle, TypeScript typings and base react-select dependencies
@vchasno/ui-kit/SelectCreateble - ES bundle, TypeScript and base react-select dependencies

We separate some components to separate bundles to reduce bundle size

Datepicker component has a lot of dependencies, and if you don't use it, you don't need to import it, also it will no have effect if you already have imported it and styles

📦 Import styles

Optionally you can import styles (use all or only what you need)

Suggestions:

import reset styles
import base styles
import theme variables (will apply base theme)
create your own theme variables override file (override only what you need)

// index.tsx
// optional reset styles
import '@vchasno/ui-kit/dist/css/_base.css';
import '@vchasno/ui-kit/dist/css/_reset.css';
// optional base styles
import '@vchasno/ui-kit/dist/css/_theme.css';
// optional theme variables
import 'src/styles/_theme-override.css';

// yuor own css file with theme variables override

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 - 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