@kwantis-id3/frontend-library 0.20.0 → 0.20.1

package/dist/index.d.ts

@@ -0,0 +1,231 @@
+/// <reference types="react" />
+import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
+import * as React$1 from 'react';
+import React__default from 'react';
+import { Interpolation, CreateStyled as CreateStyled$1, CreateStyledComponent, FilteringStyledOptions, StyledOptions } from '@emotion/styled';
+import { Theme, PropsOf } from '@emotion/react';
+
+interface Color {
+    main: string;
+    contrastText: string;
+}
+interface ThemeColorsObject {
+    primary: Color;
+    secondary: Color;
+    tertiary: Color;
+    statusOk: Color;
+    statusWarning: Color;
+    statusCritical: Color;
+    statusNeutral: Color;
+}
+type ThemeContextProps = {
+    colors: ThemeColorsObject;
+};
+interface Nothing {
+}
+type Union<T, U> = T | (U & Nothing);
+type ThemeColors = keyof ThemeColorsObject;
+type ThemeColorsExtended = Union<ThemeColors, string>;
+type ThemeProperties = {
+    colors: ThemeColorsObject;
+    /**
+     *
+     * @param color one of the theme keys, a path to a specific color in the theme, OR a string representing a color (hex, rgb, hsl, etc)
+     * @returns a valid color object. If color is not valid, will return the primary color.
+     */
+    getColor: (color: ThemeColorsExtended) => Color;
+};
+declare const ThemeContextProvider: (props: React__default.PropsWithChildren<{
+    theme?: ThemeContextProps;
+}>) => JSX.Element;
+declare const useThemeContext: () => ThemeProperties;
+
+type ButtonVariants = "contained" | "outlined" | "text";
+type ButtonProps = {
+    color?: ThemeColorsExtended;
+    type?: "button" | "submit" | "reset";
+    sx?: Interpolation<Theme>;
+    variant?: ButtonVariants;
+    onClick?: () => void;
+    className?: string;
+    htmlId?: string;
+    disabled?: boolean;
+    children?: React$1.ReactNode;
+};
+declare const Button: (props: ButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type AccordionProps = {
+    title: string;
+    children: React__default.ReactNode;
+    customTrigger?: React__default.ReactNode;
+    color?: ThemeColorsExtended;
+    iconColor?: ThemeColorsExtended;
+    dividerColor?: ThemeColorsExtended;
+    hideIcon?: boolean;
+    hideDivider?: boolean;
+    isOpen?: boolean;
+    isLazy?: boolean;
+    onClick?: () => void;
+    onOpen?: () => void;
+    onClose?: () => void;
+    sx?: Interpolation<Theme>;
+};
+declare const Accordion: (props: AccordionProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
+
+type TInputType = "text" | "number" | "password" | "email" | "image" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "week" | "time" | "color";
+interface TextFieldProps {
+    value?: string | number;
+    name?: string;
+    onChange?: (value: string) => void;
+    placeholder?: string;
+    htmlId?: string;
+    containerClassName?: string;
+    className?: string;
+    isDisabled?: boolean;
+    color?: ThemeColorsExtended;
+    required?: boolean;
+    pattern?: string;
+    readonly?: boolean;
+    autoFocus?: boolean;
+    list?: string;
+    type?: TInputType;
+}
+declare const InputField: (props: TextFieldProps) => JSX.Element;
+
+interface SingleSelectProps<Option = {
+    label: string;
+    value: string;
+}> {
+    options: Option[];
+    onChange?: (option: Option | null) => void;
+    value?: Option | null;
+    name?: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColorsExtended;
+    containerId?: string;
+    htmlId?: string;
+    className?: string;
+    inputClassName?: string;
+    menuPosition?: "fixed" | "absolute";
+    required?: boolean;
+}
+declare const SingleSelect: <Option>(props: SingleSelectProps<Option>) => JSX.Element;
+
+interface MultiSelectProps<Option = {
+    label: string;
+    value: string;
+}> {
+    options: Option[];
+    onChange?: (option: Option[] | null) => void;
+    value?: readonly Option[] | null;
+    name?: string;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColorsExtended;
+    containerId?: string;
+    htmlId?: string;
+    className?: string;
+    menuPosition?: "fixed" | "absolute";
+    required?: boolean;
+}
+declare const MultiSelect: <Option>(props: MultiSelectProps<Option>) => JSX.Element;
+
+type SliderProps = {
+    values: number[];
+    min?: number;
+    max?: number;
+    onChange: (values: number[]) => void;
+    onFinalChange?: (values: number[]) => void;
+    color?: ThemeColorsExtended;
+    unselectedColor?: ThemeColorsExtended;
+    thumbColor?: ThemeColorsExtended;
+    htmlId?: string;
+    className?: string;
+    showThumbValue?: boolean;
+    autoCalculateMinMax?: boolean;
+    step?: number;
+    disabled?: boolean;
+    allowOverlap?: boolean;
+};
+declare const Slider: (props: SliderProps) => JSX.Element;
+
+type DropdownItem = {
+    value: string;
+    color?: ThemeColorsExtended;
+    textColor?: string;
+    children?: DropdownItem[];
+    onClick?: () => void;
+};
+type DropdownProps = {
+    content: DropdownItem[];
+    trigger: React__default.ReactNode;
+    color?: ThemeColorsExtended;
+    hoverColor?: ThemeColorsExtended;
+    direction?: "left" | "right";
+    mobileBreakpoint?: number;
+};
+declare const Dropdown: (props: DropdownProps) => JSX.Element;
+
+interface ModalProps {
+    children: React__default.ReactNode;
+    isOpen: boolean;
+    setIsOpen: (isOpen: boolean) => void;
+    onClose?: () => void;
+}
+declare const Modal: React__default.FC<ModalProps>;
+
+/**
+ * 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;
+
+declare const transientOptions: Parameters<CreateStyled$1>[1];
+
+type StyledTags = {
+    [Tag in keyof JSX.IntrinsicElements]: CreateStyledComponent<{
+        theme?: ThemeContextProps;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+};
+interface BaseCreateStyled {
+    <C extends React.ComponentClass<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: ThemeContextProps;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentClass<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: ThemeContextProps;
+    }, {}, {
+        ref?: React.Ref<InstanceType<C>>;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>, ForwardedProps extends keyof React.ComponentProps<C> & string = keyof React.ComponentProps<C> & string>(component: C, options: FilteringStyledOptions<React.ComponentProps<C>, ForwardedProps>): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & {
+        theme?: ThemeContextProps;
+    }>;
+    <C extends React.ComponentType<React.ComponentProps<C>>>(component: C, options?: StyledOptions<React.ComponentProps<C>>): CreateStyledComponent<PropsOf<C> & {
+        theme?: ThemeContextProps;
+    }>;
+    <Tag extends keyof JSX.IntrinsicElements, ForwardedProps extends keyof JSX.IntrinsicElements[Tag] & string = keyof JSX.IntrinsicElements[Tag] & string>(tag: Tag, options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>): CreateStyledComponent<{
+        theme?: ThemeContextProps;
+        as?: React.ElementType;
+    }, Pick<JSX.IntrinsicElements[Tag], ForwardedProps>>;
+    <Tag extends keyof JSX.IntrinsicElements>(tag: Tag, options?: StyledOptions<JSX.IntrinsicElements[Tag]>): CreateStyledComponent<{
+        theme?: ThemeContextProps;
+        as?: React.ElementType;
+    }, JSX.IntrinsicElements[Tag]>;
+}
+interface CreateStyled extends BaseCreateStyled, StyledTags {
+}
+declare const styled: CreateStyled;
+
+export { Accordion, AccordionProps, Button, ButtonProps, Dropdown, DropdownItem, DropdownProps, InputField, Modal, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, Slider, SliderProps, TInputType, ThemeColors, ThemeColorsObject, ThemeContextProps, ThemeContextProvider, styled, transientOptions, useIsMobile, useThemeContext };

package/package.json

@@ -1,7 +1,39 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "0.20.0",
+  "version": "0.20.1",
   "description": "Kwantis frontend components collection",
+  "scriptsComments": {
+    "storybook": "Starts storybook in development mode",
+    "rollup": "Bundles the library",
+    "test": "Runs tests",
+    "test:watch": "Runs tests in watch mode",
+    "test:coverage": "Runs tests in watch mode and generates coverage report",
+    "chromatic": "Runs chromatic tests and deploys to chromatic",
+    "build-cleanup": "Removes dist folder (if present)",
+    "build": "Removes dist folder and bundles the library",
+    "bump:patch": "Bumps the version to the next patch",
+    "bump:minor": "Bumps the version to the next minor",
+    "bump:major": "Bumps the version to the next major",
+    "bump:prepatch": "Bumps the version to the next prepatch",
+    "bump:preminor": "Bumps the version to the next preminor",
+    "bump:premajor": "Bumps the version to the next premajor"
+  },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "rollup": "rollup -c",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest --coverage",
+    "chromatic": "npx chromatic --project-token=3dd812d03e4c",
+    "build-cleanup": "if exist dist rmdir /s /q dist",
+    "build": "pnpm clean-build && pnpm rollup",
+    "bump:patch": "pnpm version patch",
+    "bump:minor": "pnpm version minor",
+    "bump:major": "pnpm version major",
+    "bump:prepatch": "pnpm version prepatch --preid=rc",
+    "bump:preminor": "pnpm version preminor --preid=rc",
+    "bump:premajor": "pnpm version premajor --preid=rc"
+  },
   "author": {
     "name": "kwantis"
   },
@@ -66,15 +98,16 @@
     "tinycolor2": "^1.6.0"
   },
   "readme": "ERROR: No README data found!",
-  "scripts": {
-    "rollup": "rollup -c",
-    "test": "vitest --coverage",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=3dd812d03e4c",
-    "clean-deps": "rmdir /s /q node_modules",
-    "reinstall-deps": "pnpm clean-deps && pnpm install",
-    "clean-build": "rmdir /s /q dist",
-    "build": "pnpm clean-build && pnpm rollup"
+  "pnpm": {
+    "overrides": {
+      "@adobe/css-tools@<4.3.1": ">=4.3.1",
+      "postcss@<8.4.31": ">=8.4.31",
+      "semver@<5.7.2": ">=5.7.2",
+      "semver@>=6.0.0 <6.3.1": ">=6.3.1",
+      "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"
+    }
   }
-}
+}