Merge pull request #145 from eviltester/storybook-investigation

Storybook investigation

Author: eviltester

.github/workflows/publish-testenv.yml

@@ -0,0 +1,69 @@
+name: Publish Test Environment
+
+on:
+  push:
+    branches: ['master']
+  workflow_dispatch:
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    name: Build testenv
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    env:
+      NODE_ENV: development
+      TESTENV_BRANCH_NAME: ${{ github.ref_name }}
+      TESTENV_COMMIT_SHA: ${{ github.sha }}
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+        with:
+          persist-credentials: false
+
+      - name: Set up Pages
+        uses: actions/configure-pages@v5
+
+      - name: Use Node.js 22.21.1
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.21.1
+
+      - name: Set up pnpm
+        shell: bash
+        run: |
+          corepack enable
+          corepack prepare pnpm@11.1.1 --activate
+          pnpm --version
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build test environment
+        run: pnpm run testenv:create
+
+      - name: Upload Pages artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: testenv
+
+  deploy:
+    name: Deploy to GitHub Pages
+    needs: build
+    runs-on: ubuntu-latest
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    steps:
+      - name: Deploy Pages artifact
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -14,7 +14,11 @@ test-results
 .tmp-pack
 apps/web/dist
 apps/web/dist/
+storybook-static
+storybook-static/
+testenv
+testenv/
 .agentic-qe
 .tmp
 .claude
-.pet-runs
+.pet-runs

.storybook/main.js

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { mergeConfig } from 'vite';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+export default {
+  framework: {
+    name: '@storybook/html-vite',
+    options: {},
+  },
+  stories: ['../apps/web/src/stories/**/*.stories.js'],
+  staticDirs: [{ from: '../apps/web/images', to: '/images' }],
+  addons: ['@storybook/addon-docs', '@storybook/addon-a11y'],
+  docs: {
+    autodocs: true,
+  },
+  async viteFinal(config) {
+    return mergeConfig(config, {
+      resolve: {
+        alias: {
+          'https://cdn.skypack.dev/@faker-js/faker@v9.7.0': '@faker-js/faker',
+          '@storybook-stories': path.resolve(__dirname, '../apps/web/src/stories'),
+          '@anywaydata/core/data_formats': path.resolve(__dirname, '../packages/core/js/data_formats'),
+          '@anywaydata/core/data_generation': path.resolve(__dirname, '../packages/core/js/data_generation'),
+          '@anywaydata/core/grid': path.resolve(__dirname, '../packages/core/js/grid'),
+          '@anywaydata/core/utils': path.resolve(__dirname, '../packages/core/js/utils'),
+          '@anywaydata/core/faker': path.resolve(__dirname, '../packages/core/js/faker'),
+          '@anywaydata/core/domain': path.resolve(__dirname, '../packages/core/js/domain'),
+          '@anywaydata/core/libs': path.resolve(__dirname, '../packages/core/js/libs'),
+          '@anywaydata/core': path.resolve(__dirname, '../packages/core/src/index.js'),
+        },
+      },
+    });
+  },
+};

.storybook/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}

.storybook/preview.js

@@ -0,0 +1,17 @@
+import '../apps/web/styles.css';
+
+const preview = {
+  parameters: {
+    layout: 'fullscreen',
+    controls: {
+      expanded: true,
+    },
+    options: {
+      storySort: {
+        order: ['Test Data', 'Export Formats'],
+      },
+    },
+  },
+};
+
+export default preview;

README.md

