feat(ui) Add alchemy component library to FE (#12054)

datahub-web-react/.storybook/DocTemplate.mdx

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { ThemeProvider } from 'styled-components';
+import { GlobalStyle } from './styledComponents';
+
+import { Meta, Title, Subtitle, Description, Primary, Controls, Stories } from '@storybook/blocks';
+import { CodeBlock } from '../src/alchemy-components/.docs/mdx-components';
+
+{/* 
+  * 👇 The isTemplate property is required to tell Storybook that this is a template
+  * See https://storybook.js.org/docs/api/doc-block-meta
+  * to learn how to use
+*/}
+
+<Meta isTemplate />
+
+<ThemeProvider theme={{}}>
+	<GlobalStyle />
+
+	<Title />
+
+	<Subtitle />
+
+	<div className="docsDescription">
+		<Description />
+	</div>
+
+	<br />
+
+	### Import
+
+	<CodeBlock />
+
+	<br/>
+
+	### Customize
+
+	<Primary />
+	<Controls />
+
+	<Stories />
+</ThemeProvider>

datahub-web-react/.storybook/main.js

@@ -0,0 +1,25 @@
+// Docs for badges: https://storybook.js.org/addons/@geometricpanda/storybook-addon-badges
+
+export default {
+	framework: '@storybook/react-vite',
+	features: {
+		buildStoriesJson: true,
+	},
+	core: {
+		disableTelemetry: true,
+	},
+	stories: [
+		'../src/alchemy-components/.docs/*.mdx',
+		'../src/alchemy-components/components/**/*.stories.@(js|jsx|mjs|ts|tsx)'
+	],
+	addons: [
+		'@storybook/addon-onboarding',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'@storybook/addon-links',
+		'@geometricpanda/storybook-addon-badges',
+	],
+	typescript: {
+		reactDocgen: 'react-docgen-typescript',
+	},
+}

datahub-web-react/.storybook/manager-head.html

@@ -0,0 +1,33 @@
+<style type="text/css">
+	/* Regular */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 400;
+		src: url('../src/fonts/Mulish-Regular.ttf') format('truetype');
+	}
+
+	/* Medium */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 500;
+		src: url('../src/fonts/Mulish-Medium.ttf') format('truetype');
+	}
+
+	/* SemiBold */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 600;
+		src: url('../src/fonts/Mulish-SemiBold.ttf') format('truetype');
+	}
+
+	/* Bold */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 700;
+		src: url('../src/fonts/Mulish-Bold.ttf') format('truetype');
+	}
+</style>

datahub-web-react/.storybook/manager.js

@@ -0,0 +1,15 @@
+import './storybook-theme.css';
+
+import { addons } from '@storybook/manager-api';
+import acrylTheme from './storybook-theme.js';
+
+// Theme setup
+addons.setConfig({
+	theme: acrylTheme,
+});
+
+// Favicon
+const link = document.createElement('link');
+link.setAttribute('rel', 'shortcut icon');
+link.setAttribute('href', 'https://www.acryldata.io/icons/favicon.ico');
+document.head.appendChild(link);

datahub-web-react/.storybook/preview-head.html

@@ -0,0 +1,33 @@
+<style type="text/css">
+	/* Regular */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 400;
+		src: url('../src/fonts/Mulish-Regular.ttf') format('truetype');
+	}
+
+	/* Medium */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 500;
+		src: url('../src/fonts/Mulish-Medium.ttf') format('truetype');
+	}
+
+	/* SemiBold */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 600;
+		src: url('../src/fonts/Mulish-SemiBold.ttf') format('truetype');
+	}
+
+	/* Bold */
+	@font-face {
+		font-family: 'Mulish';
+		font-style: normal;
+		font-weight: 700;
+		src: url('../src/fonts/Mulish-Bold.ttf') format('truetype');
+	}
+</style>

datahub-web-react/.storybook/preview.js

@@ -0,0 +1,84 @@
+import './storybook-theme.css';
+// FYI: import of antd styles required to show components based on it correctly
+import 'antd/dist/antd.css';
+
+import { BADGE, defaultBadgesConfig } from '@geometricpanda/storybook-addon-badges';
+import DocTemplate from './DocTemplate.mdx';
+
+const preview = {
+    tags: ['!dev', 'autodocs'],
+    parameters: {
+        previewTabs: {
+            'storybook/docs/panel': { index: -1 },
+        },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+        options: {
+            storySort: {
+                method: 'alphabetical',
+                order: [
+                    // Order of Docs Pages
+                    'Introduction',
+                    'Style Guide',
+                    'Design Tokens',
+                    'Style Utilities',
+                    'Icons',
+
+                    // Order of Components
+                    'Layout',
+                    'Forms',
+                    'Data Display',
+                    'Feedback',
+                    'Typography',
+                    'Overlay',
+                    'Disclosure',
+                    'Navigation',
+                    'Media',
+                    'Other',
+                ],
+                locales: '',
+            },
+        },
+        docs: {
+            page: DocTemplate,
+            toc: {
+                disable: false,
+            },
+            docs: {
+                source: {
+                    format: true,
+                },
+            },
+        },
+
+        // Reconfig the premade badges with better titles
+        badgesConfig: {
+            stable: {
+                ...defaultBadgesConfig[BADGE.STABLE],
+                title: 'Stable',
+                tooltip: 'This component is stable but may have frequent changes. Use at own discretion.',
+            },
+            productionReady: {
+                ...defaultBadgesConfig[BADGE.STABLE],
+                title: 'Production Ready',
+                tooltip: 'This component is production ready and has been tested in a production environment.',
+            },
+            WIP: {
+                ...defaultBadgesConfig[BADGE.BETA],
+                title: 'WIP',
+                tooltip: 'This component is a work in progress and may not be fully functional or tested.',
+            },
+            readyForDesignReview: {
+                ...defaultBadgesConfig[BADGE.NEEDS_REVISION],
+                title: 'Ready for Design Review',
+                tooltip: 'This component is ready for design review and feedback.',
+            },
+        },
+    },
+};
+
+export default preview;