storyloco 1.0.0

package/packages/shared/dist/components/ui/label/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './label.svelte';
+export { Root, Root as Label, };

package/packages/shared/dist/components/ui/label/index.js

@@ -0,0 +1,4 @@
+import Root from './label.svelte';
+export { Root, 
+//
+Root as Label, };

package/packages/shared/dist/components/ui/label/label.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { Label as LabelPrimitive } from 'bits-ui'
+	import { cn } from '../../../utils.js'
+
+	let { ref = $bindable(null), class: classname, ...rest }: LabelPrimitive.RootProps = $props()
+</script>
+
+<LabelPrimitive.Root
+	bind:ref
+	data-slot="label"
+	class={cn(
+		'flex select-none items-center gap-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50 group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50',
+		classname
+	)}
+	{...rest}
+/>

package/packages/shared/dist/components/ui/label/label.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Label as LabelPrimitive } from 'bits-ui';
+declare const Label: import("svelte").Component<LabelPrimitive.RootProps, {}, "ref">;
+type Label = ReturnType<typeof Label>;
+export default Label;

package/packages/shared/dist/components/ui/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './skeleton.svelte';
+export { Root, Root as Skeleton, };

package/packages/shared/dist/components/ui/skeleton/index.js

@@ -0,0 +1,4 @@
+import Root from './skeleton.svelte';
+export { Root, 
+//
+Root as Skeleton, };

package/packages/shared/dist/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js'
+	import type { HTMLAttributes } from 'svelte/elements'
+
+	let {
+		ref = $bindable(null),
+		class: classname,
+		...rest
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props()
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn('bg-muted animate-pulse rounded-md', classname)}
+	{...rest}
+></div>

package/packages/shared/dist/components/ui/skeleton/skeleton.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+declare const Skeleton: import("svelte").Component<Omit<WithElementRef<HTMLAttributes<HTMLDivElement>>, "children">, {}, "ref">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/packages/shared/dist/components/ui/switch/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './switch.svelte';
+export { Root, Root as Switch, };

package/packages/shared/dist/components/ui/switch/index.js

@@ -0,0 +1,4 @@
+import Root from './switch.svelte';
+export { Root, 
+//
+Root as Switch, };

package/packages/shared/dist/components/ui/switch/switch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch as SwitchPrimitive } from 'bits-ui'
+	import { cn, type WithoutChildrenOrChild } from '../../../utils.js'
+
+	let {
+		ref = $bindable(null),
+		class: classname,
+		checked = $bindable(false),
+		...rest
+	}: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props()
+</script>
+
+<SwitchPrimitive.Root
+	bind:ref
+	bind:checked
+	data-slot="switch"
+	class={cn(
+		'data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 shadow-xs peer inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent outline-none transition-all focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+		classname
+	)}
+	{...rest}
+>
+	<SwitchPrimitive.Thumb
+		data-slot="switch-thumb"
+		class={cn(
+			'bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0'
+		)}
+	/>
+</SwitchPrimitive.Root>

package/packages/shared/dist/components/ui/switch/switch.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Switch as SwitchPrimitive } from 'bits-ui';
+declare const Switch: import("svelte").Component<Omit<Omit<SwitchPrimitive.RootProps, "child">, "children">, {}, "checked" | "ref">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/packages/shared/dist/global.css

