@kwantis-id3/frontend-library 0.6.1 → 0.7.0

package/dist/esm/types/components/{accordion → Accordion}/Accordion.d.ts

@@ -3,18 +3,17 @@ import { Interpolation } from "@emotion/styled";
 import React from "react";
 import { ThemeColors } from "../ThemeContext";
 import { Theme } from "@emotion/react";
-export interface AccordionProps {
+export type AccordionProps = {
     title: string;
     children: React.ReactNode;
     color?: ThemeColors;
     iconColor?: ThemeColors;
     dividerColor?: ThemeColors;
-    variant?: "contained" | "outlined" | "text";
     isOpen?: boolean;
     isLazy?: boolean;
     onClick?: () => void;
     onOpen?: () => void;
     onClose?: () => void;
     sx?: Interpolation<Theme>;
-}
+};
 export declare const Accordion: (props: AccordionProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/{cjs/types/components/button → esm/types/components/Button}/Button.d.ts

@@ -3,7 +3,7 @@ import { ThemeColors } from "../ThemeContext/ThemeContext";
 import { Interpolation } from "@emotion/styled";
 import { Theme } from "@emotion/react";
 export type ButtonVariants = "contained" | "outlined" | "text";
-export interface ButtonProps {
+export type ButtonProps = {
     label: string;
     color?: ThemeColors;
     sx?: Interpolation<Theme>;
@@ -12,5 +12,5 @@ export interface ButtonProps {
     htmlClassName?: string;
     htmlId?: string;
     disabled?: boolean;
-}
+};
 export declare const Button: (props: ButtonProps) => import("@emotion/react/types/jsx-namespace").EmotionJSX.Element;

package/dist/esm/types/components/SelectFilter/MultiSelect.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GroupBase } from "react-select";
+import { ThemeColors } from "../ThemeContext";
+export interface MultiSelectProps<Option, IsMulti extends boolean, Group> {
+    options: Option[];
+    onChange?: (option: Option[] | null) => void;
+    value?: readonly Option[] | null;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColors;
+    htmlId?: string;
+    className?: string;
+}
+export declare const MultiSelect: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiSelectProps<Option, IsMulti, Group>) => JSX.Element;

package/dist/esm/types/components/SelectFilter/SingleSelect.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GroupBase } from "react-select";
+import { ThemeColors } from "../ThemeContext";
+export interface SingleSelectProps<Option, IsMulti extends boolean, Group> {
+    options: Option[];
+    onChange?: (option: Option | null) => void;
+    value?: Option | null;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColors;
+    htmlId?: string;
+    className?: string;
+}
+export declare const SingleSelect: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SingleSelectProps<Option, IsMulti, Group>) => JSX.Element;

package/dist/esm/types/components/SelectFilter/index.d.ts

@@ -0,0 +1,2 @@
+export { SingleSelect, SingleSelectProps } from "./SingleSelect";
+export { MultiSelect, MultiSelectProps } from "./MultiSelect";

package/dist/esm/types/components/ThemeContext/ThemeContext.d.ts

@@ -12,9 +12,9 @@ export type ThemeColorsObject = {
     statusCritical: Color;
     statusNeutral: Color;
 };
