@vchasno/ui-kit 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [0.1.0] - 2023-10-10
+
+### Added
+
+- first release 0.1.0

package/README.md

@@ -0,0 +1,119 @@
+# UI-Kit library for Vchasno web applications
+
+## 📦 Install
+
+```bash
+npm install @vchasno/ui-kit
+```
+
+```bash 
+yarn add @vchasno/ui-kit
+```
+
+## 🔨 Usage
+
+Supports React ^16.8.0 || ^17.0.0 || ^18.0.0
+
+```jsx
+import React from 'react';
+import { Button } from '@vchasno/ui-kit';
+
+const App = () => (
+  <>
+    <Button type="primary">PRESS ME</Button>
+  </>
+);
+```
+
+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)
+
+```jsx
+// index.tsx
+import "@vchasno/ui-kit/dist/css/_reset.css"; // optional reset styles
+import "@vchasno/ui-kit/dist/css/_base.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-`
+
+To customize styles you can use CSS variables and override them
+
+```css
+/* theme-override.css */
+:root {
+  --transition-duration-sec: 0.5s; // default 0.3s
+}
+
+```
+
+... or more specific styles
+
+```css
+/* 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](https://vchasno.ua/)
+- [Change Log](CHANGELOG.md)
+
+## Development
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Add new component
+
+```bash
+npm run storybook
+```
+
+```bash
+npm run generate-component <ComponentName>
+```
+
+Go to `http://localhost:6006/` and start developing
+
+To create story see [Storybook docs](https://storybook.js.org/docs/react/writing-stories/introduction) or other components
+
+### Build storybook
+
+```bash
+npm run build-storybook
+```
+
+### Build
+
+```bash
+npm run build
+```
+
+### Publish
+
+```bash
+npm publish
+```
+

package/dist/css/_base.css

@@ -0,0 +1,80 @@
+html,
+body {
+    height: 100%;
+    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;
+    font-size: 14px;
+    line-height: 1.2;
+}
+
+a {
+    cursor: pointer;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: none;
+}
+
+a:active {
+    outline: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    margin: 0;
+    font-size: inherit;
+    font-weight: inherit;
+}
+
+td {
+    vertical-align: top;
+}
+
+button::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+    margin: 0;
+}
+
+input::placeholder {
+    user-select: none;
+}
+
+input,
+textarea,
+button {
+    background: transparent;
+    font-family: Roboto, Arial, Tahoma, Helvetica, 'Liberation Sans', sans-serif;
+}
+
+input:focus,
+button:active,
+button:focus,
+textarea:focus {
+    outline: none;
+}
+
+img {
+    display: inline-block;
+    max-width: 100%;
+    max-height: 100%;
+    vertical-align: middle;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+i,
+em {
+    font-style: italic;
+}
+
+* {
+    box-sizing: border-box;
+}

package/dist/css/_reset.css

@@ -0,0 +1,209 @@
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video,
+input {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    font-style: inherit;
+    font-weight: inherit;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
+ol,
+ul {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote::before,
+blockquote::after,
+q::before,
+q::after {
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+html:focus,
+body:focus,
+div:focus,
+span:focus,
+applet:focus,
+object:focus,
+iframe:focus,
+h1:focus,
+h2:focus,
+h3:focus,
+h4:focus,
+h5:focus,
+h6:focus,
+p:focus,
+blockquote:focus,
+pre:focus,
+a:focus,
+abbr:focus,
+acronym:focus,
+address:focus,
+big:focus,
+cite:focus,
+code:focus,
+del:focus,
+dfn:focus,
+em:focus,
+img:focus,
+ins:focus,
+kbd:focus,
+q:focus,
+s:focus,
+samp:focus,
+small:focus,
+strike:focus,
+strong:focus,
+sub:focus,
+sup:focus,
+tt:focus,
+var:focus,
+b:focus,
+u:focus,
+i:focus,
+center:focus,
+dl:focus,
+dt:focus,
+dd:focus,
+ol:focus,
+ul:focus,
+li:focus,
+fieldset:focus,
+form:focus,
+label:focus,
+legend:focus,
+table:focus,
+caption:focus,
+tbody:focus,
+tfoot:focus,
+thead:focus,
+tr:focus,
+th:focus,
+td:focus,
+article:focus,
+aside:focus,
+canvas:focus,
+details:focus,
+embed:focus,
+figure:focus,
+figcaption:focus,
+footer:focus,
+header:focus,
+hgroup:focus,
+menu:focus,
+nav:focus,
+output:focus,
+ruby:focus,
+section:focus,
+summary:focus,
+time:focus,
+mark:focus,
+audio:focus,
+video:focus,
+input:focus {
+    outline: 0;
+}

package/dist/css/_theme.css

@@ -0,0 +1,57 @@
+:root {
+    --transition-duration-sec: 0.3s;
+    --btn-default-bg: transparent;
+    --btn-default-hover-bg: #e1e4ff;
+    --btn-default-color: #6b8091;
+    --btn-default-hover-color: #604adf;
+    --btn-primary-bg: #604adf;
+    --btn-primary-hover-bg: #3f328c;
+    --btn-primary-color: #fff;
+    --btn-secondary-bg: #ffb200;
+    --btn-secondary-hover-bg: #f39300;
+    --btn-secondary-color: #fff;
+    --btn-light-bg: #fff;
+    --btn-light-hover-bg: rgb(96 74 223 / 20%);
+    --btn-light-color: #604adf;
+    --btn-font-size: 14px;
+    --btn-danger-color: #ef6562;
+    --btn-danger-bg: rgb(239 101 98 / 20%);
+    --btn-danger-hover-bg: #ef6562;
+    --btn-danger-hover-color: #fff;
+    --input-border-color-default: #b6cadb;
+    --input-border-color-focused: #6b5fff;
+    --input-color-error: #ff5937;
+    --input-bg-error: rgb(239 101 98 / 10%);
+    --input-font-size: 14px;
+    --input-font-color: #333;
+    --label-color-default:  #6b8091;
+    --label-color-focused: #6b5fff;
+    --checkbox-bg-color: #604adf;
+    --checkbox-disabled-bg: #b6cadb;
+    --checkbox-border-color: #b6cadb;
+    --checkbox-icon-color: #fff;
+    --checkbox-font-size: 12px;
+    --select-option-bg-selected: #f3f6f8;
+    --select-option-color-selected: #333;
+    --select-menu-border-color: #6b5fff;
+    --calendar-color: #6b5fff;
+    --calendar-bg-hover: #ffb200;
+    --stepper-default-color: #dbe5ea;
+    --stepper-active-color: #6b5fff;
+    --text-primary-color: #333;
+    --text-secondary-color: #6b8091;
+    --text-success-color: #1cb800;
+    --text-warning-color: #ffb200;
+    --text-error-color: #ff5937;
+    --alert-info-color: #087dc1;
+    --alert-info-bg: #e9f4ff;
+    --alert-warning-color: #ffb200;
+    --alert-warning-bg: rgb(255 201 123 / 20%);
+    --alert-error-color: #ef6562;
+    --alert-error-bg: rgb(239 101 98 / 10%);
+    --alert-success-color: #1cb800;
+    --alert-success-bg: rgb(28 184 0 / 10%);
+    --tabs-active-color: #087dc1;
+    --pagination-border-color: #6b5fff;
+    --pagination-hover-bg: #e4e0ff;
+}

package/dist/index.d.ts

@@ -0,0 +1,214 @@
+import React, { HTMLAttributes, ButtonHTMLAttributes, InputHTMLAttributes } from 'react';
+import { MaskedInputProps } from 'react-text-mask';
+import { Props } from 'react-select';
+import { CreatableProps } from 'react-select/creatable';
+import { GroupBase } from 'react-select/dist/declarations/src/types';
+import { TextareaAutosizeProps } from 'react-textarea-autosize';
+import { ReactDatePickerProps } from 'react-datepicker';
+
+interface FlexBoxProps extends HTMLAttributes<HTMLElement> {
+    className?: string;
+    tagName?: keyof HTMLElementTagNameMap;
+    direction?: React.CSSProperties['flexDirection'];
+    gap?: number;
+    grow?: React.CSSProperties['flexGrow'];
+    shrink?: React.CSSProperties['flexShrink'];
+    wrap?: React.CSSProperties['flexWrap'];
+    align?: React.CSSProperties['alignItems'];
+    justify?: React.CSSProperties['justifyContent'];
+}
+declare const FlexBox: React.ForwardRefExoticComponent<FlexBoxProps & React.RefAttributes<HTMLElement>>;
+
+interface Sizable {
+    size: 'sm' | 'md' | 'lg';
+}
+type TextType = 'secondary' | 'success' | 'warning' | 'danger' | 'default' | 'link' | 'likeLink';
+interface LoadingFeedback {
+    /** індикатор процесу */
+    loading: boolean;
+}
+interface ErrorFeedback {
+    /** для виведення тексту помилки */
+    error: string;
+}
+interface WithLabel {
+    /** Лейбл для інпуту */
+    label: string;
+}
+interface WithHint {
+    /** для виведення тексту підсказки */
+    hint: string;
+}
+interface EllipsisText {
+    /** для скорочення тексту і виведення 3 точок */
+    ellipsis?: boolean;
+}
+
+type ButtonTheme = "primary" | "secondary" | "transparent" | "light" | "danger";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, Partial<Sizable>, Partial<LoadingFeedback> {
+    className?: string;
+    theme?: ButtonTheme;
+    outline?: boolean;
+    wide?: boolean;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+    className?: string;
+    disabled?: boolean;
+    required?: boolean;
+    wide?: boolean;
+    startElement?: string | React.ReactElement;
+    endElement?: string | React.ReactElement;
+    labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+    children: React.ReactHTMLElement<HTMLInputElement> | React.ReactElement | JSX.Element[];
+}
+declare const Input: React.FC<InputProps>;
+
+interface InputMetaProps extends Partial<WithHint & ErrorFeedback> {
+    className?: string;
+}
+declare const InputMeta: React.FC<InputMetaProps>;
+
+interface MaskInputProps extends MaskedInputProps, Omit<InputProps, 'children'> {
+    inputClassName?: string;
+    labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+}
+declare const MaskInput: React.FC<MaskInputProps>;
+
+interface PaginationProps {
+    className?: string;
+    initPage?: number;
+    total?: number;
+    hideOnSinglePage?: boolean;
+    onChange?: (page: number) => void;
+    current?: number;
+    scrollOnChange?: boolean;
+}
+declare const Pagination: React.FC<PaginationProps>;
+
+interface SelectProps extends Props, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+    wide?: boolean;
+    dataQa?: string;
+}
+declare const Select: React.FC<SelectProps>;
+
+interface Option {
+    readonly label: string;
+    readonly value: string;
+}
+
+interface SelectCreatableProps extends CreatableProps<Option, false | true, GroupBase<Option>>, Partial<WithLabel & WithHint & LoadingFeedback & ErrorFeedback> {
+    wide?: boolean;
+    labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+    dataQa?: string;
+}
+declare const SelectCreatable: React.FC<SelectCreatableProps>;
+
+interface TextInputProps extends InputHTMLAttributes<HTMLInputElement>, Omit<InputProps, 'children'> {
+    inputClassName?: string;
+    labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+}
+declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface TextProps extends HTMLAttributes<HTMLSpanElement>, EllipsisText {
+    type?: TextType;
+    code?: boolean;
+    underline?: boolean;
+    del?: boolean;
+    strong?: boolean;
+    className?: string;
+    required?: boolean;
+}
+declare const Text: React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLSpanElement>>;
+
+interface TitleProps extends EllipsisText, HTMLAttributes<HTMLHeadingElement> {
+    level?: 1 | 2 | 3 | 4 | 5;
+    className?: string;
+}
+declare const Title: React.ForwardRefExoticComponent<TitleProps & React.RefAttributes<HTMLHeadingElement>>;
+
+interface ParagraphProps extends EllipsisText, HTMLAttributes<HTMLParagraphElement> {
+    className?: string;
+    children: React.ReactNode;
+}
+declare const Paragraph: React.ForwardRefExoticComponent<ParagraphProps & React.RefAttributes<HTMLParagraphElement>>;
+
+interface TextAreaInputProps extends TextareaAutosizeProps, Omit<InputProps, 'children'> {
+    textareaClassName?: string;
+    labelProps?: InputHTMLAttributes<HTMLLabelElement>;
+}
+declare const TextAreaInput: React.ForwardRefExoticComponent<TextAreaInputProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+type AlertType = 'error' | 'warning' | 'success' | 'info';
+type IconType = 'info' | 'cross' | 'error' | 'warning' | 'success';
+interface AlertProps {
+    type?: AlertType;
+    icon?: IconType | React.ReactNode;
+    leftBorder?: boolean;
+    className?: string;
+    onClose?: VoidFunction;
+    close?: boolean;
+    wide?: boolean;
+    children: React.ReactNode;
+}
+declare const Alert: React.FC<AlertProps>;
+
+interface DatePickerProps extends ReactDatePickerProps, Partial<LoadingFeedback & WithHint & ErrorFeedback> {
+    label?: string;
+    className?: string;
+}
+/** Компонент вводу дати/часу */
+declare const DatePicker: React.FC<DatePickerProps>;
+
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    /**
+     * CSS color #fff - default
+     */
+    color?: string;
+    /**
+     * CSS width values like  10em | 10px | 50%
+     */
+    width?: React.CSSProperties['width'];
+    /**
+     * CSS height values like  10em | 10px | 50%
+     */
+    height?: React.CSSProperties['height'];
+}
+declare const Spinner: React.FC<SpinnerProps>;
+
+interface SwitcherProps {
+    className?: string;
+    height?: number;
+    color?: string;
+    checked?: boolean;
+    onChecked?: (checked: boolean) => void;
+}
+declare const Switcher: React.ForwardRefExoticComponent<SwitcherProps & React.RefAttributes<HTMLInputElement>>;
+
+interface Tab<T> {
+    key: T;
+    children: React.ReactNode;
+    label: string | React.ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+interface TabsProps<T> {
+    items: Tab<T>[];
+    activeTab?: T;
+    defaultActiveKey?: T;
+    onChange?: (key: T) => void;
+    className?: string;
+    isPending?: boolean;
+}
+declare const Tabs: <T extends string>({ onChange, items, defaultActiveKey, activeTab, className, isPending, }: TabsProps<T>) => React.JSX.Element;
+
+interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement>, Partial<LoadingFeedback> {
+    className?: string;
+    label?: string;
+    disabled?: boolean;
+    partial?: boolean;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+export { Alert, type AlertProps, Button, type ButtonProps, Checkbox, type CheckboxProps, DatePicker, type DatePickerProps, FlexBox, type FlexBoxProps, Input, InputMeta, type InputMetaProps, type InputProps, MaskInput, type MaskInputProps, Pagination, type PaginationProps, Paragraph, type ParagraphProps, Select, SelectCreatable, type SelectCreatableProps, type SelectProps, Spinner, type SpinnerProps, Switcher, type SwitcherProps, Tabs, type TabsProps, Text, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, type TextProps, Title, type TitleProps };