WIP Update Holocene components

src/lib/holocene/alert.stories.svelte

@@ -1,7 +1,13 @@
-<script lang="ts" context="module">
-  import type { Meta } from '@storybook/svelte';
+<script lang="ts" module>
+  import {
+    type Args,
+    defineMeta,
+    setTemplate,
+  } from '@storybook/addon-svelte-csf';
 
-  export const meta = {
+  import Alert from './alert.svelte';
+
+  const { Story } = defineMeta({
     title: 'Alert',
     component: Alert,
     args: {
@@ -21,25 +27,23 @@
       },
       hidden: { table: { disable: true } },
     },
-  } satisfies Meta<Alert>;
+  });
 </script>
 
 <script lang="ts">
-  import { Story, Template } from '@storybook/addon-svelte-csf';
-
-  import Alert from './alert.svelte';
+  setTemplate(template);
 </script>
 
-<Template let:args>
-  <Alert {...args}>
+{#snippet template({ intent, ...args }: Args<typeof Story>)}
+  <Alert {intent} {...args}>
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut cupiditate
       exercitationem quia quibusdam excepturi rem saepe dolore quas, odit vero
       sed rerum necessitatibus minima nobis, ullam minus inventore voluptates
       itaque?
     </p>
   </Alert>
-</Template>
+{/snippet}
 
 <Story name="Information" args={{ intent: 'info' }} />
 

src/lib/holocene/alert.svelte

@@ -10,23 +10,23 @@
   type Intent = 'warning' | 'error' | 'success' | 'info' | 'nexus';
   type AlertIcon = Extract<IconName, Intent>;
 
-  interface $$Props extends HTMLAttributes<HTMLDivElement> {
+  interface Props extends HTMLAttributes<HTMLDivElement> {
     intent: Intent;
     title?: string;
     icon?: AlertIcon;
-    'data-testid'?: string;
     hidden?: boolean;
+    class?: string;
   }
 
-  export let intent: Intent;
-  export let title = '';
-  export let icon: AlertIcon = intent;
-  export let hidden = false;
-
-  let className = '';
-  export { className as class };
-
-  $: role = getRole(intent);
+  let {
+    intent,
+    title = '',
+    icon = intent,
+    hidden = false,
+    class: className = '',
+    children,
+    ...rest
+  }: Props = $props();
 
   function getRole(
     alertIntent: typeof intent,
@@ -41,22 +41,24 @@
 
     return null;
   }
+
+  let role = $derived(getRole(intent));
 </script>
 
 <div
   class={merge('alert flex', intent, className)}
   class:hidden
   {role}
-  {...$$restProps}
+  {...rest}
 >
   <Icon name={icon} class="mt-0.5" />
   <div class="w-full min-w-0 gap-1">
     <p class="font-medium">
       {title}
     </p>
-    {#if $$slots.default}
+    {#if children}
       <div class="content">
-        <slot />
+        {@render children()}
       </div>
     {/if}
   </div>

src/lib/holocene/badge.stories.svelte

@@ -1,38 +1,29 @@
-<script lang="ts" context="module">
-  import type { Meta } from '@storybook/svelte';
+<script lang="ts" module>
+  import { defineMeta, setTemplate } from '@storybook/addon-svelte-csf';
 
   import Badge, { badgeTypes } from './badge.svelte';
 
-  const types = badgeTypes.filter((type) => type !== 'count');
-
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Badge',
     component: Badge,
-    args: {
-      count: 99,
-      label: 'Badge',
-    },
-    argTypes: {
-      label: { control: 'text' },
-      count: { control: 'number', min: 0, max: 99999, step: 1 },
-    },
     parameters: {
       controls: { exclude: ['type', 'badgeTypes', 'class'] },
     },
-  } satisfies Meta<Badge['$$prop_def'] & { label?: string; count?: number }>;
+  });
 </script>
 
 <script lang="ts">
-  import { Story, Template } from '@storybook/addon-svelte-csf';
+  setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template()}
   <div class="flex flex-col gap-2">