@@ -32,6 +32,25 @@ The application is live at [AnyWayData.com](https://anywaydata.com)
 Use `pnpm run build:web` to create a production build and `pnpm run preview:web` to preview the built output.
 The old static-server flow (e.g. `python3 -m http.server`) is no longer the recommended local runtime path.
 
+### Use Storybook
+
+Storybook is available for isolated frontend development and UI review:
+
+- `pnpm run storybook`
+- open `http://127.0.0.1:6006`
+
+Current story groups:
+
+- `Test Data / Embedded Panel` for the in-app schema editor inside the main table editor
+- `Test Data / Generator` for the standalone generator schema editor states
+- `Export Formats / Previews` for export-preview flows such as Markdown, CSV, DSV, JSON, JSONL, XML, SQL, HTML, Gherkin, ASCII table, and code-oriented outputs
+
+Useful workflows:
+
+- use Storybook when iterating on schema-editor rendering, validation states, and text/schema mode transitions
+- use Storybook when adjusting export-preview UI without needing the full app boot flow
+- use `pnpm run build-storybook` to create a static Storybook build in `storybook-static`
+
 ### Select Grid Engine
 
 The editor can run with AG Grid or Tabulator using the same import/export and toolbar processing layer.

apps/web/src/stories/export-format-ascii.stories.js

@@ -0,0 +1,12 @@
+import { createExportPreviewStory, sharedArgTypes } from './export-format-story-factory.js';
+
+const meta = {
+  title: 'Export Formats/Previews/ASCII',
+  tags: ['autodocs'],
+  argTypes: sharedArgTypes,
+};
+
+export default meta;
+
+export const StartBlank = createExportPreviewStory('asciitable', 'start-blank');
+export const Previewed = createExportPreviewStory('asciitable', 'auto-previewed');

apps/web/src/stories/export-format-code-csharp.stories.js

@@ -0,0 +1,12 @@
+import { createExportPreviewStory, sharedArgTypes } from './export-format-story-factory.js';
+
+const meta = {
+  title: 'Export Formats/Previews/Code/C#',
+  tags: ['autodocs'],
+  argTypes: sharedArgTypes,
+};
+
+export default meta;
+
+export const StartBlank = createExportPreviewStory('csharp', 'start-blank');
+export const Previewed = createExportPreviewStory('csharp', 'auto-previewed');

apps/web/src/stories/export-format-code-java.stories.js

@@ -0,0 +1,12 @@
+import { createExportPreviewStory, sharedArgTypes } from './export-format-story-factory.js';
+
+const meta = {
+  title: 'Export Formats/Previews/Code/Java',
+  tags: ['autodocs'],
+  argTypes: sharedArgTypes,
+};
+
+export default meta;
+
+export const StartBlank = createExportPreviewStory('java', 'start-blank');
+export const Previewed = createExportPreviewStory('java', 'auto-previewed');

apps/web/src/stories/export-format-code-javascript.stories.js

@@ -0,0 +1,61 @@
+import { createExportPreviewStory, sharedArgTypes } from './export-format-story-factory.js';
+import { playCodePreview } from './export-format-interactions.js';
+
+const meta = {
+  title: 'Export Formats/Previews/Code/JavaScript',
+  tags: ['autodocs'],
+  argTypes: sharedArgTypes,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+Code preview stories show the grid rendered as JavaScript-oriented output rather than as a plain data interchange format.
+
+## What This Shows
+These stories help you inspect how the current grid rows are represented in generated JavaScript text. The focus is on output shape and readability, not on generating a full runnable project.
+
+## Key Stories
+- \`Start Blank\`: the grid is ready, but JavaScript output has not been rendered yet.
+- \`Previewed\`: JavaScript output is already shown.
+
+## Recommended Workflow
+1. Open \`Start Blank\`.
+2. Adjust any formatting controls if present.
+3. Click \`Set Text From Grid\`.
+4. Review the generated JavaScript in the preview area.
+
+## What To Watch
+The preview text should look like code-oriented output rather than CSV or JSON. The Actions panel is most useful here for confirming preview generation and copy/download requests.
+
+## Interaction Demo
+\`Start Blank\` demonstrates the main workflow for code formats: render the current grid into JavaScript output.
+        `,
+      },
+    },
+  },
+};
+
+export default meta;
+
+export const StartBlank = {
+  ...createExportPreviewStory('javascript', 'start-blank'),
+  play: playCodePreview,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Use this story to render JavaScript output from the current grid and inspect the generated code shape.',
+      },
+    },
+  },
+};
+export const Previewed = {
+  ...createExportPreviewStory('javascript', 'auto-previewed'),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Use this when you want the generated JavaScript already visible without first triggering preview generation.',
+      },
+    },
+  },
+};