@shopify/shop-minis-react 0.0.17 → 0.0.19

package/src/stories/Select.stories.tsx

@@ -0,0 +1,85 @@
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../components/ui/select'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Select',
+  component: Select,
+  parameters: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    defaultValue: 'option-1',
+    disabled: false,
+  },
+  render: args => (
+    <Select {...args}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option-1">Option 1</SelectItem>
+        <SelectItem value="option-2">Option 2</SelectItem>
+        <SelectItem value="option-3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const WithGroups: Story = {
+  args: {
+    defaultValue: 'option-1',
+    disabled: false,
+  },
+  render: args => (
+    <Select {...args}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Group 1</SelectLabel>
+          <SelectItem value="option-1">Option 1</SelectItem>
+          <SelectItem value="option-2">Option 2</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Group 2</SelectLabel>
+          <SelectItem value="option-3">Option 3</SelectItem>
+          <SelectItem value="option-4">Option 4</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+}
+
+export const Disabled: Story = {
+  args: {
+    defaultValue: 'option-1',
+    disabled: true,
+  },
+  render: args => (
+    <Select {...args}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select an option" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="option-1">Option 1</SelectItem>
+        <SelectItem value="option-2">Option 2</SelectItem>
+        <SelectItem value="option-3">Option 3</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+}

package/src/stories/Skeleton.stories.tsx

@@ -0,0 +1,19 @@
+import {Skeleton} from '../components/ui/skeleton'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/Skeleton',
+  component: Skeleton,
+  parameters: {},
+  tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    className: 'h-4 w-20',
+  },
+}

package/src/stories/Toaster.stories.tsx

@@ -0,0 +1,46 @@
+import {toast} from 'sonner'
+
+import {Button} from '../components/atoms/button'
+import {Toaster} from '../components/ui/sonner'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Ui/Toaster',
+  component: Toaster,
+  decorators: [
+    Story => (
+      <>
+        <Story />
+        <Toaster />
+      </>
+    ),
+  ],
+  tags: ['autodocs'],
+  parameters: {},
+  args: {},
+} satisfies Meta
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const SuccessToast: Story = {
+  decorators: [
+    Story => (
+      <Button onClick={() => toast.success('Success toast!')}>
+        Show success Toast
+      </Button>
+    ),
+  ],
+  args: {},
+}
+
+export const ErrorToast: Story = {
+  decorators: [
+    Story => (
+      <Button onClick={() => toast.error('Error toast!')}>
+        Show error Toast
+      </Button>
+    ),
+  ],
+}

package/src/stories/Touchable.stories.tsx

@@ -0,0 +1,40 @@
+import {fn} from 'storybook/test'
+
+import {Touchable} from '../components/atoms/touchable'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta = {
+  title: 'Atoms/Touchable',
+  component: Touchable,
+  parameters: {},
+  tags: ['autodocs'],
+  argTypes: {
+    stopPropagation: {
+      control: 'boolean',
+    },
+  },
+  args: {
+    onClick: fn(),
+    stopPropagation: false,
+  },
+} satisfies Meta<typeof Touchable>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: <div>Click me</div>,
+  },
+}
+
+export const WithStyledChild: Story = {
+  args: {
+    children: (
+      <div className="bg-secondary text-white p-4 rounded-md cursor-pointer hover:bg-secondary/90 transition-colors">
+        Custom styled touchable
+      </div>
+    ),
+  },
+}

package/src/styles/animations.css

@@ -0,0 +1,90 @@
+/* --- Keyframe Definitions --- */
+@keyframes slide-in-from-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slide-out-to-left {
+  from {
+    transform: translateX(0);
+    filter: brightness(1);
+  }
+  to {
+    transform: translateX(-30%);
+    filter: brightness(0.7);
+  } /* Slight parallax effect */
+}
+
+@keyframes slide-in-from-left {
+  from {
+    transform: translateX(-30%);
+    filter: brightness(0.7);
+  }
+  to {
+    transform: translateX(0);
+    filter: brightness(1);
+  }
+}
+
+@keyframes slide-out-to-right {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* --- View Transition Animations --- */
+@media not (prefers-reduced-motion: reduce) {
+  /* FORWARD navigation animation */
+  html[data-navigation-type='forward']::view-transition-old(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-left;
+    z-index: 1;
+  }
+  html[data-navigation-type='forward']::view-transition-new(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-right;
+    z-index: 2; /* New view slides on top */
+  }
+
+  /* BACKWARD navigation animation */
+  html[data-navigation-type='backward']::view-transition-old(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-right;
+    z-index: 2; /* Old view slides away from on top */
+  }
+  html[data-navigation-type='backward']::view-transition-new(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-left;
+    z-index: 1;
+  }
+
+  /* Android backward navigation animation */
+  html[data-navigation-type='android-backward']::view-transition-old(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-out-to-right;
+    z-index: 2; /* Old view slides away from on top */
+  }
+  html[data-navigation-type='android-backward']::view-transition-new(root) {
+    animation: 0.4s cubic-bezier(0.4, 0, 0.2, 1) both slide-in-from-left;
+    z-index: 1;
+  }
+
+  /* NONE navigation animation */
+  html[data-navigation-type='none']::view-transition-group(root),
+  html[data-navigation-type='none']::view-transition-old(root),
+  html[data-navigation-type='none']::view-transition-new(root) {
+    animation: 0 !important;
+    opacity: 0 !important;
+  }
+}

package/src/styles/globals.css

@@ -16,6 +16,14 @@ body {
   touch-action: manipulation;
 }
 
+html {
+  position: relative;
+  width: 100vw;
+  min-height: 100vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
 /* Disable text selection */
 body {
   -webkit-user-select: none;

package/src/styles/theme.css

@@ -97,6 +97,6 @@
 }
 
 /* Dark mode overrides - only the palette colors that change */
-.dark {
+@theme dark {
   /* TBD */
 }

package/src/types/index.ts

@@ -12,4 +12,10 @@ export interface ThemeConfig {
   typography?: {[key: string]: string}
 }
 
-// Export other types as needed
+// Navigation
+export const DATA_NAVIGATION_TYPE_ATTRIBUTE = 'data-navigation-type' as const
+export const NAVIGATION_TYPES = {
+  forward: 'forward',
+  backward: 'backward',
+  none: 'none',
+} as const

package/src/utils/image.ts

@@ -0,0 +1,18 @@
+import {toUint8Array} from 'js-base64'
+import {thumbHashToDataURL} from 'thumbhash'
+
+/**
+ * Converts a thumbhash string to a data URL for use as an image placeholder
+ * @param thumbhash Base64 encoded thumbhash string
+ * @returns Data URL that can be used as image source or undefined if conversion fails
+ */
+export function getThumbhashDataURL(thumbhash?: string): string | undefined {
+  if (!thumbhash) return
+
+  try {
+    const thumbhashArray = toUint8Array(thumbhash)
+    return thumbHashToDataURL(thumbhashArray)
+  } catch (error) {
+    console.warn('Failed to decode thumbhash to data URL', error)
+  }
+}