@taikai/rocket-kit 2.0.2 → 3.0.0-beta.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/dist/atoms/button/index.d.ts +10 -9
  2. package/dist/atoms/button/stories/button.stories.d.ts +16 -9
  3. package/dist/atoms/button/styles.d.ts +2 -2
  4. package/dist/atoms/button/types.d.ts +2 -1
  5. package/dist/atoms/button-dropdown/index.d.ts +8 -4
  6. package/dist/atoms/button-dropdown/stories/button-dropdown.stories.d.ts +11 -2
  7. package/dist/atoms/button-link/index.d.ts +11 -10
  8. package/dist/atoms/button-link/stories/button-link.stories.d.ts +17 -12
  9. package/dist/atoms/button-link/styles.d.ts +2 -1
  10. package/dist/atoms/tag/index.d.ts +1 -0
  11. package/dist/atoms/tag/stories/tag.stories.d.ts +7 -0
  12. package/dist/atoms/tag/styles.d.ts +1 -0
  13. package/dist/atoms/tag/types.d.ts +2 -1
  14. package/dist/atoms/tag-number/index.d.ts +5 -2
  15. package/dist/atoms/tag-number/stories/tag-number.stories.d.ts +16 -0
  16. package/dist/atoms/tag-number/styles.d.ts +7 -1
  17. package/dist/ions/variables.d.ts +148 -2
  18. package/dist/molecules/table/index.d.ts +3 -0
  19. package/dist/molecules/table/stories/table.stories.d.ts +18 -0
  20. package/dist/molecules/table/styles.d.ts +4 -2
  21. package/dist/organisms/loading-state/index.d.ts +1 -4
  22. package/dist/organisms/loading-state/stories/loading-state.stories.d.ts +0 -3
  23. package/dist/organisms/loading-state/styles.d.ts +0 -1
  24. package/dist/rocket-kit.cjs.development.js +664 -671
  25. package/dist/rocket-kit.cjs.development.js.map +1 -1
  26. package/dist/rocket-kit.cjs.production.min.js +351 -509
  27. package/dist/rocket-kit.cjs.production.min.js.map +1 -1
  28. package/dist/rocket-kit.esm.js +666 -673
  29. package/dist/rocket-kit.esm.js.map +1 -1
  30. package/dist/utils/hooks/use-color.d.ts +4 -0
  31. package/package.json +4 -4
  32. package/dist/utils/hooks/use-mouse-move-effect.d.ts +0 -5
@@ -2,21 +2,22 @@ import React, { CSSProperties } from 'react';
2
2
  import { ButtonColor, ButtonVariant } from './types';
3
3
  export interface ButtonProps {
4
4
  variant?: ButtonVariant;
5
- circle?: boolean;
5
+ rounded?: boolean;
6
6
  color?: ButtonColor;
7
- value?: string;
7
+ txtColor?: ButtonColor;
8
+ type?: 'submit' | 'reset' | 'button';
8
9
  className?: string;
9
- querySelector?: string;
10
- ariaLabel?: string;
10
+ style?: CSSProperties;
11
11
  action?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
12
- disabled?: boolean;
12
+ value?: string;
13
+ iconPosition?: 'left' | 'right';
14
+ icon?: string;
13
15
  loading?: boolean;
16
+ ariaLabel?: string;
17
+ ariaHidden?: boolean;
14
18
  dataTestId?: string;
15
19
  eventId?: string;
16
- icon?: string;
17
- iconPosition?: 'left' | 'right';
18
- style?: CSSProperties;
19
- type?: 'submit' | 'reset' | 'button';
20
+ disabled?: boolean;
20
21
  }
21
22
  declare const Button: (props: ButtonProps) => JSX.Element;
22
23
  export default Button;
