storyloco 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Storyloco
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,210 @@
+# Storyloco
+
+A collection of slick Storyblok field plugins built with Svelte 5, TypeScript, and Tailwind CSS. Each plugin is designed to be lightweight, performant, and a joy to use.
+
+## 🚀 What's Included
+
+### Field Plugins
+
+- **🎬 Mux Video** - Upload, manage, and configure videos with Mux integration
+- **📝 Heading** - Simple heading editor with level selection (H1-H6)
+- **🎨 Theme** - Color theme selector with visual previews
+
+### Shared Components
+
+A comprehensive UI component library built with:
+
+- **Svelte 5** - Latest reactive framework
+- **Tailwind CSS** - Utility-first styling
+- **Bits UI** - Headless component primitives
+- **TypeScript** - Full type safety
+
+## 📦 Installation
+
+```bash
+bun add storyloco
+```
+
+## 🎯 Usage
+
+### Import Types
+
+```typescript
+// Import specific plugin types
+import type { Video } from 'storyloco/mux'
+import type { Heading } from 'storyloco/heading'
+
+// Or import everything
+import type { Video, Heading } from 'storyloco'
+```
+
+### Use Shared Components
+
+```typescript
+import { Input, Label, Switch, Skeleton } from 'storyloco/shared'
+import { cn } from 'storyloco/shared/utils'
+```
+
+## 🔧 Development
+
+### Prerequisites
+
+- **Bun** (recommended) or Node.js 18+
+- **Storyblok** account for field plugin development
+
+### Setup
+
+```bash
+# Clone the repo
+git clone <your-repo-url>
+cd storyloco
+
+# Install dependencies
+bun install
+
+# Start development
+bun run dev
+```
+
+### Project Structure
+
+```
+storyloco/
+├── packages/
+│   ├── mux/          # Video upload & management plugin
+│   ├── heading/      # Heading editor plugin
+│   ├── theme/        # Theme selector plugin
+│   └── shared/       # UI component library
+├── src/
+│   └── index.ts      # Type exports
+└── package.json      # Root workspace config
+```
+
+### Adding New Plugins
+
+1. **Create plugin package**:
+
+   ```bash
+   bun run add-plugin
+   ```
+
+2. **Export types** in your plugin:
+
+   ```svelte
+   <script module lang="ts">
+     export interface YourType {
+       // your interface here
+     }
+   </script>
+   ```
+
+3. **Add to root exports** in `package.json`:
+
+   ```json
+   {
+   	"exports": {
+   		"./your-plugin": {
+   			"types": "./packages/your-plugin/src/app.svelte",
+   			"import": "./packages/your-plugin/src/app.svelte"
+   		}
+   	}
+   }
+   ```
+
+4. **Re-export in `src/index.ts`**:
+   ```typescript
+   export type { YourType } from '../packages/your-plugin/src/app.svelte'
+   ```
+
+## 🎨 Shared Components
+
+The shared package provides a comprehensive set of UI components:
+
+### Form Components
+
+- `Input` - Text input with proper styling
+- `Label` - Accessible form labels
+- `Switch` - Toggle switch component
+
+### Display Components
+
+- `Skeleton` - Loading skeleton component
+
+### Utilities
+
+- `cn()` - Class name utility (clsx + tailwind-merge)
+- `setup()` - Global setup function
+
+## 🔌 Field Plugin Development
+
+Each plugin follows the Storyblok field plugin pattern:
+
+```svelte
+<script lang="ts">
+  import { createFieldPlugin, type FieldPluginResponse } from '@storyblok/field-plugin'
+
+  interface YourData {
+    // your data structure
+  }
+
+  type Plugin = FieldPluginResponse<YourData | null>
+
+  let plugin: Plugin | null = $state(null)
+  let content: YourData = $state(initial_value)
+
+  onMount(() => {
+    createFieldPlugin({
+      enablePortalModal: true,
+      validateContent: (c) => {
+        // validation logic
+        return { content: validated_content }
+      },
+      onUpdateState: (state) => {
+        plugin = state as Plugin
+      },
+    })
+  })
+</script>
+```
+
+## 🚀 Deployment
+
+### Deploy Individual Plugins
+
+```bash
+# From the plugin directory
+cd packages/mux
+bun run deploy
+```
+
+### Build Shared Package
+
+```bash
+cd packages/shared
+bun run build
+```
+
+## 🛠️ Tech Stack
+
+- **Framework**: Svelte 5 with TypeScript
+- **Styling**: Tailwind CSS
+- **Components**: Shadcn Svelte, Bits UI primitives
+- **Build Tool**: Vite
+- **Package Manager**: Bun (recommended)
+- **Linting**: ESLint + Prettier
+
+## 📄 License
+
+MIT License - feel free to use this however you want, you absolute legend! 🎯
+
+## 🤝 Contributing
+
+1. Fork the repo
+2. Create your feature branch (`git checkout -b feature/amazing-feature`)
+3. Commit your changes (`git commit -m 'Add some amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing-feature`)
+5. Open a Pull Request
+
+---
+
+Built with ❤️ and a lot of swearing by the Storyloco team

