@ornikar/bumper 2.4.2-canary.9a20239c7f70ea30ccc58f4e866b2322585529c6.0 → 2.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ornikar/bumper",
-  "version": "2.4.2-canary.9a20239c7f70ea30ccc58f4e866b2322585529c6.0",
+  "version": "2.5.0",
   "license": "MIT",
   "repository": {
     "directory": "@ornikar/bumper",

package/src/components/primitives/Center.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import type { CenterProps } from './Center';
+import { Center } from './Center';
+import { View } from './View';
+
+export default {
+  title: 'bumper/Primitives',
+  component: Center,
+} satisfies Meta<CenterProps>;
+
+export const CenterStory: ComponentStory<typeof Center> = () => (
+  <Center width="$size.120" height="$size.120" backgroundColor="$bg.accent.default">
+    <View width="$size.16" height="$size.16" backgroundColor="$bg.base.mid.default" />
+  </Center>
+);
+
+CenterStory.storyName = 'Center';

package/src/components/primitives/Center.ts

@@ -0,0 +1,10 @@
+import type { ViewProps } from '@tamagui/core';
+import { styled } from '@tamagui/core';
+import { View } from './View';
+
+export interface CenterProps extends ViewProps {}
+
+export const Center = styled(View, {
+  justifyContent: 'center',
+  alignItems: 'center',
+});

package/src/components/primitives/Stack.stories.tsx

@@ -1,62 +1,49 @@
 import type { ComponentStory, Meta } from '@storybook/react';
-import { Text } from '@tamagui/core';
-import { StorySection } from '../../story-components/StorySection';
-import { Typography } from '../typography/Typograhy';
-import { HStack, Stack, VStack } from './Stacks';
+import type { StackProps } from './Stack';
+import { HStack, Stack, VStack } from './Stack';
+import { View } from './View';
 
 export default {
-  title: 'bumper/Primitives/Stacks',
+  title: 'bumper/Primitives',
   component: Stack,
-} satisfies Meta<unknown>;
+} satisfies Meta<StackProps>;
 
-export const StacksStory: ComponentStory<typeof Stack> = () => (
+const items = (
   <>
-    <Text>
-      - space is deprecated, use gap instead - direction from NB is now flexDirection- reversed from NB is now direction
-      (rtl/ltr)
-    </Text>
-
-    <StorySection title="Stack">
-      <StorySection.SubSection title="Demo">
-        <Stack flexDirection="column-reverse" gap="$2">
-          <Typography.Text>1</Typography.Text>
-          <Typography.Text>2</Typography.Text>
-        </Stack>
-      </StorySection.SubSection>
-    </StorySection>
-
-    <StorySection title="HStack">
-      <StorySection.SubSection title="Default">
-        <HStack>
-          <Typography.Text>1</Typography.Text>
-          <Typography.Text>2</Typography.Text>
-        </HStack>
-      </StorySection.SubSection>
-
-      <StorySection.SubSection title="With gap (space)">
-        <HStack gap="$2">
-          <Typography.Text backgroundColor="$bg.accent.default">1</Typography.Text>
-          <Typography.Text backgroundColor="$bg.accent.default">2</Typography.Text>
-        </HStack>
-      </StorySection.SubSection>
-    </StorySection>
+    <View
+      width="$size.64"
+      height="$size.20"
+      backgroundColor="$bg.accent.default"
+      padding="$space.4"
+      borderRadius="$radius.s"
+    />
+
+    <View
+      width="$size.64"
+      height="$size.20"
+      backgroundColor="$bg.highlight.hi.default"
+      padding="$space.4"
+      borderRadius="$radius.s"
+    />
+
+    <View
+      width="$size.64"
+      height="$size.20"
+      backgroundColor="$bg.highlight.mid.default"
+      padding="$space.4"
+      borderRadius="$radius.s"
+    />
+  </>
+);
 
-    <StorySection title="VStack">
-      <StorySection.SubSection title="Default">
-        <VStack>
-          <Typography.Text>1</Typography.Text>
-          <Typography.Text>2</Typography.Text>
-        </VStack>
-      </StorySection.SubSection>
+export const StackStory: ComponentStory<typeof Stack> = () => (
+  <>
+    <HStack gap="$space.4">{items}</HStack>
 
-      <StorySection.SubSection title="With gap (space)">
-        <VStack gap="$2">
-          <Typography.Text backgroundColor="$bg.accent.default">1</Typography.Text>
-          <Typography.Text backgroundColor="$bg.accent.default">2</Typography.Text>
-        </VStack>
-      </StorySection.SubSection>
-    </StorySection>
+    <VStack gap="$space.4" marginTop="$space.16">
+      {items}
+    </VStack>
   </>
 );
 
-StacksStory.storyName = 'Stacks';
+StackStory.storyName = 'Stack';

package/src/components/primitives/{Stacks.ts → Stack.tsx}

@@ -1,8 +1,8 @@
-import { Stack, styled } from '@tamagui/core';
 import type { GetProps } from '@tamagui/core';
+import { Stack, styled } from '@tamagui/core';
 
+export type { StackProps } from '@tamagui/core';
 export { Stack } from '@tamagui/core';
-export type StackProps = GetProps<typeof Stack>;
 
 export const HStack = styled(Stack, {
   name: 'HStack',

package/src/components/primitives/View.stories.tsx

@@ -1,13 +1,14 @@
 import type { ComponentStory, Meta } from '@storybook/react';
+import type { ViewProps } from './View';
 import { View } from './View';
 
 export default {
-  title: 'bumper/Primitives/View',
+  title: 'bumper/Primitives',
   component: View,
-} satisfies Meta<unknown>;
+} satisfies Meta<ViewProps>;
 
 export const ViewStory: ComponentStory<typeof View> = () => (
-  <View width={50} height={500} backgroundColor="$bg.base.mid.default" />
+  <View width="$size.120" height="$size.120" backgroundColor="$bg.accent.default" />
 );
 
 ViewStory.storyName = 'View';

package/src/components/primitives/View.ts

@@ -1,5 +1,2 @@
-import type { View } from '@tamagui/core';
-import type { ComponentProps } from 'react';
-
+export type { ViewProps } from '@tamagui/core';
 export { View } from '@tamagui/core';
-export type ViewProps = ComponentProps<typeof View>;

package/src/components/primitives/__snapshots__/Center.stories.tsx.snap

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Primitives Center 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "backgroundColor": "#563B56",
+        "height": 120,
+        "justifyContent": "center",
+        "width": 120,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "backgroundColor": "#F7F4EE",
+          "height": 16,
+          "width": 16,
+        }
+      }
+    />
+  </View>
+</RNCSafeAreaProvider>
+`;

package/src/components/primitives/__snapshots__/Stack.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`bumper/Primitives/Stacks Stacks 1`] = `
+exports[`bumper/Primitives Stack 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -12,365 +12,126 @@ exports[`bumper/Primitives/Stacks Stacks 1`] = `
     ]
   }
 >
