From bad1c6648614c7bdf6b289a285662e3ccf7770be Mon Sep 17 00:00:00 2001 From: brian Date: Thu, 23 Jan 2025 13:37:15 -0600 Subject: [PATCH 01/42] chore: comment out component paths for now --- sites/example-project/tailwind.config.cjs | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/sites/example-project/tailwind.config.cjs b/sites/example-project/tailwind.config.cjs index eca5710ba2..9455827aa6 100644 --- a/sites/example-project/tailwind.config.cjs +++ b/sites/example-project/tailwind.config.cjs @@ -23,12 +23,13 @@ const config = { get files() { const pluginConfig = evidenceConfig.plugins; const components = pluginConfig.components; - const componentPaths = Object.keys(components) - .map((pluginName) => [ - `./node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}`, - `../../node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}` - ]) - .flat(); + // const componentPaths = Object.keys(components) + // .map((pluginName) => [ + // `./node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}`, + // `../../node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}` + // ]) + // .flat(); + const componentPaths = [] return [ './src/**/*.{html,js,svelte,ts,md}', // This is used for everything in base evidence template From f380505ce40fba606cf962c07b1ec3660173f84c Mon Sep 17 00:00:00 2001 From: brian Date: Thu, 23 Jan 2025 15:11:13 -0600 Subject: [PATCH 02/42] chore: remove sdk dependency from universal-sql @evidence-dev/sdk and @evidence-dev/universal-sql has a circular dependency, which should be remedied This means that we will have to do a bit of DI, as well as losing the detailed logs for build-parquet (for now) --- e2e/base-path/tests/tests.spec.js | 10 +++++ .../src/build-dev/vite/virtuals/initUsql.js | 41 ++++++++++--------- packages/lib/universal-sql/package.json | 1 - .../lib/universal-sql/src/build-parquet.js | 38 ++++++++--------- .../src/client-duckdb/browser.d.ts | 7 +++- .../src/client-duckdb/browser.js | 5 +-- .../universal-sql/src/client-duckdb/node.d.ts | 4 +- .../universal-sql/src/client-duckdb/node.js | 4 +- .../lib/storybook-helpers/initializeUSQL.js | 2 +- sites/example-project/src/pages/+layout.js | 2 +- sites/example-project/tailwind.config.cjs | 2 +- 11 files changed, 64 insertions(+), 52 deletions(-) diff --git a/e2e/base-path/tests/tests.spec.js b/e2e/base-path/tests/tests.spec.js index 43ccadb494..7d8976d041 100644 --- a/e2e/base-path/tests/tests.spec.js +++ b/e2e/base-path/tests/tests.spec.js @@ -191,6 +191,16 @@ test.describe('Page', () => { }); }); +test.describe('Parquet Files', () => { + test('Manifest links should use base path', async ({ page }) => { + await page.goto(basePath); + await waitForPageToLoad(page); + const req = await page.waitForRequest(`${basePath}/data/needful_things/orders/orders.parquet`); + const res = await req.response(); + expect(res?.ok()).toBe(true); + }); +}); + test.describe('Components', () => { test('Table row links should use base path', async ({ page }) => { await page.goto(`${basePath}/table-row-links`); diff --git a/packages/lib/sdk/src/build-dev/vite/virtuals/initUsql.js b/packages/lib/sdk/src/build-dev/vite/virtuals/initUsql.js index dabd7b84b6..fb0b073edc 100644 --- a/packages/lib/sdk/src/build-dev/vite/virtuals/initUsql.js +++ b/packages/lib/sdk/src/build-dev/vite/virtuals/initUsql.js @@ -1,23 +1,24 @@ -import { - initDB, - setParquetURLs, - updateSearchPath, - query -} from '@evidence-dev/universal-sql/client-duckdb'; +// This is currently dead code from the initial sdk implementation +// import { +// initDB, +// setParquetURLs, +// updateSearchPath, +// query +// } from '@evidence-dev/universal-sql/client-duckdb'; -import { getManifest } from '$evidence/static-assets'; +// import { getManifest } from '$evidence/static-assets'; -export default (async () => { - await initDB(); - let res; - // TODO: Optionally take in a filepath and/or URL for the manifest - res = await getManifest(); - res = JSON.parse(res); +// export default (async () => { +// await initDB(); +// let res; +// // TODO: Optionally take in a filepath and/or URL for the manifest +// res = await getManifest(); +// res = JSON.parse(res); - await setParquetURLs(res.renderedFiles ?? {}); - await updateSearchPath(Object.keys(res.renderedFiles ?? {})); - if (!res.renderedFiles) console.error('No fixture data available!'); - // Test Query - await query('SELECT * FROM information_schema.tables'); - console.log('Universal SQL has been initialized successfully'); -})(); +// await setParquetURLs(res.renderedFiles ?? {}); +// await updateSearchPath(Object.keys(res.renderedFiles ?? {})); +// if (!res.renderedFiles) console.error('No fixture data available!'); +// // Test Query +// await query('SELECT * FROM information_schema.tables'); +// console.log('Universal SQL has been initialized successfully'); +// })(); diff --git a/packages/lib/universal-sql/package.json b/packages/lib/universal-sql/package.json index f6346f29fb..ffb21aee80 100644 --- a/packages/lib/universal-sql/package.json +++ b/packages/lib/universal-sql/package.json @@ -20,7 +20,6 @@ "cli-progress": "^3.12.0", "lodash.chunk": "^4.2.0", "parquet-wasm": "0.5.0", - "@evidence-dev/sdk": "workspace:*", "web-worker": "^1.2.0" }, "exports": { diff --git a/packages/lib/universal-sql/src/build-parquet.js b/packages/lib/universal-sql/src/build-parquet.js index 42dd46709a..aa971bdc8a 100644 --- a/packages/lib/universal-sql/src/build-parquet.js +++ b/packages/lib/universal-sql/src/build-parquet.js @@ -20,7 +20,7 @@ import { emptyDbFs, initDB, query } from './client-duckdb/node.js'; import chunk from 'lodash.chunk'; import { columnsToScore } from './calculateScore.js'; import chalk from 'chalk'; -import { log } from '@evidence-dev/sdk/logger'; +// import { log } from '@evidence-dev/sdk/logger'; /** * @param {{name: string, evidenceType: string}} column @@ -86,9 +86,9 @@ export async function buildMultipartParquet( outputFilename, batchSize = 1000000 ) { - log.debug(`Building parquet file ${outputFilename}`); - let { meta: fn_meta, done: fn_done } = log.measure('buildMultipartParquet'); - fn_meta('output filename', outputFilename); + // log.debug(`Building parquet file ${outputFilename}`); + // let { meta: fn_meta, done: fn_done } = log.measure('buildMultipartParquet'); + // fn_meta('output filename', outputFilename); let batchNum = 0; const outputSubpath = outputFilename.split('.parquet')[0]; @@ -96,9 +96,9 @@ export async function buildMultipartParquet( let rowCount = 0; const flush = async (results) => { - log.debug(`Flushing batch ${batchNum} with ${results.length} rows`); - let { meta, done } = log.measure('flush'); - meta('batch number', batchNum); + // log.debug(`Flushing batch ${batchNum} with ${results.length} rows`); + // let { meta, done } = log.measure('flush'); + // meta('batch number', batchNum); // Convert JS Objects -> Arrow const vectorized = Object.fromEntries( @@ -131,8 +131,8 @@ export async function buildMultipartParquet( tmpFilenames.push(tempFilename); rowCount += results.length; - done(); - log.debug(`Flushed batch ${batchNum} with ${results.length} rows`); + // done(); + // log.debug(`Flushed batch ${batchNum} with ${results.length} rows`); batchNum++; }; @@ -153,26 +153,26 @@ export async function buildMultipartParquet( })(); } - log.debug('Reading rows from a generator object'); - let { meta, done } = log.measure('buildMultipartParquet'); - meta('batch number', batchNum); + // log.debug('Reading rows from a generator object'); + // let { meta, done } = log.measure('buildMultipartParquet'); + // meta('batch number', batchNum); const currentBatch = []; for await (const results of data) { for (const result of results) currentBatch.push(result); if (currentBatch.length >= batchSize) { - done(); - log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`); + // done(); + // log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`); await flush(currentBatch); currentBatch.length = 0; - ({ meta, done } = log.measure('buildMultipartParquet')); - meta('batch number', batchNum); + // ({ meta, done } = log.measure('buildMultipartParquet')); + // meta('batch number', batchNum); } } - done(); - log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`); + // done(); + // log.debug(`Flushing batch ${batchNum} with ${currentBatch.length} rows`); if (currentBatch.length) await flush(currentBatch); @@ -230,7 +230,7 @@ export async function buildMultipartParquet( } await emptyDbFs('*'); - fn_done(); + // fn_done(); return rowCount; } diff --git a/packages/lib/universal-sql/src/client-duckdb/browser.d.ts b/packages/lib/universal-sql/src/client-duckdb/browser.d.ts index af51d8a7fc..a3faa0aa5e 100644 --- a/packages/lib/universal-sql/src/client-duckdb/browser.d.ts +++ b/packages/lib/universal-sql/src/client-duckdb/browser.d.ts @@ -25,10 +25,13 @@ export function query(sql: string): Promise * Adds a new view to the database, pointing to the provided parquet URLs. * * @param {Record} urls - * @param {boolean} [append] + * @param {{ append?: boolean, addBasePath?: (path: string) => string }} [opts] * @returns {Promise} */ -export function setParquetURLs(urls: Record, append?: boolean): Promise; +export function setParquetURLs( + urls: Record, + opts?: { append?: boolean; addBasePath?: (path: string) => string } +): Promise; /** * Converts an Apache Arrow table to a Javascript array. diff --git a/packages/lib/universal-sql/src/client-duckdb/browser.js b/packages/lib/universal-sql/src/client-duckdb/browser.js index 2632efe5a3..965bc3c380 100644 --- a/packages/lib/universal-sql/src/client-duckdb/browser.js +++ b/packages/lib/universal-sql/src/client-duckdb/browser.js @@ -6,7 +6,6 @@ import { getPlatformFeatures, VoidLogger } from '@duckdb/duckdb-wasm'; -import { addBasePath } from '@evidence-dev/sdk/utils/svelte'; export { tableFromIPC } from 'apache-arrow'; @@ -106,10 +105,10 @@ export async function emptyDbFs(targetGlob) { /** * Adds a new view to the database, pointing to the provided parquet URL. * @param {Record} urls - * @param {boolean} [append] + * @param {{ append?: boolean, addBasePath?: (path: string) => string }} [opts] * @returns {Promise} */ -export async function setParquetURLs(urls, append = false) { +export async function setParquetURLs(urls, { append, addBasePath } = {}) { if (!db) await initDB(); if (!append) await emptyDbFs('*'); if (import.meta.env.VITE_EVIDENCE_DEBUG) console.debug('Updating Parquet URLs'); diff --git a/packages/lib/universal-sql/src/client-duckdb/node.d.ts b/packages/lib/universal-sql/src/client-duckdb/node.d.ts index 97909e6fbf..cb9d1664f4 100644 --- a/packages/lib/universal-sql/src/client-duckdb/node.d.ts +++ b/packages/lib/universal-sql/src/client-duckdb/node.d.ts @@ -30,10 +30,10 @@ export function query( * Adds a new view to the database, pointing to the provided parquet URLs. * * @param {Record} urls - * @param {boolean} [append] + * @param {{ append?: boolean }} [opts] * @returns {void} */ -export function setParquetURLs(urls: Record, append?: boolean): void; +export function setParquetURLs(urls: Record, opts?: { append?: boolean }): void; /** * Converts an Apache Arrow table to a Javascript array. diff --git a/packages/lib/universal-sql/src/client-duckdb/node.js b/packages/lib/universal-sql/src/client-duckdb/node.js index 54e20e507d..62ed790611 100644 --- a/packages/lib/universal-sql/src/client-duckdb/node.js +++ b/packages/lib/universal-sql/src/client-duckdb/node.js @@ -103,10 +103,10 @@ export async function emptyDbFs(targetGlob) { * Adds a new view to the database, pointing to the provided parquet URLs. * * @param {Record} urls - * @param {boolean} [append] + * @param {{ append?: boolean }} [opts] * @returns {void} */ -export async function setParquetURLs(urls, append = false) { +export async function setParquetURLs(urls, { append } = {}) { if (!append) await emptyDbFs('*'); const pathDelimiterRegex = /[\\/]/; 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/sites/example-project/src/pages/+layout.js b/sites/example-project/src/pages/+layout.js index 068482b9e8..64fbf5be45 100644 --- a/sites/example-project/src/pages/+layout.js +++ b/sites/example-project/src/pages/+layout.js @@ -45,7 +45,7 @@ const loadDB = async () => { ); } } else { - await profile(setParquetURLs, renderedFiles); + await profile(setParquetURLs, renderedFiles, { addBasePath }); await profile(updateSearchPath, Object.keys(renderedFiles)); } }; diff --git a/sites/example-project/tailwind.config.cjs b/sites/example-project/tailwind.config.cjs index 9455827aa6..e279795ce4 100644 --- a/sites/example-project/tailwind.config.cjs +++ b/sites/example-project/tailwind.config.cjs @@ -29,7 +29,7 @@ const config = { // `../../node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}` // ]) // .flat(); - const componentPaths = [] + const componentPaths = []; return [ './src/**/*.{html,js,svelte,ts,md}', // This is used for everything in base evidence template From 51fbfa37855f93c186111cc720272b0491b3b944 Mon Sep 17 00:00:00 2001 From: brian Date: Thu, 23 Jan 2025 16:19:18 -0600 Subject: [PATCH 03/42] feat: switch from data-theme to .theme- for dark mode selection --- .../ui/core-components/.storybook/preview.js | 9 +++-- .../layout/EvidenceDefaultLayout.svelte | 4 +-- .../lib/storybook-helpers/WithEvidence.svelte | 4 +-- .../core-components/src/lib/themes/themes.js | 32 ++++++++++++----- packages/ui/tailwind/src/config/config.js | 36 +++++++++++++++++-- .../createVarsForColors.js | 12 +++---- .../createVarsForColors.spec.js | 8 +++-- sites/example-project/src/app.css | 2 +- sites/example-project/src/app.html | 6 ++-- sites/example-project/tailwind.config.cjs | 13 ++++--- 10 files changed, 85 insertions(+), 41 deletions(-) diff --git a/packages/ui/core-components/.storybook/preview.js b/packages/ui/core-components/.storybook/preview.js index 50c32f27a7..a55d022cd3 100644 --- a/packages/ui/core-components/.storybook/preview.js +++ b/packages/ui/core-components/.storybook/preview.js @@ -1,4 +1,4 @@ -import { withThemeByDataAttribute } from '@storybook/addon-themes'; +import { withThemeByClassName } from '@storybook/addon-themes'; import '../src/app.postcss'; import WithEvidence from '../src/lib/storybook-helpers/WithEvidence.svelte'; @@ -23,12 +23,11 @@ const preview = { series: { table: { disable: true } } }, decorators: [ - withThemeByDataAttribute({ + withThemeByClassName({ themes: { - light: 'light', - dark: 'dark' + light: 'theme-light', + dark: 'theme-dark' }, - attributeName: 'data-theme', defaultTheme: 'light' }), () => WithEvidence diff --git a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte index ea4e3052b5..e34be012c4 100644 --- a/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte +++ b/packages/ui/core-components/src/lib/organisms/layout/EvidenceDefaultLayout.svelte @@ -136,7 +136,7 @@ }); const { - syncDataThemeAttribute, + syncThemeAttribute, cycleAppearance, selectedAppearance, setAppearance, @@ -154,7 +154,7 @@ return () => window.removeEventListener('keydown', onKeydown); }); - onMount(() => syncDataThemeAttribute(document.querySelector('html'))); + onMount(() => syncThemeAttribute(document.querySelector('html'))); //handles printing in dark mode onMount(() => { 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..ec03237809 100644 --- a/packages/ui/core-components/src/lib/storybook-helpers/WithEvidence.svelte +++ b/packages/ui/core-components/src/lib/storybook-helpers/WithEvidence.svelte @@ -23,8 +23,8 @@ import { onMount } from 'svelte'; import { getThemeStores } from '../themes/themes.js'; - const { syncDataThemeAttribute } = getThemeStores(); - onMount(() => syncDataThemeAttribute(document.querySelector('html'))); + const { syncThemeAttribute } = getThemeStores(); + onMount(() => syncThemeAttribute(document.querySelector('html'))); diff --git a/packages/ui/core-components/src/lib/themes/themes.js b/packages/ui/core-components/src/lib/themes/themes.js index 86c8156d88..7a08d2826f 100644 --- a/packages/ui/core-components/src/lib/themes/themes.js +++ b/packages/ui/core-components/src/lib/themes/themes.js @@ -105,26 +105,40 @@ export class ThemeStores { } /** @param {HTMLElement} element */ - syncDataThemeAttribute = (element) => { - // Sync activeAppearance -> html[data-theme] + syncThemeAttribute = (element) => { + // Sync activeAppearance -> .theme- + const removeAllThemes = () => { + element.classList.values().forEach((className) => { + if (className.startsWith('theme-')) { + element.classList.remove(className); + } + }); + }; + const unsubscribe = this.#activeAppearance.subscribe(($activeAppearance) => { - const current = element.getAttribute('data-theme'); - if (current !== $activeAppearance) { - element.setAttribute('data-theme', $activeAppearance); - } + requestAnimationFrame(() => { + // try to do this all in one frame to prevent jitter + removeAllThemes(); + element.classList.add(`theme-${$activeAppearance}`); + }); }); - // Sync html[data-theme] -> activeAppearance + // Sync .theme- -> activeAppearance const observer = new MutationObserver((mutations) => { 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/tailwind/src/config/config.js b/packages/ui/tailwind/src/config/config.js index 6eb85c94e2..11872d6a0c 100644 --- a/packages/ui/tailwind/src/config/config.js +++ b/packages/ui/tailwind/src/config/config.js @@ -4,6 +4,7 @@ import { createThemes as createTwcThemes } from 'tw-colors'; import { loadThemesConfig } from './loadThemesConfig.js'; import { buildThemes } from '../themes/buildThemes.js'; import { createVarsForColors } from './createVarsForColors/index.js'; +import plugin from 'tailwindcss/plugin.js'; const themesConfig = loadThemesConfig(); const themes = buildThemes(themesConfig); @@ -15,6 +16,32 @@ const twcConfig = Object.fromEntries( ]) ); +const inner = createTwcThemes(twcConfig, { + produceThemeClass: (name) => `theme-${name}` +}); +const wrappedTwcThemes = plugin((creator) => { + const pre = creator.addUtilities; + const dataThemeRegex = /,?\[data-theme="([^"]+)"\]/g; + creator.addUtilities = function (utilities, options) { + utilities = Object.fromEntries( + Object.entries(utilities).map(([k, v]) => { + console.log('pre', k); + k = k.replaceAll(dataThemeRegex, ''); + console.log('post', k); + return [k, v]; + }) + ); + console.log({ + utilities, + options + }); + return pre(utilities, options); + }.bind(creator); + + const res = inner.handler(creator); + return res; +}, inner.config); + /** @type {Partial} */ export const config = { theme: { @@ -49,8 +76,13 @@ export const config = { } } }, - plugins: [createTwcThemes(twcConfig), createVarsForColors(themes)], - darkMode: ['selector', '[data-theme="dark"]'] + plugins: [ + wrappedTwcThemes, + // createTwcThemes(twcConfig, { produceThemeClass: (name) => `theme-${name}` }), + createVarsForColors(themes) + ], + darkMode: ['class', 'theme-dark'], + safelist: ['theme-light', 'theme-dark'] }; export default config; diff --git a/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.js b/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.js index 11ff5952fb..e8cc7b9e8c 100644 --- a/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.js +++ b/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.js @@ -5,14 +5,12 @@ export const createVarsForColors = (themes) => plugin((creator) => { const { addUtilities } = creator; const utilities = Object.entries(themes).reduce((acc, [themeName, theme]) => { - acc[`html[data-theme="${themeName}"]`] = Object.entries(theme.colors).reduce( - (acc, [name, value]) => { - if (value) acc[`--${name}`] = value; - return acc; - }, - /** @type {Record} */ ({}) - ); + acc[`html.theme-${themeName}`] = Object.entries(theme.colors).reduce((acc, [name, value]) => { + if (value) acc[`--${name}`] = value; + return acc; + }, /** @type {Record} */ ({})); return acc; }, /** @type {Record>} */ ({})); + console.log(utilities); addUtilities(utilities); }); diff --git a/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.spec.js b/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.spec.js index 5546320fcc..aab99cc389 100644 --- a/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.spec.js +++ b/packages/ui/tailwind/src/config/createVarsForColors/createVarsForColors.spec.js @@ -8,11 +8,13 @@ const runPlugin = async (theme) => { const result = await postcss( tailwindcss({ content: [{ raw: '' }], - plugins: [createVarsForColors(theme)] + plugins: [createVarsForColors(theme)], + safelist: ['theme-dark', 'theme-light'] }) ) .process('@tailwind utilities') .async(); + console.log({ result }); return result.css; }; @@ -26,10 +28,10 @@ describe('createVarsForColors', () => { // prettier-ignore const expected = ` -html[data-theme="light"] { +html.theme-light { --someColorToken: someColorValue-light } -html[data-theme="dark"] { +html.theme-dark { --someColorToken: someColorValue-dark } `.trim() diff --git a/sites/example-project/src/app.css b/sites/example-project/src/app.css index 306a0131f0..8c34f6f0fc 100644 --- a/sites/example-project/src/app.css +++ b/sites/example-project/src/app.css @@ -303,7 +303,7 @@ --yellow-999: #422006; } -[data-theme='dark'] .__evidence-leaflet-tile-layer__ { +.theme-dark .__evidence-leaflet-tile-layer__ { filter: invert(100%) hue-rotate(180deg) brightness(95%) contrast(90%); } diff --git a/sites/example-project/src/app.html b/sites/example-project/src/app.html index 84f842172d..d4fc6cd515 100644 --- a/sites/example-project/src/app.html +++ b/sites/example-project/src/app.html @@ -13,7 +13,7 @@ const savedTheme = localStorage.getItem('evidence-theme') ?? 'system'; const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches; const theme = savedTheme === 'system' ? (prefersDark ? 'dark' : 'light') : savedTheme; - document.documentElement.setAttribute('data-theme', theme); + document.documentElement.classList.add(`theme-${theme}`); } catch (e) {} %sveltekit.head% @@ -66,7 +66,7 @@ z-index: 9999; } - [data-theme='dark'] #__evidence_project_splash { + .theme-dark #__evidence_project_splash { background-color: #000000; } @@ -78,7 +78,7 @@ animation-timing-function: ease-in-out; } - [data-theme='dark'] .draw-path { + .theme-dark .draw-path { fill: #ffffff; } diff --git a/sites/example-project/tailwind.config.cjs b/sites/example-project/tailwind.config.cjs index e279795ce4..eca5710ba2 100644 --- a/sites/example-project/tailwind.config.cjs +++ b/sites/example-project/tailwind.config.cjs @@ -23,13 +23,12 @@ const config = { get files() { const pluginConfig = evidenceConfig.plugins; const components = pluginConfig.components; - // const componentPaths = Object.keys(components) - // .map((pluginName) => [ - // `./node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}`, - // `../../node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}` - // ]) - // .flat(); - const componentPaths = []; + const componentPaths = Object.keys(components) + .map((pluginName) => [ + `./node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}`, + `../../node_modules/${pluginName}/dist/**/*.{html,js,svelte,ts,md}` + ]) + .flat(); return [ './src/**/*.{html,js,svelte,ts,md}', // This is used for everything in base evidence template From 4efd427a7db3230f061e405932833d5bfe51371f Mon Sep 17 00:00:00 2001 From: brian Date: Thu, 23 Jan 2025 16:21:30 -0600 Subject: [PATCH 04/42] chore: changeset --- .changeset/kind-fishes-mate.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/kind-fishes-mate.md 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- From 035387ef3725dbc87e765ceb1e9847d524fd9b07 Mon Sep 17 00:00:00 2001 From: brian Date: Fri, 24 Jan 2025 14:25:31 -0600 Subject: [PATCH 05/42] chore: remove @apply and lang="postcss" from components This commit only has a cursory validation that the styles are equivilant, and that will need to be checked again before this is put into main --- .../src/lib/atoms/alert/Alert.svelte | 44 ++++---- .../src/lib/atoms/button/Button.svelte | 103 +++++++++--------- .../lib/atoms/fullscreen/Fullscreen.svelte | 8 +- .../molecules/sql-console/SqlConsole.svelte | 10 +- .../src/lib/molecules/toast/Toast.svelte | 29 ++--- .../layout/EvidenceDefaultLayout.svelte | 6 +- .../layout/header/AlgoliaDocSearch.svelte | 37 ++++++- .../organisms/layout/header/SearchButton.css | 16 --- .../tableofcontents/ContentsList.svelte | 35 ++---- .../source-config/SourceConfig.svelte | 2 +- .../SourceConfigFormField.svelte | 28 +++-- .../lib/storybook-helpers/WithEvidence.svelte | 15 ++- .../ui/Deployment/DeploySettingsPanel.svelte | 33 ++---- .../ui/Deployment/EvidenceDeploy.svelte | 14 +-- .../ui/Deployment/NetlifyDeploy.svelte | 31 +++--- .../unsorted/ui/Deployment/OtherDeploy.svelte | 11 +- .../ui/Deployment/VariableCopy.svelte | 9 +- .../ui/Deployment/VercelDeploy.svelte | 29 ++--- .../ui/Formatting/CurrencyFormatGrid.svelte | 5 +- .../ui/Formatting/CustomFormatsSection.svelte | 3 +- .../Formatting/FormattingSettingsPanel.svelte | 30 ++--- .../src/lib/unsorted/ui/Modal.svelte | 6 +- .../src/lib/unsorted/ui/QueryViewer.svelte | 3 +- .../QueryViewerSupport/CompilerToggle.svelte | 10 +- .../QueryViewerSupport/QueryDataTable.svelte | 55 +++++----- .../ui/QueryViewerSupport/prismtheme.css | 4 +- .../TelemetrySettingsPanel.svelte | 25 ++--- .../VersionControl/VersionControlPanel.svelte | 23 ++-- .../lib/unsorted/viz/core/SearchBar.svelte | 15 +-- .../unsorted/viz/table/EnterFullScreen.svelte | 2 +- .../lib/unsorted/viz/table/TableCell.svelte | 2 +- .../lib/unsorted/viz/table/TableHeader.svelte | 2 +- .../lib/unsorted/viz/table/TableRow.svelte | 19 +--- .../lib/unsorted/viz/table/_DataTable.svelte | 33 +++--- sites/docs/components/PropListing.svelte | 4 +- 35 files changed, 298 insertions(+), 403 deletions(-) delete mode 100644 packages/ui/core-components/src/lib/organisms/layout/header/SearchButton.css diff --git a/packages/ui/core-components/src/lib/atoms/alert/Alert.svelte b/packages/ui/core-components/src/lib/atoms/alert/Alert.svelte index 17cffdb795..d8243574e5 100644 --- a/packages/ui/core-components/src/lib/atoms/alert/Alert.svelte +++ b/packages/ui/core-components/src/lib/atoms/alert/Alert.svelte @@ -18,6 +18,13 @@ } return input; }; + + const classMap = { + info: 'border-info/50 bg-info/10', + negative: 'border-negative/50 bg-negative/10', + positive: 'border-positive/50 bg-positive/10', + warning: 'border-warning/50 bg-warning/10' + }; - - 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..f6a6c6357e 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 = { + error: 'border-negative/50 bg-negative/10', + success: 'border-positive/50 bg-positive/10', + info: 'border-info/50 bg-info/10', + warning: 'border-warning/50 bg-warning/10' + }; -
+
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/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/SourceConfig.svelte b/packages/ui/core-components/src/lib/organisms/source-config/SourceConfig.svelte index fe41bbda3e..16ac1c436b 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 @@ -137,7 +137,7 @@
- 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 ec03237809..f706740051 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/unsorted/ui/Deployment/DeploySettingsPanel.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/DeploySettingsPanel.svelte index e5042bf32f..3167c36855 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Deployment/DeploySettingsPanel.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Deployment/DeploySettingsPanel.svelte @@ -35,18 +35,21 @@
-

Deployment

-

+

Deployment

+

Evidence projects can be deployed to a variety of cloud environments. The easiest way to deploy your project is with Evidence Cloud.

-

Environment Variables

+

Environment Variables

-

Deployment Environment

- {#each deploymentOptions as option}
- 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 ebb2cec439..abc676f37f 100644 --- a/packages/ui/core-components/src/lib/unsorted/ui/Modal.svelte +++ b/packages/ui/core-components/src/lib/unsorted/ui/Modal.svelte @@ -85,11 +85,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/viz/table/_DataTable.svelte b/packages/ui/core-components/src/lib/unsorted/viz/table/_DataTable.svelte index dbda421324..fcdec18007 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 @@ -690,11 +690,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 @@ + {'Ø'}