@coinbase/ui-mobile-playground 4.5.8 → 4.5.10

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 (11) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dts/__generated__/iconSvgMap.d.ts.map +1 -1
  3. package/dts/components/IconSheetScreen.d.ts.map +1 -1
  4. package/dts/routes.d.ts.map +1 -1
  5. package/esm/__generated__/iconSvgMap.js +1 -1
  6. package/esm/components/IconSheetScreen.js +15 -31
  7. package/esm/routes.js +57 -4
  8. package/package.json +4 -4
  9. package/src/__generated__/iconSvgMap.ts +6 -0
  10. package/src/components/IconSheetScreen.tsx +21 -33
  11. package/src/routes.ts +100 -5
package/esm/components/IconSheetScreen.js CHANGED
@@ -1,8 +1,6 @@
1
- import { ScrollView } from 'react-native';
2
1
  import { SvgXml } from 'react-native-svg';
3
2
  import { useTheme } from '@coinbase/cds-mobile';
4
3
  import { IconSheet } from '@coinbase/cds-mobile/icons/__stories__/IconSheet';
5
- import { Box } from '@coinbase/cds-mobile/layout';
6
4
  import { svgMap } from '../__generated__/iconSvgMap';
7
5
 
8
6
  // we only have svg assets for sizes xs, s, and m
@@ -14,34 +12,20 @@ const getIconSourceSize = iconSize => {
14
12
  };