-  <Text
-    suppressHighlighting={true}
-  >
-    - space is deprecated, use gap instead - direction from NB is now flexDirection- reversed from NB is now direction (rtl/ltr)
-  </Text>
   <View
     style={
       {
-        "flexDirection": "column",
-        "paddingBottom": 4,
-        "paddingLeft": 4,
-        "paddingRight": 4,
-        "paddingTop": 4,
+        "flexDirection": "row",
+        "gap": 4,
       }
     }
   >
-    <Text
-      style={
-        {
-          "fontFamily": "GTStandardSemibold",
-          "fontSize": 38,
-          "letterSpacing": 0,
-          "lineHeight": 48,
-          "marginBottom": 4,
-        }
-      }
-      suppressHighlighting={true}
-    >
-      Stack
-    </Text>
     <View
       style={
         {
-          "flexDirection": "column",
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "height": 20,
           "paddingBottom": 4,
           "paddingLeft": 4,
           "paddingRight": 4,
           "paddingTop": 4,
+          "width": 64,
         }
       }
-    >
-      <Text
-        style={
-          {
-            "fontFamily": "GTStandardSemibold",
-            "fontSize": 24,
-            "letterSpacing": 0,
-            "lineHeight": 32,
-            "marginBottom": 4,
-          }
-        }
-        suppressHighlighting={true}
-      >
-        Demo
-      </Text>
-      <View
-        style={
-          {
-            "flexDirection": "column-reverse",
-            "gap": 2,
-          }
-        }
-      >
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          1
-        </Text>
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          2
-        </Text>
-      </View>
-    </View>
-  </View>
-  <View
-    style={
-      {
-        "flexDirection": "column",
-        "paddingBottom": 4,
-        "paddingLeft": 4,
-        "paddingRight": 4,
-        "paddingTop": 4,
-      }
-    }
-  >
-    <Text
-      style={
-        {
-          "fontFamily": "GTStandardSemibold",
-          "fontSize": 38,
-          "letterSpacing": 0,
-          "lineHeight": 48,
-          "marginBottom": 4,
-        }
-      }
-      suppressHighlighting={true}
-    >
-      HStack
-    </Text>
+    />
     <View
       style={
         {
-          "flexDirection": "column",
+          "backgroundColor": "#E4A4F9",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "height": 20,
           "paddingBottom": 4,
           "paddingLeft": 4,
           "paddingRight": 4,
           "paddingTop": 4,
+          "width": 64,
         }
       }
