Shared Components library for Vchasno web applications

📦 Install

npm install @vchasno/shared-components

yarn add @vchasno/shared-components

🔨 Usage

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

import React from 'react';
import { Logo } from '@vchasno/shared-components';

const App = () => (
  <>
    <Logo type="edi" />
  </>
);

Styles

Development

Css modules are supported, if you need to create Component.module.css file or Component.css file with global styles

Need to provide a way to customize styles for each component. The native way to do this is to use global css class with prefix vchasno-shared- and css variables with prefix --vchasno-shared- Or you can use css modules and has some specific props to customize styles like className or headerClassName etc.

/* lib/compponen/Comp */
import React from 'react';

import cn from 'classnames';

import css from './Comp.module.css'; // local styles .root, .title
// or
import './Comp.css'; // global styles .shared-component-Comp

interface CompProps {
    className?: string; // prop to customize styles
}

const Comp = ({ className }) => (
  <div className={cn('shared-component-Comp', css.root, className)}>
    <div className={css.title}>Title</div>
  </div>
);

TypeScript

shared-components 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 dev

npm run generate <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

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

To publish new version:

1. Make changes in new branch (e.g. feature/new-component)
2. Add changes to CHANGELOG.md (see Keep a Changelog)
3. Commit changes
4. Create tag with version (e.g. v0.1.2) run npm version patch|minor|major
5. Push changes to remote and create MR to master branch
6. Merge changes to master branch (CI/CD will publish new version to npm registry)