@wakastellar/ui 2.3.4 → 2.4.0

package/src/components/waka-video/WakaVideo.stories.tsx

@@ -0,0 +1,203 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaVideo } from './index'
+
+const meta: Meta<typeof WakaVideo> = {
+  title: 'Components/Display/WakaVideo',
+  component: WakaVideo,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A video player component with custom controls, fullscreen support, and playback speed options.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    autoPlay: {
+      control: 'boolean',
+      description: 'Auto-play the video',
+    },
+    loop: {
+      control: 'boolean',
+      description: 'Loop the video',
+    },
+    muted: {
+      control: 'boolean',
+      description: 'Mute the video',
+    },
+    controls: {
+      control: 'boolean',
+      description: 'Show video controls',
+    },
+    showFullscreen: {
+      control: 'boolean',
+      description: 'Show fullscreen button',
+    },
+    showPlaybackSpeed: {
+      control: 'boolean',
+      description: 'Show playback speed selector',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaVideo>
+
+// Sample video URL (Big Buck Bunny - open source)
+const sampleVideoUrl = 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4'
+const samplePosterUrl = 'https://images.unsplash.com/photo-1536440136628-849c177e76a1?w=800&q=80'
+
+export const Default: Story = {
+  args: {
+    src: sampleVideoUrl,
+    poster: samplePosterUrl,
+    width: 640,
+  },
+}
+
+export const WithPoster: Story = {
+  args: {
+    src: sampleVideoUrl,
+    poster: samplePosterUrl,
+    width: 640,
+  },
+}
+
+export const AutoPlay: Story = {
+  args: {
+    src: sampleVideoUrl,
+    autoPlay: true,
+    muted: true,
+    width: 640,
+  },
+}
+
+export const Looping: Story = {
+  args: {
+    src: sampleVideoUrl,
+    loop: true,
+    autoPlay: true,
+    muted: true,
+    width: 640,
+  },
+}
+
+export const NoControls: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Video without custom controls (click to play/pause)</p>
+      <WakaVideo
+        src={sampleVideoUrl}
+        poster={samplePosterUrl}
+        controls={false}
+        width={640}
+      />
+    </div>
+  ),
+}
+
+export const AspectRatios: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">16:9 (Default)</p>
+        <WakaVideo
+          src={sampleVideoUrl}
+          poster={samplePosterUrl}
+          width={500}
+          aspectRatio="16/9"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">4:3</p>
+        <WakaVideo
+          src={sampleVideoUrl}
+          poster={samplePosterUrl}
+          width={500}
+          aspectRatio="4/3"
+        />
+      </div>
+      <div>
+        <p className="text-sm text-muted-foreground mb-2">1:1 (Square)</p>
+        <WakaVideo
+          src={sampleVideoUrl}
+          poster={samplePosterUrl}
+          width={400}
+          aspectRatio="1/1"
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const MinimalControls: Story = {
+  args: {
+    src: sampleVideoUrl,
+    poster: samplePosterUrl,
+    width: 640,
+    showFullscreen: false,
+    showPlaybackSpeed: false,
+  },
+}
+
+export const WithCallbacks: Story = {
+  render: () => (
+    <div className="space-y-4">
+      <p className="text-sm text-muted-foreground">Check console for callback events</p>
+      <WakaVideo
+        src={sampleVideoUrl}
+        poster={samplePosterUrl}
+        width={640}
+        onReady={() => console.log('Video ready')}
+        onPlay={() => console.log('Video playing')}
+        onPause={() => console.log('Video paused')}
+        onEnded={() => console.log('Video ended')}
+        onTimeUpdate={(time) => console.log('Current time:', time.toFixed(2))}
+      />
+    </div>
+  ),
+}
+
+export const VideoInCard: Story = {
+  render: () => (
+    <div className="w-[500px] border rounded-lg overflow-hidden">
+      <WakaVideo
+        src={sampleVideoUrl}
+        poster={samplePosterUrl}
+        className="rounded-none"
+      />
+      <div className="p-4">
+        <h3 className="font-semibold">Big Buck Bunny</h3>
+        <p className="text-sm text-muted-foreground mt-1">
+          A short animated film by the Blender Institute
+        </p>
+        <div className="flex gap-2 mt-3">
+          <span className="text-xs bg-muted px-2 py-1 rounded">Animation</span>
+          <span className="text-xs bg-muted px-2 py-1 rounded">Comedy</span>
+        </div>
+      </div>
+    </div>
+  ),
+}
+
+export const ResponsiveVideo: Story = {
+  render: () => (
+    <div className="w-full max-w-[800px]">
+      <WakaVideo
+        src={sampleVideoUrl}
+        poster={samplePosterUrl}
+        width="100%"
+      />
+    </div>
+  ),
+}
+
+export const FixedHeight: Story = {
+  args: {
+    src: sampleVideoUrl,
+    poster: samplePosterUrl,
+    width: 640,
+    height: 300,
+  },
+}

