@ssa-ui-kit/core 1.0.19 → 1.1.0

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 (13) hide show
  1. package/dist/components/Badge/types.d.ts +1 -1
  2. package/dist/components/PieChart/PieChart.d.ts +1 -1
  3. package/dist/components/PieChart/types.d.ts +2 -1
  4. package/dist/index.js +1 -1
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
  7. package/src/components/Badge/Badge.stories.tsx +8 -0
  8. package/src/components/Badge/Badge.tsx +11 -1
  9. package/src/components/Badge/types.ts +1 -1
  10. package/src/components/PieChart/PieChart.stories.tsx +130 -77
  11. package/src/components/PieChart/PieChart.tsx +7 -1
  12. package/src/components/PieChart/types.ts +2 -1
  13. package/tsbuildcache +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ssa-ui-kit/core",
3
- "version": "1.0.19",
3
+ "version": "1.1.0",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "private": false,
package/src/components/Badge/Badge.stories.tsx CHANGED
@@ -154,3 +154,11 @@ WithIcon.argTypes = {
154
154
  control: false,
155
155
  },
156
156
  };
157
+
158
+ export const WithCustomColor = () => {
159
+ return (
160
+ <Badge color={'#F7931A'} size="medium">
161
+ Custom color
162
+ </Badge>
163
+ );
164
+ };
package/src/components/Badge/Badge.tsx CHANGED
@@ -36,7 +36,17 @@ const Badge = React.forwardRef<HTMLDivElement, BadgeProps>(function Badge(
36
36
  ref,
37
37
  ) {
38
38
  return (
39
- <BadgeBase ref={ref} css={[mapColors[color], mapSizes[size]]} {...props}>
39
+ <BadgeBase
40
+ ref={ref}
41
+ css={[
42
+ color in mapColors
43
+ ? mapColors[color as keyof MainColors]
44
+ : {
45
+ background: color,
46
+ },
47
+ mapSizes[size],
48
+ ]}
49
+ {...props}>
40
50
  {children ? children : null}
41
51
  </BadgeBase>
42
52
  );
package/src/components/Badge/types.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export interface BadgeProps {
2
- color?: keyof MainColors;
2
+ color?: keyof MainColors | string;
3
3
  size?: keyof MainSizes;
4
4
  children?: React.ReactNode;
5
5
  as?: React.ElementType;
package/src/components/PieChart/PieChart.stories.tsx CHANGED
@@ -21,49 +21,47 @@ export const FitnessExample: StoryObj<typeof PieChart> = () => {
21
21
  ] as unknown as string[];
22
22
 
23
23
  return (
24
- <div style={{ width: '400px' }}>
25
- <PieChart
26
- data={fitnessData}
27
- colors={pieChartColors}
28
- animate={false}
29
- title={
24
+ <PieChart
25
+ data={fitnessData}
26
+ colors={pieChartColors}
27
+ animate={false}
28
+ title={
29
+ <Typography
30
+ variant="body2"
31
+ weight="regular"
32
+ color={theme.colors.greyDarker60}
33
+ css={css`
34
+ font-size: 16px;
35
+ line-height: 16px;
36
+ margin-top: -5px;
37
+ `}>
38
+ Total
30
39
  <Typography
31
40
  variant="body2"
32
- weight="regular"
33
- color={theme.colors.greyDarker60}
41
+ weight="bold"
42
+ color={theme.colors.greyDarker}
34
43
  css={css`
35
- font-size: 16px;
36
- line-height: 16px;
37
- margin-top: -5px;
44
+ font-size: 27.65px;
45
+ line-height: 35px;
38
46
  `}>
39
- Total
47
+ 143
40
48
  <Typography
41
49
  variant="body2"
42
- weight="bold"
43
- color={theme.colors.greyDarker}
50
+ weight="regular"
51
+ as="span"
52
+ color={theme.colors.greyDarker60}
44
53
  css={css`
45
- font-size: 27.65px;
46
- line-height: 35px;
54
+ font-size: 16px;
55
+ font-weight: 600;
56
+ margin-left: 3px;
47
57
  `}>
48
- 143
49
- <Typography
50
- variant="body2"
51
- weight="regular"
52
- as="span"
53
- color={theme.colors.greyDarker60}
54
- css={css`
55
- font-size: 16px;
56
- font-weight: 600;
57
- margin-left: 3px;
58
- `}>
59
- hrs
60
- </Typography>
58
+ hrs
61
59
  </Typography>
62
60
  </Typography>
63
- }>
64
- <PieChartLegend data={fitnessData} colors={colorNames} />
65
- </PieChart>
66
- </div>
61
+ </Typography>
62
+ }>
63
+ <PieChartLegend data={fitnessData} colors={colorNames} />
64
+ </PieChart>
67
65
  );
68
66
  };
69
67
  FitnessExample.args = {};
@@ -74,56 +72,111 @@ export const AccountExample: StoryObj<typeof PieChart> = () => {
74
72
  pieChartPalettes.getBalancePalette(theme);
75
73
 
76
74
  return (
77
- <div style={{ width: '400px' }}>
78
- <PieChart
79
- data={accountData}
80
- colors={pieChartColors}
81
- animate={false}
82
- title={
75
+ <PieChart
76
+ data={accountData}
77
+ colors={pieChartColors}
78
+ animate={false}
79
+ title={
80
+ <Typography
81
+ variant="body2"
82
+ weight="bold"
83
+ color={theme.colors.greyDarker}
84
+ css={css`
85
+ font-size: 20px;
86
+ line-height: 25px;
87
+ `}>
88
+ 18183 &nbsp;
83
89
  <Typography
84
90
  variant="body2"
85
- weight="bold"
86
- color={theme.colors.greyDarker}
91
+ weight="regular"
92
+ as="span"
93
+ color={theme.colors.greyDarker80}
87
94
  css={css`
88
- font-size: 20px;
89
- line-height: 25px;
95
+ font-size: 14px;
90
96
  `}>
91
- 18183 &nbsp;
92
- <Typography
93
- variant="body2"
94
- weight="regular"
95
- as="span"
96
- color={theme.colors.greyDarker80}
97
- css={css`
98
- font-size: 14px;
99
- `}>
100
- USDT
101
- </Typography>
97
+ USDT
102
98
  </Typography>
103
- }>
104
- <PieChartLegend
105
- data={accountData}
106
- colors={legendColorNames}
107
- renderValue={({ value, label }) =>
108
- label === 'Other' ? value + ' USD' : value + ' ' + label
99
+ </Typography>
100
+ }>
101
+ <PieChartLegend
102
+ data={accountData}
103
+ colors={legendColorNames}
104
+ renderValue={({ value, label }) =>
105
+ label === 'Other' ? value + ' USD' : value + ' ' + label
106
+ }
107
+ markerStyles={css`
108
+ width: 10px;
109
+ height: 10px;
110
+ `}
111
+ labelListStyles={css`
112
+ h6 {
113
+ font-weight: 700;
109
114
  }
110
- markerStyles={css`
111
- width: 10px;
112
- height: 10px;
113
- `}
114
- labelListStyles={css`
115
- h6 {
116
- font-weight: 700;
117
- }
118
- `}
119
- valueListStyles={css`
120
- h6 {
121
- color: ${theme.colors.greyDarker80};
122
- }
123
- `}
124
- />
125
- </PieChart>
126
- </div>
115
+ `}
116
+ valueListStyles={css`
117
+ h6 {
118
+ color: ${theme.colors.greyDarker80};
119
+ }
120
+ `}
121
+ />
122
+ </PieChart>
127
123
  );
128
124
  };
129
125
  AccountExample.args = {};
126
+
127
+ export const CustomColors: StoryObj<typeof PieChart> = () => {
128
+ const theme = useTheme();
129
+ const colors = ['#F7931A', '#50AF95', '#6f93d1', '#d37070'];
130
+
131
+ return (
132
+ <PieChart
133
+ data={accountData}
134
+ colors={colors}
135
+ animate={false}
136
+ title={
137
+ <Typography
138
+ variant="body2"
139
+ weight="bold"
140
+ color={theme.colors.greyDarker}
141
+ css={css`
142
+ font-size: 20px;
143
+ line-height: 25px;
144
+ `}>
145
+ 18183 &nbsp;
146
+ <Typography
147
+ variant="body2"
148
+ weight="regular"
149
+ as="span"
150
+ color={theme.colors.greyDarker80}
151
+ css={css`
152
+ font-size: 14px;
153
+ `}>
154
+ USDT
155
+ </Typography>
156
+ </Typography>
157
+ }>
158
+ <PieChartLegend
159
+ data={accountData}
160
+ backgroundColors={colors}
161
+ renderValue={({ value, label }) =>
162
+ label === 'Other' ? value + ' USD' : value + ' ' + label
163
+ }
164
+ markerStyles={css`
165
+ width: 10px;
166
+ height: 10px;
167
+ `}
168
+ labelListStyles={css`
169
+ h6 {
170
+ font-weight: 700;
171
+ }
172
+ `}
173
+ valueListStyles={css`
174
+ h6 {
175
+ color: ${theme.colors.greyDarker80};
176
+ }
177
+ `}
178
+ />
179
+ </PieChart>
180
+ );
181
+ };
182
+ CustomColors.args = {};
package/src/components/PieChart/PieChart.tsx CHANGED
@@ -8,10 +8,16 @@ export const PieChart = ({
8
8
  className,
9
9
  title,
10
10
  children,
11
+ width = 400,
11
12
  ...chartProps
12
13
  }: PieChartProps) => {
13
14
  return (
14
- <PieChartBase as={as} className={className}>
15
+ <PieChartBase
16
+ as={as}
17
+ className={className}
18
+ css={{
19
+ width,
20
+ }}>
15
21
  <div className="pie-chart-wrapper">
16
22
  <ResponsivePie
17
23
  isInteractive={false}
package/src/components/PieChart/types.ts CHANGED
@@ -7,6 +7,7 @@ export interface PieChartProps
7
7
  React.ComponentProps<typeof ResponsivePie> {
8
8
  title?: React.ReactNode;
9
9
  children?: React.ReactNode;
10
+ width?: number;
10
11
  }
11
12
 
12
13
  export interface PieChartLegendItem extends MayHaveLabel {
@@ -18,7 +19,7 @@ export interface PieChartLegendItem extends MayHaveLabel {
18
19
 
19
20
  export interface PieChartLegendProps {
20
21
  data: Array<PieChartLegendItem>;
21
- colors?: Array<keyof MainColors>;
22
+ colors?: Array<keyof MainColors | string>;
22
23
  backgroundColors?: Array<string>;
23
24
  renderValue?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;
24
25
  renderLabel?: (item: PieChartLegendItem) => NonNullable<React.ReactNode>;