@ornikar/bumper 2.7.2-canary.1768566928.e85c568dc49c9180e37b7aec8792b1e8d45968a6.0 → 2.8.0

package/src/system/core/tokens/palettes/deepPurpleColorPalette.stories.tsx

@@ -1,37 +1,51 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { GetThemeValueForKey } from '@tamagui/core';
-import { StorySection } from '../../../../shared/storybook/StorySection';
+import type { Meta, StoryObj } from '@storybook/react';
 import { Typography } from '../../../content/typography/Typography';
+import { HStack, VStack } from '../../primitives/Stack';
+import type { ViewProps } from '../../primitives/View';
 import { View } from '../../primitives/View';
 import { deepPurpleColorPalette } from './deepPurpleColorPalette';
 
-export default {
-  title: 'bumper/Core Tokens',
-  component: View,
-} satisfies Meta<typeof View>;
-
-const TokenView = ({ tokenName, tokenValue }: { tokenName: string; tokenValue: string }) => {
+const ColorSwatchRow = ({ tokenName, colorValue }: { tokenName: string; colorValue: string }): React.ReactNode => {
   return (
-    <View
-      key={tokenName}
-      padding="$space.8"
-      borderBottomWidth={2}
-      borderBottomColor="$border.base.mid"
-      backgroundColor="$bg.base.low.default"
-    >
-      <Typography.Text>{tokenName}</Typography.Text>
-      <Typography.Text>{tokenValue}</Typography.Text>
-      <View backgroundColor={tokenValue as GetThemeValueForKey<'backgroundColor'>} width="$size.20" height="$size.20" />
-    </View>
+    <HStack gap="$space.16" alignItems="center">
+      <View
+        width="$size.48"
+        height="$size.48"
+        borderRadius="$radius.m"
+        backgroundColor={colorValue as ViewProps['backgroundColor']}
+        borderWidth={1}
+        borderColor="$border.base.low"
+      />
+      <View width={200}>
+        <Typography.Text variant="body-s" weight="bold">
+          ${tokenName}
+        </Typography.Text>
+      </View>
+      <Typography.Text variant="body-s" color="$content.base.mid">
+        {colorValue}
+      </Typography.Text>
+    </HStack>
   );
 };
 
-export const TypographyHeadingStory: StoryFn<typeof View> = () => (
-  <StorySection title="Palette">
-    {Object.entries(deepPurpleColorPalette).map(([tokenName, tokenValue]) => (
-      <TokenView key={tokenName} tokenName={tokenName} tokenValue={tokenValue} />
-    ))}
-  </StorySection>
-);
+const meta: Meta = {
+  title: 'Bumper/Core/Tokens',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-TypographyHeadingStory.storyName = 'Deep Purple Palette';
+export const ColorPalette: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <Typography.Text variant="body-m" color="$content.base.mid">
+        The complete color palette tokens available in the design system.
+      </Typography.Text>
+      <VStack gap="$space.8">
+        {Object.entries(deepPurpleColorPalette).map(([tokenName, colorValue]) => (
+          <ColorSwatchRow key={tokenName} tokenName={tokenName} colorValue={colorValue} />
+        ))}
+      </VStack>
+    </VStack>
+  ),
+};