-    >
-      <Text
-        style={
-          {
-            "fontFamily": "GTStandardSemibold",
-            "fontSize": 24,
-            "letterSpacing": 0,
-            "lineHeight": 32,
-            "marginBottom": 4,
-          }
-        }
-        suppressHighlighting={true}
-      >
-        Default
-      </Text>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-          }
-        }
-      >
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          1
-        </Text>
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          2
-        </Text>
-      </View>
-    </View>
+    />
     <View
       style={
         {
-          "flexDirection": "column",
+          "backgroundColor": "#F8E7FF",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "height": 20,
           "paddingBottom": 4,
           "paddingLeft": 4,
           "paddingRight": 4,
           "paddingTop": 4,
+          "width": 64,
         }
       }
-    >
-      <Text
-        style={
-          {
-            "fontFamily": "GTStandardSemibold",
-            "fontSize": 24,
-            "letterSpacing": 0,
-            "lineHeight": 32,
-            "marginBottom": 4,
-          }
-        }
-        suppressHighlighting={true}
-      >
-        With gap (space)
-      </Text>
-      <View
-        style={
-          {
-            "flexDirection": "row",
-            "gap": 2,
-          }
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "#563B56",
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          1
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "#563B56",
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          2
-        </Text>
-      </View>
-    </View>
+    />
   </View>
   <View
     style={
       {
         "flexDirection": "column",
-        "paddingBottom": 4,
-        "paddingLeft": 4,
-        "paddingRight": 4,
-        "paddingTop": 4,
+        "gap": 4,
+        "marginTop": 16,
       }
     }
   >
-    <Text
+    <View
       style={
         {
-          "fontFamily": "GTStandardSemibold",
-          "fontSize": 38,
-          "letterSpacing": 0,
-          "lineHeight": 48,
-          "marginBottom": 4,
+          "backgroundColor": "#563B56",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "height": 20,
+          "paddingBottom": 4,
+          "paddingLeft": 4,
+          "paddingRight": 4,
+          "paddingTop": 4,
+          "width": 64,
         }
       }
-      suppressHighlighting={true}
-    >
-      VStack
-    </Text>
+    />
     <View
       style={
         {
-          "flexDirection": "column",
+          "backgroundColor": "#E4A4F9",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "height": 20,
           "paddingBottom": 4,
           "paddingLeft": 4,
           "paddingRight": 4,
           "paddingTop": 4,
+          "width": 64,
         }
       }
-    >
-      <Text
-        style={
-          {
-            "fontFamily": "GTStandardSemibold",
-            "fontSize": 24,
-            "letterSpacing": 0,
-            "lineHeight": 32,
-            "marginBottom": 4,
-          }
-        }
-        suppressHighlighting={true}
-      >
-        Default
-      </Text>
-      <View
-        style={
-          {
-            "flexDirection": "column",
-          }
-        }
-      >
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          1
-        </Text>
-        <Text
-          style={
-            {
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          2
-        </Text>
-      </View>
-    </View>
+    />
     <View
       style={
         {
-          "flexDirection": "column",
+          "backgroundColor": "#F8E7FF",
+          "borderBottomLeftRadius": 2,
+          "borderBottomRightRadius": 2,
+          "borderTopLeftRadius": 2,
+          "borderTopRightRadius": 2,
+          "height": 20,
           "paddingBottom": 4,
           "paddingLeft": 4,
           "paddingRight": 4,
           "paddingTop": 4,
+          "width": 64,
         }
       }
-    >
-      <Text
-        style={
-          {
-            "fontFamily": "GTStandardSemibold",
-            "fontSize": 24,
-            "letterSpacing": 0,
-            "lineHeight": 32,
-            "marginBottom": 4,
-          }
-        }
-        suppressHighlighting={true}
-      >
-        With gap (space)
-      </Text>
-      <View
-        style={
-          {
-            "flexDirection": "column",
-            "gap": 2,
-          }
-        }
-      >
-        <Text
-          style={
-            {
-              "backgroundColor": "#563B56",
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          1
-        </Text>
-        <Text
-          style={
-            {
-              "backgroundColor": "#563B56",
-              "fontFamily": "GTStandard",
-            }
-          }
-          suppressHighlighting={true}
-        >
-          2
-        </Text>
-      </View>
-    </View>
+    />
   </View>
 </RNCSafeAreaProvider>
 `;

package/src/components/primitives/__snapshots__/View.stories.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
-exports[`bumper/Primitives/View View 1`] = `
+exports[`bumper/Primitives View 1`] = `
 <RNCSafeAreaProvider
   onInsetsChange={[Function]}
   style={
@@ -15,9 +15,9 @@ exports[`bumper/Primitives/View View 1`] = `
   <View
     style={
       {
-        "backgroundColor": "#F7F4EE",
-        "height": 500,
-        "width": 50,
+        "backgroundColor": "#563B56",
+        "height": 120,
+        "width": 120,
       }
     }
   />