@shopify/shop-minis-react 0.0.28 → 0.0.30

package/src/stories/VideoPlayer.stories.tsx

@@ -0,0 +1,129 @@
+import {useRef} from 'react'
+
+import {fn} from 'storybook/test'
+
+import {VideoPlayer, VideoPlayerRef} from '../components/atoms/video-player'
+
+import type {Meta, StoryObj} from '@storybook/react-vite'
+
+const meta: Meta<typeof VideoPlayer> = {
+  title: 'Atoms/VideoPlayer',
+  component: VideoPlayer,
+  parameters: {
+    layout: 'padded',
+  },
+  args: {
+    onPlay: fn(),
+    onPause: fn(),
+    onEnded: fn(),
+    onReady: fn(),
+  },
+  argTypes: {
+    src: {
+      control: 'text',
+    },
+    format: {
+      control: 'select',
+      options: ['video/mp4', 'video/webm', 'video/ogg'],
+    },
+    poster: {
+      control: 'text',
+    },
+    width: {
+      control: 'number',
+    },
+    height: {
+      control: 'number',
+    },
+    muted: {
+      control: 'boolean',
+    },
+    autoplay: {
+      control: 'boolean',
+    },
+    playButtonComponent: {
+      control: 'text',
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const SAMPLE_VIDEO_MP4 =
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
+const SAMPLE_POSTER =
+  'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg'
+
+export const FixedWidth: Story = {
+  args: {
+    src: SAMPLE_VIDEO_MP4,
+    width: 300,
+  },
+}
+
+export const FixedHeight: Story = {
+  args: {
+    src: SAMPLE_VIDEO_MP4,
+    height: 200,
+  },
+}
+
+export const WithPoster: Story = {
+  args: {
+    src: SAMPLE_VIDEO_MP4,
+    poster: SAMPLE_POSTER,
+    width: 300,
+  },
+}
+
+export const WithCustomPlayButton: Story = {
+  args: {
+    src: SAMPLE_VIDEO_MP4,
+    poster: SAMPLE_POSTER,
+    width: 300,
+    playButtonComponent: (
+      <div className="bg-blue-500 text-white rounded-full p-4 shadow-lg">
+        <svg viewBox="0 0 24 24" className="w-8 h-8" fill="currentColor">
+          <path d="M8 5v14l11-7z" />
+        </svg>
+      </div>
+    ),
+  },
+}
+
+const WithImperativeControlsComponent = (args: any) => {
+  const videoRef = useRef<VideoPlayerRef>(null)
+
+  return (
+    <div className="space-y-4 flex flex-col items-center">
+      <VideoPlayer ref={videoRef} {...args} />
+      <div className="flex gap-2">
+        <button
+          type="button"
+          className="px-4 py-2 bg-primary text-white rounded"
+          onClick={() => videoRef.current?.play()}
+        >
+          Play
+        </button>
+        <button
+          type="button"
+          className="px-4 py-2 bg-red-400 text-white rounded"
+          onClick={() => videoRef.current?.pause()}
+        >
+          Pause
+        </button>
+      </div>
+    </div>
+  )
+}
+
+export const WithImperativeControls: Story = {
+  render: WithImperativeControlsComponent,
+  args: {
+    src: SAMPLE_VIDEO_MP4,
+    poster: SAMPLE_POSTER,
+    width: 300,
+  },
+}

package/src/styles/fonts.css

@@ -0,0 +1,26 @@
+@font-face {
+  font-family: 'Suisse Intl';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/SuisseIntl-Book.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/SuisseIntl-Medium.woff2')
+    format('woff2');
+}
+
+@font-face {
+  font-family: 'Suisse Intl';
+  font-style: normal;
+  font-weight: 600 700;
+  font-display: swap;
+  src: url('https://cdn.shopify.com/shop-assets/static_uploads/shoplift/SuisseIntl-SemiBold.woff2')
+    format('woff2');
+}

package/src/styles/theme.css

@@ -94,6 +94,32 @@
 
   /* Button theme colors */
   --color-button-overlay: var(--grayscale-d70);
+
+  /* Default fonts */
+  --font-sans: 'Suisse Intl', ui-sans-serif, system-ui, sans-serif,
+    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    'Liberation Mono', 'Courier New', monospace;
+
+  /* Default Tailwind spacing scale (0.25rem = 4px base) */
+  --spacing: 0.25rem;
+
+  /* Semantic spacing aliases */
+  --spacing-shop-screen-margin: 20px;
+  --spacing--shop-screen-margin: -20px;
+  --spacing-shop-section-gap: 36px;
+  --spacing--shop-section-gap: -36px;
+  --spacing-shop-card-row-gutter: 8px;
+  --spacing--shop-card-row-gutter: -8px;
+  --spacing-shop-card-padding: 16px;
+  --spacing--shop-card-padding: -16px;
+
+  /* Shop shadow values */
+  --shadow-shop-xs: 0px 2px 4px 0px rgba(0, 0, 0, 0.06);
+  --shadow-shop-xs-surface: 0px -1px 4px 0px rgba(0, 0, 0, 0.06);
+  --shadow-shop-s: 0px 4px 8px 0px rgba(0, 0, 0, 0.1);
+  --shadow-shop-m: 0px 4px 12px 0px rgba(0, 0, 0, 0.16);
+  --shadow-shop-l: 0px 8px 24px 0px rgba(0, 0, 0, 0.24);
 }
 
 /* Dark mode overrides - only the palette colors that change */

package/src/hooks/util/useImagePicker.doc.tsx

@@ -1,41 +0,0 @@
-export const useImagePickerDoc = {
-  name: 'useImagePicker',
-  category: 'Utility',
-  description:
-    'Hook for selecting images from camera or gallery in web-based mini apps',
-  params: [
-    {
-      name: 'options',
-      type: 'UseImagePickerOptions',
-      description: 'Configuration options for the image picker',
-      optional: true,
-      properties: [
-        {
-          name: 'cameraFacing',
-          type: "'user' | 'environment'",
-          description: 'Which camera to use when opening camera',
-          optional: true,
-          default: "'environment'",
-        },
-      ],
-    },
-  ],
-  returns: [
-    {
-      name: 'openCamera',
-      type: '() => Promise<File>',
-      description: 'Function to open the camera for capturing an image',
-    },
-    {
-      name: 'openGallery',
-      type: '() => Promise<File>',
-      description: 'Function to open the gallery for selecting an image',
-    },
-    {
-      name: 'ImagePickerInputs',
-      type: 'React.FC',
-      description:
-        'Component that renders hidden file inputs. Must be rendered in your component for the picker to work',
-    },
-  ],
-}