Simple components for common HTML usage

.changeset/itchy-donkeys-fail.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add simple wrapper components for common HTML usgae

packages/ui/core-components/src/lib/unsorted/ui/Card.stories.svelte

@@ -0,0 +1,24 @@
+<script context="module">
+	import Card from './Card.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Card',
+		component: Card
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { query } from '@evidence-dev/universal-sql/client-duckdb';
+
+	import BarChart from '../viz/bar/BarChart.svelte';
+</script>
+
+<Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
+	{@const data = Query.create(`select * from numeric_series`, query)}
+	<Card>
+		<BarChart {data} {...args} />
+	</Card>
+</Story>

packages/ui/core-components/src/lib/unsorted/ui/Card.svelte

@@ -0,0 +1,14 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let className = '';
+</script>
+
+<div
+	class={`border border-base-400 rounded-md px-3 py-1 shadow-base-200 ${className}`}
+	style="display: inline-block; width: 100%;"
+>
+	<slot />
+</div>

packages/ui/core-components/src/lib/unsorted/ui/Embed.stories.svelte

@@ -0,0 +1,17 @@
+<script context="module">
+	import Embed from './Embed.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Embed',
+		component: Embed
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All">
+	<Embed url="https://www.youtube.com/embed/GBWvftt8G80?si=OskePXooCKmRE4nZ" />
+</Story>

packages/ui/core-components/src/lib/unsorted/ui/Embed.svelte

@@ -0,0 +1,35 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let url = ''; // The URL to embed
+	export let title = ''; // A description or title for the embed
+	export let width = '100%'; // Width of the embed, defaults to full width
+	export let height = '400'; // Height of the embed, defaults to 400px
+	export let border = true; // Toggle border visibility
+
+	// Process dimensions: Add `px` if a number, pass through if a valid unit
+	function processDimension(dimension) {
+		return /^\d+$/.test(dimension) ? `${dimension}px` : dimension;
+	}
+
+	$: tailwindWidth = processDimension(width);
+	$: tailwindHeight = processDimension(height);
+</script>
+
+<div
+	class={`embed-wrapper relative overflow-hidden ${
+		border ? 'border border-gray-300 rounded-md shadow-sm' : ''
+	}`}
+	style={`width: ${tailwindWidth}; height: ${tailwindHeight};`}
+>
+	<iframe
+		src={url}
+		{title}
+		class="absolute inset-0 w-full h-full"
+		loading="lazy"
+		frameborder="0"
+		allowfullscreen
+	></iframe>
+</div>

packages/ui/core-components/src/lib/unsorted/ui/Footnote.stories.svelte

@@ -0,0 +1,35 @@
+<script context="module">
+	import Footnote from './Footnote.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Footnote',
+		component: Footnote
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+	import { Query } from '@evidence-dev/sdk/usql';
+	import { query } from '@evidence-dev/universal-sql/client-duckdb';
+
+	import BarChart from '../viz/bar/BarChart.svelte';
+</script>
+
+<Story name="All" args={{ x: 'x', y: 'y', series: 'series' }} let:args>
+	{@const data = Query.create(`select * from numeric_series`, query)}
+	<Footnote id="1">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<Footnote id="2">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<Footnote id="3">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<BarChart {data} {...args} />
+	<Footnote id="1">
+		The data for this report was sourced from the World Bank World Development Indicators dataset.
+	</Footnote>
+	<BarChart {data} {...args} />
+</Story>

packages/ui/core-components/src/lib/unsorted/ui/Footnote.svelte

@@ -0,0 +1,18 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let id = ''; // Footnote identifier (number or letter)
+</script>
+
+<div class="block">
+	<div class="inline-flex items-baseline text-xs mb-2 mt-0">
+		<!-- Footnote number -->
+		<sup class="text-gray-500">{id}</sup>
+		<!-- Footnote text -->
+		<div class="text-xs ml-1 text-gray-500 leading-tight">
+			<slot />
+		</div>
+	</div>
+</div>

