Refactor(all): Apply ESLint and Prettier

core/docs/proper-start.stories.mdx

@@ -7,7 +7,7 @@ import { Meta } from "@storybook/addon-docs/blocks";
 If you are in a hurry, see the [Quick Start] instead. This page covers the same
 steps but with more explanation and tips.
 
-[Quick Start]: /?path=/docs/quick-start--page
+[quick start]: /?path=/docs/quick-start--page
 
 ## 1. Install
 
@@ -19,18 +19,18 @@ Install it with your package manager:
 yarn add @moai/core
 ```
 
-- It has [react] and [react-dom] as peer dependencies, so make sure they are
-installed. (Which is usually the case if you use a framework like [Next.js] or
-[CRA].)
-- Moai is written entirely in TypeScript (strict mode!) so all typings are
-bundled in the packages.
+-   It has [react] and [react-dom] as peer dependencies, so make sure they are
+    installed. (Which is usually the case if you use a framework like [Next.js] or
+    [CRA].)
+-   Moai is written entirely in TypeScript (strict mode!) so all typings are
+    bundled in the packages.
 
 [typing]: https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html
 [react]: https://www.npmjs.com/package/react
 [react-dom]: https://www.npmjs.com/package/react-dom
 [@moai/core]: https://www.npmjs.com/package/@moai/core
-[Next.js]: https://nextjs.org/
-[CRA]: https://create-react-app.dev/
+[next.js]: https://nextjs.org/
+[cra]: https://create-react-app.dev/
 
 ## 2. Setup
 
@@ -45,35 +45,35 @@ in the "core" package.
 import "@moai/core/dist/bundle.css";
 ```
 
-- In Next.js, use the [custom App]. In CRA, use `src/index`.
-- The bundled CSS contains a [simple reset], so it's best to not include
-another one.
-- All CSS for components use [CSS Modules]. This means all class names are
-scoped so you can use other class-based libraries like [Tailwind CSS] or
-[Tachyons] without worrying about naming conflict.
+-   In Next.js, use the [custom App]. In CRA, use `src/index`.
+-   The bundled CSS contains a [simple reset], so it's best to not include
+    another one.
+-   All CSS for components use [CSS Modules]. This means all class names are
+    scoped so you can use other class-based libraries like [Tailwind CSS] or
+    [Tachyons] without worrying about naming conflict.
 
 [simple reset]: https://github.com/moaijs/moai/blob/main/core/src/global.css
-[CSS Modules]: https://github.com/css-modules/css-modules
-[Tailwind CSS]: https://tailwindcss.com
-[Tachyons]: https://tachyons.io/
-[custom App]: https://nextjs.org/docs/advanced-features/custom-app
+[css modules]: https://github.com/css-modules/css-modules
+[tailwind css]: https://tailwindcss.com
+[tachyons]: https://tachyons.io/
+[custom app]: https://nextjs.org/docs/advanced-features/custom-app
 
 ### 2.2. Theme
 
 Moai comes with both light and dark themes out of the box. However, there is no
 default, so you must explicitly set a class on your `html` tag to specify the
 theme: either `light` or `dark`.
 
-- To avoid a [FOUC], ensure that your `html` tag has the class in the initial
-render. This is usually done via a "template" file. In CRA, for example, set it
-in [`public/index.html`].
-- In Next.js, we recommend the [`next-themes`] package. It allows your users
-to change the theme, including a "system" option, without any flashing in
-initial render.
+-   To avoid a [FOUC], ensure that your `html` tag has the class in the initial
+    render. This is usually done via a "template" file. In CRA, for example, set it
+    in [`public/index.html`].
+-   In Next.js, we recommend the [`next-themes`] package. It allows your users
+    to change the theme, including a "system" option, without any flashing in
+    initial render.
 
-[custom Document]: https://nextjs.org/docs/advanced-features/custom-document
+[custom document]: https://nextjs.org/docs/advanced-features/custom-document
 [`public/index.html`]: https://create-react-app.dev/docs/using-the-public-folder/#changing-the-html
-[FOUC]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content
+[fouc]: https://en.wikipedia.org/wiki/Flash_of_unstyled_content
 [`next-themes`]: https://github.com/pacocoursey/next-themes
 
 ### 2.3. Font (Optional)
