@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/footer/Footer.stories.tsx

@@ -0,0 +1,328 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Footer } from './index'
+import type { FooterColumn, SocialLink } from './index'
+import * as React from 'react'
+
+const defaultColumns: FooterColumn[] = [
+  {
+    title: 'Produit',
+    links: [
+      { label: 'Fonctionnalités', href: '/features' },
+      { label: 'Tarifs', href: '/pricing' },
+      { label: 'Documentation', href: '/docs' },
+      { label: 'Changelog', href: '/changelog' },
+    ],
+  },
+  {
+    title: 'Entreprise',
+    links: [
+      { label: 'À propos', href: '/about' },
+      { label: 'Blog', href: '/blog' },
+      { label: 'Carrières', href: '/careers' },
+      { label: 'Presse', href: '/press' },
+    ],
+  },
+  {
+    title: 'Ressources',
+    links: [
+      { label: 'Communauté', href: '/community' },
+      { label: 'Contact', href: '/contact' },
+      { label: 'Support', href: '/support' },
+      { label: 'Status', href: '/status' },
+    ],
+  },
+]
+
+const defaultSocialLinks: SocialLink[] = [
+  { platform: 'github', url: 'https://github.com' },
+  { platform: 'twitter', url: 'https://twitter.com' },
+  { platform: 'linkedin', url: 'https://linkedin.com' },
+  { platform: 'email', url: 'mailto:contact@example.com' },
+]
+
+const meta: Meta<typeof Footer> = {
+  title: 'Blocks/Footer',
+  component: Footer,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A responsive footer with link columns, social links, and copyright information.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Footer>
+
+export const Default: Story = {
+  render: () => (
+    <Footer
+      columns={defaultColumns}
+      socialLinks={defaultSocialLinks}
+      copyright="© 2024 Wakastart. Tous droits réservés."
+    />
+  ),
+}
+
+export const WithAllSections: Story = {
+  render: () => (
+    <Footer
+      columns={defaultColumns}
+      socialLinks={defaultSocialLinks}
+      copyright="© 2024 MyCompany Inc. All rights reserved."
+    />
+  ),
+}
+
+export const TwoColumns: Story = {
+  render: () => (
+    <Footer
+      columns={defaultColumns.slice(0, 2)}
+      socialLinks={defaultSocialLinks}
+      copyright="© 2024 Company. All rights reserved."
+    />
+  ),
+}
+
+export const NoSocialLinks: Story = {
+  render: () => (
+    <Footer
+      columns={defaultColumns}
+      copyright="© 2024 Company. All rights reserved."
+    />
+  ),
+}
+
+export const OnlySocialLinks: Story = {
+  render: () => (
+    <Footer
+      socialLinks={defaultSocialLinks}
+      copyright="© 2024 Minimal Footer Inc."
+    />
+  ),
+}
+
+export const MinimalFooter: Story = {
+  render: () => (
+    <Footer
+      copyright="© 2024 Simple Company. All rights reserved."
+    />
+  ),
+}
+
+export const ManyColumns: Story = {
+  render: () => {
+    const manyColumns: FooterColumn[] = [
+      ...defaultColumns,
+      {
+        title: 'Légal',
+        links: [
+          { label: 'Politique de confidentialité', href: '/privacy' },
+          { label: 'Conditions d\'utilisation', href: '/terms' },
+          { label: 'Cookies', href: '/cookies' },
+          { label: 'RGPD', href: '/gdpr' },
+        ],
+      },
+    ]
+
+    return (
+      <Footer
+        columns={manyColumns}
+        socialLinks={defaultSocialLinks}
+        copyright="© 2024 Enterprise Corp. All rights reserved."
+      />
+    )
+  },
+}
+
+export const LongLinks: Story = {
+  render: () => {
+    const longColumns: FooterColumn[] = [
+      {
+        title: 'Navigation principale',
+        links: [
+          { label: 'Accueil et présentation générale', href: '/' },
+          { label: 'Nos services professionnels', href: '/services' },
+          { label: 'Études de cas et témoignages clients', href: '/case-studies' },
+          { label: 'Demander une démonstration gratuite', href: '/demo' },
+        ],
+      },
+      {
+        title: 'Support et aide',
+        links: [
+          { label: 'Centre d\'aide et FAQ', href: '/help' },
+          { label: 'Documentation technique complète', href: '/docs' },
+          { label: 'Contacter notre équipe support', href: '/contact' },
+        ],
+      },
+    ]
+
+    return (
+      <Footer
+        columns={longColumns}
+        socialLinks={defaultSocialLinks}
+        copyright="© 2024 Long Links Company."
+      />
+    )
+  },
+}
+
+export const InPageContext: Story = {
+  render: () => (
+    <div className="min-h-screen flex flex-col">
+      <main className="flex-1 p-8">
+        <div className="max-w-4xl mx-auto">
+          <h1 className="text-4xl font-bold mb-4">Page Content</h1>
+          <p className="text-muted-foreground mb-4">
+            This example shows the footer in the context of a full page layout.
+            The footer sticks to the bottom of the page.
+          </p>
+          <div className="space-y-4">
+            {[1, 2, 3].map((i) => (
+              <div key={i} className="p-6 border rounded-lg">
+                <h2 className="text-xl font-semibold mb-2">Section {i}</h2>
+                <p className="text-muted-foreground">
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      </main>
+      <Footer
+        columns={defaultColumns}
+        socialLinks={defaultSocialLinks}
+        copyright="© 2024 Wakastart. Tous droits réservés."
+      />
+    </div>
+  ),
+}
+
+export const DarkVariant: Story = {
+  render: () => (
+    <div className="dark">
+      <div className="bg-background text-foreground">
+        <div className="p-8">
+          <h1 className="text-2xl font-bold mb-4">Dark Mode Footer</h1>
+          <p className="text-muted-foreground mb-8">
+            The footer adapts to dark mode automatically.
+          </p>
+        </div>
+        <Footer
+          columns={defaultColumns}
+          socialLinks={defaultSocialLinks}
+          copyright="© 2024 Dark Mode Inc."
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const CustomCopyright: Story = {
+  render: () => (
+    <Footer
+      columns={defaultColumns.slice(0, 2)}
+      socialLinks={defaultSocialLinks.slice(0, 2)}
+      copyright="Made with ❤️ by the Wakastart team. © 2020-2024"
+    />
+  ),
+}
+
+export const EcommerceFooter: Story = {
+  render: () => {
+    const ecommerceColumns: FooterColumn[] = [
+      {
+        title: 'Boutique',
+        links: [
+          { label: 'Nouveautés', href: '/new' },
+          { label: 'Promotions', href: '/sales' },
+          { label: 'Meilleures ventes', href: '/bestsellers' },
+          { label: 'Toutes les catégories', href: '/categories' },
+        ],
+      },
+      {
+        title: 'Service client',
+        links: [
+          { label: 'Suivi de commande', href: '/tracking' },
+          { label: 'Retours et remboursements', href: '/returns' },
+          { label: 'Livraison', href: '/shipping' },
+          { label: 'FAQ', href: '/faq' },
+        ],
+      },
+      {
+        title: 'Mon compte',
+        links: [
+          { label: 'Connexion', href: '/login' },
+          { label: 'Créer un compte', href: '/register' },
+          { label: 'Mes commandes', href: '/orders' },
+          { label: 'Liste de souhaits', href: '/wishlist' },
+        ],
+      },
+    ]
+
+    return (
+      <Footer
+        columns={ecommerceColumns}
+        socialLinks={defaultSocialLinks}
+        copyright="© 2024 ShopMax. Tous droits réservés."
+      />
+    )
+  },
+}
+
+export const SaaSFooter: Story = {
+  render: () => {
+    const saasColumns: FooterColumn[] = [
+      {
+        title: 'Product',
+        links: [
+          { label: 'Features', href: '/features' },
+          { label: 'Integrations', href: '/integrations' },
+          { label: 'Pricing', href: '/pricing' },
+          { label: 'Changelog', href: '/changelog' },
+          { label: 'Roadmap', href: '/roadmap' },
+        ],
+      },
+      {
+        title: 'Developers',
+        links: [
+          { label: 'API Reference', href: '/api' },
+          { label: 'SDKs', href: '/sdks' },
+          { label: 'Webhooks', href: '/webhooks' },
+          { label: 'Status Page', href: '/status' },
+        ],
+      },
+      {
+        title: 'Resources',
+        links: [
+          { label: 'Documentation', href: '/docs' },
+          { label: 'Guides', href: '/guides' },
+          { label: 'Blog', href: '/blog' },
+          { label: 'Community', href: '/community' },
+        ],
+      },
+      {
+        title: 'Company',
+        links: [
+          { label: 'About', href: '/about' },
+          { label: 'Careers', href: '/careers' },
+          { label: 'Contact', href: '/contact' },
+          { label: 'Partners', href: '/partners' },
+        ],
+      },
+    ]
+
+    return (
+      <Footer
+        columns={saasColumns}
+        socialLinks={defaultSocialLinks}
+        copyright="© 2024 SaaS Platform Inc. All rights reserved."
+      />
+    )
+  },
+}