Merge pull request #1418 from evidence-dev/feat/next/storybook-usql

[No Merge] Add USQL to storybook

.changeset/violet-suns-rush.md

@@ -0,0 +1,6 @@
+---
+'@evidence-dev/core-components': patch
+'@evidence-dev/faker-datasource': patch
+---
+
+Add USQL to core components; augment faker datasource to generate better and consistent data

packages/core-components/.storybook/main.js

@@ -13,6 +13,7 @@ const config = {
 	},
 	docs: {
 		autodocs: 'tag'
-	}
+	},
+	staticDirs: ['../static']
 };
 export default config;

packages/core-components/.storybook/preview.js

@@ -1,5 +1,5 @@
 import '../src/app.postcss';
-
+import WithUSQL from '../src/lib/storybook-helpers/WithUSQL.svelte';
 /** @type { import('@storybook/svelte').Preview } */
 const preview = {
 	parameters: {
@@ -15,7 +15,8 @@ const preview = {
 		data: { table: { disable: true } },
 		evidenceInclude: { table: { disable: true } },
 		series: { table: { disable: true } }
-	}
+	},
+	decorators: [() => WithUSQL]
 };
 
 export default preview;

packages/core-components/evidence.plugins.yaml

@@ -0,0 +1,4 @@
+datasources:
+  @evidence-dev/faker-datasource: {}
+
+components: {}

packages/core-components/package.json

@@ -14,6 +14,8 @@
 		"prepare": "svelte-kit sync",
 		"prepublishOnly": "npm run package",
 		"preview": "vite preview",
+		"build-demo-source": "evidence-faker build-series-source && npm run sources",
+		"sources": "__EXAMPLE_PROJECT=true evidence sources",
 		"storybook": "storybook dev -p 6006",
 		"test:unit": "vitest",
 		"chromatic": "npx chromatic --project-token=chpt_c7afdf83f264eaf"
