chore: add some storybook

https://redwoodjs.com/docs/tutorial/chapter5/first-story

web/config/storybook.config.js

@@ -2,8 +2,5 @@ module.exports = {
   features: {
     interactionsDebugger: true,
   },
-  addons: [
-    '@storybook/addon-actions/register',
-    '@storybook/addon-interactions',
-  ],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
 }

web/package.json

@@ -22,7 +22,7 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.4.20",
+    "@storybook/addon-essentials": "6.4.20",
     "@storybook/addon-interactions": "6.4.20",
     "@storybook/jest": "0.0.10",
     "@storybook/test-runner": "0.0.4",

web/src/components/Article/Article.js

@@ -1,14 +1,20 @@
 import { Link, routes } from '@redwoodjs/router'
 
-const Article = ({ article }) => {
+const truncate = (text, length) => {
+  return text.substring(0, length) + '...'
+}
+
+const Article = ({ article, summary = false }) => {
   return (
     <article>
       <header>
         <h2 className="text-xl text-blue-700 font-semibold">
           <Link to={routes.article({ id: article.id })}>{article.title}</Link>
         </h2>
       </header>
-      <div className="mt-2 text-gray-900 font-light">{article.body}</div>
+      <div className="mt-2 text-gray-900 font-light">
+        {summary ? truncate(article.body, 100) : article.body}
+      </div>
       <div>Posted at: {article.createdAt}</div>
     </article>
   )

web/src/components/Article/Article.mock.js

@@ -1,9 +1,8 @@
-// Define your own mock data here:
 export const standard = () => ({
   article: {
-    id: 42,
-    title: 'Article Title',
-    body: 'Article Body',
-    createdAt: '2020-01-01T00:00:00.000Z',
+    id: 1,
+    title: 'First Post',
+    body: `Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.`,
+    createdAt: '2022-03-30T00:00:00.000Z',
   },
 })

web/src/components/Article/Article.stories.js

@@ -1,8 +1,18 @@
 import Article from './Article'
 import { standard } from './Article.mock'
 
-export const generated = () => {
+/** @type { import("@storybook/react").Meta } */
+export default {
+  title: 'Components/Article',
+  args: {
+    summary: true,
+  },
+}
+
+export const full = () => {
   return <Article {...standard()} />
 }
 
-export default { title: 'Components/Article' }
+export const summary = ({ summary = true }) => {
+  return <Article article={standard().article} summary={summary} />
+}

web/src/components/Article/__snapshots__/Article.test.js.snap

@@ -8,19 +8,19 @@ exports[`Article fragment matches snapshot 1`] = `
         class="text-xl text-blue-700 font-semibold"
       >
         <a
-          href="/article/42"
+          href="/article/1"
         >
-          Article Title
+          First Post
         </a>
       </h2>
     </header>
     <div
       class="mt-2 text-gray-900 font-light"
     >
-      Article Body
+      Neutra tacos hot chicken prism raw denim, put a bird on it enamel pin post-ironic vape cred DIY. Street art next level umami squid. Hammock hexagon glossier 8-bit banjo. Neutra la croix mixtape echo park four loko semiotics kitsch forage chambray. Semiotics salvia selfies jianbing hella shaman. Letterpress helvetica vaporware cronut, shaman butcher YOLO poke fixie hoodie gentrify woke heirloom.
     </div>
     <div>
-      Posted at: 2020-01-01T00:00:00.000Z
+      Posted at: 2022-03-30T00:00:00.000Z
     </div>
   </article>
 </DocumentFragment>