@swr-data-lab/components 1.6.0 → 1.7.0

package/src/Switcher/Switcher.mdx

@@ -0,0 +1,13 @@
+import { Story,  Meta, Primary, Controls, Stories} from '@storybook/blocks';
+ 
+import * as SwictherStories from './Switcher.stories.svelte';
+
+<Meta of={SwictherStories}/>
+
+# Switcher
+
+Radio-like form component to choose exactly one of a given set of options.
+
+<Controls/>
+
+<Stories/>

package/src/Switcher/Switcher.stories.svelte

@@ -1,55 +1,50 @@
 <script context="module">
-  import { defineMeta } from '@storybook/addon-svelte-csf';
+	import { defineMeta } from '@storybook/addon-svelte-csf';
 	import Switcher from './Switcher.svelte';
 	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
-	import {
-		userEvent,
-		within,
-		expect,
-	} from '@storybook/test';
-
-  const { Story } = defineMeta({
-    title: 'Input Components/Switcher',
-    argTypes: {
-      size: {control: "text"}
-    },
-    tags: ['autodocs'],
-  })
+	import { userEvent, within, expect } from '@storybook/test';
 
+	const { Story } = defineMeta({
+		title: 'Form/Switcher',
+		component: Switcher
+	});
 </script>
 
 <Story name="Two Options">
 	<DesignTokens>
-    <Switcher
-      options={["Option A", "Option B"]}
-      groupName="two-options"
-      value="Option A"
-      size="default"
-      label="Label"
-    />
+		<Switcher
+			options={['Option A', 'Option B']}
+			groupName="two-options"
+			value="Option A"
+			size="default"
+			label="Label"
+		/>
 	</DesignTokens>
 </Story>
 
-<Story name="Four Options" play={async ({ canvasElement, step }) => {
-  const canvas = within(canvasElement)
-  await step("Clicking selects the expected option", async () => {
-    const optionA = canvas.getByLabelText("Apples")
-    const optionB = canvas.getByLabelText("Bananas")
-    await userEvent.click(optionA)
-    expect(optionA).toBeChecked()
-    expect(optionB).not.toBeChecked()
-    await userEvent.click(optionB)
-    expect(optionB).toBeChecked()
-    expect(optionA).not.toBeChecked()
-  })
-  }}>
+<Story
+	name="Four Options"
+	play={async ({ canvasElement, step }) => {
+		const canvas = within(canvasElement);
+		await step('Clicking selects the expected option', async () => {
+			const optionA = canvas.getByLabelText('Apples');
+			const optionB = canvas.getByLabelText('Bananas');
+			await userEvent.click(optionA);
+			expect(optionA).toBeChecked();
+			expect(optionB).not.toBeChecked();
+			await userEvent.click(optionB);
+			expect(optionB).toBeChecked();
+			expect(optionA).not.toBeChecked();
+		});
+	}}
+>
 	<DesignTokens>
-    <Switcher
-    options={["Apples", "Oranges", "Bananas", "Peaches"]}
-    groupName="four-options"
-    value="Oranges"
-    label="Label"
-    size="small"
-  />
+		<Switcher
+			options={['Apples', 'Oranges', 'Bananas', 'Peaches']}
+			groupName="four-options"
+			value="Oranges"
+			label="Label"
+			size="small"
+		/>
 	</DesignTokens>
 </Story>

package/src/Switcher/Switcher.svelte

@@ -1,17 +1,31 @@
 <script lang="ts">
-	export let label: string = '';
-
-	// The options available in the switcher.
-	export let options: string[] = [];
-
-	// Machine-readable name for the form field. Should be unique to other fields in the form.
-	export let groupName: string = '';
-
-	// Type size
-	export let size: string = 'default';
+	interface SwitcherProps {
+		/**
+		 * Human-readable label for the input.
+		 */
+		label: string;
+		options: string[];
+		/**
+		 * Machine-readable name for the input. Should be unique across the document.
+		 */
+		groupName: string;
+		/**
+		 * Type size
+		 */
+		size?: 'default' | 'small';
+		/**
+		 * The currently-selected option
+		 */
+		value: string | null;
+	}
 