@@ -0,0 +1,161 @@
+@import 'tailwindcss';
+
+@import 'tw-animate-css';
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+:root {
+	--white: oklch(1 0 0);
+	--radius: 0.5rem;
+	--background: oklch(97.015% 0.00011 271.152);
+	--foreground: oklch(0.129 0.042 264.695);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.129 0.042 264.695);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.129 0.042 264.695);
+	--primary: oklch(54.32% 0.09196 193.854);
+	--primary-foreground: oklch(0.984 0.003 247.858);
+	--secondary: oklch(0.968 0.007 247.896);
+	--secondary-foreground: oklch(0.208 0.042 265.755);
+	--muted: oklch(0.968 0.007 247.896);
+	--muted-foreground: oklch(0.554 0.046 257.417);
+	--accent: oklch(0.968 0.007 247.896);
+	--accent-foreground: oklch(0.208 0.042 265.755);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.929 0.013 255.508);
+	--input: oklch(0.929 0.013 255.508);
+	--ring: var(--primary);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.984 0.003 247.858);
+	--sidebar-foreground: oklch(0.129 0.042 264.695);
+	--sidebar-primary: oklch(0.208 0.042 265.755);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.968 0.007 247.896);
+	--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
+	--sidebar-border: oklch(0.929 0.013 255.508);
+	--sidebar-ring: oklch(0.704 0.04 256.788);
+
+	--font-sans: 'Roboto', sans-serif;
+	--text-base: 14px;
+}
+
+[data-modal-open='true'] {
+	--background: oklch(1 0 0);
+}
+
+[data-theme='dark'] {
+	--background: oklch(0.32 0 0);
+	--foreground: oklch(0.984 0.003 247.858);
+	--card: oklch(26.239% 0.00928 285.704);
+	--card-foreground: oklch(0.984 0.003 247.858);
+	--popover: oklch(0.208 0.042 265.755);
+	--popover-foreground: oklch(0.984 0.003 247.858);
+	--primary: oklch(54.32% 0.09196 193.854);
+	--primary-foreground: oklch(1 0 0);
+	--secondary: oklch(0.279 0.041 260.031);
+	--secondary-foreground: oklch(0.984 0.003 247.858);
+	--muted: oklch(32.303% 0.00881 285.843);
+	--muted-foreground: oklch(66.488% 0.02269 273.875);
+	--accent: oklch(0.279 0.041 260.031);
+	--accent-foreground: oklch(0.984 0.003 247.858);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: var(--primary);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.208 0.042 265.755);
+	--sidebar-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-accent: oklch(0.279 0.041 260.031);
+	--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.551 0.027 264.364);
+
+	&[data-modal-open='true'] {
+		--background: oklch(26.239% 0.00928 285.704);
+	}
+}
+
+@theme inline {
+	--font-sans: var(--font-sans);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground text-base;
+	}
+	button {
+		cursor: pointer;
+	}
+
+	select {
+		display: flex;
+		align-items: center;
+		padding: 0 30px 0 14px;
+		background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-position: right 0.53125rem center;
+		background-size: 1rem;
+		appearance: none;
+		color: var(--text-color);
+	}
+
+	[data-theme='dark'] {
+		select {
+			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+		}
+	}
+}
+
+@layer utilities {
+	.rounded {
+		border-radius: var(--radius);
+	}
+}

package/packages/shared/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { Input } from './components/ui/input/index.js';
+export { Label } from './components/ui/label/index.js';
+export { Skeleton } from './components/ui/skeleton/index.js';
+export { Switch } from './components/ui/switch/index.js';
+export { setup } from './setup.js';

package/packages/shared/dist/index.js

@@ -0,0 +1,7 @@
+// UI Components
+export { Input } from './components/ui/input/index.js';
+export { Label } from './components/ui/label/index.js';
+export { Skeleton } from './components/ui/skeleton/index.js';
+export { Switch } from './components/ui/switch/index.js';
+// Global
+export { setup } from './setup.js';

package/packages/shared/dist/setup.d.ts

@@ -0,0 +1,2 @@
+import { type Component } from 'svelte';
+export declare function setup(app: Component): void;

package/packages/shared/dist/setup.js

@@ -0,0 +1,25 @@
+import { mount } from 'svelte';
+function mode_setter() {
+    function set_theme(event) {
+        document.documentElement.setAttribute('data-theme', event.matches ? 'dark' : 'default');
+    }
+    const match_media = window.matchMedia('(prefers-color-scheme: dark)');
+    set_theme(match_media);
+    match_media.addEventListener('change', set_theme);
+    return function cleanup() {
+        match_media.removeEventListener('change', set_theme);
+    };
+}
+export function setup(app) {
+    let target = document.querySelector('#app');
+    if (!target) {
+        // In production, `#app` may or may not exist.
+        target = document.createElement('div');
+        target.id = 'app';
+        document.body.appendChild(target);
+    }
+    mode_setter();
+    mount(app, { target });
+    // This error replaces another error which message is harder to understand and impossible to avoid util the issue https://github.com/storyblok/field-plugin/issues/107 has been resolved.
+    throw new Error(`This error can be safely ignored. It is caused by the legacy field plugin API. See issue https://github.com/storyblok/field-plugin/issues/107`);
+}

package/packages/shared/dist/utils.d.ts

