[ZEPPELIN-6740] Add local Storybook foundation for AI Assistant UI

LICENSE

@@ -205,6 +205,10 @@ MIT licenses
 
 The following components are provided under the MIT License. See project link for details.
 The text of each license is also included at licenses/LICENSE-[project]-[version].txt.
+    (The MIT License) vanilla-extract
+      (@vanilla-extract/css 1.21.3, @vanilla-extract/dynamic 2.1.5)
+      https://github.com/vanilla-extract-css/vanilla-extract/blob/master/LICENSE
+      (see licenses/LICENSE-vanilla-extract-1.21.3)
 
     (The MIT License) Font Awesome (stylesheet) 4.2.0 (http://fortawesome.github.io/Font-Awesome/) - https://fortawesome.github.io/Font-Awesome/license/
     (The MIT License) Simple line icons v1.0.0 (http://thesabbir.github.io/simple-line-icons/) - https://github.com/thesabbir/simple-line-icons/tree/1.0.0

licenses/LICENSE-vanilla-extract-1.21.3

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 SEEK
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

zeppelin-distribution/src/bin_license/LICENSE

@@ -252,6 +252,10 @@ MIT licenses
 
 The following components are provided under the MIT License. See project link for details.
 The text of each license is also included at licenses/LICENSE-[project]-[version].txt.
+    (The MIT License) vanilla-extract
+      (@vanilla-extract/css 1.21.3, @vanilla-extract/dynamic 2.1.5)
+      https://github.com/vanilla-extract-css/vanilla-extract/blob/master/LICENSE
+      (see licenses/LICENSE-vanilla-extract-1.21.3)
 
     (The MIT License) AngularJS v1.5.0 (https://angularjs.org/) - https://github.com/angular/angular.js/blob/v1.5.0/LICENSE
     (The MIT License) Json3 v3.3.1 (http://bestiejs.github.io/json3) - https://github.com/bestiejs/json3/blob/v3.3.1/LICENSE

zeppelin-web-angular/.prettierignore

@@ -18,3 +18,7 @@ test-results/*
 e2e/fixtures/performance/*.json
 
 .angular/*
+
+projects/zeppelin-react/storybook-static/
+projects/zeppelin-react/storybook-report/
+projects/zeppelin-react/storybook-test-results/

zeppelin-web-angular/README.md

@@ -137,6 +137,8 @@ In addition:
 - We use [G2](https://github.com/antvis/g2) [(MIT)](https://github.com/antvis/g2/blob/master/LICENSE) visualization
 - We use [Lodash](https://lodash.com/) [(MIT)](https://github.com/lodash/lodash/blob/master/LICENSE) to process complex data
 - We use [Monaco Editor](https://github.com/microsoft/monaco-editor) [(MIT)](https://github.com/microsoft/monaco-editor/blob/master/LICENSE.md) to make code editor
+- We use [vanilla-extract](https://vanilla-extract.style/) [(MIT)](https://github.com/vanilla-extract-css/vanilla-extract/blob/master/LICENSE) for typed styles in the React Assistant
+- We use [Storybook](https://storybook.js.org/) [(MIT)](https://github.com/storybookjs/storybook/blob/v10.6.1/LICENSE) to review Assistant components without a server
 
 ### Coding Style
 

zeppelin-web-angular/projects/zeppelin-react/.gitignore

@@ -1,3 +1,8 @@
 dist
 node_modules
 coverage
+
+# Storybook build output
+storybook-static/
+storybook-report/
+storybook-test-results/

zeppelin-web-angular/projects/zeppelin-react/.storybook/main.ts

@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { fileURLToPath } from 'node:url';
+import type { StorybookConfig } from '@storybook/react-vite';
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.stories.tsx'],
+  framework: '@storybook/react-vite',
+  core: { disableTelemetry: true },
+  viteFinal: config =>
+    mergeConfig(config, {
+      plugins: [vanillaExtractPlugin()],
+      resolve: {
+        alias: {
+          '@': fileURLToPath(new URL('../src', import.meta.url)),
+          '@zeppelin/sdk': fileURLToPath(new URL('../../zeppelin-sdk/src', import.meta.url)),
+          '@zeppelin/notebook-core': fileURLToPath(
+            new URL('../../zeppelin-notebook-core/src/public-api.ts', import.meta.url)
+          )
+        }
+      }
+    })
+};
+export default config;

zeppelin-web-angular/projects/zeppelin-react/.storybook/preview.tsx

@@ -0,0 +1,51 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { useLayoutEffect, type ReactNode } from 'react';
+import type { Preview } from '@storybook/react-vite';
+import { ZeppelinThemeProvider } from '../src/theme/ZeppelinThemeProvider';
+import { AssistantScope, ASSISTANT_PREFIX_CLS, ASSISTANT_SEED_TOKENS } from '../src/shared/ui/assistant-theme';
+
+const StorySurface = ({ mode, children }: { mode: string; children: ReactNode }) => {
+  useLayoutEffect(() => {
+    document.documentElement.setAttribute('data-theme', mode);
+    document.body.style.backgroundColor = mode === 'dark' ? '#141414' : '#fff';
+  }, [mode]);
+  return (
+    <ZeppelinThemeProvider prefixCls={ASSISTANT_PREFIX_CLS} token={ASSISTANT_SEED_TOKENS}>
+      <AssistantScope style={{ width: 370 }}>{children}</AssistantScope>
+    </ZeppelinThemeProvider>
+  );
+};
+const preview: Preview = {
+  initialGlobals: { theme: 'light' },
+  globalTypes: {
+    theme: {
+      description: 'Assistant theme',
+      toolbar: { icon: 'circlehollow', items: ['light', 'dark'], dynamicTitle: true }
+    }
+  },
+  decorators: [
+    (Story, context) => (
+      <StorySurface mode={context.globals['theme'] === 'dark' ? 'dark' : 'light'}>
+        <Story />
+      </StorySurface>
+    )
+  ],
+  parameters: { layout: 'padded' }
+};
+export default preview;

zeppelin-web-angular/projects/zeppelin-react/README.md

@@ -175,3 +175,20 @@ export function mount(element: HTMLElement, props: Props): ReactMountHandle;
    an inline object literal) so identity is stable when nothing changed.
 
 Every exposed module must return the handle contract from `mount`. The directive assigns the return value straight to its handle, so returning a bare unmount function makes the next prop change throw.
+
+## Assistant Storybook
+
+Assistant stories run without the Zeppelin server. From this directory:
+
+```bash
+npm ci
+npm run storybook
+```
+
+To check the static build in a browser:
+
+```bash
+npm run build:storybook
+npx playwright install chromium
+npm run test:storybook
+```

zeppelin-web-angular/projects/zeppelin-react/eslint.config.js

@@ -41,7 +41,7 @@ module.exports = tseslint.config(
     linterOptions: { reportUnusedDisableDirectives: 'error' }
   },
   {
-    files: ['src/**/*.{ts,tsx}'],
+    files: ['src/**/*.{ts,tsx}', '.storybook/**/*.{ts,tsx}'],
     // == legacy `extends`: eslint:recommended + @typescript-eslint/recommended
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
     languageOptions: {