hazo_auth 0.1.0

package/src/server/types/express.d.ts

@@ -0,0 +1,15 @@
+// file_description: augment express request with hazo_auth context
+import type { app_context } from "./app_types";
+
+declare global {
+  namespace Express {
+    interface Request {
+      context: app_context;
+    }
+  }
+}
+
+export {};
+
+
+

package/src/stories/email_verification_layout.stories.tsx

@@ -0,0 +1,137 @@
+// file_description: showcase the email_verification_layout component within storybook for review and testing
+// section: imports
+import type { Meta, StoryObj } from "@storybook/react";
+import EmailVerificationLayout from "@/components/layouts/email_verification";
+import { createLayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+
+// section: metadata
+const meta: Meta<typeof EmailVerificationLayout> = {
+  title: "layouts/email_verification_layout",
+  id: "forms-email-verification-form",
+  component: EmailVerificationLayout,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+// section: helpers
+// Create mock hazo_connect instance for Storybook (browser environment)
+// Note: Real SQLite database cannot be used in browser/Storybook context
+// This mock satisfies the LayoutDataClient interface requirements
+const create_storybook_hazo_connect = () => {
+  return {
+    healthCheck: async () => {
+      // Mock health check for Storybook - no-op in browser context
+      return Promise.resolve();
+    },
+  };
+};
+
+// section: stories
+type story = StoryObj<typeof EmailVerificationLayout>;
+
+// section: verifying_state_story
+export const verifying_state: story = {
+  name: "verifying_state",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#e2e8f0",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Loading state shown while verifying the email verification token. Note: In Storybook, this will attempt to verify a token from the URL query string.",
+      },
+    },
+  },
+};
+
+// section: success_state_story
+export const success_state: story = {
+  name: "success_state",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#e2e8f0",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Success state shown after email verification is complete, with redirect countdown.",
+      },
+    },
+  },
+};
+
+// section: error_state_story
+export const error_state: story = {
+  name: "error_state",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#e2e8f0",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Error state shown when verification fails, with form to resend verification email.",
+      },
+    },
+  },
+};
+
+// section: custom_configuration_story
+export const custom_configuration: story = {
+  name: "custom_configuration",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#dbeafe",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+    labels: {
+      heading: "Verify your email",
+      subHeading: "Please wait while we verify your email address.",
+      submitButton: "Resend email",
+      cancelButton: "Back to login",
+    },
+    success_labels: {
+      heading: "Email confirmed!",
+      message: "Your email address has been successfully verified.",
+      redirectMessage: "You will be redirected in",
+      goToLoginButton: "Continue to login",
+    },
+    error_labels: {
+      heading: "Verification link expired",
+      message: "The verification link is no longer valid.",
+      resendFormHeading: "Get a new verification link",
+    },
+    button_colors: {
+      submitBackground: "#5b21b6",
+      submitText: "#ffffff",
+      cancelBorder: "#7c3aed",
+      cancelText: "#5b21b6",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates how teams can customise labels, button styling, and background images for alternative email verification flows.",
+      },
+    },
+  },
+};
+

package/src/stories/forgot_password_layout.stories.tsx

@@ -0,0 +1,85 @@
+// file_description: showcase the forgot_password_layout component within storybook for review and testing
+// section: imports
+import type { Meta, StoryObj } from "@storybook/react";
+import ForgotPasswordLayout from "@/components/layouts/forgot_password";
+import { createLayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+
+// section: metadata
+const meta: Meta<typeof ForgotPasswordLayout> = {
+  title: "layouts/forgot_password_layout",
+  id: "forms-forgot-password-form",
+  component: ForgotPasswordLayout,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+// section: helpers
+// Create mock hazo_connect instance for Storybook (browser environment)
+// Note: Real SQLite database cannot be used in browser/Storybook context
+// This mock satisfies the LayoutDataClient interface requirements
+const create_storybook_hazo_connect = () => {
+  return {
+    healthCheck: async () => {
+      // Mock health check for Storybook - no-op in browser context
+      return Promise.resolve();
+    },
+  };
+};
+
+// section: stories
+type story = StoryObj<typeof ForgotPasswordLayout>;
+
+// section: default_story
+export const default_state: story = {
+  name: "default_state",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#e2e8f0",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Default presentation of the forgot password layout with email field.",
+      },
+    },
+  },
+};
+
+export const custom_configuration: story = {
+  name: "custom_configuration",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#dbeafe",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+    labels: {
+      heading: "Reset your password",
+      subHeading: "We'll send you a secure link to reset your password.",
+      submitButton: "Send reset email",
+      cancelButton: "Back to login",
+    },
+    button_colors: {
+      submitBackground: "#5b21b6",
+      submitText: "#ffffff",
+      cancelBorder: "#7c3aed",
+      cancelText: "#5b21b6",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates how teams can customise labels, button styling, and background images for alternative forgot password flows.",
+      },
+    },
+  },
+};
+

package/src/stories/login_layout.stories.tsx

