Add LoadingButton support

.gitignore

@@ -9,4 +9,5 @@ dist
 lib
 node_modules
 temp
-vite.config.js.timestamp*
+vite.config.js.timestamp*
+.idea

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

packages/lab/CHANGELOG.md

@@ -0,0 +1 @@
+# @suid/lab

packages/lab/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Juanra GM <[email protected]>
+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.

packages/lab/README.md

@@ -0,0 +1,20 @@
+# @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/lab?label=@suid/lab
+
+## Installation
+
+```sh
+npm install @suid/lab
+```
+
+## Documentation
+
+https://suid.io
+
+## License
+
+Distributed under the MIT License. See LICENSE for more information.

packages/lab/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@suid/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",
+    "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/material": "workspace:*",
+    "@suid/system": "workspace:*",
+    "@suid/types": "workspace:*",
+    "@suid/utils": "workspace:*",
+    "clsx": "^1.2.1"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.7.11"
+  },
+  "publishConfig": {
+    "directory": "lib"
+  }
+}

packages/lab/src/LoadingButton/LoadingButton.tsx

@@ -0,0 +1,223 @@
+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";
+import { JSXElement } from "solid-js";
+
+type OwnerState = InPropsOf<LoadingButtonTypeMap>;
+
+const $ = createComponentFactory<LoadingButtonTypeMap>()({
+  name: "MuiLoadingButton",
+  selfPropNames: [
+    "classes",
+    "loading",
+    "disabled",
+    "loadingIndicator",
+    "loadingPosition",
+  ],
+  utilityClass: getLoadingButtonUtilityClass,
+  propDefaults: ({ set }) => {
+    return set({
+      get disabled() {
+        return false;
+      },
+      get loading() {
+        return false;
+      },
+      loadingIndicator: () => <CircularProgress color="inherit" size={16} />,
+      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>(({ 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>(({ 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 = () => <span>{allProps.children}</span>;
+
+  return (
+    <LoadingButtonRoot
+      disabled={allProps.disabled || props.loading}
+      {...otherProps}
+      variant={allProps.variant}
+      class={clsx(classes.root, otherProps.class)}
+      ownerState={allProps}
+    >
+      {allProps.loadingPosition === "end" ? (
+        <>
+          {getChildren()}
+          {props.loading && (
+            <LoadingButtonLoadingIndicator
+              class={classes.loadingIndicator}
+              ownerState={allProps}
+            >
+              {props.loadingIndicator as JSXElement}
+            </LoadingButtonLoadingIndicator>
+          )}
+        </>
+      ) : (
+        <>
+          {props.loading && (
+            <LoadingButtonLoadingIndicator
+              class={classes.loadingIndicator}
+              ownerState={allProps}
+            >
+              {props.loadingIndicator as JSXElement}
+            </LoadingButtonLoadingIndicator>
+          )}
+          {getChildren()}
+        </>
+      )}
+    </LoadingButtonRoot>
+  );
+});
+
+export default LoadingButton;