15
13
  export function IconSheetScreen() {
16
14
  const theme = useTheme();
17
- return /*#__PURE__*/_jsx(ScrollView, {
18
- keyboardShouldPersistTaps: "always",
19
- persistentScrollbar: false,
20
- showsVerticalScrollIndicator: false,
21
- style: {
22
- backgroundColor: theme.color.bg,
23
- height: '100%'
24
- },
25
- testID: "mobile-playground-scrollview",
26
- children: /*#__PURE__*/_jsx(Box, {
27
- background: "bg",
28
- padding: 2,
29
- children: /*#__PURE__*/_jsx(IconSheet, {
30
- renderIcon: (iconName, iconSize) => {
31
- const size = theme.iconSize[iconSize];
32
- const sourceSize = getIconSourceSize(size);
33
- const key = "".concat(iconName, "-").concat(sourceSize, "-inactive");
34
- if (!(key in svgMap)) {
35
- throw new Error("Icon ".concat(key, " not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it."));
36
- }
37
- return /*#__PURE__*/_jsx(SvgXml, {
38
- accessibilityRole: "image",
39
- height: size,
40
- width: size,
41
- xml: svgMap[key].content
42
- }, "".concat(iconName, "-").concat(iconSize));
43
- }
44
- })
45
- })
15
+ return /*#__PURE__*/_jsx(IconSheet, {
16
+ renderIcon: (iconName, iconSize) => {
17
+ const size = theme.iconSize[iconSize];
18
+ const sourceSize = getIconSourceSize(size);
19
+ const key = "".concat(iconName, "-").concat(sourceSize, "-inactive");
20
+ if (!(key in svgMap)) {
21
+ throw new Error("Icon ".concat(key, " not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it."));
22
+ }
23
+ return /*#__PURE__*/_jsx(SvgXml, {
24
+ accessibilityRole: "image",
25
+ height: size,
26
+ width: size,
27
+ xml: svgMap[key].content
28
+ }, "".concat(iconName, "-").concat(iconSize));
29
+ }
46
30
  });
47
31
  }
package/esm/routes.js CHANGED
@@ -2,7 +2,6 @@
2
2
  * DO NOT MODIFY
3
3
  * Generated from scripts/codegen/main.ts
4
4
  */
5
-
6
5
  export const routes = [{
7
6
  key: 'Accordion',
8
7
  getComponent: () => require('@coinbase/cds-mobile/accordion/__stories__/Accordion.stories').default
@@ -21,18 +20,45 @@ export const routes = [{
21
20
  }, {
22
21
  key: 'AlertSingleAction',
23
22
  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default
23
+ }, {
24
+ key: 'AlertVerticalActions',
25
+ getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default
26
+ }, {
27
+ key: 'AlphaSelect',
28
+ getComponent: () => require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default
29
+ }, {
30
+ key: 'AlphaSelectChip',
31
+ getComponent: () => require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default
32
+ }, {
33
+ key: 'AlphaTabbedChips',
34
+ getComponent: () => require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories').default
24
35
  }, {
25
36
  key: 'AnimatedCaret',
26
37
  getComponent: () => require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default
38
+ }, {
39
+ key: 'AreaChart',
40
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories').default
27
41
  }, {
28
42
  key: 'Avatar',
29
43
  getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default
30
44
  }, {
31
45
  key: 'AvatarButton',
32
46
  getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default
47
+ }, {
48
+ key: 'Axis',
49
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default
33
50
  }, {
34
51
  key: 'Banner',
35
52
  getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default
53
+ }, {
54
+ key: 'BannerActions',
55
+ getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default
56
+ }, {
57
+ key: 'BannerLayout',
58
+ getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default
59
+ }, {
60
+ key: 'BarChart',
61
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default
36
62
  }, {
37
63
  key: 'Box',
38
64
  getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default
@@ -57,9 +83,18 @@ export const routes = [{
57
83
  }, {
58
84
  key: 'CarouselMedia',
59
85
  getComponent: () => require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default
86
+ }, {
87
+ key: 'CartesianChart',
88
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories').default
89
+ }, {
90
+ key: 'Chart',
91
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default
60
92
  }, {
61
93
  key: 'Checkbox',
62
94
  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default
95
+ }, {
96
+ key: 'CheckboxCell',
97
+ getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default
63
98
  }, {
64
99
  key: 'Chip',
65
100
  getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default
@@ -81,6 +116,9 @@ export const routes = [{
81
116
  }, {
82
117
  key: 'ContentCellFallback',
83
118
  getComponent: () => require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default
119
+ }, {
120
+ key: 'ControlGroup',
121
+ getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default
84
122
  }, {
85
123
  key: 'DateInput',
86
124
  getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default
@@ -132,9 +170,6 @@ export const routes = [{
132
170
  }, {
133
171
  key: 'HintMotion',
134
172
  getComponent: () => require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default
135
- }, {
136
- key: 'Icon',
137
- getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Icon.stories').default
138
173
  }, {
139
174
  key: 'IconButton',
140
175
  getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/IconButton.stories').default
@@ -156,6 +191,9 @@ export const routes = [{
156
191
  }, {
157
192
  key: 'LinearGradient',
158
193
  getComponent: () => require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default
194
+ }, {
195
+ key: 'LineChart',
196
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories').default
159
197
  }, {
160
198
  key: 'Link',
161
199
  getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default
@@ -174,6 +212,9 @@ export const routes = [{
174
212
  }, {
175
213
  key: 'LottieStatusAnimation',
176
214
  getComponent: () => require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default
215
+ }, {
216
+ key: 'MediaChip',
217
+ getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default
177
218
  }, {
178
219
  key: 'ModalBackButton',
179
220
  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/ModalBackButton.stories').default
@@ -243,6 +284,9 @@ export const routes = [{
243
284
  }, {
244
285
  key: 'PatternError',
245
286
  getComponent: () => require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default
287
+ }, {
288
+ key: 'PeriodSelector',
289
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories').default
246
290
  }, {
247
291
  key: 'Pictogram',
248
292
  getComponent: () => require('@coinbase/cds-mobile/illustrations/__stories__/Pictogram.stories').default
@@ -258,15 +302,24 @@ export const routes = [{
258
302
  }, {
259
303
  key: 'ProgressCircle',
260
304
  getComponent: () => require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default
305
+ }, {
306
+ key: 'RadioCell',
307
+ getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default
261
308
  }, {
262
309
  key: 'RadioGroup',
263
310
  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default
311
+ }, {
312
+ key: 'ReferenceLine',
313
+ getComponent: () => require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories').default
264
314
  }, {
265
315
  key: 'RemoteImage',
266
316
  getComponent: () => require('@coinbase/cds-mobile/media/__stories__/RemoteImage.stories').default
267
317
  }, {
268
318
  key: 'RemoteImageGroup',
269
319
  getComponent: () => require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default
320
+ }, {
321
+ key: 'RollingNumber',
322
+ getComponent: () => require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default
270
323
  }, {
271
324
  key: 'SearchInput',
272
325
  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/SearchInput.stories').default
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@coinbase/ui-mobile-playground",
3
- "version": "4.5.8",
3
+ "version": "4.5.10",
4
4
  "description": "Mobile UI Components in a Playground",
5
5
  "repository": {
6
6
  "type": "git",
@@ -34,9 +34,9 @@
34
34
  "CHANGELOG"
35
35
  ],
36
36
  "peerDependencies": {
37
- "@coinbase/cds-common": "^8.25.1",
38
- "@coinbase/cds-mobile": "^8.25.1",
39
- "@coinbase/cds-mobile-visualization": "^3.4.0-beta.6",
37
+ "@coinbase/cds-common": "^8.30.0",
38
+ "@coinbase/cds-mobile": "^8.30.0",
39
+ "@coinbase/cds-mobile-visualization": "^3.4.0-beta.8",
40
40
  "@react-navigation/elements": "^1.3.17",
41
41
  "@react-navigation/native": "^6.1.6",
42
42
  "@react-navigation/stack": "^6.3.16",
package/src/__generated__/iconSvgMap.ts CHANGED
@@ -2059,6 +2059,12 @@ export const svgMap: Record<string, SvgMapEntry> = {
2059
2059
  'rewardsProduct-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 17 16\"><path fill=\"#0A0B0D\" d=\"M4.4 9.94 0 6.225l5.775-.457L8 .495l2.225 5.273L16 6.225 11.6 9.94l1.344 5.555L8 12.518l-4.944 2.977zm3.6.944 3.119 2.034-1.083-3.49 2.921-2.24-3.691-.091L8 3.495 6.734 7.097l-3.691.092 2.921 2.24-1.083 3.49z\"/></svg>" },
2060
2060
  'rewardsProduct-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 25 24\"><path fill=\"#0A0B0D\" d=\"m12 .495 3.337 8.086 8.663.7-6.6 5.696 2.016 8.518L12 18.931l-7.416 4.564L6.6 14.977 0 9.28l8.663-.7z\"/></svg>" },
2061
2061
  'rewardsProduct-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 25 24\"><path fill=\"#0A0B0D\" d=\"m12 19.18-6.604 4.065h-.694L6.6 15.227 0 9.53l8.663-.7L12 .746l3.337 8.086 8.663.7-6.6 5.696 1.898 8.018h-.694zm0-2.348 4.646 2.977-1.472-5.302 4.384-3.53-5.602-.252L12 5.746l-1.956 4.98-5.602.252 4.384 3.53-1.472 5.302z\"/></svg>" },
2062
+ 'robot-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M6 .995a1.05 1.05 0 0 1 .6 1.911V4H10v2h1.004v3.15H10V11H2V9.15H1V6h1V4h3.4V2.906A1.048 1.048 0 0 1 6 .996m-.959 6.95a.96.96 0 1 0 1.92 0zm-.36-1.922a.6.6 0 1 0 0 1.202.6.6 0 0 0 0-1.202m2.638 0a.6.6 0 1 0 .002 1.201.6.6 0 0 0-.002-1.2\"/></svg>" },
2063
+ 'robot-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M6.962 7.944a.961.961 0 0 1-1.921 0zM4.68 6.023a.6.6 0 1 1 0 1.201.6.6 0 0 1 0-1.2m2.64-.001a.6.6 0 1 1-.001 1.202.6.6 0 0 1 0-1.202\"/><path fill=\"#0A0B0D\" d=\"M6 .995a1.05 1.05 0 0 1 .6 1.911V4H10v2h1.004v3.15H10V11H2V9.15H1V6h1V4h3.4V2.906A1.048 1.048 0 0 1 6 .996M3.2 9.8h5.6V5.2H3.2z\"/></svg>" },
2064
+ 'robot-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M8 1.003a1.4 1.4 0 0 1 .8 2.548V5H13v9H3V5h4.2V3.55A1.4 1.4 0 0 1 8 1.003m-1.28 9.266a1.28 1.28 0 0 0 2.562 0zm-.48-2.562a.8.8 0 1 0 .002 1.601.8.8 0 0 0-.002-1.601m3.52 0a.801.801 0 1 0 0 1.602.801.801 0 0 0 0-1.602M2.4 11.6H1V7.4h1.4zm12.6 0h-1.4V7.4H15z\"/></svg>" },
2065
+ 'robot-16-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"M9.282 10.269a1.28 1.28 0 0 1-2.561 0zM6.24 7.708a.8.8 0 1 1 .001 1.6.8.8 0 0 1 0-1.6m3.519 0a.8.8 0 1 1 0 1.6.8.8 0 0 1 0-1.6\"/><path fill=\"#0A0B0D\" d=\"M8 1.003a1.4 1.4 0 0 1 .8 2.548V5H13v9H3V5h4.2V3.55A1.4 1.4 0 0 1 8 1.003M4.6 12.4h6.8V6.6H4.6zm-2.2-.8H1V7.4h1.4zm12.6 0h-1.4V7.4H15z\"/></svg>" },
2066
+ 'robot-24-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M12 2a2 2 0 0 1 1 3.73V7h6v13H5V7h6V5.73A2 2 0 0 1 12 2m-2 13a2 2 0 1 0 4 0zm-.75-4a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5m5.496 0a1.25 1.25 0 1 0 0 2.5 1.25 1.25 0 0 0 0-2.5M4 16H2v-6h2zm18 0h-2v-6h2z\"/></svg>" },
2067
+ 'robot-24-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#0A0B0D\" d=\"M14 15a2 2 0 1 1-4 0zm-4.75-4a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5m5.496 0a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5\"/><path fill=\"#0A0B0D\" d=\"M12 2a2 2 0 0 1 1 3.73V7h6v13H5V7h6V5.73A2 2 0 0 1 12 2M7 18h10V9H7zm-3-2H2v-6h2zm18 0h-2v-6h2z\"/></svg>" },
2062
2068
  'rocket-12-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"m1.024 4.286 1.788 1.806-.002.004.422.432a1.69 1.69 0 0 0-.762 1.395l-.016 1.498 1.498.016a1.69 1.69 0 0 0 1.41-.73l.39.4 1.79 1.806.29-3.306c1.818-1.764 2.923-4.235 3.121-6.523v-.007c-2.276.148-4.75 1.186-6.551 2.945zm5.791-.109a.67.67 0 0 1 .948.008.673.673 0 0 1-.959.943.673.673 0 0 1 .011-.95\"/></svg>" },
2063
2069
  'rocket-12-inactive': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 12 12\"><path fill=\"#0A0B0D\" d=\"M6.815 4.177a.67.67 0 0 1 .948.008.673.673 0 0 1-.959.943.673.673 0 0 1 .011-.95\"/><path fill=\"#0A0B0D\" d=\"M9.731 1.239c-1.909.376-3.847 1.336-5.33 2.783l-3.377.264 1.788 1.806-.002.004.422.432a1.69 1.69 0 0 0-.762 1.395L2.454 9.42l1.498.016a1.69 1.69 0 0 0 1.41-.73l.39.4 1.79 1.806.29-3.306c1.5-1.456 2.514-3.392 2.935-5.31q.135-.612.186-1.213v-.007l-.042.003-.045.003q-.562.042-1.135.156m-3.774 6.36L4.331 5.936c1.23-1.714 3.175-2.907 5.143-3.41C8.93 4.485 7.696 6.406 5.957 7.6m-1.823-.15.327.335a.49.49 0 0 1-.496.452l-.298-.003.003-.298a.49.49 0 0 1 .464-.486\"/></svg>" },
2064
2070
  'rocket-16-active': { content: "<svg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 16 16\"><path fill=\"#0A0B0D\" d=\"m3.609 8.129-2.466-2.49 4.658-.364c2.482-2.425 5.894-3.857 9.034-4.06v.008c-.275 3.155-1.798 6.562-4.304 8.995l-.401 4.558-2.467-2.49-.415-.425a2.5 2.5 0 0 1-2.069 1.053l-2.238-.024.024-2.239a2.5 2.5 0 0 1 1.1-2.047l-.46-.47zm5.52-2.64A.93.93 0 0 0 9.113 6.8a.927.927 0 0 0 1.322-1.3.927.927 0 0 0-1.306-.011\"/></svg>" },
package/src/components/IconSheetScreen.tsx CHANGED
@@ -1,9 +1,7 @@
1
- import { ScrollView } from 'react-native';
2
1
  import { SvgXml } from 'react-native-svg';
3
2
  import type { IconSourcePixelSize } from '@coinbase/cds-common/types';
4
3
  import { useTheme } from '@coinbase/cds-mobile';
5
4
  import { IconSheet } from '@coinbase/cds-mobile/icons/__stories__/IconSheet';
6
- import { Box } from '@coinbase/cds-mobile/layout';
7
5
 
8
6
  import { svgMap } from '../__generated__/iconSvgMap';
9
7
 
@@ -17,38 +15,28 @@ const getIconSourceSize = (iconSize: number): IconSourcePixelSize => {
17
15
  export function IconSheetScreen() {
18
16
  const theme = useTheme();
19
17
  return (
20
- <ScrollView
21
- keyboardShouldPersistTaps="always"
22
- persistentScrollbar={false}
23
- showsVerticalScrollIndicator={false}
24
- style={{ backgroundColor: theme.color.bg, height: '100%' }}
25
- testID="mobile-playground-scrollview"
26
- >
27
- <Box background="bg" padding={2}>
28
- <IconSheet
29
- renderIcon={(iconName, iconSize) => {
30
- const size = theme.iconSize[iconSize];
31
- const sourceSize = getIconSourceSize(size);
32
- const key = `${iconName}-${sourceSize}-inactive`;
18
+ <IconSheet
19
+ renderIcon={(iconName, iconSize) => {
20
+ const size = theme.iconSize[iconSize];
21
+ const sourceSize = getIconSourceSize(size);
22
+ const key = `${iconName}-${sourceSize}-inactive`;
33
23
 
34
- if (!(key in svgMap)) {
35
- throw new Error(
36
- `Icon ${key} not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it.`,
37
- );
38
- }
24
+ if (!(key in svgMap)) {
25
+ throw new Error(
26
+ `Icon ${key} not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it.`,
27
+ );
28
+ }
39
29
 
40
- return (
41
- <SvgXml
42
- key={`${iconName}-${iconSize}`}
43
- accessibilityRole="image"
44
- height={size}
45
- width={size}
46
- xml={svgMap[key as keyof typeof svgMap].content}
47
- />
48
- );
49
- }}
50
- />
51
- </Box>
52
- </ScrollView>
30
+ return (
31
+ <SvgXml
32
+ key={`${iconName}-${iconSize}`}
33
+ accessibilityRole="image"
34
+ height={size}
35
+ width={size}
36
+ xml={svgMap[key as keyof typeof svgMap].content}
37
+ />
38
+ );
39
+ }}
40
+ />
53
41
  );
54
42
  }
package/src/routes.ts CHANGED
@@ -2,7 +2,6 @@
2
2
  * DO NOT MODIFY
3
3
  * Generated from scripts/codegen/main.ts
4
4
  */
5
-
6
5
  export const routes = [
7
6
  {
8
7
  key: 'Accordion',
@@ -34,11 +33,38 @@ export const routes = [
34
33
  getComponent: () =>
35
34
  require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default,
36
35
  },
36
+ {
37
+ key: 'AlertVerticalActions',
38
+ getComponent: () =>
39
+ require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default,
40
+ },
41
+ {
42
+ key: 'AlphaSelect',
43
+ getComponent: () =>
44
+ require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
45
+ },
46
+ {
47
+ key: 'AlphaSelectChip',
48
+ getComponent: () =>
49
+ require('@coinbase/cds-mobile/alpha/select-chip/__stories__/AlphaSelectChip.stories').default,
50
+ },
51
+ {
52
+ key: 'AlphaTabbedChips',
53
+ getComponent: () =>
54
+ require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories')
55
+ .default,
56
+ },
37
57
  {
38
58
  key: 'AnimatedCaret',
39
59
  getComponent: () =>
40
60
  require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default,
41
61
  },
62
+ {
63
+ key: 'AreaChart',
64
+ getComponent: () =>
65
+ require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories')
66
+ .default,
67
+ },
42
68
  {
43
69
  key: 'Avatar',
44
70
  getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default,
@@ -48,10 +74,30 @@ export const routes = [
48
74
  getComponent: () =>
49
75
  require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default,
50
76
  },
77
+ {
78
+ key: 'Axis',
79
+ getComponent: () =>
80
+ require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default,
81
+ },
51
82
  {
52
83
  key: 'Banner',
53
84
  getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default,
54
85
  },
86
+ {
87
+ key: 'BannerActions',
88
+ getComponent: () =>
89
+ require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default,
90
+ },
91
+ {
92
+ key: 'BannerLayout',
93
+ getComponent: () =>
94
+ require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default,
95
+ },
96
+ {
97
+ key: 'BarChart',
98
+ getComponent: () =>
99
+ require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default,
100
+ },
55
101
  {
56
102
  key: 'Box',
57
103
  getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default,
@@ -89,11 +135,27 @@ export const routes = [
89
135
  getComponent: () =>
90
136
  require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default,
91
137
  },
138
+ {
139
+ key: 'CartesianChart',
140
+ getComponent: () =>
141
+ require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories')
142
+ .default,
143
+ },
144
+ {
145
+ key: 'Chart',
146
+ getComponent: () =>
147
+ require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default,
148
+ },
92
149
  {
93
150
  key: 'Checkbox',
94
151
  getComponent: () =>
95
152
  require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default,
96
153
  },
154
+ {
155
+ key: 'CheckboxCell',
156
+ getComponent: () =>
157
+ require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default,
158
+ },
97
159
  {
98
160
  key: 'Chip',
99
161
  getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default,
@@ -128,6 +190,11 @@ export const routes = [
128
190
  getComponent: () =>
129
191
  require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default,
130
192
  },
193
+ {
194
+ key: 'ControlGroup',
195
+ getComponent: () =>
196
+ require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default,
197
+ },
131
198
  {
132
199
  key: 'DateInput',
133
200
  getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default,
@@ -207,10 +274,6 @@ export const routes = [
207
274
  getComponent: () =>
208
275
  require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default,
209
276
  },
210
- {
211
- key: 'Icon',
212
- getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Icon.stories').default,
213
- },
214
277
  {
215
278
  key: 'IconButton',
216
279
  getComponent: () =>
@@ -245,6 +308,12 @@ export const routes = [
245
308
  getComponent: () =>
246
309
  require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default,
247
310
  },
311
+ {
312
+ key: 'LineChart',
313
+ getComponent: () =>
314
+ require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories')
315
+ .default,
316
+ },
248
317
  {
249
318
  key: 'Link',
250
319
  getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default,
@@ -272,6 +341,10 @@ export const routes = [
272
341
  getComponent: () =>
273
342
  require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default,
274
343
  },
344
+ {
345
+ key: 'MediaChip',
346
+ getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default,
347
+ },
275
348
  {
276
349
  key: 'ModalBackButton',
277
350
  getComponent: () =>
@@ -387,6 +460,12 @@ export const routes = [
387
460
  getComponent: () =>
388
461
  require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default,
389
462
  },
463
+ {
464
+ key: 'PeriodSelector',
465
+ getComponent: () =>
466
+ require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories')
467
+ .default,
468
+ },
390
469
  {
391
470
  key: 'Pictogram',
392
471
  getComponent: () =>
@@ -412,11 +491,22 @@ export const routes = [
412
491
  getComponent: () =>
413
492
  require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default,
414
493
  },
494
+ {
495
+ key: 'RadioCell',
496
+ getComponent: () =>
497
+ require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default,
498
+ },
415
499
  {
416
500
  key: 'RadioGroup',
417
501
  getComponent: () =>
418
502
  require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default,
419
503
  },
504
+ {
505
+ key: 'ReferenceLine',
506
+ getComponent: () =>
507
+ require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories')
508
+ .default,
509
+ },
420
510
  {
421
511
  key: 'RemoteImage',
422
512
  getComponent: () =>
@@ -427,6 +517,11 @@ export const routes = [
427
517
  getComponent: () =>
428
518
  require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default,
429
519
  },
520
+ {
521
+ key: 'RollingNumber',
522
+ getComponent: () =>
523
+ require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default,
524
+ },
430
525
  {
431
526
  key: 'SearchInput',
432
527
  getComponent: () =>