-	// The currently selected option
-	export let value: string = options[0];
+	let {
+		label,
+		options,
+		groupName,
+		size = 'default',
+		value = $bindable(null)
+	}: SwitcherProps = $props();
 
 	function optionToID(o: string) {
 		// TODO: This should use $id() when it comes out, so
@@ -21,12 +35,7 @@
 	}
 </script>
 
-<!--
-Radio-like form component to choose exactly one of a given set of options.
-@component
--->
-
-<fieldset class="container" class:small={size === "small"}>
+<fieldset class="container" class:small={size === 'small'}>
 	<legend>{label}</legend>
 	<ul>
 		{#each options as o (o)}
@@ -54,7 +63,7 @@ Radio-like form component to choose exactly one of a given set of options.
 
 	legend {
 		font-size: var(--fs-small-2);
-		margin-bottom: .25em;
+		margin-bottom: 0.25em;
 	}
 
 	ul {
@@ -84,7 +93,7 @@ Radio-like form component to choose exactly one of a given set of options.
 		left: -999px;
 	}
 	.small label {
-		font-size: var(--fs-small-1)
+		font-size: var(--fs-small-1);
 	}
 	label {
 		font-size: var(--fs-base);

package/src/index.js

@@ -6,6 +6,7 @@ export { default as Input } from './Input/Input.svelte';
 export { default as Button } from './Button/Button.svelte';
 export { default as Select } from './Select/Select.svelte';
 export { default as DesignTokens } from './DesignTokens/DesignTokens.svelte';
+export { tokens as tokens } from './DesignTokens/index.js';
 export { default as ChartHeader } from './ChartHeader/ChartHeader.svelte';
 export { default as ChartFooter } from './ChartFooter/ChartFooter.svelte';
 export { default as Middot } from './Middot/Middot.svelte';

package/src/styles/base.scss

@@ -1,8 +1,55 @@
-@import 'vars';
-@import 'typography';
+$break-phone: 510px;
+$break-tablet: 992px;
+$break-desktop-small: 1200px;
+$break-desktop-large: 1400px;
+$break-desktop-xl: 1400px;
 
-* {
+// TODO drop everything below
+
+%caption {
+	font-family: var(--swr-sans);
+	font-size: 0.9rem;
+	line-height: 1;
+	letter-spacing: 0.0045em;
+}
+
+%caption-bold {
+	@extend %caption;
+	font-weight: 600;
+}
+
+%form-label {
+	@extend %caption;
+	display: block;
+	margin-bottom: 0.5em;
+}
+
+%copy {
+	font-family: var(--swr-sans);
+	font-size: 1.1rem;
+	line-height: 1.45;
+	letter-spacing: 0.0045em;
+}
+
+%copy-bold {
+	@extend %copy;
+	font-weight: 600;
+}
+
+%form-input {
+	@extend %copy;
+	height: 2.5em;
+	width: 100%;
+	border: 1px solid currentColor;
+	border-radius: var(--br-small);
+	background: transparent;
+	padding: 0 0.5em;
+	padding-top: 0.1em;
+	color: currentColor;
 	margin: 0;
-	padding: 0;
-	box-sizing: border-box;
+	display: block;
+	text-size-adjust: none;
+	&:focus-visible {
+		outline: 4px solid rgba(white, 0.4);
+	}
 }

package/vitest.workspace.ts

@@ -0,0 +1,32 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+import { defineWorkspace } from 'vitest/config';
+
+import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';
+
+const dirname =
+	typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
+
+// More info at: https://storybook.js.org/docs/writing-tests/test-addon
+export default defineWorkspace([
+	'vite.config.ts',
+	{
+		extends: 'vite.config.ts',
+		plugins: [
+			// The plugin will run tests for the stories defined in your Storybook config
+			// See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest
+			storybookTest({ configDir: path.join(dirname, '.storybook') })
+		],
+		test: {
+			name: 'storybook',
+			browser: {
+				enabled: true,
+				headless: true,
+				name: 'chromium',
+				provider: 'playwright'
+			},
+			setupFiles: ['.storybook/vitest.setup.ts']
+		}
+	}
+]);

package/src/Autocomplete/Autocomplete.stories.js

@@ -1,61 +0,0 @@
-import { userEvent, within, expect, fn } from "@storybook/test"
-import AutoComplete from "./index.js"
-
-export default {
-  title: "Example/Autocomplete",
-  tags: ["autodocs"],
-  component: AutoComplete,
-}
-
-const testData = ["Apples", "Oranges", "Pears", "Peaches", "Bananas"].map((el) => {
-  return {
-    value: el,
-    label: el,
-    details: {},
-  }
-})
-
-export const Basic = {
-  args: {
-    data: testData,
-    query: "",
-    placeholder: "Select a fruit",
-  },
-}
-
-export const Test = {
-  parameters: {
-    docs: {
-      story: {
-        autoplay: true,
-      },
-    },
-  },
-  args: {
-    data: testData,
-    query: "",
-    placeholder: "Select a fruit",
-  },
-  play: async ({ canvasElement, step }) => {
-    const canvas = within(canvasElement)
-    const input = canvas.getByTestId("autocomplete-input")
-    await step("Select using the mouse", async () => {
-      await userEvent.click(input)
-      expect(input).toHaveFocus()
-      await userEvent.keyboard("ba")
-      const bananasOption = canvas.getByText("Bananas")
-      await userEvent.click(bananasOption)
-      expect(input).toHaveValue("Bananas")
-    })
-    await userEvent.clear(input)
-    await step("Select using the keyboard", async () => {
-      await userEvent.click(input)
-      expect(input).toHaveFocus()
-      await userEvent.keyboard("ap")
-      await userEvent.keyboard("{ArrowDown}")
-      await userEvent.keyboard("{Enter}")
-      expect(input).toHaveValue("Apples")
-    })
-    await userEvent.clear(input)
-  },
-}

package/src/Container/Container.svelte

@@ -1,12 +0,0 @@
-<div>
-	<slot />
-</div>
-
-<style lang="scss">
-	@import '../styles/base.scss';
-	:host {
-		--swr-sans: #{$swr-sans};
-		--swr-text: #{$swr-text};
-		--orange: #{$color-activeorange};
-	}
-</style>

package/src/Container/index.js

@@ -1,2 +0,0 @@
-import Container from './Container.svelte';
-export default Container;

package/src/styles/_typography.scss

@@ -1,49 +0,0 @@
-%caption {
-	font-family: $swr-sans;
-	font-size: 0.9rem;
-	line-height: 1;
-	letter-spacing: 0.0045em;
-}
-
-%caption-bold {
-	@extend %caption;
-	font-weight: 600;
-}
-
-%form-label {
-	@extend %caption;
-	display: block;
-	margin-bottom: 0.5em;
-}
-
-%copy {
-	font-family: $swr-sans;
-	font-size: 1.1rem;
-	line-height: 1.45;
-	letter-spacing: 0.0045em;
-}
-
-%copy-bold {
-	@extend %copy;
-	font-weight: 600;
-}
-
-%form-input {
-	@extend %copy;
-	height: $input-height;
-	width: 100%;
-	border: 1px solid currentColor;
-	border-radius: $border-radius-input;
-	background: transparent;
-	padding: 0 0.5em;
-	padding-top: 0.1em;
-	color: currentColor;
-	height: $input-height;
-	margin: 0;
-	display: block;
-	width: 100%;
-	text-size-adjust: none;
-	&:focus-visible {
-		outline: 4px solid rgba(white, 0.4);
-	}
-}

package/src/styles/_vars.scss

@@ -1,30 +0,0 @@
-$color-black: #0c0c0c;
-$color-violetblue: #1d0b40;
-$color-violetblue-hover: #2d155d;
-$color-violet: #5920c0;
-$color-blue: #3053d9;
-$color-warmgrey: #dbd5cd;
-$color-activeorange: #ff3300;
-
-$border-radius-container: 8px;
-$border-radius-input: 4px;
-$input-height: 2.5rem;
-$app-max-width: 40rem;
-
-$swr-sans: 'SWR-VAR-Sans', serif;
-$swr-text: 'SWR-VAR-Text', serif;
-
-$transition-fast: 150ms;
-
-// Breakpoints
-$break-phone: 510px;
-$break-tablet: 992px;
-$break-desktop-small: 1200px;
-$break-desktop-large: 1400px;
-$break-desktop-xl: 1400px;
-
-@mixin bp($point) {
-	@media (min-width: $point) {
-		@content;
-	}
-}