@coinbase/cds-mcp-server 8.17.2 → 8.17.3

package/mcp-docs/mobile/components/YAxis.txt

@@ -0,0 +1,568 @@
+# YAxis
+
+A vertical axis component for CartesianChart. Displays tick marks, labels, gridlines, and supports custom formatting, positioning, and data domains.
+
+## Import
+
+```jsx
+import { YAxis } from '@coinbase/cds-mobile-visualization'
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `GridLineComponent` | `LineComponent` | No | `DottedLine` | Component to render the grid lines. |
+| `axisId` | `string` | No | `-` | The ID of the axis to render. Defaults to defaultAxisId if not specified. |
+| `className` | `string` | No | `-` | Custom className for the axis. |
+| `classNames` | `{ root?: string; tickLabel?: string \| undefined; gridLine?: string \| undefined; line?: string \| undefined; tickMark?: string \| undefined; } \| undefined` | No | `-` | Custom classNames for the axis. |
+| `minTickLabelGap` | `number` | No | `4` | Minimum gap between tick labels. Labels will be hidden if they are closer than this gap. |
+| `position` | `left \| right` | No | `'right'` | The position of the axis relative to the charts drawing area. |
+| `requestedTickCount` | `number` | No | `5 (for y-axis)` | Requested number of ticks to display. This value is passed into d3 and may not be respected. |
+| `showGrid` | `boolean` | No | `-` | Whether to show grid lines at each tick position. |
+| `showLine` | `boolean` | No | `-` | Whether to show the axis line. |
+| `showTickMarks` | `boolean` | No | `-` | Whether to show tick marks on the axis. |
+| `style` | `CSSProperties` | No | `-` | Custom style for the axis. |
+| `styles` | `{ root?: CSSProperties; tickLabel?: CSSProperties \| undefined; gridLine?: CSSProperties \| undefined; line?: CSSProperties \| undefined; tickMark?: CSSProperties \| undefined; } \| undefined` | No | `-` | Custom styles for the axis. |
+| `tickInterval` | `number` | No | `32 (for x-axis)` | Interval at which to show ticks. When provided, calculates tick count based on available space. |
+| `tickLabelFormatter` | `((value: any) => ChartTextChildren)` | No | `-` | Formatter function for axis tick values. Tick values will be wrapped in ChartText component. |
+| `tickMarkLabelGap` | `number` | No | `2 for x-axis, 8 for y-axis` | Space between the axis tick mark and labels. If tick marks are not shown, this is the gap between the axis and the chart. |
+| `tickMarkSize` | `number` | No | `4` | Size of the tick marks. |
+| `tickMaxStep` | `number` | No | `-` | Maximum step size for tick generation. Prevents the step from being larger than this value. |
+| `tickMinStep` | `number` | No | `1` | Minimum step size for tick generation. Prevents the step from being smaller than this value. |
+| `ticks` | `number[] \| ((value: number) => boolean)` | No | `-` | Custom tick configuration for the axis. When provided, this overrides the requestedTickCount property.  - **Array**: Uses these exact values for tick positioning and labels. - **Function**: Filters based on the predicate function.   - For **x-axis**: Checks every data index (0, 1, 2, ..., dataLength-1)   - For **y-axis**: Filters d3-generated tick values |
+| `width` | `number` | No | `44` | Width of the axis. This value is inclusive of the padding. |
+
+
+## Examples
+
+### Basic Example
+
+The YAxis component provides a vertical axis for charts with automatic tick generation and labeling.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+>
+  <YAxis showGrid />
+  <Line seriesId="prices" curve="monotone" showArea />
+  <Scrubber />
+</CartesianChart>
+```
+
+### Axis Config
+
+Properties related to the scale of an axis are set on the Chart component. This includes `scaleType`, `domain`, `domainLimit`, `range`, `data`, and `categoryPadding`.
+
+#### Scale Type
+
+YAxis supports `linear` (default) and `log` scale types. Both `linear` and `log` are numeric scales.
+
+```jsx
+function ScaleTypeExample() {
+  const theme = useTheme();
+  return (
+    <CartesianChart
+      height={400}
+      series={[
+        {
+          id: 'growthExponential',
+          data: [
+            1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000,
+            150000,
+          ],
+          color: theme.color.fgPositive,
+        },
+      ]}
+      yAxis={{
+        scaleType: 'log',
+      }}
+    >
+      <Line seriesId="growthExponential" />
+      <YAxis
+        showGrid
+        showLine
+        showTickMarks
+        requestedTickCount={6}
+        width={70}
+        tickLabelFormatter={(value) => value.toLocaleString()}
+      />
+    </CartesianChart>
+  );
+}
+```
+
+#### Domain
+
+An axis's domain is the range of values that the axis will display.
+You can pass in either an object (AxisBounds) with `min` and `max` properties (both optional), or a function that receives initial `AxisBounds` and returns an adjusted `AxisBounds`.
+
+```jsx
+<CartesianChart
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  yAxis={{
+    domain: ({ min, max }) => ({ min: min - 50, max: max + 50 }),
+  }}
+>
+  <YAxis showGrid />
+  <Line seriesId="prices" curve="monotone" showArea />
+</CartesianChart>
+```
+
+##### Domain Limit
+
+You can set the domain limit to `nice` (default for YAxis) or `strict`. `nice` will round the domain to human-friendly values, while `strict` will use the exact min/max values from the data. See [d3-scale](https://d3js.org/d3-scale/linear#linear_nice) for more details.
+
+#### Range
+
+An axis's range is the range of values that the axis will display in pixels. This is most useful for adjusting the sizing of the data inside of the chart's drawing area.
+
+You can pass in either an object (AxisBounds) with `min` and `max` properties (both optional), or a function that receives initial `AxisBounds` and returns an adjusted `AxisBounds`.
+
+```jsx
+<CartesianChart
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+  yAxis={{
+    range: ({ min, max }) => ({ min: min + 96, max: max - 96 }),
+  }}
+>
+  <Line seriesId="prices" curve="monotone" showArea />
+</CartesianChart>
+```
+
+### Axis Props
+
+Properties related to the visual appearance of the YAxis are set on the component itself. This includes `position`, `showGrid`, `showLine`, `showTickMarks`, `size`, `tickInterval`, `ticks`, `tickLabelFormatter`, and `tickMarkSize`.
+
+#### Position
+
+You can set the position of an axis to `left` or `right` (default).
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={512}
+  series={[
+    {
+      id: 'linear',
+      yAxisId: 'linearAxis',
+      data: [1, 10, 30, 50, 70, 90, 100],
+      label: 'linear',
+    },
+    { id: 'log', yAxisId: 'logAxis', data: [1, 10, 30, 50, 70, 90, 100], label: 'log' },
+  ]}
+  xAxis={[{ data: [1, 10, 30, 50, 70, 90, 100] }]}
+  yAxis={[
+    { id: 'linearAxis', scaleType: 'linear' },
+    { id: 'logAxis', scaleType: 'log' },
+  ]}
+>
+  <YAxis showLine showTickMarks axisId="logAxis" position="left" />
+  <YAxis showLine showTickMarks axisId="linearAxis" />
+  <Line curve="natural" seriesId="linear" />
+  <Line curve="natural" seriesId="log" />
+  <Scrubber />
+</CartesianChart>
+```
+
+#### Grid
+
+You can show grid lines at each tick position using the `showGrid` prop.
+
+```jsx
+function YAxisGridExample() {
+  const [showGrid, setShowGrid] = useState(true);
+  return (
+    <VStack gap={2}>
+      <HStack gap={2} style={{ flexWrap: 'wrap' }}>
+        <Switch checked={showGrid} onChange={() => setShowGrid(!showGrid)}>
+          Show Grid
+        </Switch>
+      </HStack>
+      <CartesianChart
+        enableScrubbing
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          },
+        ]}
+      >
+        <YAxis showGrid={showGrid} />
+        <Line seriesId="prices" curve="monotone" showArea />
+        <Scrubber />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
+You can also customize the grid lines using the `GridLineComponent` prop.
+
+```jsx
+function CustomGridLineExample() {
+  const theme = useTheme();
+  const ThinSolidLine = memo((props: SolidLineProps) => <SolidLine {...props} strokeWidth={1} />);
+
+  const categories = Array.from({ length: 31 }, (_, i) => `3/${i + 1}`);
+  const gains = [
+    5, 0, 6, 18, 0, 5, 12, 0, 12, 22, 28, 18, 0, 12, 6, 0, 0, 24, 0, 0, 4, 0, 18, 0, 0, 14, 10, 16,
+    0, 0, 0,
+  ];
+  const losses = [
+    -4, 0, -8, -12, -6, 0, 0, 0, -18, 0, -12, 0, -9, -6, 0, 0, 0, 0, -22, -8, 0, 0, -10, -14, 0, 0,
+    0, 0, 0, -12, -10,
+  ];
+  const series = [
+    { id: 'gains', data: gains, color: theme.color.fgPositive, stackId: 'bars' },
+    { id: 'losses', data: losses, color: theme.color.fgNegative, stackId: 'bars' },
+  ];
+
+  return (
+    <CartesianChart
+      height={420}
+      padding={4}
+      series={series}
+      xAxis={{ data: categories, scaleType: 'band' }}
+    >
+      <XAxis />
+      <YAxis
+        showGrid
+        GridLineComponent={ThinSolidLine}
+        tickLabelFormatter={(value) => `$${value}M`}
+      />
+      <BarPlot />
+      <ReferenceLine LineComponent={SolidLine} dataY={0} />
+    </CartesianChart>
+  );
+};
+```
+
+#### Line
+
+You can show the axis line using the `showLine` prop.
+
+```jsx
+function YAxisLineExample() {
+  const [showLine, setShowLine] = useState(true);
+  return (
+    <VStack gap={2}>
+      <HStack gap={2} style={{ flexWrap: 'wrap' }}>
+        <Switch checked={showLine} onChange={() => setShowLine(!showLine)}>
+          Show Line
+        </Switch>
+      </HStack>
+      <CartesianChart
+        enableScrubbing
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          },
+        ]}
+      >
+        <YAxis showLine={showLine} />
+        <Line seriesId="prices" curve="monotone" showArea />
+        <Scrubber />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
+You can also customize the axis line using the `classNames` and `styles` props.
+
+```jsx
+function YAxisLineStylesExample() {
+  const theme = useTheme();
+  const [showLine, setShowLine] = useState(true);
+  return (
+    <VStack gap={2}>
+      <HStack gap={2} style={{ flexWrap: 'wrap' }}>
+        <Switch checked={showLine} onChange={() => setShowLine(!showLine)}>
+          Show Line
+        </Switch>
+      </HStack>
+      <CartesianChart
+        enableScrubbing
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          },
+        ]}
+      >
+        <YAxis
+          showLine={showLine}
+          showGrid
+          styles={{ line: { stroke: theme.color.accentBoldGreen, strokeWidth: 4 } }}
+        />
+        <Line seriesId="prices" curve="monotone" showArea />
+        <Scrubber />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
+#### Size
+
+The `size` prop sets the size of the axis in pixels. The default is 44 for YAxis, but can be adjusted to fit the size of your data.
+
+```jsx
+function YAxisSizeExample() {
+  const theme = useTheme();
+  return (
+    <CartesianChart
+      height={400}
+      series={[
+        {
+          id: 'growthExponential',
+          data: [
+            1, 2, 4, 8, 15, 30, 65, 140, 280, 580, 1200, 2400, 4800, 9500, 19000, 38000, 75000,
+            150000,
+          ],
+          color: theme.color.fgPositive,
+        },
+      ]}
+    >
+      <Line curve="natural" showArea seriesId="growthExponential" />
+      <YAxis
+        showGrid
+        showLine
+        showTickMarks
+        requestedTickCount={6}
+        width={70}
+        tickLabelFormatter={(value) => value.toLocaleString()}
+      />
+    </CartesianChart>
+  );
+}
+```
+
+#### Ticks
+
+You can use the `ticks`, `requestedTickCount` (default for YAxis), and `tickInterval` props to control the number and placement of ticks on the YAxis.
+
+`ticks` accepts an array of numbers, which corresponds to the values of that axis that you would like to display ticks for.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+>
+  <YAxis showLine showTickMarks showGrid ticks={[34, 56, 80]} />
+  <Line seriesId="prices" curve="monotone" showArea />
+  <Scrubber />
+</CartesianChart>
+```
+
+Using `requestedTickCount` will use [D3's ticks function](https://d3js.org/d3-array/ticks#ticks) to determine the number and placement of ticks. Note that this count is not guaranteed to be respected.
+
+This is the default behavior for YAxis, and defaults to `5`.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+>
+  <YAxis showLine showTickMarks showGrid requestedTickCount={5} />
+  <Line seriesId="prices" curve="monotone" showArea />
+  <Scrubber />
+</CartesianChart>
+```
+
+`tickInterval`, which accepts a number for the gap between ticks in pixels, will measure the available space and try to create evenly spaced ticks. It will always include the first and last values of the domain.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+>
+  <YAxis showLine showTickMarks showGrid tickInterval={8} />
+  <Line seriesId="prices" curve="monotone" showArea />
+  <Scrubber />
+</CartesianChart>
+```
+
+#### Tick Marks
+
+You can show tick marks on the axis using the `showTickMarks` prop.
+You can also customize the tick mark size using the `tickMarkSize` prop.
+
+```jsx
+function YAxisTickMarksExample() {
+  const [showTickMarks, setShowTickMarks] = useState(true);
+  return (
+    <VStack gap={2}>
+      <HStack gap={2} style={{ flexWrap: 'wrap' }}>
+        <Switch checked={showTickMarks} onChange={() => setShowTickMarks(!showTickMarks)}>
+          Show Tick Marks
+        </Switch>
+      </HStack>
+      <CartesianChart
+        enableScrubbing
+        height={250}
+        series={[
+          {
+            id: 'prices',
+            data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+          },
+        ]}
+      >
+        <YAxis showLine showTickMarks={showTickMarks} tickMarkSize={16} showGrid />
+        <Line seriesId="prices" curve="monotone" showArea />
+        <Scrubber />
+      </CartesianChart>
+    </VStack>
+  );
+}
+```
+
+#### Tick Labels
+
+You can customize the tick labels using the `tickLabelFormatter` prop.
+
+```jsx
+<CartesianChart
+  enableScrubbing
+  height={250}
+  series={[
+    {
+      id: 'prices',
+      data: [10, 22, 29, 45, 98, 45, 22, 52, 21, 4, 68, 20, 21, 58],
+    },
+  ]}
+>
+  <YAxis showGrid tickLabelFormatter={(value) => `$${value}`} />
+  <Line seriesId="prices" curve="monotone" showArea />
+  <Scrubber />
+</CartesianChart>
+```
+
+### Customization
+
+#### Multiple Y Axes
+
+```jsx
+function MultipleYAxesExample() {
+  const theme = useTheme();
+  return (
+    <VStack gap={2}>
+      <CartesianChart
+        height={400}
+        series={[
+          {
+            id: 'revenue',
+            data: [455, 520, 380, 455, 285, 235],
+            yAxisId: 'revenue',
+            color: theme.color.accentBoldYellow,
+          },
+          {
+            id: 'profitMargin',
+            data: [23, 20, 16, 38, 12, 9],
+            yAxisId: 'profitMargin',
+            color: theme.color.fgPositive,
+          },
+        ]}
+        xAxis={{
+          data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
+          scaleType: 'band',
+        }}
+        yAxis={[
+          {
+            id: 'revenue',
+            domain: { min: 0 },
+          },
+          {
+            id: 'profitMargin',
+            domain: { min: 0, max: 100 },
+          },
+        ]}
+      >
+        <XAxis showLine showTickMarks />
+        <YAxis
+          showGrid
+          showLine
+          showTickMarks
+          axisId="revenue"
+          position="left"
+          requestedTickCount={5}
+          width={60}
+          tickLabelFormatter={(value) => `$${value}k`}
+        />
+        <YAxis
+          showLine
+          showTickMarks
+          axisId="profitMargin"
+          requestedTickCount={5}
+          tickLabelFormatter={(value) => `${value}%`}
+        />
+        <BarPlot />
+      </CartesianChart>
+      <HStack justifyContent="center" gap={2}>
+        <Box alignItems="center" gap={0.5}>
+          <Box
+            borderRadius={1000}
+            width={10}
+            height={10}
+            style={{ background: theme.color.accentBoldYellow }}
+          />
+          <Text font="label2">Revenue ($)</Text>
+        </Box>
+        <Box alignItems="center" gap={0.5}>
+          <Box
+            borderRadius={1000}
+            width={10}
+            height={10}
+            style={{ background: theme.color.fgPositive }}
+          />
+          <Text font="label2">Profit Margin (%)</Text>
+        </Box>
+      </HStack>
+    </VStack>
+  );
+}
+```
+
+

package/mcp-docs/mobile/getting-started/introduction.txt

@@ -0,0 +1,99 @@
+---
+id: introduction
+title: Introduction
+hide_title: true
+---
+
+import { MDXSection } from '@site/src/components/page/MDXSection';
+import { MDXArticle } from '@site/src/components/page/MDXArticle';
+import { ContentHeader } from '@site/src/components/page/ContentHeader';
+import { GettingStartedBanner } from '@site/src/components/page/ComponentBanner/GettingStartedBanner';
+
+<ContentHeader
+  title="Introduction"
+  description="Coinbase Design System is a cross-platform component library for React and React Native. CDS has high adoption in every product at Coinbase, accelerating development and ensuring a consistent user experience across all platforms."
+  banner={<GettingStartedBanner />}
+/>
+
+<MDXSection>
+<MDXArticle>
+## Key features
+
+- **Cross-platform** - CDS provides components for both React DOM and React Native. We go to great lengths to ensure that the source code is as identical as possible across React and React Native without compromising on platform-specific features.
+
+- **Powerful theming** - The ThemeProvider can be used to define a custom theme for your application supporting light and dark mode.
+
+- **Rich styling capabilities** - Components are designed to integrate with third-party libraries like styled-components, and to be customizable via theming, props, StyleProps, classnames, and inline styles.
+
+- **Subcomponent composition** - Components are built using smaller subcomponents that can be fully customized or replaced via props.
+
+- **Accessibility** - Components are accessible out of the box, and can be customized to different accessibility standards.
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Web-only features
+
+- **Atomic static CSS** - CSS is compiled to atomic static classnames at library build time.
+
+- **Responsive styles** - Components support responsive styles out of the box. Use the responsive syntax to adjust layouts and styles based on device breakpoints without writing custom media queries.
+
+- **CSS layers** - All CSS is added to the `cds` layer. This allows you to easily override CDS styles with your own styles.
+
+- **Polymorphic components** - Components can be rendered as different HTML elements or as other components.
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Developer experience
+
+CDS is designed to make your development workflow as smooth as possible.
+
+- **TypeScript first** - Full type safety with excellent IDE autocomplete for props, theme values, and style props. Most mistakes are caught at compile time.
+
+- **Flexible styling** - Use the StyleProps API for rapid development with theme-aware values, or drop down to className and style props for full control. Mix and match approaches as needed.
+
+- **Component composition** - Build complex UIs by composing simple primitives. Most components expose subcomponents that can be customized or replaced entirely.
+
+- **Performance optimized** - All web components use atomic CSS with zero runtime overhead. CSS is generated at build time and styles are applied via static classnames.
+
+- **Extensive documentation** - Every component includes Storybook stories, interactive examples, detailed prop tables, and usage guidelines.
+
+```jsx
+import { ThemeProvider } from '@coinbase/cds-web';
+import { defaultTheme } from '@coinbase/cds-web/themes/defaultTheme';
+import { Box } from '@coinbase/cds-web/layout';
+import { Text } from '@coinbase/cds-web/typography';
+import { Button } from '@coinbase/cds-web/buttons';
+
+const App = () => (
+  <ThemeProvider theme={defaultTheme} activeColorScheme="light">
+    <Box padding={4} background="bgPrimary" borderRadius={200}>
+      <Text font="title1" color="fg">
+        Welcome to CDS
+      </Text>
+      <Button variant="positive" marginTop={2}>
+        Get started
+      </Button>
+    </Box>
+  </ThemeProvider>
+);
+```
+
+</MDXArticle>
+</MDXSection>
+
+<MDXSection>
+<MDXArticle>
+## Next steps
+
+Learn how to install and use CDS.
+
+[See the installation docs here →](/getting-started/installation)
+
+</MDXArticle>
+</MDXSection>