package/src/components/waka-virtual-list/WakaVirtualList.stories.tsx

@@ -0,0 +1,273 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaVirtualList } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof WakaVirtualList> = {
+  title: 'Components/Display/WakaVirtualList',
+  component: WakaVirtualList,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: 'A virtualized list component for efficiently rendering large datasets with support for variable heights and infinite scrolling.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    height: {
+      control: { type: 'number' },
+      description: 'Container height in pixels',
+    },
+    overscan: {
+      control: { type: 'number' },
+      description: 'Number of items to pre-render',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaVirtualList>
+
+// Generate mock data
+const generateItems = (count: number) =>
+  Array.from({ length: count }, (_, i) => ({
+    id: i + 1,
+    title: `Item ${i + 1}`,
+    description: `This is the description for item ${i + 1}`,
+  }))
+
+const items1000 = generateItems(1000)
+const items10000 = generateItems(10000)
+
+export const Default: Story = {
+  args: {
+    items: items1000,
+    itemHeight: 60,
+    height: 400,
+  },
+  render: (args) => (
+    <div className="border rounded-lg overflow-hidden w-[400px]">
+      <WakaVirtualList
+        {...args}
+        renderItem={(item, index, style) => (
+          <div style={style} className="px-4 py-2 border-b hover:bg-muted/50">
+            <div className="font-medium">{item.title}</div>
+            <div className="text-sm text-muted-foreground">{item.description}</div>
+          </div>
+        )}
+      />
+    </div>
+  ),
+}
+
+export const LargeDataset: Story = {
+  render: () => (
+    <div className="border rounded-lg overflow-hidden w-[400px]">
+      <div className="p-2 bg-muted text-sm text-center">
+        10,000 items - Scroll to see virtualization
+      </div>
+      <WakaVirtualList
+        items={items10000}
+        itemHeight={50}
+        height={500}
+        renderItem={(item, index, style) => (
+          <div
+            style={style}
+            className={`px-4 py-2 border-b ${index % 2 === 0 ? 'bg-background' : 'bg-muted/30'}`}
+          >
+            <div className="flex items-center justify-between">
+              <span className="font-medium">{item.title}</span>
+              <span className="text-xs text-muted-foreground">#{item.id}</span>
+            </div>
+          </div>
+        )}
+      />
+    </div>
+  ),
+}
+
+export const VariableHeight: Story = {
+  render: () => {
+    const variableItems = generateItems(500).map((item, i) => ({
+      ...item,
+      expanded: i % 5 === 0,
+    }))
+
+    return (
+      <div className="border rounded-lg overflow-hidden w-[400px]">
+        <WakaVirtualList
+          items={variableItems}
+          itemHeight={(item) => (item.expanded ? 100 : 50)}
+          height={400}
+          renderItem={(item, index, style) => (
+            <div
+              style={style}
+              className="px-4 py-2 border-b hover:bg-muted/50"
+            >
+              <div className="font-medium">{item.title}</div>
+              {item.expanded && (
+                <div className="mt-2 text-sm text-muted-foreground">
+                  <p>This item has expanded content with more details.</p>
+                  <p>Additional information goes here.</p>
+                </div>
+              )}
+            </div>
+          )}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithInfiniteScroll: Story = {
+  render: () => {
+    const [items, setItems] = React.useState(() => generateItems(50))
+    const [isLoading, setIsLoading] = React.useState(false)
+
+    const loadMore = () => {
+      if (isLoading) return
+      setIsLoading(true)
+      setTimeout(() => {
+        const newItems = generateItems(50).map((item) => ({
+          ...item,
+          id: items.length + item.id,
+          title: `Item ${items.length + item.id}`,
+        }))
+        setItems(prev => [...prev, ...newItems])
+        setIsLoading(false)
+      }, 1000)
+    }
+
+    return (
+      <div className="border rounded-lg overflow-hidden w-[400px]">
+        <div className="p-2 bg-muted text-sm text-center">
+          Loaded: {items.length} items - Scroll to load more
+        </div>
+        <WakaVirtualList
+          items={items}
+          itemHeight={60}
+          height={400}
+          onEndReached={loadMore}
+          endReachedThreshold={300}
+          isLoading={isLoading}
+          loadingElement={
+            <div className="flex items-center justify-center gap-2 text-sm text-muted-foreground">
+              <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />
+              Loading more items...
+            </div>
+          }
+          renderItem={(item, index, style) => (
+            <div style={style} className="px-4 py-2 border-b hover:bg-muted/50">
+              <div className="font-medium">{item.title}</div>
+              <div className="text-sm text-muted-foreground">{item.description}</div>
+            </div>
+          )}
+        />
+      </div>
+    )
+  },
+}
+
+export const EmptyState: Story = {
+  render: () => (
+    <div className="border rounded-lg overflow-hidden w-[400px]">
+      <WakaVirtualList
+        items={[]}
+        itemHeight={60}
+        height={300}
+        emptyElement={
+          <div className="text-center">
+            <p className="text-muted-foreground">No items to display</p>
+            <p className="text-sm text-muted-foreground mt-1">Add some items to see them here</p>
+          </div>
+        }
+        renderItem={() => null}
+      />
+    </div>
+  ),
+}
+
+export const ContactList: Story = {
+  render: () => {
+    const contacts = Array.from({ length: 200 }, (_, i) => ({
+      id: i + 1,
+      name: `Contact ${i + 1}`,
+      email: `contact${i + 1}@example.com`,
+      avatar: `https://i.pravatar.cc/40?img=${(i % 70) + 1}`,
+    }))
+
+    return (
+      <div className="border rounded-lg overflow-hidden w-[350px]">
+        <div className="p-3 border-b bg-muted/50">
+          <h3 className="font-semibold">Contacts</h3>
+          <p className="text-sm text-muted-foreground">{contacts.length} people</p>
+        </div>
+        <WakaVirtualList
+          items={contacts}
+          itemHeight={64}
+          height={400}
+          renderItem={(contact, index, style) => (
+            <div
+              style={style}
+              className="flex items-center gap-3 px-4 py-2 border-b hover:bg-muted/50 cursor-pointer"
+            >
+              <img
+                src={contact.avatar}
+                alt={contact.name}
+                className="w-10 h-10 rounded-full"
+              />
+              <div>
+                <div className="font-medium">{contact.name}</div>
+                <div className="text-sm text-muted-foreground">{contact.email}</div>
+              </div>
+            </div>
+          )}
+        />
+      </div>
+    )
+  },
+}
+
+export const TableLike: Story = {
+  render: () => {
+    const data = Array.from({ length: 500 }, (_, i) => ({
+      id: i + 1,
+      name: `Product ${i + 1}`,
+      category: ['Electronics', 'Clothing', 'Books', 'Home'][i % 4],
+      price: (Math.random() * 100 + 10).toFixed(2),
+      stock: Math.floor(Math.random() * 100),
+    }))
+
+    return (
+      <div className="border rounded-lg overflow-hidden w-[600px]">
+        <div className="grid grid-cols-5 gap-2 px-4 py-2 bg-muted font-medium text-sm border-b">
+          <div>ID</div>
+          <div>Name</div>
+          <div>Category</div>
+          <div>Price</div>
+          <div>Stock</div>
+        </div>
+        <WakaVirtualList
+          items={data}
+          itemHeight={44}
+          height={400}
+          renderItem={(row, index, style) => (
+            <div
+              style={style}
+              className={`grid grid-cols-5 gap-2 px-4 py-2 border-b text-sm ${
+                index % 2 === 0 ? 'bg-background' : 'bg-muted/20'
+              }`}
+            >
+              <div className="text-muted-foreground">#{row.id}</div>
+              <div>{row.name}</div>
+              <div>{row.category}</div>
+              <div>${row.price}</div>
+              <div>{row.stock}</div>
+            </div>
+          )}
+        />
+      </div>
+    )
+  },
+}