srcdev-nuxt-components 8.0.3 → 9.0.0

package/app/types/forms/types.forms.d.ts

@@ -0,0 +1,293 @@
+// Theme types for form components
+export type FormUiTheme = "default" | "success" | "error" | "warning";
+
+// Button type attribute values
+export type InputTypesButton = "button" | "reset" | "submit" | undefined;
+
+// Input variant types for button components
+export type InputButtonVariant = "primary" | "secondary" | "tertiary" | "inline";
+
+// Input variant types for form components
+export type InputUiVariant = "normal" | "outlined" | "underlined";
+
+// Other form-specific types
+export type CheckboxAppearance = null | "with-decorator";
+export type CheckboxStyle = "check" | "cross";
+export type RadioAppearance = null | "with-decorator";
+export type OptionsLayout = "block" | "inline" | "equal-widths";
+export type LabelWeight = "normal" | "semi-bold" | "bold";
+export type InputTypesText = "text" | "email" | "password" | "number" | "tel" | "url";
+export type InputMode = "text" | "email" | "tel" | "url" | "search" | "numeric" | "none" | "decimal";
+
+// Weight types for form components
+export type FormWeight =
+  | "wght-100"
+  | "wght-200"
+  | "wght-300"
+  | "wght-400"
+  | "wght-500"
+  | "wght-600"
+  | "wght-700"
+  | "wght-800"
+  | "wght-900"
+  | "light"
+  | "normal"
+  | "bold"
+  | "fvs-wght-100"
+  | "fvs-wght-200"
+  | "fvs-wght-300"
+  | "fvs-wght-400"
+  | "fvs-wght-500"
+  | "fvs-wght-600"
+  | "fvs-wght-700"
+  | "fvs-wght-800"
+  | "fvs-wght-900";
+
+export interface IValidationPatterns {
+  pattern: string;
+  minlength: string;
+  maxlength: string;
+  hint: string;
+}
+
+export interface IOptionsConfig {
+  id: string;
+  name: string;
+  value: string;
+  label: string;
+  icon?: string;
+}
+
+export interface IFormMultipleOptions {
+  data: IOptionsConfig[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface IOptionsValueArr {
+  [key: string]: string | boolean | number | URL | object;
+}
+
+export interface IFieldsInitialState {
+  [key: string]: null | string | boolean | number | URL | object | IOptionsValueArr[];
+}
+
+export type TFieldsInitialState = {
+  [key: string]: null | string | boolean | number | URL | object | IOptionsValueArr[];
+};
+
+export interface IValidityState {
+  badInput: boolean;
+  customError: boolean;
+  patternMismatch: boolean;
+  rangeOverflow: boolean;
+  rangeUnderflow: boolean;
+  stepMismatch: boolean;
+  tooLong: boolean;
+  tooShort: boolean;
+  typeMismatch: boolean;
+  valid: boolean;
+  valueMissing: boolean;
+}
+
+export interface IValidityStateArr {
+  [key: string]: {
+    badInput: boolean;
+    customError: boolean;
+    patternMismatch: boolean;
+    rangeOverflow: boolean;
+    rangeUnderflow: boolean;
+    stepMismatch: boolean;
+    tooLong: boolean;
+    tooShort: boolean;
+    typeMismatch: boolean;
+    valid: boolean;
+    valueMissing: boolean;
+  };
+}
+
+export interface IFormFieldsState {
+  [key: string]: boolean;
+}
+
+export interface ICustomErrorMessage {
+  useCustomError: boolean;
+  message: string;
+}
+
+export interface InpuTextC12 {
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+}
+
+export interface IErrorMessagesArr {
+  [x: string]: ICustomErrorMessage;
+}
+
+export interface IFormFieldC12 {
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  useCustomError: boolean;
+  customErrors: null | string | string[];
+  isValid: boolean;
+  isDirty: boolean;
+  type: string;
+  previousValue: null | string | boolean | number | URL | object;
+}
+
+export interface IFormFieldsC12 {
+  [x: string]: IFormFieldC12;
+}
+
+export interface IFormFieldState {
+  isValid: boolean;
+  isDirty: boolean;
+  previousValue: null | string | boolean | number | URL | object;
+}
+
+export interface IFormFieldStateObj {
+  [x: string]: IFormFieldState;
+}
+
+export interface IFormData {
+  [x: string]: string | boolean | number | URL | object;
+  data: IFieldsInitialState;
+  validityState: IFormFieldsState;
+  dirtyFields: IFormFieldsState;
+  focusedField: string;
+  isPending: boolean;
+  errorCount: number;
+  errorMessages: IErrorMessagesArr;
+  formFieldsC12: IFormFieldsC12;
+  formIsValid: boolean;
+  submitAttempted: boolean;
+  submitDisabled: boolean;
+  submitSuccess: boolean;
+  displayErrorMessages: boolean;
+}
+
+export interface IApiErrorMessages {
+  [x: string]: string;
+}
+
+// New types
+
+export interface C12nInputText {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nMultipleCheckboxes {
+  id: string;
+  name: string;
+  label: string;
+  legend: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nInputCheckboxWithLabel {
+  id: string;
+  name: string;
+  required: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string | string[];
+  fieldHasError: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nInputRange {
+  id: string;
+  name: string;
+  label: string;
+  min: number;
+  max: number;
+  step: number;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+}
+
+export interface C12nInputTextCore {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+}
+
+export interface InputTextWithLabel {
+  type: string;
+  id: string;
+  name: string;
+  label: string;
+  placeholder: string;
+  errorMessage: string;
+  fieldHasError: boolean;
+  required: boolean;
+  styleClassPassthrough: string[];
+  deepCssClassPassthrough: string[];
+}
+
+export interface ApiErrorResponse {
+  url: string;
+  statusCode: number;
+  statusMessage: string;
+  message: string;
+  stack: string;
+  data: {
+    errors: {
+      [key: string]: string | string[]; // Index signature for dynamic keys
+    };
+  };
+}
+
+// Button component shared props
+export interface BaseButtonProps {
+  size?: string;
+  weight?: string;
+  theme?: string;
+  buttonText: string;
+  dataTestid?: string;
+  styleClassPassthrough?: string | string[];
+  useEffect?: boolean;
+  effect?: "fancy" | "pulse";
+  isPending?: boolean;
+  readonly?: boolean;
+}
+
+// Checkbox/Radio component shared props
+export interface BaseCheckboxRadioProps {
+  type: "checkbox" | "radio";
+  id: string;
+  name: string;
+  required?: boolean;
+  size?: string;
+  theme?: string;
+  fieldHasError?: boolean;
+  styleClassPassthrough?: string | string[];
+  trueValue?: string | number | boolean;
+  falseValue?: string | number | boolean;
+  ariaDescribedby?: string;
+  displayAsDisc?: boolean;
+  multipleOptions?: boolean;
+}

package/app/types/forms/types.zodFormControl.d.ts

@@ -0,0 +1,29 @@
+import type {
+  IFieldsInitialState,
+  IFormFieldsState,
+  IFormFieldsC12,
+  IFormFieldC12,
+  IApiErrorMessages,
+  ICustomErrorMessage,
+  IErrorMessagesArr,
+} from "../../app/types/forms/types.forms"
+
+export interface IZodeFormControl {
+  [x: string]: string | boolean | number | URL | object
+  data: IFieldsInitialState
+  validityState: IFormFieldsState
+  dirtyFields: IFormFieldsState
+  focusedField: string
+  isDisabled: boolean
+  isPending: boolean
+  errorCount: number
+  errorMessages: IErrorMessagesArr
+  formFieldsC12: IFormFieldsC12
+  formIsValid: boolean
+  submitAttempted: boolean
+  submitDisabled: boolean
+  submitSuccess: boolean
+  displayErrorMessages: boolean
+  displayLoader: boolean
+  submitSuccessful: boolean
+}

package/app/types/types.posts.ts

@@ -0,0 +1,21 @@
+export interface Posts {
+  posts: Post[];
+  total: number;
+  skip: number;
+  limit: number;
+}
+
+export interface Post {
+  id: number;
+  title: string;
+  body: string;
+  tags: string[];
+  reactions: Reactions;
+  views: number;
+  userId: number;
+}
+
+export interface Reactions {
+  likes: number;
+  dislikes: number;
+}

package/app/types/types.quotes.ts

@@ -0,0 +1,12 @@
+export interface IQuote {
+  id: number
+  quote: string
+  author: string
+}
+export interface IQuotes {
+  quotes: IQuote[]
+  total: number
+  skip: number
+  limit: number
+  timestamp?: number | string
+}

package/app/types/types.services.ts

@@ -0,0 +1,20 @@
+import type { TextConfig } from "~/types/components/hero-text";
+
+export interface Service {
+  slug: string;
+  title: string;
+  subtitle: string;
+  price: string;
+  duration: string;
+  image: string;
+  shortDescription: string;
+  longDescription: string;
+  heroHeading: TextConfig[];
+  whatIsIt: string;
+  process: string[];
+  idealFor: string[];
+  maintenance: string;
+  faqs: { question: string; answer: string }[];
+  seoTitle: string;
+  seoDescription: string;
+}

package/app/utils/colour-scheme-init.ts

@@ -0,0 +1,17 @@
+// utils/colour-scheme-init.ts
+export const COLOUR_SCHEME_KEY = "colourScheme";
+export type ColourScheme = "auto" | "dark" | "light";
+
+export const getValidScheme = (value: string | null): ColourScheme => {
+  if (value === "dark" || value === "light" || value === "auto") return value;
+  return "auto";
+};
+
+export const applyColourScheme = (scheme: ColourScheme) => {
+  document.documentElement.dataset.colorScheme = scheme;
+};
+
+export const initColourScheme = () => {
+  const saved = localStorage.getItem(COLOUR_SCHEME_KEY);
+  applyColourScheme(getValidScheme(saved));
+};

package/nuxt.config.ts

@@ -1,23 +1,60 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  // css: ["modern-normalize", "./app/assets/styles/main.css"],
-  modules: ["@nuxt/eslint", "@nuxt/icon", "@nuxt/image", "@nuxtjs/i18n", "nuxt-qrcode"],
+
+  // Server-only secrets — Nuxt reads matching NUXT_* env vars automatically.
+  // e.g. NUXT_RESEND_API_KEY → runtimeConfig.resendApiKey
+  // These are never sent to the browser.
+  runtimeConfig: {
+    resendApiKey: "", // NUXT_RESEND_API_KEY
+    contactEmailTo: "", // NUXT_CONTACT_EMAIL_TO   — inbox that receives enquiries
+    contactEmailFrom: "", // NUXT_CONTACT_EMAIL_FROM — must be a verified Resend domain
+  },
+  css: ["./app/assets/styles/main.css"],
+  modules: [
+    "@nuxt/eslint",
+    "@nuxt/icon",
+    ...(process.env.STORYBOOK ? [] : ["@nuxt/fonts"]),
+    "@nuxt/image",
+    "@nuxtjs/i18n",
+    "nuxt-qrcode",
+    "@pinia/nuxt",
+    "@vueuse/motion/nuxt",
+    "pinia-plugin-persistedstate/nuxt",
+    "@nuxt/test-utils/module",
+  ],
   i18n: {
     defaultLocale: "en",
     locales: ["en"],
   },
+  imports: {
+    dirs: ["./stores"],
+  },
   app: {
     head: {
       htmlAttrs: {
         lang: "en",
-        "data-color-scheme": "auto",
       },
       titleTemplate: "%s - Nuxt Components Layer",
       meta: [{ charset: "utf-8" }, { name: "viewport", content: "width=device-width, initial-scale=1" }],
       bodyAttrs: {
         class: "srcdev-components-extended",
       },
+      script: [
+        {
+          // Inlined so it runs synchronously before first paint
+          innerHTML: `
+            (function() {
+              var saved = localStorage.getItem('colourScheme');
+              var valid = ['auto', 'dark', 'light'];
+              var scheme = valid.includes(saved) ? saved : 'auto';
+              document.documentElement.dataset.colorScheme = scheme;
+            })();
+          `,
+          tagPosition: "head",
+          tagPriority: "critical",
+        },
+      ],
     },
     pageTransition: {
       name: "page",
@@ -35,13 +72,56 @@ export default defineNuxtConfig({
       pathPrefix: false,
     },
   ],
+  fonts: {
+    assets: {
+      // The baseURL where font files are served.
+      prefix: "/_fonts",
+    },
+    families: [
+      {
+        name: "Poppins",
+        weights: [100, 200, 300, 400, 500, 600, 700, 800, 900],
+        styles: ["normal", "italic"],
+        provider: "bunny",
+      },
+      {
+        name: "Playfair Display",
+        weights: [400, 500, 600, 700, 800, 900],
+        styles: ["normal", "italic"],
+        provider: "bunny",
+      },
+      // {
+      //   name: "Quicksand",
+      //   weights: [300, 400, 500, 600, 700],
+      //   styles: ["normal"],
+      //   provider: "local",
+      //   display: "swap",
+      //   preload: false,
+      // },
+      // {
+      //   name: "Inter Variable",
+      //   styles: ["normal", "italic"],
+      //   provider: "fontsource",
+      // },
+    ],
+  },
+  image: {
+    // In Storybook, use 'none' provider so images render as plain /images/... paths
+    // (avoids /_vercel/image which has no source images in storybook-static/)
+    provider: process.env.STORYBOOK ? "none" : undefined,
+  },
   vue: {
     runtimeCompiler: true,
   },
-  compatibilityDate: "2024-11-01",
+  compatibilityDate: "2026-01-30",
   typescript: {
     includeWorkspace: true,
     strict: true,
-    typeCheck: true,
+    typeCheck: "build", // Enable type checking during build only - Fixes vue-tsc dependency issues
+    tsConfig: {
+      compilerOptions: {
+        types: ["vitest/globals"], // TypeScript support for globals
+      },
+    },
   },
-})
+});

package/package.json

@@ -1,21 +1,36 @@
 {
   "name": "srcdev-nuxt-components",
   "type": "module",
-  "version": "8.0.3",
+  "version": "9.0.0",
   "main": "nuxt.config.ts",
   "types": "types.d.ts",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.19.0",
+    "npm": ">=10.0.0"
+  },
   "scripts": {
-    "clean": "rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output",
-    "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm -rf .playground/.nuxt && rm -rf .playground/.output && rm -rf .playground/node_modules && rm package-lock.json",
+    "clean": "rm -rf .nuxt && rm -rf .output",
+    "cleanall": "rm -rf node_modules && rm -rf .nuxt && rm -rf .output && rm package-lock.json",
     "reinstall": "rm -rf node_modules && npm install",
     "cleaninstall": "npm run clean && npm run reinstall",
-    "dev": "nuxi dev .playground",
-    "build": "nuxt build .playground",
-    "generate": "nuxt generate .playground",
-    "preview": "nuxt preview .playground",
+    "dev": "nuxi dev",
+    "build": "nuxt build",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
     "lint": "eslint .",
-    "postinstall": "nuxt prepare .playground",
-    "release": "release-it"
+    "postinstall": "nuxt prepare",
+    "release": "release-it",
+    "test": "vitest",
+    "test:run": "vitest --run",
+    "test:ui": "vitest --ui",
+    "test:update": "vitest --update",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build",
+    "storybook:serve": "npm run storybook:build && npx http-server storybook-static --port 6006",
+    "storybook:cache:clean": "rm -rf node_modules/.cache/storybook node_modules/.vite",
+    "playwright": "npx playwright test",
+    "playwright:update": "npx playwright test --update-snapshots"
   },
   "files": [
     "app/",
@@ -25,24 +40,35 @@
     "types.d.ts"
   ],
   "devDependencies": {
+    "@chromatic-com/storybook": "4.1.2",
     "@iconify-json/akar-icons": "1.2.7",
     "@iconify-json/bi": "1.2.7",
     "@iconify-json/bitcoin-icons": "1.2.4",
-    "@iconify-json/gravity-ui": "1.2.10",
+    "@iconify-json/gravity-ui": "1.2.11",
     "@iconify-json/material-symbols": "1.2.53",
     "@iconify-json/mdi": "1.2.3",
     "@nuxt/eslint": "1.13.0",
     "@nuxt/icon": "2.2.1",
     "@nuxt/image": "2.0.0",
+    "@nuxt/test-utils": "3.23.0",
     "@nuxtjs/i18n": "10.2.1",
-    "@vueuse/core": "14.1.0",
+    "@nuxtjs/storybook": "9.1.0-29374011.dab79ae",
+    "@pinia/nuxt": "0.11.3",
+    "@playwright/test": "1.58.2",
+    "@storybook/addon-a11y": "10.0.7",
+    "@storybook/addon-docs": "10.0.7",
+    "@storybook/builder-vite": "10.0.7",
+    "@vue/test-utils": "2.4.6",
     "eslint": "9.39.2",
-    "focus-trap-vue": "4.1.0",
-    "nuxt": "4.3.0",
+    "eslint-plugin-storybook": "10.0.7",
+    "happy-dom": "20.5.0",
     "nuxt-qrcode": "0.4.8",
     "patch-package": "8.0.1",
     "release-it": "19.2.4",
-    "typescript": "5.9.3"
+    "storybook": "10.0.7",
+    "typescript": "5.9.3",
+    "vitest": "3.2.4",
+    "vue-tsc": "3.2.4"
   },
   "release-it": {
     "$schema": "https://unpkg.com/release-it/schema/release-it.json",
@@ -53,5 +79,16 @@
       "release": true,
       "releaseName": "v${version}"
     }
+  },
+  "dependencies": {
+    "@nuxt/fonts": "0.14.0",
+    "@oddbird/css-anchor-positioning": "0.9.0",
+    "@vueuse/core": "14.2.0",
+    "@vueuse/motion": "^3.0.3",
+    "focus-trap-vue": "4.1.0",
+    "nuxt": "4.3.0",
+    "pinia": "3.0.4",
+    "pinia-plugin-persistedstate": "4.7.1",
+    "zod": "4.3.6"
   }
 }

package/types/components/css-anchor-polyfill.d.ts

@@ -0,0 +1 @@
+declare module "@oddbird/css-anchor-positioning/polyfill";