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

package/src/system/core/primitives/Stack.features.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { HStack, Stack, VStack } from './Stack';
+import { View } from './View';
+
+const meta: Meta<typeof Stack> = {
+  title: 'Bumper/Core/Primitives/Stack/Features',
+  component: Stack,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const VStackBasic: Story = {
+  render: () => (
+    <VStack gap="$space.16" backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m">
+      <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          VStack Item 1
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          VStack Item 2
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.hi" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          VStack Item 3
+        </Typography.Text>
+      </View>
+    </VStack>
+  ),
+};
+
+export const HStackBasic: Story = {
+  render: () => (
+    <HStack gap="$space.16" backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m">
+      <View backgroundColor="$bg.accent.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          HStack Item 1
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.promo.hi.default" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          HStack Item 2
+        </Typography.Text>
+      </View>
+      <View backgroundColor="$bg.info.hi" padding="$space.16" borderRadius="$radius.s">
+        <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+          HStack Item 3
+        </Typography.Text>
+      </View>
+    </HStack>
+  ),
+};
+
+export const FlexWrap: Story = {
+  render: () => (
+    <HStack
+      gap="$space.8"
+      flexWrap="wrap"
+      backgroundColor="$bg.base.mid.default"
+      padding="$space.16"
+      borderRadius="$radius.m"
+      maxWidth={400}
+    >
+      {Array.from({ length: 10 }, (_, i) => (
+        <View key={`item-${i}`} backgroundColor="$bg.accent.default" padding="$space.12" borderRadius="$radius.s">
+          <Typography.Text variant="body-s" color="$content.base.onContrasted.hi">
+            Item {i + 1}
+          </Typography.Text>
+        </View>
+      ))}
+    </HStack>
+  ),
+};
+
+export const NestedStacks: Story = {
+  render: () => (
+    <VStack gap="$space.16" backgroundColor="$bg.base.hi.default" padding="$space.24" borderRadius="$radius.l">
+      <Typography.Text variant="heading-m">Nested Stacks Layout</Typography.Text>
+
+      <VStack gap="$space.12" backgroundColor="$bg.base.low.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="label-m">Section 1</Typography.Text>
+        <HStack gap="$space.8">
+          <View backgroundColor="$bg.info.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={1}>
+            <Typography.Text variant="body-s">Col 1</Typography.Text>
+          </View>
+          <View backgroundColor="$bg.success.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={1}>
+            <Typography.Text variant="body-s">Col 2</Typography.Text>
+          </View>
+        </HStack>
+      </VStack>
+
+      <VStack gap="$space.12" backgroundColor="$bg.base.low.default" padding="$space.16" borderRadius="$radius.m">
+        <Typography.Text variant="label-m">Section 2</Typography.Text>
+        <VStack gap="$space.8">
+          <View backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.s">
+            <Typography.Text variant="body-s">Row 1</Typography.Text>
+          </View>
+          <View backgroundColor="$bg.danger.mid" padding="$space.12" borderRadius="$radius.s">
+            <Typography.Text variant="body-s">Row 2</Typography.Text>
+          </View>
+        </VStack>
+      </VStack>
+    </VStack>
+  ),
+};
+
+export const FlexGrowExample: Story = {
+  render: () => (
+    <HStack
+      gap="$space.8"
+      backgroundColor="$bg.base.mid.default"
+      padding="$space.16"
+      borderRadius="$radius.m"
+      height="$size.144"
+    >
+      <View backgroundColor="$bg.info.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Fixed</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.success.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={1}>
+        <Typography.Text variant="body-s">flexGrow: 1</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.s" flexGrow={2}>
+        <Typography.Text variant="body-s">flexGrow: 2</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.danger.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Fixed</Typography.Text>
+      </View>
+    </HStack>
+  ),
+};
+
+export const GridLikeLayout: Story = {
+  render: () => (
+    <VStack gap="$space.16" backgroundColor="$bg.base.mid.default" padding="$space.16" borderRadius="$radius.m">
+      <HStack gap="$space.16">
+        <View backgroundColor="$bg.accent.default" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            1
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.promo.hi.default" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            2
+          </Typography.Text>
+        </View>
+      </HStack>
+
+      <HStack gap="$space.16">
+        <View backgroundColor="$bg.info.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            3
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.success.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            4
+          </Typography.Text>
+        </View>
+      </HStack>
+
+      <HStack gap="$space.16">
+        <View backgroundColor="$bg.warning.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            5
+          </Typography.Text>
+        </View>
+        <View backgroundColor="$bg.danger.hi" padding="$space.24" borderRadius="$radius.s" flexGrow={1}>
+          <Typography.Text variant="body-m" color="$content.base.onContrasted.hi">
+            6
+          </Typography.Text>
+        </View>
+      </HStack>
+    </VStack>
+  ),
+};

package/src/system/core/primitives/Stack.stories.tsx

@@ -1,49 +1,79 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import type { StackProps } from './Stack';
-import { HStack, Stack, VStack } from './Stack';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../content/typography/Typography';
+import { Stack } from './Stack';
 import { View } from './View';
 
-export default {
-  title: 'bumper/Primitives',
+const meta: Meta<typeof Stack> = {
+  title: 'Bumper/Core/Primitives/Stack',
   component: Stack,
-} satisfies Meta<StackProps>;
+  tags: ['autodocs'],
+  argTypes: {
+    flexDirection: {
+      control: 'select',
+      options: ['row', 'column', 'row-reverse', 'column-reverse'],
+      description: 'Flex direction',
+    },
+    gap: {
+      control: 'select',
+      options: [
+        '$space.none',
+        '$space.2',
+        '$space.4',
+        '$space.8',
+        '$space.12',
+        '$space.16',
+        '$space.24',
+        '$space.32',
+        '$space.40',
+        '$space.48',
+        '$space.56',
+        '$space.64',
+        '$space.80',
+      ],
+      description: 'Gap between items (space token)',
+    },
+    padding: {
+      control: 'select',
+      options: [
+        '$space.none',
+        '$space.2',
+        '$space.4',
+        '$space.8',
+        '$space.12',
+        '$space.16',
+        '$space.24',
+        '$space.32',
+        '$space.40',
+        '$space.48',
+        '$space.56',
+        '$space.64',
+        '$space.80',
+      ],
+      description: 'Padding (space token)',
+    },
+  },
+};
 
-const items = (
-  <>
-    <View
-      width="$size.64"
-      height="$size.20"
-      backgroundColor="$bg.accent.default"
-      padding="$space.4"
-      borderRadius="$radius.s"
-    />
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-    <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"
-    />
-  </>
-);
-
-export const StackStory: StoryFn<typeof Stack> = () => (
-  <>
-    <HStack gap="$space.4">{items}</HStack>
-
-    <VStack gap="$space.4" marginTop="$space.16">
-      {items}
-    </VStack>
-  </>
-);
-
-StackStory.storyName = 'Stack';
+export const Default: Story = {
+  args: {
+    flexDirection: 'row',
+    gap: '$space.16',
+    padding: '$space.16',
+  },
+  render: (args) => (
+    <Stack {...args}>
+      <View backgroundColor="$bg.info.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Item 1</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.success.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Item 2</Typography.Text>
+      </View>
+      <View backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.s">
+        <Typography.Text variant="body-s">Item 3</Typography.Text>
+      </View>
+    </Stack>
+  ),
+};