install all the new toys

kitsune-soc · Jan 16, 2025 · 1324ae5 · 1324ae5
1 parent bee3157
commit 1324ae5
Show file tree

Hide file tree

Showing 46 changed files with 3,399 additions and 66 deletions.
diff --git a/kitsune-fe/.gitignore b/kitsune-fe/.gitignore
@@ -11,3 +11,8 @@ vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 
 $houdini
+
+# Paraglide
+src/lib/paraglide
+
+*storybook.log
diff --git a/kitsune-fe/.storybook/main.ts b/kitsune-fe/.storybook/main.ts
@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/sveltekit';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|ts|svelte)'],
+	addons: [
+		'@storybook/addon-svelte-csf',
+		'@storybook/addon-essentials',
+		'@chromatic-com/storybook',
+		'@storybook/addon-interactions'
+	],
+	framework: {
+		name: '@storybook/sveltekit',
+		options: {}
+	}
+};
+export default config;
diff --git a/kitsune-fe/.storybook/preview.ts b/kitsune-fe/.storybook/preview.ts
@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/svelte';
+
+import '../src/app.css';
+
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i
+			}
+		}
+	}
+};
+
+export default preview;
diff --git a/kitsune-fe/messages/en.json b/kitsune-fe/messages/en.json
@@ -0,0 +1,4 @@
+{
+	"$schema": "https://inlang.com/schema/inlang-message-format",
+	"hello_world": "Hello, {name} from en!"
+}
diff --git a/kitsune-fe/package.json b/kitsune-fe/package.json
@@ -13,10 +13,20 @@
 		"test": "pnpm run test:unit -- --run",
 		"lint": "prettier --check . && eslint .",
 		"fmt": "prettier --write .",
-		"test:unit": "vitest"
+		"test:unit": "vitest",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"devDependencies": {
+		"@chromatic-com/storybook": "^3.2.3",
 		"@iconify-json/eos-icons": "^1.2.2",
+		"@storybook/addon-essentials": "^8.5.0",
+		"@storybook/addon-interactions": "^8.5.0",
+		"@storybook/addon-svelte-csf": "^5.0.0-next.23",
+		"@storybook/blocks": "^8.5.0",
+		"@storybook/svelte": "^8.5.0",
+		"@storybook/sveltekit": "^8.5.0",
+		"@storybook/test": "^8.5.0",
 		"@sveltejs/adapter-static": "^3.0.8",
 		"@sveltejs/kit": "^2.15.2",
 		"@sveltejs/vite-plugin-svelte": "5.0.3",
@@ -36,6 +46,7 @@
 		"prettier-plugin-css-order": "^2.1.2",
 		"prettier-plugin-svelte": "^3.3.2",
 		"prettier-plugin-tailwindcss": "^0.6.9",
+		"storybook": "^8.5.0",
 		"svelte": "^5.17.3",
 		"svelte-check": "^4.1.3",
 		"tailwindcss": "^3.4.17",
@@ -45,5 +56,8 @@
 		"vite": "^6.0.7",
 		"vitest": "^2.1.8",
 		"zod": "^3.24.1"
+	},
+	"dependencies": {
+		"@inlang/paraglide-sveltekit": "^0.11.1"
 	}
 }
diff --git a/kitsune-fe/project.inlang/.gitignore b/kitsune-fe/project.inlang/.gitignore
@@ -0,0 +1 @@
+cache
diff --git a/kitsune-fe/project.inlang/project_id b/kitsune-fe/project.inlang/project_id
@@ -0,0 +1 @@
+6f9f64b72ff4fdf2638086d1a8e0562fce1876cf41c1a0599dbd8306fe1a32dc
diff --git a/kitsune-fe/project.inlang/settings.json b/kitsune-fe/project.inlang/settings.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "https://inlang.com/schema/project-settings",
+	"modules": [
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-empty-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-identical-pattern@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-missing-translation@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-without-source@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/message-lint-rule-valid-js-identifier@1/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-message-format@2/dist/index.js",
+		"https://cdn.jsdelivr.net/npm/@inlang/plugin-m-function-matcher@0/dist/index.js"
+	],
+	"plugin.inlang.messageFormat": {
+		"pathPattern": "./messages/{languageTag}.json"
+	},
+	"sourceLanguageTag": "en",
+	"languageTags": ["en"]
+}
diff --git a/kitsune-fe/src/app.html b/kitsune-fe/src/app.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="%paraglide.lang%" dir="%paraglide.textDirection%">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />

