@coinbase/cds-mobile 0.0.0 → 8.13.2

package/esm/visualizations/__stories__/ProgressCircle.stories.js

@@ -0,0 +1,432 @@
+import React, { useCallback, useState } from 'react';
+import { View } from 'react-native';
+import { assets } from '@coinbase/cds-common/internal/data/assets';
+import { avatarSizes } from '@coinbase/cds-common/internal/data/avatars';
+import { Button } from '../../buttons';
+import { Example, ExampleScreen } from '../../examples/ExampleScreen';
+import { Icon } from '../../icons';
+import { Box, HStack, VStack } from '../../layout';
+import { RemoteImage } from '../../media';
+import { defaultTheme } from '../../themes/defaultTheme';
+import { TextTitle1 } from '../../typography';
+import { Text } from '../../typography/Text';
+import { theme } from '../../utils/testHelpers';
+import { DefaultProgressCircleContent } from '../DefaultProgressCircleContent';
+import { ProgressCircle } from '../ProgressCircle';
+import { ProgressContainerWithButtons } from '../ProgressContainerWithButtons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const CustomStyles = () => {
+  const [disabled, setDisabled] = useState(false);
+  return /*#__PURE__*/_jsxs(VStack, {
+    gap: 2,
+    children: [/*#__PURE__*/_jsxs(HStack, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsx(ProgressCircle, {
+        contentNode: /*#__PURE__*/_jsx(TextTitle1, {
+          color: disabled ? 'fgMuted' : 'fgPrimary',
+          children: "40%"
+        }),
+        disabled: disabled,
+        progress: 0.4,
+        size: 100,
+        styles: {
+          circle: {
+            stroke: 'transparent'
+          }
+        },
+        weight: "semiheavy"
+      }), /*#__PURE__*/_jsx(ProgressCircle, {
+        color: "fgPositive",
+        contentNode: /*#__PURE__*/_jsx(Icon, {
+          color: disabled ? 'fgMuted' : 'fgPositive',
+          name: disabled ? 'circleCross' : 'circleCheckmark',
+          size: "l"
+        }),
+        disabled: disabled,
+        progress: 0.6,
+        size: 100,
+        styles: {
+          progress: {
+            strokeLinecap: 'square'
+          }
+        }
+      })]
+    }), /*#__PURE__*/_jsx(Button, {
+      onPress: () => setDisabled(!disabled),
+      children: "Toggle Disabled"
+    })]
+  });
+};
+const AnimationCallbacksExample = () => {
+  const [animationStatus, setAnimationStatus] = React.useState('Ready');
+  const handleAnimationStart = useCallback(() => {
+    setAnimationStatus('Animating...');
+  }, []);
+  const handleAnimationEnd = useCallback(() => {
+    setAnimationStatus('Animation Ended');
+  }, []);
+  return /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+    children: _ref => {
+      let {
+        calculateProgress
+      } = _ref;
+      return /*#__PURE__*/_jsxs(VStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsxs(Text, {
+          font: "label1",
+          children: ["Animation Status: ", animationStatus]
+        }), /*#__PURE__*/_jsx(HStack, {
+          gap: 2,
+          children: /*#__PURE__*/_jsx(ProgressCircle, {
+            onAnimationEnd: handleAnimationEnd,
+            onAnimationStart: handleAnimationStart,
+            progress: calculateProgress(0.2),
+            size: 100
+          })
+        })]
+      });
+    }
+  });
+};
+const ProgressBarScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      title: "Default",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref2 => {
+          let {
+            calculateProgress
+          } = _ref2;
+          return /*#__PURE__*/_jsxs(HStack, {
+            gap: 1,
+            children: [/*#__PURE__*/_jsx(ProgressCircle, {
+              progress: calculateProgress(0),
+              size: 100
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              accessibilityLabel: "Custom accessibility label for progress circle",
+              progress: calculateProgress(0.2),
+              size: 100
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Heavy",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref3 => {
+          let {
+            calculateProgress
+          } = _ref3;
+          return /*#__PURE__*/_jsxs(HStack, {
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(ProgressCircle, {
+              progress: calculateProgress(0),
+              size: 100,
+              weight: "heavy"
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              progress: calculateProgress(0.2),
+              size: 100,
+              weight: "heavy"
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "NoText",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref4 => {
+          let {
+            calculateProgress
+          } = _ref4;
+          return /*#__PURE__*/_jsxs(HStack, {
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(ProgressCircle, {
+              hideText: true,
+              progress: calculateProgress(0),
+              size: 100
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              hideText: true,
+              progress: calculateProgress(0.2),
+              size: 100
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Disabled",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(ProgressCircle, {
+          disabled: true,
+          progress: 0,
+          size: 100
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          disabled: true,
+          progress: 0.6,
+          size: 100
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          disabled: true,
+          progress: 1,
+          size: 100
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Colors",
+      children: /*#__PURE__*/_jsxs(HStack, {
+        flexWrap: "wrap",
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(ProgressCircle, {
+          color: "bgPositive",
+          progress: 0.5,
+          size: 100
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          color: "bgNegative",
+          progress: 0.5,
+          size: 100
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          color: "bgPrimary",
+          progress: 0.5,
+          size: 100
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          color: "bgInverse",
+          progress: 0.5,
+          size: 100
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          disabled: true,
+          color: "bgInverse",
+          progress: 0.5,
+          size: 100
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "FillParent",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref5 => {
+          let {
+            calculateProgress
+          } = _ref5;
+          return /*#__PURE__*/_jsxs(HStack, {
+            flexWrap: "wrap",
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(View, {
+              style: {
+                height: 100,
+                width: 100
+              },
+              children: /*#__PURE__*/_jsx(ProgressCircle, {
+                progress: calculateProgress(0)
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                height: 200,
+                width: 200
+              },
+              children: /*#__PURE__*/_jsx(ProgressCircle, {
+                progress: calculateProgress(0.3)
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                height: 100,
+                width: 100
+              },
+              children: /*#__PURE__*/_jsx(ProgressCircle, {
+                progress: calculateProgress(0.66)
+              })
+            }), /*#__PURE__*/_jsx(View, {
+              style: {
+                height: 75,
+                width: 75
+              },
+              children: /*#__PURE__*/_jsx(ProgressCircle, {
+                progress: calculateProgress(1)
+              })
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "Animation Callbacks",
+      children: /*#__PURE__*/_jsx(AnimationCallbacksExample, {})
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "CustomTextColor",
+      children: /*#__PURE__*/_jsx(ProgressContainerWithButtons, {
+        children: _ref6 => {
+          let {
+            calculateProgress
+          } = _ref6;
+          return /*#__PURE__*/_jsxs(HStack, {
+            gap: 2,
+            children: [/*#__PURE__*/_jsx(ProgressCircle, {
+              color: "fgPrimary",
+              contentNode: /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
+                color: "fgPrimary",
+                progress: calculateProgress(0.2)
+              }),
+              progress: calculateProgress(0.2),
+              size: 100
+            }), /*#__PURE__*/_jsx(ProgressCircle, {
+              color: "fgPositive",
+              contentNode: /*#__PURE__*/_jsx(DefaultProgressCircleContent, {
+                color: "fgPositive",
+                progress: calculateProgress(0.2)
+              }),
+              progress: calculateProgress(0.2),
+              size: 100
+            })]
+          });
+        }
+      })
+    }), /*#__PURE__*/_jsxs(Example, {
+      title: "WithAsset",
+      children: [/*#__PURE__*/_jsxs(HStack, {
+        gap: 2,
+        children: [/*#__PURE__*/_jsx(ProgressCircle, {
+          contentNode: /*#__PURE__*/_jsx(Box, {
+            height: "100%",
+            padding: 0.25,
+            width: "100%",
+            children: /*#__PURE__*/_jsx(RemoteImage, {
+              alt: assets.eth.name,
+              shape: "circle",
+              source: assets.eth.imageUrl,
+              style: {
+                width: '100%',
+                height: '100%'
+              }
+            })
+          }),
+          progress: 1,
+          size: defaultTheme.avatarSize.xxxl,
+          styles: {
+            progress: {
+              stroke: assets.eth.color
+            }
+          },
+          weight: "thin"
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          contentNode: /*#__PURE__*/_jsx(Box, {
+            height: "100%",
+            padding: 0.25,
+            width: "100%",
+            children: /*#__PURE__*/_jsx(RemoteImage, {
+              alt: assets.ltc.name,
+              shape: "circle",
+              source: assets.ltc.imageUrl,
+              style: {
+                width: '100%',
+                height: '100%'
+              }
+            })
+          }),
+          progress: 0.75,
+          size: defaultTheme.avatarSize.xxxl,
+          styles: {
+            progress: {
+              stroke: assets.ltc.color
+            }
+          },
+          weight: "thin"
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          contentNode: /*#__PURE__*/_jsx(Box, {
+            height: "100%",
+            padding: 0.25,
+            width: "100%",
+            children: /*#__PURE__*/_jsx(RemoteImage, {
+              alt: assets.dai.name,
+              shape: "circle",
+              source: assets.dai.imageUrl,
+              style: {
+                width: '100%',
+                height: '100%'
+              }
+            })
+          }),
+          progress: 0.5,
+          size: defaultTheme.avatarSize.xxxl,
+          styles: {
+            progress: {
+              stroke: assets.dai.color
+            }
+          },
+          weight: "thin"
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          contentNode: /*#__PURE__*/_jsx(Box, {
+            height: "100%",
+            padding: 0.25,
+            width: "100%",
+            children: /*#__PURE__*/_jsx(RemoteImage, {
+              alt: assets.sushi.name,
+              shape: "circle",
+              source: assets.sushi.imageUrl,
+              style: {
+                width: '100%',
+                height: '100%'
+              }
+            })
+          }),
+          progress: 0.25,
+          size: defaultTheme.avatarSize.xxxl,
+          styles: {
+            progress: {
+              stroke: assets.sushi.color
+            }
+          },
+          weight: "thin"
+        }), /*#__PURE__*/_jsx(ProgressCircle, {
+          contentNode: /*#__PURE__*/_jsx(Box, {
+            height: "100%",
+            padding: 0.25,
+            width: "100%",
+            children: /*#__PURE__*/_jsx(RemoteImage, {
+              alt: assets.xrp.name,
+              shape: "circle",
+              source: assets.xrp.imageUrl,
+              style: {
+                width: '100%',
+                height: '100%'
+              }
+            })
+          }),
+          progress: 0,
+          size: defaultTheme.avatarSize.xxxl,
+          styles: {
+            progress: {
+              stroke: assets.xrp.color
+            }
+          },
+          weight: "thin"
+        })]
+      }), /*#__PURE__*/_jsx(HStack, {
+        gap: 2,
+        children: avatarSizes.filter(size => size !== 's').map(avatarSize => /*#__PURE__*/_jsx(ProgressCircle, {
+          contentNode: /*#__PURE__*/_jsx(Box, {
+            height: "100%",
+            padding: 0.25,
+            width: "100%",
+            children: /*#__PURE__*/_jsx(RemoteImage, {
+              alt: assets.btc.name,
+              shape: "circle",
+              source: assets.btc.imageUrl,
+              style: {
+                height: '100%',
+                width: '100%'
+              }
+            })
+          }),
+          progress: 0.24,
+          size: theme.avatarSize[avatarSize],
+          styles: {
+            progress: {
+              stroke: assets.btc.color
+            }
+          },
+          weight: "thin"
+        }, avatarSize + "-progress-circle"))
+      })]
+    }), /*#__PURE__*/_jsx(Example, {
+      title: "CustomStyles",
+      children: /*#__PURE__*/_jsx(CustomStyles, {})
+    })]
+  });
+};
+export default ProgressBarScreen;

package/esm/visualizations/getProgressBarLabelParts.js

@@ -0,0 +1,11 @@
+export const getProgressBarLabelParts = label => {
+  if (typeof label === 'number') {
+    return {
+      value: label
+    };
+  }
+  return {
+    value: label.value,
+    render: label.render
+  };
+};

package/esm/visualizations/index.js

@@ -0,0 +1,6 @@
+export * from './DefaultProgressCircleContent';
+export * from './getProgressBarLabelParts';
+export * from './ProgressBar';
+export * from './ProgressBarWithFixedLabels';
+export * from './ProgressBarWithFloatLabel';
+export * from './ProgressCircle';

package/package.json

@@ -1,8 +1,189 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "0.0.0",
-  "description": "Placeholder package",
-  "main": "index.js",
-  "author": "Coinbase Inc.",
-  "license": "Apache-2.0"
-}
+  "version": "8.13.2",
+  "description": "Coinbase Design System - Mobile",
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:coinbase/cds.git",
+    "directory": "packages/mobile"
+  },
+  "react-native": "./src/index.ts",
+  "type": "module",
+  "main": "./esm/index.js",
+  "types": "./dts/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dts/index.d.ts",
+      "default": "./esm/index.js"
+    },
+    "./accordion": {
+      "types": "./dts/accordion/index.d.ts",
+      "default": "./esm/accordion/index.js"
+    },
+    "./animation": {
+      "types": "./dts/animation/index.d.ts",
+      "default": "./esm/animation/index.js"
+    },
+    "./buttons": {
+      "types": "./dts/buttons/index.d.ts",
+      "default": "./esm/buttons/index.js"
+    },
+    "./cards": {
+      "types": "./dts/cards/index.d.ts",
+      "default": "./esm/cards/index.js"
+    },
+    "./cards/ContentCard": {
+      "types": "./dts/cards/ContentCard/index.d.ts",
+      "default": "./esm/cards/ContentCard/index.js"
+    },
+    "./carousel": {
+      "types": "./dts/carousel/index.d.ts",
+      "default": "./esm/carousel/index.js"
+    },
+    "./cells": {
+      "types": "./dts/cells/index.d.ts",
+      "default": "./esm/cells/index.js"
+    },
+    "./chips": {
+      "types": "./dts/chips/index.d.ts",
+      "default": "./esm/chips/index.js"
+    },
+    "./collapsible": {
+      "types": "./dts/collapsible/index.d.ts",
+      "default": "./esm/collapsible/index.js"
+    },
+    "./controls": {
+      "types": "./dts/controls/index.d.ts",
+      "default": "./esm/controls/index.js"
+    },
+    "./dots": {
+      "types": "./dts/dots/index.d.ts",
+      "default": "./esm/dots/index.js"
+    },
+    "./icons": {
+      "types": "./dts/icons/index.d.ts",
+      "default": "./esm/icons/index.js"
+    },
+    "./illustrations": {
+      "types": "./dts/illustrations/index.d.ts",
+      "default": "./esm/illustrations/index.js"
+    },
+    "./layout": {
+      "types": "./dts/layout/index.d.ts",
+      "default": "./esm/layout/index.js"
+    },
+    "./loaders": {
+      "types": "./dts/loaders/index.d.ts",
+      "default": "./esm/loaders/index.js"
+    },
+    "./media": {
+      "types": "./dts/media/index.d.ts",
+      "default": "./esm/media/index.js"
+    },
+    "./media/Carousel": {
+      "types": "./dts/media/Carousel/index.d.ts",
+      "default": "./esm/media/Carousel/index.js"
+    },
+    "./navigation": {
+      "types": "./dts/navigation/index.d.ts",
+      "default": "./esm/navigation/index.js"
+    },
+    "./numbers": {
+      "types": "./dts/numbers/index.d.ts",
+      "default": "./esm/numbers/index.js"
+    },
+    "./numbers/RollingNumber": {
+      "types": "./dts/numbers/RollingNumber/index.d.ts",
+      "default": "./esm/numbers/RollingNumber/index.js"
+    },
+    "./overlays": {
+      "types": "./dts/overlays/index.d.ts",
+      "default": "./esm/overlays/index.js"
+    },
+    "./system": {
+      "types": "./dts/system/index.d.ts",
+      "default": "./esm/system/index.js"
+    },
+    "./tabs": {
+      "types": "./dts/tabs/index.d.ts",
+      "default": "./esm/tabs/index.js"
+    },
+    "./tour": {
+      "types": "./dts/tour/index.d.ts",
+      "default": "./esm/tour/index.js"
+    },
+    "./typography": {
+      "types": "./dts/typography/index.d.ts",
+      "default": "./esm/typography/index.js"
+    },
+    "./visualizations": {
+      "types": "./dts/visualizations/index.d.ts",
+      "default": "./esm/visualizations/index.js"
+    },
+    "./*": {
+      "types": "./dts/*.d.ts",
+      "default": "./esm/*.js"
+    }
+  },
+  "sideEffects": false,
+  "files": [
+    "dts",
+    "esm",
+    "CHANGELOG"
+  ],
+  "peerDependencies": {
+    "@react-navigation/native": "^6.1.6",
+    "@react-navigation/native-stack": "^6.9.26",
+    "@react-navigation/stack": "^6.3.16",
+    "lottie-react-native": "^6.7.0",
+    "react": "^18.3.1",
+    "react-native": "^0.74.5",
+    "react-native-date-picker": "^4.4.2",
+    "react-native-gesture-handler": "^2.16.2",
+    "react-native-inappbrowser-reborn": "^3.7.0",
+    "react-native-linear-gradient": "^2.8.3",
+    "react-native-navigation-bar-color": "^2.0.2",
+    "react-native-reanimated": "^3.14.0",
+    "react-native-safe-area-context": "^4.10.5",
+    "react-native-screens": "^3.32.0",
+    "react-native-svg": "^14.1.0"
+  },
+  "dependencies": {
+    "@coinbase/cds-common": "^8.13.2",
+    "@coinbase/cds-icons": "^5.4.1",
+    "@coinbase/cds-illustrations": "^4.22.1",
+    "@coinbase/cds-lottie-files": "^3.3.1",
+    "@coinbase/cds-utils": "^2.3.2",
+    "@floating-ui/react-native": "^0.10.5",
+    "@react-spring/native": "^9.7.4",
+    "lodash": "^4.17.21",
+    "type-fest": "^2.19.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.0",
+    "@babel/preset-env": "^7.28.0",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@figma/code-connect": "^1.3.4",
+    "@react-native-community/netinfo": "^7.1.7",
+    "@react-navigation/native-stack": "^6.9.26",
+    "@testing-library/react-native": "^11.3.0",
+    "@types/d3-color": "^3.1.3",
+    "@types/react": "^18.3.12",
+    "@types/react-test-renderer": "^18.3.0",
+    "eslint-plugin-reanimated": "^2.0.1",
+    "lottie-react-native": "6.7.0",
+    "react-native-accessibility-engine": "^3.2.0",
+    "react-native-date-picker": "4.4.2",
+    "react-native-gesture-handler": "2.16.2",
+    "react-native-inappbrowser-reborn": "3.7.0",
+    "react-native-linear-gradient": "2.8.3",
+    "react-native-navigation-bar-color": "2.0.2",
+    "react-native-reanimated": "3.14.0",
+    "react-native-safe-area-context": "4.10.5",
+    "react-native-screens": "3.32.0",
+    "react-native-svg": "14.1.0",
+    "react-test-renderer": "^18.3.1"
+  }
+}

package/index.js

@@ -1 +0,0 @@
-console.log("Temporary package");