storyloco 1.1.0 → 1.2.0

package/README.md

@@ -11,6 +11,10 @@ A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, a
 - **🎨 Theme** - Color theme selector with visual previews
 - **🔗 Link** - Link editor with support for internal, external, email, and asset links
 
+### Vite Plugins
+
+- **📋 Storyblok Schema** - Automatically generate TypeScript types from your Storyblok components
+
 ### Shared Components
 
 A comprehensive UI component library built with:
@@ -47,6 +51,41 @@ import { Input, Label, Switch, Skeleton, Select, Separator } from 'storyloco/sha
 import { cn } from 'storyloco/shared/utils'
 ```
 
+### Vite Plugins
+
+#### Storyblok Schema Plugin
+
+Automatically generate TypeScript types from your Storyblok components during development:
+
+```typescript
+// vite.config.ts
+import { storyblok_schema } from 'storyloco/vite'
+
+export default defineConfig({
+	plugins: [
+		storyblok_schema({
+			output_path: 'src/lib/storyblok',
+			interval_ms: 60000 // regenerate every minute
+		})
+	]
+})
+```
+
+**Options:**
+
+- `storyblok_personal_access_token` - Your Storyblok personal access token (defaults to `STORYBLOK_PERSONAL_ACCESS_TOKEN` env var)
+- `storyblok_space_id` - Your Storyblok space ID (defaults to `STORYBLOK_SPACE_ID` env var)
+- `output_path` - Where to output generated files (defaults to `src/lib`)
+- `interval_ms` - How often to regenerate types (defaults to 60000ms)
+
+The plugin will:
+
+- Pull your component schema from Storyblok
+- Generate TypeScript definitions
+- Format the output with Prettier
+- Lock the generated file to prevent manual edits
+- Regenerate automatically when components change
+
 ## 🔧 Development
 
 ### Prerequisites

package/package.json

@@ -1,75 +1,81 @@
 {
-	"name": "storyloco",
-	"version": "1.1.0",
-	"description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
-	"keywords": [
-		"storyblok",
-		"field-plugin",
-		"svelte",
-		"typescript",
-		"tailwind",
-		"cms",
-		"headless"
-	],
-	"license": "MIT",
-	"repository": {
-		"type": "git",
-		"url": "https://github.com/darbymanning/storyloco.git"
-	},
-	"main": "./src/index.ts",
-	"types": "./src/index.ts",
-	"files": [
-		"src",
-		"packages/mux/src/app.svelte",
-		"packages/mux/types.ts",
-		"packages/heading/src/app.svelte",
-		"packages/heading/types.ts",
-		"packages/theme/src/app.svelte",
-		"packages/shared/dist"
-	],
-	"exports": {
-		".": {
-			"types": "./src/index.ts",
-			"import": "./src/index.ts"
-		},
-		"./mux": {
-			"types": "./packages/mux/types.ts",
-			"import": "./packages/mux/src/app.svelte"
-		},
-		"./heading": {
-			"types": "./packages/heading/types.ts",
-			"import": "./packages/heading/src/app.svelte"
-		},
-		"./shared": {
-			"types": "./packages/shared/dist/index.d.ts",
-			"svelte": "./packages/shared/dist/index.js"
-		},
-		"./shared/utils": {
-			"types": "./packages/shared/dist/utils.d.ts",
-			"svelte": "./packages/shared/dist/utils.js"
-		}
-	},
-	"devDependencies": {
-		"@types/node": "24.0.0",
-		"@typescript-eslint/eslint-plugin": "8.34.0",
-		"@typescript-eslint/parser": "8.34.0",
-		"eslint": "9.28.0",
-		"eslint-plugin-prettier": "5.4.1",
-		"kitto": "1.0.0-rc.12",
-		"prettier": "3.5.3",
-		"typescript": "5.8.3",
-		"vite": "6.3.5"
-	},
-	"scripts": {
-		"add-plugin": "npx @storyblok/field-plugin-cli@latest add --dir \"./packages\" --structure monorepo",
-		"lint": "eslint --ext .js .",
-		"format": "prettier . --write"
-	},
-	"type": "module",
-	"workspaces": [
-		"packages/*"
-	],
-	"dependencies": {
-		"color": "5.0.0"
-	}
+  "name": "storyloco",
+  "version": "1.2.0",
+  "description": "A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS",
+  "keywords": [
+    "storyblok",
+    "field-plugin",
+    "svelte",
+    "typescript",
+    "tailwind",
+    "cms",
+    "headless"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/darbymanning/storyloco.git"
+  },
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "files": [
+    "src",
+    "packages/mux/src/app.svelte",
+    "packages/mux/types.ts",
+    "packages/heading/src/app.svelte",
+    "packages/heading/types.ts",
+    "packages/theme/src/app.svelte",
+    "packages/shared/dist",
+    "packages/vite/dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./mux": {
+      "types": "./packages/mux/types.ts",
+      "import": "./packages/mux/src/app.svelte"
+    },
+    "./heading": {
+      "types": "./packages/heading/types.ts",
+      "import": "./packages/heading/src/app.svelte"
+    },
+    "./shared": {
+      "types": "./packages/shared/dist/index.d.ts",
+      "svelte": "./packages/shared/dist/index.js"
+    },
+    "./shared/utils": {
+      "types": "./packages/shared/dist/utils.d.ts",
+      "svelte": "./packages/shared/dist/utils.js"
+    },
+    "./vite": {
+      "types": "./packages/vite/dist/index.d.ts",
+      "import": "./packages/vite/dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "@types/node": "24.0.0",
+    "@typescript-eslint/eslint-plugin": "8.34.0",
+    "@typescript-eslint/parser": "8.34.0",
+    "eslint": "9.28.0",
+    "eslint-plugin-prettier": "5.4.1",
+    "kitto": "1.0.0-rc.12",
+    "prettier": "3.5.3",
+    "typescript": "5.8.3",
+    "vite": "6.3.5"
+  },
+  "scripts": {
+    "add-plugin": "npx @storyblok/field-plugin-cli@latest add --dir \"./packages\" --structure monorepo",
+    "build": "cd packages/vite && npm run build && cd ../../packages/shared && npm run build",
+    "lint": "eslint --ext .js .",
+    "format": "prettier . --write"
+  },
+  "type": "module",
+  "workspaces": [
+    "packages/*"
+  ],
+  "dependencies": {
+    "color": "5.0.0"
+  }
 }

package/packages/vite/dist/components.schema.d.ts

@@ -0,0 +1,160 @@
+/**
+ * AUTO-GENERATED FILE. DO NOT EDIT.
+ * Generated by the generate script on 2025-06-23T18:21:25.609Z.
+ * Any changes will be overwritten.
+ */
+import type { SbBlokData } from "@storyblok/svelte";
+export type Blok<T> = SbBlokData & T;
+export type { StoryblokStory } from "storyblok-generate-ts";
+export interface ActionsStoryblok {
+    title?: string;
+    items?: LinkStoryblok[];
+    anchor?: string;
+    _uid: string;
+    component: "actions";
+}
+export interface AssetStoryblok {
+    _uid?: string;
+    id: number | null;
+    alt: string | null;
+    name: string;
+    focus: string | null;
+    source: string | null;
+    title: string | null;
+    filename: string;
+    copyright: string | null;
+    fieldtype?: string;
+    meta_data?: null | {};
+    is_external_url?: boolean;
+}
+export interface CardStoryblok {
+    image?: AssetStoryblok;
+    title?: string;
+    subtitle?: string;
+    _uid: string;
+    component: "card";
+}
+export interface CardsStoryblok {
+    title?: string;
+    subtitle?: string;
+    items?: CardStoryblok[];
+    anchor?: string;
+    _uid: string;
+    component: "cards";
+}
+export interface RichtextStoryblok {
+    type: string;
+    content?: RichtextStoryblok[];
+    marks?: RichtextStoryblok[];
+    attrs?: unknown;
+    text?: string;
+}
+export interface HeroStoryblok {
+    anchor?: string;
+    title?: string;
+    subtitle?: string;
+    body?: RichtextStoryblok;
+    title_tag?: "" | "h1" | "h2" | "h3";
+    subtitle_tag?: number | string;
+    _uid: string;
+    component: "hero";
+}
+export type MultiassetStoryblok = {
+    alt?: string;
+    copyright?: string;
+    id: number;
+    filename: string;
+    name: string;
+    title?: string;
+}[];
+export interface LayoutStoryblok {
+    footer_title?: string;
+    footer_links?: LinkStoryblok[];
+    social_links?: SocialMediaStoryblok[];
+    contact_email?: string;
+    contact_tel?: string;
+    address?: string;
+    partners?: MultiassetStoryblok;
+    header_links?: LinkStoryblok[];
+    _uid: string;
+    component: "layout";
+}
+export interface LinkStoryblok {
+    _uid: string;
+    component: "link";
+}
+export interface NewsStoryblok {
+    anchor?: string;
+    _uid: string;
+    component: "news";
+}
+export interface PageStoryblok {
+    blocks?: unknown[];
+    _uid: string;
+    component: "page";
+    uuid?: string;
+}
+export interface QuoteStoryblok {
+    suptitle?: string;
+    title?: string;
+    subtitle?: string;
+    image?: AssetStoryblok;
+    _uid: string;
+    component: "quote";
+}
+export interface QuotesStoryblok {
+    items?: QuoteStoryblok[];
+    _uid: string;
+    component: "quotes";
+}
+export interface SocialMediaStoryblok {
+    platform: "" | "facebook" | "instagram" | "linkedin" | "whatsapp";
+    link: string;
+    _uid: string;
+    component: "social_media";
+}
+export type MultilinkStoryblok = {
+    id?: string;
+    cached_url?: string;
+    anchor?: string;
+    linktype?: "story";
+    target?: "_self" | "_blank";
+} | {
+    url?: string;
+    cached_url?: string;
+    anchor?: string;
+    linktype?: "asset" | "url";
+    target?: "_self" | "_blank";
+} | {
+    email?: string;
+    linktype?: "email";
+    target?: "_self" | "_blank";
+};
+export interface TabStoryblok {
+    image?: AssetStoryblok;
+    title?: string;
+    subtitle?: string;
+    body?: RichtextStoryblok;
+    cta?: string;
+    link?: Exclude<MultilinkStoryblok, {
+        linktype?: "email";
+    } | {
+        linktype?: "asset";
+    }>;
+    _uid: string;
+    component: "tab";
+}
+export interface TabsStoryblok {
+    items?: TabStoryblok[];
+    _uid: string;
+    component: "tabs";
+}
+export interface TextImageStoryblok {
+    anchor?: string;
+    image?: AssetStoryblok;
+    title?: string;
+    body?: RichtextStoryblok;
+    theme?: number | string;
+    _uid: string;
+    component: "text_image";
+}

package/packages/vite/dist/components.schema.js

@@ -0,0 +1,6 @@
+/**
+ * AUTO-GENERATED FILE. DO NOT EDIT.
+ * Generated by the generate script on 2025-06-23T18:21:25.609Z.
+ * Any changes will be overwritten.
+ */
+export {};