kwant-ui 3.45.0-dev.0 → 3.45.0

package/README.md

@@ -1,73 +1,181 @@
-# Kwant UI Components
-
-Welcome to Kwant UI Components! This repository contains a collection of reusable user interface components that can be used to build modern and responsive web applications. These components are designed to provide a consistent and intuitive user experience across different platforms and devices.
-
-## Table of Contents
-
-- [Installation](#installation)
-- [Development environment](#Development)
-- [Usage](#usage)
-- [Storybook](#storybook)
-
-## Installation
-
-To install Kwant UI Components, you can use NPM or YARN package manager.
-
-```bash
-# npm
- npm install kwant-ui
-
-# yarn
- yarn add kwant-ui
-```
-
-## Development
-
-#### Clone the repository to your local machine:
-
-```bash
- git clone git@gitlab.com:kwant.ai/frontend/ui-components.git
-```
-
-#### Navigate to the project directory:
-
-```bash
-cd ui-components
-```
-
-#### Install the required dependencies:
-
-```bash
- npm install
-```
-
-If you encounter a `Could not resolve dependency` error when configuring the packages above, you can either downgrade Rollup to v3.0.0, downgrade the version of the plugins that have the dependency issue to the version suggested in the terminal, or try running the command with the `--force` option.`
-
-## Usage
-
-You can now import the components into your project and start using them. Here's an example of how to use a button component:
-
-example
-
-```jsx
-import React from 'react';
-import { Button } from 'kwant-ui';
-
-function App() {
-  return (
-    <div>
-      <Button variant='primary'>Click me</Button>
-    </div>
-  );
-}
-
-export default App;
-```
-
-## Storybook
-
-You can explore and interact with the Kwant UI Components using our Storybook. The Storybook showcases all the available components with their various configurations and states.
-
-You can access the Storybook here: [Kwant UI Components Storybook](https://ui.kwant.ai/)
-
-Feel free to experiment with the components and see how they can be customized and integrated into your projects.
+# Kwant-UI
+
+`kwant-ui` is the official frontend component library for Kwant-App. It provides a set of reusable, accessible, and themeable React components to build beautiful and consistent user interfaces.
+
+## 📋 Table of Contents
+
+- [About The Project](#about-the-project 'null')
+- [Installation](#installation 'null')
+- [Usage](#usage 'null')
+- [Storybook: Visualizing Components](#storybook-visualizing-components 'null')
+- [Available Scripts for Development](#available-scripts-for-development 'null')
+
+- [Publishing to NPM](#publishing-to-npm)
+- [Folder Structure](#folder-structure 'null')
+- [Contributing](#contributing 'null')
+
+## 🚀 About The Project
+
+This library contains all the foundational UI elements required for the Kwant ecosystem. Each component is built with TypeScript for type safety and styled to fit our design system. The components are bundled using Rollup.js for optimized performance.
+
+**Built With:**
+
+- [**React**](https://reactjs.org/ 'null')**:** A JavaScript library for building user interfaces.
+
+- [**Styled Components**](https://styled-components.com/ 'null')**:** For component level styling.
+
+- [**TypeScript**](https://www.typescriptlang.org/ 'null')**:** For robust, type-safe components.
+- [**Storybook**](https://storybook.js.org/ 'null')**:** For developing and showcasing components in isolation.
+- [**Rollup.js**](https://rollupjs.org/ 'null')**:** For bundling the library into a distributable format.
+- [**ESLint**](https://eslint.org/ 'null')**:** For maintaining code quality.
+
+## 📥 Installation
+
+To use kwant-ui in your project, you need to install the library along with its peer dependencies.
+
+Install with npm:
+
+```
+npm install kwant-ui react react-dom styled-components react-viewport-list
+```
+
+**Note:** `react-dom, styled-components, react-viewport-list` are a peer dependency and must be installed alongside `kwant-ui`.
+
+## 💡 Usage
+
+To use `kwant-ui`, you must wrap your application with the `ThemeProvider` from `styled-components` and provide it with a theme from our library. This is a required step for the components to render correctly.
+
+### 1. Set up the ThemeProvider
+
+In your main application entry point (`main.tsx` or `index.tsx`), set up the provider as follows:
+
+```
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { createBrowserRouter, RouterProvider } from 'react-router-dom';
+import { ROUTES } from './routes';
+import { ThemeProvider } from 'styled-components';
+import './assets/styles/index.scss';
+import { colors } from 'kwant-ui';
+
+const router = createBrowserRouter(ROUTES);
+
+ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+  <React.StrictMode>
+    <ThemeProvider theme={colors}>
+      <RouterProvider router={router} />
+    </ThemeProvider>
+  </React.StrictMode>
+);
+
+```
+
+### 2. Use Components in Your App
+
+Once the `ThemeProvider` is set up, you can import and use any component from the library throughout your application.
+
+```
+import React from 'react';
+import { Button, Text } from 'kwant-ui';
+
+function MyComponent() {
+  return (
+    <>
+      <Text category="subtitle2" weight="semiBold">Welcome</Text>
+      <Button onClick={() => alert('Button Clicked!')} label="Click Me"/>
+    </>
+  );
+}
+
+export default MyComponent;
+
+```
+
+## 📖 Storybook: Visualizing Components
+
+We use Storybook for interactive development and documentation. It allows you to browse the component library, view the different states of each component, and interact with them in a live environment.
+
+#### Live Playground
+
+_Explore the live Storybook playground at:_ [_https://ui.kwant.ai/_](https://ui.kwant.ai/ 'null')
+
+#### Local Development
+
+To run Storybook locally, clone this repository and run:
+
+```
+npm run storybook
+```
+
+This will start the Storybook development server on [http://localhost:6006](https://www.google.com/search?q=http://localhost:6006 'null').
+
+## 📜 Available Scripts for Development
+
+These scripts are for the development and maintenance of this library.
+
+### `npm run storybook` or `npm run dev`
+
+Starts the Storybook development server. This is the primary command for developing and testing components in isolation.
+
+### `npm run build`
+
+```
+rm -rf ./dist && rollup -c --bundleConfigAsCjs
+```
+
+Builds the library for production. It first cleans the `dist` directory and then uses Rollup to bundle the components into an optimized format suitable for publishing to NPM.
+
+### `npm run prebuild`
+
+This script runs automatically before the `build` script.
+
+- `npm run generate-icon-types`: Executes a utility script to automatically generate TypeScript type definitions for the icons used in the library.
+
+### `npm run build-storybook`
+
+Builds a static version of the Storybook documentation site, which can be deployed and hosted online.
+
+### `npm run lint`
+
+```
+eslint "**/*.ts*"
+```
+
+Lints all TypeScript files (`.ts` and `.tsx`) in the project to enforce code quality and style consistency.
+
+## 📦 Publishing to NPM
+
+For instructions on how to publish a new version of `kwant-ui` to the NPM repository, please refer to our internal documentation on Confluence.
+
+[**Publishing Guide: Publishing a version of ui-components(npm package)**](https://ontargetapp.atlassian.net/wiki/x/AwDcfg 'null')
+
+## 📂 Folder Structure
+
+The library is organized as follows:
+
+```
+kwant-ui/
+├── .storybook/         # Storybook configuration files
+├── components/         # The source code for all React components
+├── GlobalStyles/       # Global CSS styles and resets
+├── HOC/                # Higher-Order Components
+├── hooks/              # Custom React hooks
+├── stories/            # Storybook stories for each component
+├── themes/             # Design tokens (colors, spacing, typography)
+├── types/              # Global TypeScript type definitions
+├── utils/              # Utility scripts, like the icon type generator
+├── .eslintrc.cjs       # ESLint configuration
+├── .prettierrc         # Prettier configuration
+├── package.json        # Project dependencies and scripts
+├── rollup.config.js    # Rollup configuration for building the library
+└── tsconfig.json       # TypeScript configuration
+
+```
+
+## 🤝 Contributing
+
+1.  Fork the Project
+2.  Create your Feature Branch (`git checkout -b PR-JIRA-TICKET-ID`)
+3.  Commit your Changes (`git commit -m 'Add NewComponent'`)
+4.  Push to the Branch (`git push origin PR-JIRA-TICKET-ID`)
+5.  Open a Pull Request

package/dist/GlobalStyles/index.d.ts

@@ -1,5 +1,5 @@
-import { Color } from '../themes/types';
-declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{
-    theme: Color;
-}, import("styled-components").DefaultTheme>;
-export { GlobalStyles };
+import { Color } from '../themes/types';
+declare const GlobalStyles: import("styled-components").GlobalStyleComponent<{
+    theme: Color;
+}, import("styled-components").DefaultTheme>;
+export { GlobalStyles };

package/dist/GlobalStyles/types.d.ts

@@ -1,17 +1,17 @@
-/// <reference types="react" />
-export declare namespace TextComponent {
-    type Props = ParagraphTypes & {
-        onClick?: (event: React.MouseEvent<HTMLParagraphElement, MouseEvent>) => void;
-        children?: React.ReactNode;
-        type?: Type;
-    };
-    type Category = 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'link' | 'title';
-    type Weight = 'regular' | 'medium' | 'semiBold';
-    type Type = 'error' | 'success';
-    type ParagraphTypes = {
-        category?: Category;
-        weight: Weight;
-        color?: string;
-        type?: Type;
-    };
-}
+/// <reference types="react" />
+export declare namespace TextComponent {
+    type Props = ParagraphTypes & {
+        onClick?: (event: React.MouseEvent<HTMLParagraphElement, MouseEvent>) => void;
+        children?: React.ReactNode;
+        type?: Type;
+    };
+    type Category = 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'link' | 'title';
+    type Weight = 'regular' | 'medium' | 'semiBold';
+    type Type = 'error' | 'success';
+    type ParagraphTypes = {
+        category?: Category;
+        weight: Weight;
+        color?: string;
+        type?: Type;
+    };
+}

package/dist/GlobalStyles/typography.d.ts

@@ -1,20 +1,20 @@
-import { FlattenSimpleInterpolation } from 'styled-components';
-import { TextComponent } from './types';
-type Typography = {
-    subtitle1: FlattenSimpleInterpolation;
-    subtitle2: FlattenSimpleInterpolation;
-    body1: FlattenSimpleInterpolation;
-    body2: FlattenSimpleInterpolation;
-    prefix: FlattenSimpleInterpolation;
-    caption: FlattenSimpleInterpolation;
-    link: FlattenSimpleInterpolation;
-};
-declare const FONT_WEIGHT: {
-    regular: number;
-    medium: number;
-    semiBold: number;
-};
-declare const typography: Typography;
-/** switch typography on provided category */
-declare const switchTypography: (props: TextComponent.ParagraphTypes) => FlattenSimpleInterpolation;
-export { switchTypography, typography, FONT_WEIGHT };
+import { FlattenSimpleInterpolation } from 'styled-components';
+import { TextComponent } from './types';
+type Typography = {
+    subtitle1: FlattenSimpleInterpolation;
+    subtitle2: FlattenSimpleInterpolation;
+    body1: FlattenSimpleInterpolation;
+    body2: FlattenSimpleInterpolation;
+    prefix: FlattenSimpleInterpolation;
+    caption: FlattenSimpleInterpolation;
+    link: FlattenSimpleInterpolation;
+};
+declare const FONT_WEIGHT: {
+    regular: number;
+    medium: number;
+    semiBold: number;
+};
+declare const typography: Typography;
+/** switch typography on provided category */
+declare const switchTypography: (props: TextComponent.ParagraphTypes) => FlattenSimpleInterpolation;
+export { switchTypography, typography, FONT_WEIGHT };

package/dist/HOC/HoverHOC/HoverHOC.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
-import { HoverTypes } from './types';
-declare const HoverHOC: import("react").ForwardRefExoticComponent<HoverTypes & import("react").RefAttributes<HTMLInputElement>>;
-export default HoverHOC;
+/// <reference types="react" />
+import { HoverTypes } from './types';
+declare const HoverHOC: import("react").ForwardRefExoticComponent<HoverTypes & import("react").RefAttributes<HTMLInputElement>>;
+export default HoverHOC;

package/dist/HOC/HoverHOC/HoverHOCStyled.d.ts

@@ -1,2 +1,2 @@
-import { HoverStyleTypes } from './types';
-export declare const HoverHOCWrapper: import("styled-components").StyledComponent<"div", any, HoverStyleTypes, never>;
+import { HoverStyleTypes } from './types';
+export declare const HoverHOCWrapper: import("styled-components").StyledComponent<"div", any, HoverStyleTypes, never>;

package/dist/HOC/HoverHOC/index.d.ts

@@ -1,2 +1,2 @@
-import HoverHOC from './HoverHOC';
-export { HoverHOC };
+import HoverHOC from './HoverHOC';
+export { HoverHOC };

package/dist/HOC/HoverHOC/types.d.ts

@@ -1,20 +1,20 @@
-import { Ref } from 'react';
-import { TooltipComponent } from '../../components/Tooltip/types';
-export type HoverTypes = {
-    children: JSX.Element[] | JSX.Element;
-    label?: string;
-    value?: any;
-    editMode?: boolean;
-    disableHover?: boolean;
-    editActive?: boolean;
-    setEditActive?: any;
-    onMouseLeaveFromInput?: any;
-    disableEdit?: boolean;
-    inputRef?: Ref<HTMLInputElement>;
-    tooltipContent?: string | null;
-    tooltipPosition?: TooltipComponent.Position;
-};
-export type HoverStyleTypes = {
-    editMode?: boolean;
-    disableHover?: boolean;
-};
+import { Ref } from 'react';
+import { TooltipComponent } from '../../components/Tooltip/types';
+export type HoverTypes = {
+    children: JSX.Element[] | JSX.Element;
+    label?: string;
+    value?: any;
+    editMode?: boolean;
+    disableHover?: boolean;
+    editActive?: boolean;
+    setEditActive?: any;
+    onMouseLeaveFromInput?: any;
+    disableEdit?: boolean;
+    inputRef?: Ref<HTMLInputElement>;
+    tooltipContent?: string | null;
+    tooltipPosition?: TooltipComponent.Position;
+};
+export type HoverStyleTypes = {
+    editMode?: boolean;
+    disableHover?: boolean;
+};

package/dist/components/Alert/Alert.d.ts

@@ -1,3 +1,3 @@
-import { IAlert } from './AlertTypes';
-declare const Alert: (props: IAlert.Props) => import("react/jsx-runtime").JSX.Element;
-export { Alert };
+import { IAlert } from './AlertTypes';
+declare const Alert: (props: IAlert.Props) => import("react/jsx-runtime").JSX.Element;
+export { Alert };

package/dist/components/Alert/AlertStyled.d.ts

@@ -1,6 +1,6 @@
-import { IAlert } from './AlertTypes';
-export declare const AlertStyled: import("styled-components").StyledComponent<"div", any, IAlert.AlertStyled, never>;
-export declare const InfoIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const Content: import("styled-components").StyledComponent<"span", any, {}, never>;
-export declare const AlertActionBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const CloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+import { IAlert } from './AlertTypes';
+export declare const AlertStyled: import("styled-components").StyledComponent<"div", any, IAlert.AlertStyled, never>;
+export declare const InfoIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const Content: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const AlertActionBtn: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const CloseButton: import("styled-components").StyledComponent<"button", any, {}, never>;

package/dist/components/Alert/AlertTypes.d.ts

@@ -1,24 +1,24 @@
-import { ReactNode } from 'react';
-export declare namespace IAlert {
-    type AlertType = 'success' | 'error' | 'warning' | 'info' | 'promise';
-    interface AlertStyled {
-        type: AlertType;
-        width?: string;
-        minHeight?: string;
-    }
-    type ColorFamily = {
-        class: string;
-        member: string;
-    };
-    interface Props {
-        width?: string;
-        minHeight?: string;
-        message: string | ReactNode;
-        type?: AlertType;
-        showActionBtn?: boolean;
-        actionBtnLabel?: string;
-        showCloseBtn?: boolean;
-        onActionBtnClick?: () => void;
-        onClose?: () => void;
-    }
-}
+import { ReactNode } from 'react';
+export declare namespace IAlert {
+    type AlertType = 'success' | 'error' | 'warning' | 'info' | 'promise' | 'alert';
+    interface AlertStyled {
+        type: AlertType;
+        width?: string;
+        minHeight?: string;
+    }
+    type ColorFamily = {
+        class: string;
+        member: string;
+    };
+    interface Props {
+        width?: string;
+        minHeight?: string;
+        message: string | ReactNode;
+        type?: AlertType;
+        showActionBtn?: boolean;
+        actionBtnLabel?: string;
+        showCloseBtn?: boolean;
+        onActionBtnClick?: () => void;
+        onClose?: () => void;
+    }
+}

package/dist/components/Alert/AlertUtils.d.ts

@@ -1,23 +1,24 @@
-import { IAlert } from './AlertTypes';
-export declare const TOAST_COLOR: {
-    [key: string]: {
-        border: IAlert.ColorFamily;
-        background: IAlert.ColorFamily;
-        icon: IAlert.ColorFamily;
-        [key: string]: any;
-    };
-};
-export declare const getIcon: (type: IAlert.AlertType) => import("react/jsx-runtime").JSX.Element;
-export declare const getTooltipColorFor: (type: string, key: string) => any;
-export declare const alertIcons: {
-    info: import("react/jsx-runtime").JSX.Element;
-    success: import("react/jsx-runtime").JSX.Element;
-    error: import("react/jsx-runtime").JSX.Element;
-    warning: import("react/jsx-runtime").JSX.Element;
-    promise: import("react/jsx-runtime").JSX.Element;
-};
-export declare const switchStyles: (type: IAlert.AlertType, theme: any) => {
-    background: any;
-    border: string;
-};
-export declare const closeIcon: import("react/jsx-runtime").JSX.Element;
+import { IAlert } from './AlertTypes';
+export declare const TOAST_COLOR: {
+    [key: string]: {
+        border: IAlert.ColorFamily;
+        background: IAlert.ColorFamily;
+        icon: IAlert.ColorFamily;
+        [key: string]: any;
+    };
+};
+export declare const getIcon: (type: IAlert.AlertType) => import("react/jsx-runtime").JSX.Element;
+export declare const getTooltipColorFor: (type: string, key: string) => any;
+export declare const alertIcons: {
+    info: import("react/jsx-runtime").JSX.Element;
+    success: import("react/jsx-runtime").JSX.Element;
+    error: import("react/jsx-runtime").JSX.Element;
+    warning: import("react/jsx-runtime").JSX.Element;
+    promise: import("react/jsx-runtime").JSX.Element;
+    alert: import("react/jsx-runtime").JSX.Element;
+};
+export declare const switchStyles: (type: IAlert.AlertType, theme: any) => {
+    background: any;
+    border: string;
+};
+export declare const closeIcon: import("react/jsx-runtime").JSX.Element;

package/dist/components/Alert/index.d.ts

@@ -1,2 +1,2 @@
-import { Alert } from './Alert';
-export { Alert };
+import { Alert } from './Alert';
+export { Alert };

package/dist/components/Avatar/Avatar.d.ts

@@ -1,3 +1,3 @@
-import { AvatarDeclarations } from './Avatar.types';
-declare const Avatar: (props: AvatarDeclarations.Props) => import("react/jsx-runtime").JSX.Element;
-export { Avatar };
+import { AvatarDeclarations } from './Avatar.types';
+declare const Avatar: (props: AvatarDeclarations.Props) => import("react/jsx-runtime").JSX.Element;
+export { Avatar };

package/dist/components/Avatar/Avatar.types.d.ts

@@ -1,40 +1,40 @@
-/// <reference types="react" />
-export declare namespace AvatarDeclarations {
-    type Size = number | string | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
-    interface SizesObj {
-        [key: Size]: {
-            avatarSize: number;
-            fontSize: number;
-        };
-    }
-    interface Props {
-        src?: string;
-        alt?: string;
-        backgroundColor?: 'random' | string;
-        size?: Size;
-        fontSize?: string | number;
-        fontColor?: string;
-        objectFit?: 'cover' | 'contain';
-        avatarButton?: React.ReactNode;
-        onClick?: (params: Props) => void;
-        avatarButtonRightOffset?: number;
-        avatarButtonBottomOffset?: number;
-        [key: string]: any;
-    }
-    type Image = HTMLImageElement | null;
-    interface StyledAvatarContainer {
-        background: string;
-        size: Size;
-    }
-    interface StyledAvatarImage {
-        objectFit: 'cover' | 'contain';
-    }
-    interface StyledAvatarPlaceholder {
-        fontSize: string;
-        fontColor: string;
-    }
-    interface StyledAvatarButton {
-        rightOffset: string;
-        bottomOffset: string;
-    }
-}
+/// <reference types="react" />
+export declare namespace AvatarDeclarations {
+    type Size = number | string | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    interface SizesObj {
+        [key: Size]: {
+            avatarSize: number;
+            fontSize: number;
+        };
+    }
+    interface Props {
+        src?: string;
+        alt?: string;
+        backgroundColor?: 'random' | string;
+        size?: Size;
+        fontSize?: string | number;
+        fontColor?: string;
+        objectFit?: 'cover' | 'contain';
+        avatarButton?: React.ReactNode;
+        onClick?: (params: Props) => void;
+        avatarButtonRightOffset?: number;
+        avatarButtonBottomOffset?: number;
+        [key: string]: any;
+    }
+    type Image = HTMLImageElement | null;
+    interface StyledAvatarContainer {
+        background: string;
+        size: Size;
+    }
+    interface StyledAvatarImage {
+        objectFit: 'cover' | 'contain';
+    }
+    interface StyledAvatarPlaceholder {
+        fontSize: string;
+        fontColor: string;
+    }
+    interface StyledAvatarButton {
+        rightOffset: string;
+        bottomOffset: string;
+    }
+}

package/dist/components/Avatar/AvatarStyled.d.ts

@@ -1,6 +1,6 @@
-import { AvatarDeclarations } from './Avatar.types';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const AvatarContainer: import("styled-components").StyledComponent<"div", any, AvatarDeclarations.StyledAvatarContainer, never>;
-export declare const AvatarImage: import("styled-components").StyledComponent<"img", any, AvatarDeclarations.StyledAvatarImage, never>;
-export declare const AvatarPlaceholder: import("styled-components").StyledComponent<"span", any, AvatarDeclarations.StyledAvatarPlaceholder, never>;
-export declare const AvatarButtonSection: import("styled-components").StyledComponent<"div", any, AvatarDeclarations.StyledAvatarButton, never>;
+import { AvatarDeclarations } from './Avatar.types';
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AvatarContainer: import("styled-components").StyledComponent<"div", any, AvatarDeclarations.StyledAvatarContainer, never>;
+export declare const AvatarImage: import("styled-components").StyledComponent<"img", any, AvatarDeclarations.StyledAvatarImage, never>;
+export declare const AvatarPlaceholder: import("styled-components").StyledComponent<"span", any, AvatarDeclarations.StyledAvatarPlaceholder, never>;
+export declare const AvatarButtonSection: import("styled-components").StyledComponent<"div", any, AvatarDeclarations.StyledAvatarButton, never>;

package/dist/components/Avatar/AvatarUtils.d.ts

@@ -1,2 +1,2 @@
-import { AvatarDeclarations } from './Avatar.types';
-export declare const sizes: AvatarDeclarations.SizesObj;
+import { AvatarDeclarations } from './Avatar.types';
+export declare const sizes: AvatarDeclarations.SizesObj;

package/dist/components/Avatar/index.d.ts

@@ -1,2 +1,2 @@
-import { Avatar } from './Avatar';
-export { Avatar };
+import { Avatar } from './Avatar';
+export { Avatar };