@@ -46,24 +48,26 @@
 		"yaml": "^2.3.4"
 	},
 	"devDependencies": {
+		"@evidence-dev/faker-datasource": "workspace:*",
 		"@evidence-dev/plugin-connector": "workspace:*",
-		"@storybook/addon-essentials": "^7.4.0",
-		"@storybook/addon-interactions": "^7.4.0",
-		"@storybook/addon-links": "^7.4.0",
-		"@storybook/addon-svelte-csf": "^4.0.3",
-		"@storybook/blocks": "^7.4.0",
-		"@storybook/svelte": "^7.4.0",
-		"@storybook/sveltekit": "^7.4.0",
-		"@storybook/testing-library": "^0.2.0",
-		"@storybook/theming": "^7.4.0",
+		"@evidence-dev/universal-sql": "workspace:*",
+		"@storybook/addon-essentials": "^7.6.6",
+		"@storybook/addon-interactions": "^7.6.6",
+		"@storybook/addon-links": "^7.6.6",
+		"@storybook/addon-svelte-csf": "^4.0.13",
+		"@storybook/blocks": "^7.6.6",
+		"@storybook/svelte": "^7.6.6",
+		"@storybook/sveltekit": "^7.6.6",
+		"@storybook/testing-library": "^0.2.2",
+		"@storybook/theming": "^7.6.6",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "1.22.3",
 		"@sveltejs/package": "^2.0.0",
 		"autoprefixer": "^10.4.14",
 		"chromatic": "^6.17.4",
 		"eslint": "8.45.0",
 		"eslint-config-prettier": "^8.5.0",
-		"eslint-plugin-storybook": "^0.6.13",
+		"eslint-plugin-storybook": "^0.6.15",
 		"eslint-plugin-svelte": "^2.26.0",
 		"postcss": "^8.4.23",
 		"postcss-load-config": "^4.0.1",
@@ -72,7 +76,7 @@
 		"publint": "^0.1.9",
 		"react": "^17.0.1",
 		"react-dom": "^17.0.1",
-		"storybook": "^7.4.0",
+		"storybook": "^7.6.6",
 		"svelte": "^3.54.0",
 		"svelte-check": "^3.0.1",
 		"svelte-preprocess": "^5.0.3",

packages/core-components/sources/faker-demo-source/connection.yaml

@@ -0,0 +1,6 @@
+# This file was automatically generated by @evidence-dev/faker-datasource
+# This source is designed to contain examples for many series perumtations
+name: series_demo_source
+type: faker
+options:
+  seed: evidence-series-demo

packages/core-components/sources/faker-demo-source/numeric_series.yaml

@@ -0,0 +1,15 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+    series:
+      count: 4

packages/core-components/sources/faker-demo-source/numeric_series_seriesgaps.yaml

@@ -0,0 +1,16 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+    series:
+      count: 4
+      alwaysExists: false

packages/core-components/sources/faker-demo-source/numeric_series_xgaps.yaml

@@ -0,0 +1,16 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+      gaps: true
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+    series:
+      count: 4

packages/core-components/sources/faker-demo-source/numeric_series_xgaps_seriesgaps.yaml

@@ -0,0 +1,17 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+      gaps: true
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+    series:
+      count: 4
+      alwaysExists: false

packages/core-components/sources/faker-demo-source/numeric_series_xgaps_ynulls.yaml

@@ -0,0 +1,17 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+      gaps: true
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+      nulls: true
+    series:
+      count: 4

packages/core-components/sources/faker-demo-source/numeric_series_xgaps_ynulls_seriesgaps.yaml

@@ -0,0 +1,18 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+      gaps: true
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+      nulls: true
+    series:
+      count: 4
+      alwaysExists: false

packages/core-components/sources/faker-demo-source/numeric_series_ynulls.yaml

@@ -0,0 +1,16 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+      nulls: true
+    series:
+      count: 4

packages/core-components/sources/faker-demo-source/numeric_series_ynulls_seriesgaps.yaml

@@ -0,0 +1,17 @@
+rows: 100
+fuzz: 0
+series:
+  type: numeric
+  columns:
+    x:
+      type: number
+    y:
+      category: number
+      item: int
+      options:
+        - min: 0
+          max: 1000
+      nulls: true
+    series:
+      count: 4
+      alwaysExists: false

packages/core-components/src/lib/faker-data-queries.js

@@ -0,0 +1,62 @@
+import { QueryStore } from '@evidence-dev/query-store';
+import { query } from '@evidence-dev/universal-sql/client-duckdb';
+export const fakerSeries = {
+	numeric_series: {
+		false: {
+			false: {
+				false: {
+					text: 'SELECT * FROM series_demo_source.numeric_series_seriesgaps',
+					store: new QueryStore('SELECT * FROM series_demo_source.numeric_series_seriesgaps', query)
+				},
+				true: {
+					text: 'SELECT * FROM series_demo_source.numeric_series',
+					store: new QueryStore('SELECT * FROM series_demo_source.numeric_series', query)
+				}
+			},
+			true: {
+				false: {
+					text: 'SELECT * FROM series_demo_source.numeric_series_ynulls_seriesgaps',
+					store: new QueryStore(
+						'SELECT * FROM series_demo_source.numeric_series_ynulls_seriesgaps',
+						query
+					)
+				},
+				true: {
+					text: 'SELECT * FROM series_demo_source.numeric_series_ynulls',
+					store: new QueryStore('SELECT * FROM series_demo_source.numeric_series_ynulls', query)
+				}
+			}
+		},
+		true: {
+			false: {
+				false: {
+					text: 'SELECT * FROM series_demo_source.numeric_series_xgaps_seriesgaps',
+					store: new QueryStore(
+						'SELECT * FROM series_demo_source.numeric_series_xgaps_seriesgaps',
+						query
+					)
+				},
+				true: {
+					text: 'SELECT * FROM series_demo_source.numeric_series_xgaps',
+					store: new QueryStore('SELECT * FROM series_demo_source.numeric_series_xgaps', query)
+				}
+			},
+			true: {
+				false: {
+					text: 'SELECT * FROM series_demo_source.numeric_series_xgaps_ynulls_seriesgaps',
+					store: new QueryStore(
+						'SELECT * FROM series_demo_source.numeric_series_xgaps_ynulls_seriesgaps',
+						query
+					)
+				},
+				true: {
+					text: 'SELECT * FROM series_demo_source.numeric_series_xgaps_ynulls',
+					store: new QueryStore(
+						'SELECT * FROM series_demo_source.numeric_series_xgaps_ynulls',
+						query
+					)
+				}
+			}
+		}
+	}
+};

packages/core-components/src/lib/storybook-helpers/WithUSQL.svelte

@@ -0,0 +1,29 @@
+<script>
+	import {
+		initDB,
+		setParquetURLs,
+		updateSearchPath,
+		query
+	} from '@evidence-dev/universal-sql/client-duckdb';
+
+	const initializing = (async () => {
+		await initDB();
+		const res = await fetch('/data/manifest.json').then((r) => r.json());
+		await setParquetURLs(res.renderedFiles ?? {});
+		await updateSearchPath(Object.keys(res.renderedFiles ?? {}));
+		if (!res.renderedFiles) console.error('No fixture data available!');
+		// Test Query
+		const r = await query('SELECT * FROM information_schema.tables');
+		if (r.length === 0) throw new Error('Failed to run test query');
+	})();
+</script>
+
+{#await initializing}
+	Universal SQL is loading...
+{:then}
+	<slot />
+{:catch e}
+	Universal SQL failed to initialize.
+
+	{e}
+{/await}