diff --git a/kitsune-fe/src/hooks.server.ts b/kitsune-fe/src/hooks.server.ts
@@ -0,0 +1,5 @@
+import { i18n } from '$lib/i18n';
+import type { Handle } from '@sveltejs/kit';
+
+const handleParaglide: Handle = i18n.handle();
+export const handle: Handle = handleParaglide;
diff --git a/kitsune-fe/src/hooks.ts b/kitsune-fe/src/hooks.ts
@@ -0,0 +1,3 @@
+import { i18n } from '$lib/i18n';
+
+export const reroute = i18n.reroute();
diff --git a/kitsune-fe/src/lib/i18n.ts b/kitsune-fe/src/lib/i18n.ts
@@ -0,0 +1,4 @@
+import * as runtime from '$lib/paraglide/runtime';
+import { createI18n } from '@inlang/paraglide-sveltekit';
+
+export const i18n = createI18n(runtime);
diff --git a/kitsune-fe/src/routes/+layout.svelte b/kitsune-fe/src/routes/+layout.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
 	import { version as frontendVersion } from '$app/environment';
+	import { i18n } from '$lib/i18n';
+	import { ParaglideJS } from '@inlang/paraglide-sveltekit';
 
 	import type { Snippet } from 'svelte';
 
@@ -18,16 +20,18 @@
 	<meta name="darkreader-lock" />
 </svelte:head>
 
-{@render children()}
-
-<footer class="w-full text-sm max-lg:mb-5 max-lg:text-center lg:fixed lg:bottom-3 lg:left-3">
-	<p>
-		Backend version: {backendVersion}
-		<br />Frontend version: {frontendVersion}
-	</p>
-
-	<span>
-		Powered by
-		<a target="_blank" href="https://github.com/kitsune-soc/kitsune">Kitsune</a>
-	</span>
-</footer>
+<ParaglideJS {i18n}>
+	{@render children()}
+
+	<footer class="w-full text-sm max-lg:mb-5 max-lg:text-center lg:fixed lg:bottom-3 lg:left-3">
+		<p>
+			Backend version: {backendVersion}
+			<br />Frontend version: {frontendVersion}
+		</p>
+
+		<span>
+			Powered by
+			<a target="_blank" href="https://github.com/kitsune-soc/kitsune">Kitsune</a>
+		</span>
+	</footer>
+</ParaglideJS>
diff --git a/kitsune-fe/src/routes/demo/+page.svelte b/kitsune-fe/src/routes/demo/+page.svelte
@@ -0,0 +1 @@
+<a href="/demo/paraglide">paraglide</a>
diff --git a/kitsune-fe/src/routes/demo/paraglide/+page.svelte b/kitsune-fe/src/routes/demo/paraglide/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
+	import { i18n } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages.js';
+	import type { AvailableLanguageTag } from '$lib/paraglide/runtime';
+
+	function switchToLanguage(newLanguage: AvailableLanguageTag) {
+		const canonicalPath = i18n.route(page.url.pathname);
+		const localisedPath = i18n.resolveRoute(canonicalPath, newLanguage);
+		goto(localisedPath);
+	}
+</script>
+
+<h1>{m.hello_world({ name: 'SvelteKit User' })}</h1>
+<div>
+	<button onclick={() => switchToLanguage('en')}>en</button>
+</div>
diff --git a/kitsune-fe/src/stories/Button.stories.svelte b/kitsune-fe/src/stories/Button.stories.svelte
@@ -0,0 +1,32 @@
+<script module>
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { fn } from '@storybook/test';
+
+	import Button from './Button.svelte';
+
+	// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+	const { Story } = defineMeta({
+		title: 'Example/Button',
+		component: Button,
+		tags: ['autodocs'],
+		argTypes: {
+			backgroundColor: { control: 'color' },
+			size: {
+				control: { type: 'select' },
+				options: ['small', 'medium', 'large']
+			}
+		},
+		args: {
+			onClick: fn()
+		}
+	});
+</script>
+
+<!-- More on writing stories with args: https://storybook.js.org/docs/writing-stories/args -->
+<Story name="Primary" args={{ primary: true, label: 'Button' }} />
+
+<Story name="Secondary" args={{ label: 'Button' }} />
+
+<Story name="Large" args={{ size: 'large', label: 'Button' }} />
+
+<Story name="Small" args={{ size: 'small', label: 'Button' }} />
diff --git a/kitsune-fe/src/stories/Button.svelte b/kitsune-fe/src/stories/Button.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import './button.css';
+
+	interface Props {
+		/** Is this the principal call to action on the page? */
+		primary?: boolean;
+		/** What background color to use */
+		backgroundColor?: string;
+		/** How large should the button be? */
+		size?: 'small' | 'medium' | 'large';
+		/** Button contents */
+		label: string;
+		/** The onclick event handler */
+		onClick?: () => void;
+	}
+
+	const { primary = false, backgroundColor, size = 'medium', label, onClick }: Props = $props();
+</script>
+
+<button
+	type="button"
+	class={['storybook-button', `storybook-button--${size}`].join(' ')}
+	class:storybook-button--primary={primary}
+	class:storybook-button--secondary={!primary}
+	style:background-color={backgroundColor}
+	onclick={onClick}
+>
+	{label}
+</button>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		6f9f64b72ff4fdf2638086d1a8e0562fce1876cf41c1a0599dbd8306fe1a32dc
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { i18n } from '$lib/i18n';

		export const reroute = i18n.reroute();