packages/ui/core-components/src/lib/unsorted/ui/Image.stories.svelte

@@ -0,0 +1,20 @@
+<script context="module">
+	import Image from './Image.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Image',
+		component: Image
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All">
+	<Image
+		url="https://images.ctfassets.net/h8q6lxmb5akt/3Zw55bT90zpKWbS26VNOBp/7732c3d8bd6f0994db10c14c8e789057/raptors-logo-original-1995.svg"
+		height="200"
+	/>
+</Story>

packages/ui/core-components/src/lib/unsorted/ui/Image.svelte

@@ -0,0 +1,30 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let url = ''; // URL of the image
+	export let description = ''; // Description for accessibility
+	export let width = ''; // Width of the image
+	export let height = ''; // Height of the image
+
+	// Function to process width/height
+	function processDimension(dimension) {
+		if (!dimension) return ''; // No dimension provided
+		return /^\d+$/.test(dimension) ? `${dimension}px` : dimension; // Add 'px' if it's a number
+	}
+
+	// Processed dimensions
+	$: processedWidth = processDimension(width);
+	$: processedHeight = processDimension(height);
+</script>
+
+<div class="flex flex-col items-center text-center">
+	<img
+		src={url}
+		alt={description}
+		style={`width: ${processedWidth}; height: ${processedHeight};`}
+		class="max-w-full h-auto rounded"
+		loading="lazy"
+	/>
+</div>

packages/ui/core-components/src/lib/unsorted/ui/Link.stories.svelte

@@ -0,0 +1,17 @@
+<script context="module">
+	import Link from './Link.svelte';
+
+	/** @type {import("@storybook/svelte").Meta}*/
+	export const meta = {
+		title: 'UI/Link',
+		component: Link
+	};
+</script>
+
+<script>
+	import { Story } from '@storybook/addon-svelte-csf';
+</script>
+
+<Story name="All">
+	<Link url="https://www.youtube.com/watch?v=GBWvftt8G80&t=15s" newTab="true" />
+</Story>

packages/ui/core-components/src/lib/unsorted/ui/Link.svelte

@@ -0,0 +1,20 @@
+<script context="module">
+	export const evidenceInclude = true;
+</script>
+
+<script>
+	export let url = '#'; // Destination URL
+	export let label = 'Click here'; // Link text
+	export let newTab = false; // Open in a new tab
+	$: newTab = newTab === 'true' || newTab === true;
+	export let className = ''; // Additional classes
+</script>
+
+<a
+	href={url}
+	target={newTab ? '_blank' : '_self'}
+	rel={newTab ? 'noopener noreferrer' : undefined}
+	class={className}
+>
+	{label}
+</a>

packages/ui/core-components/src/lib/unsorted/ui/index.js

@@ -1,13 +1,18 @@
 export { default as LinkButton } from './LinkButton.svelte';
 export { default as BigLink } from './BigLink.svelte';
+export { default as Card } from './Card.svelte';
 export { default as ChevronToggle } from './ChevronToggle.svelte';
 export { default as CodeBlock } from './CodeBlock.svelte';
 export { default as Details } from './Details.svelte';
 export { default as DownloadData } from './DownloadData.svelte';
 export { default as EmailSignup } from './EmailSignup.svelte';
+export { default as Embed } from './Embed.svelte';
+export { default as Footnote } from './Footnote.svelte';
 export { default as Group } from './Group.svelte';
+export { default as Image } from './Image.svelte';
 export { default as LastRefreshed } from './LastRefreshed.svelte';
 export { default as LineBreak } from './LineBreak.svelte';
+export { default as Link } from './Link.svelte';
 export { default as LoadingIndicator } from './LoadingIndicator.svelte';
 export { default as Modal } from './Modal.svelte';
 export { default as PageBreak } from './PageBreak.svelte';