Figma components

.gitignore

@@ -1,5 +1,29 @@
-#dependencies
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
 node_modules
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
 
 .env
-.DS_Store
+.DS_Store
+*storybook.log
+
+storybook-static

.storybook/decorators/withNextLink.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Decorator } from '@storybook/react';
+
+import { LinkProvider } from '../../src/providers/NextLinkProvider';
+
+const withNextLink: Decorator = (StoryFn) => {
+	// consumers of the library pass in actual React/Next.js links
+	const FakeLink = function ({ children }) {
+		return (
+			<a className="peer/menu-button cursor-pointer flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left outline-hidden ring-sidebar-ring transition-[width,height,padding] focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground h-8 text-sm data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground">
+				{children}
+			</a>
+		);
+	};
+	return (
+		<LinkProvider linkComponent={FakeLink as any}>
+			<StoryFn />
+		</LinkProvider>
+	);
+};
+export default withNextLink;

.storybook/main.ts

@@ -1,38 +1,11 @@
-import type { StorybookConfig } from '@storybook/react-webpack5';
+import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
 	stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
-	addons: [
-		'@storybook/addon-links',
-		'@storybook/addon-essentials',
-		'@storybook/addon-interactions',
-		'@storybook/addon-controls',
-		'@storybook/addon-a11y',
-		'@storybook/addon-designs',
-	],
-
+	addons: ['@storybook/addon-docs'],
 	framework: {
-		name: '@storybook/react-webpack5',
-		options: {
-			builder: {
-				useSWC: true,
-			},
-		},
-	},
-	docs: {
-		autodocs: true,
-	},
-	core: {
-		disableTelemetry: true,
+		name: '@storybook/react-vite',
+		options: {},
 	},
-	swc: () => ({
-		jsc: {
-			transform: {
-				react: {
-					runtime: 'automatic',
-				},
-			},
-		},
-	}),
 };
 export default config;

.storybook/manager.ts

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/manager-api';
+import { addons } from 'storybook/manager-api';
 
 import LagoonTheme from './theme';
 

.storybook/preview.ts

@@ -1,54 +1,37 @@
 import type { Preview } from '@storybook/react';
-import withTheme from './decorators/withTheme';
 
+import '../src/index.css';
+
+import React from 'react';
+import withNextLink from './decorators/withNextLink';
 const preview: Preview = {
 	parameters: {
-		options: {
-			storySort: {
-				order: [
-					'Introduction',
-					'Guide',
-					['Design Tokens', 'Typography', 'Globals', 'Theming And Globals', 'Figma', 'Icons'],
-					'Components',
-					'Lagoon specific',
-				],
-			},
-		},
-		actions: { argTypesRegex: '^on[A-Z].*' },
 		controls: {
 			controls: { expanded: true },
+
 			matchers: {
 				color: /(background|color)$/i,
 				date: /Date$/i,
 			},
 		},
-
-		docs: {
-			source: {
-				language: 'tsx',
-			},
-			story: {
-				height: '300px',
-			},
-		},
-	},
-	globalTypes: {
-		theme: {
-			description: 'Global theme for components',
-			defaultValue: 'light',
-			toolbar: {
-				title: 'Theme',
-				icon: 'circlehollow',
-				items: [
-					{ value: 'light', icon: 'circlehollow', title: 'Light Theme' },
-					{ value: 'dark', icon: 'circle', title: 'Dark Theme' },
-					{ value: 'side-by-side', icon: 'mirror', title: 'Side by side' },
-				],
-				dynamicTitle: true,
+		globalTypes: {
+			theme: {
+				description: 'Global theme for components',
+				defaultValue: 'light',
+				toolbar: {
+					title: 'Theme',
+					icon: 'circlehollow',
+					items: [
+						{ value: 'light', icon: 'circlehollow', title: 'Light Theme' },
+						{ value: 'dark', icon: 'circle', title: 'Dark Theme' },
+						{ value: 'side-by-side', icon: 'mirror', title: 'Side by side' },
+					],
+					dynamicTitle: true,
+				},
 			},
 		},
 	},
-	decorators: [withTheme],
+	decorators: [withNextLink],
 };
 
 export default preview;

.storybook/theme.js

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from 'storybook/theming';
 
 import logo from './public/logo.svg';