@ornikar/bumper 2.8.0 → 2.8.1-canary.1768927687.5a0439490957cfbbe8b8c5136c5fc68b0828466d.0

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Image } from './Image';
+
+const meta: Meta<typeof Image> = {
+  title: 'Bumper/Core/Primitives/Image',
+  component: Image,
+  tags: ['autodocs'],
+  argTypes: {
+    source: {
+      table: { disable: true },
+    },
+    width: {
+      control: 'select',
+      options: ['$size.48', '$size.64', '$size.96', '$size.120', '$size.144'],
+    },
+    height: {
+      control: 'select',
+      options: ['$size.48', '$size.64', '$size.96', '$size.120', '$size.144'],
+    },
+    resizeMode: {
+      control: 'select',
+      options: ['cover', 'contain', 'stretch', 'center'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    source: {
+      uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURUUvRf///xUXFNgAAAABYktHRAH/Ai3eAAAAB3RJTUUH6gETDxAgfjc2IQAAABRJREFUOMtjYBgFo2AUjIJRQE8AAAV4AAEpcbn8AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI2LTAxLTE5VDE1OjE2OjMyKzAwOjAwpvKSnwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNi0wMS0xOVQxNToxNjozMiswMDowMNevKiMAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjYtMDEtMTlUMTU6MTY6MzIrMDA6MDCAugv8AAAAAElFTkSuQmCC',
+    },
+    width: '$size.120',
+    height: '$size.144',
+    resizeMode: 'contain',
+  },
+};

package/src/system/core/primitives/Image/Image.ts

@@ -0,0 +1,2 @@
+export type { ImageProps } from '@tamagui/image';
+export { Image } from '@tamagui/image';

package/src/system/core/primitives/Image/__snapshots__/Image.stories.tsx.snap

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Primitives/Image Default 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <Image
+    resizeMode="contain"
+    source={
+      {
+        "uri": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURUUvRf///xUXFNgAAAABYktHRAH/Ai3eAAAAB3RJTUUH6gETDxAgfjc2IQAAABRJREFUOMtjYBgFo2AUjIJRQE8AAAV4AAEpcbn8AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI2LTAxLTE5VDE1OjE2OjMyKzAwOjAwpvKSnwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNi0wMS0xOVQxNToxNjozMiswMDowMNevKiMAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjYtMDEtMTlUMTU6MTY6MzIrMDA6MDCAugv8AAAAAElFTkSuQmCC",
+      }
+    }
+    style={
+      {
+        "height": 144,
+        "width": 120,
+      }
+    }
+  />
+</RNCSafeAreaProvider>
+`;

package/src/system/core/primitives/Image/__snapshots_web__/Image.stories.tsx.snap

@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Bumper/Core/Primitives/Image Default 1`] = `
+<DocumentFragment>
+  <div
+    class="css-view-175oi2r r-flex-13awgt0"
+  >
+    <span
+      class=""
+      style="display: contents;"
+    >
+      <span
+        class=" "
+        style="display: contents;"
+      >
+        <span
+          class=" t_light is_Theme"
+          style="display: contents;"
+        >
+          <div
+            class="css-view-175oi2r r-flexBasis-1mlwlqe r-overflow-1udh08x r-zIndex-417010"
+            style="width: var(--t-size-size--120); height: var(--t-size-size--144);"
+          >
+            <div
+              class="css-view-175oi2r r-backgroundColor-1niwhzg r-backgroundPosition-vvn4in r-backgroundRepeat-u6sd8q r-bottom-1p0dtai r-height-1pi2tsx r-left-1d2f490 r-position-u8s1d r-right-zchlnj r-top-ipm5af r-width-13qz1uu r-zIndex-1wyyakw r-backgroundSize-ehq7j7"
+              style="background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURUUvRf///xUXFNgAAAABYktHRAH/Ai3eAAAAB3RJTUUH6gETDxAgfjc2IQAAABRJREFUOMtjYBgFo2AUjIJRQE8AAAV4AAEpcbn8AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI2LTAxLTE5VDE1OjE2OjMyKzAwOjAwpvKSnwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNi0wMS0xOVQxNToxNjozMiswMDowMNevKiMAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjYtMDEtMTlUMTU6MTY6MzIrMDA6MDCAugv8AAAAAElFTkSuQmCC");"
+            />
+            <img
+              alt=""
+              class="css-accessibilityImage-9pa8cd"
+              draggable="false"
+              src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAQMAAABKLAcXAAAAIGNIUk0AAHomAACAhAAA+gAAAIDoAAB1MAAA6mAAADqYAAAXcJy6UTwAAAAGUExURUUvRf///xUXFNgAAAABYktHRAH/Ai3eAAAAB3RJTUUH6gETDxAgfjc2IQAAABRJREFUOMtjYBgFo2AUjIJRQE8AAAV4AAEpcbn8AAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI2LTAxLTE5VDE1OjE2OjMyKzAwOjAwpvKSnwAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNi0wMS0xOVQxNToxNjozMiswMDowMNevKiMAAAAodEVYdGRhdGU6dGltZXN0YW1wADIwMjYtMDEtMTlUMTU6MTY6MzIrMDA6MDCAugv8AAAAAElFTkSuQmCC"
+            />
+          </div>
+        </span>
+      </span>
+    </span>
+  </div>
+</DocumentFragment>
+`;

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

@@ -0,0 +1,84 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../content/typography/Typography';
+import { HStack, VStack } from '../Stack';
+import { View } from '../View';
+import { ScrollView } from './ScrollView';
+
+const meta: Meta<typeof ScrollView> = {
+  title: 'Bumper/Core/Primitives/ScrollView/Features',
+  component: ScrollView,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const HorizontalScroll: Story = {
+  render: () => (
+    <ScrollView horizontal height="$size.96" width="$size.208">
+      <HStack gap="$space.8" padding="$space.8">
+        {Array.from({ length: 10 }, (_, i) => (
+          <View
+            key={`item-${i}`}
+            backgroundColor="$bg.success.mid"
+            padding="$space.16"
+            borderRadius="$radius.m"
+            width="$size.96"
+          >
+            <Typography.Text variant="body-s">H-Item {i + 1}</Typography.Text>
+          </View>
+        ))}
+      </HStack>
+    </ScrollView>
+  ),
+};
+
+export const HiddenIndicators: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-s">Vertical scroll without indicator:</Typography.Text>
+      <ScrollView height="$size.120" width="$size.208" showsVerticalScrollIndicator={false}>
+        <VStack gap="$space.8" padding="$space.8">
+          {Array.from({ length: 8 }, (_, i) => (
+            <View key={`item-${i}`} backgroundColor="$bg.warning.mid" padding="$space.12" borderRadius="$radius.m">
+              <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+            </View>
+          ))}
+        </VStack>
+      </ScrollView>
+
+      <Typography.Text variant="body-s">Horizontal scroll without indicator:</Typography.Text>
+      <ScrollView horizontal height="$size.80" width="$size.208" showsHorizontalScrollIndicator={false}>
+        <HStack gap="$space.8" padding="$space.8">
+          {Array.from({ length: 8 }, (_, i) => (
+            <View
+              key={`item-${i}`}
+              backgroundColor="$bg.danger.mid"
+              padding="$space.12"
+              borderRadius="$radius.m"
+              width="$size.80"
+            >
+              <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+            </View>
+          ))}
+        </HStack>
+      </ScrollView>
+    </VStack>
+  ),
+};
+
+export const ScrollDisabled: Story = {
+  render: () => (
+    <VStack gap="$space.16">
+      <Typography.Text variant="body-s">Scroll disabled (cannot scroll):</Typography.Text>
+      <ScrollView height="$size.120" width="$size.208" scrollEnabled={false}>
+        <VStack gap="$space.8" padding="$space.8">
+          {Array.from({ length: 8 }, (_, i) => (
+            <View key={`item-${i}`} backgroundColor="$bg.disabled.mid" padding="$space.12" borderRadius="$radius.m">
+              <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+            </View>
+          ))}
+        </VStack>
+      </ScrollView>
+    </VStack>
+  ),
+};

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Typography } from '../../../content/typography/Typography';
+import { View } from '../View';
+import { ScrollView } from './ScrollView';
+
+const meta: Meta<typeof ScrollView> = {
+  title: 'Bumper/Core/Primitives/ScrollView',
+  component: ScrollView,
+  tags: ['autodocs'],
+  argTypes: {
+    horizontal: {
+      control: 'boolean',
+      description: 'When true, the scroll view content is arranged horizontally',
+    },
+    scrollEnabled: {
+      control: 'boolean',
+      description: 'When false, the view cannot be scrolled',
+    },
+    showsVerticalScrollIndicator: {
+      control: 'boolean',
+      description: 'When true, shows a vertical scroll indicator',
+    },
+    showsHorizontalScrollIndicator: {
+      control: 'boolean',
+      description: 'When true, shows a horizontal scroll indicator',
+    },
+    height: {
+      control: 'select',
+      options: ['$size.96', '$size.120', '$size.144', '$size.176', '$size.208'],
+      description: 'Height of the scroll view (size token)',
+    },
+    width: {
+      control: 'select',
+      options: ['$size.176', '$size.208', '100%'],
+      description: 'Width of the scroll view (size token)',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    height: '$size.176',
+    width: '$size.208',
+    showsVerticalScrollIndicator: true,
+  },
+  render: (args) => (
+    <ScrollView
+      {...args}
+      contentContainerStyle={{
+        gap: '$space.8',
+      }}
+    >
+      {Array.from({ length: 10 }, (_, i) => (
+        <View key={`item-${i}`} backgroundColor="$bg.info.mid" padding="$space.16" borderRadius="$radius.m">
+          <Typography.Text variant="body-s">Item {i + 1}</Typography.Text>
+        </View>
+      ))}
+    </ScrollView>
+  ),
+};

package/src/system/core/primitives/ScrollView/ScrollView.ts

@@ -0,0 +1,2 @@
+export type { ScrollViewProps } from '@tamagui/scroll-view';
+export { ScrollView } from '@tamagui/scroll-view';