Feat(root): Apply Eslint and Integrate with Prettier

.eslintrc.json

@@ -0,0 +1,30 @@
+{
+	"root": true,
+	"parser": "@typescript-eslint/parser",
+	"plugins": ["@typescript-eslint"],
+	"ignorePatterns": ["node_modules", "dist"],
+	"extends": [
+		"eslint:recommended",
+		"plugin:@typescript-eslint/recommended",
+		"plugin:react/recommended",
+		// Must be last: https://github.com/prettier/eslint-config-prettier
+		"prettier"
+	],
+	"parserOptions": {
+		"project": "./tsconfig.json"
+	},
+	"rules": {
+		// https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint
+		"react/jsx-uses-react": "off",
+		"react/react-in-jsx-scope": "off",
+		// This allows us to shorten some simple children definition
+		"react/no-children-prop": "off",
+		// We allow inline component definition
+		"react/display-name": "off"
+	},
+	"settings": {
+		"react": {
+			"version": "17"
+		}
+	}
+}

.github/workflows/node.js.yml

@@ -4,26 +4,25 @@
 name: Node.js CI
 
 on:
-  push:
-    branches: [ main ]
-  pull_request:
-    branches: [ main ]
+    push:
+        branches: [main]
+    pull_request:
+        branches: [main]
 
 jobs:
-  build:
+    build:
+        runs-on: ubuntu-latest
 
-    runs-on: ubuntu-latest
+        strategy:
+            matrix:
+                node-version: [15.x]
+                # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
-    strategy:
-      matrix:
-        node-version: [15.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
-    steps:
-    - uses: actions/checkout@v2
-    - name: Use Node.js 15.x
-      uses: actions/setup-node@v1
-      with:
-        node-version: 15.x
-    - run: yarn install
-    - run: yarn test
+        steps:
+            - uses: actions/checkout@v2
+            - name: Use Node.js 15.x
+              uses: actions/setup-node@v1
+              with:
+                  node-version: 15.x
+            - run: yarn install
+            - run: yarn test

.prettierignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.next
+.vercel

.prettierrc.json

@@ -0,0 +1,4 @@
+{
+	"tabWidth": 4,
+	"useTabs": true
+}

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

@@ -1,3 +1,5 @@
+/* eslint-env node */
+
 import cssPrefix from "autoprefixer";
 import copy from "rollup-plugin-copy";
 import del from "rollup-plugin-delete";
@@ -28,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",
 	],
@@ -60,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
@@ -76,7 +79,4 @@ const bundleGallery = {
 	],
 };
 
-export default [
-	bundleMain,
-	bundleGallery
-];
+export default [bundleMain, bundleGallery];

core/scripts/report.js

@@ -1,3 +1,4 @@
+/* eslint-disable */
 const cp = require("child_process");
 
 const files = [

core/src/_gallery/container/dialog.tsx

@@ -14,7 +14,9 @@ const Pane = () => (
 			<div className={s.flex}>
 				<M.Button minWidth>Cancel</M.Button>
 				<M.DivPx size={8} />
-				<M.Button minWidth highlight>Publish</M.Button>
+				<M.Button minWidth highlight>
+					Publish
+				</M.Button>
 			</div>
 		</M.Dialog.Footer>
 	</M.Dialog.Pane>
@@ -31,7 +33,7 @@ const prompt = async () => {
 	M.Dialog.alert(`Post "${title}" is published!`);
 };
 
-export const GalleryContainerDialog = () => (
+export const GalleryContainerDialog = (): JSX.Element => (
 	<div>
 		<div className={s.flex}>
 			<M.Button fill onClick={alert} children="Alert" />

core/src/_gallery/container/pane.tsx

@@ -48,7 +48,7 @@ const MenuColumn = () => (
 	</div>
 );
 
-export const GalleryContainerPane = () => (
+export const GalleryContainerPane = (): JSX.Element => (
 	<div className={s.flex}>
 		<PopoverColumn />
 		<M.DivPx size={16} />

core/src/_gallery/feedback/tag.tsx

@@ -1,6 +1,11 @@
 import { DivPx, Tag } from "..";
 import s from "../styles.module.css";
 
+const getColor = (color: string): string => {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	return (Tag.colors as any)[color];
+};
+
 export const GalleryFeedbackTag = (): JSX.Element => (
 	<div>
 		<div>
@@ -14,7 +19,7 @@ export const GalleryFeedbackTag = (): JSX.Element => (
 		>
 			{Object.keys(Tag.colors).map((color) => (
 				<div key={color} className={s.p4}>
-					<Tag color={(Tag.colors as any)[color]} children={color} />
+					<Tag color={getColor(color)} children={color} />
 				</div>
 			))}
 		</div>

core/src/_gallery/feedback/toast.tsx

@@ -1,7 +1,8 @@
 import { DivPx, Button, toast, ToastPane } from "..";
+import { Dialog } from "../../dialog/dialog";
 import s from "../styles.module.css";
 
-const noop = () => {};
+const noop = () => Dialog.alert("Noop");
 
 export const GalleryFeedbackToast = (): JSX.Element => (
 	<div>

core/src/_gallery/feedback/tooltip.tsx

@@ -1,6 +1,6 @@
 import { DivPx, Button, Tooltip, TooltipPane } from "..";
 
-export const GalleryFeedbackTooltip = () => (
+export const GalleryFeedbackTooltip = (): JSX.Element => (
 	<div>
 		<Tooltip content="Sample Tooltip">
 			<Button.Forwarded children="Hover to show a Tooltip" />

core/src/_gallery/selection/pagination.tsx

@@ -4,7 +4,7 @@ import { useCallback, useState } from "react";
 export const GallerySelectionPagination = (): JSX.Element => {
 	const [page, setPage_] = useState(5);
 	const setPage = useCallback((page): Promise<void> => {
-		return new Promise((resolve, _reject) => {
+		return new Promise((resolve) => {
 			setPage_(page);
 			window.setTimeout(() => resolve(), 1000);
 		});

core/src/_gallery/tab/tab.tsx

@@ -27,13 +27,13 @@ const tabs: Tab[] = [
 	{ id: "3", title: "Third", pane: Third },
 ];
 
-export const GalleryTabDefault = () => <Tabs children={tabs} />;
+export const GalleryTabDefault = (): JSX.Element => <Tabs children={tabs} />;
 
-export const GalleryTabFlat = () => (
+export const GalleryTabFlat = (): JSX.Element => (
 	<Tabs children={tabs} style={Tabs.styles.flat} />
 );
 
-export const GalleryTabHeight = () => (
+export const GalleryTabHeight = (): JSX.Element => (
 	<div style={{ height: 240 }}>
 		<Tabs children={tabs} fullHeight />
 	</div>