xeho91 · xeho91 · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024 · Aug 22, 2024
diff --git a/.changeset/chilled-rivers-love.md b/.changeset/chilled-rivers-love.md
@@ -0,0 +1,5 @@
+---
+"@xeho91/lib-feature": minor
+---
+
+✨ Add `component` module with:
diff --git a/apps/website/src/routes/+layout.svelte b/apps/website/src/routes/+layout.svelte
@@ -8,13 +8,11 @@ import "@fontsource-variable/jetbrains-mono/wght.css";
 import "@fontsource-variable/jetbrains-mono/wght-italic.css";
 
 import { Color } from "@xeho91/lib-design/color";
+import type { WithChildren } from "@xeho91/lib-feature/component";
 import { GlobalManagers } from "@xeho91/lib-feature/global";
 import { Content, Footer, Header, Main } from "@xeho91/lib-ui/layout/default";
-import type { Snippet } from "svelte";
 
-interface Props {
-	children: Snippet;
-}
+interface Props extends WithChildren {}
 
 let { children }: Props = $props();
 </script>

diff --git a/libs/css/src/property/text-shadow.ts b/libs/css/src/property/text-shadow.ts
@@ -34,7 +34,7 @@ export class TextShadowLayer<
 	}
 
 	public static create_reference = <TNumber extends number>(number: TNumber) =>
-		new Reference(`${TextShadowLayer.NAME}-layer-${number}`);
+		new Reference(`${TextShadowLayer.NAME}-${number}`);
 
 	public static create_atomized_layer = <TNumber extends number>(number: TNumber) => {
 		const prefix = `${TextShadowLayer.NAME}-${number}`;

diff --git a/libs/feature/package.json b/libs/feature/package.json
@@ -12,9 +12,7 @@
 		"#*": "./src/*.ts"
 	},
 	"exports": {
-		"./css": "./src/css/mod.ts",
-		"./global": "./src/global/mod.ts",
-		"./*": "./src/*.ts"
+		"./*": "./src/*/mod.ts"
 	},
 	"scripts": {
 		"clean": "pnpm run \"/^clean:.*/\" ",

diff --git a/libs/feature/src/component/mod.ts b/libs/feature/src/component/mod.ts
@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+
+export interface WithChildren<TParameters extends unknown[] = []> {
+	children: Snippet<TParameters>;
+}
+
+export interface WithOptionalChildren<TParameters extends unknown[] = []> {
+	children?: Snippet<TParameters>;
+}
diff --git a/libs/feature/src/css/Manager.svelte b/libs/feature/src/css/Manager.svelte
@@ -64,6 +64,8 @@ import { classes } from "./util";
 		:global(*) {
 			--box-shadow-color-light-lightness: 21%;
 			--box-shadow-color-dark-lightness: 15%;
+			--text-shadow-color-light-lightness: 21%;
+			--text-shadow-color-dark-lightness: 15%;
 		}
 	}
 

diff --git a/libs/feature/src/css/util.ts b/libs/feature/src/css/util.ts
@@ -1,3 +1,4 @@
+import type { Reference } from "@xeho91/lib-css/reference";
 import { SelectorClass } from "@xeho91/lib-css/selector/class";
 import { type ClassValue, clsx } from "clsx";
 import type { Action } from "svelte/action";
@@ -68,6 +69,11 @@ export const classes: Action<Element, Array<ClassInput | ClassInput[]>> = (node,
 	};
 };
 
+export interface WithAnchor {
+	anchor_name?: Reference;
+	anchor?: Reference;
+}
+
 export interface WithClass {
 	class?: ReturnType<typeof merge_classes>;
 }
diff --git a/libs/feature/src/global/Wrapper.svelte b/libs/feature/src/global/Wrapper.svelte
@@ -1,11 +1,8 @@
 <script lang="ts">
-import type { Snippet } from "svelte";
-
+import type { WithChildren } from "#component/mod";
 import { ManagerCSS } from "#css/mod";
 
-interface Props {
-	children: Snippet;
-}
+interface Props extends WithChildren {}
 
 let { children }: Props = $props();
 </script>

diff --git a/libs/storybook/src/component/download-image/DownloadImage.svelte b/libs/storybook/src/component/download-image/DownloadImage.svelte
@@ -4,13 +4,12 @@ export * from "./manager.svelte";
 
 <script lang="ts" generics="TWidth extends number = number, THeight extends number = number">
 import type { Rectangle } from "@xeho91/lib-geometry/two-dimension/rectangle";
