diff --git a/.changeset/chilly-yaks-listen.md b/.changeset/chilly-yaks-listen.md new file mode 100644 index 0000000000..8a4217f757 --- /dev/null +++ b/.changeset/chilly-yaks-listen.md @@ -0,0 +1,13 @@ +--- +'@evidence-dev/tailwind': patch +--- + +[!] BREAKING CHANGE: +Custom theme colors are converted implicitly to kebab-case by tailwindcss + +This means that some color defined in `evidence.config.yaml` as `myCustomColor` +should be used as (for example) `text-my-custom-color`. (`text-myCustomColor` will not work) + +When referencing custom theme colors in Javascript the original case should still be used +(for example) `myCustomColor` would still be `` +_NOT_ `` diff --git a/.changeset/four-mugs-taste.md b/.changeset/four-mugs-taste.md new file mode 100644 index 0000000000..c9778c7be4 --- /dev/null +++ b/.changeset/four-mugs-taste.md @@ -0,0 +1,11 @@ +--- +'@evidence-dev/source-javascript': patch +'@evidence-dev/component-utilities': patch +'@evidence-dev/preprocess': patch +'@evidence-dev/sdk': patch +'@evidence-dev/universal-sql': patch +'@evidence-dev/core-components': patch +'@evidence-dev/tailwind': patch +--- + +bump vitest diff --git a/.changeset/hungry-donkeys-run.md b/.changeset/hungry-donkeys-run.md new file mode 100644 index 0000000000..8c764299cc --- /dev/null +++ b/.changeset/hungry-donkeys-run.md @@ -0,0 +1,6 @@ +--- +'@evidence-dev/sdk': patch +'@evidence-dev/universal-sql': patch +--- + +Fix type errors diff --git a/.changeset/kind-fishes-mate.md b/.changeset/kind-fishes-mate.md new file mode 100644 index 0000000000..57b2c12d93 --- /dev/null +++ b/.changeset/kind-fishes-mate.md @@ -0,0 +1,7 @@ +--- +'@evidence-dev/core-components': patch +'@evidence-dev/tailwind': patch +'@evidence-dev/evidence': patch +--- + +Use theme class instead of data- diff --git a/.changeset/seven-books-press.md b/.changeset/seven-books-press.md new file mode 100644 index 0000000000..8f52e9a4fe --- /dev/null +++ b/.changeset/seven-books-press.md @@ -0,0 +1,6 @@ +--- +'@evidence-dev/evidence': minor +'@evidence-dev/core-components': minor +--- + +Improved settings page UI diff --git a/.changeset/strong-wombats-admire.md b/.changeset/strong-wombats-admire.md new file mode 100644 index 0000000000..6f4dc03056 --- /dev/null +++ b/.changeset/strong-wombats-admire.md @@ -0,0 +1,5 @@ +--- +'@evidence-dev/evidence': patch +--- + +Add theme.css export for svelte component diff --git a/packages/ui/core-components/src/lib/atoms/button/Button.stories.svelte b/packages/ui/core-components/src/lib/atoms/button/Button.stories.svelte index 712c36988f..eaa327006c 100644 --- a/packages/ui/core-components/src/lib/atoms/button/Button.stories.svelte +++ b/packages/ui/core-components/src/lib/atoms/button/Button.stories.svelte @@ -10,38 +10,92 @@ - const outlines = [false, true]; + + {#each variants as variant} +
+ {variant} +
+
+ {#each sizes as size} +
+ + + {size} + +
+ {/each} +
+ {/each} + - const disableds = [false, true]; - + + {#each variants as variant} +
+ {variant} +
+
+ {#each sizes as size} +
+ + + {size} + +
+ {/each} +
+ {/each} + - -
- - {#each outlines as outline} - outline={outline} - {/each} - {#each variants as variant} - {#each disableds as disabled} - disabled={disabled} - {#each outlines as outline} -
- {#each sizes as size} - - - - {/each} -
- {/each} + + {#each variants as variant} +
+ {variant} +
+
+ {#each sizes as size} +
+ + + {size} + +
{/each} - {/each} -
-
+
+ {/each} + + + + {#each variants as variant} +
+ {variant} +
+
+ {#each sizes as size} +
+ + + {size} + +
+ {/each} +
+ {/each} + + + + + class='w-full mt-6' + + {#each variants as variant} + + {/each} diff --git a/packages/ui/core-components/src/lib/atoms/button/Button.svelte b/packages/ui/core-components/src/lib/atoms/button/Button.svelte index ee11108aff..66edc6ad69 100644 --- a/packages/ui/core-components/src/lib/atoms/button/Button.svelte +++ b/packages/ui/core-components/src/lib/atoms/button/Button.svelte @@ -1,47 +1,11 @@ - - diff --git a/packages/ui/core-components/src/lib/atoms/content-box/ContentBox.svelte b/packages/ui/core-components/src/lib/atoms/content-box/ContentBox.svelte index d0b97f3602..954034035c 100644 --- a/packages/ui/core-components/src/lib/atoms/content-box/ContentBox.svelte +++ b/packages/ui/core-components/src/lib/atoms/content-box/ContentBox.svelte @@ -10,7 +10,9 @@
-
+
- diff --git a/packages/ui/core-components/src/lib/molecules/toast/Toast.svelte b/packages/ui/core-components/src/lib/molecules/toast/Toast.svelte index e995a55d83..a9501c42d0 100644 --- a/packages/ui/core-components/src/lib/molecules/toast/Toast.svelte +++ b/packages/ui/core-components/src/lib/molecules/toast/Toast.svelte @@ -15,6 +15,13 @@ } return status; }; + + const classLookup = { + negative: 'border-negative/50 bg-negative/10 text-negative', + positive: 'border-positive/50 bg-positive/10 text-positive', + info: 'border-info/50 bg-info/10 text-info', + warning: 'border-warning/50 bg-warning/10 text-warning' + }; -
+
diff --git a/packages/ui/core-components/src/lib/organisms/layout/header/SearchButton.css b/packages/ui/core-components/src/lib/organisms/layout/header/SearchButton.css deleted file mode 100644 index f42d63eaac..0000000000 --- a/packages/ui/core-components/src/lib/organisms/layout/header/SearchButton.css +++ /dev/null @@ -1,16 +0,0 @@ -.DocSearch-Button { - @apply bg-base-100 border-base-300 hover:bg-base-200/40 transition-colors duration-200 rounded-md flex gap-16 cursor-pointer py-1 pl-2 sm:pr-1 pr-20 sm:text-xs border font-sans font-medium items-center; -} -.DocSearch-Button-Placeholder { - @apply text-base-content-muted; -} -.DocSearch-Search-Icon { - display: none; -} -.DocSearch-Button-Keys { - @apply sm:flex gap-0.5 bg-base-200/40 border-base-300 border rounded px-1 py-0.5 text-xs hidden; -} -.DocSearch-Button-Key, -.DocSearch-Control-Key-Icon { - @apply text-base-content-muted *:text-base-content-muted; -} diff --git a/packages/ui/core-components/src/lib/organisms/layout/sidebar/Badge.svelte b/packages/ui/core-components/src/lib/organisms/layout/sidebar/Badge.svelte index 20f1357d00..5aac412a7f 100644 --- a/packages/ui/core-components/src/lib/organisms/layout/sidebar/Badge.svelte +++ b/packages/ui/core-components/src/lib/organisms/layout/sidebar/Badge.svelte @@ -1,5 +1,5 @@ diff --git a/packages/ui/core-components/src/lib/organisms/layout/tableofcontents/ContentsList.svelte b/packages/ui/core-components/src/lib/organisms/layout/tableofcontents/ContentsList.svelte index e19e5339aa..3e4156d725 100644 --- a/packages/ui/core-components/src/lib/organisms/layout/tableofcontents/ContentsList.svelte +++ b/packages/ui/core-components/src/lib/organisms/layout/tableofcontents/ContentsList.svelte @@ -28,6 +28,12 @@ onDestroy(() => { observer?.disconnect(); }); + + const classLookup = { + h1: 'mt-3 font-semibold block bg-base-100 shadow shadow-base-100', + h2: 'pl-0 text-base-content-muted', + h3: 'pl-4 text-base-content-muted' + }; {#if headers && headers.length > 1} @@ -35,30 +41,13 @@ On this page {#each headers as header} - + {header.innerText} {/each} {/if} - - diff --git a/packages/ui/core-components/src/lib/organisms/source-config/NewSourceForm.svelte b/packages/ui/core-components/src/lib/organisms/source-config/NewSourceForm.svelte index 68c996e285..6819eb37f3 100644 --- a/packages/ui/core-components/src/lib/organisms/source-config/NewSourceForm.svelte +++ b/packages/ui/core-components/src/lib/organisms/source-config/NewSourceForm.svelte @@ -1,76 +1,222 @@ -
-
-

Add new source

- - -
- +
+ {#if sourceAdded} +
+
+ +
+

Connected

+

+ Add files to sources/{source.name} in order to query this source. +

+
+
+ +
+ {:else if !configuring} +

+ + New Source +

+
+ + + +
+ +
+ +
+ + +
+ +
+ {:else} +
+
+ {#if isSimpleIcon(iconName)} + + {:else if isEvidenceIcon(iconName)} + + {:else} + + {/if} +
+
+
+
+

+ {source.type} +

+

{source.name}

+
+
+
-
- +
+ newSourceAdded(e)} + on:cancel={() => (configuring = false)} + />
- + {/if}
diff --git a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.stories.svelte b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.stories.svelte deleted file mode 100644 index 113fe692d5..0000000000 --- a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.stories.svelte +++ /dev/null @@ -1,38 +0,0 @@ - - - - - - - diff --git a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.svelte b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.svelte index fe41bbda3e..56e56f26db 100644 --- a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.svelte +++ b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.svelte @@ -7,7 +7,8 @@ import NewSourceForm from './NewSourceForm.svelte'; import SourceConfigRow from './SourceConfigRow.svelte'; import { Button } from '../../atoms/button/index.js'; - import { FolderPlus } from '@evidence-dev/component-utilities/icons'; + import { Plus, Database, Icon } from '@evidence-dev/component-utilities/icons'; + import { fly } from 'svelte/transition'; /** @type {Record} */ export let availableSourcePlugins = {}; @@ -22,123 +23,78 @@ /** @type {Pick[]} */ export let sources = []; - let showNewSource = sources.length === 0; - - /** @type {string} */ - let lastAdded; - /** @param {import('svelte').ComponentEvents['newSource']} e */ function addNewSource(e) { - const { newSourceType, newSourceName } = e.detail; - if (!newSourceType) return; - sources.push({ - name: newSourceName, - type: newSourceType, - options: {}, - environmentVariables: {} - }); - lastAdded = newSourceName; - showNewSource = false; + sources.push(e.detail); + sources = sources; } - /** @type {string[]} */ - let duplicatePackageNames = []; - $: if (sources.length) { - const allNames = sources.reduce( - (a, v) => { - if (a.sourceNames.has(v.name)) { - a.duplicateNames.add(v.name); - } - a.sourceNames.add(v.name); - - return a; - }, - { sourceNames: new Set(), duplicateNames: new Set() } - ); - - duplicatePackageNames = Array.from(allNames.duplicateNames); - } + let addingSource = false; -
-
-

Data Sources

- +
+ {#if sources?.length > 0} + {#if !addingSource} +
+ {#each sources as source (source?.name)} + + {/each} +
+ + {:else} +
+ +
+ {/if} + {:else if !addingSource}
- {#if sources.length > 0} -
-

-

Name

-

Type

-

-

- - {#if duplicatePackageNames.length} -
-

- Duplicate Packages found; this could lead to unexpected behavior -

-
    - {#each duplicatePackageNames as d} -
  • {d}
    • - {/each} -
-
- {/if} - - {#each sources as source} - - {/each} - -
- +
+ +
+

No Sources

+

Get started by adding your first source.

- - {#if showNewSource} - - {/if} - {:else} - -
- -
- {/if} +
+
- -
-
-
- - Learn more about - - Configuring Data Sources → - -
-
- - + {:else} +
+ +
+ {/if} +
diff --git a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigForm.svelte b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigForm.svelte index 01c9ea6fcc..8b74e0d9ac 100644 --- a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigForm.svelte +++ b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigForm.svelte @@ -1,17 +1,19 @@
-

Configure {source.name}

-
- {#if configurationError} -

{configurationError}

- {:else if configurationOkay} -

Configuration Updated

+
+ {#if !isNewSource} + {/if} - -

Source Info

- - - - {#if Object.keys(sourcePlugin.options).length} -
-

Source Options

+ + {#if Object.keys(sourcePlugin?.options).length} {/if} -
- -
- {#if validationError} -

{validationError}

- {:else if validationOkay} -

Connection Successful!

- {/if} - - - + {#if hasSecretOptions(sourcePlugin?.options)} + + {/if} +
+ +
+
+ {#if configurationError} +

+ {configurationError} +

+ {:else if validationError} +

{validationError}

+ {:else if configurationOkay} +
+
+
+
+

Connected

+
+ {/if} +
+
+ {#if isNewSource} + + {/if} + + {#if isNewSource && source?.type === 'duckdb'} + + + {:else if !configurationOkay || JSON.stringify(source) !== lastTestedConfig} + + {:else} +
+ +
+ {/if} +
diff --git a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigFormField.svelte b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigFormField.svelte index af49160274..be6bff83de 100644 --- a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigFormField.svelte +++ b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigFormField.svelte @@ -2,10 +2,11 @@ // @ts-check import yaml from 'yaml'; + import { slide } from 'svelte/transition'; import { JSONPath } from '@astronautlabs/jsonpath'; import SourceConfigFormSection from './SourceConfigFormSection.svelte'; - import Hint from '../../atoms/hint/Hint.svelte'; + import Switch from '$lib/atoms/switch/Switch.svelte'; /** @type {import('@evidence-dev/sdk/plugins').IDatasourceOptionSpec} */ export let spec; @@ -147,29 +148,23 @@ $: options[fieldValueKey] = fieldValue; $: fieldDisabled = disabled || spec.forceReference || (spec.references && refVal !== null); + + const inputClasses = + 'rounded-md border border-base-300 bg-base-100 shadow-sm px-2 py-1 text-sm focus-visible:ring-base-300 flex h-9 w-full transition-colors focus-visible:outline-none focus-visible:ring-1 p-1 ml-auto align-middle'; -
-
- - diff --git a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigRow.svelte b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigRow.svelte index 6355ae7b43..017c56ebda 100644 --- a/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigRow.svelte +++ b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfigRow.svelte @@ -11,11 +11,10 @@ import * as evidenceIcons from '@evidence-dev/icons'; import { Button } from '../../atoms/button/index.js'; - import { Database, ExclamationCircle, Pencil } from '@steeze-ui/tabler-icons'; + import { Database, ExclamationCircle } from '@steeze-ui/tabler-icons'; import SourceConfigForm from './SourceConfigForm.svelte'; - import { Hint } from '../../atoms/hint/index.js'; - /** @type {Pick} */ + /** @type {Pick} */ export let source; /** @type {Pick[]} */ @@ -24,9 +23,7 @@ /** @type {Record} */ export let availableSourcePlugins; - export let startOpen = false; - - let open = startOpen; + let open = false; $: sourcePlugin = availableSourcePlugins?.[source.type]; @@ -45,44 +42,43 @@ const isEvidenceIcon = (iconName) => typeof iconName !== 'undefined' && iconName in evidenceIcons; -
- {#if isSimpleIcon(iconName)} - - {:else if isEvidenceIcon(iconName)} - - {:else if !sourcePlugin} - - {:else} - - {/if} -

{source.name}

-
-

- {source.type} -

- {#if !sourcePlugin} -

- No connector for {source.type} is available -

- Make sure you have installed it, and included it in your evidence.plugins.yaml file - {/if} -
-
- +
+
+
+ {#if isSimpleIcon(iconName)} + + {:else if isEvidenceIcon(iconName)} + + {:else if !sourcePlugin} + + {:else} + + {/if} +
+
+
+
+

+ {source.type} +

+

{source.name}

+
+
+
+ +
+
+ {#if open} +
+ (source = e.detail)} + /> +
+ {/if}
- -{#if open} -
- (source = e.detail)} - /> -
-{/if} diff --git a/packages/ui/core-components/src/lib/organisms/source-config/atoms/SourceNameField.svelte b/packages/ui/core-components/src/lib/organisms/source-config/atoms/SourceNameField.svelte index f4c9050cbc..552f79b00c 100644 --- a/packages/ui/core-components/src/lib/organisms/source-config/atoms/SourceNameField.svelte +++ b/packages/ui/core-components/src/lib/organisms/source-config/atoms/SourceNameField.svelte @@ -1,4 +1,5 @@ - -
+
+ {#if nameError} - {nameError} + {nameError} + {/if} + {#if showPrefix} +

+ Name of the new directory that will be created for this source, under `/sources`. +

+ {:else} +

+ Tables from this source can be queried using `<source name>.<tablename>`. Changing the name will change how you reference the source in your queries, but it will not + change the source directory. +

{/if}
diff --git a/packages/ui/core-components/src/lib/storybook-helpers/WithEvidence.svelte b/packages/ui/core-components/src/lib/storybook-helpers/WithEvidence.svelte index 0459a0cfbd..617dc648fc 100644 --- a/packages/ui/core-components/src/lib/storybook-helpers/WithEvidence.svelte +++ b/packages/ui/core-components/src/lib/storybook-helpers/WithEvidence.svelte @@ -1,6 +1,7 @@ - - diff --git a/packages/ui/core-components/src/lib/storybook-helpers/initializeUSQL.js b/packages/ui/core-components/src/lib/storybook-helpers/initializeUSQL.js index 4a5303bd4e..b45ef48d13 100644 --- a/packages/ui/core-components/src/lib/storybook-helpers/initializeUSQL.js +++ b/packages/ui/core-components/src/lib/storybook-helpers/initializeUSQL.js @@ -9,7 +9,7 @@ export async function initialize() { try { await initDB(); const res = await fetch(addBasePath('/data/manifest.json')).then((r) => r.json()); - await setParquetURLs(res.renderedFiles ?? {}); + await setParquetURLs(res.renderedFiles ?? {}, { addBasePath }); await updateSearchPath(Object.keys(res.renderedFiles ?? {})); if (!res.renderedFiles) console.error('No fixture data available!'); } catch (e) { diff --git a/packages/ui/core-components/src/lib/themes/themes.js b/packages/ui/core-components/src/lib/themes/themes.js index 86c8156d88..adfa5e0cc6 100644 --- a/packages/ui/core-components/src/lib/themes/themes.js +++ b/packages/ui/core-components/src/lib/themes/themes.js @@ -105,26 +105,47 @@ export class ThemeStores { } /** @param {HTMLElement} element */ - syncDataThemeAttribute = (element) => { - // Sync activeAppearance -> html[data-theme] + syncThemeAttribute = (element) => { + // Sync activeAppearance -> .theme- + const removeAllThemes = () => { + // When running in chromatic, it was complaining that forEach was not a function + // By explicitly converting to an array, we are ensuring that it will behave + // as we expect it to + Array.from(element.classList.values()).forEach((className) => { + if (className.startsWith('theme-')) { + element.classList.remove(className); + } + }); + }; + + let controlledUpdate = false; const unsubscribe = this.#activeAppearance.subscribe(($activeAppearance) => { - const current = element.getAttribute('data-theme'); - if (current !== $activeAppearance) { - element.setAttribute('data-theme', $activeAppearance); - } + requestAnimationFrame(() => { + controlledUpdate = true; + // try to do this all in one frame to prevent jitter + removeAllThemes(); + element.classList.add(`theme-${$activeAppearance}`); + requestAnimationFrame(() => (controlledUpdate = false)); + }); }); - // Sync html[data-theme] -> activeAppearance + // Sync .theme- -> activeAppearance const observer = new MutationObserver((mutations) => { + if (controlledUpdate) return; const html = /** @type {HTMLHtmlElement} */ (mutations[0].target); - const theme = html.getAttribute('data-theme'); + const themes = [ + ...html.classList.values().filter((className) => className.startsWith('theme-')) + ]; + if (themes.length === 0) return; + const theme = themes[0].replace('theme-', ''); + if (!theme || !['light', 'dark'].includes(theme)) return; const current = get(this.#activeAppearance); if (theme !== current) { this.#selectedAppearance.set(/** @type {'light' | 'dark'} */ (theme)); } }); - observer.observe(element, { attributeFilter: ['data-theme'] }); + observer.observe(element, { attributeFilter: ['class'] }); return () => { unsubscribe(); diff --git a/packages/ui/core-components/src/lib/unsorted/ui/CodeBlock.svelte b/packages/ui/core-components/src/lib/unsorted/ui/CodeBlock.svelte index 812e80522e..a2aa2324fd 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/CodeBlock.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/CodeBlock.svelte @@ -3,6 +3,7 @@ -
+
{#if copyToClipboard} {/if} diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/CopyEnvironmentVariables.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/CopyEnvironmentVariables.svelte new file mode 100644 index 0000000000..b7eb64d2d2 --- /dev/null +++ b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/CopyEnvironmentVariables.svelte @@ -0,0 +1,38 @@ + + + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/CopyIcon.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/CopyIcon.svelte index 202a7a4b02..4f20751289 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/CopyIcon.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/CopyIcon.svelte @@ -1,7 +1,3 @@ - - - - export const evidenceInclude = true; - - -
-
-
-

Deployment

+
+
+

Evidence Cloud

+ +
+
+ 1 +
+

Check your project into version control

+
+

- Evidence projects can be deployed to a variety of cloud environments. The easiest way to - deploy your project is with Evidence Cloud. + Evidence Cloud deploys your project from its Github repository. As you make changes to your + project and commit them to main, Evidence cloud will update your deployed project.

-

Environment Variables

-
- -
- -

Deployment Environment

-
- {#if selectedDeployment.FormComponent} -
- +
+
+ 2
- {/if} -
-
+
+

+ Sign into Evidence Cloud using your GitHub account and add a new project. Follow the steps + to connect to your Github repository. +

+ Deploying your Project → - - - - +

Done

+
+
+

+ When you make changes to your project locally, push them to main, and Evidence cloud will + update your deployed project. +

+
+

Other Environments

+

+ Documentation on deploying Evidence projects to a variety of cloud environments is available + here. For all deployment environments, you will need to set the environment variables using the key + value pairs below. +

+ +
+

+ To use different connection settings your deployment environment, + + set different environment variable values in your deployment environment + + . +

+
+
+
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EnvironmentVarListing.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EnvironmentVarListing.svelte index 5db1ff4fea..6ad07cb3b0 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EnvironmentVarListing.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EnvironmentVarListing.svelte @@ -1,124 +1,21 @@ - - -

- To use different data environments in production vs development, - - use different environment variable values. - -

- -{#if credentials.authenticator === 'externalbrowser'} -
-

- External browser authentication isn't supported in cloud deployments, as it needs access to a - browser. Set up one of the other authentication options for a deployment. -

-{:else if credentials.authenticator === 'gcloud-cli'} -
-

- GCloud authentication isn't supported in cloud deployments, as it needs access to a browser. Set - up one of the other authentication options for a deployment. -

-{:else} - - -
- -
- -
- KeyValue -
- {#each sources as datasource} - {#each Object.entries(datasource.environmentVariables) as [key, value]} -
-
- -
-
- -
-
- {/each} - {/each} - - -{/if} - - +
+ Key + Value +
+
+ {#each sources as datasource} + {#each Object.entries(datasource?.environmentVariables) as [key, value]} + + + {/each} + {/each} +
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EvidenceDeploy.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EvidenceDeploy.svelte index 8de49af055..f731b6cc24 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EvidenceDeploy.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/EvidenceDeploy.svelte @@ -1,5 +1,5 @@ -

Deploying to Evidence Cloud

-

Evidence Cloud allows you to:

+

Deploying to Evidence Cloud

+

Evidence Cloud allows you to:

  • Host your project at {'<'}project-name{'>'}.evidence.app
  • Authenticate users
    • @@ -18,15 +18,7 @@
- diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/VercelDeploy.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/VercelDeploy.svelte index c7ac407aed..f43b5437af 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/VercelDeploy.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/VercelDeploy.svelte @@ -11,16 +11,21 @@ {#if !sources.length} -

You'll need to connect to at least one datasource before deploying to Vercel.

+

+ You'll need to connect to at least one datasource before deploying to Vercel. +

{:else if !settings.gitRepo} -

You'll need to set up a git repo before deploying to Vercel.

+

You'll need to set up a git repo before deploying to Vercel.

{:else} -

Deploying to Vercel

+

Deploying to Vercel

  1. - Start a new Vercel project →Start a new Vercel project →
  2. Choose the repo containing this project
    3. @@ -45,19 +50,7 @@
{/if} - diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CurrencyFormatGrid.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CurrencyFormatGrid.svelte index 2df3189cb9..414ba98ab7 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CurrencyFormatGrid.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CurrencyFormatGrid.svelte @@ -1,7 +1,3 @@ - - - +
+ +
{#if selectedCurrency != 'Choose a currency'}
- - - - - - +
Format NameFormat CodeExample InputExample Output
+ + + + + {#each formats.filter((d) => d.parentFormat === selectedCurrency) as format (format.formatTag)} @@ -37,95 +38,12 @@ placeholder={format.exampleInput || defaultExample(format.valueType)} bind:value={format.userInput} on:blur={(format.userInput = undefined)} - class="align_left input_box" + class="rounded shadow-sm border border-base-300 px-2 py-1 text-sm w-full bg-base-100 focus:ring-base-300 focus:border-base-300 focus:outline-none focus:ring-1" /> - + {/each}
Format NameFormat CodeExample InputExample Output
{formatExample(format)}{formatExample(format)}
{/if} - - diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatGrid.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatGrid.svelte index cb7dbf00c1..2e0cfd25b9 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatGrid.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatGrid.svelte @@ -1,26 +1,22 @@ - - - - - - - - - +
Format NameFormat CodeExample InputExample Output
+ + + + + + - {#each formats as format} - + {#each formats as format (format.formatTag)} + - - + {/each}
Format NameFormat CodeExample InputExample Output
{format.formatTag} {format.formatCode} @@ -29,97 +25,15 @@ placeholder={format.exampleInput || defaultExample(format.valueType)} bind:value={format.userInput} on:blur={(format.userInput = undefined)} - class="align_left input_box" + class="rounded shadow-sm border border-base-300 px-2 py-1 text-sm w-full bg-base-100 focus:ring-base-300 focus:border-base-300 focus:outline-none focus:ring-1" /> {formatExample(format)} - + {formatExample(format)} +
- - diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatsSection.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatsSection.svelte index 1f45527b8b..4e41e5223f 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatsSection.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/CustomFormatsSection.svelte @@ -1,13 +1,11 @@ - - {#if customFormattingSettings.customFormats && customFormattingSettings.customFormats.length > 0} - - - +
+ + + + + +
{/if} -
-
- - -
-
- - + +
+
+ + +
+
+ + +
+
+ + +
+ +
{@html newFormatValidationErrors}
-
- - -
-
- -
-
{@html newFormatValidationErrors}
- - diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/FormattingSettingsPanel.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/FormattingSettingsPanel.svelte index e177914d53..fa22e6b646 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Formatting/FormattingSettingsPanel.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Formatting/FormattingSettingsPanel.svelte @@ -4,9 +4,9 @@ import { BUILT_IN_FORMATS } from '@evidence-dev/component-utilities/builtInFormats'; import BuiltInFormatGrid from './BuiltInFormatGrid.svelte'; import CustomFormatsSection from './CustomFormatsSection.svelte'; - import CollapsibleTableSection from './CollapsibleTableSection.svelte'; import CurrencyFormatGrid from './CurrencyFormatGrid.svelte'; - import Prism from '../QueryViewerSupport/Prismjs.svelte'; + import CodeBlock from '../CodeBlock.svelte'; + import { Accordion, AccordionItem } from '../../../atoms/accordion/index.js'; /** @type {{ customFormats?: { formatTag: string }[] }}*/ export let customFormattingSettings; @@ -26,131 +26,54 @@ from table`; let valueExample = ``; -
-
-
-

Value Formatting

-

- Evidence supports built-in formats (like usd and pct) and - Excel-style formats (like $#,##0.0). The easiest way to apply these formats is - using component props. For example: -

-

In the Value component, you can use the fmt prop

-
- -
-
-

In charts, you can use the xFmt and yFmt props

-
- -
-
-

- You can also set formats within your SQL queries using SQL format tags. Use these by - aliasing your column names and appending a format. For example: -

-
- -
-

-

-
-

Built-in Formats

-

All built-in formats are listed below for reference.

- +
+
+

Using Formats

+

In the Value component, you can use the fmt prop

+ +

In charts, you can use the xFmt and yFmt props

+ +

+ You can also set formats within your SQL queries using SQL format tags. Use these by aliasing + your column names and appending a format. For example: +

+ +
+
+

Builtin Formats

+

All built-in formats are listed below for reference.

+ + d.formatCategory === 'date')} /> - - + + d.formatCategory === 'currency')} /> - - + + d.formatCategory === 'number')} /> - - + + d.formatCategory === 'percent')} /> - -
-
-

Custom Formats

-

- Add new formats to your project. Custom formats use excel-style format codes. -

- -
+ +
- - - - + href="https://support.microsoft.com/en-us/office/number-format-codes-5026bbd6-04bc-48cd-bf33-80f18b4eae68" + >excel-style format codes and are saved in your project. +

+ +
+ diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte index 035b24f89f..ab7878d6f6 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Image.svelte @@ -35,7 +35,7 @@ alt={description} style={`width: ${processedWidth}; height: ${processedHeight};`} class={cn( - `max-w-full h-auto rounded ${border ? 'border border-gray-300 rounded-md shadow-sm' : ''}`, + `max-w-full h-auto rounded-sm ${border ? 'border border-gray-300 rounded-md shadow-sm' : ''}`, className )} loading="lazy" diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Info.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Info.svelte index f18d203eb2..1de5d93e19 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Info.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Info.svelte @@ -40,7 +40,7 @@ on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && toggleOpen()} > - + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Modal.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Modal.svelte index 059e48ef0e..f9a7b8fca6 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Modal.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Modal.svelte @@ -87,11 +87,7 @@
{/if} - diff --git a/packages/ui/core-components/src/lib/unsorted/ui/QueryViewerSupport/QueryDataTable.svelte b/packages/ui/core-components/src/lib/unsorted/ui/QueryViewerSupport/QueryDataTable.svelte index 7eab35c6a1..e5fb5c9c63 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/QueryViewerSupport/QueryDataTable.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/QueryViewerSupport/QueryDataTable.svelte @@ -52,13 +52,13 @@
- +
- - - {#each columnSummary as column, j} {#if row[column.id] == null} - {:else if columnSummary[j].type === 'number'} @@ -149,8 +155,15 @@ {#if max > 0} @@ -161,7 +174,7 @@ - + + + + + + diff --git a/packages/ui/core-components/src/lib/unsorted/ui/VersionControl/VersionControlPanel.svelte b/packages/ui/core-components/src/lib/unsorted/ui/VersionControl/VersionControlPanel.svelte deleted file mode 100644 index d9f54abb23..0000000000 --- a/packages/ui/core-components/src/lib/unsorted/ui/VersionControl/VersionControlPanel.svelte +++ /dev/null @@ -1,196 +0,0 @@ - - - - - -
-
-

Version Control

- Use version control to keep track of changes to your project. A published git repo is needed if - you want to deploy your Evidence project online. - -
- {#if settings.localGitRepo} - - - - {:else} - - - - {/if} - Local Git Repo - {#if settings.localGitRepo} -
- Tracking {settings.localGitRepo} -
- {:else} - - - Use your code editor to initialize a repo or run `git init` in a terminal - - {/if} -
- -
- {#if settings.gitRepo} - - - - {:else} - - - - {/if} - Git Repo Published - {#if settings.gitRepo} -
- {settings.gitRepo.replace('.git', '')} -
- {:else} - - - Publish your git repo to a platform like GitHub or GitLab - - {/if} -
-
-
- - - - diff --git a/packages/ui/core-components/src/lib/unsorted/ui/VersionControl/index.js b/packages/ui/core-components/src/lib/unsorted/ui/VersionControl/index.js deleted file mode 100644 index 4982fa8bf3..0000000000 --- a/packages/ui/core-components/src/lib/unsorted/ui/VersionControl/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as VersionControlPanel } from './VersionControlPanel.svelte'; diff --git a/packages/ui/core-components/src/lib/unsorted/ui/index.js b/packages/ui/core-components/src/lib/unsorted/ui/index.js index bb88f76db9..59b3936fb6 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/index.js +++ b/packages/ui/core-components/src/lib/unsorted/ui/index.js @@ -26,4 +26,3 @@ export * from './Formatting'; export * from './QueryViewerSupport'; export * from './Tabs'; export * from './TelemetryOptOut'; -export * from './VersionControl'; diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/BigValueError.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/BigValueError.svelte index 82c18e5ead..b05a56b5cc 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/core/BigValueError.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/core/BigValueError.svelte @@ -8,7 +8,7 @@
Big Value
diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/EmptyChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/EmptyChart.svelte index b9131757e5..789b2591ac 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/core/EmptyChart.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/core/EmptyChart.svelte @@ -41,18 +41,18 @@ {#if ['warn', 'pass'].includes(emptySet) || !isInitial} {#if chartType === 'Value'} {emptyMessage} {:else if chartType === 'Big Value'}

{emptyMessage}

{:else}

{emptyMessage}

diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte index dd52aaa316..0b548f579e 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/core/ErrorChart.svelte @@ -16,7 +16,7 @@ class={`grid grid-rows-auto grid-cols-1 justify-center relative bg-negative/10 text-negative font-ui font-normal - rounded border border-negative/50 + rounded-sm border border-negative/50 py-5 px-8 mt-2 mb-4 print:break-inside-avoid`} style="min-height: {height}px" diff --git a/packages/ui/core-components/src/lib/unsorted/viz/core/SearchBar.svelte b/packages/ui/core-components/src/lib/unsorted/viz/core/SearchBar.svelte index a649c3c2d2..bef6cb8bcf 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/core/SearchBar.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/core/SearchBar.svelte @@ -11,22 +11,21 @@ export let searchFunction; -
+
searchFunction(value)} /> -
+
- diff --git a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte index f7c25e332e..9bd612f444 100644 --- a/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte +++ b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte @@ -691,11 +691,11 @@
No Results
{#if paginated && pageCount > 1} -
+ {#each columnSummary as column}
+ {#each columnSummary as column} {#each dataPage as row, i}
+ {#if i === 0} {(index + i + 1).toLocaleString()} @@ -94,7 +97,10 @@ + {'Ø'}