@taikai/rocket-kit 2.0.0-beta.8 → 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/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/file-picker/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface FilePickerProps {
+    minimal?: boolean;
+    name: string;
+    accept?: string;
+    multiple?: boolean;
+    placeholder?: string;
+    pluralText?: string;
+    error?: string;
+    dataTestId?: string;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    buttonText?: string;
+    disabled?: boolean;
+}
+declare const FilePicker: (props: FilePickerProps) => JSX.Element;
+export default FilePicker;

package/dist/atoms/file-picker/stories/file-picker.stories.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { FilePickerProps } from '..';
+declare const _default: {
+    title: string;
+    component: (props: FilePickerProps) => JSX.Element;
+};
+export default _default;
+export declare const FilePickerComponent: {
+    (args: FilePickerProps): JSX.Element;
+    story: {
+        name: string;
+        args: {
+            minimal: boolean;
+            multiple: boolean;
+            name: string;
+            placeholder: string;
+            pluralText: string;
+            error: string;
+            buttonText: string;
+            disabled: boolean;
+        };
+    };
+};

package/dist/atoms/file-picker/styles.d.ts

@@ -0,0 +1,7 @@
+interface FilePickerProps {
+    minimal?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+}
+export declare const Wrapper: import("styled-components").StyledComponent<"div", any, FilePickerProps, never>;
+export {};

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

@@ -20,6 +20,7 @@ export { default as Slideshow } from './atoms/slideshow';
 export { default as VideoPlayer } from './atoms/video-player';
 export { default as ProgressBar } from './atoms/progress-bar';
 export { default as Toggle } from './atoms/toggle';
+export { default as FilePicker } from './atoms/file-picker';
 export { default as ActionsMenu } from './molecules/actions-menu';
 export { default as CardValue } from './molecules/card-value';
 export { default as EmptyTable } from './molecules/empty-table';

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;