+import type { WithChildren } from "@xeho91/lib-feature/component";
 import { Square } from "@xeho91/lib-geometry/two-dimension/square";
-import type { Snippet } from "svelte";
 
 import { DownloadImageManager, type ImageFormat } from "./manager.svelte";
 
-interface Props {
-	children: Snippet;
+interface Props extends WithChildren {
 	dimensions: Rectangle<TWidth, THeight> | Square<TWidth>;
 	svg: SVGElement | undefined;
 	format?: ImageFormat;

diff --git a/libs/storybook/src/component/variants-group/Variant.svelte b/libs/storybook/src/component/variants-group/Variant.svelte
@@ -1,11 +1,11 @@
 <script lang="ts" generics="TComponent extends Component<any>, TPropName extends keyof ComponentProps<TComponent>, TValue extends ComponentProps<TComponent>[TPropName]">
 import { Font } from "@xeho91/lib-design/font";
 import { Space } from "@xeho91/lib-design/space";
+import type { WithChildren } from "@xeho91/lib-feature/component";
 import { type WithClass, merge_classes } from "@xeho91/lib-feature/css";
-import type { Component, ComponentProps, Snippet } from "svelte";
+import type { Component, ComponentProps } from "svelte";
 
-interface Props extends WithClass {
-	children: Snippet;
+interface Props extends WithChildren, WithClass {
 	prop: TPropName;
 	value: TValue;
 }

diff --git a/libs/storybook/src/component/variants-group/VariantsGroup.svelte b/libs/storybook/src/component/variants-group/VariantsGroup.svelte
@@ -2,6 +2,7 @@
 import { Color } from "@xeho91/lib-design/color";
 import { Space } from "@xeho91/lib-design/space";
 import { Stroke } from "@xeho91/lib-design/stroke";
+import type { WithChildren } from "@xeho91/lib-feature/component";
 import { type WithClass, merge_classes } from "@xeho91/lib-feature/css";
 import type { Component, ComponentProps, Snippet } from "svelte";
 
@@ -10,9 +11,9 @@ import Variant from "./Variant.svelte";
 type OmittedComponentProps = Omit<ComponentProps<TComponent>, TPropName | "children" | "class">;
 
 type Props = OmittedComponentProps &
+	WithChildren<[ComponentProps<TComponent>]> &
 	WithClass & {
 		component?: TComponent;
-		children?: Snippet<[ComponentProps<TComponent>]>;
 		prop: TPropName;
 		values: Iterable<TValue>;
 		header?: Snippet;

diff --git a/libs/ui/src/atom/code-job-title/CodeJobTitle.stories.svelte b/libs/ui/src/atom/code-job-title/CodeJobTitle.stories.svelte
@@ -0,0 +1,19 @@
+<script context="module" lang="ts">
+import { defineMeta } from "@storybook/addon-svelte-csf";
+import { SHARED_META } from "@xeho91/lib-storybook/meta";
+import { PARAMETERS } from "@xeho91/lib-storybook/parameters";
+
+import CodeJobTitle from "./CodeJobTitle.svelte";
+
+const { Story } = defineMeta({
+	...SHARED_META,
+	component: CodeJobTitle,
+	title: "Atom/CodeJobTitle",
+	tags: ["autodocs"],
+	parameters: {
+		layout: "centered",
+	},
+});
+</script>
+
+<Story name="Default" parameters={PARAMETERS.default} />
diff --git a/libs/ui/src/atom/code-job-title/CodeJobTitle.svelte b/libs/ui/src/atom/code-job-title/CodeJobTitle.svelte
@@ -0,0 +1,115 @@
+<script context="module" lang="ts">
+export const JOB_TITLES = [
+	"software",
+	"full-stack",
+	"front-end",
+	"back-end",
+	"web",
+	"Svelte",
+	"React",
+	"TypeScript",
+	"JavaScript",
+	"Node.js",
+] as const;
+export type JobTitle = (typeof JOB_TITLES)[number];
+
+class Writetyper {
+	#current_job_title_index = 0;
+	#current_char_index = 0;
+	public output = $state<string>(this.job_title);
+
+	#typing_char_interval: NodeJS.Timeout | undefined;
+	#backspacing_output_interval: NodeJS.Timeout | undefined;
+
+	constructor() {
+		setTimeout(() => {
+			this.#start_backspacing_output();
+		}, 1000);
+	}
+
+	public get job_title(): JobTitle {
+		return JOB_TITLES[this.#current_job_title_index] as JobTitle;
+	}
+
+	#update_index(): void {
+		if (this.#current_job_title_index === JOB_TITLES.length - 1) this.#current_job_title_index = 0;
+		else this.#current_job_title_index++;
+	}
+
+	#start_backspacing_output(): void {
+		this.#backspacing_output_interval = this.#create_backspacing_output_interval();
+	}
+
+	#create_backspacing_output_interval(): NodeJS.Timeout {
+		return setInterval(() => {
+			this.#backspace_output();
+		}, 60);
+	}
+
+	#backspace_output(): void {
+		if (!this.output) this.#stop_backspacing_output();
+		else this.output = this.output.slice(0, -1);
+	}
+
+	#stop_backspacing_output(): void {
+		clearInterval(this.#backspacing_output_interval);
+		this.#backspacing_output_interval = undefined;
+		this.#update_index();
+		this.#start_typing_char();
+	}
+
+	#start_typing_char(): void {
+		this.#typing_char_interval = this.#create_char_interval();
+	}
+
+	#create_char_interval(): NodeJS.Timeout {
+		return setInterval(() => {
+			this.#print_char();
+		}, 120);
+	}
+
+	#print_char() {
+		const { job_title } = this;
+		if (this.#current_char_index < job_title.length) {
+			this.output += job_title[this.#current_char_index];
+			this.#current_char_index++;
+		} else {
+			this.#stop_typing_char();
+		}
+	}
+
+	#stop_typing_char(): void {
+		clearInterval(this.#typing_char_interval);
+		this.#typing_char_interval = undefined;
+		this.#current_char_index = 0;
+		setTimeout(() => {
+			this.#start_backspacing_output();
+		}, 1000);
+	}
+
+	public clear_intervals(): void {
+		this.#stop_typing_char();
+		this.#stop_backspacing_output();
+	}
+}
+</script>
+
+<script lang="ts">
+	import { merge_classes, type WithClass } from "@xeho91/lib-feature/css";
+
+	import { Code } from "#semantic/code/mod";
+
+	interface Props extends WithClass {}
+
+	let { class: class_ }: Props = $props();
+
+	const writetyper = new Writetyper();
+
+	$effect(() => {
+		() => writetyper.clear_intervals();
+	});
+</script>
+
+<Code color="accent" class={merge_classes("code-job-title", class_)}>
+	{writetyper.output}
+</Code>
diff --git a/libs/ui/src/atom/code-job-title/mod.ts b/libs/ui/src/atom/code-job-title/mod.ts
@@ -0,0 +1 @@
+export { default as CodeJobTitle } from "./CodeJobTitle.svelte";
diff --git a/libs/ui/src/layout/default/Content.svelte b/libs/ui/src/layout/default/Content.svelte
@@ -1,18 +1,16 @@
 <script lang="ts">
