@qwickapps/react-framework 1.7.1 → 1.8.1

package/src/stories/HeroSlideshow.stories.tsx

@@ -0,0 +1,164 @@
+/**
+ * HeroSlideshow Component Stories
+ *
+ * Copyright (c) 2025 QwickApps.com. All rights reserved.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import QwickApp from '../components/QwickApp';
+import { HeroSlideshow } from '../components/blocks';
+import type { HeroSlide } from '../components/blocks/HeroSlideshow';
+
+// ─── Shared slide sets ──────────────────────────────────────────────────────
+
+const gradientSlides: HeroSlide[] = [
+  {
+    title: 'Build Apps 10x Faster',
+    subtitle: 'The most developer-friendly React framework. Production-ready in hours, not weeks.',
+    backgroundGradient: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+    actions: [
+      { label: 'Get Started', variant: 'primary', buttonSize: 'large' },
+      { label: 'View Docs', variant: 'outlined', buttonSize: 'large' },
+    ],
+  },
+  {
+    title: 'Schema-Driven Components',
+    subtitle: 'Define once in Payload CMS, render everywhere. Data binding built in.',
+    backgroundGradient: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
+    actions: [
+      { label: 'See Components', variant: 'primary', buttonSize: 'large' },
+    ],
+  },
+  {
+    title: 'Ship With Confidence',
+    subtitle: 'Storybook-documented components, TypeScript-first, MUI-powered.',
+    backgroundGradient: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
+    actions: [
+      { label: 'Browse Storybook', variant: 'primary', buttonSize: 'large' },
+      { label: 'GitHub', variant: 'text', buttonSize: 'large' },
+    ],
+  },
+];
+
+const imageSlides: HeroSlide[] = [
+  {
+    title: 'Connect Talent with Opportunity',
+    subtitle: 'WorkMacha bridges restaurant owners and culinary students for short-term gigs.',
+    backgroundImage: 'https://images.unsplash.com/photo-1414235077428-338989a2e8c0?w=1400&q=80',
+    overlayOpacity: 0.55,
+    actions: [
+      { label: 'Post a Job', variant: 'primary', buttonSize: 'large' },
+      { label: 'Find Work', variant: 'outlined', buttonSize: 'large' },
+    ],
+  },
+  {
+    title: 'Build Your Culinary Portfolio',
+    subtitle: 'Every gig you complete earns a verified certificate you can share with employers.',
+    backgroundImage: 'https://images.unsplash.com/photo-1556910103-1c02745aec4b?w=1400&q=80',
+    overlayOpacity: 0.55,
+    actions: [
+      { label: 'Browse Jobs', variant: 'primary', buttonSize: 'large' },
+    ],
+  },
+  {
+    title: 'Hire the Right Talent, Fast',
+    subtitle: 'Verified culinary students available for shifts, events, and pop-ups.',
+    backgroundImage: 'https://images.unsplash.com/photo-1590846406792-0adc7f938f1d?w=1400&q=80',
+    overlayOpacity: 0.5,
+    actions: [
+      { label: 'Start Hiring', variant: 'primary', buttonSize: 'large' },
+    ],
+  },
+];
+
+// ─── Meta ────────────────────────────────────────────────────────────────────
+
+const meta: Meta<typeof HeroSlideshow> = {
+  title: 'Blocks/HeroSlideshow',
+  component: HeroSlideshow,
+  decorators: [
+    (Story) => (
+      <QwickApp appName="Storybook" appId="storybook" enableScaffolding={false}>
+        <Story />
+      </QwickApp>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    autoPlayInterval: {
+      control: { type: 'number', min: 0, max: 10000, step: 500 },
+      description: 'Auto-advance interval in ms. Set to 0 to disable.',
+    },
+    showDots: { control: 'boolean' },
+    blockHeight: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large', 'viewport'],
+    },
+    textAlign: {
+      control: { type: 'select' },
+      options: ['left', 'center', 'right'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HeroSlideshow>;
+
+// ─── Stories ─────────────────────────────────────────────────────────────────
+
+export const GradientSlides: Story = {
+  name: 'Gradient slides (props-driven)',
+  args: {
+    slides: gradientSlides,
+    autoPlayInterval: 4000,
+    showDots: true,
+    blockHeight: 'large',
+    textAlign: 'center',
+  },
+};
+
+export const ImageSlides: Story = {
+  name: 'Image slides (WorkMacha style)',
+  args: {
+    slides: imageSlides,
+    autoPlayInterval: 5000,
+    showDots: true,
+    blockHeight: 'large',
+    textAlign: 'center',
+  },
+};
+
+export const SingleSlide: Story = {
+  name: 'Single slide (no dots, no auto-play)',
+  args: {
+    slides: [gradientSlides[0]],
+    autoPlayInterval: 0,
+    showDots: false,
+    blockHeight: 'medium',
+    textAlign: 'center',
+  },
+};
+
+export const SlowAutoPlay: Story = {
+  name: 'Slow auto-play (8 second interval)',
+  args: {
+    slides: gradientSlides,
+    autoPlayInterval: 8000,
+    showDots: true,
+    blockHeight: 'medium',
+  },
+};
+
+export const LeftAligned: Story = {
+  name: 'Left-aligned content',
+  args: {
+    slides: imageSlides,
+    autoPlayInterval: 5000,
+    showDots: true,
+    blockHeight: 'large',
+    textAlign: 'left',
+  },
+};

package/src/stories/ProductCard.stories.tsx

@@ -13,7 +13,7 @@ import { ProductCard } from '../components/blocks/ProductCard';
 import { GridLayout } from '../components/layout';
 import QwickApp from '../components/QwickApp';
 
-// Sample product data
+// Sample software product data
 const sampleProducts: Product[] = [
  {
  id: 'qwickapps-react-framework',
@@ -70,6 +70,58 @@ const sampleProducts: Product[] = [
  }
 ];
 
+// Sample e-commerce product data
+const sampleEcommerceProducts: Product[] = [
+ {
+ id: 'organic-cotton-tshirt',
+ name: 'Organic Cotton T-Shirt',
+ category: 'Mens Clothing',
+ description: 'Premium organic cotton t-shirt with sustainable manufacturing',
+ status: 'launched',
+ image: 'https://via.placeholder.com/400x280/4caf50/ffffff?text=Organic+T-Shirt',
+ price: 29.99,
+ rating: 4.5,
+ reviewCount: 128,
+ isNew: true
+ },
+ {
+ id: 'denim-jacket',
+ name: 'Classic Denim Jacket',
+ category: 'Outerwear',
+ description: 'Timeless denim jacket with modern fit',
+ status: 'launched',
+ image: 'https://via.placeholder.com/400x280/2196f3/ffffff?text=Denim+Jacket',
+ price: 89.99,
+ salePrice: 67.49,
+ rating: 4.8,
+ reviewCount: 256
+ },
+ {
+ id: 'running-shoes',
+ name: 'Performance Running Shoes',
+ category: 'Footwear',
+ description: 'Lightweight running shoes with advanced cushioning',
+ status: 'launched',
+ image: 'https://via.placeholder.com/400x280/ff5722/ffffff?text=Running+Shoes',
+ price: 119.99,
+ rating: 4.6,
+ reviewCount: 89,
+ isNew: true
+ },
+ {
+ id: 'leather-wallet',
+ name: 'Genuine Leather Wallet',
+ category: 'Accessories',
+ description: 'Handcrafted leather wallet with RFID protection',
+ status: 'launched',
+ image: 'https://via.placeholder.com/400x280/795548/ffffff?text=Leather+Wallet',
+ price: 45.00,
+ salePrice: 36.00,
+ rating: 4.9,
+ reviewCount: 342
+ }
+];
+
 // Sample CMS data for data binding stories
 const sampleCmsData = {
  'products': {
@@ -501,4 +553,102 @@ export const EmptyAndLoadingStates: Story = {
  },
  },
  },
+};
+
+// E-commerce Product Examples
+export const EcommerceProducts: Story = {
+ render: () => (
+ <QwickApp appId="productcard-ecommerce" appName='E-commerce ProductCard'>
+ <Box>
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
+ <Typography variant="h5" gutterBottom>🛍️ E-commerce Products</Typography>
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+ ProductCard automatically detects e-commerce products (those with price field) and renders appropriate layout with price, rating, and badges.
+ </Typography>
+ </Box>
+
+ <GridLayout columns={4} spacing="large" equalHeight>
+ {sampleEcommerceProducts.map((product) => (
+ <ProductCard
+ key={product.id}
+ product={product}
+ variant="compact"
+ />
+ ))}
+ </GridLayout>
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'E-commerce products display price, rating, category badge, and NEW/discount badges automatically.',
+ },
+ },
+ },
+};
+
+export const EcommerceDetailed: Story = {
+ render: () => (
+ <QwickApp appId="productcard-ecommerce-detailed" appName='Detailed E-commerce ProductCard'>
+ <Box>
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
+ <Typography variant="h5" gutterBottom>Detailed E-commerce View</Typography>
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+ Detailed variant for e-commerce products.
+ </Typography>
+ </Box>
+
+ <ProductCard
+ product={sampleEcommerceProducts[1]}
+ variant="detailed"
+ />
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Detailed e-commerce product showing sale price with discount badge.',
+ },
+ },
+ },
+};
+
+export const MixedProductTypes: Story = {
+ render: () => (
+ <QwickApp appId="productcard-mixed" appName='Mixed Product Types'>
+ <Box>
+ <Box sx={{ p: 4, backgroundColor: 'background.paper' }}>
+ <Typography variant="h5" gutterBottom>🔀 Mixed Product Types</Typography>
+ <Typography variant="body1" sx={{ mb: 3, opacity: 0.8 }}>
+ ProductCard seamlessly handles both software and e-commerce products in the same grid.
+ </Typography>
+ </Box>
+
+ <GridLayout columns={3} spacing="large" equalHeight>
+ <ProductCard
+ product={sampleProducts[0]}
+ variant="compact"
+ maxFeaturesCompact={2}
+ />
+ <ProductCard
+ product={sampleEcommerceProducts[0]}
+ variant="compact"
+ />
+ <ProductCard
+ product={sampleEcommerceProducts[1]}
+ variant="compact"
+ />
+ </GridLayout>
+ </Box>
+ </QwickApp>
+ ),
+ parameters: {
+ docs: {
+ description: {
+ story: 'Software products show features/technologies while e-commerce products show price/rating - all using the same ProductCard component.',
+ },
+ },
+ },
 };