package/package.json

@@ -0,0 +1,77 @@
+{
+	"name": "storyloco",
+	"version": "1.0.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/heading/src/app.svelte",
+		"packages/theme/src/app.svelte",
+		"packages/shared/dist"
+	],
+	"exports": {
+		".": {
+			"types": "./src/index.ts",
+			"import": "./src/index.ts"
+		},
+		"./mux": {
+			"types": "./packages/mux/src/app.svelte",
+			"import": "./packages/mux/src/app.svelte"
+		},
+		"./heading": {
+			"types": "./packages/heading/src/app.svelte",
+			"import": "./packages/heading/src/app.svelte"
+		},
+		"./theme": {
+			"types": "./packages/theme/src/app.svelte",
+			"import": "./packages/theme/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"
+	}
+}

package/packages/heading/README.md

@@ -0,0 +1,68 @@
+# Storyblok Field Plugin with "Vanilla" JavaScript
+
+This project was generated with `@storyblok/field-plugin-cli`.
+
+## Usage
+
+For development, run the application locally with
+
+```shell
+npm run dev
+```
+
+and open the [Sandbox](https://plugin-sandbox.storyblok.com/field-plugin/).
+
+To build the project, run
+
+```shell
+npm run build
+```
+
+Deploy the field plugin with the CLI. Issue a [personal access token](https://app.storyblok.com/#/me/account?tab=token), rename `.env.local.example` to `.env.example`, open the file, set the value `STORYBLOK_PERSONAL_ACCESS_TOKEN`, and run
+
+```shell
+npm run deploy
+```
+
+## Manifest File for Field Plugins
+
+The manifest file is a configuration that enhances the functionality of your field plugin. This JSON file, named `field-plugin.config.json` and located in your project's root folder, is optional but highly recommended.
+
+The manifest file allows you to configure [options](https://www.storyblok.com/docs/plugins/field-plugins/introduction#options) for your field plugin. When developing your field plugin with the [Sandbox](https://plugin-sandbox.storyblok.com/field-plugin/), the options are applied by default. Also, the deploy command automatically applies the options in production. So, you no longer need to configure the options manually.
+
+### Configuring a Manifest File
+
+The options list within the file `field-plugin.config.json` should consist of key-value objects representing the essential options required for your field plugin to function correctly, along with their corresponding values. This is an example of how it should be structured:
+
+```json
+{
+	"options": [
+		{
+			"name": "myPluginInitialValue",
+			"value": 100
+		}
+	]
+}
+```
+
+Now, you just need to access these options in your code like in the example below:
+
+```js
+console.log(data.options.myPluginInitialValue)
+```
+
+## Clean up the boilerplate
+
+To start from a blank state, delete the following files:
+
+- src/components/components.js
+
+And search for comments `DELETE THIS BOILERPLATE` comments and delete the code around them.
+
+## Continuous delivery
+
+Set up [continuous delivery](https://www.storyblok.com/docs/plugins/field-plugins/continuous-delivery) with the CLI. Define an environmental variable `STORYBLOK_PERSONAL_ACCESS_TOKEN`, and use the `--name` and `--skipPrompts` options as such:
+
+```shell
+npm run deploy --name $NAME --skipPrompts
+```

package/packages/heading/src/app.svelte

@@ -0,0 +1,64 @@
+<script module lang="ts">
+	export interface Heading {
+		text: string
+		level: 1 | 2 | 3 | 4 | 5 | 6
+	}
+</script>
+
+<script lang="ts">
+	import { createFieldPlugin, type FieldPluginResponse } from '@storyblok/field-plugin'
+	import { onMount } from 'svelte'
+	import { Input } from 'shared'
+
+	type Plugin = FieldPluginResponse<Heading | null>
+
+	let plugin: Plugin | null = $state(null)
+	let content: Heading = $state({ text: '', level: 1 })
+
+	onMount(() => {
+		createFieldPlugin({
+			enablePortalModal: true,
+			validateContent: (content) => {
+				if (typeof content !== 'object' || content === null) {
+					return { content: { text: '', level: 1 } as Heading }
+				}
+
+				const validated = content as Heading
+				// ensure level is one of the allowed values
+				if (![1, 2, 3, 4, 5, 6].includes(validated.level)) {
+					validated.level = 1
+				}
+				// ensure text is a string
+				if (typeof validated.text !== 'string') {
+					validated.text = ''
+				}
+
+				return { content: validated }
+			},
+			onUpdateState: (state) => {
+				plugin = state as Plugin
+			},
+		})
+	})
+
+	function update() {
+		if (plugin?.type !== 'loaded') return
+		const state = $state.snapshot(content)
+		plugin.actions.setContent(state)
+	}
+</script>
+
+{#if plugin?.type === 'loaded'}
+	<fieldset class="flex gap-2">
+		<Input class="flex-1" bind:value={content.text} oninput={update} />
+		<select
+			class="rounded outline-none focus-visible:border-ring border-input bg-white border dark:bg-input/30"
+			bind:value={() => content.level, (v) => (content.level = Number(v) as Heading['level'])}
+			onchange={update}
+		>
+			{#each [1, 2, 3, 4, 5, 6] as level}
+				<option value={level}>H{level}</option>
+			{/each}
+		</select>
+	</fieldset>
+{/if}

package/packages/mux/README.md

@@ -0,0 +1,68 @@
+# Storyblok Field Plugin with "Vanilla" JavaScript
+
+This project was generated with `@storyblok/field-plugin-cli`.
+
+## Usage
+
+For development, run the application locally with
+
+```shell
+npm run dev
+```
+
+and open the [Sandbox](https://plugin-sandbox.storyblok.com/field-plugin/).
+
+To build the project, run
+
+```shell
+npm run build
+```
+
+Deploy the field plugin with the CLI. Issue a [personal access token](https://app.storyblok.com/#/me/account?tab=token), rename `.env.local.example` to `.env.example`, open the file, set the value `STORYBLOK_PERSONAL_ACCESS_TOKEN`, and run
+
+```shell
+npm run deploy
+```
+
+## Manifest File for Field Plugins
+
+The manifest file is a configuration that enhances the functionality of your field plugin. This JSON file, named `field-plugin.config.json` and located in your project's root folder, is optional but highly recommended.
+
+The manifest file allows you to configure [options](https://www.storyblok.com/docs/plugins/field-plugins/introduction#options) for your field plugin. When developing your field plugin with the [Sandbox](https://plugin-sandbox.storyblok.com/field-plugin/), the options are applied by default. Also, the deploy command automatically applies the options in production. So, you no longer need to configure the options manually.
+
+### Configuring a Manifest File
+
+The options list within the file `field-plugin.config.json` should consist of key-value objects representing the essential options required for your field plugin to function correctly, along with their corresponding values. This is an example of how it should be structured:
+
+```json
+{
+	"options": [
+		{
+			"name": "myPluginInitialValue",
+			"value": 100
+		}
+	]
+}
+```
+
+Now, you just need to access these options in your code like in the example below:
+
+```js
+console.log(data.options.myPluginInitialValue)
+```
+
+## Clean up the boilerplate
+
+To start from a blank state, delete the following files:
+
+- src/components/components.js
+
+And search for comments `DELETE THIS BOILERPLATE` comments and delete the code around them.
+
+## Continuous delivery
+
+Set up [continuous delivery](https://www.storyblok.com/docs/plugins/field-plugins/continuous-delivery) with the CLI. Define an environmental variable `STORYBLOK_PERSONAL_ACCESS_TOKEN`, and use the `--name` and `--skipPrompts` options as such:
+
+```shell
+npm run deploy --name $NAME --skipPrompts
+```