Feature: storybook setup

src/.gitignore

@@ -118,4 +118,5 @@ dist
 
 # Output folders
 lib/
-.graphweaver/
+.graphweaver/
+*storybook.log

src/packages/admin-ui-components/.eslintrc.cjs

@@ -1,3 +1,4 @@
 module.exports = {
-	ignorePatterns: ['.deploy/**', '.build/**', 'lib/**'],
+    ignorePatterns: ['.deploy/**', '.build/**', 'lib/**'],
+    extends: ["plugin:storybook/recommended"]
 };

src/packages/admin-ui-components/.storybook/main.css

@@ -0,0 +1,93 @@
+:root {
+	font-family: 'Inter', sans-serif;
+	--body-copy-color: #ede8f2;
+	--body-copy-color-rbg: 237, 232, 242;
+	--body-bg-color: #100a1c;
+	--primary-color: #7038c2;
+	--secondary-color: #853af2;
+	--detail-bg-color: #171221;
+	--detail-border-color: rgba(var(--body-copy-color-rbg), 0.1);
+
+	--color-light-blue: #abbce9;
+	--color-light-green: #abe9b8;
+	--color-light-orange: #e9c8ab;
+	--color-light-red: #ff9999;
+	--color-blue: #0288d1;
+	--color-red: #b70e07;
+	--color-orange: #ed6c02;
+	--color-green: #2e7d32;
+	--color-white: #fff;
+	--color-black: #5b5151;
+}
+@supports (font-variation-settings: normal) {
+	:root {
+		font-family: 'Inter var', sans-serif;
+	}
+}
+
+* {
+	font-family: 'Inter', sans-serif;
+	color: var(--body-copy-color);
+	box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+	margin: 0;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	background-color: var(--body-bg-color);
+	scrollbar-color: black transparent;
+	scrollbar-width: thin;
+
+	font-size: 14px;
+	line-height: 150%;
+
+	height: 100%;
+	color-scheme: dark;
+}
+
+body::-webkit-scrollbar {
+	display: none;
+}
+
+/* Font styling */
+h1 {
+	font-style: normal;
+	font-weight: 600;
+	font-size: 32px;
+	line-height: 140%;
+}
+
+p.subtext {
+	opacity: 0.6;
+}
+
+p.subtext a {
+	font-weight: 400;
+	text-decoration: underline;
+	transition: ease 0.12s;
+	opacity: 1;
+}
+
+p.subtext a:hover {
+	opacity: 0.6;
+}
+
+input[type='search']::-webkit-search-cancel-button {
+	/* Remove default */
+	-webkit-appearance: none;
+}
+
+code {
+	font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
+}
+
+*,
+*::after,
+*::before {
+	/* Make it so that users can't drag the application elements by default */
+	-webkit-user-drag: none;
+	-webkit-app-region: no-drag;
+}

src/packages/admin-ui-components/.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value: string): any {
+	return dirname(require.resolve(join(value, 'package.json')));
+}
+const config: StorybookConfig = {
+	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		getAbsolutePath('@storybook/addon-essentials'),
+		getAbsolutePath('@storybook/addon-onboarding'),
+		getAbsolutePath('@storybook/addon-interactions'),
+	],
+	framework: {
+		name: getAbsolutePath('@storybook/react-vite'),
+		options: {},
+	},
+};
+export default config;

src/packages/admin-ui-components/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/manager-api';
+import theme from './theme';
+
+addons.setConfig({
+	theme,
+});

src/packages/admin-ui-components/.storybook/preview.ts

@@ -0,0 +1,18 @@
+import type { Preview } from '@storybook/react';
+import './main.css';
+import theme from './theme';
+const preview: Preview = {
+	parameters: {
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+		docs: {
+			theme,
+		},
+	},
+};
+
+export default preview;

src/packages/admin-ui-components/.storybook/theme.ts

@@ -0,0 +1,38 @@
+import { create } from '@storybook/theming';
+
+export default create({
+	base: 'dark',
+	brandTitle: 'Graphweaver UI Components',
+	brandUrl: 'https://graphweaver.com',
+	brandImage: 'https://graphweaver.com/img/graphweaver-logo.svg',
+	brandTarget: '_self',
+	//
+	colorPrimary: '#7038c2',
+	colorSecondary: '#853af2',
+
+	// UI
+	appBg: '#171221',
+	appContentBg: '#100a1c',
+	appPreviewBg: '#100a1c',
+	appBorderColor: '#585C6D',
+	appBorderRadius: 4,
+
+	fontBase: '"Inter", sans-serif',
+	fontCode: 'monospace',
+
+	// Text colors
+	textColor: '#ede8f2',
+	textInverseColor: '#ffffff',
+
+	// Toolbar default and active colors
+	barTextColor: '#9E9E9E',
+	barSelectedColor: '#585C6D',
+	barHoverColor: '#585C6D',
+	barBg: '#ede8f221',
+
+	// Form colors
+	inputBg: '#ede8f221',
+	inputBorder: '#10162F',
+	inputTextColor: '#10162F',
+	inputBorderRadius: 2,
+});

src/packages/admin-ui-components/package.json

@@ -14,7 +14,9 @@
 		"codegen": "graphql-codegen --config ./codegen.yml",
 		"test:tsc": "tsc --noEmit",
 		"test:prettier": "prettier --check .",
