Add missing stories and configure TypeScript path aliases

.storybook/main.ts

@@ -1,4 +1,6 @@
 import type { StorybookViteConfig } from '@storybook/builder-vite';
+import tsconfigPaths from 'vite-tsconfig-paths';
+import { mergeConfig } from 'vite';
 
 const config: StorybookViteConfig = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
@@ -19,7 +21,10 @@ const config: StorybookViteConfig = {
   features: {
     storyStoreV7: true,
   },
-  viteFinal: (config) => config,
+  viteFinal: (config) =>
+    mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+    }),
 };
 
 export default config;

package-lock.json

@@ -21,7 +21,8 @@
         "clsx": "^1.2.1",
         "prettier": "^2.7.1",
         "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "vite-tsconfig-paths": "^3.5.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -2274,6 +2275,12 @@
         "node": ">=0.1.90"
       }
     },
+    "node_modules/@cush/relative": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@cush/relative/-/relative-1.0.0.tgz",
+      "integrity": "sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==",
+      "dev": true
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -12530,6 +12537,12 @@
         "glob": "^7.1.6"
       }
     },
+    "node_modules/glob-regex": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/glob-regex/-/glob-regex-0.3.2.tgz",
+      "integrity": "sha512-m5blUd3/OqDTWwzBBtWBPrGlAzatRywHameHeekAZyZrskYouOGdNB8T/q6JucucvJXtOuyHIn0/Yia7iDasDw==",
+      "dev": true
+    },
     "node_modules/glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -12590,6 +12603,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -18705,6 +18724,24 @@
         "node": ">= 4"
       }
     },
+    "node_modules/recrawl-sync": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recrawl-sync/-/recrawl-sync-2.2.2.tgz",
+      "integrity": "sha512-E2sI4F25Fu2nrfV+KsnC7/qfk/spQIYXlonfQoS4rwxeNK5BjxnLPbWiRXHVXPwYBOTWtPX5765kTm/zJiL+LQ==",
+      "dev": true,
+      "dependencies": {
+        "@cush/relative": "^1.0.0",
+        "glob-regex": "^0.3.0",
+        "slash": "^3.0.0",
+        "tslib": "^1.9.3"
+      }
+    },
+    "node_modules/recrawl-sync/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "dev": true
+    },
     "node_modules/redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -22779,6 +22816,29 @@
         }
       }
     },
+    "node_modules/tsconfig-paths": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.1.0.tgz",
+      "integrity": "sha512-AHx4Euop/dXFC+Vx589alFba8QItjF+8hf8LtmuiCwHyI4rHXQtOOENaM8kvYf5fR0dRChy3wzWIZ9WbB7FWow==",
+      "dev": true,
+      "dependencies": {
+        "json5": "^2.2.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/tsconfig-paths/node_modules/strip-bom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+      "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/tsconfig-resolver": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/tsconfig-resolver/-/tsconfig-resolver-3.0.1.tgz",
@@ -23680,6 +23740,21 @@
         }
       }
     },
+    "node_modules/vite-tsconfig-paths": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.0.tgz",
+      "integrity": "sha512-NKIubr7gXgh/3uniQaOytSg+aKWPrjquP6anAy+zCWEn6h9fB8z2/qdlfQrTgZWaXJ2pHVlllrSdRZltHn9P4g==",
+      "dev": true,
+      "dependencies": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "recrawl-sync": "^2.0.3",
+        "tsconfig-paths": "^4.0.0"
+      },
+      "peerDependencies": {
+        "vite": ">2.0.0-0"
+      }
+    },
     "node_modules/vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -26746,6 +26821,12 @@
       "dev": true,
       "optional": true
     },
+    "@cush/relative": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@cush/relative/-/relative-1.0.0.tgz",
+      "integrity": "sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==",
+      "dev": true
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.7",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz",
@@ -34524,6 +34605,12 @@
         "@types/glob": "^7.1.3"
       }
     },
+    "glob-regex": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/glob-regex/-/glob-regex-0.3.2.tgz",
+      "integrity": "sha512-m5blUd3/OqDTWwzBBtWBPrGlAzatRywHameHeekAZyZrskYouOGdNB8T/q6JucucvJXtOuyHIn0/Yia7iDasDw==",
+      "dev": true
+    },
     "glob-to-regexp": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
@@ -34569,6 +34656,12 @@
         "slash": "^3.0.0"
       }
     },
