fix

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

.eslintrc.json

@@ -2,7 +2,13 @@
 	"root": true,
 	"parser": "@typescript-eslint/parser",
 	"plugins": ["@typescript-eslint", "jest-dom"],
-	"ignorePatterns": ["node_modules", "dist", "public", "test/coverage"],
+	"ignorePatterns": [
+		"node_modules",
+		"dist",
+		"public",
+		"test/coverage",
+		"docs/storybook-static"
+	],
 	"extends": [
 		"eslint:recommended",
 		"plugin:@typescript-eslint/recommended",

.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:
 

.github/workflows/node.js.yml

@@ -8,9 +8,10 @@ jobs:
         runs-on: ubuntu-latest
         steps:
             - uses: actions/checkout@v2
+            - run: corepack enable
             - uses: actions/setup-node@v2
               with:
-                  node-version: 15.x
+                  node-version: "20.x"
                   cache: "yarn"
             - run: yarn install
             - run: yarn lint

.gitignore

@@ -1,3 +1,4 @@
 /node_modules
 .DS_Store
 .idea
+.vercel

.prettierignore

@@ -4,3 +4,4 @@ public
 .next
 .vercel
 /test/coverage
+/docs/storybook-static

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

README.md

@@ -1,9 +1,8 @@
 **Heads up!** This project is no longer in active development. It will be [archived](https://docs.github.com/en/repositories/archiving-a-github-repository/archiving-repositories) soon. Some suggestions:
 
-- Build your own UI kit with a good foundation like [Radix](https://www.radix-ui.com/) or [Headless UI](https://headlessui.com/). This is what I'm actually doing these days myself.
-- Fork this project. You have my sword, and bow, and axe, and only 22 unresolved bugs.
-- Refactor Moai to utilise Radix (which is what I wanted to do, if I don't need to pay the bills)
-
+-   Build your own UI kit with a good foundation like [Radix](https://www.radix-ui.com/) or [Headless UI](https://headlessui.com/). This is what I'm actually doing these days myself.
+-   Fork this project. You have my sword, and bow, and axe, and only 22 unresolved bugs.
+-   Refactor Moai to utilise Radix (which is what I wanted to do, if I don't need to pay the bills)
 
 <hr />
 

core/package.json

@@ -30,28 +30,27 @@
 		"react-dom": ">=16"
 	},
 	"dependencies": {
-		"@popperjs/core": "^2.9.2",
-		"@tippyjs/react": "^4.2.5",
-		"react-day-picker": "^7.4.10",
-		"react-hot-toast": "^1.0.2",
-		"react-icons": "^4.2.0",
-		"react-popper": "^2.2.5"
-	},
-	"devDependencies": {
-		"@types/react": "^17.0.15",
-		"@types/react-dom": "^17.0.9",
-		"autoprefixer": "^10.3.1",
-		"modern-normalize": "^1.1.0",
-		"postcss": "^8.3.6",
-		"postcss-import": "^14.0.2",
-		"react": "^17.0.2",
-		"react-dom": "^17.0.2",
-		"rollup": "^2.55.1",
-		"rollup-plugin-copy": "^3.4.0",
+		"@popperjs/core": "^2.11.8",
+		"@tippyjs/react": "^4.2.6",
+		"@types/react": "^18.3.3",
+		"@types/react-dom": "^18.3.0",
+		"autoprefixer": "^10.4.19",
+		"date-fns": "^3.6.0",
+		"modern-normalize": "^2.0.0",
+		"postcss": "^8.4.39",
+		"postcss-import": "^16.1.0",
+		"react": "^18.3.1",
+		"react-day-picker": "^8.10.1",
+		"react-dom": "^18.3.1",
+		"react-hot-toast": "^2.4.1",
+		"react-icons": "^5.2.1",
+		"react-popper": "^2.3.0",
+		"rollup": "^4.18.0",
+		"rollup-plugin-copy": "^3.5.0",
 		"rollup-plugin-delete": "^2.0.0",
-		"rollup-plugin-postcss": "^4.0.0",
-		"rollup-plugin-typescript2": "^0.30.0",
-		"tslib": "^2.3.0",
-		"typescript": "^4.3.4"
+		"rollup-plugin-postcss": "^4.0.2",
+		"rollup-plugin-typescript2": "^0.36.0",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.2"
 	}
 }

core/rollup.config.js → core/rollup.config.mjs

@@ -44,14 +44,15 @@ const bundleMain = {
 	external: [
 		"@tippyjs/react/headless",
 		"focus-visible",
-		"react-day-picker/DayPickerInput",
 		"react-dom",
 		"react-hot-toast",
+		"react-icons",
 		"react-icons/go",
 		"react-icons/ri",
 		"react-popper",
 		"react",
 		"react/jsx-runtime",
+		"react-day-picker",
 	],
 	plugins: [
 		del({ targets: ["dist"] }),

core/src/button/button.tsx

@@ -267,7 +267,7 @@ const validateButton = (props: ButtonProps): void => {
 // since it's missing the ref. See Button for the exported component.
 const buttonRender = (
 	props: ButtonProps,
-	ref: React.ForwardedRef<ButtonElement>
+	ref: React.ForwardedRef<ButtonElement>,
 ): JSX.Element => {
 	validateButton(props);
 	const common = {

core/src/button/color/failure.module.css

@@ -14,7 +14,9 @@
 :global(.dark) .outset {
 	color: var(--white);
 	background-color: var(--failure-5);
-	box-shadow: var(--shadow), var(--inset-shadow) var(--failure-4);
+	box-shadow:
+		var(--shadow),
+		var(--inset-shadow) var(--failure-4);
 	font-weight: 500;
 }
 

core/src/button/color/highlight.module.css

@@ -31,7 +31,9 @@
 :global(.dark) .outset {
 	color: var(--white);
 	background-color: var(--highlight-5);
-	box-shadow: var(--shadow), var(--inset-shadow) var(--highlight-4);
+	box-shadow:
+		var(--shadow),
+		var(--inset-shadow) var(--highlight-4);
 	font-weight: 500;
 }
 

core/src/button/color/none.module.css

@@ -25,7 +25,9 @@
 :global(.light) .outset {
 	--shadow: var(--shadow-size) rgba(0, 0, 0, 0.1);
 	background-color: var(--gray-0);
-	box-shadow: var(--shadow), var(--inset-shadow) var(--white);
+	box-shadow:
+		var(--shadow),
+		var(--inset-shadow) var(--white);
 	border-color: var(--gray-2);
 }
 :global(.light) .outset:hover {
@@ -39,7 +41,9 @@
 :global(.dark) .outset {
 	--shadow: var(--shadow-size) rgba(0, 0, 0, 0.5);
 	background-color: var(--gray-6);
-	box-shadow: var(--shadow), var(--inset-shadow) var(--gray-5);
+	box-shadow:
+		var(--shadow),
+		var(--inset-shadow) var(--gray-5);
 	border-color: var(--black);
 }
 :global(.dark) .outset:hover {

core/src/button/style/flat.module.css

@@ -1,5 +1,7 @@
 .main {
-	transition: background-color 0.1s, outline 0.2s ease-out;
+	transition:
+		background-color 0.1s,
+		outline 0.2s ease-out;
 	border-radius: 0;
 	/* To have same layout with outset buttons */
 	border: solid 1px transparent;

core/src/button/style/outset.module.css

@@ -1,5 +1,8 @@
 .main {
-	transition: background-color 0.1s, box-shadow 0.1s, outline 0.2s ease-out;
+	transition:
+		background-color 0.1s,
+		box-shadow 0.1s,
+		outline 0.2s ease-out;
 	border: solid 1px transparent;
 	--shadow-size: 0px 0.5px 2px;
 	--inset-shadow: inset 0px 1px 0px;

core/src/checkbox/checkbox.tsx

@@ -147,7 +147,7 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => {
 			/>
 			<span
 				className={[shared.icon, style.icon, self.indeterminate].join(
-					" "
+					" ",
 				)}
 				children={<Icon display="block" component={coreIcons.dash} />}
 			/>

core/src/checkbox/outset.module.css

@@ -1,5 +1,8 @@
 .input {
-	transition: background-color 0.1s, box-shadow 0.1s, outline 0.2s ease-out;
+	transition:
+		background-color 0.1s,
+		box-shadow 0.1s,
+		outline 0.2s ease-out;
 	border: solid 1px transparent;
 	--shadow-size: 0px 0.5px 2px;
 	--inset-shadow: inset 0px 1px 0px;
@@ -10,7 +13,9 @@
 :global(.light) .input {
 	--shadow: var(--shadow-size) rgba(0, 0, 0, 0.1);
 	background-color: var(--gray-0);
-	box-shadow: var(--shadow), var(--inset-shadow) var(--white);
+	box-shadow:
+		var(--shadow),
+		var(--inset-shadow) var(--white);
 	border-color: var(--gray-2);
 }
 :global(.light) .input:hover {
@@ -24,7 +29,9 @@
 :global(.dark) .input {
 	--shadow: var(--shadow-size) rgba(0, 0, 0, 0.3);
 	background-color: var(--gray-6);
-	box-shadow: var(--shadow), var(--inset-shadow) var(--gray-5);
+	box-shadow:
+		var(--shadow),
+		var(--inset-shadow) var(--gray-5);
 	border-color: var(--black);
 }
 :global(.dark) .input:hover {
@@ -42,7 +49,9 @@
 :global(.dark) .input:checked,
 :global(.dark) .input[type="checkbox"]:indeterminate {
 	background-color: var(--highlight-5);
-	box-shadow: var(--shadow), var(--inset-shadow) var(--highlight-4);
+	box-shadow:
+		var(--shadow),
+		var(--inset-shadow) var(--highlight-4);
 }
 
 :global(.light) .input:checked,