@@ -90,20 +90,20 @@ Inter instead:
 import "@moai/core/dist/font/remote.css";
 ```
 
-- Moai uses the [variable] version of Inter. Check browser compatibility if you
-need to support old browsers.
-- If your app cannot make network requests, replace "remote" with "local" in the
-path above to use a bundled version of Inter. This may require a [special
-setup].
-- It is NOT recommended to use the version on Google Fonts since it lost many
-[OpenType features].
+-   Moai uses the [variable] version of Inter. Check browser compatibility if you
+    need to support old browsers.
+-   If your app cannot make network requests, replace "remote" with "local" in the
+    path above to use a bundled version of Inter. This may require a [special
+    setup].
+-   It is NOT recommended to use the version on Google Fonts since it lost many
+    [OpenType features].
 
 [system fonts]: https://github.com/moaijs/moai/blob/d3c7c957016b0a8de7838c35fe309384154f9f40/core/src/global.css#L54-L55
-[San Francisco]: https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface)
-[Inter]: https://rsms.me/inter/
+[san francisco]: https://en.wikipedia.org/wiki/San_Francisco_(sans-serif_typeface)
+[inter]: https://rsms.me/inter/
 [variable]: https://en.wikipedia.org/wiki/Variable_font
 [instruction]: https://rsms.me/inter/#usage
-[OpenType features]: https://en.wikipedia.org/wiki/List_of_typographic_features
+[opentype features]: https://en.wikipedia.org/wiki/List_of_typographic_features
 [special setup]: https://webpack.js.org/guides/asset-management/#loading-fonts
 
 ## 3. Use the components
@@ -114,16 +114,14 @@ components are exported at the top level:
 ```tsx
 import { Button } from "@moai/core";
 
-export const Foo = (): JSX.Element => (
-	<Button>Hello</Button>
-);
+export const Foo = (): JSX.Element => <Button>Hello</Button>;
 ```
 
-- Moai is distributed with an [ES6 module] version. If you are using an
-ES6-aware bundler (such as [Rollup] or [Webpack 2+]), your app won't contain
-the whole Moai library but only the components that you used, which may
-significantly reduce your app size.
+-   Moai is distributed with an [ES6 module] version. If you are using an
+    ES6-aware bundler (such as [Rollup] or [Webpack 2+]), your app won't contain
+    the whole Moai library but only the components that you used, which may
+    significantly reduce your app size.
 
-[ES6 module]: https://github.com/rollup/rollup/wiki/pkg.module
-[Rollup]: https://rollupjs.org/guide/en/
-[Webpack 2+]: https://webpack.js.org/guides/tree-shaking/
+[es6 module]: https://github.com/rollup/rollup/wiki/pkg.module
+[rollup]: https://rollupjs.org/guide/en/
+[webpack 2+]: https://webpack.js.org/guides/tree-shaking/

core/rollup.config.js

@@ -30,10 +30,10 @@ const bundleMain = {
 	external: [
 		"@tippyjs/react/headless",
 		"focus-visible",
-		"react-dom",
 		"react-hot-toast",
 		"react-popper",
 		"react",
+		"react-dom",
 		"react/jsx-runtime",
 		"react-day-picker/DayPickerInput",
 	],
@@ -62,6 +62,7 @@ const bundleGallery = {
 	],
 	external: [
 		"react",
+		"react-dom",
 		"react/jsx-runtime",
 		// References to "root" folder is considered as external so that
 		// they will not be bundled inside the "gallery" module

core/src/_gallery/table/robots.ts

@@ -342,7 +342,7 @@ export const ROBOTS: Robot[] = [
 	},
 ];
 
-export const MATERIALS: string[] = ((): JSX.Element => {
+export const MATERIALS: string[] = (() => {
 	const set = new Set<string>();
 	ROBOTS.forEach((robot) => {
 		robot.materials.forEach((material) => {

core/src/index.ts

@@ -22,7 +22,6 @@ export * from "./pane/pane";
 export * from "./popover/popover";
 export * from "./progress/circle";
 export * from "./radio/radio";
-export * from "./range/range";
 export * from "./scrollbar/scrollbar";
 export * from "./select/select";
 export * from "./step/step";

core/src/popover/pane/pane.tsx

@@ -83,10 +83,6 @@ PopoverPane.styles = {
 			border.strong,
 			background.strong,
 		].join(" "),
-		arrow: [
-			border.px1,
-			border.strong,
-			background.strong
-		].join(" "),
+		arrow: [border.px1, border.strong, background.strong].join(" "),
 	},
 };