+    "globrex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz",
+      "integrity": "sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==",
+      "dev": true
+    },
     "graceful-fs": {
       "version": "4.2.10",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
@@ -39076,6 +39169,26 @@
         "tslib": "^2.0.1"
       }
     },
+    "recrawl-sync": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/recrawl-sync/-/recrawl-sync-2.2.2.tgz",
+      "integrity": "sha512-E2sI4F25Fu2nrfV+KsnC7/qfk/spQIYXlonfQoS4rwxeNK5BjxnLPbWiRXHVXPwYBOTWtPX5765kTm/zJiL+LQ==",
+      "dev": true,
+      "requires": {
+        "@cush/relative": "^1.0.0",
+        "glob-regex": "^0.3.0",
+        "slash": "^3.0.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+          "dev": true
+        }
+      }
+    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -42193,6 +42306,25 @@
       "integrity": "sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==",
       "dev": true
     },
+    "tsconfig-paths": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-4.1.0.tgz",
+      "integrity": "sha512-AHx4Euop/dXFC+Vx589alFba8QItjF+8hf8LtmuiCwHyI4rHXQtOOENaM8kvYf5fR0dRChy3wzWIZ9WbB7FWow==",
+      "dev": true,
+      "requires": {
+        "json5": "^2.2.1",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "strip-bom": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz",
+          "integrity": "sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==",
+          "dev": true
+        }
+      }
+    },
     "tsconfig-resolver": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/tsconfig-resolver/-/tsconfig-resolver-3.0.1.tgz",
@@ -42846,6 +42978,18 @@
         "rollup": ">=2.75.6 <2.77.0 || ~2.77.0"
       }
     },
+    "vite-tsconfig-paths": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/vite-tsconfig-paths/-/vite-tsconfig-paths-3.5.0.tgz",
+      "integrity": "sha512-NKIubr7gXgh/3uniQaOytSg+aKWPrjquP6anAy+zCWEn6h9fB8z2/qdlfQrTgZWaXJ2pHVlllrSdRZltHn9P4g==",
+      "dev": true,
+      "requires": {
+        "debug": "^4.1.1",
+        "globrex": "^0.1.2",
+        "recrawl-sync": "^2.0.3",
+        "tsconfig-paths": "^4.0.0"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",

package.json

@@ -8,6 +8,7 @@
     "build": "astro build",
     "preview": "astro preview",
     "astro": "astro",
+    "check": "tsc --jsx preserve --skipLibCheck",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },
@@ -25,6 +26,7 @@
     "clsx": "^1.2.1",
     "prettier": "^2.7.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "vite-tsconfig-paths": "^3.5.0"
   }
 }

src/components/atoms/button/button.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import ButtonComponent from './button';
+
+export default {
+  title: 'Button',
+  component: ButtonComponent,
+  argTypes: {
+    onClick: { action: 'onClick' },
+  },
+} as ComponentMeta<typeof ButtonComponent>;
+
+export const Button: ComponentStory<typeof ButtonComponent> = (args) => <ButtonComponent {...args} />;
+
+Button.args = {
+  children: 'Button text',
+};

src/components/atoms/button/button.tsx

@@ -3,7 +3,7 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 interface ButtonProps extends ComponentPropsWithoutRef<'button'> {}
 