@@ -0,0 +1,12 @@
+import { type ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;
+export type WithoutChild<T> = T extends {
+    child?: any;
+} ? Omit<T, 'child'> : T;
+export type WithoutChildren<T> = T extends {
+    children?: any;
+} ? Omit<T, 'children'> : T;
+export type WithoutChildrenOrChild<T> = WithoutChildren<WithoutChild<T>>;
+export type WithElementRef<T, U extends HTMLElement = HTMLElement> = T & {
+    ref?: U | null;
+};

package/packages/shared/dist/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/packages/theme/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/theme/src/app.svelte

@@ -0,0 +1,114 @@
+<script lang="ts">
+	import { createFieldPlugin, type FieldPluginResponse } from '@storyblok/field-plugin'
+	import { onMount } from 'svelte'
+	import { snake } from 'radashi'
+	import Color from 'color'
+	import { cn } from 'shared/utils'
+
+	type Theme = {
+		name: string
+		hex: string
+		value: string
+	}
+
+	type Plugin = FieldPluginResponse<string | undefined>
+
+	let plugin: Plugin | null = $state(null)
+	let content: string | undefined = $state()
+
+	onMount(() => {
+		createFieldPlugin({
+			enablePortalModal: true,
+			validateContent: (content) => {
+				if (content === null || typeof content !== 'string') {
+					return { content: undefined }
+				}
+
+				return { content }
+			},
+			async onUpdateState(state) {
+				plugin = state as Plugin
+			},
+		})
+	})
+
+	function update() {
+		if (plugin?.type !== 'loaded') return
+		const state = $state.snapshot(content)
+		plugin.actions.setContent(state)
+	}
+
+	const themes: Array<Theme> = $derived.by(() => {
+		if (plugin?.type !== 'loaded') return []
+
+		return Object.entries(plugin.data.options).map(([key, value]) => {
+			return {
+				name: key,
+				hex: value,
+				value: snake(key),
+			}
+		})
+	})
+
+	function is_light(hex: string): boolean {
+		try {
+			return Color(hex).isLight()
+		} catch {
+			return false
+		}
+	}
+</script>
+
+{#if themes?.length}
+	<fieldset class="flex items-center gap-2">
+		{#each themes as { value, name, hex }, index}
+			{#snippet label(value: string)}
+				<input
+					class="sr-only [&:checked+label]:border-[var(--color)] [&:checked+label]:bg-[var(--color-hover)]/10"
+					id={value}
+					type="radio"
+					{value}
+					bind:group={content}
+					onchange={update}
+				/>
+				<label
+					for={value}
+					class={cn([
+						'flex items-center gap-2 p-3 px-4 border rounded relative border-transparent transition-colors cursor-pointer',
+						{
+							'bg-muted-foreground/10 hover:bg-[var(--color-hover)]/10': value !== 'none',
+						},
+					])}
+					class:selected={content === value}
+					style={value === 'none'
+						? ''
+						: `
+                     --color: ${hex};
+                     --color-hover: ${is_light(hex) ? Color(hex).darken(0.8).hex() : hex};
+               `}
+				>
+					{#if value === 'none'}
+						None
+					{:else}
+						<svg
+							class="size-4"
+							viewBox="0 0 183 184"
+							fill="none"
+							xmlns="http://www.w3.org/2000/svg"
+						>
+							<path
+								d="M133.476 6.95414C111.783 -4.24286 86.6097 0.589255 78.855 15.6182L78.816 15.6571C66.9435 3.6288 40.6656 6.34363 23.3116 23.5158C5.97051 40.675 4.10002 65.8488 16.0244 77.8772L15.9855 77.9161C0.865623 85.502 -4.40814 111.871 6.58103 133.693C17.5442 155.49 40.6527 164.492 55.7465 156.88L55.6426 156.984C59.7733 170.623 78.9849 184.483 100.794 183.638C125.189 182.677 145.725 160.14 143.166 143.423C159.858 146.137 178.082 130.017 182.031 105.909C185.967 81.813 174.12 58.8994 157.416 56.1456L157.455 56.1066C165.21 41.0777 155.208 18.1122 133.502 6.92815"
+								fill="var(--color)"
+							/>
+						</svg>
+						{name}
+					{/if}
+				</label>
+			{/snippet}
+			{#if index === 0}
+				{@render label('none')}
+			{/if}
+			{@render label(value)}
+		{/each}
+	</fieldset>
+{/if}

package/src/index.ts

@@ -0,0 +1,3 @@
+export type { Video } from '../packages/mux/src/app.svelte'
+export type { Heading } from '../packages/heading/src/app.svelte'
+// Add more exports as you create more packages