fix

Revert "draft"

This reverts commit 51768d0.

Revert "color"

This reverts commit 5790a7e.

update storybook to 8.2.2

color

fix

gallery

move gallery to src

move core to src

draft

move to docs

proper-start

quick-start

prevent open browser when run dev

a

fix

Co-Authored-By: Nhi Ly <[email protected]>

.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,26 @@
-/node_modules
-.DS_Store
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
 .idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+*storybook.log

.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,40 @@
+import { DocsContainer, Unstyled } from "@storybook/blocks";
+import { Preview } from '@storybook/react';
+import { useDarkMode } from "storybook-dark-mode";
+import { themes } from './theme';
+
+import "../global.css";
+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 };