+import type { WithChildren } from "@xeho91/lib-feature/component";
 import { type WithClass, merge_classes } from "@xeho91/lib-feature/css";
-import type { Snippet } from "svelte";
 import { fade } from "svelte/transition";
 
 import { LAYOUT_DEFAULT_FADE } from "./util";
 
-interface Props extends WithClass {
-	children: Snippet;
-}
+interface Props extends WithChildren, WithClass {}
 
 let {
 	//
-	class: class_,
 	children,
+	class: class_,
 }: Props = $props();
 
 $effect(() => {});

diff --git a/libs/ui/src/layout/default/Header.svelte b/libs/ui/src/layout/default/Header.svelte
@@ -5,7 +5,7 @@ import { Elevation } from "@xeho91/lib-design/elevation";
 import { Radius } from "@xeho91/lib-design/radius";
 import { Space } from "@xeho91/lib-design/space";
 import { Stroke } from "@xeho91/lib-design/stroke";
-import { type WithClass, merge_classes } from "@xeho91/lib-feature/css/util";
+import { type WithClass, merge_classes } from "@xeho91/lib-feature/css";
 import { fade } from "svelte/transition";
 
 import { LAYOUT_DEFAULT_FADE, LAYOUT_DEFAULT_SPACE_INLINE } from "./util";

