Merge pull request #2470 from evidence-dev/release-2024-08-29

Release 2024-08-29

.changeset/afraid-deers-shave.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Added DataTable Fullscreen y-scroll, added Fullscreen height calc to include search bar height

.changeset/khaki-countries-scream.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+SelectAllByDefault conditionally checks for strings + booleans

.changeset/wise-bees-type.md

@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Added button groups with tab styles prop

e2e/playwright-config.js

@@ -43,6 +43,7 @@ export const config = {
 	webServer: {
 		command: process.env.DEV ? 'pnpm dev' : 'pnpm preview',
 		port: 3000,
-		reuseExistingServer: !process.env.CI
+		reuseExistingServer: !process.env.CI,
+		timeout: 120_000
 	}
 };

packages/extension/README.md

@@ -8,7 +8,7 @@
 
 This extension provides language support, Evidence project and dev server shortcut commands, and autocomplete for Evidence Markdown files.
 
-![Evidence Side-by-Side](/docs/images/evidence-sidebyside.gif)
+![Evidence Side-by-Side](docs/images/evidence-sidebyside.gif)
 
 ## Features
 
@@ -40,7 +40,7 @@ This extension also depends on [Svelte for VS Code](https://marketplace.visualst
 
 You can install the Evidence extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Evidence.evidence-vscode), or by searching for `Evidence` in the VS Code Extensions tab.
 
-![Evidence Extension Installation](/docs/images/evidence-extension-install.png)
+![Evidence Extension Installation](docs/images/evidence-extension-install.png)
 
 ## Getting Started
 
@@ -49,21 +49,21 @@ To get started with Evidence using VS Code locally, follow these steps:
 1. Open the command palette in VS Code (Cmd/Ctrl + Shift + P)
 2. Search for and click `New Evidence Project`
 3. Select an **empty** folder to create your Evidence project within<br><br>
-   ![Evidence Project Start](/docs/images/evidence-new-project.gif)
+   ![Evidence Project Start](docs/images/evidence-new-project.gif)
 
 4. Click the `Start Evidence` button to install all required dependencies and start the dev server, or use the commands detailed below in the `Commands` section<br><br>
-   ![Evidence Server Start](/docs/images/evidence-server-start.gif)
+   ![Evidence Server Start](docs/images/evidence-server-start.gif)
    <br><br> **Note:** The initial installation and server start can take up to 2 minutes depending on your computer. If you have issues with the startup time, you can use Codespaces (see next section).<br><br>
    At the end of this step, your browser will automatically open to your app preview, which will appear at `localhost:3000`
 
 5. We recommend putting VS Code and your browser side-by-side, like in the screenshot below. This will give you immediate development feedback on your app every time you save a markdown file.<br><br>
-   ![Evidence Side-by-Side](/docs/images/evidence-sidebyside.gif)
+   ![Evidence Side-by-Side](docs/images/evidence-sidebyside.gif)
 
 6. Make changes to your markdown files and save the file to see the changes reflected in your app preview
 
 7. Try the "slash commands" included with the extension by typing `/` - you will see a list of available viz and UI components from our library. Select a component to insert by hitting `Tab` or clicking on the component.<br><br>
    Once the component code has been inserted, you can hit `Tab` again to move through the inputs for a component and fill them in.<br><br>
-   ![Evidence Slash](/docs/images/evidence-slash.gif)
+   ![Evidence Slash](docs/images/evidence-slash.gif)
 
 ## Running Evidence in GitHub Codespaces
 
