fix lint

fix lint

fix lint

.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

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/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,

core/src/date-input/date-input.tsx

@@ -114,13 +114,13 @@
 // /**
 //  * A date input is a control for users to enter a date, either by typing it or
 //  * choosing from a pop-up calendar.
-//  * 
+//  *
 //  * The Date Input component is based on [React Day Picker][3], as an
 //  * alternative to the built-in `<Input type="date" />`. It works on
 //  * [unsupported browsers][2] and can display custom date format (e.g. "dmy" or
 //  * "mdy"). If you don't need these features, use [Input][1] to have better
 //  * accessibility support.
- 
+
 //  * [1]: /docs/components-input--primary#date
 //  * [2]: https://caniuse.com/input-datetime
 //  * [3]: https://react-day-picker.js.org

core/src/dialog/native/alert.tsx

@@ -32,7 +32,7 @@ export const dialogAlert = (
 	message: React.ReactNode,
 	options?: {
 		width?: DialogProps["width"];
-	}
+	},
 ): Promise<void> => {
 	return new Promise((resolve) => {
 		renderDialog((unmount) => (

core/src/dialog/native/confirm.tsx

@@ -34,7 +34,7 @@ export const dialogConfirm = (
 	message: React.ReactNode,
 	options?: {
 		width?: DialogProps["width"];
-	}
+	},
 ): Promise<boolean> => {
 	return new Promise((resolve) => {
 		renderDialog((unmount) => (

core/src/dialog/native/prompt.tsx

@@ -60,7 +60,7 @@ export const dialogPrompt = (
 	options?: {
 		width?: Props["width"];
 		rows?: Props["rows"];
-	}
+	},
 ): Promise<string | null> => {
 	return new Promise((resolve) => {
 		renderDialog((unmount) => (

core/src/form/field.tsx

@@ -19,6 +19,6 @@ export const FormField = (props: Props): JSX.Element => {
 			{label}
 		</span>,
 		<DivPx size={8} />,
-		<span className={s.input}>{children}</span>
+		<span className={s.input}>{children}</span>,
 	);
 };

core/src/icons/blank-icon.tsx

@@ -2,6 +2,6 @@ import { GenIcon, IconBaseProps, IconType } from "react-icons";
 
 export const BlankIcon: IconType = (props: IconBaseProps): JSX.Element => {
 	return GenIcon({ tag: "svg", attr: { viewBox: "0 0 16 16" }, child: [] })(
-		props
+		props,
 	);
 };

core/src/index.ts

@@ -36,4 +36,3 @@ export * from "./time-input/time-input";
 export * from "./toast/toast";
 export * from "./tooltip/tooltip";
 export * from "./tree/tree";
-

core/src/input/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;
 
 	/* Pretty much nothing in normal state */
 	text-align: inherit;

core/src/input/input.tsx

@@ -119,7 +119,7 @@ const validate = (props: InputProps): void => {
 
 const inputRender = (
 	props: InputProps,
-	ref: React.ForwardedRef<HTMLInputElement>
+	ref: React.ForwardedRef<HTMLInputElement>,
 ): JSX.Element => {
 	validate(props);
 	const size = props.size ?? Input.sizes.medium;

core/src/input/outset.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-width: 1px;
 	border-style: solid;

core/src/pagination/pagination.tsx

@@ -51,7 +51,7 @@ export const Pagination = (props: PaginationProps): JSX.Element => {
 			await setValueOrg(value);
 			setBusy(false);
 		},
-		[setValueOrg, max, min]
+		[setValueOrg, max, min],
 	);
 
 	return (

core/src/pane/pane.tsx

@@ -44,6 +44,6 @@ export const Pane = (props: Props): JSX.Element => (
 
 Pane.styles = {
 	outset: [border.px1, background.strong, border.strong, shadow.boxWeak].join(
-		" "
+		" ",
 	),
 };

core/src/progress/circle.tsx

@@ -42,7 +42,7 @@ const getViewBox = (strokeWidth: number) => {
 const getStroke = (props: ProgressCircleProps) => {
 	const width = Math.min(
 		MIN_STROKE_WIDTH,
-		(STROKE_WIDTH * SIZE_LARGE) / props.size
+		(STROKE_WIDTH * SIZE_LARGE) / props.size,
 	);
 	const value = props.value === "indeterminate" ? 0.25 : props.value;
 	const offset = PATH_LENGTH - PATH_LENGTH * value;

core/src/step/step.tsx

@@ -60,7 +60,7 @@ export const Steps = (props: Props): JSX.Element => {
 				index={index}
 				current={props.current}
 			/>,
-			<Divider key={`${index}-divider`} />
+			<Divider key={`${index}-divider`} />,
 		);
 	});
 	children.pop();

core/src/table/actions/actions.tsx

@@ -8,27 +8,26 @@ import s from "./actions.module.css";
 
 const renderActions =
 	<R,>(props: TableProps<R>, state: TableState) =>
-	(_row: R, _index: number, rowKey: string): JSX.Element =>
-		(
-			<div className={s.container}>
-				{props.selectable !== undefined && (
-					<TableSelectableControl
-						rowKey={rowKey}
-						selectable={props.selectable}
-					/>
-				)}
-				{props.expandable !== undefined && (
-					<TableExpandableControl
-						rowKey={rowKey}
-						expandable={state.expandable}
-					/>
-				)}
-			</div>
-		);
+	(_row: R, _index: number, rowKey: string): JSX.Element => (
+		<div className={s.container}>
+			{props.selectable !== undefined && (
+				<TableSelectableControl
+					rowKey={rowKey}
+					selectable={props.selectable}
+				/>
+			)}
+			{props.expandable !== undefined && (
+				<TableExpandableControl
+					rowKey={rowKey}
+					expandable={state.expandable}
+				/>
+			)}
+		</div>
+	);
 
 export const getTableActionsColumn = <R,>(
 	props: TableProps<R>,
-	state: TableState
+	state: TableState,
 ): TableColumn<R> => ({
 	className: s.column,
 	title: "",

core/src/table/actions/selectable/state.tsx

@@ -22,7 +22,7 @@ export interface TableSelectableProps<T extends TableSelected> {
 
 export const isTableRowSelected = (
 	selected: TableSelected | undefined,
-	rowKey: string
+	rowKey: string,
 ): boolean => {
 	if (selected === undefined) return false;
 	if (typeof selected === "string") return selected === rowKey;

core/src/table/body/cell.tsx

@@ -17,9 +17,11 @@ interface Props<R> {
 export const TableBodyCell = <R,>(props: Props<R>): JSX.Element => {
 	const { column, row } = props;
 	const children =
-		typeof column.render === "function"
-			? <>{column.render(row, props.rowIndex, props.rowKey)}</> // Render function
-			: <>{row[column.render]}</>; // Accessor
+		typeof column.render === "function" ? (
+			<>{column.render(row, props.rowIndex, props.rowKey)}</> // Render function
+		) : (
+			<>{row[column.render]}</>
+		); // Accessor
 	const columnMeta = props.tableState.columnMetaMap.get(props.columnIndex);
 	return (
 		<td

core/src/table/column/column.ts

@@ -16,7 +16,7 @@ export type TableColumnMetaMap = Map<number, TableColumnMeta>;
 // These meta info can be calculated in each cell, but we put it here so it
 // can be calculated once for each table
 export const getTableColumnMetaMap = <R>(
-	props: TableProps<R>
+	props: TableProps<R>,
 ): TableColumnMetaMap => {
 	// We only have fixed meta for now. If we have more in the future, we should
 	// merge them here

core/src/table/fixed/fixed.ts

@@ -21,7 +21,7 @@ import { TableProps } from "../table";
 import s from "./fixed.module.css";
 
 export const getTableFixedMetaMap = <R>(
-	props: TableProps<R>
+	props: TableProps<R>,
 ): TableColumnMetaMap => {
 	const map: TableColumnMetaMap = new Map();
 	if (props.fixed === undefined) return map;

core/src/text-area/text-area.tsx

@@ -65,7 +65,7 @@ interface TextAreaComponent
 
 const renderTextArea = (
 	props: TextAreaProps,
-	ref: React.ForwardedRef<HTMLTextAreaElement>
+	ref: React.ForwardedRef<HTMLTextAreaElement>,
 ): JSX.Element => {
 	const rawProps = omit(props, [
 		"className",

core/src/toast/container/container.tsx

@@ -1,4 +1,8 @@
-import toastController, { Toast as RHTToast, ToastType as RHTToastType, useToaster as useRHTToaster } from "react-hot-toast";
+import toastController, {
+	Toast as RHTToast,
+	ToastType as RHTToastType,
+	useToaster as useRHTToaster,
+} from "react-hot-toast";
 import { ToastPane, ToastPaneType } from "../pane/pane";
 import s from "./container.module.css";