@kwantis-id3/frontend-library 1.0.0-rc.9 → 1.0.0

package/dist/index.d.ts

@@ -1,10 +1,11 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { Interpolation, Theme as Theme$1 } from '@emotion/react';
-import { Theme } from '@emotion/react/dist/declarations/src';
+import * as _emotion_react from '@emotion/react';
+import { Interpolation, Theme } from '@emotion/react';
 import * as react from 'react';
-import { PropsWithChildren, ReactNode, FC } from 'react';
-import { ColumnDef } from '@tanstack/react-table';
+import { PropsWithChildren, ReactElement, FC, ReactNode } from 'react';
+import * as _emotion_styled from '@emotion/styled';
 import { CreateStyled } from '@emotion/styled';
+import { ColumnDef } from '@tanstack/react-table';
 
 type TButtonVariants = "contained" | "outlined" | "text";
 type TButtonProps = {
@@ -95,6 +96,8 @@ interface IIndicatorColors {
     warningFill: string;
     error: string;
     errorFill: string;
+    neutral: string;
+    neutralFill: string;
 }
 interface IPalette {
     /** Application background */
@@ -140,11 +143,19 @@ interface IThemeContextValue {
     setMode: (mode: TThemeMode) => void;
 }
 
+declare const commonColors: ICommonColors;
 declare const defaultLightPalette: IPalette;
 declare const defaultDarkPalette: IPalette;
-declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactNode;
+declare const ThemeContextProvider: ({ palettes, defaultMode, children, }: PropsWithChildren<IThemeContextProps>) => ReactElement;
 declare const useThemeContext: () => IThemeContextValue;
 
+declare const AccordionGroup: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme;
+    as?: React.ElementType;
+} & {
+    $variant: "default" | "light";
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
 type TAccordionProps = PropsWithChildren & {
     /** Title to be used if no custom trigger is passed */
     title: string;
@@ -171,7 +182,7 @@ declare const Accordion: FC<TAccordionProps>;
 declare const InputField: react.ForwardRefExoticComponent<react.InputHTMLAttributes<HTMLInputElement> & {
     containerClassName?: string;
     color?: string;
-    sx?: React.CSSProperties;
+    sx?: _emotion_react.Interpolation<_emotion_react.Theme>;
 } & react.RefAttributes<HTMLInputElement>>;
 
 type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
@@ -180,7 +191,7 @@ type TTextFieldProps = React.InputHTMLAttributes<HTMLInputElement> & {
     /** The color of the input */
     color?: string;
     /** Change the styles of the input field */
-    sx?: React.CSSProperties;
+    sx?: Interpolation<Theme>;
 };
 
 interface SingleSelectProps<Option = {
@@ -339,8 +350,17 @@ type TDropdownProps = {
     bgColor?: string;
     /** The hover color of the dropdown */
     hoverColor?: string;
+    /** The border color */
+    borderColor?: string;
+    /** The border width */
+    borderWidth?: string;
     /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
+    /** Controls whether the dropdown body should have absolute or fixed position
+     * By default, it is set to absolute, which means the dropdown will be positioned relative to its parent element.
+     * Use fixed if you want the body to be above the entire page, regardless of the parent element.
+     */
+    menuPosition?: "absolute" | "fixed";
     /** The mobile breakpoint, by default it's 768px */
     mobileBreakpoint?: number;
 };
@@ -380,7 +400,7 @@ type TIndicatorInstanceProps = {
 type TIndicatorProps = {
     variant: TIndicatorVariants;
 } & TIndicatorInstanceProps;
-type TIndicatorVariants = "live" | "success" | "warning" | "error";
+type TIndicatorVariants = "live" | "success" | "warning" | "error" | "neutral";
 
 type TGenericIndicatorProps = {
     variant: TIndicatorVariants;
@@ -412,7 +432,7 @@ type TTagProps = {
 declare const Tag: FC<TTagProps>;
 
 type TCardSectionProps = PropsWithChildren & {
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
 };
 
@@ -454,13 +474,35 @@ type TTableRow<T extends TCellValues> = {
 declare const Table: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TTableProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
 declare const renderCell: (value: string | number | boolean | null) => _emotion_react_jsx_runtime.JSX.Element;
 
+type TDataGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = {
+    columns: ColumnDef<TDataGridRow<Cell>, Cell>[];
+    data: Row[] | undefined;
+};
+type TDataGridRow<Cell extends TCellValues> = {
+    [key: string]: Cell;
+};
+
+declare const DataGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TDataGridProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+
 type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>> = TTableProps<Cell, Row> & {
     mode: "table" | "cards";
-    cardComponent: (item: Row) => React.ReactNode;
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme>;
+};
+type TMultiViewGridProps<Cell extends TCellValues, Row extends TDataGridRow<Cell>> = TDataGridProps<Cell, Row> & {
+    mode: "table" | "cards";
+    cardComponent: (item: Row, index: number) => React.ReactNode;
+    cardsWidth?: string;
+    cardsHeight?: string;
+    sx?: Interpolation<Theme>;
 };
 
 declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
 
+declare const MultiViewGrid: <Cell extends TCellValues, Row extends TDataGridRow<Cell>>(props: TMultiViewGridProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
+
 /**
  * A callback to customize how items are rendered
  * @property isOpen: A boolean indicating if the item is expanded
@@ -505,10 +547,16 @@ type TTreeViewProps = TTreeItemFunctions & {
     /** Disable multi-selection possibility */
     isMultiSelectionDisabled?: boolean;
     /** Custom styles */
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
 };
 type TUncontrolledTreeViewProps = TTreeViewProps & {
     items: TTreeViewItem[];
+    /** A search string used to filter the items. */
+    searchString?: string;
+    /** The ids of the items that should be expanded by default */
+    defaultExpandedItems?: string[];
+    /** Only allow one root item to be expanded at a time */
+    singleRootExpand?: boolean;
 };
 type TControlledTreeViewProps = TTreeViewProps & {
     /** The current state of the Tree View. */
@@ -534,7 +582,7 @@ type TTreeViewItem = TTreeItemFunctions & {
     /** A callback to fetch children asynchronously */
     childrenAsync?: () => Promise<TTreeViewItem[]>;
     /** Custom styles */
-    sx?: Interpolation<Theme$1>;
+    sx?: Interpolation<Theme>;
 };
 
 /** @jsxImportSource @emotion/react */
@@ -546,6 +594,8 @@ declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;
 type TDrawerProps = {
     /** Position of the drawer */
     anchor: "top" | "right" | "bottom" | "left";
+    /** Optional state value to control the component */
+    isOpen?: boolean;
     /** Trigger showed when drawer is closed */
     closedTrigger?: ReactNode;
     /** Trigger showed when drawer is open */
@@ -560,18 +610,67 @@ type TDrawerProps = {
     maxOpen?: number;
     /** Background color */
     bgColor?: string;
+    /** Trigger Color */
+    triggerColor?: string;
     /** Trigger hover color */
     triggerHoverColor?: string;
+    /** Hide the default thumb trigger */
+    hideTrigger?: boolean;
+    /** Keep rendered when closed to preserve state */
+    keepMounted?: boolean;
+    /** Set a custom z-index */
+    zIndex?: number;
+    sx?: Interpolation<Theme>;
+    onOpen?: () => void;
+    onClose?: () => void;
 };
 
-declare const Drawer: ({ anchor, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerHoverColor, }: TDrawerProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const Drawer: ({ anchor, isOpen: isOpenProp, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerColor, triggerHoverColor, onOpen, onClose, zIndex, hideTrigger, keepMounted, sx, }: TDrawerProps) => _emotion_react_jsx_runtime.JSX.Element;
 
-/**
- * Hook to check if the screen is mobile. The default breakpoint is 768px.
- * @param {number=} mobileBreakpoint breakpoint width to check against
- * @returns boolean
- */
-declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
+type TCheckboxProps = {
+    /** Lable of the checkbox */
+    label?: string;
+    /** HTML id */
+    htmlId?: string;
+    name?: string;
+    /** Controlled checked state */
+    checked?: boolean;
+    /** Uncontrolled default checked state */
+    defaultChecked?: boolean;
+    /** onChange handler */
+    onChange?: (checked: boolean) => void;
+    /** Mixed state in its children checkboxes */
+    indeterminate?: boolean;
+    /** Disabled state */
+    disabled?: boolean;
+    className?: string;
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+    /** Checkbox sizes */
+    size?: "small" | "medium" | "large";
+};
+
+declare const Checkbox: ({ label, htmlId, checked, defaultChecked, onChange, indeterminate, disabled, className, sx, name, size, }: TCheckboxProps) => _emotion_react_jsx_runtime.JSX.Element;
+
+type TSwitchProps = {
+    /** Whether the switch is checked (controlled) */
+    checked?: boolean;
+    /** Default checked state (uncontrolled) */
+    defaultChecked?: boolean;
+    /** Callback function when the switch state changes */
+    onChange?: (checked: boolean) => void;
+    /** The color of switch when checked */
+    color?: string;
+    /** The label for the switch */
+    label?: string;
+    /** Size of switch */
+    size?: "small" | "medium" | "large";
+    /** HTML id */
+    htmlId?: string;
+    className?: string;
+};
+
+declare const Switch: (props: TSwitchProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * emotion.js doesn't support transient options out of the box.
@@ -582,7 +681,12 @@ declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
  */
 declare const transientOptions: Parameters<CreateStyled>[1];
 
-declare const styled: CreateStyled;
+/**
+ * Hook to check if the screen is mobile. The default breakpoint is 768px.
+ * @param {number=} mobileBreakpoint breakpoint width to check against
+ * @returns boolean
+ */
+declare const useIsMobile: (mobileBreakpoint?: number) => boolean;
 
 /**
  *
@@ -615,4 +719,6 @@ declare const getHoverColor: (color: string) => string;
  */
 declare const getActiveColor: (color: string) => string;
 
-export { Accordion, Button, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, ControlledTreeView, Drawer, Dropdown, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewListProps, TRenderTriggerProps, TSliderProps, TTableCell, TTableProps, TTableRow, TTagProps, TTextFieldProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };
+declare function usePrefersColorScheme(): "light" | "dark";
+
+export { Accordion, AccordionGroup, Button, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Checkbox, ControlledTreeView, DataGrid, Drawer, Dropdown, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewGrid, MultiViewList, SingleSelect, SingleSelectProps, Slider, Switch, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TCheckboxProps, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDataGridProps, TDataGridRow, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewGridProps, TMultiViewListProps, TRenderTriggerProps, TSliderProps, TSwitchProps, TTableCell, TTableProps, TTableRow, TTagProps, TTextFieldProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, commonColors, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, transientOptions, useIsMobile, usePrefersColorScheme, useThemeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "1.0.0-rc.9",
+  "version": "1.0.0",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",
@@ -27,7 +27,6 @@
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest --coverage",
-    "chromatic": "npx chromatic --project-token=3dd812d03e4c",
     "build": "pnpm rollup",
     "bump:patch": "pnpm version patch",
     "bump:minor": "pnpm version minor",
@@ -42,20 +41,16 @@
   },
   "license": "apache-2.0",
   "devDependencies": {
-    "@iconify/react": "^5.2.0",
+    "@emotion/jest": "^11.11.0",
     "@rollup/plugin-commonjs": "^24.0.1",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.0.0",
-    "@storybook/addon-essentials": "^8.6.4",
-    "@storybook/addon-interactions": "^8.6.4",
-    "@storybook/addon-links": "^8.6.4",
-    "@storybook/addon-webpack5-compiler-swc": "^2.1.0",
-    "@storybook/blocks": "^8.6.4",
-    "@storybook/react": "^8.6.4",
-    "@storybook/react-webpack5": "^8.6.4",
-    "@storybook/test": "^8.6.4",
-    "@storybook/types": "^8.6.4",
+    "@storybook/addon-docs": "^10.1.10",
+    "@storybook/addon-links": "^10.1.10",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.2",
+    "@storybook/react": "^10.1.10",
+    "@storybook/react-webpack5": "^10.1.10",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^14.6.1",
@@ -65,26 +60,31 @@
     "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
-    "@vitest/coverage-v8": "^3.0.5",
+    "@vitejs/plugin-react": "^5.1.2",
+    "@vitest/coverage-v8": "3.0.5",
     "chromatic": "^11.0.4",
-    "eslint": "^8.38.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.11.4",
-    "jsdom": "^23.0.1",
+    "eslint-plugin-storybook": "^10.1.10",
+    "jsdom": "^23.2.0",
+    "lucide-react": "^0.545.0",
     "prop-types": "15.8.1",
     "rollup": "^3.20.2",
     "rollup-plugin-dts": "^5.3.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "storybook": "^8.6.4",
+    "storybook": "^10.1.10",
     "ts-node": "^10.9.1",
     "tslib": "^2.5.0",
     "typescript": "^5.7.3",
     "vitest": "^3.0.5"
   },
   "peerDependencies": {
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@tanstack/react-table": "^8.0.0",
+    "lucide-react": "^0.545.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
@@ -96,14 +96,10 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@emotion/jest": "^11.11.0",
-    "@emotion/react": "11.14.0",
-    "@emotion/styled": "11.14.0",
     "react-range": "^1.8.14",
     "react-select": "^5.7.3",
     "tinycolor2": "^1.6.0"
   },
-  "readme": "ERROR: No README data found!",
   "pnpm": {
     "overrides": {
       "@adobe/css-tools@<4.3.1": ">=4.3.1",
@@ -113,8 +109,17 @@
       "semver@>=7.0.0 <7.5.2": ">=7.5.2",
       "tough-cookie@<4.1.3": ">=4.1.3",
       "word-wrap@<1.2.4": ">=1.2.4",
-      "@babel/traverse@<7.23.2": ">=7.23.2"
+      "@babel/traverse@<7.23.2": ">=7.23.2",
+      "brace-expansion@>=1.0.0 <=1.1.11": ">=1.1.12",
+      "brace-expansion@>=2.0.0 <=2.0.1": ">=2.0.2",
+      "form-data@>=4.0.0 <4.0.4": ">=4.0.4",
+      "js-yaml@>=4.0.0 <4.1.1": ">=4.1.1",
+      "glob@>=10.2.0 <10.5.0": ">=10.5.0"
     }
   },
-  "packageManager": "pnpm@8.15.9+sha512.499434c9d8fdd1a2794ebf4552b3b25c0a633abcee5bb15e7b5de90f32f47b513aca98cd5cfd001c31f0db454bc3804edccd578501e4ca293a6816166bbd9f81"
+  "engines": {
+    "node": ">=20.0.0",
+    "pnpm": ">=10.0.0"
+  },
+  "packageManager": "pnpm@10.0.0+sha512.b8fef5494bd3fe4cbd4edabd0745df2ee5be3e4b0b8b08fa643aa3e4c6702ccc0f00d68fa8a8c9858a735a0032485a44990ed2810526c875e416f001b17df12b"
 }

package/dist/esm/types/utils/styled.d.ts

@@ -1,2 +0,0 @@
-import { CreateStyled } from "@emotion/styled";
-export declare const styled: CreateStyled;