@@ -73,15 +73,15 @@ You can use the Evidence VS Code extension with [GitHub Codespaces](https://gith
 2. The Evidence extension will be installed automatically
 3. Click the `Start Evidence` button to install all required dependencies and start the dev server, or use the commands detailed below in the `Commands` section
 4. You will get a popup saying `Your application running on port 3000 is available`. Click to open in browser<br><br>
-   ![Running Evidence in GitHub Codespaces](/docs/images/evidence-codespaces-server-start.png)
+   ![Running Evidence in GitHub Codespaces](docs/images/evidence-codespaces-server-start.png)
 
 5. Make changes to your markdown files and **save the file** to see the changes reflected in your app preview
 
 6. After making changes to your project, click the `Source Control` icon in the left panel and commit your changes<br><br>
-   ![Make a change in Codespaces](/docs/images/codespaces-make-change.png)
+   ![Make a change in Codespaces](docs/images/codespaces-make-change.png)
 
 7. Click `Publish Branch` - this will prompt you to create a private or public repo for your Evidence project<br><br>
-   ![Publish repo in Codespaces](/docs/images/codespaces-publish-repo.png)
+   ![Publish repo in Codespaces](docs/images/codespaces-publish-repo.png)
 
 8. From here, you can continue to develop your project in Codespaces, or you can choose to clone your repo locally and work from there
 
@@ -91,7 +91,7 @@ The Evidence extension provides a number of custom VS Code shortcut commands for
 
 You can access the VS Code shortcut commands from the command palette (`Cmd/Ctrl+Shift+P`) by typing `Evidence` in the command search box:
 
-![Evidence Extension Commands](/docs/images/evidence-commands.png)
+![Evidence Extension Commands](docs/images/evidence-commands.png)
 
 | VS Code Command       | Title                      | Description                                                                                         | CLI Command                                                                      |
 | --------------------- | -------------------------- | --------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
@@ -127,7 +127,7 @@ Create [User or Workspace Settings](https://code.visualstudio.com/docs/getstarte
 
 Open Evidence extension Settings in VS Code by using the `Evidence: VS Code Extension Settings` command, or navigating to `File -> Preferences -> Settings` (`cmd/ctrl+,`) and searching for `Evidence` in the Settings search box.
 
-![Evidence Extension Settings](/docs/images/evidence-extension-settings.png)
+![Evidence Extension Settings](docs/images/evidence-extension-settings.png)
 
 ### Available Settings
 

packages/extension/package.json

@@ -534,7 +534,7 @@
 		"mocha": "^9.1.3",
 		"ts-loader": "^9.2.5",
 		"typescript": "^4.4.4",
-		"webpack": "^5.52.1",
+		"webpack": "^5.94.0",
 		"webpack-cli": "^4.8.0"
 	},
 	"extensionDependencies": [

packages/ui/core-components/src/lib/atoms/fullscreen/Fullscreen.svelte

@@ -66,9 +66,7 @@
 
 <dialog
 	use:popup={open}
-	class="w-[90vw] rounded-lg fixed border shadow-lg overflow-y-hidden {open
-		? 'slideIn'
-		: 'slideOut'}"
+	class="w-[90vw] rounded-lg fixed border shadow-lg {open ? 'slideIn' : 'slideOut'}"
 >
 	<button
 		class="absolute top-4 right-[18.5px] text-gray-900 hover:bg-gray-100 rounded-lg p-1 focus:outline-none focus:ring-1 focus:ring-gray-400"

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.stories.svelte

@@ -136,3 +136,39 @@
 
 	Current Value: {$inputStore[args.name]}
 </Story>
+
+<Story name="Button Group Styled as Tabs" let:args>
+	<div class="mb-8">
+		<ButtonGroup
+			{...args}
+			preset="dates"
+			title="Default Button Style"
+			name="defaultStyle"
+			color="red"
+		/>
+	</div>
+	Current Value: {$inputStore['defaultStyle']}
+	<div class="mb-8 mt-4">
+		<ButtonGroup
+			{...args}
+			preset="dates"
+			display="tabs"
+			title="Buttons Styled as Tabs"
+			name="tabsStyle"
+		/>
+	</div>
+	Current Value: {$inputStore['tabsStyle']}
+</Story>
+
+<Story name="Hard Coded Entries with Tab Stylings" let:args>
+	<div class="mb-8">
+		<ButtonGroup {...args} display="tabs">
+			<ButtonGroupItem valueLabel="Option 1" value={1} />
+			<ButtonGroupItem valueLabel="Option 2" value={2} />
+			<ButtonGroupItem valueLabel="Option 3" value={3} />
+			<ButtonGroupItem valueLabel="Option 4" value={4} />
+		</ButtonGroup>
+	</div>
+
+	Current Value: {$inputStore[args.name]}
+</Story>

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroup.svelte

@@ -6,7 +6,7 @@
 	import { presets, setButtonGroupContext } from './lib.js';
 	import { writable, readonly } from 'svelte/store';
 	import { INPUTS_CONTEXT_KEY } from '@evidence-dev/component-utilities/globalContexts';
-	import { getContext } from 'svelte';
+	import { getContext, setContext } from 'svelte';
 	import { buildReactiveInputQuery } from '@evidence-dev/component-utilities/buildQuery';
 	import ButtonGroupItem from './ButtonGroupItem.svelte';
 	import { page } from '$app/stores';
@@ -22,6 +22,13 @@
 	/** @type {keyof typeof presets | undefined} */
 	export let preset = undefined;
 
+	// for Tabs styling
+	export let display;
+
+	setContext('button-display', display);
+
+	export let color = 'hsla(207, 65%, 39%, 1)';
+
 	const inputs = getContext(INPUTS_CONTEXT_KEY);
 
 	const valueStore = writable(null);
@@ -49,29 +56,36 @@
 </script>
 
 <HiddenInPrint enabled={hideDuringPrint}>
-	<div class="inline-flex w-fit max-w-full flex-col mt-2 mb-4 ml-0 mr-2">
+	<div
+		class={display === 'tabs' ? '' : 'inline-flex w-fit max-w-full flex-col mt-2 mb-4 ml-0 mr-2'}
+	>
 		{#if title}
 			<span class="text-gray-900 text-sm block mb-1">{title}</span>
 		{/if}
-		<div class="inline-flex rounded-md shadow-sm overflow-auto border no-scrollbar" role="group">
+		<div
+			class={display === 'tabs'
+				? 'my-6 flex flex-wrap gap-x-1 gap-y-1'
+				: 'inline-flex rounded-md shadow-sm overflow-auto border no-scrollbar'}
+			role="group"
+		>
 			{#if preset}
 				{#if presets[preset]}
 					{#each presets[preset] as { value, valueLabel }}
-						<ButtonGroupItem {value} {valueLabel} />
+						<ButtonGroupItem {value} {valueLabel} {color} {display} />
 					{/each}
 				{:else}
 					<span class="text-red-500 font-bold text-sm">{preset} is not a valid preset</span>
 				{/if}
 			{:else}
-				<slot />
+				<slot {display} />
 				{#if hasQuery}
 					<QueryLoad data={query} let:loaded>
 						<svelte:fragment slot="skeleton">
 							<div class="h-8 min-w-24 w-full max-width-24 block animate-pulse bg-gray-200" />
 						</svelte:fragment>
 						<svelte:fragment>
 							{#each loaded as { label, value }}
-								<ButtonGroupItem {value} valueLabel={label} />
+								<ButtonGroupItem {value} valueLabel={label} {color} {display} />
 							{/each}
 						</svelte:fragment>
 					</QueryLoad>

packages/ui/core-components/src/lib/atoms/inputs/button-group/ButtonGroupItem.svelte

@@ -4,10 +4,15 @@
 
 <script>
 	import { getButtonGroupContext } from './lib.js';
+	import { getContext } from 'svelte';
 	/** @type {string} */
+	import TabDisplay from '../../../unsorted/ui/Tabs/TabDisplay.svelte';
 	export let valueLabel;
 	/** @type {string | boolean | number | Date} */
 	export let value;
+	export let color = 'hsla(207, 65%, 39%, 1)';
+
+	let display = getContext('button-display');
 
 	const { update, value: currentValue } = getButtonGroupContext();
 
@@ -20,16 +25,26 @@
 	}
 </script>
 
-<button
-	type="button"
-	class=" flex-none py-1 font-medium h-8 px-3 text-xs truncate
-                                border-r last:border-none
-                                hover:bg-gray-100 focus:z-10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400
-                                {$currentValue?.value === value
-		? 'z-10 border-gray-200 bg-gray-100 text-blue-700'
-		: 'z-0 bg-white text-gray-900 border-gray-200'}
+{#if display === 'tabs'}
+	<TabDisplay
+		id={value}
+		label={valueLabel}
+		{color}
+		on:click={() => update({ valueLabel, value })}
+		activeId={$currentValue?.value}
+	/>
+{:else}
+	<button
+		type="button"
+		class=" flex-none py-1 font-medium h-8 px-3 text-xs truncate
+		border-r last:border-none
+		hover:bg-gray-100 focus:z-10 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-400
+		{$currentValue?.value === value
+			? 'z-10 border-gray-200 bg-gray-100 text-blue-700'
+			: 'z-0 bg-white text-gray-900 border-gray-200'}
                                 "
-	on:click={() => update({ valueLabel, value })}
->
-	{valueLabel}
-</button>
+		on:click={() => update({ valueLabel, value })}
+	>
+		{valueLabel}
+	</button>
+{/if}

packages/ui/core-components/src/lib/atoms/inputs/dropdown/Dropdown.svelte

@@ -26,6 +26,7 @@
 	import formatTitle from '@evidence-dev/component-utilities/formatTitle';
 	import VirtualList from './Virtual.svelte';
 	import { debounce } from 'perfect-debounce';
+	import { toBoolean } from '../../../utils.js';
 	const inputs = getContext(INPUTS_CONTEXT_KEY);
 
 	/////
@@ -94,7 +95,7 @@
 		defaultValues: Array.isArray(defaultValue) ? defaultValue : [defaultValue],
 		initialOptions: initial,
 		noDefault,
-		selectAllByDefault
+		selectAllByDefault: toBoolean(selectAllByDefault)
 	});
 	const {
 		addOptions,

packages/ui/core-components/src/lib/atoms/inputs/dropdown/stories/Dropdown.stories.svelte

@@ -136,6 +136,12 @@
 
 <Story name="Select all by default">
 	{@const data = Query.create(`SELECT id as value, tag as label from hashtags`, query)}
+	<h1>False</h1>
+	<Dropdown multiple name="test" {data} value="value" label="label" selectAllByDefault={'false'} />
+	<Dropdown multiple name="test" {data} value="value" label="label" selectAllByDefault={false} />
+	<h1>True</h1>
+	<Dropdown multiple name="test" {data} value="value" label="label" selectAllByDefault={'true'} />
+	<Dropdown multiple name="test" {data} value="value" label="label" selectAllByDefault={true} />
 	<Dropdown multiple name="test" {data} value="value" label="label" selectAllByDefault />
 </Story>
 

packages/ui/core-components/src/lib/unsorted/ui/Tabs/TabDisplay.svelte

@@ -0,0 +1,56 @@
+<script>
+	export let color = 'hsla(207, 65%, 39%, 1)';
+	export let id;
+	export let label;
+	export let activeId;
+
+	const classes = {
+		notActive:
+			'border-gray-100 text-gray-600 border-b-2 bg-gray-50 border-b-gray-200 hover:text-gray-800 hover:bg-gray-200 hover:border-b-gray-400',
+		active: 'text-black border-b-2 border-[--borderColor] bg-[--bgColor]'
+	};
+
+	color = color.replace(/\s+/g, ''); // clean string
+
+	const bgColor = isValidColorString(color) ? addOpacityToColor(color) : 'hsla(207, 65%, 39%, 0.1)';
+	const borderColor = isValidColorString(color) ? color : 'hsla(207, 65%, 39%, 1)';
+
+	function isHex(inputColor) {
+		const hexRegex = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/i;
+		return hexRegex.test(inputColor);
+	}
+
+	function isRGB(inputColor) {
+		const rgbRegex = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i;
+		return rgbRegex.test(inputColor);
+	}
+
+	function isHSL(inputColor) {
+		const hslRegex = /^hsl\(\s*(\d{1,3}%)\s*,\s*(\d{1,3}%)\s*,\s*(\d{1,3}%)\s*\)$/i;
+		return hslRegex.test(inputColor);
+	}
+
+	function isValidColorString(inputColor) {
+		return isHex(inputColor) || isRGB(inputColor) || isHSL(inputColor);
+	}
+
+	function addOpacityToColor(colorString) {
+		if (isHex(colorString)) {
+			return colorString + '1a';
+		} else if (isRGB(colorString) || isHSL(colorString)) {
+			return colorString.replace(/(\)|\s|$)/, ', 0.1$1');
+		}
+	}
+</script>
+
+<button
+	style:--bgColor={bgColor}
+	style:--borderColor={borderColor}
+	on:click
+	class="mt-2 p-2 rounded-t flex-1 text-sm font-sans whitespace-nowrap transition ease-in duration-200 active:bg-gray-100 {activeId ===
+	id
+		? classes.active
+		: classes.notActive}"
+>
+	{label}
+</button>