package/src/system/core/tokens/radius.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, VStack } from '../primitives/Stack';
+import { View } from '../primitives/View';
+import { radiusTokens } from './radius';
+
+const meta: Meta = {
+  title: 'Bumper/Core/Tokens',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Radius: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <Typography.Text variant="body-m" color="$content.base.mid">
+        Radius tokens define consistent border-radius values for rounded corners.
+      </Typography.Text>
+      <VStack gap="$space.8">
+        {Object.entries(radiusTokens).map(([tokenName, value]) => (
+          <HStack key={tokenName} gap="$space.16" alignItems="center">
+            <View width={150}>
+              <Typography.Text variant="body-s" weight="bold">
+                ${tokenName}
+              </Typography.Text>
+            </View>
+            <View width={80}>
+              <Typography.Text variant="body-s" color="$content.base.mid">
+                {value === 1000 ? 'circle' : `${value}px`}
+              </Typography.Text>
+            </View>
+            <View backgroundColor="$bg.accent.default" width="$size.64" height="$size.64" borderRadius={value} />
+          </HStack>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+};

package/src/system/core/tokens/size.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, VStack } from '../primitives/Stack';
+import { View } from '../primitives/View';
+import { sizeTokens } from './size';
+
+const meta: Meta = {
+  title: 'Bumper/Core/Tokens',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Size: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <Typography.Text variant="body-m" color="$content.base.mid">
+        Size tokens define consistent dimension values used for width and height properties.
+      </Typography.Text>
+      <VStack gap="$space.8">
+        {Object.entries(sizeTokens).map(([tokenName, value]) => (
+          <HStack key={tokenName} gap="$space.16" alignItems="center">
+            <View width={150}>
+              <Typography.Text variant="body-s" weight="bold">
+                ${tokenName}
+              </Typography.Text>
+            </View>
+            <View width={60}>
+              <Typography.Text variant="body-s" color="$content.base.mid">
+                {value}px
+              </Typography.Text>
+            </View>
+            <View backgroundColor="$bg.accent.default" height="$size.24" width={value} borderRadius="$radius.s" />
+          </HStack>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+};

package/src/system/core/tokens/space.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, VStack } from '../primitives/Stack';
+import { View } from '../primitives/View';
+import { spaceTokens } from './space';
+
+const meta: Meta = {
+  title: 'Bumper/Core/Tokens',
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Space: Story = {
+  render: () => (
+    <VStack gap="$space.24">
+      <Typography.Text variant="heading-l">Space Tokens</Typography.Text>
+      <Typography.Text variant="body-m" color="$content.base.mid">
+        Space tokens define consistent spacing values used for padding, margin, and gap properties.
+      </Typography.Text>
+      <VStack gap="$space.8">
+        {Object.entries(spaceTokens).map(([tokenName, value]) => (
+          <HStack key={tokenName} gap="$space.16" alignItems="center">
+            <View width={150}>
+              <Typography.Text variant="body-s" weight="bold">
+                ${tokenName}
+              </Typography.Text>
+            </View>
+            <View width={60}>
+              <Typography.Text variant="body-s" color="$content.base.mid">
+                {value}px
+              </Typography.Text>
+            </View>
+            <View backgroundColor="$bg.accent.default" height="$size.24" width={value} borderRadius="$radius.s" />
+          </HStack>
+        ))}
+      </VStack>
+    </VStack>
+  ),
+};

package/src/tamagui.config.ts

@@ -1,14 +1,14 @@
 import { createFont, createTamagui, createTokens } from '@tamagui/core';
-import { BreakpointNameEnum, breakpoints } from './system/core/breakpoints/constants';
 import { light } from './system/core/themes/light';
-import { GTStandardFaces, letterSpacing, lineHeight, weight } from './system/core/tokens/fonts';
+import { BreakpointNameEnum, breakpoints } from './system/core/tokens/breakpoints';
+import { GTStandardFaces, letterSpacing, lineHeight, size, weight } from './system/core/tokens/fonts';
 import { radiusTokens } from './system/core/tokens/radius';
 import { sizeTokens } from './system/core/tokens/size';
 import { spaceTokens } from './system/core/tokens/space';
 
 export const fonts = createFont({
   family: 'GTStandard',
-  size: sizeTokens,
+  size,
   lineHeight,
   letterSpacing,
   weight,

package/dist/definitions/system/core/breakpoints/constants.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../../src/system/core/breakpoints/constants.ts"],"names":[],"mappings":"AAAA,oBAAY,kBAAkB;IAC5B,IAAI,SAAS;IACb,KAAK,UAAU;IACf,MAAM,WAAW;IACjB,KAAK,UAAU;IACf,IAAI,SAAS;CACd;AAED,eAAO,MAAM,WAAW;;;;;;CAMvB,CAAC"}

package/src/system/core/breakpoints/__snapshots__/breakpoints.stories.tsx.snap

@@ -1,49 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`bumper/utils/Breakpoints Breakpoints 1`] = `
-<RNCSafeAreaProvider
-  onInsetsChange={[Function]}
-  style={
-    [
-      {
-        "flex": 1,
-      },
-      undefined,
-    ]
-  }
->
-  <Text
-    style={
-      {
-        "fontFamily": "GTStandard",
-      }
-    }
-    suppressHighlighting={true}
-  >
-    Current breakpoint name: 
-    small
-  </Text>
-  <Text
-    style={
-      {
-        "fontFamily": "GTStandard",
-      }
-    }
-    suppressHighlighting={true}
-  >
-    Breakpoint value: 
-    small
-  </Text>
-  <Text
-    style={
-      {
-        "fontFamily": "GTStandard",
-      }
-    }
-    suppressHighlighting={true}
-  >
-    SwitchBreakpoints value: 
-    small
-  </Text>
-</RNCSafeAreaProvider>
-`;

package/src/system/core/breakpoints/__snapshots_web__/breakpoints.stories.tsx.snap

@@ -1,43 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`bumper/utils/Breakpoints Breakpoints 1`] = `
-<DocumentFragment>
-  <div
-    class="css-view-g5y9jx r-flex-13awgt0"
-  >
-    <span
-      class=""
-      style="display: contents;"
-    >
-      <span
-        class=" "
-        style="display: contents;"
-      >
-        <span
-          class=" t_light is_Theme"
-          style="display: contents;"
-        >
-          <span
-            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-            data-disable-theme="true"
-          >
-            Current breakpoint name: base
-          </span>
-          <span
-            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-            data-disable-theme="true"
-          >
-            Breakpoint value: base
-          </span>
-          <span
-            class="font_GTStandard _WebkitFontSmoothing-_platformweb_antialiased _display-inline _boxSizing-border-box _wordWrap-break-word _whiteSpace-pre-wrap _marginTop-0px _marginRight-0px _marginBottom-0px _marginLeft-0px _fontFamily-f-family"
-            data-disable-theme="true"
-          >
-            SwitchBreakpoints value: base
-          </span>
-        </span>
-      </span>
-    </span>
-  </div>
-</DocumentFragment>
-`;

package/src/system/core/breakpoints/breakpoints.stories.tsx

@@ -1,45 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { View } from '@tamagui/core';
-import type { ReactElement } from 'react';
-import { Typography } from '../../content/typography/Typography';
-import { SwitchBreakpoints } from './SwitchBreakpoins';
-import { useBreakpointValue } from './hooks/useBreakpointValue';
-import { useCurrentBreakpointName } from './hooks/useCurrentBreakpointName';
-
-export default {
-  title: 'bumper/utils/Breakpoints',
-} satisfies Meta;
-
-const CurrentBreakpointNameComponent = (): ReactElement => {
-  const breakpointName = useCurrentBreakpointName();
-
-  return <Typography.Text>Current breakpoint name: {breakpointName}</Typography.Text>;
-};
-
-const BreakpointValueComponent = (): ReactElement => {
-  const value = useBreakpointValue({ base: 'base', small: 'small', medium: 'medium', large: 'large', wide: 'wide' });
-
-  return <Typography.Text>Breakpoint value: {value}</Typography.Text>;
-};
-
-const SwitchBreakpointsComponent = (): ReactElement => {
-  return (
-    <Typography.Text>
-      SwitchBreakpoints value: <SwitchBreakpoints base="base" small="small" medium="medium" large="large" wide="wide" />
-    </Typography.Text>
-  );
-};
-
-export const BreakpointsStory: StoryFn<typeof View> = () => {
-  return (
-    <>
-      <CurrentBreakpointNameComponent />
-
-      <BreakpointValueComponent />
-
-      <SwitchBreakpointsComponent />
-    </>
-  );
-};
-
-BreakpointsStory.storyName = 'Breakpoints';