fix build

.eslintrc.cjs

@@ -0,0 +1,25 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true,
+    es2020: true
+  },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:storybook/recommended'
+  ],
+  ignorePatterns: [
+    'dist',
+    '.eslintrc.cjs'
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

.github/DEVELOP.md

@@ -14,12 +14,12 @@ To understand the principles that drive the design and development of Moai, see
 
 Moai is a [monorepo](https://classic.yarnpkg.com/en/docs/workspaces/) powered by Yarn. There are several projects:
 
-| Path    | Project           | Framework   |
-| ------- | ----------------- | ----------- |
-| core    | [@moai/core]      | [Rollup]    |
-| gallery | [@moai/gallery]   | [Rollup]    |
-| docs    | [moai.thien.do]   | [Storybook] |
-| test    | Test suits        | [Jest]      |
+| Path    | Project         | Framework   |
+| ------- | --------------- | ----------- |
+| core    | [@moai/core]    | [Rollup]    |
+| gallery | [@moai/gallery] | [Rollup]    |
+| docs    | [moai.thien.do] | [Storybook] |
+| test    | Test suits      | [Jest]      |
 
 The "test" and "docs" projects depend on "core" and "gallery" via symlinks. This means to run tests or start the docs site locally, you will need to build "core" and "gallery" first. Also, the "gallery" depends on the "core" project:
 

.gitignore

@@ -1,3 +1,2 @@
-/node_modules
-.DS_Store
-.idea
+node_modules
+storybook-static

.storybook/main.ts

@@ -0,0 +1,21 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: [
+    "../src/docs/**/*.mdx",
+    "../src/docs/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-docs",
+    "storybook-dark-mode"
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    docsMode: true,
+  }
+};
+
+export default config;

.storybook/preview.css

@@ -0,0 +1,34 @@
+html {
+	tab-size: 4;
+}
+
+.light {
+	--background-strong: var(--white);
+	--border-strong: var(--gray-2);
+	--text-muted: var(--gray-4);
+}
+
+.dark {
+	--background-strong: var(--gray-7);
+	--border-strong: var(--gray-4);
+	--text-muted: var(--gray-3);
+}
+
+.sbdocs p,
+.sbdocs ul {
+	max-width: 640px;
+}
+
+.sbdocs blockquote:not(.x) {
+	border-color: var(--border-strong);
+}
+
+.sbdocs blockquote p {
+	font-style: italic;
+	color: var(--text-muted);
+}
+
+.sbdocs-wrapper:not(.x) {
+	padding: 24px;
+	background-color: var(--background-strong);
+}

.storybook/preview.tsx

@@ -0,0 +1,39 @@
+import { DocsContainer, Unstyled } from "@storybook/blocks";
+import { Preview } from "@storybook/react";
+import { useDarkMode } from "storybook-dark-mode";
+import { themes } from "./theme";
+
+import "./preview.css";
+import "./syntax.css";
+import "./typography.css";
+
+const Container: typeof DocsContainer = (props) => {
+  const dark = useDarkMode();
+  const theme = dark ? themes.dark : themes.light;
+  return (
+    <DocsContainer {...props} theme={theme}>
+      <Unstyled>{props.children}</Unstyled>
+    </DocsContainer>
+  );
+};
+
+const preview: Preview = {
+  parameters: {
+    docs: {
+      container: Container,
+    },
+    options: {
+      storySort: {
+        method: "alphabetical",
+        order: [
+          "Intro",
+          ["Quick Start", "Proper Start"],
+          "Patterns",
+          "Components",
+        ],
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/syntax.css

@@ -0,0 +1,104 @@
+@import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap");
+
+.light {
+	--background-weak: var(--gray-0);
+  --border-weak: var(--gray-1);
+  --text-normal: var(--gray-8);
+}
+
+.dark {
+	--background-weak: var(--gray-8);
+  --border-weak: var(--gray-5);
+  --text-normal: var(--gray-1);
+}
+
+/* Standalone source code */
+.docblock-source:not(.x) {
+	background-color: var(--background-weak);
+	border: solid 2px var(--border-weak);
+	box-shadow: none;
+}
+
+.prismjs:not(#x) {
+	font-size: 15px;
+	line-height: 21px;
+	color: var(--text-normal);
+}
+
+/* We should have this alone */
+.prismjs:not(#x) div,
+/* But Storybook set this so we also need to override it */
+.token:not(#x) {
+	font-family: "Source Code Pro", monospace;
+	font-weight: 400;
+}
+
+.light .token:not(#x).selector,
+.light .token:not(#x).tag {
+	color: #22863a;
+}
+.light .token:not(#x).attr-value,
+.light .token:not(#x).string {
+	color: #032f62;
+}
+.light .token:not(#x).rule,
+.light .token:not(#x).keyword {
+	color: #d73a49;
+}
+.light .token:not(#x).variable,
+.light .token:not(#x).class-name,
+.light .token:not(#x).type-definition,
+.light .token:not(#x).maybe-class-name,
+.light .token:not(#x).function {
+	color: #6f42c1;
+}
+.light .token:not(#x).doctype,
+.light .token:not(#x).doctype-tag,
+.light .token:not(#x).attr-name,
+.light .token:not(#x).property,
+.light .token:not(#x).number,
+.light .token:not(#x).constant,
+.light .token:not(#x).operator,
+.light .token:not(#x).property-access,
+.light .token:not(#x).boolean {
+	color: #005cc5;
+}
+.light .token:not(#x).punctuation,
+.light .token:not(#x).comment {
+	color: #6a737d;
+}
+
+.dark .token:not(#x).selector,
+.dark .token:not(#x).tag {
+	color: #7ec699;
+}
+.dark .token:not(#x).attr-value,
+.dark .token:not(#x).string {
+	color: #67cdcc;
+}
+.dark .token:not(#x).rule,
+.dark .token:not(#x).keyword {
+	color: #e2777a;
+}
+.dark .token:not(#x).variable,
+.dark .token:not(#x).class-name,
+.dark .token:not(#x).type-definition,
+.dark .token:not(#x).maybe-class-name,
+.dark .token:not(#x).function {
+	color: #cc99cd;
+}
+.dark .token:not(#x).doctype,
+.dark .token:not(#x).doctype-tag,
+.dark .token:not(#x).attr-name,
+.dark .token:not(#x).property,
+.dark .token:not(#x).number,
+.dark .token:not(#x).constant,
+.dark .token:not(#x).operator,
+.dark .token:not(#x).property-access,
+.dark .token:not(#x).boolean {
+	color: #6196cc;
+}
+.dark .token:not(#x).punctuation,
+.dark .token:not(#x).comment {
+	color: #999;
+}

.storybook/theme.ts

@@ -0,0 +1,48 @@
+import { create } from "@storybook/theming";
+
+const common = {
+    // Highlight color
+    colorPrimary: "hsl(199, 89%, 48%)", // highlight-5
+    colorSecondary: "hsl(199, 89%, 48%)", // highlight-5
+    // Typography
+    fontBase: '"Inter var", sans-serif',
+    // Branding
+    brandTitle: "Moai UI kit",
+    brandUrl: "https://moai.thien.do",
+};
+
+const light = create({
+    ...common,
+    base: "light",
+    // UI
+    appBg: "hsl(235, 18%, 98%)", // gray-0
+    appContentBg: "hsl(0, 0%, 100%)", // white
+    appBorderColor: "hsl(216, 12%, 77%)", // gray-2
+    appBorderRadius: 2,
+    // Text colors
+    textColor: "hsl(216, 13%, 15%)", // gray-8
+    textMutedColor: "hsl(220, 09%, 46%)", // gray-4
+    // Toolbar default and active colors
+    barTextColor: "hsl(216, 13%, 15%)", // gray-8
+    barSelectedColor: "hsl(216, 13%, 15%)", // gray-8
+    barBg: "hsl(0, 0%, 100%)", // white
+});
+
+const dark = create({
+    ...common,
+    base: "dark",
+    // UI
+    appBg: "hsl(216, 13%, 15%)", // gray-8
+    appContentBg: "hsl(220, 13%, 18%)", // gray-7
+    appBorderColor: "hsl(220, 09%, 46%)", // gray-4
+    appBorderRadius: 2,
+    // Text colors
+    textColor: "hsl(235, 18%, 98%)", // gray-0
+    textMutedColor: "hsl(218, 11%, 65%)", // gray-3
+    // Toolbar default and active colors
+    barTextColor: "hsl(235, 18%, 98%)", // gray-0
+    barSelectedColor: "hsl(235, 18%, 98%)", // gray-0
+    barBg: "hsl(220, 13%, 18%)", // gray-7
+});
+
+export const themes = { light, dark };