@taikai/rocket-kit 2.0.0-beta.9 → 2.0.2

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/button/stories/button.stories.d.ts

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { ButtonProps } from '..';
+declare const _default: {
+    title: string;
+    component: (props: ButtonProps) => JSX.Element;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        variant: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        icon: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        iconPosition: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const ButtonComponent: {
+    (args: ButtonProps): JSX.Element;
+    storyName: string;
+    args: {
+        value: string;
+        variant: string;
+        color: string;
+        circle: boolean;
+        className: string;
+        querySelector: string;
+        ariaLabel: string;
+        disabled: boolean;
+        loading: boolean;
+        icon: string;
+        iconPosition: string;
+    };
+};

package/dist/atoms/button/types.d.ts

@@ -1,2 +1,2 @@
 export declare type ButtonVariant = 'solid' | 'outline' | 'text';
-export declare type ButtonColor = 'green' | 'orange' | 'red' | 'grey' | 'purple' | 'white' | 'dark' | 'magic' | 'pulse';
+export declare type ButtonColor = 'green' | 'orange' | 'red' | 'grey' | 'purple' | 'white' | 'dark' | 'blue' | 'magic' | 'pulse';

package/dist/atoms/button-dropdown/index.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { ButtonColor, ButtonVariant } from '../button/types';
 import { ActionMenu } from './types';
-interface ActionsMenuInterface<T> {
+export interface ActionsMenuInterface<T> {
     variant?: ButtonVariant;
     color?: ButtonColor;
     value: string;

package/dist/atoms/button-dropdown/stories/button-dropdown.stories.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { ActionsMenuInterface } from '..';
+declare const _default: {
+    title: string;
+    component: <T>(props: ActionsMenuInterface<T>) => JSX.Element;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        variant: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        icon: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const ButtonDropdownComponent: {
+    <T>(args: ActionsMenuInterface<T>): JSX.Element;
+    storyName: string;
+    args: {
+        variant: string;
+        color: string;
+        value: string;
+        icon: string;
+        ariaLabel: string;
+        actions: {
+            id: string;
+            value: string;
+            url: null;
+            action: () => void;
+        }[];
+        dataTestId: string;
+        startsOpen: boolean;
+        disabled: boolean;
+    };
+};

package/dist/atoms/button-link/stories/button-link.stories.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+import { ButtonLinkProps } from '..';
+declare const _default: {
+    title: string;
+    component: (props: ButtonLinkProps) => JSX.Element;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        variant: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        icon: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        iconPosition: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const ButtonLinkComponent: {
+    (args: ButtonLinkProps): JSX.Element;
+    storyName: string;
+    args: {
+        value: string;
+        variant: string;
+        color: string;
+        circle: boolean;
+        className: string;
+        querySelector: string;
+        ariaLabel: string;
+        disabled: boolean;
+        loading: boolean;
+        icon: string;
+        iconPosition: string;
+        rel: string;
+        url: string;
+        blank: boolean;
+    };
+};

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 {};

package/dist/atoms/tag/index.d.ts

@@ -1,6 +1,6 @@
 import { CSSProperties } from 'react';
 import { TagVariant, TagColor } from './types';
-interface TagProps {
+export interface TagProps {
     variant?: TagVariant;
     color?: TagColor;
     value: string;

package/dist/atoms/tag/stories/tag.stories.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { TagProps } from '..';
+declare const _default: {
+    title: string;
+    component: (props: TagProps) => JSX.Element;
+    argTypes: {
+        color: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+        variant: {
+            control: {
+                type: string;
+                options: string[];
+            };
+        };
+    };
+};
+export default _default;
+export declare const TagPrimaryComponent: {
+    (args: TagProps): JSX.Element;
+    storyName: string;
+    args: {
+        color: string;
+        variant: string;
+        value: string;
+    };
+};

package/dist/atoms/tag/types.d.ts

@@ -1,2 +1,2 @@
 export declare type TagVariant = 'solid' | 'outline';
-export declare type TagColor = 'green' | 'orange' | 'red' | 'grey';
+export declare type TagColor = 'green' | 'orange' | 'red' | 'grey' | 'light';

package/dist/ions/variables.d.ts

@@ -2,6 +2,7 @@ export declare const colors: {
     normal: string;
     light: string;
     blue: string;
+    darkBlue: string;
     orange: string;
     darkOrange: string;
     red: string;