diff --git a/libs/ui/src/molecule/popover/Popover.stories.svelte b/libs/ui/src/molecule/popover/Popover.stories.svelte
@@ -16,6 +16,7 @@ const { Story } = defineMeta({
 	tags: ["autodocs"],
 	args: {
 		id: "example-popover",
+		// @ts-expect-error FIXME: Upstream issue
 		children: "Popover content",
 	},
 	parameters: {

diff --git a/libs/ui/src/molecule/popover/Popover.svelte b/libs/ui/src/molecule/popover/Popover.svelte
@@ -4,8 +4,8 @@ import { Color } from "@xeho91/lib-design/color";
 import { Elevation } from "@xeho91/lib-design/elevation";
 import { Radius } from "@xeho91/lib-design/radius";
 import { Stroke } from "@xeho91/lib-design/stroke";
+import type { WithChildren } from "@xeho91/lib-feature/component";
 import { type WithClass, merge_classes } from "@xeho91/lib-feature/css";
-import type { Snippet } from "svelte";
 import type { HTMLAttributes } from "svelte/elements";
 
 import type { PopoverColor } from "./util";
@@ -18,9 +18,8 @@ type Attributes = HTMLAttributes<HTMLDivElement>;
 type ExtendedAttributes = Omit<HTMLAttributes<HTMLDivElement>, "id" | "class" | "children" | "popover"> & {
 	type?: NonNullable<Attributes["popover"]>;
 };
-interface Props extends WithClass, ExtendedAttributes {
+interface Props extends WithChildren<[PopoverColor]>, WithClass, ExtendedAttributes {
 	id: NonNullable<HTMLAttributes<HTMLDivElement>["id"]>;
-	children: Snippet<[PopoverColor?]>;
 	element?: HTMLDivElement | undefined;
 	backdropped?: boolean;
 	color?: PopoverColor;

diff --git a/libs/ui/src/organism/app-settings/ButtonAppSettings.svelte b/libs/ui/src/organism/app-settings/ButtonAppSettings.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 import { Color } from "@xeho91/lib-design/color";
 import { Space } from "@xeho91/lib-design/space";
-import { type WithClass, merge_classes } from "@xeho91/lib-feature/css/util";
+import { type WithClass, merge_classes } from "@xeho91/lib-feature/css";
 
 import ColorScheme from "./ColorScheme.svelte";
 

diff --git a/libs/ui/src/primitive/container/Container.svelte b/libs/ui/src/primitive/container/Container.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
 import { Grid, type GridVariant } from "@xeho91/lib-design/grid";
 import { Space, type SpaceSize } from "@xeho91/lib-design/space";
-import { type WithClass, merge_classes } from "@xeho91/lib-feature/css/util";
-import type { Snippet } from "svelte";
+import type { WithChildren } from "@xeho91/lib-feature/component";
+import { type WithClass, merge_classes } from "@xeho91/lib-feature/css";
 
-interface Props extends WithClass {
-	children: Snippet;
+interface Props extends WithChildren, WithClass {
 	// Grid
 	grid?: GridVariant;
 	min_width?: boolean;

diff --git a/libs/ui/src/primitive/icon/util.ts b/libs/ui/src/primitive/icon/util.ts
@@ -5,10 +5,15 @@ export const ICONS_MAP = new Map([
 	["check", "check-fat"],
 	["close", "x"],
 	["desktop", "desktop"],
+	["discord", "discord-logo"],
 	["error", "warning-octagon"],
+	["github", "github-logo"],
 	["heart", "heart"],
 	["info", "info"],
 	["legal", "scales"],
+	["linkedin", "linkedin-logo"],
+	["email", "envelope-simple"],
+	["matrix", "matrix-logo"],
 	["mobile", "device-mobile"],
 	["moon", "moon"],
 	["monitor", "monitor"],
@@ -19,6 +24,7 @@ export const ICONS_MAP = new Map([
 	["sun", "sun"],
 	["tablet", "device-tablet"],
 	["warning", "warning"],
+	["twitter", "twitter-logo"],
 ] as const);
 
 export type IconEntry = IterableElement<typeof ICONS_MAP>;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as CodeJobTitle } from "./CodeJobTitle.svelte";