wip

NOTES.md

@@ -42,6 +42,7 @@
 - [ ] Allow event owner to customize their level of email participation
 - [ ] Automate flow tests
 - [ ] Spinners on loading pages with fun text
+- [ ] Use consistent pattern for "updated" green text across form submit actions
 - [x] Placeholder values for form fields
 - [x] Add * asterisk markers to mandatory fields
 - [x] Use `navigate` instead of `a href`

package.json

@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@redwoodjs/cli-storybook-vite": "8.4.0",
     "@redwoodjs/core": "8.4.0",
     "@redwoodjs/realtime": "8.4.0",
     "@redwoodjs/studio": "11",

web/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from 'storybook-framework-redwoodjs-vite'
+
+import { getPaths, importStatementPath } from '@redwoodjs/project-config'
+
+const redwoodProjectPaths = getPaths()
+
+const config: StorybookConfig = {
+  framework: 'storybook-framework-redwoodjs-vite',
+
+  stories: [
+    `${importStatementPath(
+      redwoodProjectPaths.web.src
+    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
+  ],
+
+  addons: ['@storybook/addon-essentials'],
+}
+
+export default config

web/.storybook/preview-body.html

@@ -0,0 +1 @@
+<div id="redwood-app"></div>

web/src/components/LoadingBuddy/LoadingBuddy.stories.tsx

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import LoadingBuddy from './LoadingBuddy'
+
+const meta: Meta<typeof LoadingBuddy> = {
+  component: LoadingBuddy,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: { type: 'radio' },
+      options: ['primary', 'secondary', 'tertiary'],
+    },
+  },
+}
+
+export default meta
+
+type Story = StoryObj<typeof LoadingBuddy>
+
+/** Test docs */
+export const Primary: Story = {
+  args: {
+    className: 'has-text-black',
+  },
+}

web/src/components/LoadingBuddy/LoadingBuddy.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+
+export type Props = {
+  className?: string
+}
+
+const apologies = [
+  'Just a sec',
+  'One moment',
+  'Hang on',
+  'Hold tight',
+  'Almost there',
+  'Just a moment',
+]
+
+const loadingMessages = [
+  'reticulating splines',
+  'refilling the bowl of chips',
+  'going on a Costco run',
+  'spiking the punch',
+  'reversing the polarity',
+  'looking for the car keys',
+  'feeding the cat',
+  'achieving inbox zero',
+  'finishing that novel',
+  'looking for the cat',
+  'petting dogs',
+  'reading the fine print',
+  'planning a heist',
+  'getting the band back together',
+]
+
+function random<T>(choices: T[]): T {
+  return choices[Math.floor(Math.random() * choices.length)]
+}
+
+const LoadingBuddy = ({ className }: Props) => {
+  const [message, setMessage] = useState('')
+  useEffect(() => {
+    const msg = `${random(apologies)}, ${random(loadingMessages)}...`
+    setMessage(msg)
+  }, [])
+  return <span className={className}>{message}</span>
+}
+
+export default LoadingBuddy