Merge pull request #15 from nacteam/dev

Ripple effect for tappable components and other library improvements

.eslintignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.eslintrc

@@ -0,0 +1,12 @@
+{
+    "root": true,
+    "parser": "@typescript-eslint/parser",
+    "plugins": [
+        "@typescript-eslint"
+    ],
+    "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/eslint-recommended",
+        "plugin:@typescript-eslint/recommended"
+    ]
+}

package.json

@@ -1,50 +1,53 @@
 {
   "name": "@nacteam/sdfui",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Superdef UI kit for React based on Material Design 3",
   "type": "module",
   "scripts": {
     "rollup": "rollup -c",
     "test": "jest",
-    "dev": "vite"
+    "dev": "vite",
+    "lint": "eslint . --ext .ts,.tsx"
   },
   "publishConfig": {
     "registry": "https://npm.pkg.github.com/nacteam"
   },
   "author": "Mark Fomin",
   "license": "CC BY-NC-SA 4.0",
   "devDependencies": {
-    "@babel/core": "^7.23.7",
-    "@babel/preset-env": "^7.23.8",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/preset-typescript": "^7.23.3",
+    "@babel/core": "^7.24.4",
+    "@babel/preset-env": "^7.24.4",
+    "@babel/preset-react": "^7.24.1",
+    "@babel/preset-typescript": "^7.24.1",
     "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^11.1.6",
-    "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.11",
-    "@types/react": "^18.2.48",
-    "@types/react-dom": "^18.2.18",
+    "@testing-library/react": "^15.0.2",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
     "@vitejs/plugin-react": "^4.2.1",
     "babel-jest": "^29.7.0",
     "babel-loader": "^9.1.3",
     "esbuild-plugin-sass": "^1.0.1",
-    "eslint": "^8.55.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "rollup": "^4.9.6",
+    "rollup": "^4.14.3",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-scss": "^4.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.75.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.3.3",
-    "vite": "^5.0.8"
+    "typescript": "^5.4.5",
+    "vite": "^5.2.9",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.6"
   },
   "peerDependencies": {
     "react": "^18.2.0"

rollup.config.mjs

@@ -3,7 +3,7 @@ import commonjs from "@rollup/plugin-commonjs";
 import typescript from "@rollup/plugin-typescript";
 import dts from "rollup-plugin-dts";
 import postcss from "rollup-plugin-postcss";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
 import scss from "rollup-plugin-scss";
 import sass from "sass";
@@ -32,17 +32,20 @@ export default [
       typescript({ tsconfig: "./tsconfig.json" }),
       postcss({
         minimize: true,
-        modules: true,
-        use: ["scss"],
+        modules: {
+          localsConvention: "camelCaseOnly",
+        }
+
+        // use: ["scss"],
       }),
       terser(),
-      // scss({ output: "dist/index.css", failOnError: true, runtime: sass })
+      // scss({ output: "dist/index.css", failOnError: true, runtime: scss })
     ],
   },
   {
-    input: "dist/esm/index.d.ts",
+    input: "dist/esm/types/index.d.ts",
     output: [{ file: "dist/index.d.ts", format: "esm" }],
     plugins: [dts()],
-    external: [/\.css$/],
+    external: [/\.(css|less|scss)$/],
   },
 ];

src/App.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Button } from "./components";
+import { Button, Icon, Ripple } from "./components";
 import TextField from "./components/TextField";
 // import { Button, ConfigProvider } from ;
 import { ThemeContext } from "./core/theme";
@@ -13,51 +13,63 @@ function App() {
     setAppearance(appearance === "light" ? "dark" : "light");
   };
   const [tfV, setTfV] = useState('');
