From 5d7149dfd90ddbb9fd325217f8258619eb59549c Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Sun, 20 Aug 2023 21:52:10 +0200 Subject: [PATCH 01/10] Replace 7z extraction with tar in extractMaterialSource.ts The extraction method in the extractMaterialSource.ts script has been replaced from 7z to tar. This change has been made to improve the compatibility of the script as tar is more universally supported across various systems as compared to 7z. Now, the source code extraction will occur without issues regardless of the system's architecture. --- scripts/actions/extractMaterialSource.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scripts/actions/extractMaterialSource.ts b/scripts/actions/extractMaterialSource.ts index 1ddde3a1a..df7ba71cf 100644 --- a/scripts/actions/extractMaterialSource.ts +++ b/scripts/actions/extractMaterialSource.ts @@ -1,5 +1,5 @@ -import { safeStat } from "./../util/fs"; -import { muiSourcePath } from "./../util/material-ui"; +import { safeStat } from "../util/fs"; +import { muiSourcePath } from "../util/material-ui"; import { spawn } from "child_process"; import { dirname } from "path"; @@ -11,7 +11,7 @@ async function extractMaterialSource(options: { version: string }) { console.log(`[${name}] Source code is already extracted`); } else { console.log(`[name] Extracting into ${targetPath}`); - const p = spawn("7z", ["x", "-y", zipPath, `-o${dirname(targetPath)}`], { + const p = spawn("tar", ["-xf", zipPath, "-C", dirname(targetPath)], { stdio: "inherit", }); await new Promise((resolve, reject) => { From 3d897c55fdbf25c682768f65249deb9002c43f50 Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Sun, 20 Aug 2023 22:07:38 +0200 Subject: [PATCH 02/10] Add material-lab package --- .gitignore | 3 +- package.json | 2 +- packages/material-lab/CHANGELOG.md | 10 +++++++ packages/material-lab/LICENSE | 22 ++++++++++++++ packages/material-lab/README.md | 20 +++++++++++++ packages/material-lab/package.json | 36 +++++++++++++++++++++++ packages/material-lab/src/index.tsx | 0 packages/material-lab/tsconfig.build.json | 28 ++++++++++++++++++ packages/material-lab/tsconfig.json | 25 ++++++++++++++++ 9 files changed, 144 insertions(+), 2 deletions(-) create mode 100644 packages/material-lab/CHANGELOG.md create mode 100644 packages/material-lab/LICENSE create mode 100644 packages/material-lab/README.md create mode 100644 packages/material-lab/package.json create mode 100644 packages/material-lab/src/index.tsx create mode 100644 packages/material-lab/tsconfig.build.json create mode 100644 packages/material-lab/tsconfig.json diff --git a/.gitignore b/.gitignore index 6f2652816..212e79223 100644 --- a/.gitignore +++ b/.gitignore @@ -9,4 +9,5 @@ dist lib node_modules temp -vite.config.js.timestamp* \ No newline at end of file +vite.config.js.timestamp* +.idea diff --git a/package.json b/package.json index 7b2549067..008bb2a71 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "suid", "version": "1.0.0", "private": true, - "description": "A port of Materia-UI (MUI) built with SolidJS.", + "description": "A port of Material-UI (MUI) built with SolidJS.", "keywords": [ "best_ecosystem", "components", diff --git a/packages/material-lab/CHANGELOG.md b/packages/material-lab/CHANGELOG.md new file mode 100644 index 000000000..b4cc1b9e0 --- /dev/null +++ b/packages/material-lab/CHANGELOG.md @@ -0,0 +1,10 @@ +# @suid/material-lab + +## 0.0.1 + +### Patch Changes + +- [`98c7388`](https://github.com/swordev/suid/commit/98c73884966a6cbd29a3b652b4d2f3251149ac4e) Thanks [@juanrgm](https://github.com/juanrgm)! - Fix errors + +- Updated dependencies [[`98c7388`](https://github.com/swordev/suid/commit/98c73884966a6cbd29a3b652b4d2f3251149ac4e)]: + - @suid/base@0.0.1 diff --git a/packages/material-lab/LICENSE b/packages/material-lab/LICENSE new file mode 100644 index 000000000..43f64a44b --- /dev/null +++ b/packages/material-lab/LICENSE @@ -0,0 +1,22 @@ +The MIT License (MIT) + +Copyright (c) 2022 Juanra GM +Copyright (c) 2014 Call-Em-All + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/material-lab/README.md b/packages/material-lab/README.md new file mode 100644 index 000000000..cda18730b --- /dev/null +++ b/packages/material-lab/README.md @@ -0,0 +1,20 @@ +# @suid/material-lab + +[![workflow-badge]](https://github.com/swordev/suid/actions/workflows/ci.yaml) [![npm-badge]](https://www.npmjs.com/package/@suid/material) + +[workflow-badge]: https://img.shields.io/github/actions/workflow/status/swordev/suid/ci.yaml?branch=main +[npm-badge]: https://img.shields.io/npm/v/@suid/material-lab?label=@suid/material-lab + +## Installation + +```sh +npm install @suid/material-lab +``` + +## Documentation + +https://suid.io + +## License + +Distributed under the MIT License. See LICENSE for more information. diff --git a/packages/material-lab/package.json b/packages/material-lab/package.json new file mode 100644 index 000000000..e1c190cff --- /dev/null +++ b/packages/material-lab/package.json @@ -0,0 +1,36 @@ +{ + "name": "@suid/material-lab", + "version": "0.0.1", + "description": "A port of Material-UI (MUI) built with SolidJS.", + "keywords": [ + "solid", + "solidjs", + "components", + "mui", + "material", + "material-ui", + "material design", + "material-lab", + "ui" + ], + "main": "index.jsx", + "scripts": { + "build": "tsc --build tsconfig.build.json", + "clean": "tsc --build --clean tsconfig.build.json", + "watch": "tsc --build -w tsconfig.build.json" + }, + "dependencies": { + "@suid/base": "workspace:*", + "@suid/css": "workspace:*", + "@suid/system": "workspace:*", + "@suid/types": "workspace:*", + "@suid/utils": "workspace:*", + "clsx": "^1.2.1" + }, + "peerDependencies": { + "solid-js": "^1.7.7" + }, + "publishConfig": { + "directory": "lib" + } +} diff --git a/packages/material-lab/src/index.tsx b/packages/material-lab/src/index.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/packages/material-lab/tsconfig.build.json b/packages/material-lab/tsconfig.build.json new file mode 100644 index 000000000..86c7e312d --- /dev/null +++ b/packages/material-lab/tsconfig.build.json @@ -0,0 +1,28 @@ +{ + "compilerOptions": { + "outDir": "lib", + "rootDir": "src", + "paths": { + "@suid/base": ["./../base/src"], + "@suid/base/*": ["./../base/src/*"], + "@suid/css": ["./../css/src"], + "@suid/css/*": ["./../css/src/*"], + "@suid/system": ["./../system/src"], + "@suid/system/*": ["./../system/src/*"], + "@suid/types": ["./../types/src"], + "@suid/types/*": ["./../types/src/*"], + "@suid/utils": ["./../utils/src"], + "@suid/utils/*": ["./../utils/src/*"] + } + }, + "exclude": ["src/**/*.test.*"], + "extends": "./tsconfig.json", + "include": ["src"], + "references": [ + { "path": "./../base/tsconfig.build.json" }, + { "path": "./../css/tsconfig.build.json" }, + { "path": "./../system/tsconfig.build.json" }, + { "path": "./../types/tsconfig.build.json" }, + { "path": "./../utils/tsconfig.build.json" } + ] +} diff --git a/packages/material-lab/tsconfig.json b/packages/material-lab/tsconfig.json new file mode 100644 index 000000000..42d6b2a54 --- /dev/null +++ b/packages/material-lab/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "paths": { + "@suid/base": ["./../base/src"], + "@suid/base/*": ["./../base/src/*"], + "@suid/css": ["./../css/src"], + "@suid/css/*": ["./../css/src/*"], + "@suid/system": ["./../system/src"], + "@suid/system/*": ["./../system/src/*"], + "@suid/types": ["./../types/src"], + "@suid/types/*": ["./../types/src/*"], + "@suid/utils": ["./../utils/src"], + "@suid/utils/*": ["./../utils/src/*"] + } + }, + "extends": "./../../tsconfig.json", + "include": ["src", "test"], + "references": [ + { "path": "./../base/tsconfig.build.json" }, + { "path": "./../css/tsconfig.build.json" }, + { "path": "./../system/tsconfig.build.json" }, + { "path": "./../types/tsconfig.build.json" }, + { "path": "./../utils/tsconfig.build.json" } + ] +} From 95241ac9d1a1c746a8eed18e27f3c1d50e404c18 Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Sun, 20 Aug 2023 22:22:35 +0200 Subject: [PATCH 03/10] Rename material-lab to lab package to match the naming convention from mui2suid --- packages/lab/CHANGELOG.md | 1 + packages/{material-lab => lab}/LICENSE | 0 packages/{material-lab => lab}/README.md | 6 ++-- packages/{material-lab => lab}/package.json | 4 +-- packages/{material-lab => lab}/src/index.tsx | 0 .../{material-lab => lab}/tsconfig.build.json | 7 +++-- packages/{material-lab => lab}/tsconfig.json | 7 +++-- packages/material-lab/CHANGELOG.md | 10 ------- pnpm-lock.yaml | 28 +++++++++++++++++++ 9 files changed, 44 insertions(+), 19 deletions(-) create mode 100644 packages/lab/CHANGELOG.md rename packages/{material-lab => lab}/LICENSE (100%) rename packages/{material-lab => lab}/README.md (73%) rename packages/{material-lab => lab}/package.json (92%) rename packages/{material-lab => lab}/src/index.tsx (100%) rename packages/{material-lab => lab}/tsconfig.build.json (76%) rename packages/{material-lab => lab}/tsconfig.json (74%) delete mode 100644 packages/material-lab/CHANGELOG.md diff --git a/packages/lab/CHANGELOG.md b/packages/lab/CHANGELOG.md new file mode 100644 index 000000000..d7684a224 --- /dev/null +++ b/packages/lab/CHANGELOG.md @@ -0,0 +1 @@ +# @suid/lab diff --git a/packages/material-lab/LICENSE b/packages/lab/LICENSE similarity index 100% rename from packages/material-lab/LICENSE rename to packages/lab/LICENSE diff --git a/packages/material-lab/README.md b/packages/lab/README.md similarity index 73% rename from packages/material-lab/README.md rename to packages/lab/README.md index cda18730b..51a87782d 100644 --- a/packages/material-lab/README.md +++ b/packages/lab/README.md @@ -1,14 +1,14 @@ -# @suid/material-lab +# @suid/lab [![workflow-badge]](https://github.com/swordev/suid/actions/workflows/ci.yaml) [![npm-badge]](https://www.npmjs.com/package/@suid/material) [workflow-badge]: https://img.shields.io/github/actions/workflow/status/swordev/suid/ci.yaml?branch=main -[npm-badge]: https://img.shields.io/npm/v/@suid/material-lab?label=@suid/material-lab +[npm-badge]: https://img.shields.io/npm/v/@suid/lab?label=@suid/lab ## Installation ```sh -npm install @suid/material-lab +npm install @suid/lab ``` ## Documentation diff --git a/packages/material-lab/package.json b/packages/lab/package.json similarity index 92% rename from packages/material-lab/package.json rename to packages/lab/package.json index e1c190cff..aeebd9ae1 100644 --- a/packages/material-lab/package.json +++ b/packages/lab/package.json @@ -1,5 +1,5 @@ { - "name": "@suid/material-lab", + "name": "@suid/lab", "version": "0.0.1", "description": "A port of Material-UI (MUI) built with SolidJS.", "keywords": [ @@ -10,7 +10,6 @@ "material", "material-ui", "material design", - "material-lab", "ui" ], "main": "index.jsx", @@ -22,6 +21,7 @@ "dependencies": { "@suid/base": "workspace:*", "@suid/css": "workspace:*", + "@suid/material": "workspace:*", "@suid/system": "workspace:*", "@suid/types": "workspace:*", "@suid/utils": "workspace:*", diff --git a/packages/material-lab/src/index.tsx b/packages/lab/src/index.tsx similarity index 100% rename from packages/material-lab/src/index.tsx rename to packages/lab/src/index.tsx diff --git a/packages/material-lab/tsconfig.build.json b/packages/lab/tsconfig.build.json similarity index 76% rename from packages/material-lab/tsconfig.build.json rename to packages/lab/tsconfig.build.json index 86c7e312d..ce608e205 100644 --- a/packages/material-lab/tsconfig.build.json +++ b/packages/lab/tsconfig.build.json @@ -12,7 +12,9 @@ "@suid/types": ["./../types/src"], "@suid/types/*": ["./../types/src/*"], "@suid/utils": ["./../utils/src"], - "@suid/utils/*": ["./../utils/src/*"] + "@suid/utils/*": ["./../utils/src/*"], + "@suid/material": ["./../material/src"], + "@suid/material/*": ["./../material/src/*"] } }, "exclude": ["src/**/*.test.*"], @@ -23,6 +25,7 @@ { "path": "./../css/tsconfig.build.json" }, { "path": "./../system/tsconfig.build.json" }, { "path": "./../types/tsconfig.build.json" }, - { "path": "./../utils/tsconfig.build.json" } + { "path": "./../utils/tsconfig.build.json" }, + { "path": "./../material/tsconfig.build.json" } ] } diff --git a/packages/material-lab/tsconfig.json b/packages/lab/tsconfig.json similarity index 74% rename from packages/material-lab/tsconfig.json rename to packages/lab/tsconfig.json index 42d6b2a54..37faa0771 100644 --- a/packages/material-lab/tsconfig.json +++ b/packages/lab/tsconfig.json @@ -10,7 +10,9 @@ "@suid/types": ["./../types/src"], "@suid/types/*": ["./../types/src/*"], "@suid/utils": ["./../utils/src"], - "@suid/utils/*": ["./../utils/src/*"] + "@suid/utils/*": ["./../utils/src/*"], + "@suid/material": ["./../material/src"], + "@suid/material/*": ["./../material/src/*"] } }, "extends": "./../../tsconfig.json", @@ -20,6 +22,7 @@ { "path": "./../css/tsconfig.build.json" }, { "path": "./../system/tsconfig.build.json" }, { "path": "./../types/tsconfig.build.json" }, - { "path": "./../utils/tsconfig.build.json" } + { "path": "./../utils/tsconfig.build.json" }, + { "path": "./../material/tsconfig.build.json" } ] } diff --git a/packages/material-lab/CHANGELOG.md b/packages/material-lab/CHANGELOG.md deleted file mode 100644 index b4cc1b9e0..000000000 --- a/packages/material-lab/CHANGELOG.md +++ /dev/null @@ -1,10 +0,0 @@ -# @suid/material-lab - -## 0.0.1 - -### Patch Changes - -- [`98c7388`](https://github.com/swordev/suid/commit/98c73884966a6cbd29a3b652b4d2f3251149ac4e) Thanks [@juanrgm](https://github.com/juanrgm)! - Fix errors - -- Updated dependencies [[`98c7388`](https://github.com/swordev/suid/commit/98c73884966a6cbd29a3b652b4d2f3251149ac4e)]: - - @suid/base@0.0.1 diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 237647caf..5b68f4657 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -183,6 +183,34 @@ importers: version: 1.7.12 publishDirectory: lib + packages/lab: + dependencies: + '@suid/base': + specifier: workspace:* + version: link:../base/lib + '@suid/css': + specifier: workspace:* + version: link:../css/lib + '@suid/material': + specifier: workspace:* + version: link:../material/lib + '@suid/system': + specifier: workspace:* + version: link:../system/lib + '@suid/types': + specifier: workspace:* + version: link:../types/lib + '@suid/utils': + specifier: workspace:* + version: link:../utils/lib + clsx: + specifier: ^1.2.1 + version: 1.2.1 + solid-js: + specifier: ^1.7.7 + version: 1.7.7 + publishDirectory: lib + packages/material: dependencies: '@suid/base': From 8d7752d8901eb6c3710a911c89c54a430fb4bc41 Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Mon, 21 Aug 2023 00:58:58 +0200 Subject: [PATCH 04/10] Add LoadingButton --- packages/lab/package.json | 2 +- .../lab/src/LoadingButton/LoadingButton.tsx | 218 ++++++++++++++++++ .../src/LoadingButton/LoadingButtonProps.tsx | 71 ++++++ packages/lab/src/LoadingButton/index.tsx | 7 + .../src/LoadingButton/loadingButtonClasses.ts | 43 ++++ packages/lab/tsconfig.build.json | 9 - packages/lab/tsconfig.json | 9 - tsconfig.build.json | 1 + 8 files changed, 341 insertions(+), 19 deletions(-) create mode 100644 packages/lab/src/LoadingButton/LoadingButton.tsx create mode 100644 packages/lab/src/LoadingButton/LoadingButtonProps.tsx create mode 100644 packages/lab/src/LoadingButton/index.tsx create mode 100644 packages/lab/src/LoadingButton/loadingButtonClasses.ts diff --git a/packages/lab/package.json b/packages/lab/package.json index aeebd9ae1..76d46f0a5 100644 --- a/packages/lab/package.json +++ b/packages/lab/package.json @@ -28,7 +28,7 @@ "clsx": "^1.2.1" }, "peerDependencies": { - "solid-js": "^1.7.7" + "solid-js": "^1.7.11" }, "publishConfig": { "directory": "lib" diff --git a/packages/lab/src/LoadingButton/LoadingButton.tsx b/packages/lab/src/LoadingButton/LoadingButton.tsx new file mode 100644 index 000000000..1f97d1a79 --- /dev/null +++ b/packages/lab/src/LoadingButton/LoadingButton.tsx @@ -0,0 +1,218 @@ +import { LoadingButtonTypeMap } from "."; +import { getLoadingButtonUtilityClass } from "./loadingButtonClasses"; +import loadingButtonClasses from "./loadingButtonClasses"; +import createComponentFactory from "@suid/base/createComponentFactory"; +import Button from "@suid/material/Button"; +import CircularProgress from "@suid/material/CircularProgress"; +import { styled } from "@suid/material/styles"; +import { InPropsOf } from "@suid/types"; +import { capitalize } from "@suid/utils"; +import clsx from "clsx"; + +type OwnerState = InPropsOf; + +const $ = createComponentFactory()({ + name: "MuiLoadingButton", + selfPropNames: ["classes", "loading", "loadingIndicator", "loadingPosition"], + utilityClass: getLoadingButtonUtilityClass, + propDefaults: ({ set }) => { + return set({ + get disabled() { + return false; + }, + get loading() { + return false; + }, + get loadingIndicator() { + return ?? null; + }, + loadingPosition: "center", + variant: "text", + }); + }, + slotClasses: (ownerState) => ({ + root: ["root", ownerState.loading && "loading"], + startIcon: [ + ownerState.loading && + `startIconLoading${capitalize(ownerState.loadingPosition)}`, + ], + endIcon: [ + ownerState.loading && + `endIconLoading${capitalize(ownerState.loadingPosition)}`, + ], + loadingIndicator: [ + "loadingIndicator", + ownerState.loading && + `loadingIndicator${capitalize(ownerState.loadingPosition)}`, + ], + }), +}); + +const LoadingButtonRoot = styled(Button, { + name: "MuiLoadingButton", + slot: "Root", + overridesResolver: (props, styles) => { + return [ + styles.root, + styles.startIconLoadingStart && { + [`& .${loadingButtonClasses.startIconLoadingStart}`]: + styles.startIconLoadingStart, + }, + styles.endIconLoadingEnd && { + [`& .${loadingButtonClasses.endIconLoadingEnd}`]: + styles.endIconLoadingEnd, + }, + ]; + }, +})(({ ownerState, theme }) => ({ + [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: + { + transition: theme.transitions.create(["opacity"], { + duration: theme.transitions.duration.short, + }), + opacity: 0, + }, + ...(ownerState.loadingPosition === "center" && { + transition: theme.transitions.create( + ["background-color", "box-shadow", "border-color"], + { + duration: theme.transitions.duration.short, + } + ), + [`&.${loadingButtonClasses.loading} >:not(.${loadingButtonClasses.loadingIndicator})`]: + { + color: "transparent", + }, + }), + ...(ownerState.loadingPosition === "start" && + ownerState.fullWidth && { + [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: + { + transition: theme.transitions.create(["opacity"], { + duration: theme.transitions.duration.short, + }), + opacity: 0, + marginRight: -8, + }, + }), + ...(ownerState.loadingPosition === "end" && + ownerState.fullWidth && { + [`& .${loadingButtonClasses.startIconLoadingStart}, & .${loadingButtonClasses.endIconLoadingEnd}`]: + { + transition: theme.transitions.create(["opacity"], { + duration: theme.transitions.duration.short, + }), + opacity: 0, + marginLeft: -8, + }, + }), +})); + +const LoadingButtonLoadingIndicator = styled("div", { + name: "MuiLoadingButton", + slot: "LoadingIndicator", + overridesResolver: (props, styles) => { + const { ownerState } = props; + return [ + styles.loadingIndicator, + styles[`loadingIndicator${capitalize(ownerState.loadingPosition)}`], + ]; + }, +})(({ ownerState }) => ({ + position: "absolute", + visibility: "visible", + display: "flex", + ...(ownerState.loadingPosition === "start" && + (ownerState.variant === "outlined" || + ownerState.variant === "contained") && { + left: ownerState.size === "small" ? 10 : 14, + }), + ...(ownerState.loadingPosition === "start" && + ownerState.variant === "text" && { + left: 6, + }), + ...(ownerState.loadingPosition === "center" && { + left: "50%", + transform: "translate(-50%)", + }), + ...(ownerState.loadingPosition === "end" && + (ownerState.variant === "outlined" || + ownerState.variant === "contained") && { + right: ownerState.size === "small" ? 10 : 14, + }), + ...(ownerState.loadingPosition === "end" && + ownerState.variant === "text" && { + right: 6, + }), + ...(ownerState.loadingPosition === "start" && + ownerState.fullWidth && { + position: "relative", + left: -10, + }), + ...(ownerState.loadingPosition === "end" && + ownerState.fullWidth && { + position: "relative", + right: -10, + }), +})); + +/** + * + * Demos: + * + * - [Buttons](https://mui.com/components/buttons/) + * + * API: + * + * - [LoadingButton API](https://mui.com/api/loading-button/) + * - inherits [Button API](https://mui.com/api/button/) + */ +const LoadingButton = $.component(function LoadingButton({ + allProps, + otherProps, + props, + classes, +}) { + // todo: wait for https://github.com/solidjs/solid/discussions/1860 + // this could improve efficiency + + const getChildren = () => {allProps.children}; + + return ( + + {allProps.loadingPosition === "end" ? ( + <> + {getChildren()} + {props.loading && ( + + {props.loadingIndicator} + + )} + + ) : ( + <> + {props.loading && ( + + {props.loadingIndicator} + + )} + {getChildren()} + + )} + + ); +}); + +export default LoadingButton; diff --git a/packages/lab/src/LoadingButton/LoadingButtonProps.tsx b/packages/lab/src/LoadingButton/LoadingButtonProps.tsx new file mode 100644 index 000000000..bd7f9667b --- /dev/null +++ b/packages/lab/src/LoadingButton/LoadingButtonProps.tsx @@ -0,0 +1,71 @@ +import { ExtendButtonTypeMap, ButtonClasses } from "@suid/material/Button"; +import { Theme } from "@suid/material/styles"; +import { SxProps } from "@suid/system"; +import * as ST from "@suid/types"; +import { JSXElement } from "solid-js"; + +export type LoadingButtonTypeMap< + P = {}, + D extends ST.ElementType = "button" +> = { + name: "MuiLoadingButton"; + defaultPropNames: "loading" | "loadingIndicator" | "loadingPosition"; + selfProps: { + /** + * Override or extend the styles applied to the component. + */ + classes?: Partial & { + /** Styles applied to the root element. */ + root?: string; + /** Styles applied to the root element if `loading={true}`. */ + loading?: string; + /** Styles applied to the loadingIndicator element. */ + loadingIndicator?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ + loadingIndicatorCenter?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ + loadingIndicatorStart?: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ + loadingIndicatorEnd?: string; + /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ + endIconLoadingEnd?: string; + /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ + startIconLoadingStart?: string; + }; + + /** + * If `true`, the loading indicator is shown. + * @default false + */ + loading?: boolean; + + /** + * Element placed before the children if the button is in loading state. + * The node should contain an element with `role="progressbar"` with an accessible name. + * By default, we render a `CircularProgress` that is labelled by the button itself. + * @default + */ + loadingIndicator?: JSXElement; + + /** + * The loading indicator can be positioned on the start, end, or the center of the button. + * @default 'center' + */ + loadingPosition?: "start" | "end" | "center"; + + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + }; +} & ExtendButtonTypeMap<{ + props: P & LoadingButtonTypeMap["selfProps"]; + defaultComponent: D; +}>; + +export type LoadingButtonProps< + D extends ST.ElementType = LoadingButtonTypeMap["defaultComponent"], + P = {} +> = ST.OverrideProps, D>; + +export default LoadingButtonProps; diff --git a/packages/lab/src/LoadingButton/index.tsx b/packages/lab/src/LoadingButton/index.tsx new file mode 100644 index 000000000..1484d8463 --- /dev/null +++ b/packages/lab/src/LoadingButton/index.tsx @@ -0,0 +1,7 @@ +export { default } from "./LoadingButton"; +export * from "./LoadingButton"; + +export { default as loadingButtonClasses } from "./loadingButtonClasses"; +export * from "./loadingButtonClasses"; + +export * from "./LoadingButtonProps"; diff --git a/packages/lab/src/LoadingButton/loadingButtonClasses.ts b/packages/lab/src/LoadingButton/loadingButtonClasses.ts new file mode 100644 index 000000000..35e2e3120 --- /dev/null +++ b/packages/lab/src/LoadingButton/loadingButtonClasses.ts @@ -0,0 +1,43 @@ +import generateUtilityClass from "@suid/base/generateUtilityClass"; +import generateUtilityClasses from "@suid/base/generateUtilityClasses"; + +export interface LoadingButtonClasses { + /** Styles applied to the root element. */ + root: string; + /** Styles applied to the root element if `loading={true}`. */ + loading: string; + /** Styles applied to the loadingIndicator element. */ + loadingIndicator: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="center"`. */ + loadingIndicatorCenter: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="start"`. */ + loadingIndicatorStart: string; + /** Styles applied to the loadingIndicator element if `loadingPosition="end"`. */ + loadingIndicatorEnd: string; + /** Styles applied to the endIcon element if `loading={true}` and `loadingPosition="end"`. */ + endIconLoadingEnd: string; + /** Styles applied to the startIcon element if `loading={true}` and `loadingPosition="start"`. */ + startIconLoadingStart: string; +} + +export type LoadingButtonClassKey = keyof LoadingButtonClasses; + +export function getLoadingButtonUtilityClass(slot: string): string { + return generateUtilityClass("MuiLoadingButton", slot); +} + +const loadingButtonClasses: LoadingButtonClasses = generateUtilityClasses( + "MuiLoadingButton", + [ + "root", + "loading", + "loadingIndicator", + "loadingIndicatorCenter", + "loadingIndicatorStart", + "loadingIndicatorEnd", + "endIconLoadingEnd", + "startIconLoadingStart", + ] +); + +export default loadingButtonClasses; diff --git a/packages/lab/tsconfig.build.json b/packages/lab/tsconfig.build.json index ce608e205..70aac7239 100644 --- a/packages/lab/tsconfig.build.json +++ b/packages/lab/tsconfig.build.json @@ -3,12 +3,6 @@ "outDir": "lib", "rootDir": "src", "paths": { - "@suid/base": ["./../base/src"], - "@suid/base/*": ["./../base/src/*"], - "@suid/css": ["./../css/src"], - "@suid/css/*": ["./../css/src/*"], - "@suid/system": ["./../system/src"], - "@suid/system/*": ["./../system/src/*"], "@suid/types": ["./../types/src"], "@suid/types/*": ["./../types/src/*"], "@suid/utils": ["./../utils/src"], @@ -21,9 +15,6 @@ "extends": "./tsconfig.json", "include": ["src"], "references": [ - { "path": "./../base/tsconfig.build.json" }, - { "path": "./../css/tsconfig.build.json" }, - { "path": "./../system/tsconfig.build.json" }, { "path": "./../types/tsconfig.build.json" }, { "path": "./../utils/tsconfig.build.json" }, { "path": "./../material/tsconfig.build.json" } diff --git a/packages/lab/tsconfig.json b/packages/lab/tsconfig.json index 37faa0771..425ea6d39 100644 --- a/packages/lab/tsconfig.json +++ b/packages/lab/tsconfig.json @@ -1,12 +1,6 @@ { "compilerOptions": { "paths": { - "@suid/base": ["./../base/src"], - "@suid/base/*": ["./../base/src/*"], - "@suid/css": ["./../css/src"], - "@suid/css/*": ["./../css/src/*"], - "@suid/system": ["./../system/src"], - "@suid/system/*": ["./../system/src/*"], "@suid/types": ["./../types/src"], "@suid/types/*": ["./../types/src/*"], "@suid/utils": ["./../utils/src"], @@ -18,9 +12,6 @@ "extends": "./../../tsconfig.json", "include": ["src", "test"], "references": [ - { "path": "./../base/tsconfig.build.json" }, - { "path": "./../css/tsconfig.build.json" }, - { "path": "./../system/tsconfig.build.json" }, { "path": "./../types/tsconfig.build.json" }, { "path": "./../utils/tsconfig.build.json" }, { "path": "./../material/tsconfig.build.json" } diff --git a/tsconfig.build.json b/tsconfig.build.json index 1966cb717..517a397a4 100644 --- a/tsconfig.build.json +++ b/tsconfig.build.json @@ -5,6 +5,7 @@ { "path": "packages/codemod/tsconfig.build.json" }, { "path": "packages/create-suid/tsconfig.build.json" }, { "path": "packages/css/tsconfig.build.json" }, + { "path": "packages/lab/tsconfig.build.json" }, { "path": "packages/material/tsconfig.build.json" }, { "path": "packages/styled-engine/tsconfig.build.json" }, { "path": "packages/system/tsconfig.build.json" }, From 212d6ed1177758511637791d11cb8489f3bcc52e Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Mon, 21 Aug 2023 10:28:14 +0200 Subject: [PATCH 05/10] Fix bug that LoadingButton doesn't disable on loading Make Checkbox value deprecated to avoid unwanted use Add documentation for LoadingButton --- .../lab/src/LoadingButton/LoadingButton.tsx | 17 ++-- .../src/LoadingButton/LoadingButtonProps.tsx | 14 ++- packages/lab/src/index.tsx | 1 + packages/material/package.json | 3 + .../material/src/Checkbox/CheckboxProps.tsx | 1 + packages/site/package.json | 1 + packages/site/src/layouts/MainLayout/Nav.tsx | 15 +++ .../LoadingButtonPage/BasicButtonsExample.tsx | 38 +++++++ .../LoadingButtonPage/ButtonSizesExample.tsx | 61 ++++++++++++ .../ColorLoadingButtonsExample.tsx | 37 +++++++ .../LoadingButtonPage/LoadingButtonPage.tsx | 20 ++++ pnpm-lock.yaml | 99 ++++++++++++------- 12 files changed, 265 insertions(+), 42 deletions(-) create mode 100644 packages/site/src/pages/labComponents/LoadingButtonPage/BasicButtonsExample.tsx create mode 100644 packages/site/src/pages/labComponents/LoadingButtonPage/ButtonSizesExample.tsx create mode 100644 packages/site/src/pages/labComponents/LoadingButtonPage/ColorLoadingButtonsExample.tsx create mode 100644 packages/site/src/pages/labComponents/LoadingButtonPage/LoadingButtonPage.tsx diff --git a/packages/lab/src/LoadingButton/LoadingButton.tsx b/packages/lab/src/LoadingButton/LoadingButton.tsx index 1f97d1a79..78e46b160 100644 --- a/packages/lab/src/LoadingButton/LoadingButton.tsx +++ b/packages/lab/src/LoadingButton/LoadingButton.tsx @@ -8,12 +8,19 @@ import { styled } from "@suid/material/styles"; import { InPropsOf } from "@suid/types"; import { capitalize } from "@suid/utils"; import clsx from "clsx"; +import { JSXElement } from "solid-js"; type OwnerState = InPropsOf; const $ = createComponentFactory()({ name: "MuiLoadingButton", - selfPropNames: ["classes", "loading", "loadingIndicator", "loadingPosition"], + selfPropNames: [ + "classes", + "loading", + "disabled", + "loadingIndicator", + "loadingPosition", + ], utilityClass: getLoadingButtonUtilityClass, propDefaults: ({ set }) => { return set({ @@ -23,9 +30,7 @@ const $ = createComponentFactory()({ get loading() { return false; }, - get loadingIndicator() { - return ?? null; - }, + loadingIndicator: () => , loadingPosition: "center", variant: "text", }); @@ -194,7 +199,7 @@ const LoadingButton = $.component(function LoadingButton({ class={classes.loadingIndicator} ownerState={allProps} > - {props.loadingIndicator} + {props.loadingIndicator as JSXElement} )} @@ -205,7 +210,7 @@ const LoadingButton = $.component(function LoadingButton({ class={classes.loadingIndicator} ownerState={allProps} > - {props.loadingIndicator} + {props.loadingIndicator as JSXElement} )} {getChildren()} diff --git a/packages/lab/src/LoadingButton/LoadingButtonProps.tsx b/packages/lab/src/LoadingButton/LoadingButtonProps.tsx index bd7f9667b..dea7b8808 100644 --- a/packages/lab/src/LoadingButton/LoadingButtonProps.tsx +++ b/packages/lab/src/LoadingButton/LoadingButtonProps.tsx @@ -9,7 +9,11 @@ export type LoadingButtonTypeMap< D extends ST.ElementType = "button" > = { name: "MuiLoadingButton"; - defaultPropNames: "loading" | "loadingIndicator" | "loadingPosition"; + defaultPropNames: + | "loading" + | "loadingIndicator" + | "loadingPosition" + | "disabled"; selfProps: { /** * Override or extend the styles applied to the component. @@ -33,6 +37,12 @@ export type LoadingButtonTypeMap< startIconLoadingStart?: string; }; + /** + * If `true` or if `loading`, the component is disabled. + * @default false + */ + disabled?: boolean; + /** * If `true`, the loading indicator is shown. * @default false @@ -45,7 +55,7 @@ export type LoadingButtonTypeMap< * By default, we render a `CircularProgress` that is labelled by the button itself. * @default */ - loadingIndicator?: JSXElement; + loadingIndicator?: JSXElement | (() => JSXElement); /** * The loading indicator can be positioned on the start, end, or the center of the button. diff --git a/packages/lab/src/index.tsx b/packages/lab/src/index.tsx index e69de29bb..30786aa32 100644 --- a/packages/lab/src/index.tsx +++ b/packages/lab/src/index.tsx @@ -0,0 +1 @@ +export { default as LoadingButton } from "./LoadingButton"; diff --git a/packages/material/package.json b/packages/material/package.json index f37a9c9ed..b2832b946 100644 --- a/packages/material/package.json +++ b/packages/material/package.json @@ -26,6 +26,9 @@ "@suid/utils": "workspace:*", "clsx": "^2.0.0" }, + "devDependencies": { + "solid-testing-library": "^0.5.1" + }, "peerDependencies": { "solid-js": "^1.7.12" }, diff --git a/packages/material/src/Checkbox/CheckboxProps.tsx b/packages/material/src/Checkbox/CheckboxProps.tsx index 6c51d9f35..e8d5eda80 100644 --- a/packages/material/src/Checkbox/CheckboxProps.tsx +++ b/packages/material/src/Checkbox/CheckboxProps.tsx @@ -112,6 +112,7 @@ export interface CheckboxTypeMap

{ /** * The value of the component. The DOM API casts this to a string. * The browser uses "on" as the default value. + * @deprecated Use the `checked` prop instead. */ value?: SwitchBaseProps["value"]; }; diff --git a/packages/site/package.json b/packages/site/package.json index d506494fb..6ba3fb419 100644 --- a/packages/site/package.json +++ b/packages/site/package.json @@ -16,6 +16,7 @@ "@suid/base": "workspace:*", "@suid/codemod": "workspace:*", "@suid/icons-material": "workspace:*", + "@suid/lab": "workspace:*", "@suid/material": "workspace:*", "@suid/system": "workspace:*", "@suid/types": "workspace:*", diff --git a/packages/site/src/layouts/MainLayout/Nav.tsx b/packages/site/src/layouts/MainLayout/Nav.tsx index 55000bd40..b618dc202 100644 --- a/packages/site/src/layouts/MainLayout/Nav.tsx +++ b/packages/site/src/layouts/MainLayout/Nav.tsx @@ -1,4 +1,5 @@ import { useLocation, Link as RouterLink } from "@solidjs/router"; +import { Science } from "@suid/icons-material"; import CodeIcon from "@suid/icons-material/Code"; import EditRoundedIcon from "@suid/icons-material/EditRounded"; import HandymanIcon from "@suid/icons-material/Handyman"; @@ -283,6 +284,20 @@ export const navConfig: Config[] = [ }, ], }, + { + type: "section", + text: "Laboratory Components", + icon: Science, + items: [ + { + type: "section", + text: "Input", + items: ["Loading Button"].map((text) => + createLinkConfig(text, `/lab-components/${toFolder(text)}`) + ), + }, + ], + }, ]; function NavSection(props: { diff --git a/packages/site/src/pages/labComponents/LoadingButtonPage/BasicButtonsExample.tsx b/packages/site/src/pages/labComponents/LoadingButtonPage/BasicButtonsExample.tsx new file mode 100644 index 000000000..54861764e --- /dev/null +++ b/packages/site/src/pages/labComponents/LoadingButtonPage/BasicButtonsExample.tsx @@ -0,0 +1,38 @@ +import { LoadingButton } from "@suid/lab"; +import { Checkbox, FormControlLabel, Stack } from "@suid/material"; +import { createSignal } from "solid-js"; + +export default function BasicButtons() { + const [isLoading, setIsLoading] = createSignal(true); + return ( + <> + + + + Text + + + Contained + + + Outlined + + + Outlined + + + + setIsLoading(value)} + /> + } + /> + + + + ); +} diff --git a/packages/site/src/pages/labComponents/LoadingButtonPage/ButtonSizesExample.tsx b/packages/site/src/pages/labComponents/LoadingButtonPage/ButtonSizesExample.tsx new file mode 100644 index 000000000..e8295ac99 --- /dev/null +++ b/packages/site/src/pages/labComponents/LoadingButtonPage/ButtonSizesExample.tsx @@ -0,0 +1,61 @@ +import { LoadingButton } from "@suid/lab"; +import { Box, Checkbox, FormControlLabel, Stack } from "@suid/material"; +import { createSignal } from "solid-js"; + +export default function ButtonSizes() { + const [isLoading, setIsLoading] = createSignal(false); + return ( + + +

+ + Small + + + Medium + + + Large + +
+
+ + Small + + + Medium + + + Large + +
+
+ + Small + + + Medium + + + Large + +
+ + + setIsLoading(value)} + /> + } + /> + + + ); +} diff --git a/packages/site/src/pages/labComponents/LoadingButtonPage/ColorLoadingButtonsExample.tsx b/packages/site/src/pages/labComponents/LoadingButtonPage/ColorLoadingButtonsExample.tsx new file mode 100644 index 000000000..c2d274682 --- /dev/null +++ b/packages/site/src/pages/labComponents/LoadingButtonPage/ColorLoadingButtonsExample.tsx @@ -0,0 +1,37 @@ +import { LoadingButton } from "@suid/lab"; +import { Checkbox, FormControlLabel, Stack } from "@suid/material"; +import { createSignal } from "solid-js"; + +export default function ColorLoadingButtonsExample() { + const [isLoading, setIsLoading] = createSignal(false); + return ( + + + + Secondary + + + Success + + + Error + + + + setIsLoading(value)} + /> + } + /> + + + ); +} diff --git a/packages/site/src/pages/labComponents/LoadingButtonPage/LoadingButtonPage.tsx b/packages/site/src/pages/labComponents/LoadingButtonPage/LoadingButtonPage.tsx new file mode 100644 index 000000000..45792927a --- /dev/null +++ b/packages/site/src/pages/labComponents/LoadingButtonPage/LoadingButtonPage.tsx @@ -0,0 +1,20 @@ +import { LoadingButton } from "@suid/lab"; +import ComponentInfo from "~/components/ComponentInfo"; +import BasicLoadingButtonsExample from "./BasicButtonsExample"; +import ButtonSizesExample from "./ButtonSizesExample"; +import ColorLoadingButtonsExample from "./ColorLoadingButtonsExample"; + +export default function LoadingButtonPage() { + return ( + + ); +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5b68f4657..9ee91b594 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -207,8 +207,8 @@ importers: specifier: ^1.2.1 version: 1.2.1 solid-js: - specifier: ^1.7.7 - version: 1.7.7 + specifier: ^1.7.11 + version: 1.7.11 publishDirectory: lib packages/material: @@ -256,6 +256,9 @@ importers: '@suid/icons-material': specifier: workspace:* version: link:../icons-material/lib + '@suid/lab': + specifier: workspace:* + version: link:../lab/lib '@suid/material': specifier: workspace:* version: link:../material/lib @@ -1660,13 +1663,6 @@ packages: /@babel/regjsgen@0.8.0: resolution: {integrity: sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==} - /@babel/runtime@7.19.0: - resolution: {integrity: sha512-eR8Lo9hnDS7tqkO7NsV+mKvCmv5boaXFSZ70DnfhcgiEne8hv9oCEd36Klw74EtizEqLsy4YnW8UWwpBVolHZA==} - engines: {node: '>=6.9.0'} - dependencies: - regenerator-runtime: 0.13.9 - dev: true - /@babel/runtime@7.20.7: resolution: {integrity: sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==} engines: {node: '>=6.9.0'} @@ -3935,7 +3931,7 @@ packages: engines: {node: '>=12'} dependencies: '@babel/code-frame': 7.21.4 - '@babel/runtime': 7.19.0 + '@babel/runtime': 7.20.7 '@types/aria-query': 4.2.2 aria-query: 5.1.3 chalk: 4.1.2 @@ -5275,7 +5271,7 @@ packages: resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==} dependencies: function-bind: 1.1.1 - get-intrinsic: 1.1.3 + get-intrinsic: 1.2.0 dev: true /callsites@3.1.0: @@ -5848,7 +5844,7 @@ packages: dependencies: call-bind: 1.0.2 es-get-iterator: 1.1.2 - get-intrinsic: 1.1.3 + get-intrinsic: 1.2.0 is-arguments: 1.1.1 is-date-object: 1.0.5 is-regex: 1.1.4 @@ -6244,7 +6240,7 @@ packages: resolution: {integrity: sha512-+DTO8GYwbMCwbywjimwZMHp8AuYXOS2JZFWoi2AlPOS3ebnII9w/NLpNZtA7A0YLaVDw+O7KFCeoIV7OPvM7hQ==} dependencies: call-bind: 1.0.2 - get-intrinsic: 1.1.3 + get-intrinsic: 1.2.0 has-symbols: 1.0.3 is-arguments: 1.1.1 is-map: 2.0.2 @@ -7047,14 +7043,6 @@ packages: resolution: {integrity: sha512-Hm0ixYtaSZ/V7C8FJrtZIuBBI+iSgL+1Aq82zSu8VQNB4S3Gk8e7Qs3VwBDJAhmRZcFqkl3tQu36g/Foh5I5ig==} dev: true - /get-intrinsic@1.1.3: - resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==} - dependencies: - function-bind: 1.1.1 - has: 1.0.3 - has-symbols: 1.0.3 - dev: true - /get-intrinsic@1.2.0: resolution: {integrity: sha512-L049y6nFOuom5wGyRc3/gdTLO94dySVKRACj1RmJZBQXlbTMhtNIgkWkUHq+jYmZvKf14EW1EoJnnjbmoHij0Q==} dependencies: @@ -7232,7 +7220,7 @@ packages: /gopd@1.0.1: resolution: {integrity: sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==} dependencies: - get-intrinsic: 1.1.3 + get-intrinsic: 1.2.0 dev: true /got@11.8.5: @@ -7314,7 +7302,7 @@ packages: /has-property-descriptors@1.0.0: resolution: {integrity: sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==} dependencies: - get-intrinsic: 1.1.3 + get-intrinsic: 1.2.0 dev: true /has-proto@1.0.1: @@ -7923,7 +7911,7 @@ packages: resolution: {integrity: sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==} dependencies: call-bind: 1.0.2 - get-intrinsic: 1.1.3 + get-intrinsic: 1.2.0 dev: true /is-what@4.1.8: @@ -8982,10 +8970,6 @@ packages: resolution: {integrity: sha512-NHj4rzRo0tQdijE9ZqAx6kYDcoRwYwSYzCA8MY3JzfxlrvEU0jhnhJT9BhqhJs7I/dKcrDm6TyulaRqZPIhN5g==} dev: true - /object-inspect@1.12.2: - resolution: {integrity: sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==} - dev: true - /object-inspect@1.12.3: resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} dev: true @@ -9820,10 +9804,6 @@ packages: /regenerator-runtime@0.13.11: resolution: {integrity: sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==} - /regenerator-runtime@0.13.9: - resolution: {integrity: sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==} - dev: true - /regenerator-transform@0.15.2: resolution: {integrity: sha512-hfMp2BoF0qOk3uc5V20ALGDS2ddjQaLrdl7xrGXvAIow7qeWRM2VA2HuCHkUKk9slq3VwEwLNK3DFBqDfPGYtg==} dependencies: @@ -10243,8 +10223,8 @@ packages: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} dependencies: call-bind: 1.0.2 - get-intrinsic: 1.1.3 - object-inspect: 1.12.2 + get-intrinsic: 1.2.0 + object-inspect: 1.12.3 dev: true /siginfo@2.0.0: @@ -10353,12 +10333,29 @@ packages: smart-buffer: 4.2.0 dev: true + /solid-js@1.7.11: + resolution: {integrity: sha512-JkuvsHt8jqy7USsy9xJtT18aF9r2pFO+GB8JQ2XGTvtF49rGTObB46iebD25sE3qVNvIbwglXOXdALnJq9IHtQ==} + dependencies: + csstype: 3.1.2 + seroval: 0.5.1 + /solid-js@1.7.12: resolution: {integrity: sha512-QoyoOUKu14iLoGxjxWFIU8+/1kLT4edQ7mZESFPonsEXZ//VJtPKD8Ud1aTKzotj+MNWmSs9YzK6TdY+fO9Eww==} dependencies: csstype: 3.1.2 seroval: 0.5.1 + /solid-refresh@0.5.2(solid-js@1.7.11): + resolution: {integrity: sha512-I69HmFj0LsGRJ3n8CEMVjyQFgVtuM2bSjznu2hCnsY+i5oOxh8ioWj00nnHBv0UYD3WpE/Sq4Q3TNw2IKmKN7A==} + peerDependencies: + solid-js: ^1.3 + dependencies: + '@babel/generator': 7.21.5 + '@babel/helper-module-imports': 7.18.6 + '@babel/types': 7.21.5 + solid-js: 1.7.11 + dev: true + /solid-refresh@0.5.2(solid-js@1.7.12): resolution: {integrity: sha512-I69HmFj0LsGRJ3n8CEMVjyQFgVtuM2bSjznu2hCnsY+i5oOxh8ioWj00nnHBv0UYD3WpE/Sq4Q3TNw2IKmKN7A==} peerDependencies: @@ -10467,6 +10464,7 @@ packages: /solid-testing-library@0.5.0(solid-js@1.7.12): resolution: {integrity: sha512-vr4Ke9Dq3bUFLaXOcN8/IVn2e9Q37w4vdmoIOmFBIPs7iCJX9IxuC0IdQqK8nzBZMQqceijkfyCE3Qc407KmaA==} engines: {node: '>= 14'} + deprecated: This package is now available at @solidjs/testing-library peerDependencies: solid-js: '>=1.0.0' dependencies: @@ -11490,6 +11488,39 @@ packages: optional: true terser: optional: true + dependencies: + '@types/node': 18.16.6 + esbuild: 0.17.18 + postcss: 8.4.23 + rollup: 3.21.5 + optionalDependencies: + fsevents: 2.3.2 + dev: true + + /vite@4.3.9(@types/node@18.16.6)(sass@1.62.1): + resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} + engines: {node: ^14.18.0 || >=16.0.0} + hasBin: true + peerDependencies: + '@types/node': '>= 14' + less: '*' + sass: '*' + stylus: '*' + sugarss: '*' + terser: ^5.4.0 + peerDependenciesMeta: + '@types/node': + optional: true + less: + optional: true + sass: + optional: true + stylus: + optional: true + sugarss: + optional: true + terser: + optional: true dependencies: '@types/node': 18.17.19 esbuild: 0.18.20 From c22ee39f25531b36dfb1c55d5073cff96d36062d Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Mon, 21 Aug 2023 10:41:44 +0200 Subject: [PATCH 06/10] Export useTheme, so that the imports look more beautiful --- packages/base/src/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/base/src/index.tsx b/packages/base/src/index.tsx index 278490762..3753d5d57 100644 --- a/packages/base/src/index.tsx +++ b/packages/base/src/index.tsx @@ -4,3 +4,4 @@ import generateUtilityClasses from "./generateUtilityClasses"; export { generateUtilityClasses }; export { generateUtilityClass }; export { default as unstable_composeClasses } from "./composeClasses"; +export { default as useTheme } from "./useTheme"; From 673cd4914c027c7ca229a2912ede1fb11c9cba9a Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Mon, 21 Aug 2023 11:47:59 +0200 Subject: [PATCH 07/10] Export ThemeOptions, from @suid/material --- packages/material/src/styles/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material/src/styles/index.tsx b/packages/material/src/styles/index.tsx index 39b573318..22f695d61 100644 --- a/packages/material/src/styles/index.tsx +++ b/packages/material/src/styles/index.tsx @@ -23,6 +23,7 @@ export type { TypographyOptions as TypographyVariantsOptions } from "./createTyp export type { default as StyledProps } from "@suid/system/styledProps"; export { default as useTheme } from "./useTheme"; export { default as useThemeProps } from "./useThemeProps"; +export type { ThemeOptions } from "./createTheme"; export { default as ThemeProvider } from "./ThemeProvider"; export { default as styled } from "./styled"; export { createTheme } from "./createTheme"; From 13eeda952f89970acc59a23d7757617c42b12d89 Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Mon, 21 Aug 2023 11:48:17 +0200 Subject: [PATCH 08/10] Revert "Export useTheme, so that the imports look more beautiful" This reverts commit 9193259ebfd7e0065a9b4af9d5f122e59e58ca76. --- packages/base/src/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/base/src/index.tsx b/packages/base/src/index.tsx index 3753d5d57..278490762 100644 --- a/packages/base/src/index.tsx +++ b/packages/base/src/index.tsx @@ -4,4 +4,3 @@ import generateUtilityClasses from "./generateUtilityClasses"; export { generateUtilityClasses }; export { generateUtilityClass }; export { default as unstable_composeClasses } from "./composeClasses"; -export { default as useTheme } from "./useTheme"; From b88c66555f018083d9b3ae2e324a9dc9b9cea3c1 Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Mon, 21 Aug 2023 11:56:56 +0200 Subject: [PATCH 09/10] Revert "Export ThemeOptions, from @suid/material" This reverts commit d7b2c0b2ace367412f7a27e26c11d490eab6a6e1. --- packages/material/src/styles/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material/src/styles/index.tsx b/packages/material/src/styles/index.tsx index 22f695d61..39b573318 100644 --- a/packages/material/src/styles/index.tsx +++ b/packages/material/src/styles/index.tsx @@ -23,7 +23,6 @@ export type { TypographyOptions as TypographyVariantsOptions } from "./createTyp export type { default as StyledProps } from "@suid/system/styledProps"; export { default as useTheme } from "./useTheme"; export { default as useThemeProps } from "./useThemeProps"; -export type { ThemeOptions } from "./createTheme"; export { default as ThemeProvider } from "./ThemeProvider"; export { default as styled } from "./styled"; export { createTheme } from "./createTheme"; From 6a6f7fd41b61fb4f489f31a522ba1254a5dc803b Mon Sep 17 00:00:00 2001 From: David Bieregger Date: Fri, 29 Sep 2023 11:35:23 +0200 Subject: [PATCH 10/10] Format code and update pnpm-lock.yaml --- .../src/LoadingButton/LoadingButtonProps.tsx | 6 +- pnpm-lock.yaml | 83 +++++-------------- 2 files changed, 25 insertions(+), 64 deletions(-) diff --git a/packages/lab/src/LoadingButton/LoadingButtonProps.tsx b/packages/lab/src/LoadingButton/LoadingButtonProps.tsx index dea7b8808..c8ae162e1 100644 --- a/packages/lab/src/LoadingButton/LoadingButtonProps.tsx +++ b/packages/lab/src/LoadingButton/LoadingButtonProps.tsx @@ -1,4 +1,4 @@ -import { ExtendButtonTypeMap, ButtonClasses } from "@suid/material/Button"; +import { ButtonClasses, ExtendButtonTypeMap } from "@suid/material/Button"; import { Theme } from "@suid/material/styles"; import { SxProps } from "@suid/system"; import * as ST from "@suid/types"; @@ -6,7 +6,7 @@ import { JSXElement } from "solid-js"; export type LoadingButtonTypeMap< P = {}, - D extends ST.ElementType = "button" + D extends ST.ElementType = "button", > = { name: "MuiLoadingButton"; defaultPropNames: @@ -75,7 +75,7 @@ export type LoadingButtonTypeMap< export type LoadingButtonProps< D extends ST.ElementType = LoadingButtonTypeMap["defaultComponent"], - P = {} + P = {}, > = ST.OverrideProps, D>; export default LoadingButtonProps; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 9ee91b594..4ee048d7c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -234,6 +234,10 @@ importers: solid-js: specifier: ^1.7.12 version: 1.7.12 + devDependencies: + solid-testing-library: + specifier: ^0.5.1 + version: 0.5.1(solid-js@1.7.12) publishDirectory: lib packages/site: @@ -463,13 +467,6 @@ packages: grapheme-splitter: 1.0.4 dev: true - /@babel/code-frame@7.21.4: - resolution: {integrity: sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/highlight': 7.18.6 - dev: true - /@babel/code-frame@7.22.13: resolution: {integrity: sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==} engines: {node: '>=6.9.0'} @@ -786,15 +783,6 @@ packages: transitivePeerDependencies: - supports-color - /@babel/highlight@7.18.6: - resolution: {integrity: sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==} - engines: {node: '>=6.9.0'} - dependencies: - '@babel/helper-validator-identifier': 7.22.20 - chalk: 2.4.2 - js-tokens: 4.0.0 - dev: true - /@babel/highlight@7.22.20: resolution: {integrity: sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==} engines: {node: '>=6.9.0'} @@ -3930,7 +3918,7 @@ packages: resolution: {integrity: sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==} engines: {node: '>=12'} dependencies: - '@babel/code-frame': 7.21.4 + '@babel/code-frame': 7.22.13 '@babel/runtime': 7.20.7 '@types/aria-query': 4.2.2 aria-query: 5.1.3 @@ -5491,6 +5479,11 @@ packages: resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} engines: {node: '>=0.8'} + /clsx@1.2.1: + resolution: {integrity: sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==} + engines: {node: '>=6'} + dev: false + /clsx@2.0.0: resolution: {integrity: sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==} engines: {node: '>=6'} @@ -10338,6 +10331,7 @@ packages: dependencies: csstype: 3.1.2 seroval: 0.5.1 + dev: false /solid-js@1.7.12: resolution: {integrity: sha512-QoyoOUKu14iLoGxjxWFIU8+/1kLT4edQ7mZESFPonsEXZ//VJtPKD8Ud1aTKzotj+MNWmSs9YzK6TdY+fO9Eww==} @@ -10345,17 +10339,6 @@ packages: csstype: 3.1.2 seroval: 0.5.1 - /solid-refresh@0.5.2(solid-js@1.7.11): - resolution: {integrity: sha512-I69HmFj0LsGRJ3n8CEMVjyQFgVtuM2bSjznu2hCnsY+i5oOxh8ioWj00nnHBv0UYD3WpE/Sq4Q3TNw2IKmKN7A==} - peerDependencies: - solid-js: ^1.3 - dependencies: - '@babel/generator': 7.21.5 - '@babel/helper-module-imports': 7.18.6 - '@babel/types': 7.21.5 - solid-js: 1.7.11 - dev: true - /solid-refresh@0.5.2(solid-js@1.7.12): resolution: {integrity: sha512-I69HmFj0LsGRJ3n8CEMVjyQFgVtuM2bSjznu2hCnsY+i5oOxh8ioWj00nnHBv0UYD3WpE/Sq4Q3TNw2IKmKN7A==} peerDependencies: @@ -10472,6 +10455,17 @@ packages: solid-js: 1.7.12 dev: true + /solid-testing-library@0.5.1(solid-js@1.7.12): + resolution: {integrity: sha512-CfcCWsI5zIJz2zcyZQz2weq+6cCS5QrcmWeEmUEy03fElJ/BV5Ly4MMTsmwdOK803zY3wJP5pPf026C40VrE1Q==} + engines: {node: '>= 14'} + deprecated: This package is now available at @solidjs/testing-library + peerDependencies: + solid-js: '>=1.0.0' + dependencies: + '@testing-library/dom': 8.19.0 + solid-js: 1.7.12 + dev: true + /sort-keys@4.2.0: resolution: {integrity: sha512-aUYIEU/UviqPgc8mHR6IW1EGxkAXpeRETYcrzg8cLAvUPZcpAlleSXHV2mY7G12GphSH6Gzv+4MMVSSkbdteHg==} engines: {node: '>=8'} @@ -11488,39 +11482,6 @@ packages: optional: true terser: optional: true - dependencies: - '@types/node': 18.16.6 - esbuild: 0.17.18 - postcss: 8.4.23 - rollup: 3.21.5 - optionalDependencies: - fsevents: 2.3.2 - dev: true - - /vite@4.3.9(@types/node@18.16.6)(sass@1.62.1): - resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} - engines: {node: ^14.18.0 || >=16.0.0} - hasBin: true - peerDependencies: - '@types/node': '>= 14' - less: '*' - sass: '*' - stylus: '*' - sugarss: '*' - terser: ^5.4.0 - peerDependenciesMeta: - '@types/node': - optional: true - less: - optional: true - sass: - optional: true - stylus: - optional: true - sugarss: - optional: true - terser: - optional: true dependencies: '@types/node': 18.17.19 esbuild: 0.18.20