@coinbase/cds-mobile 8.25.1 → 8.27.0

package/esm/tour/__stories__/Tour.stories.js

@@ -1,6 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { Button as NativeButton, Image } from 'react-native';
-import { ScrollView } from 'react-native-gesture-handler';
 import { ethBackground } from '@coinbase/cds-common/internal/data/assets';
 import { useTourContext } from '@coinbase/cds-common/tour/TourContext';
 import { Button } from '../../buttons';
@@ -250,171 +249,19 @@ const TourStory = () => {
       });
     }
   }], []);
-  return /*#__PURE__*/_jsx(Tour, {
-    activeTourStep: activeTourStep,
-    onChange: setActiveTourStep,
-    steps: tourSteps,
-    children: /*#__PURE__*/_jsx(ScrollView, {
-      ref: scrollViewRef,
-      style: {
-        flex: 1
-      },
-      children: /*#__PURE__*/_jsx(ExampleScreen, {
-        children: /*#__PURE__*/_jsx(Example, {
-          children: /*#__PURE__*/_jsx(TourExamples, {
-            ids: ['step1', 'step2', 'step3', 'step4'],
-            step2Ref: step2Ref,
-            step3Ref: step3Ref,
-            step4Ref: step4Ref
-          })
-        })
-      })
-    })
-  });
-};
-export const TourWithStringLiteralIdStory = () => {
-  const [activeTourStep, setActiveTourStep] = useState(null);
-  const scrollViewRef = useRef(null);
-  const step2Ref = useRef(null);
-  const step3Ref = useRef(null);
-  const step4Ref = useRef(null);
-  const complexIdTourSteps = useMemo(() => [{
-    id: 'step-id-1',
-    onBeforeActive: () => console.log('step1 before'),
-    Component: StepOne
-  }, {
-    id: 'step-id-2',
-    arrowColor: 'yellow',
-    onBeforeActive: async () => {
-      console.log('step2 before');
-      await scrollIntoView(scrollViewRef, step2Ref);
-    },
-    Component: () => {
-      const {
-        goNextTourStep,
-        stopTour
-      } = useTourContext();
-      return /*#__PURE__*/_jsx(Coachmark, {
-        action: /*#__PURE__*/_jsx(Button, {
-          compact: true,
-          onPress: goNextTourStep,
-          variant: "secondary",
-          children: "Next"
-        }),
-        closeButtonAccessibilityLabel: "Close",
-        content: /*#__PURE__*/_jsxs(VStack, {
-          gap: 2,
-          children: [/*#__PURE__*/_jsx(Text, {
-            color: "fgMuted",
-            font: "caption",
-            children: "50%"
-          }), /*#__PURE__*/_jsx(ProgressBar, {
-            progress: 0.5
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "body",
-            children: "Add up to 3 lines of body copy. Deliver your message with clarity and impact"
-          })]
-        }),
-        media: /*#__PURE__*/_jsx(Image, {
-          accessibilityIgnoresInvertColors: true,
-          source: {
-            uri: ethBackground
-          },
-          style: {
-            width: '100%',
-            height: 150
-          }
-        }),
-        onClose: stopTour,
-        title: "My second step"
-      });
-    }
-  }, {
-    id: 'step-id-3',
-    onBeforeActive: async () => {
-      console.log('step3 before');
-      await scrollIntoView(scrollViewRef, step3Ref);
-    },
-    Component: () => {
-      const {
-        stopTour,
-        goNextTourStep,
-        goPreviousTourStep
-      } = useTourContext();
-      return /*#__PURE__*/_jsx(Coachmark, {
-        action: /*#__PURE__*/_jsxs(HStack, {
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: goPreviousTourStep,
-            variant: "secondary",
-            children: "Back"
-          }), /*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: goNextTourStep,
-            variant: "secondary",
-            children: "Next"
-          }), /*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: stopTour,
-            variant: "secondary",
-            children: "Done"
-          })]
-        }),
-        content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
-        title: "My third step",
-        width: 350
-      });
-    }
-  }, {
-    id: 'step-id-4',
-    onBeforeActive: async () => {
-      console.log('step4 before');
-      await scrollIntoView(scrollViewRef, step4Ref);
-    },
-    Component: () => {
-      const {
-        stopTour,
-        goPreviousTourStep
-      } = useTourContext();
-      return /*#__PURE__*/_jsx(Coachmark, {
-        action: /*#__PURE__*/_jsxs(HStack, {
-          gap: 1,
-          children: [/*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: goPreviousTourStep,
-            variant: "secondary",
-            children: "Back"
-          }), /*#__PURE__*/_jsx(Button, {
-            compact: true,
-            onPress: stopTour,
-            variant: "secondary",
-            children: "Done"
-          })]
-        }),
-        content: "Add up to 3 lines of body copy. Deliver your message with clarity and impact",
-        title: "My last step",
-        width: 250
-      });
-    }
-  }], []);
-  return /*#__PURE__*/_jsx(Tour, {
-    activeTourStep: activeTourStep,
-    onChange: setActiveTourStep,
-    steps: complexIdTourSteps,
-    children: /*#__PURE__*/_jsx(ScrollView, {
-      ref: scrollViewRef,
-      style: {
-        flex: 1
-      },
-      children: /*#__PURE__*/_jsx(ExampleScreen, {
-        children: /*#__PURE__*/_jsx(Example, {
-          children: /*#__PURE__*/_jsx(TourExamples, {
-            ids: complexIdTourSteps.map(s => s.id),
-            step2Ref: step2Ref,
-            step3Ref: step3Ref,
-            step4Ref: step4Ref
-          })
+  return /*#__PURE__*/_jsx(ExampleScreen, {
+    ref: scrollViewRef,
+    children: /*#__PURE__*/_jsx(Example, {
+      title: "Tour Example",
+      children: /*#__PURE__*/_jsx(Tour, {
+        activeTourStep: activeTourStep,
+        onChange: setActiveTourStep,
+        steps: tourSteps,
+        children: /*#__PURE__*/_jsx(TourExamples, {
+          ids: ['step1', 'step2', 'step3', 'step4'],
+          step2Ref: step2Ref,
+          step3Ref: step3Ref,
+          step4Ref: step4Ref
         })
       })
     })

package/esm/typography/__stories__/TextBody.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextBody } from '../TextBody';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextBody

package/esm/typography/__stories__/TextCaption.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextCaption } from '../TextCaption';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextCaption

package/esm/typography/__stories__/TextCore.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Text } from '../Text';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: Text

package/esm/typography/__stories__/TextDisplay1.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextDisplay1 } from '../TextDisplay1';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextDisplay1

package/esm/typography/__stories__/TextDisplay2.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextDisplay2 } from '../TextDisplay2';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextDisplay2

package/esm/typography/__stories__/TextDisplay3.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextDisplay3 } from '../TextDisplay3';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextDisplay3

package/esm/typography/__stories__/TextHeadline.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextHeadline } from '../TextHeadline';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextHeadline

package/esm/typography/__stories__/TextLabel1.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextLabel1 } from '../TextLabel1';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextLabel1

package/esm/typography/__stories__/TextLabel2.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextLabel2 } from '../TextLabel2';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextLabel2

package/esm/typography/__stories__/TextLegal.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextLegal } from '../TextLegal';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextLegal

package/esm/typography/__stories__/TextTitle1.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextTitle1 } from '../TextTitle1';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextTitle1

package/esm/typography/__stories__/TextTitle2.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextTitle2 } from '../TextTitle2';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextTitle2

package/esm/typography/__stories__/TextTitle3.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextTitle3 } from '../TextTitle3';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextTitle3