-interface ThemeContextProps {
+type ThemeContextProps = {
     colors: ThemeColorsObject;
-}
+};
 export type ThemeColors = keyof ThemeColorsObject;
 export declare const defaultThemeColors: {
     primary: {

package/dist/esm/types/components/index.d.ts

@@ -1,3 +1,4 @@
-export { Button, ButtonProps } from "./button";
+export { Button, ButtonProps } from "./Button";
 export { ThemeColors, ThemeColorsObject, ThemeContextProvider, useThemeContext, } from "./ThemeContext";
-export { Accordion, AccordionProps } from "./accordion";
+export { Accordion, AccordionProps } from "./Accordion";
+export { SingleSelect, SingleSelectProps, MultiSelect, MultiSelectProps, } from "./SelectFilter";

package/dist/index.d.ts

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import * as _emotion_react_types_jsx_namespace from '@emotion/react/types/jsx-namespace';
 import React from 'react';
 import { Interpolation } from '@emotion/styled';
 import { Theme } from '@emotion/react';
+import { GroupBase } from 'react-select';
 
 type Color = {
     main: string;
@@ -16,9 +18,9 @@ type ThemeColorsObject = {
     statusCritical: Color;
     statusNeutral: Color;
 };
-interface ThemeContextProps {
+type ThemeContextProps = {
     colors: ThemeColorsObject;
-}
+};
 type ThemeColors = keyof ThemeColorsObject;
 declare const ThemeContextProvider: (props: React.PropsWithChildren<{
     theme?: ThemeContextProps;
@@ -26,7 +28,7 @@ declare const ThemeContextProvider: (props: React.PropsWithChildren<{
 declare const useThemeContext: () => ThemeContextProps;
 
 type ButtonVariants = "contained" | "outlined" | "text";
-interface ButtonProps {
+type ButtonProps = {
     label: string;
     color?: ThemeColors;
     sx?: Interpolation<Theme>;
@@ -35,23 +37,54 @@ interface ButtonProps {
     htmlClassName?: string;
     htmlId?: string;
     disabled?: boolean;
-}
+};
 declare const Button: (props: ButtonProps) => _emotion_react_types_jsx_namespace.EmotionJSX.Element;
 
-interface AccordionProps {
+type AccordionProps = {
     title: string;
     children: React.ReactNode;
     color?: ThemeColors;
     iconColor?: ThemeColors;
     dividerColor?: ThemeColors;
-    variant?: "contained" | "outlined" | "text";
     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;
 
-export { Accordion, AccordionProps, Button, ButtonProps, ThemeColors, ThemeColorsObject, ThemeContextProvider, useThemeContext };
+interface SingleSelectProps<Option, IsMulti extends boolean, Group> {
+    options: Option[];
+    onChange?: (option: Option | null) => void;
+    value?: Option | null;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColors;
+    htmlId?: string;
+    className?: string;
+}
+declare const SingleSelect: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SingleSelectProps<Option, IsMulti, Group>) => JSX.Element;
+
+interface MultiSelectProps<Option, IsMulti extends boolean, Group> {
+    options: Option[];
+    onChange?: (option: Option[] | null) => void;
+    value?: readonly Option[] | null;
+    placeholder?: string;
+    isDisabled?: boolean;
+    isClearable?: boolean;
+    isSearchable?: boolean;
+    isOptionDisabled?: (option: Option) => boolean;
+    isLoading?: boolean;
+    color?: ThemeColors;
+    htmlId?: string;
+    className?: string;
+}
+declare const MultiSelect: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: MultiSelectProps<Option, IsMulti, Group>) => JSX.Element;
+
+export { Accordion, AccordionProps, Button, ButtonProps, MultiSelect, MultiSelectProps, SingleSelect, SingleSelectProps, ThemeColors, ThemeColorsObject, ThemeContextProvider, useThemeContext };

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "description": "Kwantis frontend components collection",
-  "author": "kwantis",
+  "author": {
+    "name": "kwantis"
+  },
   "license": "apache-2.0",
   "devDependencies": {
     "@emotion/react": "^11.10.6",
@@ -22,9 +24,12 @@
     "@types/jest": "^29.5.0",
     "@types/react": "^18.0.33",
     "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.58.0",
     "@typescript-eslint/parser": "^5.58.0",
+    "chromatic": "^6.17.4",
     "eslint": "^8.38.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "^29.5.0",
@@ -54,12 +59,17 @@
     "@rollup/plugin-terser": "^0.4.1",
     "react-collapsible": "^2.10.0",
     "react-icons-kit": "^2.0.0",
-    "rollup-plugin-peer-deps-external": "^2.2.4"
+    "react-select": "^5.7.3",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "tinycolor2": "^1.6.0"
   },
+  "readme": "ERROR: No README data found!",
+  "_id": "@kwantis-id3/frontend-library@0.6.1",
   "scripts": {
     "rollup": "rollup -c",
     "test": "jest",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=3dd812d03e4c"
   }
 }