feat(storybook): add Stack component

.eslintrc.json

@@ -1,5 +1,6 @@
 {
   "root": true,
+  "ignorePatterns": ["!.storybook/"],
   "extends": [
     "@wise/eslint-config/base-strict",
     "@wise/eslint-config/react",

.storybook/blocks/Stack.tsx

@@ -0,0 +1,7 @@
+export interface StackProps {
+  children?: React.ReactNode;
+}
+
+export function Stack({ children }: StackProps) {
+  return <div className="flex flex-col items-start gap-y-4">{children}</div>;
+}

src/components/ButtonPrimary.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
 
+import { Stack } from "../../.storybook/blocks/Stack";
 import { ButtonPrimary } from "./ButtonPrimary";
 
 const meta = {
@@ -19,10 +20,10 @@ export const Basic = {
 
 export const Interactivity = {
   render: () => (
-    <div className="flex flex-col items-start gap-y-4">
+    <Stack>
       <ButtonPrimary>Focused</ButtonPrimary>
       <ButtonPrimary disabled>Disabled</ButtonPrimary>
-    </div>
+    </Stack>
   ),
   play: async () => {
     await userEvent.tab();
@@ -31,11 +32,11 @@ export const Interactivity = {
 
 export const Sizes = {
   render: () => (
-    <div className="flex flex-col items-start gap-y-4">
+    <Stack>
       <ButtonPrimary size="sm">Small</ButtonPrimary>
       <ButtonPrimary size="md">Medium</ButtonPrimary>
       <ButtonPrimary size="lg">Large</ButtonPrimary>
-    </div>
+    </Stack>
   ),
 } satisfies Story;
 

src/components/Input.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { userEvent } from "@storybook/test";
 
+import { Stack } from "../../.storybook/blocks/Stack";
 import { Input } from "./Input";
 
 const meta = {
@@ -21,12 +22,12 @@ export const Basic = {
 
 export const Interactivity = {
   render: () => (
-    <div className="flex flex-col items-start gap-y-4">
+    <Stack>
       <Input defaultValue="Focused" />
       <Input value="Read-only" readOnly />
       <Input placeholder="Placeholder" />
       <Input value="Disabled" disabled />
-    </div>
+    </Stack>
   ),
   play: async () => {
     await userEvent.tab();
@@ -35,10 +36,10 @@ export const Interactivity = {
 
 export const Sizes = {
   render: () => (
-    <div className="flex flex-col items-start gap-y-4">
+    <Stack>
       <Input size="sm" placeholder="Small" />
       <Input size="md" placeholder="Medium" />
       <Input size="lg" placeholder="Large" />
-    </div>
+    </Stack>
   ),
 } satisfies Story;

src/docs/sample.mdx

@@ -1,13 +1,14 @@
 import { Unstyled } from "@storybook/blocks";
 
+import { Stack } from "../../.storybook/blocks/Stack";
 import { Alert } from "../components/Alert";
-import { Input } from "../components/Input";
 import { ButtonPrimary } from "../components/ButtonPrimary";
+import { Input } from "../components/Input";
 
 <Unstyled>
   <div className="space-y-4 text-base text-ui-neutral-800">
     <Alert>
-      <div className="flex flex-col items-start gap-y-4">
+      <Stack>
         An alert displays a brief, important message, usually at the top of a
         page. Only text content updates are conveyed to screen readers,
         preserving focus.
@@ -16,7 +17,7 @@ import { ButtonPrimary } from "../components/ButtonPrimary";
           <ButtonPrimary size="sm">Ok</ButtonPrimary>
           <ButtonPrimary size="sm">Cancel</ButtonPrimary>
         </div>
-      </div>
+      </Stack>
     </Alert>
     <Alert sentiment="danger">This is an alert.</Alert>
     <Alert sentiment="success">This is an alert.</Alert>

tailwind.config.ts

@@ -3,7 +3,10 @@ import type { Config } from "tailwindcss";
 import tailwindPreset from "./src/tailwind-preset";
 
 export default {
-  content: ["./src/**/*.{js,jsx,ts,tsx,mdx}"],
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx,mdx}",
+    "./.storybook/**/*.{js,jsx,ts,tsx,mdx}",
+  ],
   presets: [tailwindPreset],
   darkMode: ["class", ".theme-dark"],
 } satisfies Config;

tsconfig.json

@@ -1,5 +1,6 @@
 {
   "extends": "@total-typescript/tsconfig/bundler/dom",
+  "include": ["**/*", ".storybook/**/*"],
   "exclude": ["node_modules/", "dist/", "storybook-static/"],
   "compilerOptions": {
     "checkJs": true,