Storybook

.eslintrc.json

@@ -1,8 +1,9 @@
 {
-  "extends": ["next", "next/core-web-vitals", "prettier"],
+  "extends": ["next", "next/core-web-vitals", "prettier", "plugin:storybook/recommended"],
   "plugins": ["simple-import-sort"],
   "rules": {
     "simple-import-sort/imports": "warn",
-    "@next/next/no-img-element": "off"
+    "@next/next/no-img-element": "off",
+    "@next/next/no-html-link-for-pages": "off"
   }
 }

.github/workflows/continuous-integration.yml

@@ -1,4 +1,5 @@
 name: CI
+
 on:
   pull_request:
   push:

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,26 @@
+# Workflow name
+name: Build and Publish Storybook to GitHub Pages
+
+on:
+  push:
+    branches:
+      - 'main'
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+      - uses: bitovi/[email protected]
+        with:
+          install_command: npm i
+          build_command: npm run storybook:build
+          path: dist/storybook

.github/workflows/publish-to-npm.yml

@@ -1,7 +1,9 @@
 name: Publish Package to NPM
+
 on:
   release:
     types: [published]
+
 jobs:
   build:
     runs-on: ubuntu-latest

.gitignore

@@ -45,3 +45,5 @@ stats.html
 
 **/.eslintcache
 .vercel
+
+*storybook.log

.husky/pre-commit

@@ -1 +1 @@
-npm run pre-commit
+lint-staged

.prettierignore

@@ -1,7 +1,3 @@
-**/.eslintrc.js
-**/*.md
 **/package.json
 **/tsconfig.json
-pnpm-workspace.yaml
-pnpm-lock.yaml
-turbo.json
+package-lock.json

.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from '@storybook/nextjs';
+
+const config: StorybookConfig = {
+  "stories": [
+    "../src/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  "addons": [
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@chromatic-com/storybook",
+    "@storybook/addon-interactions"
+  ],
+  "framework": {
+    "name": "@storybook/nextjs",
+    "options": {}
+  }
+};
+export default config;

.storybook/manager.ts

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

.storybook/preview.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { NearAiUiProvider } from '../src';
+import { theme } from './theme';
+import './styles.scss';
+
+const useRouter = () => {
+  return {
+    prefetch: () => {},
+    replace: () => {},
+    push: () => {},
+  };
+};
+
+const preview: Preview = {
+  globalTypes: {
+    theme: {
+      description: 'Global theme for components',
+      toolbar: {
+        title: 'Theme',
+        items: [
+          {
+            value: 'dark',
+            title: 'Dark',
+            icon: 'moon',
+          },
+          {
+            value: 'light',
+            title: 'Light',
+            icon: 'sun',
+          },
+        ],
+        dynamicTitle: true,
+      },
+    },
+  },
+
+  initialGlobals: {
+    theme: 'dark',
+  },
+
+  parameters: {
+    backgrounds: {
+      disable: true,
+    },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    docs: {
+      theme,
+    },
+  },
+  decorators: [
+    (Story, context) => (
+      <NearAiUiProvider
+        value={{
+          forcedTheme: context.globals.theme,
+          Link: (props) => <a {...props} />,
+          useRouter: useRouter,
+        }}
+      >
+        {/* 👇 Decorators in Storybook also accept a function. Replace <Story/> with Story() to enable it  */}
+        <Story />
+      </NearAiUiProvider>
+    ),
+  ],
+};
+
+export default preview;

.storybook/styles.scss

@@ -0,0 +1,3 @@
+.sbdocs-preview {
+  background: var(--sand-1) !important;
+}

.storybook/theme.ts

@@ -0,0 +1,10 @@
+import { create } from '@storybook/theming';
+
+// @ts-expect-error
+import NearAiLogo from './near-ai-logo.svg';
+
+export const theme = create({
+  base: 'dark',
+  brandTitle: 'NEAR AI UI | Storybook',
+  brandImage: NearAiLogo,
+});

README.md

@@ -32,17 +32,14 @@ export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en" suppressHydrationWarning>
       <head>
-        <meta
-          name="viewport"
-          content="width=device-width, initial-scale=1, minimum-scale=1"
-        />
+        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
       </head>
 
       <body>
         <NearAiUiProvider
           value={{
             Link,
-            useRouter
+            useRouter,
           }}
         >
           <Toaster />
@@ -81,6 +78,14 @@ npm run test:watch
 - Test your local changes
 - Push a PR for review
 
+## Storybook
+
+Boot up local [Storybook](https://storybook.js.org) server and watch for changes:
+
+```
+npm run storybook
+```
+
 ## Test Local Changes
 
 Follow these steps to preview local changes to the UI library within any project that depends on the library: