Add recipe list component

.storybook/main.ts

@@ -1,19 +1,23 @@
-import type { StorybookConfig } from "@storybook/nextjs";
+import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
-  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+    {
+      name: '@storybook/addon-styling',
+      options: {},
+    },
   ],
   framework: {
-    name: "@storybook/nextjs",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
-    autodocs: "tag",
+    autodocs: 'tag',
   },
 };
 export default config;

.storybook/preview.ts

@@ -1,15 +1,31 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from '@storybook/react';
+
+import { withThemeByClassName } from '@storybook/addon-styling';
+
+import '../src/app/globals.css';
 
 const preview: Preview = {
   parameters: {
-    actions: { argTypesRegex: "^on[A-Z].*" },
+    actions: { argTypesRegex: '^on[A-Z].*' },
     controls: {
       matchers: {
         color: /(background|color)$/i,
         date: /Date$/,
       },
     },
   },
+
+  decorators: [
+    // Adds theme switching support.
+    // NOTE: requires setting "darkMode" to "class" in your tailwind config
+    withThemeByClassName({
+      themes: {
+        light: 'light',
+        dark: 'dark',
+      },
+      defaultTheme: 'light',
+    }),
+  ],
 };
 
 export default preview;

package.json

@@ -39,6 +39,7 @@
     "@storybook/addon-interactions": "^7.1.1",
     "@storybook/addon-links": "^7.1.1",
     "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/addon-styling": "^1.3.5",
     "@storybook/blocks": "^7.1.1",
     "@storybook/nextjs": "^7.1.1",
     "@storybook/react": "^7.1.1",

src/app/page.tsx

@@ -1,5 +1,6 @@
 import { PrismaClient } from '@prisma/client'
-import Link from 'next/link'
+import { RecipeListItem } from '@/components/recipe-list-item/recipe-list-item'
+import { RecipeList } from '@/components/recipe-list/recipe-list'
 import { Search } from '@/components/search/search'
 
 const prisma = new PrismaClient()
@@ -17,15 +18,15 @@ export default async function Home() {
         <Search />
       </div>
 
-      <div>
+      <RecipeList>
         {recipes.map((recipe) => (
-          <div key={recipe.id} className="flex place-items-center">
-            <Link href={`/${recipe.category.slug}/${recipe.slug}`}>
-              {recipe.title}
-            </Link>
-          </div>
+          <RecipeListItem
+            key={recipe.id}
+            href={`/${recipe.category.slug}/${recipe.slug}`}
+            title={recipe.title}
+          />
         ))}
-      </div>
+      </RecipeList>
     </main >
   )
 }

src/app/search/page.tsx

@@ -1,6 +1,7 @@
-import Link from 'next/link'
 import { SearchForm } from '@/components/search-form/search-form'
 import { search } from '@/lib/search'
+import { RecipeListItem } from '@/components/recipe-list-item/recipe-list-item'
+import { RecipeList } from '@/components/recipe-list/recipe-list'
 
 interface Props {
   searchParams: { query: string }
@@ -15,13 +16,15 @@ export default async function Home({ searchParams }: Props) {
     <main className="flex flex-col items-center">
       <SearchForm query={query} />
 
-      {recipes.map((recipe) => (
-        <div key={recipe.id} className="flex place-items-center">
-          <Link href={`/${recipe.category.slug}/${recipe.slug}`}>
-            {recipe.title}
-          </Link>
-        </div>
-      ))}
+      <RecipeList>
+        {recipes.map((recipe) => (
+          <RecipeListItem
+            key={recipe.id}
+            href={`/${recipe.category.slug}/${recipe.slug}`}
+            title={recipe.title}
+          />
+        ))}
+      </RecipeList>
     </main >
   )
 }

src/components/recipe-list-item/recipe-list-item.stories.tsx

@@ -6,9 +6,6 @@ import { RecipeListItem } from './recipe-list-item';
 const meta = {
   title: 'UI/RecipeListItem',
   component: RecipeListItem,
-  parameters: {
-    layout: 'centered',
-  },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
   tags: ['autodocs'],
 
@@ -21,7 +18,7 @@ type Story = StoryObj<typeof meta>;
 // More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
 export const Primary: Story = {
   args: {
-    primary: true,
-    label: 'Button',
+    href: '/',
+    title: 'Spaghetti',
   },
 };

src/components/recipe-list-item/recipe-list-item.tsx

@@ -1,3 +1,13 @@
-export function RecipeListItem() {
-  return <div>Siema</div>
+import Link from 'next/link'
+interface Props {
+  href: string
+  title: string
+}
+
+export function RecipeListItem({ href, title }: Props) {
+  return (
+    <Link className='block w-full border px-2 py-1' href={href}>
+      {title}
+    </Link>
+  )
 }

src/components/recipe-list/recipe-list.stories.tsx

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { RecipeList } from './recipe-list';
+import { RecipeListItem } from '../recipe-list-item/recipe-list-item';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'UI/RecipeList',
+  component: RecipeList,
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+
+} satisfies Meta<typeof RecipeList>;
+
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+export const Primary: Story = {
+  args: {
+    children: [
+      <RecipeListItem href='/' title='Recipe 1' />,
+      <RecipeListItem href='/' title='Recipe 2' />,
+      <RecipeListItem href='/' title='Recipe 3' />,
+      <RecipeListItem href='/' title='Recipe 4' />,
+    ]
+  },
+};

src/components/recipe-list/recipe-list.tsx

@@ -0,0 +1,7 @@
+export function RecipeList({ children }: { children: React.ReactNode }) {
+  return (
+    <div className="flex flex-col gap-2 place-items-center">
+      {children}
+    </div>
+  )
+}