nandi.uk
This repository has no description
6.8 kB
189 lines
1import type { Meta, StoryObj } from '@storybook/nextjs-vite';
2import { CollectionAccessType } from '@semble/types';
3import type { Collection } from '@semble/types';
4import TextCard from './TextCard';
5import { AuthContext } from '@/hooks/useAuth';
6import type { AuthContextType } from '@/hooks/useAuth';
7
8const mockAuthUser = {
9 id: 'did:plc:mock123',
10 name: 'Test User',
11 handle: 'test.user',
12 avatarUrl: 'https://i.pravatar.cc/150?u=testuser',
13};
14
15const mockAuthValue: AuthContextType = {
16 user: mockAuthUser as any,
17 isAuthenticated: true,
18 isLoading: false,
19 refreshAuth: async () => {},
20 logout: async () => {},
21};
22
23const cardAuthor = {
24 id: 'did:plc:author456',
25 name: 'Jane Researcher',
26 handle: 'jane.researcher',
27 avatarUrl: 'https://i.pravatar.cc/150?u=jane',
28 description: 'Science writer and open-access advocate.',
29 followerCount: 214,
30 followingCount: 63,
31};
32
33const baseCollection: Collection = {
34 id: 'col-story-001',
35 uri: 'at://did:plc:colauthor789/app.semble.collection/3juzt2xkr5c2a',
36 name: 'Research Notes',
37 author: {
38 id: 'did:plc:colauthor789',
39 name: 'Alex Curator',
40 handle: 'alex.curator',
41 avatarUrl: 'https://i.pravatar.cc/150?u=alex',
42 },
43 description: 'A curated collection of research notes and insights.',
44 accessType: CollectionAccessType.CLOSED,
45 cardCount: 24,
46 createdAt: '2024-09-15T12:00:00.000Z',
47 updatedAt: '2025-06-20T09:30:00.000Z',
48 isFollowing: false,
49 followerCount: 31,
50};
51
52const baseCardContent = {
53 url: 'https://example.com/article-1',
54 title: 'How to Actually Enjoy Cooking at Home',
55 siteName: 'The Kitchn',
56 type: 'article',
57 retrievedAt: '2025-06-01T10:00:00.000Z',
58};
59
60const meta: Meta<typeof TextCard> = {
61 title: 'Features/Cards/TextCard',
62 component: TextCard,
63 decorators: [
64 (Story) => (
65 <AuthContext value={mockAuthValue}>
66 <div style={{ maxWidth: 360 }}>
67 <Story />
68 </div>
69 </AuthContext>
70 ),
71 ],
72 args: {
73 id: 'card-txt-001',
74 cardContent: baseCardContent,
75 urlLibraryCount: 5,
76 urlIsInLibrary: false,
77 urlConnectionCount: 2,
78 urlIsConnected: false,
79 },
80};
81
82export default meta;
83
84type Story = StoryObj<typeof TextCard>;
85
86export const Default: Story = {
87 args: {
88 text: "<p>The trick to enjoying cooking is to stop treating every meal like a project. Pick three recipes you actually like, rotate them during the week, and save the experiments for weekends when there's no pressure.</p>",
89 },
90};
91
92export const RichFormatting: Story = {
93 args: {
94 id: 'card-txt-rich',
95 text: `<h3>Things I Changed This Year</h3>
96<p>I finally stopped buying groceries without a <strong>rough plan</strong> for the week. It sounds obvious, but it cut my food waste in <em>half</em>.</p>
97<ul>
98 <li>Check what's already in the <strong>fridge</strong> before shopping</li>
99 <li>Buy versatile ingredients that work in multiple meals</li>
100 <li>Freeze anything you won't use in two days</li>
101</ul>
102<blockquote>
103 <p>"The best meal plan is the one you actually stick to."</p>
104</blockquote>
105<p>Also started keeping a running note on my phone with a list of <code>go-to meals</code> so I never blank at the store again.</p>`,
106 cardContent: {
107 ...baseCardContent,
108 url: 'https://example.com/simple-meal-planning',
109 title: 'Simple Meal Planning for Busy People',
110 siteName: 'Budget Bytes',
111 },
112 },
113};
114
115export const LongText: Story = {
116 args: {
117 id: 'card-txt-long',
118 text: `<p>I've been thinking a lot about how we pick up habits without realizing it. Most of the things I do every morning — checking my phone, making coffee in a specific order, even the route I walk to the train — started without any conscious decision.</p>
119<p>What's interesting is that <strong>small disruptions</strong> to routine can feel weirdly unsettling. When my usual coffee shop closed for renovation last month, it threw off my whole morning for a week. I started arriving at work later and feeling groggy until noon.</p>
120<p>Eventually I found a new place two blocks further, and now I actually prefer it. The walk is longer but I pass through a park, which turns out to be a much nicer way to start the day than staring at traffic.</p>
121<p>The lesson I keep re-learning: the things that feel like inconveniences in the moment often push you toward something better, but only if you let them.</p>
122<p>I wonder how many other parts of my routine could use a gentle shake-up. Maybe it's time to audit the defaults I've been living on autopilot.</p>`,
123 cardContent: {
124 ...baseCardContent,
125 url: 'https://example.com/daily-habits',
126 title: 'The Hidden Power of Everyday Routines',
127 siteName: 'Psyche Magazine',
128 },
129 },
130};
131
132export const InLibrary: Story = {
133 args: {
134 id: 'card-txt-library',
135 urlIsInLibrary: true,
136 urlLibraryCount: 42,
137 text: '<p>This is a really solid breakdown of how to organize a small apartment. The bit about <strong>vertical storage</strong> in the kitchen freed up so much counter space when I tried it at home.</p>',
138 cardContent: {
139 ...baseCardContent,
140 url: 'https://example.com/small-space-living',
141 title: 'Making the Most of a Small Kitchen',
142 siteName: 'Apartment Therapy',
143 },
144 },
145};
146
147export const Connected: Story = {
148 args: {
149 id: 'card-txt-connected',
150 urlIsConnected: true,
151 urlConnectionCount: 8,
152 text: "<p>I like how this frames budgeting not as restriction but as <em>clarity</em>. Knowing where your money goes each month isn't about cutting fun — it's about making sure the fun stuff is actually what you'd choose on purpose.</p>",
153 cardContent: {
154 ...baseCardContent,
155 url: 'https://example.com/budgeting-mindset',
156 title: 'A Healthier Way to Think About Money',
157 siteName: 'The Financial Diet',
158 },
159 },
160};
161
162export const WithCollection: Story = {
163 args: {
164 id: 'card-txt-collection',
165 currentCollection: baseCollection,
166 cardAuthor: cardAuthor,
167 authorHandle: cardAuthor.handle,
168 text: "<p>Great advice in here about running a book club that people actually show up to. The key is keeping it casual — pick shorter books, don't guilt people for not finishing, and always have <strong>snacks</strong>.</p>",
169 cardContent: {
170 ...baseCardContent,
171 url: 'https://example.com/book-club-tips',
172 title: 'How to Run a Book Club That Lasts',
173 siteName: 'Literary Hub',
174 },
175 },
176};
177
178export const ShortText: Story = {
179 args: {
180 id: 'card-txt-short',
181 text: '<p>The photos in this one are gorgeous.</p>',
182 cardContent: {
183 ...baseCardContent,
184 url: 'https://example.com/travel-photos',
185 title: 'A Weekend in the Cotswolds',
186 siteName: 'Condé Nast Traveller',
187 },
188 },
189};