Fix storybook, ts config and vite config

.eslintignore

@@ -1,8 +1,6 @@
 build/
 dist/
 node_modules/
-storybook-static/
+gh-pages-dist/
 .snapshots/
 *.min.js
-# See https://github.com/eslint/eslint/issues/12348#issuecomment-536946429
-!.storybook

.eslintrc.json

@@ -1,57 +1,56 @@
 {
-  "extends": [
-   "collaborne",
-   "plugin:storybook/recommended"
-  ],
-  "overrides": [
-   {
-    "files": [
-     "**/*.ts",
-     "**/*.tsx"
-    ],
-    "extends": [
-     "standard-react",
-     "plugin:prettier/recommended",
-     "collaborne"
-    ],
-    "env": {
-     "node": false
-    },
-    "settings": {
-     "react": {
-      "version": "17"
-     }
-    },
-    "plugins": [
-     "react-hooks"
-    ],
-    "rules": {
-     "react/prop-types": "off",
-     "react/jsx-handler-names": "off",
-     "react/jsx-fragments": "off",
-     "react/no-unused-prop-types": "off",
-     "react/jsx-uses-react": "off",
-     "react/react-in-jsx-scope": "off",
-     "react-hooks/rules-of-hooks": "error",
-     "react-hooks/exhaustive-deps": "warn",
-     "camelcase": "warn"
-    }
-   },
-   {
-    "files": "src/**/*.spec.ts",
-    "extends": [
-     "plugin:jest/recommended"
-    ]
-   },
-   {
-    "files": [
-     ".storybook/**/*.ts",
-     ".storybook/**/*.tsx"
-    ],
-    "parserOptions": {
-     "project": "tsconfig.test.json"
-    }
-   }
-  ]
- }
-
+	"extends": "collaborne",
+
+	"overrides": [
+		{
+			"files": ["**/*.ts", "**/*.tsx"],
+
+			"extends": [
+				"standard-react",
+				"plugin:prettier/recommended",
+				"collaborne"
+			],
+
+			"env": {
+				"node": false
+			},
+
+			"settings": {
+				"react": {
+					"version": "17"
+				}
+			},
+			"plugins": ["react-hooks"],
+			"rules": {
+				"react/prop-types": "off",
+				"react/jsx-handler-names": "off",
+				"react/jsx-fragments": "off",
+				"react/no-unused-prop-types": "off",
+				"react/jsx-uses-react": "off",
+				"react/react-in-jsx-scope": "off",
+				"react-hooks/rules-of-hooks": "error",
+				"react-hooks/exhaustive-deps": "warn",
+				"camelcase": "warn",
+				"@typescript-eslint/naming-convention": [
+					"error",
+					{
+						"selector": "function",
+						"format": ["PascalCase", "camelCase"]
+					}
+				]
+			}
+		},
+		{
+			"files": "src/**/*.spec.ts",
+
+			"extends": ["plugin:jest/recommended"]
+		},
+		{
+			"files": [".storybook/**/*.ts", ".storybook/**/*.tsx"],
+
+			"parserOptions": {
+				"project": "tsconfig.test.json"
+			}
+		}
+	]
+}

.github/workflows/chromatic.yml

@@ -0,0 +1,18 @@
+name: 'Chromatic'
+
+on: push
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0 # 👈 Required to retrieve git history
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Install dependencies
+        run: npm ci --unsafe-perm
+      - name: Run tests
+        run: npm run test

.github/workflows/ci.yml

@@ -0,0 +1,15 @@
+name: CI
+
+on: pull_request
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci --unsafe-perm
+      - run: npm run build
+      - run: npm test

.github/workflows/npm-publish.yml

@@ -0,0 +1,23 @@
+name: Publish to NPM
+
+on:
+  push:
+    tags:
+      - '*'
+
+jobs:
+  publish-npm:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci --unsafe-perm
+      - run: npm run build
+      - run: npm test
+      - name: Publish to NPM
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/storybook-typedoc-deploy.yml

@@ -0,0 +1,27 @@
+name: StoryBook and Typedoc Deployment
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  deploy-storybook:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - run: npm ci --unsafe-perm
+      - run: npm run build
+      - run: npm test
+      - run: npm run predeploy
+      - run: git config --global user.email "storybook@nextapp.co"
+      - run: git config --global user.name "StoryBook"
+      - name: Deploy with gh-pages
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          npm run deploy
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.storybook/.env.storybook