-export const Button = ({ className, ...props }: ButtonProps) => (
+const Button = ({ className, ...props }: ButtonProps) => (
   <button
     type="button"
     className={clsx(
@@ -13,3 +13,5 @@ export const Button = ({ className, ...props }: ButtonProps) => (
     {...props}
   />
 );
+
+export default Button;

src/components/atoms/button/index.ts

@@ -0,0 +1 @@
+export { default as Button } from './button';

src/components/atoms/labelled-value/index.ts

@@ -0,0 +1 @@
+export { default as LabelledValue } from './labelled-value';

src/components/atoms/labelled-value/labelled-value.stories.tsx

@@ -0,0 +1,17 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import LabelledValueComponent from './labelled-value';
+
+export default {
+  title: 'LabelledValue',
+  component: LabelledValueComponent,
+} as ComponentMeta<typeof LabelledValueComponent>;
+
+export const LabelledValue: ComponentStory<typeof LabelledValueComponent> = (args) => (
+  <LabelledValueComponent {...args} />
+);
+
+LabelledValue.args = {
+  label: 'Label',
+  children: 'Value',
+};

src/components/atoms/labelled-value/labelled-value.tsx

@@ -5,9 +5,11 @@ interface LabelledValueProps extends ComponentPropsWithoutRef<'div'> {
   label: string;
 }
 
-export const LabelledValue = ({ label, children, className, ...props }: LabelledValueProps) => (
+const LabelledValue = ({ label, children, className, ...props }: LabelledValueProps) => (
   <div className={clsx('text-base space-x-1', className)} {...props}>
     <span className="font-medium text-gray-700">{label}:</span>
     <span className="font-normal text-gray-500">{children}</span>
   </div>
 );
+
+export default LabelledValue;

src/components/atoms/section-card/index.ts

@@ -0,0 +1 @@
+export { default as SectionCard } from './section-card';

src/components/atoms/section-card/section-card.stories.tsx

@@ -0,0 +1,14 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import SectionCardComponent from './section-card';
+
+export default {
+  title: 'SectionCard',
+  component: SectionCardComponent,
+} as ComponentMeta<typeof SectionCardComponent>;
+
+export const SectionCard: ComponentStory<typeof SectionCardComponent> = (args) => <SectionCardComponent {...args} />;
+
+SectionCard.args = {
+  children: 'Card content',
+};

src/components/atoms/section-card/section-card.tsx

@@ -3,6 +3,8 @@ import type { ComponentPropsWithoutRef } from 'react';
 
 interface SectionCardProps extends ComponentPropsWithoutRef<'div'> {}
 
-export const SectionCard = ({ className, ...props }: SectionCardProps) => (
+const SectionCard = ({ className, ...props }: SectionCardProps) => (
   <div className={clsx('p-8 bg-white rounded-2xl shadow-lg', className)} {...props} />
 );
+
+export default SectionCard;

src/components/atoms/typography/index.ts

@@ -0,0 +1 @@
+export { default as Typography } from './typography';

src/components/atoms/typography/typography.stories.tsx

@@ -0,0 +1,15 @@
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
+
+import TypographyComponent from './typography';
+
+export default {
+  title: 'Typography',
+  component: TypographyComponent,
+} as ComponentMeta<typeof TypographyComponent>;
+
+export const Typography: ComponentStory<typeof TypographyComponent> = (args) => <TypographyComponent {...args} />;
+
+Typography.args = {
+  children: 'Typography text',
+  variant: 'paragraph',
+};

src/components/atoms/typography/typography.tsx

@@ -40,8 +40,10 @@ const variantToClassName = {
   paragraph: 'text-base leading-relaxed font-normal text-gray-500',
 };
 
-export const Typography = ({ variant = 'paragraph', className, ...props }: TypographyProps) => {
+const Typography = ({ variant = 'paragraph', className, ...props }: TypographyProps) => {
   const Element = variantToElement[variant];
 
   return <Element className={clsx(variantToClassName[variant], className)} {...props} />;
 };
+
+export default Typography;

src/components/button.stories.tsx

@@ -1,16 +0,0 @@
-import type { ComponentStory, ComponentMeta } from '@storybook/react';
-
-import { Button } from './button';
-
-export default {
-  title: 'Button',
-  component: Button,
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-export const Default = Template.bind({});
-
-Default.args = {
-  children: 'Button text',
-};

src/pages/index.astro

@@ -1,7 +1,7 @@
 ---
-import { SectionCard } from '../components/section-card';
+import { SectionCard } from '@/atoms/section-card';
-import { Typography } from '../components/typograpy';
+import { Typography } from '@/atoms/typography';
-import { LabelledValue } from '../components/labelled-value';
+import { LabelledValue } from '@/atoms/labelled-value';
 ---
 
 <!DOCTYPE html>

tsconfig.json

@@ -26,6 +26,13 @@
     // Report an error when a parameter is declared but never used.
     "noUnusedParameters": true,
     // Force the usage of the indexed syntax to access fields declared using an index signature.
-    "noUncheckedIndexedAccess": true
+    "noUncheckedIndexedAccess": true,
+    // Force import casing to match file name casing on the disk.
+    "forceConsistentCasingInFileNames": true,
+    // Add aliases for common paths.
+    "baseUrl": ".",
+    "paths": {
+      "@/atoms/*": ["src/components/atoms/*"]
+    }
   }
 }