-		"version": "npm version --no-git-tag-version"
+		"version": "npm version --no-git-tag-version",
+		"storybook": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
 	},
 	"main": "lib/index.js",
 	"source": "src/index.ts",
@@ -28,6 +30,7 @@
 		"@apollo/client": "3.13.5",
 		"@exogee/graphweaver-apollo-client": "workspace:*",
 		"@graphiql/toolkit": "0.11.1",
+		"@tanstack/react-form": "1.11.1",
 		"@tanstack/react-table": "8.21.2",
 		"@tiptap/extension-link": "2.11.5",
 		"@tiptap/react": "2.11.7",
@@ -44,7 +47,8 @@
 		"react-resizable-panels": "2.1.7",
 		"react-syntax-highlighter": "15.6.1",
 		"tiptap-markdown": "0.8.10",
-		"wouter": "3.6.0"
+		"wouter": "3.6.0",
+		"zod": "3.24.4"
 	},
 	"peerDependencies": {
 		"formik": "^2.4.6",
@@ -53,20 +57,33 @@
 		"react-dom": "^18.0.0 || ^19.0.0"
 	},
 	"devDependencies": {
+		"@storybook/addon-essentials": "^8.6.12",
+		"@storybook/addon-interactions": "^8.6.12",
+		"@storybook/addon-onboarding": "^8.6.12",
+		"@storybook/blocks": "^8.6.12",
+		"@storybook/manager-api": "8.6.12",
+		"@storybook/react": "^8.6.12",
+		"@storybook/react-vite": "^8.6.12",
+		"@storybook/test": "^8.6.12",
+		"@storybook/theming": "8.6.12",
 		"@types/graphql-deduplicator": "2.0.2",
 		"@types/luxon": "3.6.2",
 		"@types/papaparse": "5.3.15",
 		"@types/react": "19.0.12",
 		"@types/react-syntax-highlighter": "15.5.13",
 		"esbuild": "0.25.1",
 		"esbuild-plugin-copy": "2.1.1",
+		"eslint-plugin-storybook": "0.12.0",
 		"formik": "2.4.6",
 		"glob": "11.0.1",
 		"graphql": "16.10.0",
 		"react": "19.1.0",
 		"react-dom": "19.1.0",
+		"storybook": "^8.6.12",
 		"typescript": "5.8.3",
-		"vite": "6.3.5"
+		"vite": "6.3.5",
+		"vite-plugin-graphweaver": "workspace:*",
+		"vitest": "3.0.9"
 	},
 	"keywords": [
 		"graphql",

src/packages/admin-ui-components/src/alert/alert.mdx

@@ -0,0 +1,64 @@
+import { Canvas, Meta, Story, Controls } from '@storybook/blocks';
+
+import * as AlertStories from './alert.stories';
+import { Alert } from './alert';
+
+<Meta of={AlertStories} />
+
+# Alert
+
+Alerts display important messages about the state of the application, providing contextual feedback to users about their actions.
+
+## Overview
+
+The Alert component is a versatile notification element that can be used to:
+
+- Provide feedback about an operation's outcome
+- Highlight important information
+- Warn users about potential issues
+- Signal errors that need attention
+
+## Examples
+
+### Error Alert
+
+Use the error severity to communicate critical issues that need immediate attention.
+
+<Canvas of={AlertStories.Error} />
+
+### Warning Alert
+
+Use the warning severity to highlight potential issues or important considerations.
+
+<Canvas of={AlertStories.Warning} />
+
+### Info Alert
+
+Use the info severity to provide neutral, informational content.
+
+<Canvas of={AlertStories.Info} />
+
+### Success Alert
+
+Use the success severity to confirm a successful operation or action.
+
+<Canvas of={AlertStories.Success} />
+
+## Properties
+
+<Controls of={AlertStories.Error} />
+
+## Usage Guidelines
+
+- Use alerts sparingly to avoid overwhelming users
+- Choose the appropriate severity level based on the message's importance
+- Keep alert messages concise and actionable
+- Position alerts in a consistent location within the interface
+- For transient feedback, consider using a toast notification instead
+
+## Accessibility
+
+- Alert colors are designed with appropriate contrast ratios
+- Icons help convey the severity visually
+- The component is designed to be accessible to screen readers
+- Critical alerts should be announced appropriately to assistive technologies

src/packages/admin-ui-components/src/alert/alert.stories.ts

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Alert } from './alert';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+	title: 'Components/Alert',
+	component: Alert,
+	parameters: {
+		// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+		layout: 'centered',
+	},
+	// This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+	// More on argTypes: https://storybook.js.org/docs/api/argtypes
+	argTypes: {
+		severity: {
+			control: 'select',
+			options: ['error', 'warning', 'info', 'success'],
+			description: 'The severity level of the alert',
+		},
+		children: {
+			control: 'text',
+			description: 'The content of the alert',
+		},
+	},
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Error: Story = {
+	args: {
+		severity: 'error',
+		children: 'This is an error alert. Something went wrong!',
+	},
+};
+
+export const Warning: Story = {
+	args: {
+		severity: 'warning',
+		children: 'This is a warning alert. Proceed with caution!',
+	},
+};
+
+export const Info: Story = {
+	args: {
+		severity: 'info',
+		children: 'This is an info alert. Here is some information.',
+	},
+};
+
+export const Success: Story = {
+	args: {
+		severity: 'success',
+		children: 'This is a success alert. Operation completed successfully!',
+	},
+};