@taikai/rocket-kit 2.0.0 → 2.0.1

package/README.md

@@ -114,6 +114,13 @@ netlify init
 # pick yes for netlify.toml
 ```
 
+## Compiling Locally
+When it is published or compiled locally, it allows to rapidly test the design system as would the final developer
+
+* Change the `package.json` version property. For instance, if the version is currently at `2.0.0-beta.10`, change it to `2.0.0-beta.11`
+* Run the command `npm run pack`, and you will find a file with the name `taikai-taikai-design-system-2.0.0-beta.11.tgz` at the root of your project. Copy the filepath of this file and move to the next step
+* Now, in one of your separated projects, run `npm i [filepath-copied-above]`
+
 ## Publishing to Github Package Registry
 
 We are using [np](https://github.com/sindresorhus/np)
@@ -122,14 +129,14 @@ We are using [np](https://github.com/sindresorhus/np)
 npm install --global np
 ```
 
-### Get Github Personnal Access Token 
+### Get Github Personnal Access Token
 
-Follow this guide: 
-https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token 
+Follow this guide:
+https://docs.github.com/en/free-pro-team@latest/github/authenticating-to-github/creating-a-personal-access-token
 
-you need the following scopes (read:packages, write:packages, delete:packages, repo). 
+you need the following scopes (read:packages, write:packages, delete:packages, repo).
 
-Once you get the TOKEN, you can login: 
+Once you get the TOKEN, you can login:
 
 ```
 $ npm login --scope=@OWNER --registry=https://npm.pkg.github.com

package/dist/atoms/select-interactive/components/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { TCustomOptions, TOptions } from '../types';
+import { formatGroupLabel } from 'react-select/src/builtins';
+export declare const FormatGroupLabel: formatGroupLabel<TOptions>;
+export declare const CustomSelectOption: (props: TCustomOptions, commonProps: any) => JSX.Element;
+export declare const CustomSelectValue: (props: TCustomOptions) => JSX.Element;

package/dist/atoms/select-interactive/index.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
-declare const SelectInteractive: (props: any) => JSX.Element;
+import { SelectInteractiveProps, TSelectInteractiveOption } from './types';
+declare const SelectInteractive: ({ name, multi, search, placeholder, options, value, clear, error, disabled, formatGroupLabel, onChange, onInputChange, ...rest }: SelectInteractiveProps<TSelectInteractiveOption>) => JSX.Element;
 export default SelectInteractive;

package/dist/atoms/select-interactive/stories/select-interactive.stories.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
+import { SelectInteractiveProps, TSelectInteractiveOption } from '../types';
 declare const _default: {
     title: string;
-    component: (props: any) => JSX.Element;
+    component: ({ name, multi, search, placeholder, options, value, clear, error, disabled, formatGroupLabel, onChange, onInputChange, ...rest }: SelectInteractiveProps<TSelectInteractiveOption>) => JSX.Element;
     argTypes: {
         multi: {
             control: {
@@ -16,13 +17,8 @@ declare const _default: {
     };
 };
 export default _default;
-interface SelectInteractiveProps {
-    multi: boolean;
-    search: boolean;
-    placeholder: string;
-}
 export declare const SelectInteractiveSimpleComponent: {
-    (args: SelectInteractiveProps): JSX.Element;
+    (args: SelectInteractiveProps<TSelectInteractiveOption>): JSX.Element;
     storyName: string;
     args: {
         multi: boolean;
@@ -30,8 +26,12 @@ export declare const SelectInteractiveSimpleComponent: {
         placeholder: string;
     };
 };
+export declare const SelectInteractiveFormatedGroupedOptionsComponent: {
+    (args: SelectInteractiveProps<TSelectInteractiveOption>): JSX.Element;
+    storyName: string;
+};
 export declare const SelectInteractiveIconsComponent: {
-    (args: SelectInteractiveProps): JSX.Element;
+    (args: SelectInteractiveProps<TSelectInteractiveOption>): JSX.Element;
     storyName: string;
     args: {
         multi: boolean;
@@ -40,7 +40,7 @@ export declare const SelectInteractiveIconsComponent: {
     };
 };
 export declare const SelectInteractiveCustomComponent: {
-    (args: SelectInteractiveProps): JSX.Element;
+    (args: SelectInteractiveProps<TSelectInteractiveOption>): JSX.Element;
     storyName: string;
     args: {
         multi: boolean;

package/dist/atoms/select-interactive/styles.d.ts

@@ -1 +1,2 @@
 export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SelectGroupLabel: import("styled-components").StyledComponent<"span", any, {}, never>;

package/dist/atoms/select-interactive/types.d.ts

@@ -0,0 +1,34 @@
+import { MapHTMLAttributes, ReactNode } from 'react';
+import { NamedProps } from 'react-select/src/Select';
+export interface TSelectInteractiveOption {
+    value: string;
+    label: string;
+    [k: string]: any;
+}
+export interface TOptions extends TSelectInteractiveOption {
+    icon?: string;
+    customImage?: React.ReactNode;
+}
+export interface TCustomOptions {
+    data: TOptions;
+}
+export interface OptionsGroup<T extends TSelectInteractiveOption> {
+    label: string;
+    options: ReadonlyArray<T>;
+}
+declare type TDivElement = Omit<MapHTMLAttributes<HTMLDivElement>, 'onChange' | 'placeholder'>;
+declare type Options = TSelectInteractiveOption | ReadonlyArray<TSelectInteractiveOption>;
+export interface SelectInteractiveProps<T extends Options> extends TDivElement, Pick<NamedProps<T>, 'onInputChange'> {
+    name?: string;
+    error?: string;
+    clear?: boolean;
+    multi?: boolean;
+    search?: boolean;
+    disabled?: boolean;
+    placeholder?: ReactNode;
+    formatGroupLabel?: boolean;
+    value?: ReadonlyArray<TOptions> | TOptions | null | undefined;
+    onChange: (values: Array<TOptions> | TOptions) => void;
+    options: ReadonlyArray<TOptions | OptionsGroup<TOptions>>;
+}
+export {};