@@ -0,0 +1,85 @@
+// file_description: showcase the login_layout component within storybook for review and testing
+// section: imports
+import type { Meta, StoryObj } from "@storybook/react";
+import LoginLayout from "@/components/layouts/login";
+import { createLayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+
+// section: metadata
+const meta: Meta<typeof LoginLayout> = {
+  title: "layouts/login_layout",
+  id: "forms-login-form",
+  component: LoginLayout,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+// section: helpers
+// Create mock hazo_connect instance for Storybook (browser environment)
+// Note: Real SQLite database cannot be used in browser/Storybook context
+// This mock satisfies the LayoutDataClient interface requirements
+const create_storybook_hazo_connect = () => {
+  return {
+    healthCheck: async () => {
+      // Mock health check for Storybook - no-op in browser context
+      return Promise.resolve();
+    },
+  };
+};
+
+// section: stories
+type story = StoryObj<typeof LoginLayout>;
+
+// section: default_story
+export const default_state: story = {
+  name: "default_state",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#e2e8f0",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Default presentation of the login layout with email and password fields.",
+      },
+    },
+  },
+};
+
+export const custom_configuration: story = {
+  name: "custom_configuration",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#dbeafe",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+    labels: {
+      heading: "Welcome back to hazo",
+      subHeading: "Sign in to continue to your secure workspace.",
+      submitButton: "Sign in",
+      cancelButton: "Cancel",
+    },
+    button_colors: {
+      submitBackground: "#5b21b6",
+      submitText: "#ffffff",
+      cancelBorder: "#7c3aed",
+      cancelText: "#5b21b6",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates how teams can customise labels, button styling, and background images for alternative login flows.",
+      },
+    },
+  },
+};
+

package/src/stories/project_overview.stories.tsx

@@ -0,0 +1,33 @@
+// file_description: provide a high level story describing the purpose of the ui_component workspace
+import type { Meta, StoryObj } from "@storybook/nextjs";
+
+// section: story_configuration
+const story_meta: Meta = {
+  title: "foundations/project_overview",
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default story_meta;
+
+type Story = StoryObj;
+
+// section: story_definitions
+export const DefaultView: Story = {
+  name: "workspace overview",
+  render: () => (
+    <div className="cls_story_overview flex max-w-xl flex-col items-center justify-center gap-4 rounded-lg border border-slate-200 bg-white p-8 text-center shadow-sm">
+      <h2 className="cls_story_heading text-2xl font-semibold text-slate-900">
+        build reusable components with confidence
+      </h2>
+      <p className="cls_story_body text-base leading-relaxed text-slate-600">
+        This Storybook workspace pairs shadcn primitives with hazo_config and
+        hazo_connect so the design system can stay aligned with platform
+        standards. Add new stories to document upcoming components as
+        requirements arrive.
+      </p>
+    </div>
+  ),
+};
+

package/src/stories/register_layout.stories.tsx

@@ -0,0 +1,107 @@
+// file_description: showcase the register_layout component within storybook for review and testing
+// section: imports
+import type { Meta, StoryObj } from "@storybook/react";
+import RegisterLayout from "@/components/layouts/register";
+import { createLayoutDataClient } from "@/components/layouts/shared/data/layout_data_client";
+
+// section: metadata
+const meta: Meta<typeof RegisterLayout> = {
+  title: "layouts/register_layout",
+  id: "forms-register-form",
+  component: RegisterLayout,
+  parameters: {
+    layout: "centered",
+  },
+};
+
+export default meta;
+
+// section: helpers
+// Create mock hazo_connect instance for Storybook (browser environment)
+// Note: Real SQLite database cannot be used in browser/Storybook context
+// This mock satisfies the LayoutDataClient interface requirements
+const create_storybook_hazo_connect = () => {
+  return {
+    healthCheck: async () => {
+      // Mock health check for Storybook - no-op in browser context
+      return Promise.resolve();
+    },
+  };
+};
+
+// section: stories
+type story = StoryObj<typeof RegisterLayout>;
+
+// section: default_story
+export const default_state: story = {
+  name: "default_state",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#e2e8f0",
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Default presentation of the register layout with all fields locked until edited with the pencil toggles.",
+      },
+    },
+  },
+};
+
+export const custom_configuration: story = {
+  name: "custom_configuration",
+  args: {
+    image_src: "/globe.svg",
+    image_alt:
+      "Decorative globe illustrating the global reach of the hazo authentication platform",
+    image_background_color: "#dbeafe",
+    show_name_field: false,
+    data_client: createLayoutDataClient(create_storybook_hazo_connect()),
+    labels: {
+      heading: "Join the hazo beta now",
+      subHeading: "Configure your secure workspace credentials in minutes.",
+      submitButton: "Create account",
+      cancelButton: "Cancel setup",
+    },
+    field_overrides: {
+      email_address: {
+        label: "Work email",
+        placeholder: "Enter your work email",
+      },
+      password: {
+        label: "Create password",
+        placeholder: "Choose a strong password now",
+      },
+      confirm_password: {
+        label: "Confirm password",
+        placeholder: "Re-enter the password",
+      },
+    },
+    password_requirements: {
+      minimum_length: 12,
+      require_uppercase: true,
+      require_lowercase: true,
+      require_number: true,
+      require_special: true,
+    },
+    button_colors: {
+      submitBackground: "#5b21b6",
+      submitText: "#ffffff",
+      cancelBorder: "#7c3aed",
+      cancelText: "#5b21b6",
+    },
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Demonstrates how teams can toggle the full name field, customise button styling, and adjust password policy messaging for alternative onboarding flows.",
+      },
+    },
+  },
+};
+

package/tailwind.config.ts

@@ -0,0 +1,77 @@
+// file_description: configure tailwindcss for the ui_component project
+import type { Config } from "tailwindcss";
+
+// section: tailwind_configuration
+const tailwind_config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./src/stories/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+  	extend: {
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			},
+  			sidebar: {
+  				DEFAULT: 'hsl(var(--sidebar-background))',
+  				foreground: 'hsl(var(--sidebar-foreground))',
+  				primary: 'hsl(var(--sidebar-primary))',
+  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
+  				accent: 'hsl(var(--sidebar-accent))',
+  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
+  				border: 'hsl(var(--sidebar-border))',
+  				ring: 'hsl(var(--sidebar-ring))'
+  			}
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+};
+
+export default tailwind_config;

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}