-    {#each types as type}
-      <Badge {type} class="capitalize">{type.replace(/-/g, ' ')}</Badge>
+    {#each badgeTypes as type}
+      <Badge {type} class="capitalize">
+        {type === 'count' ? '99' : type.replace(/-/g, ' ')}
+      </Badge>
     {/each}
-    <Badge type="count">{args.count}</Badge>
   </div>
-</Template>
+{/snippet}
 
 <Story name="Default" />

src/lib/holocene/badge.svelte

@@ -1,5 +1,6 @@
-<script lang="ts" context="module">
+<script lang="ts" module>
   import { cva, type VariantProps } from 'class-variance-authority';
+  import type { Snippet } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
 
   export type BadgeType = VariantProps<typeof types>['type'];
@@ -11,8 +12,8 @@
     warning: 'bg-yellow-200',
     success: 'bg-green-200',
     danger: 'bg-red-200',
-    count: 'h-6 w-6 min-w-max rounded-full bg-blue-300',
     subtle: 'surface-subtle dark:text-white font-normal select-all',
+    count: 'h-6 w-6 min-w-max rounded-full bg-blue-300',
   };
 
   const types = cva(
@@ -46,12 +47,15 @@
 </script>
 
 <script lang="ts">
-  export let type: BadgeType | undefined | null | false = 'default';
+  interface Props {
+    type?: BadgeType | null | false;
+    class?: string;
+    children?: Snippet;
+  }
 
-  let className = '';
-  export { className as class };
+  let { type = 'default', class: className = '', children }: Props = $props();
 </script>
 
 <div class={merge(types({ type: type || 'default' }), className)}>
-  <slot />
+  {@render children?.()}
 </div>

src/lib/holocene/calendar.svelte

@@ -1,30 +1,41 @@
 <script lang="ts">
-  import { createEventDispatcher } from 'svelte';
+  import { run } from 'svelte/legacy';
 
   import { getDateRows, weekDays } from '$lib/utilities/calendar';
 
-  const dispatch = createEventDispatcher();
+  interface Props {
+    date?: Date;
+    month?: number;
+    year?: number;
+    isAllowed?: (_date: Date) => boolean;
+    datechange: (_date: Date) => void;
+  }
 
-  export let date: Date | undefined;
-  export let month: number | undefined;
-  export let year: number | undefined;
-  export let isAllowed = (_date: Date) => true;
+  let {
+    date,
+    month,
+    year,
+    isAllowed = () => true,
+    datechange,
+  }: Props = $props();
 
-  let cells = [];
+  let cells = $state([]);
 
   const onChange = (date: number) => {
-    dispatch('datechange', new Date(year, month, date));
+    datechange(new Date(year, month, date));
   };
 
   const allow = (year: number, month: number, date: number) => {
     if (!date) return true;
     return isAllowed(new Date(year, month, date));
   };
 
-  $: cells = getDateRows(month, year).map((c) => ({
-    value: c,
-    allowed: allow(year, month, c),
-  }));
+  run(() => {
+    cells = getDateRows(month, year).map((c) => ({
+      value: c,
+      allowed: allow(year, month, c),
+    }));
+  });
 </script>
 
 <div class="container">
@@ -39,7 +50,7 @@
       {#if value}
         <button
           type="button"
-          on:click={allowed && value ? () => onChange(value) : () => {}}
+          onclick={allowed && value ? () => onChange(value) : () => {}}
           class="cell"
           class:highlight={allowed && value}
           class:disabled={!allowed}

src/lib/holocene/card.stories.svelte

@@ -1,19 +1,23 @@
-<script lang="ts" context="module">
-  import type { Meta } from '@storybook/svelte';
+<script lang="ts" module>
+  import {
+    type Args,
+    defineMeta,
+    setTemplate,
+  } from '@storybook/addon-svelte-csf';
 
   import Card from './card.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Card',
     component: Card,
-  } satisfies Meta<Card>;
+  });
 </script>
 
 <script lang="ts">
-  import { Story, Template } from '@storybook/addon-svelte-csf';
+  setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template(args: Args<typeof Story>)}
   <Card {...args}>
     <p>
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut cupiditate
@@ -22,6 +26,6 @@
       itaque?
     </p>
   </Card>
-</Template>
+{/snippet}
 
 <Story name="Default" />

src/lib/holocene/card.svelte

@@ -1,5 +1,16 @@
-<div class="card surface-primary {$$props.class}">
-  <slot />
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { class: className = '', children }: Props = $props();
+</script>
+
+<div class="card surface-primary {className}">
+  {@render children?.()}
 </div>
 
 <style lang="postcss">

src/lib/holocene/checkbox.stories.svelte

@@ -1,9 +1,13 @@
-<script lang="ts" context="module">
-  import type { Meta } from '@storybook/svelte';
+<script lang="ts" module>
+  import {
+    type Args,
+    defineMeta,
+    setTemplate,
+  } from '@storybook/addon-svelte-csf';
 
   import Checkbox from '$lib/holocene/checkbox.svelte';
 
-  export const meta = {
+  const { Story } = defineMeta({
     title: 'Checkbox',
     component: Checkbox,
     args: {
@@ -27,22 +31,22 @@
       group: { control: 'object', table: { disable: true } },
       valid: { control: 'boolean' },
     },
-  } satisfies Meta<Checkbox<string>>;
+  });
 </script>
 
 <script lang="ts">
   import { action } from '@storybook/addon-actions';
-  import { Story, Template } from '@storybook/addon-svelte-csf';
+  setTemplate(template);
 </script>
 
-<Template let:args>
+{#snippet template(args: Args<typeof Story>)}
   <Checkbox
     {...args}
     onchange={action('change')}
     onclick={action('click')}
     onkeypress={action('keypress')}
   />
-</Template>
+{/snippet}
 
 <Story name="Default" />