@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/release-notes/ReleaseNotes.stories.tsx

@@ -0,0 +1,431 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ReleaseNotes, defaultReleases } from './index'
+import type { Release, ChangeItem, Contributor, ChangeType, ReleaseType, ReleaseStatus } from './index'
+import * as React from 'react'
+
+const meta: Meta<typeof ReleaseNotes> = {
+  title: 'Blocks/ReleaseNotes',
+  component: ReleaseNotes,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A release notes component for managing and displaying software releases with changelog, contributors, filtering, and publishing workflow.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    showEditor: {
+      control: 'boolean',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof ReleaseNotes>
+
+export const Default: Story = {
+  render: () => (
+    <div className="p-6">
+      <ReleaseNotes
+        releases={defaultReleases}
+        onCreateRelease={() => console.log('Create release')}
+        onEditRelease={(release) => console.log('Edit:', release)}
+        onPublishRelease={(release) => console.log('Publish:', release)}
+      />
+    </div>
+  ),
+}
+
+export const SingleRelease: Story = {
+  render: () => (
+    <div className="p-6">
+      <ReleaseNotes
+        releases={[defaultReleases[0]]}
+        onEditRelease={(release) => console.log('Edit:', release)}
+      />
+    </div>
+  ),
+}
+
+export const ManyReleases: Story = {
+  render: () => {
+    const manyReleases: Release[] = [
+      ...defaultReleases,
+      {
+        id: '4',
+        version: 'v2.4.0',
+        releaseType: 'minor',
+        status: 'published',
+        publishedAt: new Date(Date.now() - 30 * 24 * 3600000),
+        createdAt: new Date(Date.now() - 32 * 24 * 3600000),
+        contributors: [],
+        changes: [
+          { id: 'c14', type: 'feature', title: 'Added export to CSV functionality' },
+          { id: 'c15', type: 'improvement', title: 'Improved table sorting performance' },
+        ],
+      },
+      {
+        id: '5',
+        version: 'v2.3.2',
+        releaseType: 'patch',
+        status: 'published',
+        publishedAt: new Date(Date.now() - 45 * 24 * 3600000),
+        createdAt: new Date(Date.now() - 46 * 24 * 3600000),
+        contributors: [],
+        changes: [
+          { id: 'c16', type: 'fix', title: 'Fixed tooltip position on mobile' },
+        ],
+      },
+      {
+        id: '6',
+        version: 'v2.3.1',
+        releaseType: 'patch',
+        status: 'published',
+        publishedAt: new Date(Date.now() - 60 * 24 * 3600000),
+        createdAt: new Date(Date.now() - 61 * 24 * 3600000),
+        contributors: [],
+        changes: [
+          { id: 'c17', type: 'fix', title: 'Fixed login redirect issue' },
+          { id: 'c18', type: 'fix', title: 'Fixed form validation messages' },
+        ],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes
+          releases={manyReleases}
+          onCreateRelease={() => console.log('Create release')}
+        />
+      </div>
+    )
+  },
+}
+
+export const WithBreakingChanges: Story = {
+  render: () => {
+    const breakingRelease: Release = {
+      id: 'breaking',
+      version: 'v4.0.0',
+      name: 'Major Update',
+      releaseType: 'major',
+      status: 'published',
+      publishedAt: new Date(),
+      createdAt: new Date(Date.now() - 7 * 24 * 3600000),
+      summary: 'This major release contains breaking changes. Please review the upgrade notes carefully.',
+      upgradeNotes: 'Before upgrading, ensure you have migrated all deprecated API calls to the new format. Database schema changes are required - run the migration script before deploying.',
+      contributors: [
+        { id: '1', name: 'John Doe', username: 'johndoe' },
+        { id: '2', name: 'Jane Smith', username: 'janesmith' },
+      ],
+      changes: [
+        {
+          id: 'b1',
+          type: 'breaking',
+          title: 'Removed deprecated v1 API endpoints',
+          description: 'All v1 endpoints have been removed. Use v2 endpoints instead.',
+          breaking: true,
+        },
+        {
+          id: 'b2',
+          type: 'breaking',
+          title: 'Changed authentication token format',
+          description: 'Tokens now use JWT format. Old tokens will be invalidated on upgrade.',
+          breaking: true,
+        },
+        {
+          id: 'b3',
+          type: 'feature',
+          title: 'New plugin architecture',
+          description: 'Extensible plugin system for custom integrations',
+        },
+        {
+          id: 'b4',
+          type: 'security',
+          title: 'Enhanced encryption for sensitive data',
+        },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes releases={[breakingRelease]} />
+      </div>
+    )
+  },
+}
+
+export const DraftRelease: Story = {
+  render: () => {
+    const draftRelease: Release = {
+      id: 'draft',
+      version: 'v2.6.0',
+      name: 'Upcoming Release',
+      releaseType: 'minor',
+      status: 'draft',
+      createdAt: new Date(),
+      contributors: [
+        { id: '1', name: 'John Doe', username: 'johndoe' },
+      ],
+      changes: [
+        { id: 'd1', type: 'feature', title: 'New feature in progress' },
+        { id: 'd2', type: 'improvement', title: 'Performance improvements' },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes
+          releases={[draftRelease]}
+          onEditRelease={(release) => console.log('Edit:', release)}
+          onPublishRelease={(release) => console.log('Publish:', release)}
+        />
+      </div>
+    )
+  },
+}
+
+export const ScheduledRelease: Story = {
+  render: () => {
+    const scheduledRelease: Release = {
+      id: 'scheduled',
+      version: 'v2.5.1',
+      releaseType: 'patch',
+      status: 'scheduled',
+      scheduledAt: new Date(Date.now() + 3 * 24 * 3600000),
+      createdAt: new Date(),
+      contributors: [],
+      changes: [
+        { id: 's1', type: 'fix', title: 'Bug fix for date handling' },
+        { id: 's2', type: 'fix', title: 'Fixed memory leak in background worker' },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes
+          releases={[scheduledRelease]}
+          onEditRelease={(release) => console.log('Edit:', release)}
+        />
+      </div>
+    )
+  },
+}
+
+export const AllChangeTypes: Story = {
+  render: () => {
+    const allTypesRelease: Release = {
+      id: 'all-types',
+      version: 'v3.0.0',
+      releaseType: 'major',
+      status: 'published',
+      publishedAt: new Date(),
+      createdAt: new Date(Date.now() - 7 * 24 * 3600000),
+      contributors: [
+        { id: '1', name: 'Developer', username: 'dev' },
+      ],
+      changes: [
+        { id: 't1', type: 'feature', title: 'New authentication module', description: 'Added OAuth2 and SAML support' },
+        { id: 't2', type: 'fix', title: 'Fixed login redirect loop' },
+        { id: 't3', type: 'improvement', title: 'Improved dashboard loading speed' },
+        { id: 't4', type: 'breaking', title: 'Changed API response format', breaking: true },
+        { id: 't5', type: 'security', title: 'Patched XSS vulnerability in comments' },
+        { id: 't6', type: 'performance', title: 'Reduced bundle size by 40%' },
+        { id: 't7', type: 'docs', title: 'Updated API documentation' },
+        { id: 't8', type: 'deprecation', title: 'Deprecated legacy theme system' },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes releases={[allTypesRelease]} />
+      </div>
+    )
+  },
+}
+
+export const WithPullRequests: Story = {
+  render: () => {
+    const prRelease: Release = {
+      id: 'pr-release',
+      version: 'v2.5.2',
+      releaseType: 'patch',
+      status: 'published',
+      publishedAt: new Date(),
+      createdAt: new Date(Date.now() - 2 * 24 * 3600000),
+      compareUrl: 'https://github.com/example/repo/compare/v2.5.1...v2.5.2',
+      contributors: [
+        { id: '1', name: 'Alice', username: 'alice' },
+        { id: '2', name: 'Bob', username: 'bob' },
+      ],
+      changes: [
+        {
+          id: 'pr1',
+          type: 'fix',
+          title: 'Fixed date picker timezone issue',
+          pullRequest: { number: 456, url: 'https://github.com/example/repo/pull/456' },
+          contributors: [{ id: '1', name: 'Alice', username: 'alice' }],
+        },
+        {
+          id: 'pr2',
+          type: 'fix',
+          title: 'Fixed modal close animation',
+          pullRequest: { number: 458, url: 'https://github.com/example/repo/pull/458' },
+          contributors: [{ id: '2', name: 'Bob', username: 'bob' }],
+        },
+      ],
+    }
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes releases={[prRelease]} />
+      </div>
+    )
+  },
+}
+
+export const EmptyState: Story = {
+  render: () => (
+    <div className="p-6">
+      <ReleaseNotes
+        releases={[]}
+        onCreateRelease={() => console.log('Create first release')}
+      />
+    </div>
+  ),
+}
+
+export const ReadOnly: Story = {
+  render: () => (
+    <div className="p-6">
+      <ReleaseNotes releases={defaultReleases} />
+    </div>
+  ),
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [releases, setReleases] = React.useState<Release[]>(defaultReleases)
+
+    const handleCreateRelease = () => {
+      const newRelease: Release = {
+        id: `release-${Date.now()}`,
+        version: 'v2.6.0',
+        releaseType: 'minor',
+        status: 'draft',
+        createdAt: new Date(),
+        contributors: [],
+        changes: [],
+      }
+      setReleases(prev => [newRelease, ...prev])
+      alert('New draft release created!')
+    }
+
+    const handlePublish = (release: Release) => {
+      setReleases(prev =>
+        prev.map(r =>
+          r.id === release.id
+            ? { ...r, status: 'published' as ReleaseStatus, publishedAt: new Date() }
+            : r
+        )
+      )
+      alert(`Published ${release.version}!`)
+    }
+
+    const handleEdit = (release: Release) => {
+      alert(`Editing ${release.version}...`)
+    }
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes
+          releases={releases}
+          onCreateRelease={handleCreateRelease}
+          onEditRelease={handleEdit}
+          onPublishRelease={handlePublish}
+        />
+      </div>
+    )
+  },
+}
+
+export const ProjectChangelog: Story = {
+  render: () => (
+    <div className="min-h-screen bg-muted/30">
+      <header className="bg-background border-b px-6 py-4">
+        <div className="flex items-center justify-between max-w-5xl mx-auto">
+          <div>
+            <h1 className="font-bold text-xl">Changelog</h1>
+            <p className="text-sm text-muted-foreground">@wakastellar/ui</p>
+          </div>
+          <nav className="flex gap-4 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">Documentation</a>
+            <a href="#" className="text-foreground font-medium">Changelog</a>
+            <a href="#" className="text-muted-foreground hover:text-foreground">GitHub</a>
+          </nav>
+        </div>
+      </header>
+      <main className="max-w-5xl mx-auto p-6">
+        <ReleaseNotes releases={defaultReleases} />
+      </main>
+    </div>
+  ),
+}
+
+export const WithFilters: Story = {
+  render: () => {
+    const mixedReleases: Release[] = [
+      {
+        id: '1',
+        version: 'v3.0.0-beta.2',
+        releaseType: 'prerelease',
+        status: 'draft',
+        createdAt: new Date(),
+        contributors: [],
+        changes: [{ id: 'c1', type: 'feature', title: 'Beta feature' }],
+      },
+      {
+        id: '2',
+        version: 'v2.5.0',
+        releaseType: 'minor',
+        status: 'published',
+        publishedAt: new Date(Date.now() - 7 * 24 * 3600000),
+        createdAt: new Date(Date.now() - 10 * 24 * 3600000),
+        contributors: [],
+        changes: [{ id: 'c2', type: 'feature', title: 'New feature' }],
+      },
+      {
+        id: '3',
+        version: 'v2.4.1',
+        releaseType: 'patch',
+        status: 'published',
+        publishedAt: new Date(Date.now() - 14 * 24 * 3600000),
+        createdAt: new Date(Date.now() - 15 * 24 * 3600000),
+        contributors: [],
+        changes: [{ id: 'c3', type: 'fix', title: 'Bug fix' }],
+      },
+      {
+        id: '4',
+        version: 'v2.0.0',
+        releaseType: 'major',
+        status: 'published',
+        publishedAt: new Date(Date.now() - 60 * 24 * 3600000),
+        createdAt: new Date(Date.now() - 65 * 24 * 3600000),
+        contributors: [],
+        changes: [{ id: 'c4', type: 'breaking', title: 'Breaking change', breaking: true }],
+      },
+    ]
+
+    return (
+      <div className="p-6">
+        <ReleaseNotes
+          releases={mixedReleases}
+          onCreateRelease={() => console.log('Create')}
+        />
+      </div>
+    )
+  },
+}