Update storybook stories

Author: adamgraham

package.json

@@ -15,11 +15,11 @@
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^8.6.0",
-    "@storybook/addon-links": "^9.0.0",
-    "@storybook/addon-themes": "^9.0.0",
+    "@storybook/addon-links": "^8.6.0",
+    "@storybook/addon-themes": "^8.6.0",
     "@storybook/blocks": "^8.6.0",
-    "@storybook/react": "^9.0.0",
-    "@storybook/react-vite": "^9.0.0",
+    "@storybook/react": "^8.6.0",
+    "@storybook/react-vite": "^8.6.0",
     "@storybook/test": "^8.6.0",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.1.0",
@@ -32,7 +32,7 @@
     "prop-types": "15.8.0",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
-    "storybook": "^9.0.0",
+    "storybook": "^8.6.0",
     "svg2js": "^0.0.4-alpha1",
     "vite": "^6.3.0"
   },

stories/AppFooter.stories.ts

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import AppFooter from '../src/components/AppFooter';
+import Link from '../src/components/Link';
+import Logo from '../src/components/Logo';
+import Stack from '../src/components/Stack';
+
+const meta: Meta<typeof AppFooter> = {
+  component: AppFooter,
+  render: args => <AppFooter {...args} className="border text-xs font-500" />,
+};
+
+const links = [
+  {
+    href: '/?path=/story/appfooter--with-links#terms-of-service',
+    name: 'Terms of Service',
+  },
+  {
+    href: '/?path=/story/appfooter--with-links#privacy-policy',
+    name: 'Privacy Policy',
+  },
+  {
+    href: '/?path=/story/appfooter--with-links#contact',
+    name: 'Contact',
+  },
+];
+
+export default meta;
+
+type Story = StoryObj<typeof AppFooter>;
+
+export const Basic: Story = {
+  args: {
+    left: (
+      <Stack align="center">
+        <Logo size="xs" />
+        <span className="copyright mx-xl">
+          Copyright <span aria-hidden>©</span> {new Date().getFullYear()} All
+          Rights Reserved
+        </span>
+      </Stack>
+    ),
+  },
+};
+
+export const WithLinks: Story = {
+  args: {
+    left: (
+      <Stack align="center">
+        <Logo size="xs" />
+        <span className="copyright mx-xl">
+          Copyright <span aria-hidden>©</span> {new Date().getFullYear()} All
+          Rights Reserved
+        </span>
+      </Stack>
+    ),
+    right: (
+      <Stack align="center" className="links" wrap>
+        {links.map(link => (
+          <Link className="text-inherit mx-sm" href={link.href} key={link.name}>
+            {link.name}
+          </Link>
+        ))}
+      </Stack>
+    ),
+  },
+};

stories/AppFooter.stories.tsx

@@ -15,6 +15,12 @@ export const Text: Story = {
   args: {},
 };
 
+export const Label: Story = {
+  args: {
+    label: 'Name',
+  },
+};
+
 export const Password: Story = {
   args: {
     placeholder: 'Password',

stories/Input.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useRef } from 'react';
-import PanAndZoomTransform from '../src/components/PanAndZoomTransform';
+import PanAndZoomProvider, { PanAndZoomTransform } from '../src/components/PanAndZoom'; // prettier-ignore
 import ProgressiveImage from '../src/components/ProgressiveImage';
 
 const meta: Meta<typeof PanAndZoomTransform> = {
@@ -15,16 +15,20 @@ export const Default: Story = {
   render: args => {
     const ref = useRef<HTMLDivElement>(null);
     return (
-      <div ref={ref} style={{ width: 960, height: 540 }}>
-        <PanAndZoomTransform {...args} container={ref}>
-          {panning => (
+      <PanAndZoomProvider
+        {...args}
+        ref={ref}
+        style={{ width: 960, height: 540 }}
+      >
+        {(state, panning, resetMap) => (
+          <PanAndZoomTransform>
             <ProgressiveImage
-              imageClassName="pointer-events-none select-none"
+              imageClassName="pointer-none select-none"
               src="https://picsum.photos/960/540"
             />
-          )}
-        </PanAndZoomTransform>
-      </div>
+          </PanAndZoomTransform>
+        )}
+      </PanAndZoomProvider>
     );
   },
 };

stories/PanAndZoomTransform.stories.tsx stories/PanAndZoom.stories.tsxstories/PanAndZoomTransform.stories.tsx renamed to stories/PanAndZoom.stories.tsx

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useRef, useState } from 'react';
+import Button from '../src/components/Button';
+import Tooltip from '../src/components/Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  component: Tooltip,
+  render: args => {
+    return (
+      <div className="flex justify-center align-center w-2xxl h-2xxl">
+        <Tooltip {...args} />
+      </div>
+    );
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Tooltip>;
+
+export const ArrowDown: Story = {
+  args: {
+    arrow: 'down',
+    children: 'Tooltip',
+  },
+};
+
+export const ArrowUp: Story = {
+  args: {
+    arrow: 'up',
+    children: 'Tooltip',
+  },
+};
+
+export const ArrowRight: Story = {
+  args: {
+    arrow: 'right',
+    children: 'Tooltip',
+  },
+};
+
+export const ArrowLeft: Story = {
+  args: {
+    arrow: 'left',
+    children: 'Tooltip',
+  },
+};
+
+export const InfoTooltip: Story = {
+  args: {
+    children: 'Tooltip',
+  },
+  render: args => {
+    const ref = useRef<HTMLDivElement>(null);
+    const [hovering, setHovering] = useState(false);
+    return (
+      <div ref={ref} style={{ width: '42px', height: '42px' }}>
+        <Button
+          icon="info_outline"
+          iconAlignment="only"
+          onMouseEnter={e => setHovering(true)}
+          onMouseLeave={e => setHovering(false)}
+          size="lg"
+          shape="circle"
+          variant="unstyled"
+        />
+        {hovering && <Tooltip {...args} element={ref.current} />}
+      </div>
+    );
+  },
+};