@coinbase/ui-mobile-playground 4.5.8 → 4.5.9

package/CHANGELOG.md

@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 4.5.9 (12/2/2025 PST)
+
+#### 🐞 Fixes
+
+- Regenerate routes. [[#200](https://github.com/coinbase/cds/pull/200)]
+
 ## 4.5.8 (12/1/2025 PST)
 
 #### 🐞 Fixes

package/dts/components/IconSheetScreen.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconSheetScreen.d.ts","sourceRoot":"","sources":["../../src/components/IconSheetScreen.tsx"],"names":[],"mappings":"AAgBA,wBAAgB,eAAe,4CAqC9B"}
+{"version":3,"file":"IconSheetScreen.d.ts","sourceRoot":"","sources":["../../src/components/IconSheetScreen.tsx"],"names":[],"mappings":"AAcA,wBAAgB,eAAe,4CA2B9B"}

package/dts/routes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../src/routes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,eAAO,MAAM,MAAM;;;GAutBlB,CAAC"}
+{"version":3,"file":"routes.d.ts","sourceRoot":"","sources":["../src/routes.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,MAAM;;;GAkzBlB,CAAC"}

package/esm/components/IconSheetScreen.js

@@ -1,8 +1,6 @@
-import { ScrollView } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import { useTheme } from '@coinbase/cds-mobile';
 import { IconSheet } from '@coinbase/cds-mobile/icons/__stories__/IconSheet';
-import { Box } from '@coinbase/cds-mobile/layout';
 import { svgMap } from '../__generated__/iconSvgMap';
 
 // we only have svg assets for sizes xs, s, and m
@@ -14,34 +12,20 @@ const getIconSourceSize = iconSize => {
 };
 export function IconSheetScreen() {
   const theme = useTheme();
-  return /*#__PURE__*/_jsx(ScrollView, {
-    keyboardShouldPersistTaps: "always",
-    persistentScrollbar: false,
-    showsVerticalScrollIndicator: false,
-    style: {
-      backgroundColor: theme.color.bg,
-      height: '100%'
-    },
-    testID: "mobile-playground-scrollview",
-    children: /*#__PURE__*/_jsx(Box, {
-      background: "bg",
-      padding: 2,
-      children: /*#__PURE__*/_jsx(IconSheet, {
-        renderIcon: (iconName, iconSize) => {
-          const size = theme.iconSize[iconSize];
-          const sourceSize = getIconSourceSize(size);
-          const key = "".concat(iconName, "-").concat(sourceSize, "-inactive");
-          if (!(key in svgMap)) {
-            throw new Error("Icon ".concat(key, " not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it."));
-          }
-          return /*#__PURE__*/_jsx(SvgXml, {
-            accessibilityRole: "image",
-            height: size,
-            width: size,
-            xml: svgMap[key].content
-          }, "".concat(iconName, "-").concat(iconSize));
-        }
-      })
-    })
+  return /*#__PURE__*/_jsx(IconSheet, {
+    renderIcon: (iconName, iconSize) => {
+      const size = theme.iconSize[iconSize];
+      const sourceSize = getIconSourceSize(size);
+      const key = "".concat(iconName, "-").concat(sourceSize, "-inactive");
+      if (!(key in svgMap)) {
+        throw new Error("Icon ".concat(key, " not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it."));
+      }
+      return /*#__PURE__*/_jsx(SvgXml, {
+        accessibilityRole: "image",
+        height: size,
+        width: size,
+        xml: svgMap[key].content
+      }, "".concat(iconName, "-").concat(iconSize));
+    }
   });
 }

package/esm/routes.js

@@ -2,7 +2,6 @@
  * DO NOT MODIFY
  * Generated from scripts/codegen/main.ts
  */
-
 export const routes = [{
   key: 'Accordion',
   getComponent: () => require('@coinbase/cds-mobile/accordion/__stories__/Accordion.stories').default
@@ -21,18 +20,42 @@ export const routes = [{
 }, {
   key: 'AlertSingleAction',
   getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default
+}, {
+  key: 'AlertVerticalActions',
+  getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default
+}, {
+  key: 'AlphaSelect',
+  getComponent: () => require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default
+}, {
+  key: 'AlphaTabbedChips',
+  getComponent: () => require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories').default
 }, {
   key: 'AnimatedCaret',
   getComponent: () => require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default
+}, {
+  key: 'AreaChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories').default
 }, {
   key: 'Avatar',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default
 }, {
   key: 'AvatarButton',
   getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default
+}, {
+  key: 'Axis',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default
 }, {
   key: 'Banner',
   getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default
+}, {
+  key: 'BannerActions',
+  getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default
+}, {
+  key: 'BannerLayout',
+  getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default
+}, {
+  key: 'BarChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default
 }, {
   key: 'Box',
   getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default
@@ -57,9 +80,18 @@ export const routes = [{
 }, {
   key: 'CarouselMedia',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default
+}, {
+  key: 'CartesianChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories').default
+}, {
+  key: 'Chart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default
 }, {
   key: 'Checkbox',
   getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default
+}, {
+  key: 'CheckboxCell',
+  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default
 }, {
   key: 'Chip',
   getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default
@@ -81,6 +113,9 @@ export const routes = [{
 }, {
   key: 'ContentCellFallback',
   getComponent: () => require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default
+}, {
+  key: 'ControlGroup',
+  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default
 }, {
   key: 'DateInput',
   getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default
@@ -132,9 +167,6 @@ export const routes = [{
 }, {
   key: 'HintMotion',
   getComponent: () => require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default
-}, {
-  key: 'Icon',
-  getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Icon.stories').default
 }, {
   key: 'IconButton',
   getComponent: () => require('@coinbase/cds-mobile/buttons/__stories__/IconButton.stories').default
@@ -156,6 +188,9 @@ export const routes = [{
 }, {
   key: 'LinearGradient',
   getComponent: () => require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default
+}, {
+  key: 'LineChart',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories').default
 }, {
   key: 'Link',
   getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default
@@ -174,6 +209,9 @@ export const routes = [{
 }, {
   key: 'LottieStatusAnimation',
   getComponent: () => require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default
+}, {
+  key: 'MediaChip',
+  getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default
 }, {
   key: 'ModalBackButton',
   getComponent: () => require('@coinbase/cds-mobile/overlays/__stories__/ModalBackButton.stories').default
@@ -243,6 +281,9 @@ export const routes = [{
 }, {
   key: 'PatternError',
   getComponent: () => require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default
+}, {
+  key: 'PeriodSelector',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories').default
 }, {
   key: 'Pictogram',
   getComponent: () => require('@coinbase/cds-mobile/illustrations/__stories__/Pictogram.stories').default
@@ -258,15 +299,24 @@ export const routes = [{
 }, {
   key: 'ProgressCircle',
   getComponent: () => require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default
+}, {
+  key: 'RadioCell',
+  getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default
 }, {
   key: 'RadioGroup',
   getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default
+}, {
+  key: 'ReferenceLine',
+  getComponent: () => require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories').default
 }, {
   key: 'RemoteImage',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/RemoteImage.stories').default
 }, {
   key: 'RemoteImageGroup',
   getComponent: () => require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default
+}, {
+  key: 'RollingNumber',
+  getComponent: () => require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default
 }, {
   key: 'SearchInput',
   getComponent: () => require('@coinbase/cds-mobile/controls/__stories__/SearchInput.stories').default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/ui-mobile-playground",
-  "version": "4.5.8",
+  "version": "4.5.9",
   "description": "Mobile UI Components in a Playground",
   "repository": {
     "type": "git",
@@ -36,7 +36,7 @@
   "peerDependencies": {
     "@coinbase/cds-common": "^8.25.1",
     "@coinbase/cds-mobile": "^8.25.1",
-    "@coinbase/cds-mobile-visualization": "^3.4.0-beta.6",
+    "@coinbase/cds-mobile-visualization": "^3.4.0-beta.7",
     "@react-navigation/elements": "^1.3.17",
     "@react-navigation/native": "^6.1.6",
     "@react-navigation/stack": "^6.3.16",

package/src/components/IconSheetScreen.tsx

@@ -1,9 +1,7 @@
-import { ScrollView } from 'react-native';
 import { SvgXml } from 'react-native-svg';
 import type { IconSourcePixelSize } from '@coinbase/cds-common/types';
 import { useTheme } from '@coinbase/cds-mobile';
 import { IconSheet } from '@coinbase/cds-mobile/icons/__stories__/IconSheet';
-import { Box } from '@coinbase/cds-mobile/layout';
 
 import { svgMap } from '../__generated__/iconSvgMap';
 
@@ -17,38 +15,28 @@ const getIconSourceSize = (iconSize: number): IconSourcePixelSize => {
 export function IconSheetScreen() {
   const theme = useTheme();
   return (
-    <ScrollView
-      keyboardShouldPersistTaps="always"
-      persistentScrollbar={false}
-      showsVerticalScrollIndicator={false}
-      style={{ backgroundColor: theme.color.bg, height: '100%' }}
-      testID="mobile-playground-scrollview"
-    >
-      <Box background="bg" padding={2}>
-        <IconSheet
-          renderIcon={(iconName, iconSize) => {
-            const size = theme.iconSize[iconSize];
-            const sourceSize = getIconSourceSize(size);
-            const key = `${iconName}-${sourceSize}-inactive`;
+    <IconSheet
+      renderIcon={(iconName, iconSize) => {
+        const size = theme.iconSize[iconSize];
+        const sourceSize = getIconSourceSize(size);
+        const key = `${iconName}-${sourceSize}-inactive`;
 
-            if (!(key in svgMap)) {
-              throw new Error(
-                `Icon ${key} not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it.`,
-              );
-            }
+        if (!(key in svgMap)) {
+          throw new Error(
+            `Icon ${key} not found in iconSvgMap. You probably need to run the generateIconSvgMap script to update it.`,
+          );
+        }
 
-            return (
-              <SvgXml
-                key={`${iconName}-${iconSize}`}
-                accessibilityRole="image"
-                height={size}
-                width={size}
-                xml={svgMap[key as keyof typeof svgMap].content}
-              />
-            );
-          }}
-        />
-      </Box>
-    </ScrollView>
+        return (
+          <SvgXml
+            key={`${iconName}-${iconSize}`}
+            accessibilityRole="image"
+            height={size}
+            width={size}
+            xml={svgMap[key as keyof typeof svgMap].content}
+          />
+        );
+      }}
+    />
   );
 }

package/src/routes.ts

@@ -2,7 +2,6 @@
  * DO NOT MODIFY
  * Generated from scripts/codegen/main.ts
  */
-
 export const routes = [
   {
     key: 'Accordion',
@@ -34,11 +33,33 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/overlays/__stories__/AlertSingleAction.stories').default,
   },
+  {
+    key: 'AlertVerticalActions',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/overlays/__stories__/AlertVerticalActions.stories').default,
+  },
+  {
+    key: 'AlphaSelect',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/select/__stories__/AlphaSelect.stories').default,
+  },
+  {
+    key: 'AlphaTabbedChips',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/alpha/tabbed-chips/__stories__/AlphaTabbedChips.stories')
+        .default,
+  },
   {
     key: 'AnimatedCaret',
     getComponent: () =>
       require('@coinbase/cds-mobile/motion/__stories__/AnimatedCaret.stories').default,
   },
+  {
+    key: 'AreaChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/area/__stories__/AreaChart.stories')
+        .default,
+  },
   {
     key: 'Avatar',
     getComponent: () => require('@coinbase/cds-mobile/media/__stories__/Avatar.stories').default,
@@ -48,10 +69,30 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/buttons/__stories__/AvatarButton.stories').default,
   },
+  {
+    key: 'Axis',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/axis/__stories__/Axis.stories').default,
+  },
   {
     key: 'Banner',
     getComponent: () => require('@coinbase/cds-mobile/banner/__stories__/Banner.stories').default,
   },
+  {
+    key: 'BannerActions',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/banner/__stories__/BannerActions.stories').default,
+  },
+  {
+    key: 'BannerLayout',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/banner/__stories__/BannerLayout.stories').default,
+  },
+  {
+    key: 'BarChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/bar/__stories__/BarChart.stories').default,
+  },
   {
     key: 'Box',
     getComponent: () => require('@coinbase/cds-mobile/layout/__stories__/Box.stories').default,
@@ -89,11 +130,27 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/media/__stories__/CarouselMedia.stories').default,
   },
+  {
+    key: 'CartesianChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/__stories__/CartesianChart.stories')
+        .default,
+  },
+  {
+    key: 'Chart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/__stories__/Chart.stories').default,
+  },
   {
     key: 'Checkbox',
     getComponent: () =>
       require('@coinbase/cds-mobile/controls/__stories__/Checkbox.stories').default,
   },
+  {
+    key: 'CheckboxCell',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/controls/__stories__/CheckboxCell.stories').default,
+  },
   {
     key: 'Chip',
     getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/Chip.stories').default,
@@ -128,6 +185,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/cells/__stories__/ContentCellFallback.stories').default,
   },
+  {
+    key: 'ControlGroup',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/controls/__stories__/ControlGroup.stories').default,
+  },
   {
     key: 'DateInput',
     getComponent: () => require('@coinbase/cds-mobile/dates/__stories__/DateInput.stories').default,
@@ -207,10 +269,6 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/motion/__stories__/HintMotion.stories').default,
   },
-  {
-    key: 'Icon',
-    getComponent: () => require('@coinbase/cds-mobile/icons/__stories__/Icon.stories').default,
-  },
   {
     key: 'IconButton',
     getComponent: () =>
@@ -245,6 +303,12 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/gradients/__stories__/LinearGradient.stories').default,
   },
+  {
+    key: 'LineChart',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/LineChart.stories')
+        .default,
+  },
   {
     key: 'Link',
     getComponent: () => require('@coinbase/cds-mobile/typography/__stories__/Link.stories').default,
@@ -272,6 +336,10 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/animation/__stories__/LottieStatusAnimation.stories').default,
   },
+  {
+    key: 'MediaChip',
+    getComponent: () => require('@coinbase/cds-mobile/chips/__stories__/MediaChip.stories').default,
+  },
   {
     key: 'ModalBackButton',
     getComponent: () =>
@@ -387,6 +455,12 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/system/__stories__/PatternError.stories').default,
   },
+  {
+    key: 'PeriodSelector',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/__stories__/PeriodSelector.stories')
+        .default,
+  },
   {
     key: 'Pictogram',
     getComponent: () =>
@@ -412,11 +486,22 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/visualizations/__stories__/ProgressCircle.stories').default,
   },
+  {
+    key: 'RadioCell',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/controls/__stories__/RadioCell.stories').default,
+  },
   {
     key: 'RadioGroup',
     getComponent: () =>
       require('@coinbase/cds-mobile/controls/__stories__/RadioGroup.stories').default,
   },
+  {
+    key: 'ReferenceLine',
+    getComponent: () =>
+      require('@coinbase/cds-mobile-visualization/chart/line/__stories__/ReferenceLine.stories')
+        .default,
+  },
   {
     key: 'RemoteImage',
     getComponent: () =>
@@ -427,6 +512,11 @@ export const routes = [
     getComponent: () =>
       require('@coinbase/cds-mobile/media/__stories__/RemoteImageGroup.stories').default,
   },
+  {
+    key: 'RollingNumber',
+    getComponent: () =>
+      require('@coinbase/cds-mobile/numbers/__stories__/RollingNumber.stories').default,
+  },
   {
     key: 'SearchInput',
     getComponent: () =>