Update Storybook to v7 to fix build error with type module

Ref: storybookjs/storybook#11587

.eslintrc.cjs

@@ -28,7 +28,7 @@ module.exports = {
       extends: ['plugin:mdx/recommended'],
     },
     {
-      files: ['docs/**/*'],
+      files: ['stories/**/*'],
       rules: {
         'react/display-name': 'off',
         'react/prop-types': 'off',

.storybook/main.ts

@@ -0,0 +1,19 @@
+module.exports = {
+  stories: ['../docs/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-docs',
+      options: {
+        transcludeMarkdown: true,
+      },
+    },
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  core: {},
+  docs: {
+    docsPage: false,
+  },
+};

.storybook/preview-head.html

@@ -13,7 +13,7 @@
     margin: 0 auto !important;
   }
 
-  #docs-root p {
+  #storybook-docs p {
     font-size: 1rem !important;
   }
 

package.json

@@ -49,8 +49,8 @@
     "format": "yarn format:fix && yarn lint:fix",
     "prepare": "husky install",
     "typecheck": "tsc --noEmit",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "changeset": "changeset",
     "release": "yarn build && changeset publish"
   },
@@ -68,10 +68,9 @@
     "@mels/eslint-config-react": "^1.0.0",
     "@mels/eslint-config-typescript": "^1.0.1",
     "@mels/prettier-config": "^1.0.0",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/builder-webpack5": "^6.5.12",
-    "@storybook/manager-webpack5": "^6.5.12",
-    "@storybook/react": "^6.5.12",
+    "@storybook/addon-docs": "7.0.0-alpha.34",
+    "@storybook/react": "7.0.0-alpha.34",
+    "@storybook/react-vite": "^7.0.0-alpha.34",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.1.1",
     "@types/react": "^18.0.21",
@@ -87,6 +86,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^3.0.2",
+    "storybook": "7.0.0-alpha.34",
     "ts-jest": "^29.0.3",
     "typescript": "^4.8.4"
   }

docs/demoWithHook.stories.tsx → stories/hook.stories.tsx

@@ -1,30 +1,48 @@
 import * as React from 'react';
-import { Meta, Story } from '@storybook/react';
+import type { StoryFn } from '@storybook/react';
+import { Meta } from '@storybook/react';
 
 import { useCaretPosition } from '../src';
 
 import { DemoInput } from './DemoInput';
 
-const meta: Meta = {
-  title: 'Hook Demo',
-  parameters: {
-    previewTabs: {
-      'storybook/docs/panel': { hidden: true },
-    },
-  },
-};
+export default {
+  title: 'useCaretPosition',
+} as Meta;
+
+export const TheProblemItSolves: StoryFn = () => {
+  const [text, setText] = React.useState('hello world');
+
+  return (
+    <div>
+      <p>
+        This input has a side effect in its <code>onChange</code> handler.
+      </p>
+
+      <p>
+        React loses caret position after each keystroke and jumps the caret to
+        the end of the input, making for a terrible typing experience 👎
+      </p>
 
-export default meta;
+      <p>Type anywhere in the middle of the input to simulate this behavior.</p>
 
-export const HookDemo: Story = () => {
+      <DemoInput
+        value={text}
+        onChange={(value: string) => {
+          setText(value);
+        }}
+      />
+    </div>
+  );
+};
+
+export const Demo: StoryFn = () => {
   const { start, end, ref, updateCaret } = useCaretPosition();
 
   const [text, setText] = React.useState('hello world');
 
   return (
     <div>
-      <h1>useCaretPosition</h1>
-
       <p>
         When using the hook to track the caret position, the caret will not get
         booted to the end of the input on each keystroke 🎉
@@ -43,7 +61,7 @@ export const HookDemo: Story = () => {
         }}
       />
 
-      <div>
+      <div style={{ marginTop: '1rem' }}>
         start position: <strong>{start}</strong>, end position:{' '}
         <strong>{end}</strong>
       </div>