@@ -4,19 +4,19 @@ declare const _default: {
4
4
  title: string;
5
5
  component: (props: ButtonProps) => JSX.Element;
6
6
  argTypes: {
7
- color: {
7
+ variant: {
8
8
  control: {
9
9
  type: string;
10
10
  options: string[];
11
11
  };
12
12
  };
13
- variant: {
13
+ color: {
14
14
  control: {
15
15
  type: string;
16
16
  options: string[];
17
17
  };
18
18
  };
19
- icon: {
19
+ txtColor: {
20
20
  control: {
21
21
  type: string;
22
22
  options: string[];
@@ -28,6 +28,12 @@ declare const _default: {
28
28
  options: string[];
29
29
  };
30
30
  };
31
+ icon: {
32
+ control: {
33
+ type: string;
34
+ options: string[];
35
+ };
36
+ };
31
37
  };
32
38
  };
33
39
  export default _default;
@@ -35,16 +41,17 @@ export declare const ButtonComponent: {
35
41
  (args: ButtonProps): JSX.Element;
36
42
  storyName: string;
37
43
  args: {
38
- value: string;
39
44
  variant: string;
45
+ rounded: boolean;
40
46
  color: string;
41
- circle: boolean;
47
+ txtColor: string;
42
48
  className: string;
43
- querySelector: string;
49
+ value: string;
50
+ iconPosition: string;
51
+ icon: string;
52
+ loading: boolean;
44
53
  ariaLabel: string;
54
+ ariaHidden: boolean;
45
55
  disabled: boolean;
46
- loading: boolean;
47
- icon: string;
48
- iconPosition: string;
49
56
  };
50
57
  };
@@ -1,11 +1,11 @@
1
1
  import { ButtonColor, ButtonVariant } from './types';
2
2
  interface ButtonProps {
3
3
  variant?: ButtonVariant;
4
- circle?: boolean;
4
+ rounded?: boolean;
5
5
  color?: ButtonColor;
6
+ txtColor?: ButtonColor;
6
7
  value?: String;
7
8
  iconPosition?: 'left' | 'right';
8
9
  }
9
- export declare const pulseKeyframes: import("styled-components").Keyframes;
10
10
  export declare const ButtonWrapper: import("styled-components").StyledComponent<"button", any, ButtonProps, never>;
11
11
  export {};
@@ -1,2 +1,3 @@
1
+ export declare const colors: string[];
1
2
  export declare type ButtonVariant = 'solid' | 'outline' | 'text';
2
- export declare type ButtonColor = 'green' | 'orange' | 'red' | 'grey' | 'purple' | 'white' | 'dark' | 'blue' | 'magic' | 'pulse';
3
+ export declare type ButtonColor = typeof colors[number];
@@ -3,15 +3,19 @@ import { ButtonColor, ButtonVariant } from '../button/types';
3
3
  import { ActionMenu } from './types';
4
4
  export interface ActionsMenuInterface<T> {
5
5
  variant?: ButtonVariant;
6
+ rounded?: boolean;
6
7
  color?: ButtonColor;
7
- value: string;
8
- icon?: string;
8
+ txtColor?: ButtonColor;
9
9
  className?: string;
10
10
  style?: CSSProperties;
11
- ariaLabel?: string;
12
11
  actions: ActionMenu<T>[];
13
- data?: T;
12
+ value?: string;
13
+ icon: string;
14
+ ariaLabel?: string;
15
+ ariaHidden?: boolean;
14
16
  dataTestId?: string;
17
+ eventId?: string;
18
+ data?: T;
15
19
  startsOpen?: boolean;
16
20
  disabled?: boolean;
17
21
  }
@@ -4,13 +4,19 @@ declare const _default: {
4
4
  title: string;
5
5
  component: <T>(props: ActionsMenuInterface<T>) => JSX.Element;
6
6
  argTypes: {
7
+ variant: {
8
+ control: {
9
+ type: string;
10
+ options: string[];
11
+ };
12
+ };
7
13
  color: {
8
14
  control: {
9
15
  type: string;
10
16
  options: string[];
11
17
  };
12
18
  };
13
- variant: {
19
+ txtColor: {
14
20
  control: {
15
21
  type: string;
16
22
  options: string[];
@@ -30,17 +36,20 @@ export declare const ButtonDropdownComponent: {
30
36
  storyName: string;
31
37
  args: {
32
38
  variant: string;
39
+ rounded: boolean;
33
40
  color: string;
41
+ txtColor: string;
42
+ className: string;
34
43
  value: string;
35
44
  icon: string;
36
45
  ariaLabel: string;
46
+ ariaHidden: boolean;
37
47
  actions: {
38
48
  id: string;
39
49
  value: string;
40
50
  url: null;
41
51
  action: () => void;
42
52
  }[];
43
- dataTestId: string;
44
53
  startsOpen: boolean;
45
54
  disabled: boolean;
46
55
  };
@@ -1,22 +1,23 @@
1
1
  import React, { CSSProperties } from 'react';
2
2
  import { ButtonColor, ButtonVariant } from '../button/types';
3
3
  export interface ButtonLinkProps {
4
- url: string;
5
- blank?: boolean;
6
4
  variant?: ButtonVariant;
7
- circle?: boolean;
5
+ rounded?: boolean;
8
6
  color?: ButtonColor;
9
- value?: string;
7
+ txtColor?: ButtonColor;
10
8
  className?: string;
11
- querySelector?: string;
12
- ariaLabel?: string;
9
+ style?: CSSProperties;
13
10
  action?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
11
+ url: string;
12
+ blank?: boolean;
13
+ rel?: string;
14
+ value?: string;
15
+ iconPosition?: 'left' | 'right';
16
+ icon?: string;
14
17
  dataTestId?: string;
15
18
  eventId?: string;
16
- icon?: string;
17
- iconPosition?: 'left' | 'right';
18
- style?: CSSProperties;
19
- rel?: string;
19
+ ariaLabel?: string;
20
+ ariaHidden?: boolean;
20
21
  }
21
22
  declare const ButtonLink: (props: ButtonLinkProps) => JSX.Element;
22
23
  export default ButtonLink;
@@ -4,19 +4,19 @@ declare const _default: {
4
4
  title: string;
5
5
  component: (props: ButtonLinkProps) => JSX.Element;
6
6
  argTypes: {
7
- color: {
7
+ variant: {
8
8
  control: {
9
9
  type: string;
10
10
  options: string[];
11
11
  };
12
12
  };
13
- variant: {
13
+ color: {
14
14
  control: {
15
15
  type: string;
16
16
  options: string[];
17
17
  };
18
18
  };
19
- icon: {
19
+ txtColor: {
20
20
  control: {
21
21
  type: string;
22
22
  options: string[];
@@ -28,6 +28,12 @@ declare const _default: {
28
28
  options: string[];
29
29
  };
30
30
  };
31
+ icon: {
32
+ control: {
33
+ type: string;
34
+ options: string[];
35
+ };
36
+ };
31
37
  };
32
38
  };
33
39
  export default _default;
@@ -35,19 +41,18 @@ export declare const ButtonLinkComponent: {
35
41
  (args: ButtonLinkProps): JSX.Element;
36
42
  storyName: string;
37
43
  args: {
38
- value: string;
39
44
  variant: string;
45
+ rounded: boolean;
40
46
  color: string;
41
- circle: boolean;
47
+ txtColor: string;
42
48
  className: string;
43
- querySelector: string;
44
- ariaLabel: string;
45
- disabled: boolean;
46
- loading: boolean;
47
- icon: string;
48
- iconPosition: string;
49
- rel: string;
50
49
  url: string;
51
50
  blank: boolean;
51
+ rel: string;
52
+ value: string;
53
+ iconPosition: string;
54
+ icon: string;
55
+ ariaLabel: string;
56
+ ariaHidden: boolean;
52
57
  };
53
58
  };
@@ -1,8 +1,9 @@
1
1
  import { ButtonColor, ButtonVariant } from '../button/types';
2
2
  interface ButtonStyleProps {
3
3
  variant?: ButtonVariant;
4
- circle?: boolean;
4
+ rounded?: boolean;
5
5
  color?: ButtonColor;
6
+ txtColor?: ButtonColor;
6
7
  value?: String;
7
8
  iconPosition?: 'left' | 'right';
8
9
  }
@@ -3,6 +3,7 @@ import { TagVariant, TagColor } from './types';
3
3
  export interface TagProps {
4
4
  variant?: TagVariant;
5
5
  color?: TagColor;
6
+ txtColor?: TagColor;
6
7
  value: string;
7
8
  className?: string;
8
9
  style?: CSSProperties;
@@ -10,6 +10,12 @@ declare const _default: {
10
10
  options: string[];
11
11
  };
12
12
  };
13
+ txtColor: {
14
+ control: {
15
+ type: string;
16
+ options: string[];
17
+ };
18
+ };
13
19
  variant: {
14
20
  control: {
15
21
  type: string;
@@ -24,6 +30,7 @@ export declare const TagPrimaryComponent: {
24
30
  storyName: string;
25
31
  args: {
26
32
  color: string;
33
+ txtColor: string;
27
34
  variant: string;
28
35
  value: string;
29
36
  };
@@ -2,6 +2,7 @@ import { TagVariant, TagColor } from './types';
2
2
  interface TagWrapperProps {
3
3
  variant?: TagVariant;
4
4
  color?: TagColor;
5
+ txtColor?: TagColor;
5
6
  }
6
7
  export declare const TagWrapper: import("styled-components").StyledComponent<"span", any, TagWrapperProps, never>;
7
8
  export {};
@@ -1,2 +1,3 @@
1
+ export declare const colors: string[];
1
2
  export declare type TagVariant = 'solid' | 'outline';
2
- export declare type TagColor = 'green' | 'orange' | 'red' | 'grey' | 'light';
3
+ export declare type TagColor = typeof colors[number];
@@ -1,9 +1,12 @@
1
1
  import { CSSProperties } from 'react';
2
+ import { TagColor } from '../tag/types';
2
3
  export interface TagNumberProps {
3
- label: string;
4
- value: number | string;
5
4
  className?: string;
6
5
  style?: CSSProperties;
6
+ color?: TagColor;
7
+ valueColor?: TagColor;
8
+ label: string;
9
+ value: number | string;
7
10
  }
8
11
  declare const TagNumber: (props: TagNumberProps) => JSX.Element;
9
12
  export default TagNumber;
@@ -3,13 +3,29 @@ import { TagNumberProps } from '..';
3
3
  declare const _default: {
4
4
  title: string;
5
5
  component: (props: TagNumberProps) => JSX.Element;
6
+ argTypes: {
7
+ color: {
8
+ control: {
9
+ type: string;
10
+ options: string[];
11
+ };
12
+ };
13
+ valueColor: {
14
+ control: {
15
+ type: string;
16
+ options: string[];
17
+ };
18
+ };
19
+ };
6
20
  };
7
21
  export default _default;
8
22
  export declare const TagNumberComponent: {
9
23
  (args: TagNumberProps): JSX.Element;
10
24
  storyName: string;
11
25
  args: {
26
+ color: string;
12
27
  label: string;
13
28
  value: number;
29
+ valueColor: string;
14
30
  };
15
31
  };
@@ -1 +1,7 @@
1
- export declare const TagWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
1
+ import { TagColor } from '../tag/types';
2
+ interface TagWrapperProps {
3
+ color?: TagColor;
4
+ valueColor?: TagColor;
5
+ }
6
+ export declare const TagWrapper: import("styled-components").StyledComponent<"div", any, TagWrapperProps, never>;
7
+ export {};
@@ -1,4 +1,136 @@
1
1
  export declare const colors: {
2
+ black: string;
3
+ white: string;
4
+ grey50: string;
5
+ grey100: string;
6
+ grey150: string;
7
+ grey200: string;
8
+ grey300: string;
9
+ grey400: string;
10
+ grey500: string;
11
+ grey600: string;
12
+ grey700: string;
13
+ grey800: string;
14
+ grey850: string;
15
+ grey900: string;
16
+ grey950: string;
17
+ blue50: string;
18
+ blue100: string;
19
+ blue150: string;
20
+ blue200: string;
21
+ blue300: string;
22
+ blue400: string;
23
+ blue500: string;
24
+ blue600: string;
25
+ blue700: string;
26
+ blue800: string;
27
+ blue850: string;
28
+ blue900: string;
29
+ blue950: string;
30
+ purple50: string;
31
+ purple100: string;
32
+ purple150: string;
33
+ purple200: string;
34
+ purple300: string;
35
+ purple400: string;
36
+ purple500: string;
37
+ purple600: string;
38
+ purple700: string;
39
+ purple800: string;
40
+ purple850: string;
41
+ purple900: string;
42
+ purple950: string;
43
+ red50: string;
44
+ red100: string;
45
+ red150: string;
46
+ red200: string;
47
+ red300: string;
48
+ red400: string;
49
+ red500: string;
50
+ red600: string;
51
+ red700: string;
52
+ red800: string;
53
+ red850: string;
54
+ red900: string;
55
+ red950: string;
56
+ oracle50: string;
57
+ oracle100: string;
58
+ oracle150: string;
59
+ oracle200: string;
60
+ oracle300: string;
61
+ oracle400: string;
62
+ oracle500: string;
63
+ oracle600: string;
64
+ oracle700: string;
65
+ oracle800: string;
66
+ oracle850: string;
67
+ oracle900: string;
68
+ oracle950: string;
69
+ green50: string;
70
+ green100: string;
71
+ green150: string;
72
+ green200: string;
73
+ green300: string;
74
+ green400: string;
75
+ green500: string;
76
+ green600: string;
77
+ green700: string;
78
+ green800: string;
79
+ green850: string;
80
+ green900: string;
81
+ green950: string;
82
+ orange50: string;
83
+ orange100: string;
84
+ orange150: string;
85
+ orange200: string;
86
+ orange300: string;
87
+ orange400: string;
88
+ orange500: string;
89
+ orange600: string;
90
+ orange700: string;
91
+ orange800: string;
92
+ orange850: string;
93
+ orange900: string;
94
+ orange950: string;
95
+ yellow50: string;
96
+ yellow100: string;
97
+ yellow150: string;
98
+ yellow200: string;
99
+ yellow300: string;
100
+ yellow400: string;
101
+ yellow500: string;
102
+ yellow600: string;
103
+ yellow700: string;
104
+ yellow800: string;
105
+ yellow850: string;
106
+ yellow900: string;
107
+ yellow950: string;
108
+ paleBlue50: string;
109
+ paleBlue100: string;
110
+ paleBlue150: string;
111
+ paleBlue200: string;
112
+ paleBlue300: string;
113
+ paleBlue400: string;
114
+ paleBlue500: string;
115
+ paleBlue600: string;
116
+ paleBlue700: string;
117
+ paleBlue800: string;
118
+ paleBlue850: string;
119
+ paleBlue900: string;
120
+ paleBlue950: string;
121
+ paleOrange50: string;
122
+ paleOrange100: string;
123
+ paleOrange150: string;
124
+ paleOrange200: string;
125
+ paleOrange300: string;
126
+ paleOrange400: string;
127
+ paleOrange500: string;
128
+ paleOrange600: string;
129
+ paleOrange700: string;
130
+ paleOrange800: string;
131
+ paleOrange850: string;
132
+ paleOrange900: string;
133
+ paleOrange950: string;
2
134
  normal: string;
3
135
  light: string;
4
136
  blue: string;
@@ -8,7 +140,6 @@ export declare const colors: {
8
140
  red: string;
9
141
  lightRed: string;
10
142
  darkRed: string;
11
- purple: string;
12
143
  lightPurple: string;
13
144
  darkPurple: string;
14
145
  green: string;
@@ -18,8 +149,23 @@ export declare const colors: {
18
149
  lightGrey: string;
19
150
  darkGrey: string;
20
151
  };
21
- export declare const fontWeight: {
152
+ export declare const colorHues: number[];
153
+ export declare const typography: {
154
+ defaultFont: string;
155
+ defaultSize: string;
22
156
  regular: number;
23
157
  medium: number;
24
158
  bold: number;
159
+ letterSpacing: string;
160
+ };
161
+ export declare const button: {
162
+ height: string;
163
+ borderWidth: string;
164
+ borderRadius: string;
165
+ padding: string;
166
+ iconSpacing: string;
167
+ iconSize: string;
168
+ };
169
+ export declare const misc: {
170
+ transitionDuration: string;
25
171
  };
@@ -19,6 +19,9 @@ export interface TableProps<CellDataType> {
19
19
  dataTestId?: string;
20
20
  menuDataTestId?: string;
21
21
  actionMenuTestId?: string;
22
+ loading?: boolean;
23
+ loadingColumns?: number;
24
+ loadingRows?: number;
22
25
  showEmpty?: boolean;
23
26
  emptyValue?: string;
24
27
  className?: string;
@@ -11,6 +11,21 @@ declare const _default: {
11
11
  type: string;
12
12
  };
13
13
  };
14
+ loading: {
15
+ control: {
16
+ type: string;
17
+ };
18
+ };
19
+ loadingColumns: {
20
+ control: {
21
+ type: string;
22
+ };
23
+ };
24
+ loadingRows: {
25
+ control: {
26
+ type: string;
27
+ };
28
+ };
14
29
  };
15
30
  };
16
31
  export default _default;
@@ -19,6 +34,9 @@ export declare const TableComponent: {
19
34
  storyName: string;
20
35
  args: {
21
36
  border: boolean;
37
+ loading: boolean;
38
+ loadingColumns: number;
39
+ loadingRows: number;
22
40
  };
23
41
  };
24
42
  export declare const TableEmptyComponent: {
@@ -1,7 +1,9 @@
1
- interface BorderProps {
1
+ interface TableProps {
2
2
  border?: boolean;
3
+ loadingState?: boolean;
3
4
  }
4
5
  export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
5
6
  export declare const OverflowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
6
- export declare const Table: import("styled-components").StyledComponent<"table", any, BorderProps, never>;
7
+ export declare const Table: import("styled-components").StyledComponent<"table", any, TableProps, never>;
8
+ export declare const SkeletonCell: import("styled-components").StyledComponent<"div", any, {}, never>;
7
9
  export {};
@@ -1,11 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  export interface LoadingStateProps {
3
- type: 'text' | 'card' | 'table' | 'value';
3
+ type: 'text' | 'card' | 'value';
4
4
  lines?: number;
5
5
  cardsNumber?: number;
6
- header?: boolean;
7
- columnsNumber?: number;
8
- rowsNumber?: number;
9
6
  center?: boolean;
10
7
  }
11
8
  declare const LoadingState: (props: LoadingStateProps) => JSX.Element;
@@ -20,9 +20,6 @@ export declare const LoadingStateComponent: {
20
20
  type: string;
21
21
  lines: number;
22
22
  cardsNumber: number;
23
- header: boolean;
24
- columnsNumber: number;
25
- rowsNumber: number;
26
23
  center: boolean;
27
24
  };
28
25
  };
@@ -4,6 +4,5 @@ interface LoadingStateProps {
4
4
  center?: boolean;
5
5
  }
6
6
  export declare const Wrapper: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
7
- export declare const Table: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
8
7
  export declare const Grid: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
9
8
  export {};