diff --git a/.github/DEVELOP.md b/.github/DEVELOP.md index ca131022..96f984d1 100644 --- a/.github/DEVELOP.md +++ b/.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: diff --git a/.github/workflows/node.js.yml b/.github/workflows/node.js.yml index c1d5c9dc..4ad1f623 100644 --- a/.github/workflows/node.js.yml +++ b/.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 diff --git a/README.md b/README.md index c68903ae..b71310c6 100644 --- a/README.md +++ b/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)
diff --git a/core/src/button/button.tsx b/core/src/button/button.tsx index f6e25303..fe4acbbf 100644 --- a/core/src/button/button.tsx +++ b/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 + ref: React.ForwardedRef, ): JSX.Element => { validateButton(props); const common = { diff --git a/core/src/button/color/failure.module.css b/core/src/button/color/failure.module.css index 3e95fe2b..7240da34 100644 --- a/core/src/button/color/failure.module.css +++ b/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; } diff --git a/core/src/button/color/highlight.module.css b/core/src/button/color/highlight.module.css index 66a96035..abc50e55 100644 --- a/core/src/button/color/highlight.module.css +++ b/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; } diff --git a/core/src/button/color/none.module.css b/core/src/button/color/none.module.css index 02877f4c..2a34fedc 100644 --- a/core/src/button/color/none.module.css +++ b/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 { diff --git a/core/src/button/style/flat.module.css b/core/src/button/style/flat.module.css index f6dd211c..25612c69 100644 --- a/core/src/button/style/flat.module.css +++ b/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; diff --git a/core/src/button/style/outset.module.css b/core/src/button/style/outset.module.css index 8cd2a284..53ac471c 100644 --- a/core/src/button/style/outset.module.css +++ b/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; diff --git a/core/src/checkbox/checkbox.tsx b/core/src/checkbox/checkbox.tsx index 09711a29..1bbc1928 100644 --- a/core/src/checkbox/checkbox.tsx +++ b/core/src/checkbox/checkbox.tsx @@ -147,7 +147,7 @@ export const Checkbox = (props: CheckboxProps): JSX.Element => { /> } /> diff --git a/core/src/checkbox/outset.module.css b/core/src/checkbox/outset.module.css index 9d4ef8fa..c6ce2e33 100644 --- a/core/src/checkbox/outset.module.css +++ b/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, diff --git a/core/src/date-input/date-input.tsx b/core/src/date-input/date-input.tsx index a7b6eafc..41cf65ae 100644 --- a/core/src/date-input/date-input.tsx +++ b/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 ``. 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 diff --git a/core/src/dialog/native/alert.tsx b/core/src/dialog/native/alert.tsx index 67442b4c..6cbd5e2a 100644 --- a/core/src/dialog/native/alert.tsx +++ b/core/src/dialog/native/alert.tsx @@ -32,7 +32,7 @@ export const dialogAlert = ( message: React.ReactNode, options?: { width?: DialogProps["width"]; - } + }, ): Promise => { return new Promise((resolve) => { renderDialog((unmount) => ( diff --git a/core/src/dialog/native/confirm.tsx b/core/src/dialog/native/confirm.tsx index 65298fb5..e1a43cf1 100644 --- a/core/src/dialog/native/confirm.tsx +++ b/core/src/dialog/native/confirm.tsx @@ -34,7 +34,7 @@ export const dialogConfirm = ( message: React.ReactNode, options?: { width?: DialogProps["width"]; - } + }, ): Promise => { return new Promise((resolve) => { renderDialog((unmount) => ( diff --git a/core/src/dialog/native/prompt.tsx b/core/src/dialog/native/prompt.tsx index 36c7931a..d8c5589e 100644 --- a/core/src/dialog/native/prompt.tsx +++ b/core/src/dialog/native/prompt.tsx @@ -60,7 +60,7 @@ export const dialogPrompt = ( options?: { width?: Props["width"]; rows?: Props["rows"]; - } + }, ): Promise => { return new Promise((resolve) => { renderDialog((unmount) => ( diff --git a/core/src/form/field.tsx b/core/src/form/field.tsx index 06191674..76b61fd1 100644 --- a/core/src/form/field.tsx +++ b/core/src/form/field.tsx @@ -19,6 +19,6 @@ export const FormField = (props: Props): JSX.Element => { {label} , , - {children} + {children}, ); }; diff --git a/core/src/icons/blank-icon.tsx b/core/src/icons/blank-icon.tsx index 61f244a3..53109d64 100644 --- a/core/src/icons/blank-icon.tsx +++ b/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, ); }; diff --git a/core/src/index.ts b/core/src/index.ts index 14ed4969..13286d79 100644 --- a/core/src/index.ts +++ b/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"; - diff --git a/core/src/input/flat.module.css b/core/src/input/flat.module.css index 752e08c1..c809e28a 100644 --- a/core/src/input/flat.module.css +++ b/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; diff --git a/core/src/input/input.tsx b/core/src/input/input.tsx index 39e06850..ced9928e 100644 --- a/core/src/input/input.tsx +++ b/core/src/input/input.tsx @@ -119,7 +119,7 @@ const validate = (props: InputProps): void => { const inputRender = ( props: InputProps, - ref: React.ForwardedRef + ref: React.ForwardedRef, ): JSX.Element => { validate(props); const size = props.size ?? Input.sizes.medium; diff --git a/core/src/input/outset.module.css b/core/src/input/outset.module.css index c9c5ab2d..b6634d72 100644 --- a/core/src/input/outset.module.css +++ b/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; diff --git a/core/src/pagination/pagination.tsx b/core/src/pagination/pagination.tsx index 68b04b87..e3e959fe 100644 --- a/core/src/pagination/pagination.tsx +++ b/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 ( diff --git a/core/src/pane/pane.tsx b/core/src/pane/pane.tsx index ba641b6e..fb45039a 100644 --- a/core/src/pane/pane.tsx +++ b/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( - " " + " ", ), }; diff --git a/core/src/progress/circle.tsx b/core/src/progress/circle.tsx index 646e5988..ec24ee5c 100644 --- a/core/src/progress/circle.tsx +++ b/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; diff --git a/core/src/step/step.tsx b/core/src/step/step.tsx index 72bbddc5..d58d50de 100644 --- a/core/src/step/step.tsx +++ b/core/src/step/step.tsx @@ -60,7 +60,7 @@ export const Steps = (props: Props): JSX.Element => { index={index} current={props.current} />, - + , ); }); children.pop(); diff --git a/core/src/table/actions/actions.tsx b/core/src/table/actions/actions.tsx index 7bcc3af9..1bc8867f 100644 --- a/core/src/table/actions/actions.tsx +++ b/core/src/table/actions/actions.tsx @@ -8,27 +8,26 @@ import s from "./actions.module.css"; const renderActions = (props: TableProps, state: TableState) => - (_row: R, _index: number, rowKey: string): JSX.Element => - ( -
- {props.selectable !== undefined && ( - - )} - {props.expandable !== undefined && ( - - )} -
- ); + (_row: R, _index: number, rowKey: string): JSX.Element => ( +
+ {props.selectable !== undefined && ( + + )} + {props.expandable !== undefined && ( + + )} +
+ ); export const getTableActionsColumn = ( props: TableProps, - state: TableState + state: TableState, ): TableColumn => ({ className: s.column, title: "", diff --git a/core/src/table/actions/selectable/state.tsx b/core/src/table/actions/selectable/state.tsx index 97272cf1..0b76b386 100644 --- a/core/src/table/actions/selectable/state.tsx +++ b/core/src/table/actions/selectable/state.tsx @@ -22,7 +22,7 @@ export interface TableSelectableProps { export const isTableRowSelected = ( selected: TableSelected | undefined, - rowKey: string + rowKey: string, ): boolean => { if (selected === undefined) return false; if (typeof selected === "string") return selected === rowKey; diff --git a/core/src/table/body/cell.tsx b/core/src/table/body/cell.tsx index 1b18f36a..25cb55e0 100644 --- a/core/src/table/body/cell.tsx +++ b/core/src/table/body/cell.tsx @@ -17,9 +17,11 @@ interface Props { export const TableBodyCell = (props: Props): 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 ( ; // 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 = ( - props: TableProps + props: TableProps, ): TableColumnMetaMap => { // We only have fixed meta for now. If we have more in the future, we should // merge them here diff --git a/core/src/table/fixed/fixed.ts b/core/src/table/fixed/fixed.ts index 204c5420..b8de5b5f 100644 --- a/core/src/table/fixed/fixed.ts +++ b/core/src/table/fixed/fixed.ts @@ -21,7 +21,7 @@ import { TableProps } from "../table"; import s from "./fixed.module.css"; export const getTableFixedMetaMap = ( - props: TableProps + props: TableProps, ): TableColumnMetaMap => { const map: TableColumnMetaMap = new Map(); if (props.fixed === undefined) return map; diff --git a/core/src/text-area/text-area.tsx b/core/src/text-area/text-area.tsx index 8d05f94c..a33d1ae0 100644 --- a/core/src/text-area/text-area.tsx +++ b/core/src/text-area/text-area.tsx @@ -65,7 +65,7 @@ interface TextAreaComponent const renderTextArea = ( props: TextAreaProps, - ref: React.ForwardedRef + ref: React.ForwardedRef, ): JSX.Element => { const rawProps = omit(props, [ "className", diff --git a/core/src/toast/container/container.tsx b/core/src/toast/container/container.tsx index 0b33cacf..08d56ee5 100644 --- a/core/src/toast/container/container.tsx +++ b/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"; diff --git a/core/src/toast/toast.tsx b/core/src/toast/toast.tsx index 6982ad7e..d3573365 100644 --- a/core/src/toast/toast.tsx +++ b/core/src/toast/toast.tsx @@ -22,7 +22,7 @@ const init = async (resolve: (div: HTMLDivElement) => void): Promise => { export const toast = async ( type: ToastType, - message: string + message: string, ): Promise => { if (inited.current === false) await new Promise(init); type.handler(message); diff --git a/core/src/toast/type/type.ts b/core/src/toast/type/type.ts index d4ccd8bb..a5ca0a7d 100644 --- a/core/src/toast/type/type.ts +++ b/core/src/toast/type/type.ts @@ -1,7 +1,7 @@ import RHTToast from "react-hot-toast"; import { ToastPane, ToastPaneType } from "../pane/pane"; -type ToastHandler = typeof RHTToast["success"]; +type ToastHandler = (typeof RHTToast)["success"]; export interface ToastType { handler: ToastHandler; diff --git a/core/src/tree/tree.tsx b/core/src/tree/tree.tsx index a40dbe1b..1036aaac 100644 --- a/core/src/tree/tree.tsx +++ b/core/src/tree/tree.tsx @@ -75,15 +75,14 @@ export interface TreeProps { parentMode: "select" | "expand"; } -const renderChild = (treeProps: TreeProps) => (child: TreeNode) => - ( - - ); +const renderChild = (treeProps: TreeProps) => (child: TreeNode) => ( + +); export const Tree = (props: TreeProps): JSX.Element => { const expanded = props.expanded.has(props.node.id); diff --git a/core/src/tree/utils/refresh.ts b/core/src/tree/utils/refresh.ts index 401a3b88..d5386209 100644 --- a/core/src/tree/utils/refresh.ts +++ b/core/src/tree/utils/refresh.ts @@ -7,7 +7,7 @@ export interface RefreshTreeParams { } export const refreshTree = async ( - params: RefreshTreeParams + params: RefreshTreeParams, ): Promise => { const { loadChildren, node } = params; diff --git a/core/src/tree/utils/update.ts b/core/src/tree/utils/update.ts index 3ccf6b09..d4ec71cf 100644 --- a/core/src/tree/utils/update.ts +++ b/core/src/tree/utils/update.ts @@ -19,7 +19,7 @@ export interface UpdateTreeNodeParams { * version which can skip branches O(logN). */ export const updateTreeNode = ( - params: UpdateTreeNodeParams + params: UpdateTreeNodeParams, ): TreeNode => { const { current, id, key, value } = params; if (current.id === id) { diff --git a/core/src/utils/omit.ts b/core/src/utils/omit.ts index 6e4d15e8..dbf1eb23 100644 --- a/core/src/utils/omit.ts +++ b/core/src/utils/omit.ts @@ -3,14 +3,17 @@ type Keys = (keyof T)[]; interface OmitFunction { - >(obj: T, keys: K): { + >( + obj: T, + keys: K, + ): { [K2 in Exclude]: T[K2]; }; } export const omit: OmitFunction = (obj, keys) => { const ret = {} as { - [K in keyof typeof obj]: typeof obj[K]; + [K in keyof typeof obj]: (typeof obj)[K]; }; let key: keyof typeof obj; for (key in obj) { diff --git a/docs/src/color/background/background.tsx b/docs/src/color/background/background.tsx index 2da9f31c..c4b0b8d7 100644 --- a/docs/src/color/background/background.tsx +++ b/docs/src/color/background/background.tsx @@ -10,15 +10,14 @@ interface Row { const MakeColumn = (theme: "light" | "dark", text: string) => - (row: Row): JSX.Element => - ( -
- -
- ); + (row: Row): JSX.Element => ( +
+ +
+ ); const LightStrong = MakeColumn("light", text.normal); const LightWeak = MakeColumn("light", text.muted); diff --git a/docs/src/color/border/border.tsx b/docs/src/color/border/border.tsx index dcce464d..9dca1d11 100644 --- a/docs/src/color/border/border.tsx +++ b/docs/src/color/border/border.tsx @@ -10,15 +10,14 @@ interface Row { const MakeColumn = (theme: "light" | "dark", back: string) => - (row: Row): JSX.Element => - ( -
- -
- ); + (row: Row): JSX.Element => ( +
+ +
+ ); const LightStrong = MakeColumn("light", background.strong); const LightWeak = MakeColumn("light", background.weak); diff --git a/docs/src/color/sample/sample.tsx b/docs/src/color/sample/sample.tsx index ea966b0e..0a9ef3a0 100644 --- a/docs/src/color/sample/sample.tsx +++ b/docs/src/color/sample/sample.tsx @@ -23,7 +23,7 @@ const getColor = (contrast: number): CategoryColor => { const getContrast = ( props: Props, backElement: HTMLDivElement, - foreElement: HTMLElement + foreElement: HTMLElement, ): number => { const back = window.getComputedStyle(backElement).backgroundColor; const foreStyle = window.getComputedStyle(foreElement); diff --git a/docs/src/color/static/table.tsx b/docs/src/color/static/table.tsx index 34859caf..c896a51b 100644 --- a/docs/src/color/static/table.tsx +++ b/docs/src/color/static/table.tsx @@ -8,19 +8,17 @@ interface Props { const Color = (props: Props) => - (row: number): JSX.Element => - ( - // eslint-disable-next-line react/prop-types - - ); + (row: number): JSX.Element => ( + // eslint-disable-next-line react/prop-types + + ); const Name = (props: Props) => - (row: number): JSX.Element => - ( - // eslint-disable-next-line react/prop-types - - ); + (row: number): JSX.Element => ( + // eslint-disable-next-line react/prop-types + + ); export const ColorStaticTable = (props: Props): JSX.Element => (
diff --git a/docs/src/color/text/text.tsx b/docs/src/color/text/text.tsx index d3729577..d1a1a3e3 100644 --- a/docs/src/color/text/text.tsx +++ b/docs/src/color/text/text.tsx @@ -19,19 +19,18 @@ interface Row { const MakeColumn = (theme: "light" | "dark", back: string) => - (row: Row): JSX.Element => - ( -
- -
- ); + (row: Row): JSX.Element => ( +
+ +
+ ); const LightStrong = MakeColumn("light", background.strong); const LightWeak = MakeColumn("light", background.weak); diff --git a/docs/src/components/radio-group-fake.tsx b/docs/src/components/radio-group-fake.tsx index cdbf6c5d..a855c145 100644 --- a/docs/src/components/radio-group-fake.tsx +++ b/docs/src/components/radio-group-fake.tsx @@ -5,5 +5,5 @@ import { RadioOption } from "../../../core/src"; * ArgsTable to describe the RadioOption interface. */ export const RadioOptionComponent = ( - props: RadioOption + props: RadioOption, ): JSX.Element =>
{props.id}
; diff --git a/docs/src/components/select-fake.tsx b/docs/src/components/select-fake.tsx index ddb6e393..258f3bae 100644 --- a/docs/src/components/select-fake.tsx +++ b/docs/src/components/select-fake.tsx @@ -5,5 +5,5 @@ import { SelectOption } from "../../../core/src"; * ArgsTable to describe the SelectOption interface. */ export const SelectOptionComponent = ( - props: SelectOption + props: SelectOption, ): JSX.Element =>
{props.id}
; diff --git a/docs/src/components/switcher-fake.tsx b/docs/src/components/switcher-fake.tsx index c0c6daa6..5a111282 100644 --- a/docs/src/components/switcher-fake.tsx +++ b/docs/src/components/switcher-fake.tsx @@ -5,5 +5,5 @@ import { SwitcherOption } from "../../../core/src"; * ArgsTable to describe the Option interface. */ export const SwitcherOptionComponent = ( - props: SwitcherOption + props: SwitcherOption, ): JSX.Element =>
{props.key}
; diff --git a/docs/src/components/table-fake.tsx b/docs/src/components/table-fake.tsx index a7ed3f07..b98e9ba8 100644 --- a/docs/src/components/table-fake.tsx +++ b/docs/src/components/table-fake.tsx @@ -6,9 +6,9 @@ import { TableExpandableProps } from "../../../core/src"; * ArgsTable to describe the TableColumn interface. */ export const TableColumnComponent = ( - props: TableColumn + props: TableColumn, ): JSX.Element =>
{props.title}
; export const TableExpandableComponent = ( - props: TableExpandableProps + props: TableExpandableProps, ): JSX.Element =>
{props.render.length}
; diff --git a/gallery/scripts/example/generate.ts b/gallery/scripts/example/generate.ts index 9f8585db..5286396a 100644 --- a/gallery/scripts/example/generate.ts +++ b/gallery/scripts/example/generate.ts @@ -56,11 +56,11 @@ const main = async () => { fs.mkdir(distPath); fs.writeFile( path.resolve(distPath, "pokemons.json"), - JSON.stringify(pokemons, null, 2) + JSON.stringify(pokemons, null, 2), ); fs.writeFile( path.resolve(distPath, "types.json"), - JSON.stringify(types, null, 2) + JSON.stringify(types, null, 2), ); return pokemons; }; diff --git a/gallery/src/table/table.tsx b/gallery/src/table/table.tsx index 5c27f161..f5ba49a9 100644 --- a/gallery/src/table/table.tsx +++ b/gallery/src/table/table.tsx @@ -78,7 +78,7 @@ const MaterialsHeader = (): JSX.Element => ( diff --git a/test/.swcrc b/test/.swcrc index 30025bf1..9dad08e5 100644 --- a/test/.swcrc +++ b/test/.swcrc @@ -1,31 +1,31 @@ { - "jsc": { - "target": "es2017", - "parser": { - "syntax": "typescript", - "tsx": true, - "decorators": false, - "dynamicImport": false - }, - "transform": { - "react": { - "pragma": "React.createElement", - "pragmaFrag": "React.Fragment", - "throwIfNamespace": true, - "development": false, - "useBuiltins": false, - "runtime": "automatic" - }, - "hidden": { - "jest": true - } - } - }, - "module": { - "type": "commonjs", - "strict": false, - "strictMode": true, - "lazy": false, - "noInterop": false - } + "jsc": { + "target": "es2017", + "parser": { + "syntax": "typescript", + "tsx": true, + "decorators": false, + "dynamicImport": false + }, + "transform": { + "react": { + "pragma": "React.createElement", + "pragmaFrag": "React.Fragment", + "throwIfNamespace": true, + "development": false, + "useBuiltins": false, + "runtime": "automatic" + }, + "hidden": { + "jest": true + } + } + }, + "module": { + "type": "commonjs", + "strict": false, + "strictMode": true, + "lazy": false, + "noInterop": false + } } diff --git a/test/src/button.test.tsx b/test/src/button.test.tsx index 0c660c48..cbaf454e 100644 --- a/test/src/button.test.tsx +++ b/test/src/button.test.tsx @@ -57,11 +57,11 @@ describe("Button", () => { render( + />, ); expect( - screen.queryByRole("button", { name: buttonLabel }) + screen.queryByRole("button", { name: buttonLabel }), ).not.toBeInTheDocument(); const link = screen.getByRole("link", { name: buttonLabel }); expect(link).toHaveAttribute("rel", "noopener"); @@ -76,7 +76,7 @@ describe("Button", () => { rel: "noopener", onClick: onClickMockFn, }} - /> + />, ); const link = screen.getByRole("link", { name: buttonLabel }); userEvent.click(link); diff --git a/test/src/radio.test.tsx b/test/src/radio.test.tsx index d1a26918..d6efa181 100644 --- a/test/src/radio.test.tsx +++ b/test/src/radio.test.tsx @@ -9,7 +9,7 @@ describe("Testing Checkbox Uncontrolled Prop", () => { render( foo - + , ); const radioElement = screen.getByRole("radio"); @@ -23,7 +23,7 @@ describe("Testing Checkbox Disabled Prop", () => { render( foo - + , ); const radioElement = screen.getByRole("radio"); diff --git a/test/src/select.test.tsx b/test/src/select.test.tsx index 8a8f85d9..129ffc14 100644 --- a/test/src/select.test.tsx +++ b/test/src/select.test.tsx @@ -20,7 +20,7 @@ describe("Testing Select Uncontrolled Props", () => { defaultValue={"blue"} id="select" /> -
+ , ); const selectElement = screen.getByLabelText("select"); expect(selectElement).toHaveValue("blue"); @@ -71,7 +71,7 @@ describe("Testing Select Disabled Props", () => {