+  const testIcon = <Icon size={18}>
+      <title>add_24</title>
+      <desc>Created with Sketch.</desc>
+      <defs />
+      <g id="Page-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="add_24">
+          <rect id="Bounds" x="0" y="0" width="24" height="24" />
+          <path d="M13.000006,11 L19.5,11 C20.0522847,11 20.5,11.4477153 20.5,12 C20.5,12.5522847 20.0522847,13 19.5,13 L13.000006,13 L13.000006,19.500084 C13.000006,20.0523464 12.5523089,20.5000435 12.0000465,20.5000435 C12.000032,20.5000435 12.0000175,20.5000435 12.000003,20.5000435 C11.4477096,20.5000195 11,20.0522904 11,19.499997 L11,13 L4.5,13 C3.94771525,13 3.5,12.5522847 3.5,12 C3.5,11.4477153 3.94771525,11 4.5,11 L11,11 L11,4.50000301 C11,3.9477166 11.4477166,3.5 12.000003,3.5 C12.5522894,3.5 13.000006,3.9477166 13.000006,4.50000301 L13.000006,11 Z" id="Mask" fill="currentColor" />
+        </g>
+      </g>
+  </Icon>;
   return (
     <div className={`app ${appearance}`}>
       <TextField
-      mode="filled"
-      labelText={"Test!"}
-      onChange={ (value: any) => {setTfV(value)} }/>
+        mode="filled"
+        labelText={"Test!"}
+        onChange={(value: any) => { setTfV(value) }} />
       <Button
-        onClick={toggleAppearance}
-        style={"filled"}
+        variant={"filled"}
       >
         Change theme! (filled)
+        <Ripple />
       </Button>
       <Button
         onClick={toggleAppearance}
-        style={"filled"}
+        variant={"filled"}
         disabled={true}
       >
         Change theme! (filled, disabled)
       </Button>
       <Button
         onClick={toggleAppearance}
-        style={"filled-tonal"}
+        variant={"filled-tonal"}
       >
         Change theme! (tonal)
       </Button>
       <Button
         onClick={() => alert(tfV)}
-        style={"outlined"}
+        variant={"outlined"}
         disabled={true}
       >
         Change theme! (outlined, disabled)
       </Button>
       <Button
         onClick={() => alert(tfV)}
-        style={"outlined"}
+        variant={"outlined"}
       >
         Change theme! (outlined)
       </Button>
-      <br/>
+      <br />
       <Button
         onClick={() => alert(tfV)}
-        style={"elevated"}
+        variant={"elevated"}
       >
         Change theme! (outlined)
       </Button>
+      { testIcon }
     </div>
   );
 }

src/components/Button/Button.module.scss

@@ -11,16 +11,23 @@ button {
     margin: 0;
     padding: 0;
     user-select: none;
+    height: 40px;
     border-radius: 100px;
 }
 button > .container {
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
-    padding: 10px 24px 10px 16px;
+    padding: 10px 24px;
     width: inherit;
 }
+button.icon > .container {
+    padding: 10px 24px 10px 16px;
+}
+button.icon > .container > svg {
+    margin-right: 8px;
+}
 button:enabled {
     cursor: pointer;
 }
@@ -66,6 +73,7 @@ button.outlined:disabled {
     color: var(--on-surface);
     opacity: 0.12;
 }
-button.text {
-
-}
+// button > .container > .label-text {
+//     line-height: 20pt;
+//     font-size: 14pt;
+// }

src/components/Button/Button.tsx

@@ -1,30 +1,46 @@
 import React from "react";
 import { useAppearance } from "../../hooks/themes";
-import "./Button.scss";
+import classes from "./Button.module.scss";
+import Ripple from "../Ripple";
 
-export interface ButtonProps {
-  children?: any; // FIXME
-  style?: "elevated" | "filled" | "filled-tonal" | "outlined" | "text";
-  // TODO: resolve issue https://github.com/nacteam/sdfui/issues/2
-  // color?: "primary" | "secondary" | "tertiary" | "neutral";
-  disabled?: boolean;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+export interface ButtonProps extends Omit<
+  React.DetailedHTMLProps<
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement
+  >,
+  "variant"
+> {
+  variant?: "elevated" | "filled" | "filled-tonal" | "outlined" | "text";
+  icon?: React.ReactNode;
 }
 
 const Button = (props: ButtonProps) => {
-  const { appearance, setAppearance } = useAppearance();
+  const { appearance } = useAppearance();
+  const styleClassNames = {
+    elevated: classes.elevated,
+    filled: classes.filled,
+    "filled-tonal": classes.filledTonal,
+    outlined: classes.outlined,
+    text: classes.text,
+    container: classes.container,
+    "label-text": classes.labelText
+  }
+
+  const { variant, icon, ...restProps } = props;
+
   return (
     <button
       onClick={props.onClick}
-      className={`${props.style || "neutral"} ${appearance}`}
-      disabled={props.disabled}
+      className={`${styleClassNames[variant || "filled"]} ${appearance} ${icon ? classes.icon : ""}`}
+      {...restProps}
     >
-      <div className={"container"}>
-        {/* place for Icon # todo  */}
-        <div className="label_text">
-          {props.children}
+      <div className={classes.container}>
+        { icon }
+        <div className={classes.labelText}>
+          { props.children }
         </div>
       </div>
+      <Ripple />
     </button>
   );
 };