@@ -0,0 +1 @@
+DEBUG=*

.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/react-vite';
 
 const config: StorybookConfig = {
-	stories: ['./stories/**/*.stories.@(ts|tsx)'],
+	stories: ['./stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
 	addons: [
 		'@storybook/addon-actions',
 		'@storybook/addon-controls',
@@ -12,4 +12,5 @@ const config: StorybookConfig = {
 		options: {},
 	},
 };
+
 export default config;

.storybook/stories/search-editor.stories.tsx

@@ -1,4 +1,4 @@
-import { Button, ButtonGroup } from '@mui/material';
+import { Button, ButtonGroup, Grid } from '@mui/material';
 import { action } from '@storybook/addon-actions';
 import { useRef } from 'react';
 import { PiCalendarBlank, PiTag } from 'react-icons/pi';
@@ -10,8 +10,6 @@ import {
 	SearchEditor,
 	SearchEditorProps,
 } from '../../src/search-editor/SearchEditor';
-import { withIntl } from '../decorators/with-intl';
-import { withTheme } from '../decorators/with-theme';
 
 import { Story } from './utils/doc';
 import { TAGS, USERS, useEditorMention } from './utils/hooks/useEditorMention';
@@ -20,7 +18,6 @@ import { promiseAction } from './utils/promiseAction';
 export default {
 	title: 'Editors / Search Editor',
 	component: SearchEditor,
-	decorators: [withTheme, withIntl],
 };
 
 const SEARCH_QUERY = `list:item1,item2,item3 creator:${USERS[0].id} tag:${TAGS[0].id}`;
@@ -74,7 +71,13 @@ const Template: Story<SearchEditorStoryArgs> = (
 	};
 
 	return (
-		<div>
+		<Grid
+			direction={'row'}
+			container
+			gap={1}
+			alignContent={'center'}
+			alignItems={'center'}
+		>
 			<SearchEditor
 				placeholder="Search by tags or users"
 				fields={fields}
@@ -83,15 +86,16 @@ const Template: Story<SearchEditorStoryArgs> = (
 				getSuggestions={promiseAction('getSuggestions')}
 				{...props}
 			/>
+
 			<ButtonGroup>
 				<Button
 					variant="contained"
 					onClick={() => editorRef.current?.clearContent()}
 				>
 					Clear content
-				</Button>{' '}
+				</Button>
 			</ButtonGroup>
-		</div>
+		</Grid>
 	);
 };
 

.storybook/stories/static-search-editor.stories.tsx

@@ -1,8 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 
 import { Fields, StaticSearchEditor, StaticSearchEditorProps } from '../../src';
-import { withIntl } from '../decorators/with-intl';
-import { withTheme } from '../decorators/with-theme';
 
 import { Story } from './utils/doc';
 import {
@@ -15,7 +13,6 @@ import {
 export default {
 	title: 'Editors / Static Search Editor',
 	component: StaticSearchEditor,
-	decorators: [withTheme, withIntl],
 };
 
 const SEARCH_QUERY = `list:item1,item2,item3 user:${USERS[0].id} tag:${TAGS[0].id} source:${SOURCES[0].id} ger`;

.storybook/stories/utils/hooks/useEditorMention.tsx

@@ -1,4 +1,3 @@
-import { TagChip, UserChip } from '@collaborne/carrot-styles';
 import { Chip } from '@mui/material';
 import { useMemo } from 'react';
 
@@ -107,10 +106,10 @@ export function useEditorMention() {
 				name: 'unknown',
 			};
 
-			return <TagChip tag={unknownTag} size="small" />;
+			return <Chip label={unknownTag.name} size="small" />;
 		}
 
-		return <TagChip tag={tag} size="small" />;
+		return <Chip label={tag.name} size="small" />;
 	};
 	const renderLabel = (params: { id: string }) => {
 		return <Chip variant="filled" size="small" label={params.id} />;
@@ -122,9 +121,8 @@ export function useEditorMention() {
 	const renderUser = (params: { id: string }) => {
 		const user = USERS.find(u => u.id === params.id);
 		return (
-			<UserChip
-				name={user?.name}
-				image={user?.image}
+			<Chip
+				label={user?.name}
 				size="small"
 				variant="filled"
 			/>