package/esm/typography/__stories__/TextTitle4.stories.js

@@ -1,6 +1,8 @@
 import React from 'react';
 import { TextTitle4 } from '../TextTitle4';
 import TextExamplesScreen from './TextExamples';
+
+// eslint-disable-next-line internal/example-screen-default
 import { jsx as _jsx } from "react/jsx-runtime";
 export default () => /*#__PURE__*/_jsx(TextExamplesScreen, {
   component: TextTitle4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.25.1",
+  "version": "8.27.0",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
@@ -154,7 +154,7 @@
     "react-native-svg": "^14.1.0"
   },
   "dependencies": {
-    "@coinbase/cds-common": "^8.25.1",
+    "@coinbase/cds-common": "^8.27.0",
     "@coinbase/cds-icons": "^5.7.0",
     "@coinbase/cds-illustrations": "^4.28.0",
     "@coinbase/cds-lottie-files": "^3.3.3",

package/esm/icons/__stories__/Icon.stories.js

@@ -1,98 +0,0 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-import { convertMotionConfig } from '../../animation/convertMotionConfig';
-import { Example, ExampleScreen } from '../../examples/ExampleScreen';
-import { useTheme } from '../../hooks/useTheme';
-import { HStack } from '../../layout/HStack';
-import { VStack } from '../../layout/VStack';
-import { Pressable } from '../../system/Pressable';
-import { Text } from '../../typography/Text';
-import { Icon } from '../Icon';
-import { TextIcon } from '../TextIcon';
-import { IconSheet } from './IconSheet';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const animateInConfig = convertMotionConfig({
-  easing: 'enterFunctional',
-  duration: 'moderate1',
-  toValue: 1,
-  useNativeDriver: false
-});
-const animateOutConfig = convertMotionConfig({
-  easing: 'exitFunctional',
-  duration: 'moderate1',
-  toValue: 1,
-  useNativeDriver: false
-});
-export const useAnimation = () => {
-  const animationRef = useRef(new Animated.Value(0));
-  return useMemo(() => {
-    const animateIn = Animated.timing(animationRef.current, animateInConfig);
-    const animateOut = Animated.timing(animationRef.current, animateOutConfig);
-    return [animationRef.current, animateIn, animateOut];
-  }, []);
-};
-const IconScreen = () => {
-  const theme = useTheme();
-  const [isToggled, setIsToggled] = useState(false);
-  const animationRef = useRef(new Animated.Value(0)).current;
-  useEffect(() => {
-    Animated.timing(animationRef, isToggled ? animateInConfig : animateOutConfig).start();
-  }, [isToggled, animationRef]);
-  const toggle = useCallback(() => setIsToggled(prevIsToggled => !prevIsToggled), []);
-  const animatedIcon = /*#__PURE__*/_jsx(Icon, {
-    active: true,
-    animated: true,
-    dangerouslySetColor: animationRef.interpolate({
-      inputRange: [0, 1],
-      outputRange: [theme.color.bgLine, theme.color.fgPrimary]
-    }),
-    name: "star",
-    size: "l"
-  });
-  return /*#__PURE__*/_jsxs(ExampleScreen, {
-    children: [/*#__PURE__*/_jsx(Example, {
-      title: "Nesting TextIcons",
-      children: /*#__PURE__*/_jsxs(VStack, {
-        gap: 1,
-        children: [/*#__PURE__*/_jsxs(Text, {
-          font: "body",
-          children: [/*#__PURE__*/_jsx(TextIcon, {
-            active: true,
-            name: "dot",
-            size: "xs"
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "body",
-            children: "This is some text"
-          })]
-        }), /*#__PURE__*/_jsxs(Text, {
-          font: "body",
-          children: [/*#__PURE__*/_jsx(TextIcon, {
-            active: true,
-            name: "dot",
-            size: "xs"
-          }), /*#__PURE__*/_jsx(Text, {
-            font: "body",
-            children: "This is soooooooooooooome reallllllllllllllllly loooooooonnngggggg text"
-          })]
-        })]
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Animated Icon",
-      children: /*#__PURE__*/_jsx(Pressable, {
-        noScaleOnPress: true,
-        accessibilityHint: "hit star to rate the product",
-        accessibilityLabel: "rating a product",
-        background: "transparent",
-        onPress: toggle,
-        children: /*#__PURE__*/_jsxs(HStack, {
-          gap: 1,
-          children: [animatedIcon, animatedIcon, animatedIcon, animatedIcon]
-        })
-      })
-    }), /*#__PURE__*/_jsx(Example, {
-      title: "Icon Sheet",
-      children: /*#__PURE__*/_jsx(IconSheet, {})
-    })]
-  });
-};
-export default IconScreen;

package/esm/illustrations/__stories__/getIllustrationSheet.js

@@ -1,164 +0,0 @@
-import React, { memo, useCallback } from 'react';
-import { Dimensions, FlatList } from 'react-native';
-import { illustrationDimensions, illustrationSizes } from '@coinbase/cds-common/tokens/illustrations';
-import heroSquareVersionMap from '@coinbase/cds-illustrations/__generated__/heroSquare/data/versionMap';
-import pictogramVersionMap from '@coinbase/cds-illustrations/__generated__/pictogram/data/versionMap';
-import spotIconVersionMap from '@coinbase/cds-illustrations/__generated__/spotIcon/data/versionMap';
-import spotRectangleVersionMap from '@coinbase/cds-illustrations/__generated__/spotRectangle/data/versionMap';
-import spotSquareVersionMap from '@coinbase/cds-illustrations/__generated__/spotSquare/data/versionMap';
-import { Divider, VStack } from '../../layout';
-import { ThemeProvider } from '../../system/ThemeProvider';
-import { defaultTheme } from '../../themes/defaultTheme';
-import { Text } from '../../typography/Text';
-import { HeroSquare, Pictogram, SpotIcon, SpotRectangle, SpotSquare } from '../index';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function keys(obj) {
-  return Object.keys(obj);
-}
-const images = {
-  heroSquare: keys(heroSquareVersionMap),
-  pictogram: keys(pictogramVersionMap),
-  spotRectangle: keys(spotRectangleVersionMap),
-  spotSquare: keys(spotSquareVersionMap),
-  spotIcon: keys(spotIconVersionMap)
-};
-export function getIllustrationSheet(type) {
-  /** Constants */
-  const FLAT_LIST_STYLE = {
-    width: '100%'
-  };
-  const FLAT_LIST_CONTAINER_STYLE = {
-    marginLeft: 24,
-    paddingBottom: 24,
-    alignContent: 'flex-start'
-  };
-  const SCREEN_WIDTH = Dimensions.get('window').width - FLAT_LIST_CONTAINER_STYLE.marginLeft * 2;
-  const SIZES = {
-    pictogram: {
-      height: illustrationSizes[illustrationDimensions.pictogram[0]][1],
-      width: illustrationSizes[illustrationDimensions.pictogram[0]][0],
-      scaleMultiplier: 1
-    },
-    spotSquare: {
-      height: illustrationSizes[illustrationDimensions.spotSquare[0]][1],
-      width: illustrationSizes[illustrationDimensions.spotSquare[0]][0],
-      scaleMultiplier: 0.4
-    },
-    spotRectangle: {
-      height: illustrationSizes[illustrationDimensions.spotRectangle[0]][1],
-      width: illustrationSizes[illustrationDimensions.spotRectangle[0]][0],
-      scaleMultiplier: 0.3
-    },
-    heroSquare: {
-      height: illustrationSizes[illustrationDimensions.heroSquare[0]][1],
-      width: illustrationSizes[illustrationDimensions.heroSquare[0]][0],
-      scaleMultiplier: 0.24
-    },
-    spotIcon: {
-      height: illustrationSizes[illustrationDimensions.spotIcon[0]][1],
-      width: illustrationSizes[illustrationDimensions.spotIcon[0]][0],
-      scaleMultiplier: 1
-    }
-  };
-  const ITEM_COLUMNS = Math.floor(SCREEN_WIDTH / (SIZES[type].width * SIZES[type].scaleMultiplier));
-  const names = images[type];
-  const data = [];
-  names.forEach(name => {
-    data.push({
-      name,
-      colorScheme: 'light'
-    });
-    data.push({
-      name,
-      colorScheme: 'dark'
-    });
-  });
-  const ListFooterComponent = /*#__PURE__*/memo(function ListFooterComponent() {
-    // TODO: pull from ui-mobile-playground/helpers/constants via scrollViewEnd constant
-    return /*#__PURE__*/_jsx(Divider, {
-      testID: "mobile-playground-scrollview-end"
-    });
-  });
-  const renderItem = _ref => {
-    let {
-      item
-    } = _ref;
-    const dim = SIZES[type].width + "x" + SIZES[type].height;
-    return /*#__PURE__*/_jsx(ThemeProvider, {
-      activeColorScheme: item.colorScheme,
-      theme: defaultTheme,
-      children: /*#__PURE__*/_jsxs(VStack, {
-        background: "bg",
-        overflow: "hidden",
-        width: SIZES[type].width * SIZES[type].scaleMultiplier,
-        children: [type === 'heroSquare' &&
-        /*#__PURE__*/
-        // render a 48x48 thumbnail
-        _jsx(HeroSquare, {
-          dimension: dim,
-          name: item.name,
-          scaleMultiplier: SIZES.heroSquare.scaleMultiplier
-        }), type === 'spotSquare' &&
-        /*#__PURE__*/
-        // render a 48x48 thumbnail
-        _jsx(SpotSquare, {
-          name: item.name,
-          scaleMultiplier: SIZES.spotSquare.scaleMultiplier
-        }), type === 'spotRectangle' &&
-        /*#__PURE__*/
-        // render a 72x36 thumbnail
-        _jsx(SpotRectangle, {
-          name: item.name,
-          scaleMultiplier: SIZES.spotRectangle.scaleMultiplier
-        }), type === 'pictogram' && /*#__PURE__*/_jsx(Pictogram, {
-          dimension: dim,
-          name: item.name,
-          scaleMultiplier: SIZES.pictogram.scaleMultiplier
-        }), type === 'spotIcon' && /*#__PURE__*/_jsx(SpotIcon, {
-          dimension: dim,
-          name: item.name,
-          scaleMultiplier: SIZES.spotIcon.scaleMultiplier
-        }), /*#__PURE__*/_jsx(Text, {
-          ellipsize: "tail",
-          font: "legal",
-          children: item.name
-        })]
-      })
-    });
-  };
-  const IllustrationSheet = /*#__PURE__*/memo(function IllustrationSheet() {
-    const getItemLayout = useCallback(function getItemLayout(_data, index) {
-      return {
-        length: SIZES[type].height * SIZES[type].scaleMultiplier,
-        offset: SIZES[type].height * SIZES[type].scaleMultiplier * index,
-        index
-      };
-    }, []);
-    const keyExtractor = useCallback(function keyExtractor(item) {
-      return type + "-" + item.name + "-" + item.colorScheme;
-    }, []);
-    return /*#__PURE__*/_jsx(VStack
-    // TODO: pull from ui-mobile-playground/helpers/constants via screen constant
-    , {
-      alignItems: "center",
-      background: "bg",
-      flexGrow: 1,
-      justifyContent: "center",
-      testID: "mobile-playground-screen",
-      children: /*#__PURE__*/_jsx(FlatList, {
-        ListFooterComponent: ListFooterComponent,
-        contentContainerStyle: FLAT_LIST_CONTAINER_STYLE,
-        data: data,
-        getItemLayout: getItemLayout,
-        keyExtractor: keyExtractor,
-        numColumns: ITEM_COLUMNS,
-        renderItem: renderItem,
-        style: FLAT_LIST_STYLE
-        // TODO: pull from ui-mobile-playground/helpers/constants via scrollView constant
-        ,
-        testID: "mobile-playground-scrollview"
-      })
-    });
-  });
-  return IllustrationSheet;
-}