From 6d588fe44207a97c42c12f680af81fe748c84839 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Fri, 18 Mar 2022 14:31:53 +0430 Subject: [PATCH 001/284] Update the button component --- .../material-tailwind-react/src/components/Button/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Button/index.js b/packages/material-tailwind-react/src/components/Button/index.js index e2aeb90ab..16a01f982 100644 --- a/packages/material-tailwind-react/src/components/Button/index.js +++ b/packages/material-tailwind-react/src/components/Button/index.js @@ -1,4 +1,3 @@ -/* eslint-disable no-unused-expressions */ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; @@ -67,6 +66,7 @@ export const Button = forwardRef( ref={ref} className={classes} {...rest} + type={rest.type || "button"} onMouseUp={(e) => { const { onMouseUp } = rest || undefined; @@ -75,8 +75,9 @@ export const Button = forwardRef( e, variant === "filled" || variant === "gradient" ? "light" : "dark", ); - typeof onMouseUp === "function" && onMouseUp(); } + + return typeof onMouseUp === "function" && onMouseUp(); }} > {children} From 5b22a99f85a0b7eceb7920f7a2f1d068c86a9533 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Fri, 18 Mar 2022 14:32:13 +0430 Subject: [PATCH 002/284] Set the react version config for the pages --- pages/_document.js | 5 ----- pages/index.js | 26 +------------------------- tailwind.config.js | 7 +------ 3 files changed, 2 insertions(+), 36 deletions(-) diff --git a/pages/_document.js b/pages/_document.js index 2a881c077..498f63a97 100644 --- a/pages/_document.js +++ b/pages/_document.js @@ -10,11 +10,6 @@ class MyDocument extends Document { href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@100;200;300;400;500;600;700;800;900&family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet" /> -
diff --git a/pages/index.js b/pages/index.js index cb91870f1..66503ca03 100644 --- a/pages/index.js +++ b/pages/index.js @@ -3,7 +3,7 @@ import Button from "../packages/material-tailwind-react/src/components/Button"; export default function Home() { return (
- {/*

Sizes

+

Sizes

@@ -205,30 +205,6 @@ export default function Home() { - -
*/} - -
- - - - -

Hello World

- -
Alert primary
); diff --git a/tailwind.config.js b/tailwind.config.js index 3371d7b2f..72ebcd633 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,4 +1,4 @@ -const withMT = require("./packages/material-tailwind-html/utils/withMT"); +const withMT = require("./packages/material-tailwind-react/src/utils/withMT"); module.exports = withMT({ content: [ @@ -6,11 +6,6 @@ module.exports = withMT({ "./components/**/*.{js,ts,jsx,tsx}" ], theme: { - colors: { - pink: { - 500: "#ff4444" - } - }, extend: {} }, plugins: [] From 241ce018d63983749aef44b7a7905e05bf4ac766 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sat, 19 Mar 2022 00:31:49 +0430 Subject: [PATCH 003/284] Add react-transition-group --- packages/material-tailwind-react/package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json index 893959e6f..254d57dca 100644 --- a/packages/material-tailwind-react/package.json +++ b/packages/material-tailwind-react/package.json @@ -17,7 +17,8 @@ "material-ripple-effects": "^2.0.1", "prop-types": "^15.8.1", "react": "17.0.2", - "react-dom": "17.0.2" + "react-dom": "17.0.2", + "react-transition-group": "^4.4.2" }, "devDependencies": { "@vitejs/plugin-react": "1.0.7", From de3747869743c59bcaeb7a8f6e2991c36ecce9ca Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sat, 19 Mar 2022 00:32:04 +0430 Subject: [PATCH 004/284] Update the button component --- .../src/components/Button/index.js | 23 +------------------ 1 file changed, 1 insertion(+), 22 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Button/index.js b/packages/material-tailwind-react/src/components/Button/index.js index 16a01f982..77eefe474 100644 --- a/packages/material-tailwind-react/src/components/Button/index.js +++ b/packages/material-tailwind-react/src/components/Button/index.js @@ -2,30 +2,9 @@ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; +import validColors from "utils/validColors"; import { MaterialTailwindTheme } from "context/theme"; -const validColors = { - "blue-grey": "blue-grey", - grey: "grey", - brown: "brown", - "deep-orange": "deep-orange", - orange: "orange", - amber: "amber", - yellow: "yellow", - lime: "lime", - "light-green": "light-green", - green: "green", - teal: "teal", - cyan: "cyan", - "light-blue": "light-blue", - blue: "blue", - indigo: "indigo", - "deep-purple": "deep-purple", - purple: "purple", - pink: "pink", - red: "red", -}; - export const Button = forwardRef( ({ variant, size, color, fullWidth, ripple, className, children, ...rest }, ref) => { const { button } = useContext(MaterialTailwindTheme); From 940f099c3035ba318e2c8756074e9a3c38ba0ce9 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sat, 19 Mar 2022 00:32:28 +0430 Subject: [PATCH 005/284] Update the button styles object --- .../src/theme/components/button/index.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/material-tailwind-react/src/theme/components/button/index.js b/packages/material-tailwind-react/src/theme/components/button/index.js index ba3e3735d..f1b2e5388 100644 --- a/packages/material-tailwind-react/src/theme/components/button/index.js +++ b/packages/material-tailwind-react/src/theme/components/button/index.js @@ -17,13 +17,13 @@ const button = { typography: { family: "font-sans", size: "text-xs", - weight: "font-medium", + weight: "font-semibold", align: "text-center", transform: "uppercase", }, sizes: { sm: { - padding: { + spacing: { x: "px-4", y: "py-2", }, @@ -36,7 +36,7 @@ const button = { }, }, md: { - padding: { + spacing: { x: "px-6", y: "py-3", }, @@ -49,7 +49,7 @@ const button = { }, }, lg: { - padding: { + spacing: { x: "px-7", y: "py-3.5", }, From 71a358fc1ce08a38ebb7bce487d74003eeb0cbfd Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sat, 19 Mar 2022 00:32:42 +0430 Subject: [PATCH 006/284] Add the validColors helper --- .../src/utils/validColors.js | 23 +++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 packages/material-tailwind-react/src/utils/validColors.js diff --git a/packages/material-tailwind-react/src/utils/validColors.js b/packages/material-tailwind-react/src/utils/validColors.js new file mode 100644 index 000000000..b87fa9367 --- /dev/null +++ b/packages/material-tailwind-react/src/utils/validColors.js @@ -0,0 +1,23 @@ +const validColors = { + "blue-grey": "blue-grey", + grey: "grey", + brown: "brown", + "deep-orange": "deep-orange", + orange: "orange", + amber: "amber", + yellow: "yellow", + lime: "lime", + "light-green": "light-green", + green: "green", + teal: "teal", + cyan: "cyan", + "light-blue": "light-blue", + blue: "blue", + indigo: "indigo", + "deep-purple": "deep-purple", + purple: "purple", + pink: "pink", + red: "red", +}; + +export default validColors; From 4669c1c99965415e7b63cf0e74511e4f467e98bd Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sat, 19 Mar 2022 00:32:54 +0430 Subject: [PATCH 007/284] Add the alert component --- .../src/components/Alert/index.js | 179 ++++++++++++++++++ .../src/theme/components/alert/alertFilled.js | 80 ++++++++ .../theme/components/alert/alertGradient.js | 80 ++++++++ .../src/theme/components/alert/index.js | 53 ++++++ .../src/theme/index.js | 2 + pages/index.js | 45 ++++- 6 files changed, 438 insertions(+), 1 deletion(-) create mode 100644 packages/material-tailwind-react/src/components/Alert/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/alert/alertFilled.js create mode 100644 packages/material-tailwind-react/src/theme/components/alert/alertGradient.js create mode 100644 packages/material-tailwind-react/src/theme/components/alert/index.js diff --git a/packages/material-tailwind-react/src/components/Alert/index.js b/packages/material-tailwind-react/src/components/Alert/index.js new file mode 100644 index 000000000..46a1ba6c0 --- /dev/null +++ b/packages/material-tailwind-react/src/components/Alert/index.js @@ -0,0 +1,179 @@ +import { forwardRef, useContext, useRef } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import { Transition } from "react-transition-group"; +import Ripple from "material-ripple-effects"; +import merge from "deepmerge"; +import validColors from "utils/validColors"; +import { MaterialTailwindTheme } from "context/theme"; + +export const Alert = forwardRef( + ( + { + variant, + color, + icon, + show, + dismissble, + animate, + transitionProps, + className, + children, + ...rest + }, + ref, + ) => { + const { alert } = useContext(MaterialTailwindTheme); + const { defaultProps } = alert; + const { root, variants, typography, spacing, border, animation } = alert.styles; + const rippleEffect = new Ripple(); + const alertRef = useRef(null); + + variant = variant || defaultProps.variant; + color = color || defaultProps.color; + className = className || defaultProps.className; + + const alertVariant = variants[variant] + ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") + : ""; + const alertTypography = Object.values(typography).join(" "); + const alertPadding = Object.values(spacing).join(" "); + const alertBorder = Object.values(border).join(" "); + + const classes = classnames( + root, + alertVariant, + alertTypography, + alertPadding, + alertBorder, + className, + ); + + const mainTransition = { + transition: { + transitionProperty: "opacity", + transitionDuration: "300ms", + transitionTimingFunction: "linear", + opacity: 0, + }, + state: { + entering: { opacity: 1 }, + entered: { opacity: 1 }, + exiting: { opacity: 0 }, + exited: { opacity: 0 }, + }, + }; + + const appliedTransition = merge.all([mainTransition, animation, { ...animate }]); + + const iconTemplate =
{icon}
; + + return dismissble ? ( + + {(state) => ( +
+ {icon && iconTemplate} +
{children}
+ {dismissble && ( +
+
null} + onMouseDown={(e) => !dismissble.action && rippleEffect.create(e, "light")} + className={`w-max ${dismissble.action ? "" : "p-1 rounded-full"}`} + > + {dismissble.action || ( + + + + )} +
+
+ )} +
+ )} + + ) : ( +
+ {icon ? ( + <> + {iconTemplate} +
{children}
+ + ) : ( + children + )} +
+ ); + }, +); + +Alert.propTypes = { + variant: PropTypes.oneOf(["filled", "gradient"]), + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + icon: PropTypes.node, + show: PropTypes.bool, + dismissble: PropTypes.shape({ + timeout: PropTypes.number, + action: PropTypes.node, + onClose: PropTypes.func.isRequired, + }), + animate: PropTypes.shape({ + transition: PropTypes.instanceOf(Object), + state: PropTypes.instanceOf(Object), + }), + transitionProps: PropTypes.instanceOf(Object), + className: PropTypes.string, + children: PropTypes.node.isRequired, +}; + +Alert.displayName = "Alert"; + +export default Alert; diff --git a/packages/material-tailwind-react/src/theme/components/alert/alertFilled.js b/packages/material-tailwind-react/src/theme/components/alert/alertFilled.js new file mode 100644 index 000000000..08eb5c017 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/alert/alertFilled.js @@ -0,0 +1,80 @@ +const alertFilled = { + "blue-grey": { + backgroud: "bg-blue-grey-500", + color: "text-white", + }, + grey: { + backgroud: "bg-grey-500", + color: "text-white", + }, + brown: { + backgroud: "bg-brown-500", + color: "text-white", + }, + "deep-orange": { + backgroud: "bg-deep-orange-500", + color: "text-white", + }, + orange: { + backgroud: "bg-orange-500", + color: "text-white", + }, + amber: { + backgroud: "bg-amber-500", + color: "text-black", + }, + yellow: { + backgroud: "bg-yellow-500", + color: "text-black", + }, + lime: { + backgroud: "bg-lime-500", + color: "text-black", + }, + "light-green": { + backgroud: "bg-light-green-500", + color: "text-white", + }, + green: { + backgroud: "bg-green-500", + color: "text-white", + }, + teal: { + backgroud: "bg-teal-500", + color: "text-white", + }, + cyan: { + backgroud: "bg-cyan-500", + color: "text-white", + }, + "light-blue": { + backgroud: "bg-light-blue-500", + color: "text-white", + }, + blue: { + backgroud: "bg-blue-500", + color: "text-white", + }, + indigo: { + backgroud: "bg-indigo-500", + color: "text-white", + }, + "deep-purple": { + backgroud: "bg-deep-purple-500", + color: "text-white", + }, + purple: { + backgroud: "bg-purple-500", + color: "text-white", + }, + pink: { + backgroud: "bg-pink-500", + color: "text-white", + }, + red: { + backgroud: "bg-red-500", + color: "text-white", + }, +}; + +export default alertFilled; diff --git a/packages/material-tailwind-react/src/theme/components/alert/alertGradient.js b/packages/material-tailwind-react/src/theme/components/alert/alertGradient.js new file mode 100644 index 000000000..4446e038e --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/alert/alertGradient.js @@ -0,0 +1,80 @@ +const alertGradient = { + "blue-grey": { + backgroud: "bg-gradient-to-tr from-blue-grey-600 to-blue-grey-400", + color: "text-white", + }, + grey: { + backgroud: "bg-gradient-to-tr from-grey-600 to-grey-400", + color: "text-white", + }, + brown: { + backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400", + color: "text-white", + }, + "deep-orange": { + backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400", + color: "text-white", + }, + orange: { + backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400", + color: "text-white", + }, + amber: { + backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400", + color: "text-black", + }, + yellow: { + backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400", + color: "text-black", + }, + lime: { + backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400", + color: "text-black", + }, + "light-green": { + backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400", + color: "text-white", + }, + green: { + backgroud: "bg-gradient-to-tr from-green-600 to-green-400", + color: "text-white", + }, + teal: { + backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400", + color: "text-white", + }, + cyan: { + backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400", + color: "text-white", + }, + "light-blue": { + backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400", + color: "text-white", + }, + blue: { + backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400", + color: "text-white", + }, + indigo: { + backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400", + color: "text-white", + }, + "deep-purple": { + backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400", + color: "text-white", + }, + purple: { + backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400", + color: "text-white", + }, + pink: { + backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400", + color: "text-white", + }, + red: { + backgroud: "bg-gradient-to-tr from-red-600 to-red-400", + color: "text-white", + }, +}; + +export default alertGradient; diff --git a/packages/material-tailwind-react/src/theme/components/alert/index.js b/packages/material-tailwind-react/src/theme/components/alert/index.js new file mode 100644 index 000000000..e5092c163 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/alert/index.js @@ -0,0 +1,53 @@ +import alertFilled from "theme/components/alert/alertFilled"; +import alertGradient from "theme/components/alert/alertGradient"; + +const alert = { + defaultProps: { + variant: "filled", + color: "light-blue", + icon: "", + show: false, + dismissble: { + action: false, + onClose: false, + }, + animate: {}, + transitionProps: {}, + className: "", + }, + styles: { + root: "relative block w-full", + spacing: { + x: "px-4", + y: "py-4", + }, + border: { + radius: "rounded-md", + }, + typography: { + family: "font-sans", + size: "text-base", + weight: "font-regular", + }, + variants: { + filled: alertFilled, + gradient: alertGradient, + }, + animation: { + transition: { + transitionProperty: "opacity", + transitionDuration: "300ms", + transitionTimingFunction: "linear", + opacity: 0, + }, + state: { + entering: { opacity: 1 }, + entered: { opacity: 1 }, + exiting: { opacity: 0 }, + exited: { opacity: 0 }, + }, + }, + }, +}; + +export default alert; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index 40211e000..ae7c79eb9 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -1,7 +1,9 @@ import button from "theme/components/button"; +import alert from "theme/components/alert"; const theme = { button, + alert, }; export default theme; diff --git a/pages/index.js b/pages/index.js index 66503ca03..e94e6b53e 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,10 @@ -import Button from "../packages/material-tailwind-react/src/components/Button"; +import Button from "components/Button"; +import Alert from "components/Alert"; + +import { useState } from "react"; export default function Home() { + const [show, setShow] = useState(false); return (

Sizes

@@ -206,6 +210,45 @@ export default function Home() { Button
+

Alerts

+
+ + setShow(false) + }} + variant="gradient" + color="red" + icon={ + + + + } + className="mt-10" + > +

+ Hello World +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae + mollitia dicta explicabo maiores cupiditate inventore, et aperiam, + quis doloribus vitae aspernatur dolor aut delectus, temporibus + expedita iusto dolore adipisci reprehenderit. +

+ +
); } From 7b108aa2b9a5ce0be407c01ea0558c6bc666f94c Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sun, 20 Mar 2022 19:34:50 +0430 Subject: [PATCH 008/284] Update the button ripple effect config --- .../material-tailwind-react/src/components/Button/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Button/index.js b/packages/material-tailwind-react/src/components/Button/index.js index 77eefe474..6e97b6eea 100644 --- a/packages/material-tailwind-react/src/components/Button/index.js +++ b/packages/material-tailwind-react/src/components/Button/index.js @@ -46,8 +46,8 @@ export const Button = forwardRef( className={classes} {...rest} type={rest.type || "button"} - onMouseUp={(e) => { - const { onMouseUp } = rest || undefined; + onMouseDown={(e) => { + const { onMouseDown } = rest || undefined; if (ripple) { rippleEffect.create( @@ -56,7 +56,7 @@ export const Button = forwardRef( ); } - return typeof onMouseUp === "function" && onMouseUp(); + return typeof onMouseDown === "function" && onMouseDown(); }} > {children} From 5af8e586e9bdd0453ee2114f7c772985d0f4ea76 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sun, 20 Mar 2022 19:36:01 +0430 Subject: [PATCH 009/284] Update the index page alert button --- pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/pages/index.js b/pages/index.js index e94e6b53e..bf1de1001 100644 --- a/pages/index.js +++ b/pages/index.js @@ -212,7 +212,7 @@ export default function Home() {

Alerts

- + Date: Sun, 20 Mar 2022 22:41:42 +0430 Subject: [PATCH 010/284] Update the alert dismissible prop --- .../src/components/Alert/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Alert/index.js b/packages/material-tailwind-react/src/components/Alert/index.js index 46a1ba6c0..4ada6f6b7 100644 --- a/packages/material-tailwind-react/src/components/Alert/index.js +++ b/packages/material-tailwind-react/src/components/Alert/index.js @@ -14,7 +14,7 @@ export const Alert = forwardRef( color, icon, show, - dismissble, + dismissible, animate, transitionProps, className, @@ -68,7 +68,7 @@ export const Alert = forwardRef( const iconTemplate =
{icon}
; - return dismissble ? ( + return dismissible ? ( {icon && iconTemplate}
{children}
- {dismissble && ( + {dismissible && (
null} - onMouseDown={(e) => !dismissble.action && rippleEffect.create(e, "light")} - className={`w-max ${dismissble.action ? "" : "p-1 rounded-full"}`} + onMouseDown={(e) => !dismissible.action && rippleEffect.create(e, "light")} + className={`w-max ${dismissible.action ? "" : "p-1 rounded-full"}`} > - {dismissble.action || ( + {dismissible.action || ( Date: Sun, 20 Mar 2022 23:06:53 +0430 Subject: [PATCH 011/284] Update the alert styles --- .../material-tailwind-react/src/components/Alert/index.js | 4 ++-- .../src/theme/components/alert/index.js | 2 +- pages/index.js | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Alert/index.js b/packages/material-tailwind-react/src/components/Alert/index.js index 4ada6f6b7..7785d5af7 100644 --- a/packages/material-tailwind-react/src/components/Alert/index.js +++ b/packages/material-tailwind-react/src/components/Alert/index.js @@ -93,14 +93,14 @@ export const Alert = forwardRef( {icon && iconTemplate}
{children}
{dismissible && ( -
+
null} onMouseDown={(e) => !dismissible.action && rippleEffect.create(e, "light")} - className={`w-max ${dismissible.action ? "" : "p-1 rounded-full"}`} + className={`w-max ${dismissible.action ? "" : "p-1 rounded-lg"}`} > {dismissible.action || ( setShow(!show)}>Trigger Alert setShow(false) }} variant="gradient" From ad6c4d1959a42aa7d27d9f9368a51719d01dba04 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 13:16:06 +0430 Subject: [PATCH 012/284] Update the alert component --- packages/material-tailwind-react/src/components/Alert/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-tailwind-react/src/components/Alert/index.js b/packages/material-tailwind-react/src/components/Alert/index.js index 7785d5af7..aeaf8b7d2 100644 --- a/packages/material-tailwind-react/src/components/Alert/index.js +++ b/packages/material-tailwind-react/src/components/Alert/index.js @@ -161,7 +161,6 @@ Alert.propTypes = { icon: PropTypes.node, show: PropTypes.bool, dismissible: PropTypes.shape({ - timeout: PropTypes.number, action: PropTypes.node, onClose: PropTypes.func.isRequired, }), From 1b3a4f321add7caadaeb08db8677550abf09f375 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 13:16:15 +0430 Subject: [PATCH 013/284] Add the chip component --- .../src/components/Chip/index.js | 178 ++++++++++++++++++ .../src/theme/components/chip/chipFilled.js | 80 ++++++++ .../src/theme/components/chip/chipGradient.js | 80 ++++++++ .../src/theme/components/chip/index.js | 56 ++++++ .../src/theme/index.js | 2 + pages/index.js | 54 ++++++ 6 files changed, 450 insertions(+) create mode 100644 packages/material-tailwind-react/src/components/Chip/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/chip/chipFilled.js create mode 100644 packages/material-tailwind-react/src/theme/components/chip/chipGradient.js create mode 100644 packages/material-tailwind-react/src/theme/components/chip/index.js diff --git a/packages/material-tailwind-react/src/components/Chip/index.js b/packages/material-tailwind-react/src/components/Chip/index.js new file mode 100644 index 000000000..99cef6d51 --- /dev/null +++ b/packages/material-tailwind-react/src/components/Chip/index.js @@ -0,0 +1,178 @@ +import { forwardRef, useContext, useRef } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import { Transition } from "react-transition-group"; +import Ripple from "material-ripple-effects"; +import merge from "deepmerge"; +import validColors from "utils/validColors"; +import { MaterialTailwindTheme } from "context/theme"; + +export const Chip = forwardRef( + ( + { + variant, + color, + icon, + show, + dismissible, + animate, + transitionProps, + className, + value, + ...rest + }, + ref, + ) => { + const { chip } = useContext(MaterialTailwindTheme); + const { defaultProps } = chip; + const { root, variants, typography, spacing, border, animation } = chip.styles; + const rippleEffect = new Ripple(); + const chipRef = useRef(null); + + variant = variant || defaultProps.variant; + color = color || defaultProps.color; + className = className || defaultProps.className; + + const chipVariant = variants[variant] + ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") + : ""; + const chipTypography = Object.values(typography).join(" "); + const chipPadding = Object.values(spacing).join(" "); + const chipBorder = Object.values(border).join(" "); + + const classes = classnames( + root, + chipVariant, + chipTypography, + chipPadding, + chipBorder, + className, + ); + + const mainTransition = { + transition: { + transitionProperty: "opacity", + transitionDuration: "300ms", + transitionTimingFunction: "linear", + opacity: 0, + }, + state: { + entering: { opacity: 1 }, + entered: { opacity: 1 }, + exiting: { opacity: 0 }, + exited: { opacity: 0 }, + }, + }; + + const appliedTransition = merge.all([mainTransition, animation, { ...animate }]); + + const iconTemplate = ( +
{icon}
+ ); + + return dismissible ? ( + + {(state) => ( +
+ {icon && iconTemplate} +
{value}
+ {dismissible && ( +
+
null} + onMouseDown={(e) => !dismissible.action && rippleEffect.create(e, "light")} + className={`w-5 h-5 ${dismissible.action ? "" : "p-1 rounded"}`} + > + {dismissible.action || ( + + + + )} +
+
+ )} +
+ )} + + ) : ( +
+ {icon ? ( + <> + {iconTemplate} +
{value}
+ + ) : ( +
{value}
+ )} +
+ ); + }, +); + +Chip.propTypes = { + variant: PropTypes.oneOf(["filled", "gradient"]), + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + icon: PropTypes.node, + show: PropTypes.bool, + dismissible: PropTypes.shape({ + action: PropTypes.node, + onClose: PropTypes.func.isRequired, + }), + animate: PropTypes.shape({ + transition: PropTypes.instanceOf(Object), + state: PropTypes.instanceOf(Object), + }), + transitionProps: PropTypes.instanceOf(Object), + className: PropTypes.string, + value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, +}; + +Chip.displayName = "Chip"; + +export default Chip; diff --git a/packages/material-tailwind-react/src/theme/components/chip/chipFilled.js b/packages/material-tailwind-react/src/theme/components/chip/chipFilled.js new file mode 100644 index 000000000..e9f272d77 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/chip/chipFilled.js @@ -0,0 +1,80 @@ +const chipFilled = { + "blue-grey": { + backgroud: "bg-blue-grey-500", + color: "text-white", + }, + grey: { + backgroud: "bg-grey-500", + color: "text-white", + }, + brown: { + backgroud: "bg-brown-500", + color: "text-white", + }, + "deep-orange": { + backgroud: "bg-deep-orange-500", + color: "text-white", + }, + orange: { + backgroud: "bg-orange-500", + color: "text-white", + }, + amber: { + backgroud: "bg-amber-500", + color: "text-black", + }, + yellow: { + backgroud: "bg-yellow-500", + color: "text-black", + }, + lime: { + backgroud: "bg-lime-500", + color: "text-black", + }, + "light-green": { + backgroud: "bg-light-green-500", + color: "text-white", + }, + green: { + backgroud: "bg-green-500", + color: "text-white", + }, + teal: { + backgroud: "bg-teal-500", + color: "text-white", + }, + cyan: { + backgroud: "bg-cyan-500", + color: "text-white", + }, + "light-blue": { + backgroud: "bg-light-blue-500", + color: "text-white", + }, + blue: { + backgroud: "bg-blue-500", + color: "text-white", + }, + indigo: { + backgroud: "bg-indigo-500", + color: "text-white", + }, + "deep-purple": { + backgroud: "bg-deep-purple-500", + color: "text-white", + }, + purple: { + backgroud: "bg-purple-500", + color: "text-white", + }, + pink: { + backgroud: "bg-pink-500", + color: "text-white", + }, + red: { + backgroud: "bg-red-500", + color: "text-white", + }, +}; + +export default chipFilled; diff --git a/packages/material-tailwind-react/src/theme/components/chip/chipGradient.js b/packages/material-tailwind-react/src/theme/components/chip/chipGradient.js new file mode 100644 index 000000000..345757321 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/chip/chipGradient.js @@ -0,0 +1,80 @@ +const chipGradient = { + "blue-grey": { + backgroud: "bg-gradient-to-tr from-blue-grey-600 to-blue-grey-400", + color: "text-white", + }, + grey: { + backgroud: "bg-gradient-to-tr from-grey-600 to-grey-400", + color: "text-white", + }, + brown: { + backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400", + color: "text-white", + }, + "deep-orange": { + backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400", + color: "text-white", + }, + orange: { + backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400", + color: "text-white", + }, + amber: { + backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400", + color: "text-black", + }, + yellow: { + backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400", + color: "text-black", + }, + lime: { + backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400", + color: "text-black", + }, + "light-green": { + backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400", + color: "text-white", + }, + green: { + backgroud: "bg-gradient-to-tr from-green-600 to-green-400", + color: "text-white", + }, + teal: { + backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400", + color: "text-white", + }, + cyan: { + backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400", + color: "text-white", + }, + "light-blue": { + backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400", + color: "text-white", + }, + blue: { + backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400", + color: "text-white", + }, + indigo: { + backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400", + color: "text-white", + }, + "deep-purple": { + backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400", + color: "text-white", + }, + purple: { + backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400", + color: "text-white", + }, + pink: { + backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400", + color: "text-white", + }, + red: { + backgroud: "bg-gradient-to-tr from-red-600 to-red-400", + color: "text-white", + }, +}; + +export default chipGradient; diff --git a/packages/material-tailwind-react/src/theme/components/chip/index.js b/packages/material-tailwind-react/src/theme/components/chip/index.js new file mode 100644 index 000000000..6d29f2ec9 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/chip/index.js @@ -0,0 +1,56 @@ +import chipFilled from "theme/components/chip/chipFilled"; +import chipGradient from "theme/components/chip/chipGradient"; + +const chip = { + defaultProps: { + variant: "filled", + color: "light-blue", + icon: "", + show: false, + dismissble: { + action: false, + onClose: false, + }, + animate: {}, + transitionProps: {}, + className: "", + }, + styles: { + root: "relative inline-block whitespace-nowrap align-baseline select-none", + spacing: { + x: "px-3.5", + y: "py-2", + }, + border: { + radius: "rounded-md", + }, + typography: { + family: "font-sans", + size: "text-xs", + weight: "font-bold", + transform: "uppercase", + align: "center", + lineHeight: "leading-none", + }, + variants: { + filled: chipFilled, + gradient: chipGradient, + }, + animation: { + transition: { + transitionProperty: "opacity", + transitionDuration: "300ms", + transitionTimingFunction: "linear", + opacity: 0, + }, + state: { + entering: { opacity: 1 }, + entered: { opacity: 1 }, + exiting: { opacity: 0 }, + exited: { opacity: 0 }, + }, + }, + }, +}; + +export default chip; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index ae7c79eb9..ccfcbdb5b 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -1,9 +1,11 @@ import button from "theme/components/button"; import alert from "theme/components/alert"; +import chip from "theme/components/chip"; const theme = { button, alert, + chip, }; export default theme; diff --git a/pages/index.js b/pages/index.js index 9fcc142d8..cedbb7ced 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,10 +1,12 @@ import Button from "components/Button"; import Alert from "components/Alert"; +import Chip from "components/Chip"; import { useState } from "react"; export default function Home() { const [show, setShow] = useState(false); + const [showChip, setShowChip] = useState(false); return (

Sizes

@@ -212,6 +214,27 @@ export default function Home() {

Alerts

+ + + + } + className="my-10" + > + Just a simple alert +
+

Chips

+
+
+ +
+ + setShowChip(false) + }} + icon={ + + + + } + /> +
); } From 013b587c0ce245d78e00a0856e0cf2ccee56aefa Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 14:04:06 +0430 Subject: [PATCH 014/284] Add the avatar component --- .../src/components/Avatar/index.js | 33 +++++++++++ .../src/theme/components/avatar/index.js | 48 ++++++++++++++++ .../src/theme/index.js | 6 +- pages/index.js | 56 +++++++++++++++++++ 4 files changed, 141 insertions(+), 2 deletions(-) create mode 100644 packages/material-tailwind-react/src/components/Avatar/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/avatar/index.js diff --git a/packages/material-tailwind-react/src/components/Avatar/index.js b/packages/material-tailwind-react/src/components/Avatar/index.js new file mode 100644 index 000000000..cdb073aa4 --- /dev/null +++ b/packages/material-tailwind-react/src/components/Avatar/index.js @@ -0,0 +1,33 @@ +/* eslint-disable @next/next/no-img-element */ +/* eslint-disable jsx-a11y/alt-text */ +import { forwardRef, useContext } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import { MaterialTailwindTheme } from "context/theme"; + +export const Avatar = forwardRef(({ variant, size, className, ...rest }, ref) => { + const { avatar } = useContext(MaterialTailwindTheme); + const { defaultProps } = avatar; + const { root, variants, sizes } = avatar.styles; + + variant = variant || defaultProps.variant; + size = size || defaultProps.size; + className = className || defaultProps.className; + + const avatarVariant = variants[variant] || ""; + const avatarSize = sizes[size] ? Object.values(sizes[size]).join(" ") : ""; + + const classes = classnames(root, avatarVariant, avatarSize, className); + + return ; +}); + +Avatar.propTypes = { + size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), + variant: PropTypes.oneOf(["rounded", "circular"]), + className: PropTypes.string, +}; + +Avatar.displayName = "Avatar"; + +export default Avatar; diff --git a/packages/material-tailwind-react/src/theme/components/avatar/index.js b/packages/material-tailwind-react/src/theme/components/avatar/index.js new file mode 100644 index 000000000..70925abc2 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/avatar/index.js @@ -0,0 +1,48 @@ +const avatar = { + defaultProps: { + variant: "rounded", + size: "md", + className: "", + }, + styles: { + root: "inline-block relative object-cover object-center", + sizes: { + xs: { + with: "w-6", + height: "h-6", + borderRadius: "rounded-md", + }, + sm: { + with: "w-9", + height: "h-9", + borderRadius: "rounded-md", + }, + md: { + with: "w-12", + height: "h-12", + borderRadius: "rounded-lg", + }, + lg: { + with: "w-[58px]", + height: "h-[58px]", + borderRadius: "rounded-lg", + }, + xl: { + with: "w-[74px]", + height: "h-[74px]", + borderRadius: "rounded-xl", + }, + xxl: { + with: "w-[110px]", + height: "h-[110px]", + borderRadius: "rounded-2xl", + }, + }, + variants: { + rounded: "", + circular: "rounded-full", + }, + }, +}; + +export default avatar; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index ccfcbdb5b..cc8c7ac36 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -1,10 +1,12 @@ -import button from "theme/components/button"; import alert from "theme/components/alert"; +import avatar from "theme/components/avatar"; +import button from "theme/components/button"; import chip from "theme/components/chip"; const theme = { - button, alert, + avatar, + button, chip, }; diff --git a/pages/index.js b/pages/index.js index cedbb7ced..5330b838c 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,6 +1,7 @@ import Button from "components/Button"; import Alert from "components/Alert"; import Chip from "components/Chip"; +import Avatar from "components/Avatar"; import { useState } from "react"; @@ -303,6 +304,61 @@ export default function Home() { } />
+

Avatars

+
+ + + + + + +
+
+ + + + + + +
); } From 77170a65ce560267291035d3859921986a9c5774 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 17:02:30 +0430 Subject: [PATCH 015/284] Add icon button component --- .../src/components/IconButton/index.js | 97 +++++++++++ .../components/iconButton/buttonFilled.js | 156 ++++++++++++++++++ .../components/iconButton/buttonGradient.js | 137 +++++++++++++++ .../components/iconButton/buttonOutlined.js | 137 +++++++++++++++ .../theme/components/iconButton/buttonText.js | 99 +++++++++++ .../src/theme/components/iconButton/index.js | 75 +++++++++ .../src/theme/index.js | 2 + pages/index.js | 64 ++++++- 8 files changed, 766 insertions(+), 1 deletion(-) create mode 100644 packages/material-tailwind-react/src/components/IconButton/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/iconButton/buttonFilled.js create mode 100644 packages/material-tailwind-react/src/theme/components/iconButton/buttonGradient.js create mode 100644 packages/material-tailwind-react/src/theme/components/iconButton/buttonOutlined.js create mode 100644 packages/material-tailwind-react/src/theme/components/iconButton/buttonText.js create mode 100644 packages/material-tailwind-react/src/theme/components/iconButton/index.js diff --git a/packages/material-tailwind-react/src/components/IconButton/index.js b/packages/material-tailwind-react/src/components/IconButton/index.js new file mode 100644 index 000000000..3c83ef4f1 --- /dev/null +++ b/packages/material-tailwind-react/src/components/IconButton/index.js @@ -0,0 +1,97 @@ +import { forwardRef, useContext } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import Ripple from "material-ripple-effects"; +import validColors from "utils/validColors"; +import { MaterialTailwindTheme } from "context/theme"; + +export const IconButton = forwardRef( + ({ variant, size, color, ripple, className, children, ...rest }, ref) => { + const { iconButton } = useContext(MaterialTailwindTheme); + const { defaultProps } = iconButton; + const { root, variants, sizes, typography, transition } = iconButton.styles; + + variant = variant || defaultProps.variant; + size = size || defaultProps.size; + color = color || defaultProps.color; + ripple = ripple === undefined ? defaultProps.ripple : ripple; + className = className || defaultProps.className; + + const rippleEffect = ripple !== undefined && new Ripple(); + + const iconButtonVariant = variants[variant] + ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") + : ""; + const iconButtonSize = sizes[size] + ? Object.values(sizes[size]) + .map((value) => Object.values(value).join(" ")) + .join(" ") + : ""; + const iconButtonTypography = Object.values(typography).join(" "); + + const classes = classnames( + root, + iconButtonSize, + iconButtonVariant, + iconButtonTypography, + transition, + className, + ); + + return ( + + ); + }, +); + +IconButton.propTypes = { + variant: PropTypes.oneOf(["filled", "outlined", "gradient", "text"]), + size: PropTypes.oneOf(["sm", "md", "lg"]), + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + ripple: PropTypes.bool, + className: PropTypes.string, + children: PropTypes.node.isRequired, +}; + +IconButton.displayName = "IconButton"; + +export default IconButton; diff --git a/packages/material-tailwind-react/src/theme/components/iconButton/buttonFilled.js b/packages/material-tailwind-react/src/theme/components/iconButton/buttonFilled.js new file mode 100644 index 000000000..5a2fec0a5 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/iconButton/buttonFilled.js @@ -0,0 +1,156 @@ +const buttonFilled = { + "blue-grey": { + backgroud: "bg-blue-grey-500", + color: "text-white", + shadow: "shadow-md shadow-blue-grey-100", + hover: "hover:shadow-lg hover:shadow-blue-grey-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + grey: { + backgroud: "bg-grey-500", + color: "text-white", + shadow: "shadow-md shadow-grey-100", + hover: "hover:shadow-lg hover:shadow-grey-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + brown: { + backgroud: "bg-brown-500", + color: "text-white", + shadow: "shadow-md shadow-brown-100", + hover: "hover:shadow-lg hover:shadow-brown-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + "deep-orange": { + backgroud: "bg-deep-orange-500", + color: "text-white", + shadow: "shadow-md shadow-deep-orange-100", + hover: "hover:shadow-lg hover:shadow-deep-orange-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + orange: { + backgroud: "bg-orange-500", + color: "text-white", + shadow: "shadow-md shadow-orange-100", + hover: "hover:shadow-lg hover:shadow-orange-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + amber: { + backgroud: "bg-amber-500", + color: "text-black", + shadow: "shadow-md shadow-amber-100", + hover: "hover:shadow-lg hover:shadow-amber-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + yellow: { + backgroud: "bg-yellow-500", + color: "text-black", + shadow: "shadow-md shadow-yellow-100", + hover: "hover:shadow-lg hover:shadow-yellow-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + lime: { + backgroud: "bg-lime-500", + color: "text-black", + shadow: "shadow-md shadow-lime-100", + hover: "hover:shadow-lg hover:shadow-lime-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + "light-green": { + backgroud: "bg-light-green-500", + color: "text-white", + shadow: "shadow-md shadow-light-green-100", + hover: "hover:shadow-lg hover:shadow-light-green-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + green: { + backgroud: "bg-green-500", + color: "text-white", + shadow: "shadow-md shadow-green-100", + hover: "hover:shadow-lg hover:shadow-green-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + teal: { + backgroud: "bg-teal-500", + color: "text-white", + shadow: "shadow-md shadow-teal-100", + hover: "hover:shadow-lg hover:shadow-teal-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + cyan: { + backgroud: "bg-cyan-500", + color: "text-white", + shadow: "shadow-md shadow-cyan-100", + hover: "hover:shadow-lg hover:shadow-cyan-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + "light-blue": { + backgroud: "bg-light-blue-500", + color: "text-white", + shadow: "shadow-md shadow-light-blue-100", + hover: "hover:shadow-lg hover:shadow-light-blue-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + blue: { + backgroud: "bg-blue-500", + color: "text-white", + shadow: "shadow-md shadow-blue-100", + hover: "hover:shadow-lg hover:shadow-blue-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + indigo: { + backgroud: "bg-indigo-500", + color: "text-white", + shadow: "shadow-md shadow-indigo-100", + hover: "hover:shadow-lg hover:shadow-indigo-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + "deep-purple": { + backgroud: "bg-deep-purple-500", + color: "text-white", + shadow: "shadow-md shadow-deep-purple-100", + hover: "hover:shadow-lg hover:shadow-deep-purple-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + purple: { + backgroud: "bg-purple-500", + color: "text-white", + shadow: "shadow-md shadow-purple-100", + hover: "hover:shadow-lg hover:shadow-purple-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + pink: { + backgroud: "bg-pink-500", + color: "text-white", + shadow: "shadow-md shadow-pink-100", + hover: "hover:shadow-lg hover:shadow-pink-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, + red: { + backgroud: "bg-red-500", + color: "text-white", + shadow: "shadow-md shadow-red-100", + hover: "hover:shadow-lg hover:shadow-red-200", + focus: "focus:opacity-[0.85] focus:shadow-none", + active: "active:opacity-[0.85] active:shadow-none", + }, +}; + +export default buttonFilled; diff --git a/packages/material-tailwind-react/src/theme/components/iconButton/buttonGradient.js b/packages/material-tailwind-react/src/theme/components/iconButton/buttonGradient.js new file mode 100644 index 000000000..971bf1963 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/iconButton/buttonGradient.js @@ -0,0 +1,137 @@ +const buttonGradient = { + "blue-grey": { + backgroud: "bg-gradient-to-tr from-blue-grey-600 to-blue-grey-400", + color: "text-white", + shadow: "shadow-md shadow-blue-grey-100", + hover: "hover:shadow-lg hover:shadow-blue-grey-200", + active: "active:opacity-[0.85]", + }, + grey: { + backgroud: "bg-gradient-to-tr from-grey-600 to-grey-400", + color: "text-white", + shadow: "shadow-md shadow-grey-100", + hover: "hover:shadow-lg hover:shadow-grey-200", + active: "active:opacity-[0.85]", + }, + brown: { + backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400", + color: "text-white", + shadow: "shadow-md shadow-brown-100", + hover: "hover:shadow-lg hover:shadow-brown-200", + active: "active:opacity-[0.85]", + }, + "deep-orange": { + backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400", + color: "text-white", + shadow: "shadow-md shadow-deep-orange-100", + hover: "hover:shadow-lg hover:shadow-deep-orange-200", + active: "active:opacity-[0.85]", + }, + orange: { + backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400", + color: "text-white", + shadow: "shadow-md shadow-orange-100", + hover: "hover:shadow-lg hover:shadow-orange-200", + active: "active:opacity-[0.85]", + }, + amber: { + backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400", + color: "text-black", + shadow: "shadow-md shadow-amber-100", + hover: "hover:shadow-lg hover:shadow-amber-200", + active: "active:opacity-[0.85]", + }, + yellow: { + backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400", + color: "text-black", + shadow: "shadow-md shadow-yellow-100", + hover: "hover:shadow-lg hover:shadow-yellow-200", + active: "active:opacity-[0.85]", + }, + lime: { + backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400", + color: "text-black", + shadow: "shadow-md shadow-lime-100", + hover: "hover:shadow-lg hover:shadow-lime-200", + active: "active:opacity-[0.85]", + }, + "light-green": { + backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400", + color: "text-white", + shadow: "shadow-md shadow-light-green-100", + hover: "hover:shadow-lg hover:shadow-light-green-200", + active: "active:opacity-[0.85]", + }, + green: { + backgroud: "bg-gradient-to-tr from-green-600 to-green-400", + color: "text-white", + shadow: "shadow-md shadow-green-100", + hover: "hover:shadow-lg hover:shadow-green-200", + active: "active:opacity-[0.85]", + }, + teal: { + backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400", + color: "text-white", + shadow: "shadow-md shadow-teal-100", + hover: "hover:shadow-lg hover:shadow-teal-200", + active: "active:opacity-[0.85]", + }, + cyan: { + backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400", + color: "text-white", + shadow: "shadow-md shadow-cyan-100", + hover: "hover:shadow-lg hover:shadow-cyan-200", + active: "active:opacity-[0.85]", + }, + "light-blue": { + backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400", + color: "text-white", + shadow: "shadow-md shadow-light-blue-100", + hover: "hover:shadow-lg hover:shadow-light-blue-200", + active: "active:opacity-[0.85]", + }, + blue: { + backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400", + color: "text-white", + shadow: "shadow-md shadow-blue-100", + hover: "hover:shadow-lg hover:shadow-blue-200", + active: "active:opacity-[0.85]", + }, + indigo: { + backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400", + color: "text-white", + shadow: "shadow-md shadow-indigo-100", + hover: "hover:shadow-lg hover:shadow-indigo-200", + active: "active:opacity-[0.85]", + }, + "deep-purple": { + backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400", + color: "text-white", + shadow: "shadow-md shadow-deep-purple-100", + hover: "hover:shadow-lg hover:shadow-deep-purple-200", + active: "active:opacity-[0.85]", + }, + purple: { + backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400", + color: "text-white", + shadow: "shadow-md shadow-purple-100", + hover: "hover:shadow-lg hover:shadow-purple-200", + active: "active:opacity-[0.85]", + }, + pink: { + backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400", + color: "text-white", + shadow: "shadow-md shadow-pink-100", + hover: "hover:shadow-lg hover:shadow-pink-200", + active: "active:opacity-[0.85]", + }, + red: { + backgroud: "bg-gradient-to-tr from-red-600 to-red-400", + color: "text-white", + shadow: "shadow-md shadow-red-100", + hover: "hover:shadow-lg hover:shadow-red-200", + active: "active:opacity-[0.85]", + }, +}; + +export default buttonGradient; diff --git a/packages/material-tailwind-react/src/theme/components/iconButton/buttonOutlined.js b/packages/material-tailwind-react/src/theme/components/iconButton/buttonOutlined.js new file mode 100644 index 000000000..56f10a91d --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/iconButton/buttonOutlined.js @@ -0,0 +1,137 @@ +const buttonOutlined = { + "blue-grey": { + backgroud: "border border-blue-grey-500", + color: "text-blue-grey-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-blue-grey-200", + active: "active:opacity-[0.85]", + }, + grey: { + backgroud: "border border-grey-500", + color: "text-grey-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-grey-200", + active: "active:opacity-[0.85]", + }, + brown: { + backgroud: "border border-brown-500", + color: "text-brown-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-brown-200", + active: "active:opacity-[0.85]", + }, + "deep-orange": { + backgroud: "border border-deep-orange-500", + color: "text-deep-orange-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-deep-orange-200", + active: "active:opacity-[0.85]", + }, + orange: { + backgroud: "border border-orange-500", + color: "text-orange-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-orange-200", + active: "active:opacity-[0.85]", + }, + amber: { + backgroud: "border border-amber-500", + color: "text-amber-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-amber-200", + active: "active:opacity-[0.85]", + }, + yellow: { + backgroud: "border border-yellow-500", + color: "text-yellow-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-yellow-200", + active: "active:opacity-[0.85]", + }, + lime: { + backgroud: "border border-lime-500", + color: "text-lime-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-lime-200", + active: "active:opacity-[0.85]", + }, + "light-green": { + backgroud: "border border-light-green-500", + color: "text-light-green-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-light-green-200", + active: "active:opacity-[0.85]", + }, + green: { + backgroud: "border border-green-500", + color: "text-green-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-green-200", + active: "active:opacity-[0.85]", + }, + teal: { + backgroud: "border border-teal-500", + color: "text-teal-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-teal-200", + active: "active:opacity-[0.85]", + }, + cyan: { + backgroud: "border border-cyan-500", + color: "text-cyan-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-cyan-200", + active: "active:opacity-[0.85]", + }, + "light-blue": { + backgroud: "border border-light-blue-500", + color: "text-light-blue-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-light-blue-200", + active: "active:opacity-[0.85]", + }, + blue: { + backgroud: "border border-blue-500", + color: "text-blue-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-blue-200", + active: "active:opacity-[0.85]", + }, + indigo: { + backgroud: "border border-indigo-500", + color: "text-indigo-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-indigo-200", + active: "active:opacity-[0.85]", + }, + "deep-purple": { + backgroud: "border border-deep-purple-500", + color: "text-deep-purple-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-deep-purple-200", + active: "active:opacity-[0.85]", + }, + purple: { + backgroud: "border border-purple-500", + color: "text-purple-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-purple-200", + active: "active:opacity-[0.85]", + }, + pink: { + backgroud: "border border-pink-500", + color: "text-pink-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-pink-200", + active: "active:opacity-[0.85]", + }, + red: { + backgroud: "border border-red-500", + color: "text-red-500", + hover: "hover:opacity-75", + focus: "focus:ring focus:ring-red-200", + active: "active:opacity-[0.85]", + }, +}; + +export default buttonOutlined; diff --git a/packages/material-tailwind-react/src/theme/components/iconButton/buttonText.js b/packages/material-tailwind-react/src/theme/components/iconButton/buttonText.js new file mode 100644 index 000000000..658ef3cce --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/iconButton/buttonText.js @@ -0,0 +1,99 @@ +const buttonOutlined = { + "blue-grey": { + color: "text-blue-grey-500", + hover: "hover:bg-blue-grey-50", + active: "active:bg-blue-grey-100", + }, + grey: { + color: "text-grey-500", + hover: "hover:bg-grey-50", + active: "active:bg-grey-100", + }, + brown: { + color: "text-brown-500", + hover: "hover:bg-brown-50", + active: "active:bg-brown-100", + }, + "deep-orange": { + color: "text-deep-orange-500", + hover: "hover:bg-deep-orange-50", + active: "active:bg-deep-orange-100", + }, + orange: { + color: "text-orange-500", + hover: "hover:bg-orange-50", + active: "active:bg-orange-100", + }, + amber: { + color: "text-amber-500", + hover: "hover:bg-amber-50", + active: "active:bg-amber-100", + }, + yellow: { + color: "text-yellow-500", + hover: "hover:bg-yellow-50", + active: "active:bg-yellow-100", + }, + lime: { + color: "text-lime-500", + hover: "hover:bg-lime-50", + active: "active:bg-lime-100", + }, + "light-green": { + color: "text-light-green-500", + hover: "hover:bg-light-green-50", + active: "active:bg-light-green-100", + }, + green: { + color: "text-green-500", + hover: "hover:bg-green-50", + active: "active:bg-green-100", + }, + teal: { + color: "text-teal-500", + hover: "hover:bg-teal-50", + active: "active:bg-teal-100", + }, + cyan: { + color: "text-cyan-500", + hover: "hover:bg-cyan-50", + active: "active:bg-cyan-100", + }, + "light-blue": { + color: "text-light-blue-500", + hover: "hover:bg-light-blue-50", + active: "active:bg-light-blue-100", + }, + blue: { + color: "text-blue-500", + hover: "hover:bg-blue-50", + active: "active:bg-blue-100", + }, + indigo: { + color: "text-indigo-500", + hover: "hover:bg-indigo-50", + active: "active:bg-indigo-100", + }, + "deep-purple": { + color: "text-deep-purple-500", + hover: "hover:bg-deep-purple-50", + active: "active:bg-deep-purple-100", + }, + purple: { + color: "text-purple-500", + hover: "hover:bg-purple-50", + active: "active:bg-purple-100", + }, + pink: { + color: "text-pink-500", + hover: "hover:bg-pink-50", + active: "active:bg-pink-100", + }, + red: { + color: "text-red-500", + hover: "hover:bg-red-50", + active: "active:bg-red-100", + }, +}; + +export default buttonOutlined; diff --git a/packages/material-tailwind-react/src/theme/components/iconButton/index.js b/packages/material-tailwind-react/src/theme/components/iconButton/index.js new file mode 100644 index 000000000..bd6d675f0 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/iconButton/index.js @@ -0,0 +1,75 @@ +import buttonFilled from "theme/components/button/buttonFilled"; +import buttonGradient from "theme/components/button/buttonGradient"; +import buttonOutlined from "theme/components/button/buttonOutlined"; +import buttonText from "theme/components/button/buttonText"; + +const button = { + defaultProps: { + variant: "filled", + size: "md", + color: "light-blue", + fullWidth: false, + ripple: true, + className: "", + }, + styles: { + root: "grid place-items-center inline-block align-middle select-none", + typography: { + family: "font-sans", + size: "text-xs", + weight: "font-semibold", + align: "text-center", + transform: "uppercase", + }, + sizes: { + sm: { + spacing: { + width: "w-8 max-w-[32px]", + height: "h-8 max-h-[32px]", + }, + border: { + radius: "rounded-lg", + }, + typography: { + size: "text-xs", + weight: "font-medium", + }, + }, + md: { + spacing: { + x: "w-10 max-w-[40px]", + y: "h-10 max-h-[40px]", + }, + border: { + radius: "rounded-lg", + }, + typography: { + size: "text-xs", + weight: "font-medium", + }, + }, + lg: { + spacing: { + width: "w-12 max-w-[48px]", + height: "h-12 max-h-[48px]", + }, + border: { + radius: "rounded-lg", + }, + typography: { + size: "text-sm", + weight: "font-medium", + }, + }, + }, + variants: { + filled: buttonFilled, + gradient: buttonGradient, + outlined: buttonOutlined, + text: buttonText, + }, + transition: "transition-all", + }, +}; + +export default button; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index cc8c7ac36..1efff21aa 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -2,12 +2,14 @@ import alert from "theme/components/alert"; import avatar from "theme/components/avatar"; import button from "theme/components/button"; import chip from "theme/components/chip"; +import iconButton from "theme/components/iconButton"; const theme = { alert, avatar, button, chip, + iconButton, }; export default theme; diff --git a/pages/index.js b/pages/index.js index 5330b838c..6ef469765 100644 --- a/pages/index.js +++ b/pages/index.js @@ -2,6 +2,7 @@ import Button from "components/Button"; import Alert from "components/Alert"; import Chip from "components/Chip"; import Avatar from "components/Avatar"; +import IconButton from "components/IconButton"; import { useState } from "react"; @@ -308,23 +309,31 @@ export default function Home() {
+ -
@@ -332,20 +341,24 @@ export default function Home() {
+

Icon Buttons

+
+ + + + + + + + + + + + + + + + + + +
); } From 62a1889eff223e66d7d84c84b31d3c49252d23ee Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:00:35 +0430 Subject: [PATCH 016/284] Refactor alert component --- packages/material-tailwind-react/package.json | 4 +- .../src/components/Alert/index.js | 86 +++++-------------- .../src/theme/components/alert/index.js | 26 ++---- 3 files changed, 34 insertions(+), 82 deletions(-) diff --git a/packages/material-tailwind-react/package.json b/packages/material-tailwind-react/package.json index 254d57dca..8dea6a24c 100644 --- a/packages/material-tailwind-react/package.json +++ b/packages/material-tailwind-react/package.json @@ -14,11 +14,11 @@ "dependencies": { "classnames": "2.3.1", "deepmerge": "4.2.2", + "framer-motion": "^6.2.8", "material-ripple-effects": "^2.0.1", "prop-types": "^15.8.1", "react": "17.0.2", - "react-dom": "17.0.2", - "react-transition-group": "^4.4.2" + "react-dom": "17.0.2" }, "devDependencies": { "@vitejs/plugin-react": "1.0.7", diff --git a/packages/material-tailwind-react/src/components/Alert/index.js b/packages/material-tailwind-react/src/components/Alert/index.js index aeaf8b7d2..64ec05086 100644 --- a/packages/material-tailwind-react/src/components/Alert/index.js +++ b/packages/material-tailwind-react/src/components/Alert/index.js @@ -1,37 +1,24 @@ -import { forwardRef, useContext, useRef } from "react"; +import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; -import { Transition } from "react-transition-group"; +import { AnimatePresence, motion } from "framer-motion"; import Ripple from "material-ripple-effects"; import merge from "deepmerge"; import validColors from "utils/validColors"; import { MaterialTailwindTheme } from "context/theme"; export const Alert = forwardRef( - ( - { - variant, - color, - icon, - show, - dismissible, - animate, - transitionProps, - className, - children, - ...rest - }, - ref, - ) => { + ({ variant, color, icon, show, dismissible, animate, className, children, ...rest }, ref) => { const { alert } = useContext(MaterialTailwindTheme); const { defaultProps } = alert; - const { root, variants, typography, spacing, border, animation } = alert.styles; + const { root, variants, typography, spacing, border } = alert.styles; const rippleEffect = new Ripple(); - const alertRef = useRef(null); variant = variant || defaultProps.variant; color = color || defaultProps.color; className = className || defaultProps.className; + animate = animate || defaultProps.animate; + show = show === undefined ? defaultProps.show : show; const alertVariant = variants[variant] ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") @@ -49,45 +36,30 @@ export const Alert = forwardRef( className, ); - const mainTransition = { - transition: { - transitionProperty: "opacity", - transitionDuration: "300ms", - transitionTimingFunction: "linear", + const mainAnimation = { + unmount: { opacity: 0, }, - state: { - entering: { opacity: 1 }, - entered: { opacity: 1 }, - exiting: { opacity: 0 }, - exited: { opacity: 0 }, + mount: { + opacity: 1, }, }; - const appliedTransition = merge.all([mainTransition, animation, { ...animate }]); + const appliedAnimation = merge(mainAnimation, animate); const iconTemplate =
{icon}
; - return dismissible ? ( - - {(state) => ( -
+ {show && ( + {icon && iconTemplate} @@ -117,20 +89,9 @@ export const Alert = forwardRef(
)} - - )} - - ) : ( -
- {icon ? ( - <> - {iconTemplate} -
{children}
- - ) : ( - children + )} -
+ ); }, ); @@ -165,10 +126,9 @@ Alert.propTypes = { onClose: PropTypes.func.isRequired, }), animate: PropTypes.shape({ - transition: PropTypes.instanceOf(Object), - state: PropTypes.instanceOf(Object), + mount: PropTypes.instanceOf(Object), + unmount: PropTypes.instanceOf(Object), }), - transitionProps: PropTypes.instanceOf(Object), className: PropTypes.string, children: PropTypes.node.isRequired, }; diff --git a/packages/material-tailwind-react/src/theme/components/alert/index.js b/packages/material-tailwind-react/src/theme/components/alert/index.js index 5737f922e..0682f2d7c 100644 --- a/packages/material-tailwind-react/src/theme/components/alert/index.js +++ b/packages/material-tailwind-react/src/theme/components/alert/index.js @@ -6,13 +6,19 @@ const alert = { variant: "filled", color: "light-blue", icon: "", - show: false, + show: true, dismissble: { action: false, onClose: false, }, - animate: {}, - transitionProps: {}, + animate: { + unmount: { + opacity: 0, + }, + mount: { + opacity: 1, + }, + }, className: "", }, styles: { @@ -33,20 +39,6 @@ const alert = { filled: alertFilled, gradient: alertGradient, }, - animation: { - transition: { - transitionProperty: "opacity", - transitionDuration: "300ms", - transitionTimingFunction: "linear", - opacity: 0, - }, - state: { - entering: { opacity: 1 }, - entered: { opacity: 1 }, - exiting: { opacity: 0 }, - exited: { opacity: 0 }, - }, - }, }, }; From 8648fc34173167db0b28dd63ee50e99d1fd50b7f Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:01:22 +0430 Subject: [PATCH 017/284] Add alerts section for showing all types of alert component --- react-sections/Alerts.js | 172 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 172 insertions(+) create mode 100644 react-sections/Alerts.js diff --git a/react-sections/Alerts.js b/react-sections/Alerts.js new file mode 100644 index 000000000..a20284d58 --- /dev/null +++ b/react-sections/Alerts.js @@ -0,0 +1,172 @@ +import { useState } from "react"; +import Alert from "components/Alert"; +import Button from "components/Button"; + +export default function Alerts() { + const [show, setShow] = useState(false); + const [showSimple, setShowSimple] = useState(false); + + return ( +
+

Alert Variants

+ Simple Alert Component. + + Simple Alert Component with gradient color. + + +

Alert Colors

+
+ + Alert Component with blue-grey color. + + + Alert Component with grey color. + + + Alert Component with brown color. + + + Alert Component with deep-orange color. + + + Alert Component with orange color. + + + Alert Component with amber color. + + + Alert Component with yellow color. + + + Alert Component with lime color. + + + Alert Component with light-green color. + + + Alert Component with green color. + + + Alert Component with teal color. + + + Alert Component with cyan color. + + Alert Component with light-blue color. + + Alert Component with blue color. + + + Alert Component with indigo color. + + + Alert Component with deep-purple color. + + + Alert Component with purple color. + + + Alert Component with pink color. + + + Alert Component with red color. + +
+ +

Alert With Icon

+ + + + } + > + Simple Alert Component. + + +

+ Dismissible Alerts: Simple & Complex +

+
+ + +
+ setShowSimple(false) + }} + variant="gradient" + color="red" + icon={ + + + + } + className="!fixed top-2 right-2 w-[800px] mb-2" + > + A simple dismissible alert. + + + setShow(false) + }} + variant="gradient" + color="green" + icon={ + + + + } + className="!fixed top-2 right-2 w-[800px]" + > +

Hello World

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae + mollitia dicta explicabo maiores cupiditate inventore, et aperiam, + quis doloribus vitae aspernatur dolor aut delectus, temporibus + expedita iusto dolore adipisci reprehenderit. +

+ +
+ ); +} From ac596c745274ef0e9a66bc6cf74e5f9361d6247d Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:01:50 +0430 Subject: [PATCH 018/284] Add the react-sections to the purge content --- tailwind.config.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tailwind.config.js b/tailwind.config.js index 72ebcd633..399fcaf20 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,8 @@ const withMT = require("./packages/material-tailwind-react/src/utils/withMT"); module.exports = withMT({ content: [ "./pages/**/*.{js,ts,jsx,tsx}", - "./components/**/*.{js,ts,jsx,tsx}" + "./components/**/*.{js,ts,jsx,tsx}", + "./react-sections/*.{js,ts,jsx,tsx}" ], theme: { extend: {} From 28091cccd0c11ac10eb3914bf362efc09aa71e9b Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:10:55 +0430 Subject: [PATCH 019/284] Add avatars section --- react-sections/Avatars.js | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) create mode 100644 react-sections/Avatars.js diff --git a/react-sections/Avatars.js b/react-sections/Avatars.js new file mode 100644 index 000000000..40a1ab229 --- /dev/null +++ b/react-sections/Avatars.js @@ -0,0 +1,26 @@ +import Avatar from "components/Avatar"; + +export default function Avatars() { + const image = + "https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"; + + return ( +
+

Avatar Variants

+
+ + +
+ +

Avatar Sizes

+
+ + + + + + +
+
+ ); +} From 67366e6773ecd7ebc033f4b7399138c4df73092a Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:20:05 +0430 Subject: [PATCH 020/284] Add buttons section --- react-sections/Buttons.js | 51 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 react-sections/Buttons.js diff --git a/react-sections/Buttons.js b/react-sections/Buttons.js new file mode 100644 index 000000000..376efaca7 --- /dev/null +++ b/react-sections/Buttons.js @@ -0,0 +1,51 @@ +import Button from "components/Button"; + +export default function Buttons() { + const image = + "https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80"; + + return ( +
+

Button Variants

+
+ + + + +
+ +

Button Sizes

+
+ + + +
+ +

Button Colors

+
+ + + + + + + + + + + + + + + + + + + +
+ +

Button with Full Width

+ +
+ ); +} From 59b15428f200be16f213d7a520450069dbcbbf7f Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:22:50 +0430 Subject: [PATCH 021/284] Fix the default prop mistake --- .../src/theme/components/alert/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-tailwind-react/src/theme/components/alert/index.js b/packages/material-tailwind-react/src/theme/components/alert/index.js index 0682f2d7c..ec95a5728 100644 --- a/packages/material-tailwind-react/src/theme/components/alert/index.js +++ b/packages/material-tailwind-react/src/theme/components/alert/index.js @@ -8,8 +8,8 @@ const alert = { icon: "", show: true, dismissble: { - action: false, - onClose: false, + action: "", + onClose: () => {}, }, animate: { unmount: { From 26336388b72800e7c75df8808a38e01fd5f3cadc Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:36:49 +0430 Subject: [PATCH 022/284] Refactor chip component --- .../src/components/Chip/index.js | 140 ++++++------------ .../src/theme/components/chip/index.js | 30 ++-- 2 files changed, 60 insertions(+), 110 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Chip/index.js b/packages/material-tailwind-react/src/components/Chip/index.js index 99cef6d51..95a898775 100644 --- a/packages/material-tailwind-react/src/components/Chip/index.js +++ b/packages/material-tailwind-react/src/components/Chip/index.js @@ -1,37 +1,24 @@ -import { forwardRef, useContext, useRef } from "react"; +import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; -import { Transition } from "react-transition-group"; +import { AnimatePresence, motion } from "framer-motion"; import Ripple from "material-ripple-effects"; import merge from "deepmerge"; import validColors from "utils/validColors"; import { MaterialTailwindTheme } from "context/theme"; export const Chip = forwardRef( - ( - { - variant, - color, - icon, - show, - dismissible, - animate, - transitionProps, - className, - value, - ...rest - }, - ref, - ) => { + ({ variant, color, icon, show, dismissible, animate, className, value, ...rest }, ref) => { const { chip } = useContext(MaterialTailwindTheme); const { defaultProps } = chip; - const { root, variants, typography, spacing, border, animation } = chip.styles; + const { root, variants, typography, spacing, border } = chip.styles; const rippleEffect = new Ripple(); - const chipRef = useRef(null); variant = variant || defaultProps.variant; color = color || defaultProps.color; className = className || defaultProps.className; + animate = animate || defaultProps.animate; + show = show === undefined ? defaultProps.show : show; const chipVariant = variants[variant] ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") @@ -49,88 +36,60 @@ export const Chip = forwardRef( className, ); - const mainTransition = { - transition: { - transitionProperty: "opacity", - transitionDuration: "300ms", - transitionTimingFunction: "linear", + const mainAnimation = { + unmount: { opacity: 0, }, - state: { - entering: { opacity: 1 }, - entered: { opacity: 1 }, - exiting: { opacity: 0 }, - exited: { opacity: 0 }, + mount: { + opacity: 1, }, }; - const appliedTransition = merge.all([mainTransition, animation, { ...animate }]); + const appliedAnimation = merge(mainAnimation, animate); const iconTemplate = (
{icon}
); - return dismissible ? ( - - {(state) => ( -
- {icon && iconTemplate} -
{value}
- {dismissible && ( -
-
null} - onMouseDown={(e) => !dismissible.action && rippleEffect.create(e, "light")} - className={`w-5 h-5 ${dismissible.action ? "" : "p-1 rounded"}`} - > - {dismissible.action || ( - - - - )} -
+ return ( + + + {icon && iconTemplate} +
{value}
+ {dismissible && ( +
+
null} + onMouseDown={(e) => !dismissible.action && rippleEffect.create(e, "light")} + className={`w-5 h-5 ${dismissible.action ? "" : "p-1 rounded"}`} + > + {dismissible.action || ( + + + + )}
- )} -
- )} - - ) : ( -
- {icon ? ( - <> - {iconTemplate} -
{value}
- - ) : ( -
{value}
- )} -
+
+ )} + + ); }, ); @@ -168,7 +127,6 @@ Chip.propTypes = { transition: PropTypes.instanceOf(Object), state: PropTypes.instanceOf(Object), }), - transitionProps: PropTypes.instanceOf(Object), className: PropTypes.string, value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired, }; diff --git a/packages/material-tailwind-react/src/theme/components/chip/index.js b/packages/material-tailwind-react/src/theme/components/chip/index.js index 6d29f2ec9..88af22842 100644 --- a/packages/material-tailwind-react/src/theme/components/chip/index.js +++ b/packages/material-tailwind-react/src/theme/components/chip/index.js @@ -6,13 +6,19 @@ const chip = { variant: "filled", color: "light-blue", icon: "", - show: false, + show: true, dismissble: { - action: false, - onClose: false, + action: "", + onClose: () => {}, + }, + animate: { + unmount: { + opacity: 0, + }, + mount: { + opacity: 1, + }, }, - animate: {}, - transitionProps: {}, className: "", }, styles: { @@ -36,20 +42,6 @@ const chip = { filled: chipFilled, gradient: chipGradient, }, - animation: { - transition: { - transitionProperty: "opacity", - transitionDuration: "300ms", - transitionTimingFunction: "linear", - opacity: 0, - }, - state: { - entering: { opacity: 1 }, - entered: { opacity: 1 }, - exiting: { opacity: 0 }, - exited: { opacity: 0 }, - }, - }, }, }; From 7a69df77845fecf2625f85c6ea88b863d737a2d8 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:36:59 +0430 Subject: [PATCH 023/284] Add chips section --- react-sections/Chips.js | 89 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 react-sections/Chips.js diff --git a/react-sections/Chips.js b/react-sections/Chips.js new file mode 100644 index 000000000..9901e53e5 --- /dev/null +++ b/react-sections/Chips.js @@ -0,0 +1,89 @@ +import { useState } from "react"; +import Chip from "components/Chip"; +import Button from "components/Button"; + +export default function Chips() { + const [show, setShow] = useState(false); + + return ( +
+

Chip Variants

+ + + +

Chip Colors

+
+ + + + + + + + + + + + + + + + + + + +
+ +

Chip With Icon

+ + + + } + /> + +

Dismissible Chip

+ +
+ setShow(false) + }} + variant="gradient" + color="teal" + value="dismissible" + icon={ + + + + } + /> +
+
+ ); +} From 97aa34f6982c43711fa0bf515ffae6e7b01e461a Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 21 Mar 2022 23:44:20 +0430 Subject: [PATCH 024/284] Add rhe icon buttons section --- pages/index.js | 426 ---------------------------------- pages/react.js | 27 +++ react-sections/IconButtons.js | 113 +++++++++ 3 files changed, 140 insertions(+), 426 deletions(-) delete mode 100644 pages/index.js create mode 100644 pages/react.js create mode 100644 react-sections/IconButtons.js diff --git a/pages/index.js b/pages/index.js deleted file mode 100644 index 6ef469765..000000000 --- a/pages/index.js +++ /dev/null @@ -1,426 +0,0 @@ -import Button from "components/Button"; -import Alert from "components/Alert"; -import Chip from "components/Chip"; -import Avatar from "components/Avatar"; -import IconButton from "components/IconButton"; - -import { useState } from "react"; - -export default function Home() { - const [show, setShow] = useState(false); - const [showChip, setShowChip] = useState(false); - return ( -
-

Sizes

-
- - - -
-
-

Variant = Filled

-
- - - - - - - - - - - - - - - - - - - -
-
-

Variant = Gradient

-
- - - - - - - - - - - - - - - - - - - -
-
-

Variant = Outlined

-
- - - - - - - - - - - - - - - - - - - -
-
-

Variant = Text

-
- - - - - - - - - - - - - - - - - - -
-

Alerts

-
- - - - } - className="my-10" - > - Just a simple alert - - - setShow(false) - }} - variant="gradient" - color="red" - icon={ - - - - } - className="mt-10" - > -

- Hello World -

-

- Lorem ipsum dolor sit amet consectetur adipisicing elit. Repudiandae - mollitia dicta explicabo maiores cupiditate inventore, et aperiam, - quis doloribus vitae aspernatur dolor aut delectus, temporibus - expedita iusto dolore adipisci reprehenderit. -

- -
-

Chips

-
-
- -
- - setShowChip(false) - }} - icon={ - - - - } - /> -
-

Avatars

-
- - - - - - -
-
- - - - - - -
-

Icon Buttons

-
- - - - - - - - - - - - - - - - - - -
-
- ); -} diff --git a/pages/react.js b/pages/react.js new file mode 100644 index 000000000..4ecc70a53 --- /dev/null +++ b/pages/react.js @@ -0,0 +1,27 @@ +import Alerts from "/react-sections/Alerts"; +import Avatars from "/react-sections/Avatars"; +import Buttons from "/react-sections/Buttons"; +import Chips from "/react-sections/Chips"; +import IconButtons from "/react-sections/IconButtons"; + +export default function React() { + return ( +
+

+ React Version Components +

+ +
+ +
+ +
+ +
+ +
+ +
+
+ ); +} diff --git a/react-sections/IconButtons.js b/react-sections/IconButtons.js new file mode 100644 index 000000000..dcf6881a4 --- /dev/null +++ b/react-sections/IconButtons.js @@ -0,0 +1,113 @@ +import IconButton from "components/IconButton"; + +export default function IconButtons() { + const Icon = ({ size }) => ( + + + + + ); + + return ( +
+

Icon Button Variants

+
+ + + + + + + + + + + + +
+ +

Icon Button Sizes

+
+ + + + + + + + + +
+ +

Icon Button Colors

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); +} From 83a391cdcd066cf45fd44e5c6024f47ae1bf890a Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 22 Mar 2022 16:15:48 +0430 Subject: [PATCH 025/284] Update the buttons section --- react-sections/Buttons.js | 88 +++++++++++++++++++++++++++++---------- 1 file changed, 65 insertions(+), 23 deletions(-) diff --git a/react-sections/Buttons.js b/react-sections/Buttons.js index 376efaca7..7fff58ab7 100644 --- a/react-sections/Buttons.js +++ b/react-sections/Buttons.js @@ -16,36 +16,78 @@ export default function Buttons() {

Button Sizes

- - - + + +

Button Colors

- - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + +

Button with Full Width

- +
); } From 247048cca7f1ddb991d83432ebb5f11e71cf0a02 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 22 Mar 2022 16:18:14 +0430 Subject: [PATCH 026/284] Update the chips section --- react-sections/Chips.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/react-sections/Chips.js b/react-sections/Chips.js index 9901e53e5..d5a89f8fe 100644 --- a/react-sections/Chips.js +++ b/react-sections/Chips.js @@ -36,6 +36,7 @@ export default function Chips() {

Chip With Icon

Dismissible Chip

-
From 8c973bc3d6d2895f89dbcc1a9f3ca8eedfe928f0 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 22 Mar 2022 16:19:46 +0430 Subject: [PATCH 027/284] Update the alerts section --- react-sections/Alerts.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/react-sections/Alerts.js b/react-sections/Alerts.js index a20284d58..ccb1fe842 100644 --- a/react-sections/Alerts.js +++ b/react-sections/Alerts.js @@ -75,6 +75,7 @@ export default function Alerts() {

Alert With Icon

- -
From cb427056785205bf39348b6dedf67c336a7249a2 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 23 Mar 2022 00:02:19 +0430 Subject: [PATCH 028/284] Add the checkbox component --- .../src/components/Checkbox/index.js | 124 ++++++++++++++++++ .../components/checkbox/checkboxColors.js | 99 ++++++++++++++ .../src/theme/components/checkbox/index.js | 63 +++++++++ .../src/theme/index.js | 2 + .../src/utils/objectsToArray.js | 15 +++ .../src/utils/objectsToString.js | 5 + pages/react.js | 3 + react-sections/Checkboxes.js | 40 ++++++ 8 files changed, 351 insertions(+) create mode 100644 packages/material-tailwind-react/src/components/Checkbox/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/checkbox/checkboxColors.js create mode 100644 packages/material-tailwind-react/src/theme/components/checkbox/index.js create mode 100644 packages/material-tailwind-react/src/utils/objectsToArray.js create mode 100644 packages/material-tailwind-react/src/utils/objectsToString.js create mode 100644 react-sections/Checkboxes.js diff --git a/packages/material-tailwind-react/src/components/Checkbox/index.js b/packages/material-tailwind-react/src/components/Checkbox/index.js new file mode 100644 index 000000000..554e15e60 --- /dev/null +++ b/packages/material-tailwind-react/src/components/Checkbox/index.js @@ -0,0 +1,124 @@ +/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import { forwardRef, useContext } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import Ripple from "material-ripple-effects"; +// import validColors from "utils/validColors"; +import { MaterialTailwindTheme } from "context/theme"; + +import objectsToString from "utils/objectsToString"; + +export const Checkbox = forwardRef( + ({ color, label, icon, ripple, className, containerProps, labelProps, ...rest }, ref) => { + const { checkbox } = useContext(MaterialTailwindTheme); + const { defaultProps } = checkbox; + const { root, container, checkbox: input, label: inputLabel, colors } = checkbox.styles; + + color = color || defaultProps.color; + ripple = ripple === undefined ? defaultProps.ripple : ripple; + className = className || defaultProps.className; + + const rippleEffect = ripple !== undefined && new Ripple(); + + const containerClasses = classnames( + objectsToString(container), + colors && colors[color] ? colors[color].container : "before:bg-light-blue-500", + containerProps && containerProps.className ? containerProps.className : "", + ); + + const checkboxClasses = classnames( + "peer", + objectsToString(input), + colors && colors[color] ? colors[color].background : "checked:bg-light-blue-500", + colors && colors[color] ? colors[color].border : "checked:border-light-blue-500", + className, + ); + + const labelClasses = classnames( + objectsToString(inputLabel), + labelProps && labelProps.className ? labelProps.className : "", + ); + + return ( +
+ + {label && ( + + )} +
+ ); + }, +); + +Checkbox.propTypes = { + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + label: PropTypes.string, + icon: PropTypes.node, + ripple: PropTypes.bool, + className: PropTypes.string, + containerProps: PropTypes.instanceOf(Object), + labelProps: PropTypes.instanceOf(Object), +}; + +Checkbox.displayName = "Checkbox"; + +export default Checkbox; diff --git a/packages/material-tailwind-react/src/theme/components/checkbox/checkboxColors.js b/packages/material-tailwind-react/src/theme/components/checkbox/checkboxColors.js new file mode 100644 index 000000000..f9fa2b0b6 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/checkbox/checkboxColors.js @@ -0,0 +1,99 @@ +const checkboxColors = { + "blue-grey": { + background: "checked:bg-blue-grey-500", + border: "checked:border-blue-grey-500", + container: "before:bg-blue-grey-500", + }, + grey: { + background: "checked:bg-grey-500", + border: "checked:border-grey-500", + container: "before:bg-grey-500", + }, + brown: { + background: "checked:bg-brown-500", + border: "checked:border-brown-500", + container: "before:bg-brown-500", + }, + "deep-orange": { + background: "checked:bg-deep-orange-500", + border: "checked:border-deep-orange-500", + container: "before:bg-deep-orange-500", + }, + orange: { + background: "checked:bg-orange-500", + border: "checked:border-orange-500", + container: "before:bg-orange-500", + }, + amber: { + background: "checked:bg-amber-500", + border: "checked:border-amber-500", + container: "before:bg-amber-500", + }, + yellow: { + background: "checked:bg-yellow-500", + border: "checked:border-yellow-500", + container: "before:bg-yellow-500", + }, + lime: { + background: "checked:bg-lime-500", + border: "checked:border-lime-500", + container: "before:bg-lime-500", + }, + "light-green": { + background: "checked:bg-light-green-500", + border: "checked:border-light-green-500", + container: "before:bg-light-green-500", + }, + green: { + background: "checked:bg-green-500", + border: "checked:border-green-500", + container: "before:bg-green-500", + }, + teal: { + background: "checked:bg-teal-500", + border: "checked:border-teal-500", + container: "before:bg-teal-500", + }, + cyan: { + background: "checked:bg-cyan-500", + border: "checked:border-cyan-500", + container: "before:bg-cyan-500", + }, + "light-blue": { + background: "checked:bg-light-blue-500", + border: "checked:border-light-blue-500", + container: "before:bg-light-blue-500", + }, + blue: { + background: "checked:bg-blue-500", + border: "checked:border-blue-500", + container: "before:bg-blue-500", + }, + indigo: { + background: "checked:bg-indigo-500", + border: "checked:border-indigo-500", + container: "before:bg-indigo-500", + }, + "deep-purple": { + background: "checked:bg-deep-purple-500", + border: "checked:border-deep-purple-500", + container: "before:bg-deep-purple-500", + }, + purple: { + background: "checked:bg-purple-500", + border: "checked:border-purple-500", + container: "before:bg-purple-500", + }, + pink: { + background: "checked:bg-pink-500", + border: "checked:border-pink-500", + container: "before:bg-pink-500", + }, + red: { + background: "checked:bg-red-500", + border: "checked:border-red-500", + container: "before:bg-red-500", + }, +}; + +export default checkboxColors; diff --git a/packages/material-tailwind-react/src/theme/components/checkbox/index.js b/packages/material-tailwind-react/src/theme/components/checkbox/index.js new file mode 100644 index 000000000..a08b888d9 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/checkbox/index.js @@ -0,0 +1,63 @@ +import checkboxColors from "theme/components/checkbox/checkboxColors"; + +const checkbox = { + defaultProps: { + color: "light-blue", + label: "", + icon: "", + containerProps: {}, + labelProps: {}, + ripple: true, + className: "", + }, + styles: { + root: "flex items-center", + container: { + root: "relative flex items-center cursor-pointer", + spacing: { + x: "px-3", + y: "py-3", + }, + border: { + radius: "rounded-full", + }, + before: { + root: "before:content[''] before:block", + spacing: { + width: "before:w-12", + height: "before:h-12", + }, + border: { + radius: "before:rounded-full", + }, + position: "before:absolute before:top-2/4 before:left-2/4", + transform: "before:-translate-y-2/4 before:-translate-x-2/4", + transition: "before:transition-opacity", + opacity: "before:opacity-0 hover:before:opacity-20", + }, + }, + checkbox: { + root: "relative appearance-none cursor-pointer", + spacing: { + width: "w-5", + height: "h-5", + }, + border: { + width: "border", + radius: "rounded-md", + color: "border-grey-400", + }, + transition: "transition-all", + }, + label: { + root: "cursor-pointer select-none mt-px", + typography: { + weight: "font-light", + color: "text-grey-700", + }, + }, + colors: checkboxColors, + }, +}; + +export default checkbox; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index 1efff21aa..4179eeb8e 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -1,6 +1,7 @@ import alert from "theme/components/alert"; import avatar from "theme/components/avatar"; import button from "theme/components/button"; +import checkbox from "theme/components/checkbox"; import chip from "theme/components/chip"; import iconButton from "theme/components/iconButton"; @@ -8,6 +9,7 @@ const theme = { alert, avatar, button, + checkbox, chip, iconButton, }; diff --git a/packages/material-tailwind-react/src/utils/objectsToArray.js b/packages/material-tailwind-react/src/utils/objectsToArray.js new file mode 100644 index 000000000..0f2a35e88 --- /dev/null +++ b/packages/material-tailwind-react/src/utils/objectsToArray.js @@ -0,0 +1,15 @@ +export default function objectsToArray(object) { + let result = []; + + Object.values(object).forEach((value) => { + if (typeof value === "string") { + result = [...result, value]; + } else if (typeof value === "object" && !Array.isArray(value) && value !== null) { + result = [...result, ...objectsToArray(value)]; + } + + return undefined; + }); + + return result; +} diff --git a/packages/material-tailwind-react/src/utils/objectsToString.js b/packages/material-tailwind-react/src/utils/objectsToString.js new file mode 100644 index 000000000..6ec32dfc6 --- /dev/null +++ b/packages/material-tailwind-react/src/utils/objectsToString.js @@ -0,0 +1,5 @@ +import objectsToArray from "utils/objectsToArray"; + +export default function objectsToString(object) { + return objectsToArray(object).join(" "); +} diff --git a/pages/react.js b/pages/react.js index 4ecc70a53..6e260e902 100644 --- a/pages/react.js +++ b/pages/react.js @@ -1,6 +1,7 @@ import Alerts from "/react-sections/Alerts"; import Avatars from "/react-sections/Avatars"; import Buttons from "/react-sections/Buttons"; +import Checkboxes from "/react-sections/Checkboxes"; import Chips from "/react-sections/Chips"; import IconButtons from "/react-sections/IconButtons"; @@ -21,6 +22,8 @@ export default function React() {
+
+
); diff --git a/react-sections/Checkboxes.js b/react-sections/Checkboxes.js new file mode 100644 index 000000000..fb5c81078 --- /dev/null +++ b/react-sections/Checkboxes.js @@ -0,0 +1,40 @@ +import Checkbox from "components/Checkbox"; + +export default function Checkboxes() { + return ( +
+

Simple Checkbox

+
+ +
+ +

Checkbox with Label

+
+ +
+ +

Checkbox Colors

+
+ + + + + + + + + + + + + + + + + + + +
+
+ ); +} From e0d9202896d12061bf081d58104780ab46ff7beb Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 23 Mar 2022 00:17:02 +0430 Subject: [PATCH 029/284] Update the chip component --- .../src/components/Chip/index.js | 13 ++- .../components/chip/chipCloseButtonColors.js | 80 +++++++++++++++++++ .../src/theme/components/chip/index.js | 2 + 3 files changed, 92 insertions(+), 3 deletions(-) create mode 100644 packages/material-tailwind-react/src/theme/components/chip/chipCloseButtonColors.js diff --git a/packages/material-tailwind-react/src/components/Chip/index.js b/packages/material-tailwind-react/src/components/Chip/index.js index 95a898775..5493d909a 100644 --- a/packages/material-tailwind-react/src/components/Chip/index.js +++ b/packages/material-tailwind-react/src/components/Chip/index.js @@ -11,7 +11,7 @@ export const Chip = forwardRef( ({ variant, color, icon, show, dismissible, animate, className, value, ...rest }, ref) => { const { chip } = useContext(MaterialTailwindTheme); const { defaultProps } = chip; - const { root, variants, typography, spacing, border } = chip.styles; + const { root, variants, typography, spacing, border, closeButtonColor } = chip.styles; const rippleEffect = new Ripple(); variant = variant || defaultProps.variant; @@ -26,6 +26,7 @@ export const Chip = forwardRef( const chipTypography = Object.values(typography).join(" "); const chipPadding = Object.values(spacing).join(" "); const chipBorder = Object.values(border).join(" "); + const chipCloseButton = closeButtonColor[color] ? Object.values(closeButtonColor[color]) : ""; const classes = classnames( root, @@ -36,6 +37,12 @@ export const Chip = forwardRef( className, ); + const chipCloseButtonClasses = classnames( + "absolute top-1 right-1 mt-[0.5px] mx-px w-max rounded", + chipCloseButton, + "transition-colors", + ); + const mainAnimation = { unmount: { opacity: 0, @@ -63,9 +70,9 @@ export const Chip = forwardRef( {...rest} > {icon && iconTemplate} -
{value}
+
{value}
{dismissible && ( -
+
Date: Wed, 23 Mar 2022 18:50:11 +0430 Subject: [PATCH 030/284] Update checkbox style for its root --- .../src/theme/components/checkbox/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-tailwind-react/src/theme/components/checkbox/index.js b/packages/material-tailwind-react/src/theme/components/checkbox/index.js index a08b888d9..5f3bf002f 100644 --- a/packages/material-tailwind-react/src/theme/components/checkbox/index.js +++ b/packages/material-tailwind-react/src/theme/components/checkbox/index.js @@ -11,7 +11,7 @@ const checkbox = { className: "", }, styles: { - root: "flex items-center", + root: "inline-flex items-center", container: { root: "relative flex items-center cursor-pointer", spacing: { From b75ea2de2f9f17ed8531849642769c98e836dfcc Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 23 Mar 2022 18:50:19 +0430 Subject: [PATCH 031/284] Add radio button component --- .../src/components/Radio/index.js | 122 ++++++++++++++++++ .../src/theme/components/radio/index.js | 63 +++++++++ .../src/theme/components/radio/radioColors.js | 99 ++++++++++++++ .../src/theme/index.js | 2 + pages/react.js | 3 + react-sections/RadioButtons.js | 42 ++++++ 6 files changed, 331 insertions(+) create mode 100644 packages/material-tailwind-react/src/components/Radio/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/radio/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/radio/radioColors.js create mode 100644 react-sections/RadioButtons.js diff --git a/packages/material-tailwind-react/src/components/Radio/index.js b/packages/material-tailwind-react/src/components/Radio/index.js new file mode 100644 index 000000000..e9624f4bd --- /dev/null +++ b/packages/material-tailwind-react/src/components/Radio/index.js @@ -0,0 +1,122 @@ +/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ +/* eslint-disable jsx-a11y/no-static-element-interactions */ +/* eslint-disable jsx-a11y/click-events-have-key-events */ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import { forwardRef, useContext } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import Ripple from "material-ripple-effects"; +// import validColors from "utils/validColors"; +import { MaterialTailwindTheme } from "context/theme"; + +import objectsToString from "utils/objectsToString"; + +export const Radio = forwardRef( + ({ color, label, icon, ripple, className, containerProps, labelProps, ...rest }, ref) => { + const { radio } = useContext(MaterialTailwindTheme); + const { defaultProps } = radio; + const { root, container, radio: input, label: inputLabel, colors } = radio.styles; + + color = color || defaultProps.color; + ripple = ripple === undefined ? defaultProps.ripple : ripple; + className = className || defaultProps.className; + + const rippleEffect = ripple !== undefined && new Ripple(); + + const containerClasses = classnames( + objectsToString(container), + colors && colors[color] ? colors[color].container : "before:bg-light-blue-500", + containerProps && containerProps.className ? containerProps.className : "", + ); + + const radioClasses = classnames( + "peer", + objectsToString(input), + colors && colors[color] ? colors[color].border : "checked:border-light-blue-500", + className, + ); + + const radioIconColor = classnames( + "absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4 pointer-events-none opacity-0 peer-checked:opacity-100 transition-opacity", + colors && colors[color] ? colors[color].color : "checked:bg-light-blue-500", + ); + + const labelClasses = classnames( + objectsToString(inputLabel), + labelProps && labelProps.className ? labelProps.className : "", + ); + + return ( +
+ + {label && ( + + )} +
+ ); + }, +); + +Radio.propTypes = { + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + label: PropTypes.string, + icon: PropTypes.node, + ripple: PropTypes.bool, + className: PropTypes.string, + containerProps: PropTypes.instanceOf(Object), + labelProps: PropTypes.instanceOf(Object), +}; + +Radio.displayName = "Radio"; + +export default Radio; diff --git a/packages/material-tailwind-react/src/theme/components/radio/index.js b/packages/material-tailwind-react/src/theme/components/radio/index.js new file mode 100644 index 000000000..65fe4728f --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/radio/index.js @@ -0,0 +1,63 @@ +import radioColors from "theme/components/radio/radioColors"; + +const radio = { + defaultProps: { + color: "light-blue", + label: "", + icon: "", + containerProps: {}, + labelProps: {}, + ripple: true, + className: "", + }, + styles: { + root: "inline-flex items-center", + container: { + root: "relative flex items-center cursor-pointer", + spacing: { + x: "px-3", + y: "py-3", + }, + border: { + radius: "rounded-full", + }, + before: { + root: "before:content[''] before:block", + spacing: { + width: "before:w-12", + height: "before:h-12", + }, + border: { + radius: "before:rounded-full", + }, + position: "before:absolute before:top-2/4 before:left-2/4", + transform: "before:-translate-y-2/4 before:-translate-x-2/4", + transition: "before:transition-opacity", + opacity: "before:opacity-0 hover:before:opacity-20", + }, + }, + radio: { + root: "relative appearance-none cursor-pointer", + spacing: { + width: "w-5", + height: "h-5", + }, + border: { + width: "border", + radius: "rounded-full", + color: "border-grey-400", + }, + transition: "transition-all", + }, + label: { + root: "cursor-pointer select-none mt-px", + typography: { + weight: "font-light", + color: "text-grey-700", + }, + }, + colors: radioColors, + }, +}; + +export default radio; diff --git a/packages/material-tailwind-react/src/theme/components/radio/radioColors.js b/packages/material-tailwind-react/src/theme/components/radio/radioColors.js new file mode 100644 index 000000000..c28ffa130 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/radio/radioColors.js @@ -0,0 +1,99 @@ +const radioColors = { + "blue-grey": { + color: "text-blue-grey-500", + border: "checked:border-blue-grey-500", + container: "before:bg-blue-grey-500", + }, + grey: { + color: "text-grey-500", + border: "checked:border-grey-500", + container: "before:bg-grey-500", + }, + brown: { + color: "text-brown-500", + border: "checked:border-brown-500", + container: "before:bg-brown-500", + }, + "deep-orange": { + color: "text-deep-orange-500", + border: "checked:border-deep-orange-500", + container: "before:bg-deep-orange-500", + }, + orange: { + color: "text-orange-500", + border: "checked:border-orange-500", + container: "before:bg-orange-500", + }, + amber: { + color: "text-amber-500", + border: "checked:border-amber-500", + container: "before:bg-amber-500", + }, + yellow: { + color: "text-yellow-500", + border: "checked:border-yellow-500", + container: "before:bg-yellow-500", + }, + lime: { + color: "text-lime-500", + border: "checked:border-lime-500", + container: "before:bg-lime-500", + }, + "light-green": { + color: "text-light-green-500", + border: "checked:border-light-green-500", + container: "before:bg-light-green-500", + }, + green: { + color: "text-green-500", + border: "checked:border-green-500", + container: "before:bg-green-500", + }, + teal: { + color: "text-teal-500", + border: "checked:border-teal-500", + container: "before:bg-teal-500", + }, + cyan: { + color: "text-cyan-500", + border: "checked:border-cyan-500", + container: "before:bg-cyan-500", + }, + "light-blue": { + color: "text-light-blue-500", + border: "checked:border-light-blue-500", + container: "before:bg-light-blue-500", + }, + blue: { + color: "text-blue-500", + border: "checked:border-blue-500", + container: "before:bg-blue-500", + }, + indigo: { + color: "text-indigo-500", + border: "checked:border-indigo-500", + container: "before:bg-indigo-500", + }, + "deep-purple": { + color: "text-deep-purple-500", + border: "checked:border-deep-purple-500", + container: "before:bg-deep-purple-500", + }, + purple: { + color: "text-purple-500", + border: "checked:border-purple-500", + container: "before:bg-purple-500", + }, + pink: { + color: "text-pink-500", + border: "checked:border-pink-500", + container: "before:bg-pink-500", + }, + red: { + color: "text-red-500", + border: "checked:border-red-500", + container: "before:bg-red-500", + }, +}; + +export default radioColors; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index 4179eeb8e..a5501d7e7 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -4,6 +4,7 @@ import button from "theme/components/button"; import checkbox from "theme/components/checkbox"; import chip from "theme/components/chip"; import iconButton from "theme/components/iconButton"; +import radio from "theme/components/radio"; const theme = { alert, @@ -12,6 +13,7 @@ const theme = { checkbox, chip, iconButton, + radio, }; export default theme; diff --git a/pages/react.js b/pages/react.js index 6e260e902..c8205792b 100644 --- a/pages/react.js +++ b/pages/react.js @@ -4,6 +4,7 @@ import Buttons from "/react-sections/Buttons"; import Checkboxes from "/react-sections/Checkboxes"; import Chips from "/react-sections/Chips"; import IconButtons from "/react-sections/IconButtons"; +import RadioButtons from "/react-sections/RadioButtons"; export default function React() { return ( @@ -24,6 +25,8 @@ export default function React() {
+
+
); diff --git a/react-sections/RadioButtons.js b/react-sections/RadioButtons.js new file mode 100644 index 000000000..6c5d566e0 --- /dev/null +++ b/react-sections/RadioButtons.js @@ -0,0 +1,42 @@ +import Radio from "components/Radio"; + +export default function RadioButtons() { + return ( +
+

Simple Radio

+
+ + +
+ +

Radio with Label

+
+ + +
+ +

Radio Colors

+
+ + + + + + + + + + + + + + + + + + + +
+
+ ); +} From 5f4f286deb80964ef70dd0d3f994177766c1c1e5 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 29 Mar 2022 17:03:25 +0430 Subject: [PATCH 032/284] Update the checkbox style --- .../src/components/Checkbox/index.js | 10 ++--- .../components/checkbox/checkboxColors.js | 38 +++++++++---------- .../src/theme/components/checkbox/index.js | 30 +++++++-------- 3 files changed, 38 insertions(+), 40 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Checkbox/index.js b/packages/material-tailwind-react/src/components/Checkbox/index.js index 554e15e60..1d4fdda0b 100644 --- a/packages/material-tailwind-react/src/components/Checkbox/index.js +++ b/packages/material-tailwind-react/src/components/Checkbox/index.js @@ -6,7 +6,6 @@ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; -// import validColors from "utils/validColors"; import { MaterialTailwindTheme } from "context/theme"; import objectsToString from "utils/objectsToString"; @@ -15,7 +14,7 @@ export const Checkbox = forwardRef( ({ color, label, icon, ripple, className, containerProps, labelProps, ...rest }, ref) => { const { checkbox } = useContext(MaterialTailwindTheme); const { defaultProps } = checkbox; - const { root, container, checkbox: input, label: inputLabel, colors } = checkbox.styles; + const { root, container, input, label: inputLabel, colors } = checkbox.styles; color = color || defaultProps.color; ripple = ripple === undefined ? defaultProps.ripple : ripple; @@ -25,15 +24,14 @@ export const Checkbox = forwardRef( const containerClasses = classnames( objectsToString(container), - colors && colors[color] ? colors[color].container : "before:bg-light-blue-500", containerProps && containerProps.className ? containerProps.className : "", ); - const checkboxClasses = classnames( - "peer", + const inputClasses = classnames( objectsToString(input), colors && colors[color] ? colors[color].background : "checked:bg-light-blue-500", colors && colors[color] ? colors[color].border : "checked:border-light-blue-500", + colors && colors[color] ? colors[color].before : "checked:before:bg-light-blue-500", className, ); @@ -59,7 +57,7 @@ export const Checkbox = forwardRef( return typeof onMouseDown === "function" && onMouseDown(); }} > - +
{icon || ( Date: Tue, 29 Mar 2022 17:05:07 +0430 Subject: [PATCH 033/284] Enable some eslint rules --- .../material-tailwind-react/src/components/Checkbox/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Checkbox/index.js b/packages/material-tailwind-react/src/components/Checkbox/index.js index 1d4fdda0b..87253e1ab 100644 --- a/packages/material-tailwind-react/src/components/Checkbox/index.js +++ b/packages/material-tailwind-react/src/components/Checkbox/index.js @@ -1,7 +1,4 @@ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/label-has-associated-control */ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; From fdcc3a5ef7a97daad41f50639c6c20b874baeb30 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Tue, 29 Mar 2022 17:07:26 +0430 Subject: [PATCH 034/284] Update the radio button style --- .../src/components/Radio/index.js | 19 ++++------ .../src/theme/components/radio/index.js | 30 +++++++-------- .../src/theme/components/radio/radioColors.js | 38 +++++++++---------- react-sections/RadioButtons.js | 2 +- 4 files changed, 42 insertions(+), 47 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Radio/index.js b/packages/material-tailwind-react/src/components/Radio/index.js index e9624f4bd..746cc3b38 100644 --- a/packages/material-tailwind-react/src/components/Radio/index.js +++ b/packages/material-tailwind-react/src/components/Radio/index.js @@ -1,12 +1,8 @@ /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */ -/* eslint-disable jsx-a11y/no-static-element-interactions */ -/* eslint-disable jsx-a11y/click-events-have-key-events */ -/* eslint-disable jsx-a11y/label-has-associated-control */ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; -// import validColors from "utils/validColors"; import { MaterialTailwindTheme } from "context/theme"; import objectsToString from "utils/objectsToString"; @@ -15,7 +11,7 @@ export const Radio = forwardRef( ({ color, label, icon, ripple, className, containerProps, labelProps, ...rest }, ref) => { const { radio } = useContext(MaterialTailwindTheme); const { defaultProps } = radio; - const { root, container, radio: input, label: inputLabel, colors } = radio.styles; + const { root, container, input, label: inputLabel, colors } = radio.styles; color = color || defaultProps.color; ripple = ripple === undefined ? defaultProps.ripple : ripple; @@ -25,14 +21,13 @@ export const Radio = forwardRef( const containerClasses = classnames( objectsToString(container), - colors && colors[color] ? colors[color].container : "before:bg-light-blue-500", containerProps && containerProps.className ? containerProps.className : "", ); - const radioClasses = classnames( - "peer", + const inputClasses = classnames( objectsToString(input), colors && colors[color] ? colors[color].border : "checked:border-light-blue-500", + colors && colors[color] ? colors[color].before : "checked:before:bg-light-blue-500", className, ); @@ -51,7 +46,7 @@ export const Radio = forwardRef(
{icon || ( - + )}
{label && ( -
); diff --git a/react-sections/Switches.js b/react-sections/Switches.js new file mode 100644 index 000000000..16e06e7af --- /dev/null +++ b/react-sections/Switches.js @@ -0,0 +1,40 @@ +import Switch from "components/Switch"; + +export default function Switches() { + return ( +
+

Simple Switch

+
+ +
+ +

Switch with Label

+
+ +
+ +

Switch Colors

+
+ + + + + + + + + + + + + + + + + + + +
+
+ ); +} From 6ef8febdea9ee9a05d2e6cb073348c9be4b727b6 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 30 Mar 2022 16:55:53 +0430 Subject: [PATCH 037/284] Add typography component --- .../src/components/Typography/index.js | 143 ++++++++++++++++++ .../src/theme/components/typography/index.js | 72 +++++++++ .../components/typography/typographyColors.js | 80 ++++++++++ .../src/theme/index.js | 2 + pages/react.js | 3 + react-sections/Typos.js | 98 ++++++++++++ 6 files changed, 398 insertions(+) create mode 100644 packages/material-tailwind-react/src/components/Typography/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/typography/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/typography/typographyColors.js create mode 100644 react-sections/Typos.js diff --git a/packages/material-tailwind-react/src/components/Typography/index.js b/packages/material-tailwind-react/src/components/Typography/index.js new file mode 100644 index 000000000..01ecf6362 --- /dev/null +++ b/packages/material-tailwind-react/src/components/Typography/index.js @@ -0,0 +1,143 @@ +import { forwardRef, useContext } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import { MaterialTailwindTheme } from "context/theme"; +import objectsToString from "utils/objectsToString"; + +export const Typography = forwardRef( + ({ variant, color, textGradient, className, children, ...rest }, ref) => { + const { typography } = useContext(MaterialTailwindTheme); + const { defaultProps } = typography; + const { variants, colors, textGradient: gradient } = typography.styles; + + variant = variant || defaultProps.variant; + color = color || defaultProps.color; + textGradient = textGradient || defaultProps.textGradient; + className = className || defaultProps.className; + + const typographyVariant = variants[variant] ? objectsToString(variants[variant]) : ""; + const typographyColor = colors[color] + ? colors[color] + : { + color: "text-blue-grey-900", + gradient: "bg-gradient-to-tr from-blue-grey-600 to-blue-grey-400", + }; + + const classes = classnames( + typographyVariant, + typographyColor.color, + { [gradient]: textGradient }, + { [typographyColor.gradient]: textGradient }, + className, + ); + + let template; + + switch (variant) { + case "h1": + template = ( +

+ {children} +

+ ); + break; + case "h2": + template = ( +

+ {children} +

+ ); + break; + case "h3": + template = ( +

+ {children} +

+ ); + break; + case "h4": + template = ( +

+ {children} +

+ ); + break; + case "h5": + template = ( +
+ {children} +
+ ); + break; + case "h6": + template = ( +
+ {children} +
+ ); + break; + case "lead": + template = ( +

+ {children} +

+ ); + break; + case "paragraph": + template = ( +

+ {children} +

+ ); + break; + case "small": + template = ( + + {children} + + ); + break; + default: + template = ( +

+ {children} +

+ ); + break; + } + + return template; + }, +); + +Typography.propTypes = { + variant: PropTypes.oneOf(["h1", "h2", "h3", "h4", "h5", "h6", "lead", "paragraph", "small"]), + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + textGradient: PropTypes.bool, + className: PropTypes.string, + children: PropTypes.node.isRequired, +}; + +Typography.displayName = "Typography"; + +export default Typography; diff --git a/packages/material-tailwind-react/src/theme/components/typography/index.js b/packages/material-tailwind-react/src/theme/components/typography/index.js new file mode 100644 index 000000000..4a02b6aeb --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/typography/index.js @@ -0,0 +1,72 @@ +import typographyColors from "theme/components/typography/typographyColors"; + +const alert = { + defaultProps: { + variant: "paragraph", + color: "blue-grey", + textGradient: false, + className: "", + }, + styles: { + variants: { + h1: { + root: "block antialiased -tracking-tighter", + family: "font-serif", + weight: "font-semibold", + size: "text-5xl leading-tight", + }, + h2: { + root: "block antialiased -tracking-tighter", + family: "font-serif", + weight: "font-semibold", + size: "text-4xl leading-[1.3]", + }, + h3: { + root: "block antialiased -tracking-tighter", + family: "font-serif", + weight: "font-semibold", + size: "text-3xl leading-snug", + }, + h4: { + root: "block antialiased -tracking-tighter", + family: "font-sans", + weight: "font-semibold", + size: "text-2xl leading-snug", + }, + h5: { + root: "block antialiased", + family: "font-sans", + weight: "font-semibold", + size: "text-xl leading-snug", + }, + h6: { + root: "block antialiased", + family: "font-sans", + weight: "font-semibold", + size: "text-base leading-relaxed", + }, + lead: { + root: "block antialiased", + family: "font-sans", + weight: "font-normal", + size: "text-xl leading-relaxed", + }, + paragraph: { + root: "block antialiased", + family: "font-sans", + weight: "font-light", + size: "text-base leading-relaxed", + }, + small: { + root: "block antialiased", + family: "font-sans", + weight: "font-light", + size: "text-sm leading-normal", + }, + }, + colors: typographyColors, + textGradient: "bg-clip-text text-transparent", + }, +}; + +export default alert; diff --git a/packages/material-tailwind-react/src/theme/components/typography/typographyColors.js b/packages/material-tailwind-react/src/theme/components/typography/typographyColors.js new file mode 100644 index 000000000..5d3fc319d --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/typography/typographyColors.js @@ -0,0 +1,80 @@ +const typographyColors = { + "blue-grey": { + color: "text-blue-grey-900", + gradient: "bg-gradient-to-tr from-blue-grey-600 to-blue-grey-400", + }, + grey: { + color: "text-grey-500", + gradient: "bg-gradient-to-tr from-grey-600 to-grey-400", + }, + brown: { + color: "text-brown-500", + gradient: "bg-gradient-to-tr from-brown-600 to-brown-400", + }, + "deep-orange": { + color: "text-deep-orange-500", + gradient: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400", + }, + orange: { + color: "text-orange-500", + gradient: "bg-gradient-to-tr from-orange-600 to-orange-400", + }, + amber: { + color: "text-amber-500", + gradient: "bg-gradient-to-tr from-amber-600 to-amber-400", + }, + yellow: { + color: "text-yellow-500", + gradient: "bg-gradient-to-tr from-yellow-600 to-yellow-400", + }, + lime: { + color: "text-lime-500", + gradient: "bg-gradient-to-tr from-lime-600 to-lime-400", + }, + "light-green": { + color: "text-light-green-500", + gradient: "bg-gradient-to-tr from-light-green-600 to-light-green-400", + }, + green: { + color: "text-green-500", + gradient: "bg-gradient-to-tr from-green-600 to-green-400", + }, + teal: { + color: "text-teal-500", + gradient: "bg-gradient-to-tr from-teal-600 to-teal-400", + }, + cyan: { + color: "text-cyan-500", + gradient: "bg-gradient-to-tr from-cyan-600 to-cyan-400", + }, + "light-blue": { + color: "text-light-blue-500", + gradient: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400", + }, + blue: { + color: "text-blue-500", + gradient: "bg-gradient-to-tr from-blue-600 to-blue-400", + }, + indigo: { + color: "text-indigo-500", + gradient: "bg-gradient-to-tr from-indigo-600 to-indigo-400", + }, + "deep-purple": { + color: "text-deep-purple-500", + gradient: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400", + }, + purple: { + color: "text-purple-500", + gradient: "bg-gradient-to-tr from-purple-600 to-purple-400", + }, + pink: { + color: "text-pink-500", + gradient: "bg-gradient-to-tr from-pink-600 to-pink-400", + }, + red: { + color: "text-red-500", + gradient: "bg-gradient-to-tr from-red-600 to-red-400", + }, +}; + +export default typographyColors; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index f03c44cba..7b6aa1cad 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -6,6 +6,7 @@ import chip from "theme/components/chip"; import iconButton from "theme/components/iconButton"; import radio from "theme/components/radio"; import switchButton from "theme/components/switch"; +import typography from "theme/components/typography"; const theme = { alert, @@ -16,6 +17,7 @@ const theme = { iconButton, radio, switch: switchButton, + typography, }; export default theme; diff --git a/pages/react.js b/pages/react.js index 744e54010..1d6720e60 100644 --- a/pages/react.js +++ b/pages/react.js @@ -6,6 +6,7 @@ import Chips from "/react-sections/Chips"; import IconButtons from "/react-sections/IconButtons"; import RadioButtons from "/react-sections/RadioButtons"; import Switches from "/react-sections/Switches"; +import Typos from "/react-sections/Typos"; export default function React() { return ( @@ -31,6 +32,8 @@ export default function React() {
+ +
); diff --git a/react-sections/Typos.js b/react-sections/Typos.js new file mode 100644 index 000000000..051652617 --- /dev/null +++ b/react-sections/Typos.js @@ -0,0 +1,98 @@ +import Typography from "components/Typography"; + +export default function Typos() { + return ( +
+ Heading 1 + Heading 2 + Heading 3 + Heading 4 + Heading 5 + Heading 6 + + I will be the leader of a company that ends up being worth billions of + dollars, because I got the answers. I understand culture. I am the + nucleus. I think that's a responsibility that I have, to push + possibilities, to show people, this is the level that things could be + at. + + + I will be the leader of a company that ends up being worth billions of + dollars, because I got the answers. I understand culture. I am the + nucleus. I think that's a responsibility that I have, to push + possibilities, to show people, this is the level that things could be + at. + + + I will be the leader of a company that ends up being worth billions of + dollars, because I got the answers. I understand culture. I am the + nucleus. I think that's a responsibility that I have, to push + possibilities, to show people, this is the level that things could be + at. + + + Gradient Text + + +
+ + A + + + B + + + C + + + D + + + E + + + F + + + G + + + H + + + I + + + J + + + K + + + L + + + M + + + N + + + O + + + P + + + Q + + + R + + + S + +
+
+ ); +} From eaa002f63896550d1a0d7bf12549e9446d826197 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 30 Mar 2022 18:49:03 +0430 Subject: [PATCH 038/284] Add progress component --- .../src/components/Progress/index.js | 85 +++++++++++++++++++ .../src/theme/components/progress/index.js | 46 ++++++++++ .../components/progress/progressFilled.js | 80 +++++++++++++++++ .../components/progress/progressGradient.js | 80 +++++++++++++++++ .../src/theme/index.js | 2 + pages/react.js | 3 + react-sections/ProgressBars.js | 54 ++++++++++++ 7 files changed, 350 insertions(+) create mode 100644 packages/material-tailwind-react/src/components/Progress/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/progress/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/progress/progressFilled.js create mode 100644 packages/material-tailwind-react/src/theme/components/progress/progressGradient.js create mode 100644 react-sections/ProgressBars.js diff --git a/packages/material-tailwind-react/src/components/Progress/index.js b/packages/material-tailwind-react/src/components/Progress/index.js new file mode 100644 index 000000000..b8f2cc31b --- /dev/null +++ b/packages/material-tailwind-react/src/components/Progress/index.js @@ -0,0 +1,85 @@ +import { forwardRef, useContext } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import validColors from "utils/validColors"; +import objectsToString from "utils/objectsToString"; +import { MaterialTailwindTheme } from "context/theme"; + +export const Progress = forwardRef( + ({ variant, color, value, label, className, barProps, ...rest }, ref) => { + const { progress } = useContext(MaterialTailwindTheme); + const { defaultProps } = progress; + const { root, variants, typography, spacing, border, withLabel, bar } = progress.styles; + + variant = variant || defaultProps.variant; + color = color || defaultProps.color; + label = label || defaultProps.label; + className = className || defaultProps.className; + barProps = barProps || defaultProps.barProps; + + const progressVariant = variants[variant] + ? objectsToString(variants[variant][validColors[color] || defaultProps.color]) + : ""; + const progressTypography = objectsToString(typography); + const progressSpacing = objectsToString(spacing); + const progressBorder = objectsToString(border); + const progressLabel = objectsToString(withLabel); + const progressBar = objectsToString(bar); + + const containerClasses = classnames( + root, + progressTypography, + { [progressSpacing]: !label }, + { [progressBorder]: !label }, + { [progressLabel]: label }, + className, + ); + + const barClasses = classnames( + progressBar, + progressVariant, + barProps && barProps.className ? barProps.className : "", + ); + + return ( +
+
+ {label && `${value}% ${typeof label === "string" ? label : ""}`} +
+
+ ); + }, +); + +Progress.propTypes = { + variant: PropTypes.oneOf(["filled", "gradient"]), + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + value: PropTypes.number, + label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + className: PropTypes.string, + barProps: PropTypes.instanceOf(Object), +}; + +Progress.displayName = "Progress"; + +export default Progress; diff --git a/packages/material-tailwind-react/src/theme/components/progress/index.js b/packages/material-tailwind-react/src/theme/components/progress/index.js new file mode 100644 index 000000000..95872cf6f --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/progress/index.js @@ -0,0 +1,46 @@ +import progressFilled from "theme/components/progress/progressFilled"; +import progressGradient from "theme/components/progress/progressGradient"; + +const alert = { + defaultProps: { + variant: "filled", + color: "light-blue", + value: 0, + label: false, + className: "", + barProps: {}, + }, + styles: { + root: "bg-blue-grey-100 overflow-hidden flex", + spacing: { + width: "w-full", + height: "h-1.5", + }, + border: { + radius: "rounded-sm", + }, + typography: { + family: "font-sans", + size: "text-xs", + weight: "font-medium", + }, + variants: { + filled: progressFilled, + gradient: progressGradient, + }, + withLabel: { + spacing: { + width: "w-full", + height: "h-4", + }, + border: { + radius: "rounded", + }, + }, + bar: { + root: "flex justify-center items-center h-full", + }, + }, +}; + +export default alert; diff --git a/packages/material-tailwind-react/src/theme/components/progress/progressFilled.js b/packages/material-tailwind-react/src/theme/components/progress/progressFilled.js new file mode 100644 index 000000000..fca7e0c91 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/progress/progressFilled.js @@ -0,0 +1,80 @@ +const progressFilled = { + "blue-grey": { + backgroud: "bg-blue-grey-500", + color: "text-white", + }, + grey: { + backgroud: "bg-grey-500", + color: "text-white", + }, + brown: { + backgroud: "bg-brown-500", + color: "text-white", + }, + "deep-orange": { + backgroud: "bg-deep-orange-500", + color: "text-white", + }, + orange: { + backgroud: "bg-orange-500", + color: "text-white", + }, + amber: { + backgroud: "bg-amber-500", + color: "text-black", + }, + yellow: { + backgroud: "bg-yellow-500", + color: "text-black", + }, + lime: { + backgroud: "bg-lime-500", + color: "text-black", + }, + "light-green": { + backgroud: "bg-light-green-500", + color: "text-white", + }, + green: { + backgroud: "bg-green-500", + color: "text-white", + }, + teal: { + backgroud: "bg-teal-500", + color: "text-white", + }, + cyan: { + backgroud: "bg-cyan-500", + color: "text-white", + }, + "light-blue": { + backgroud: "bg-light-blue-500", + color: "text-white", + }, + blue: { + backgroud: "bg-blue-500", + color: "text-white", + }, + indigo: { + backgroud: "bg-indigo-500", + color: "text-white", + }, + "deep-purple": { + backgroud: "bg-deep-purple-500", + color: "text-white", + }, + purple: { + backgroud: "bg-purple-500", + color: "text-white", + }, + pink: { + backgroud: "bg-pink-500", + color: "text-white", + }, + red: { + backgroud: "bg-red-500", + color: "text-white", + }, +}; + +export default progressFilled; diff --git a/packages/material-tailwind-react/src/theme/components/progress/progressGradient.js b/packages/material-tailwind-react/src/theme/components/progress/progressGradient.js new file mode 100644 index 000000000..80fa3c044 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/progress/progressGradient.js @@ -0,0 +1,80 @@ +const progressGradient = { + "blue-grey": { + backgroud: "bg-gradient-to-tr from-blue-grey-600 to-blue-grey-400", + color: "text-white", + }, + grey: { + backgroud: "bg-gradient-to-tr from-grey-600 to-grey-400", + color: "text-white", + }, + brown: { + backgroud: "bg-gradient-to-tr from-brown-600 to-brown-400", + color: "text-white", + }, + "deep-orange": { + backgroud: "bg-gradient-to-tr from-deep-orange-600 to-deep-orange-400", + color: "text-white", + }, + orange: { + backgroud: "bg-gradient-to-tr from-orange-600 to-orange-400", + color: "text-white", + }, + amber: { + backgroud: "bg-gradient-to-tr from-amber-600 to-amber-400", + color: "text-black", + }, + yellow: { + backgroud: "bg-gradient-to-tr from-yellow-600 to-yellow-400", + color: "text-black", + }, + lime: { + backgroud: "bg-gradient-to-tr from-lime-600 to-lime-400", + color: "text-black", + }, + "light-green": { + backgroud: "bg-gradient-to-tr from-light-green-600 to-light-green-400", + color: "text-white", + }, + green: { + backgroud: "bg-gradient-to-tr from-green-600 to-green-400", + color: "text-white", + }, + teal: { + backgroud: "bg-gradient-to-tr from-teal-600 to-teal-400", + color: "text-white", + }, + cyan: { + backgroud: "bg-gradient-to-tr from-cyan-600 to-cyan-400", + color: "text-white", + }, + "light-blue": { + backgroud: "bg-gradient-to-tr from-light-blue-600 to-light-blue-400", + color: "text-white", + }, + blue: { + backgroud: "bg-gradient-to-tr from-blue-600 to-blue-400", + color: "text-white", + }, + indigo: { + backgroud: "bg-gradient-to-tr from-indigo-600 to-indigo-400", + color: "text-white", + }, + "deep-purple": { + backgroud: "bg-gradient-to-tr from-deep-purple-600 to-deep-purple-400", + color: "text-white", + }, + purple: { + backgroud: "bg-gradient-to-tr from-purple-600 to-purple-400", + color: "text-white", + }, + pink: { + backgroud: "bg-gradient-to-tr from-pink-600 to-pink-400", + color: "text-white", + }, + red: { + backgroud: "bg-gradient-to-tr from-red-600 to-red-400", + color: "text-white", + }, +}; + +export default progressGradient; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index 7b6aa1cad..014d2e7e8 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -4,6 +4,7 @@ import button from "theme/components/button"; import checkbox from "theme/components/checkbox"; import chip from "theme/components/chip"; import iconButton from "theme/components/iconButton"; +import progress from "theme/components/progress"; import radio from "theme/components/radio"; import switchButton from "theme/components/switch"; import typography from "theme/components/typography"; @@ -15,6 +16,7 @@ const theme = { checkbox, chip, iconButton, + progress, radio, switch: switchButton, typography, diff --git a/pages/react.js b/pages/react.js index 1d6720e60..51fd4f207 100644 --- a/pages/react.js +++ b/pages/react.js @@ -7,6 +7,7 @@ import IconButtons from "/react-sections/IconButtons"; import RadioButtons from "/react-sections/RadioButtons"; import Switches from "/react-sections/Switches"; import Typos from "/react-sections/Typos"; +import ProgressBars from "/react-sections/ProgressBars"; export default function React() { return ( @@ -34,6 +35,8 @@ export default function React() {
+ +
); diff --git a/react-sections/ProgressBars.js b/react-sections/ProgressBars.js new file mode 100644 index 000000000..0800b9ba4 --- /dev/null +++ b/react-sections/ProgressBars.js @@ -0,0 +1,54 @@ +import Progress from "components/Progress"; + +export default function ProgressBars() { + return ( +
+

Progress Variants

+ + + +

Progress Colors

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +

Progress With Label

+ +
+ ); +} From f880995c1e34b7bcf2ba2955de508bd7ffe06254 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Wed, 30 Mar 2022 18:56:47 +0430 Subject: [PATCH 039/284] Refactor the following components: Alert, Avatar, Button, Checkbox, Radio, Switch, Chip, IconButton --- .../src/components/Alert/index.js | 11 ++++++----- .../src/components/Avatar/index.js | 3 ++- .../src/components/Button/index.js | 11 ++++------- .../src/components/Checkbox/index.js | 3 +-- .../src/components/Chip/index.js | 13 +++++++------ .../src/components/IconButton/index.js | 11 ++++------- .../src/components/Radio/index.js | 3 +-- .../src/components/Switch/index.js | 2 +- 8 files changed, 26 insertions(+), 31 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Alert/index.js b/packages/material-tailwind-react/src/components/Alert/index.js index 64ec05086..65e1a524b 100644 --- a/packages/material-tailwind-react/src/components/Alert/index.js +++ b/packages/material-tailwind-react/src/components/Alert/index.js @@ -5,6 +5,7 @@ import { AnimatePresence, motion } from "framer-motion"; import Ripple from "material-ripple-effects"; import merge from "deepmerge"; import validColors from "utils/validColors"; +import objectsToString from "utils/objectsToString"; import { MaterialTailwindTheme } from "context/theme"; export const Alert = forwardRef( @@ -21,17 +22,17 @@ export const Alert = forwardRef( show = show === undefined ? defaultProps.show : show; const alertVariant = variants[variant] - ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") + ? objectsToString(variants[variant][validColors[color] || defaultProps.color]) : ""; - const alertTypography = Object.values(typography).join(" "); - const alertPadding = Object.values(spacing).join(" "); - const alertBorder = Object.values(border).join(" "); + const alertTypography = objectsToString(typography); + const alertSpacing = objectsToString(spacing); + const alertBorder = objectsToString(border); const classes = classnames( root, alertVariant, alertTypography, - alertPadding, + alertSpacing, alertBorder, className, ); diff --git a/packages/material-tailwind-react/src/components/Avatar/index.js b/packages/material-tailwind-react/src/components/Avatar/index.js index cdb073aa4..947b344bb 100644 --- a/packages/material-tailwind-react/src/components/Avatar/index.js +++ b/packages/material-tailwind-react/src/components/Avatar/index.js @@ -3,6 +3,7 @@ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; +import objectsToString from "utils/objectsToString"; import { MaterialTailwindTheme } from "context/theme"; export const Avatar = forwardRef(({ variant, size, className, ...rest }, ref) => { @@ -15,7 +16,7 @@ export const Avatar = forwardRef(({ variant, size, className, ...rest }, ref) => className = className || defaultProps.className; const avatarVariant = variants[variant] || ""; - const avatarSize = sizes[size] ? Object.values(sizes[size]).join(" ") : ""; + const avatarSize = sizes[size] ? objectsToString(sizes[size]) : ""; const classes = classnames(root, avatarVariant, avatarSize, className); diff --git a/packages/material-tailwind-react/src/components/Button/index.js b/packages/material-tailwind-react/src/components/Button/index.js index 6e97b6eea..06658be0e 100644 --- a/packages/material-tailwind-react/src/components/Button/index.js +++ b/packages/material-tailwind-react/src/components/Button/index.js @@ -3,6 +3,7 @@ import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; import validColors from "utils/validColors"; +import objectsToString from "utils/objectsToString"; import { MaterialTailwindTheme } from "context/theme"; export const Button = forwardRef( @@ -21,14 +22,10 @@ export const Button = forwardRef( const rippleEffect = ripple !== undefined && new Ripple(); const buttonVariant = variants[variant] - ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") + ? objectsToString(variants[variant][validColors[color] || defaultProps.color]) : ""; - const buttonSize = sizes[size] - ? Object.values(sizes[size]) - .map((value) => Object.values(value).join(" ")) - .join(" ") - : ""; - const buttonTypography = Object.values(typography).join(" "); + const buttonSize = sizes[size] ? objectsToString(sizes[size]) : ""; + const buttonTypography = objectsToString(typography); const classes = classnames( root, diff --git a/packages/material-tailwind-react/src/components/Checkbox/index.js b/packages/material-tailwind-react/src/components/Checkbox/index.js index 87253e1ab..a56c41a12 100644 --- a/packages/material-tailwind-react/src/components/Checkbox/index.js +++ b/packages/material-tailwind-react/src/components/Checkbox/index.js @@ -3,9 +3,8 @@ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; -import { MaterialTailwindTheme } from "context/theme"; - import objectsToString from "utils/objectsToString"; +import { MaterialTailwindTheme } from "context/theme"; export const Checkbox = forwardRef( ({ color, label, icon, ripple, className, containerProps, labelProps, ...rest }, ref) => { diff --git a/packages/material-tailwind-react/src/components/Chip/index.js b/packages/material-tailwind-react/src/components/Chip/index.js index 5493d909a..be0c9db26 100644 --- a/packages/material-tailwind-react/src/components/Chip/index.js +++ b/packages/material-tailwind-react/src/components/Chip/index.js @@ -5,6 +5,7 @@ import { AnimatePresence, motion } from "framer-motion"; import Ripple from "material-ripple-effects"; import merge from "deepmerge"; import validColors from "utils/validColors"; +import objectsToString from "utils/objectsToString"; import { MaterialTailwindTheme } from "context/theme"; export const Chip = forwardRef( @@ -21,18 +22,18 @@ export const Chip = forwardRef( show = show === undefined ? defaultProps.show : show; const chipVariant = variants[variant] - ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") + ? objectsToString(variants[variant][validColors[color] || defaultProps.color]) : ""; - const chipTypography = Object.values(typography).join(" "); - const chipPadding = Object.values(spacing).join(" "); - const chipBorder = Object.values(border).join(" "); - const chipCloseButton = closeButtonColor[color] ? Object.values(closeButtonColor[color]) : ""; + const chipTypography = objectsToString(typography); + const chipSpacing = objectsToString(spacing); + const chipBorder = objectsToString(border); + const chipCloseButton = closeButtonColor[color] ? objectsToString(closeButtonColor[color]) : ""; const classes = classnames( root, chipVariant, chipTypography, - chipPadding, + chipSpacing, chipBorder, className, ); diff --git a/packages/material-tailwind-react/src/components/IconButton/index.js b/packages/material-tailwind-react/src/components/IconButton/index.js index 3c83ef4f1..b81c34d09 100644 --- a/packages/material-tailwind-react/src/components/IconButton/index.js +++ b/packages/material-tailwind-react/src/components/IconButton/index.js @@ -3,6 +3,7 @@ import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; import validColors from "utils/validColors"; +import objectsToString from "utils/objectsToString"; import { MaterialTailwindTheme } from "context/theme"; export const IconButton = forwardRef( @@ -20,14 +21,10 @@ export const IconButton = forwardRef( const rippleEffect = ripple !== undefined && new Ripple(); const iconButtonVariant = variants[variant] - ? Object.values(variants[variant][validColors[color] || defaultProps.color]).join(" ") + ? objectsToString(variants[variant][validColors[color] || defaultProps.color]) : ""; - const iconButtonSize = sizes[size] - ? Object.values(sizes[size]) - .map((value) => Object.values(value).join(" ")) - .join(" ") - : ""; - const iconButtonTypography = Object.values(typography).join(" "); + const iconButtonSize = sizes[size] ? objectsToString(sizes[size]) : ""; + const iconButtonTypography = objectsToString(typography); const classes = classnames( root, diff --git a/packages/material-tailwind-react/src/components/Radio/index.js b/packages/material-tailwind-react/src/components/Radio/index.js index 746cc3b38..768099b7a 100644 --- a/packages/material-tailwind-react/src/components/Radio/index.js +++ b/packages/material-tailwind-react/src/components/Radio/index.js @@ -3,9 +3,8 @@ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; -import { MaterialTailwindTheme } from "context/theme"; - import objectsToString from "utils/objectsToString"; +import { MaterialTailwindTheme } from "context/theme"; export const Radio = forwardRef( ({ color, label, icon, ripple, className, containerProps, labelProps, ...rest }, ref) => { diff --git a/packages/material-tailwind-react/src/components/Switch/index.js b/packages/material-tailwind-react/src/components/Switch/index.js index ac1501eb8..83956db40 100644 --- a/packages/material-tailwind-react/src/components/Switch/index.js +++ b/packages/material-tailwind-react/src/components/Switch/index.js @@ -3,8 +3,8 @@ import { forwardRef, useContext } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; -import { MaterialTailwindTheme } from "context/theme"; import objectsToString from "utils/objectsToString"; +import { MaterialTailwindTheme } from "context/theme"; export const Switch = forwardRef( ({ color, label, ripple, className, containerProps, circleProps, labelProps, ...rest }, ref) => { From 5204353f5cb2d7fbb3933b2578f03c3403700d15 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Sat, 2 Apr 2022 22:39:53 +0430 Subject: [PATCH 040/284] Add input outlined variant --- .../src/components/input/index.js | 90 +++++++++++++++++ .../src/theme/components/input/index.js | 59 +++++++++++ .../components/input/inputOutlined/index.js | 55 +++++++++++ .../inputOutlined/inputOutlinedColors.js | 80 +++++++++++++++ .../input/inputOutlined/inputOutlinedLabel.js | 46 +++++++++ .../inputOutlined/inputOutlinedLabelColors.js | 99 +++++++++++++++++++ .../src/theme/index.js | 2 + pages/react.js | 4 + 8 files changed, 435 insertions(+) create mode 100644 packages/material-tailwind-react/src/components/input/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/input/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/input/inputOutlined/index.js create mode 100644 packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedColors.js create mode 100644 packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabel.js create mode 100644 packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabelColors.js diff --git a/packages/material-tailwind-react/src/components/input/index.js b/packages/material-tailwind-react/src/components/input/index.js new file mode 100644 index 000000000..8e109be01 --- /dev/null +++ b/packages/material-tailwind-react/src/components/input/index.js @@ -0,0 +1,90 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ +import { forwardRef, useContext } from "react"; +import PropTypes from "prop-types"; +import classnames from "classnames"; +import objectsToString from "utils/objectsToString"; +import { MaterialTailwindTheme } from "context/theme"; + +const Input = forwardRef( + ({ variant, color, size, label, inputProps, labelProps, className, ...rest }, ref) => { + const { input } = useContext(MaterialTailwindTheme); + const { defaultProps } = input; + const { base, variants } = input.styles; + + variant = variant || defaultProps.variant; + size = size || defaultProps.size; + color = color || defaultProps.color; + label = label || defaultProps.label; + inputProps = inputProps || defaultProps.inputProps; + labelProps = labelProps || defaultProps.labelProps; + className = className || defaultProps.className; + const inputVariant = variants[variant || "outlined"]; + + const containerClasses = classnames( + objectsToString(base.container), + objectsToString(inputVariant.sizes[size || "md"].container), + className, + ); + + const inputClasses = classnames( + objectsToString(base.input), + objectsToString(inputVariant.base.input), + objectsToString(inputVariant.sizes[size || "md"].input), + objectsToString(inputVariant.colors.input[color || "light-blue"]), + inputProps && inputProps.className ? inputProps.className : "", + ); + + const labelClasses = classnames( + objectsToString(base.label), + objectsToString(inputVariant.base.label), + objectsToString(inputVariant.sizes[size || "md"].label), + objectsToString(inputVariant.colors.label[color || "light-blue"]), + labelProps && labelProps.className ? labelProps.className : "", + ); + + return ( +
+ + +
+ ); + }, +); + +Input.propTypes = { + variant: PropTypes.oneOf(["standard", "outlined", "static"]), + size: PropTypes.oneOf(["md", "lg"]), + color: PropTypes.oneOf([ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", + ]), + label: PropTypes.string, + inputProps: PropTypes.instanceOf(Object), + labelProps: PropTypes.instanceOf(Object), + className: PropTypes.string, +}; + +Input.displayName = "Input"; + +export default Input; diff --git a/packages/material-tailwind-react/src/theme/components/input/index.js b/packages/material-tailwind-react/src/theme/components/input/index.js new file mode 100644 index 000000000..8e375816d --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/input/index.js @@ -0,0 +1,59 @@ +import inputOutlined from "theme/components/input/inputOutlined/index"; + +const input = { + defaultProps: { + variant: "outlined", + size: "md", + color: "light-blue", + label: "", + inputProps: {}, + labelProps: {}, + className: "", + }, + styles: { + base: { + container: { + position: "relative", + width: "w-full", + }, + input: { + peer: "peer", + width: "w-full", + height: "h-full", + bg: "bg-transparent", + color: "text-grey-800", + fontFamily: "font-sans", + fontWeight: "font-light", + outline: "outline-0 focus:outlined-0", + disabled: "disabled:bg-grey-300 disabled:border-0", + transition: "transition-all", + }, + label: { + display: "flex", + width: "w-full", + height: "h-full", + userSelect: "select-none", + pointerEvents: "pointer-events-none", + position: "absolute", + left: "left-0", + fontWeight: "font-light", + simple: { + fontSize: "peer-placeholder-shown:text-sm", + color: "peer-placeholder-shown:text-grey-500", + }, + floated: { + fontSize: "text-[11px] peer-focus:text-[11px]", + lineHeight: "leading-tight peer-focus:leading-tight", + }, + disabled: + "peer-disabled:text-transparent peer-disabled:peer-placeholder-shown:text-grey-500", + transition: "transition-all", + }, + }, + variants: { + outlined: inputOutlined, + }, + }, +}; + +export default input; diff --git a/packages/material-tailwind-react/src/theme/components/input/inputOutlined/index.js b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/index.js new file mode 100644 index 000000000..63ba00307 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/index.js @@ -0,0 +1,55 @@ +import inputOutlinedLabel from "theme/components/input/inputOutlined/inputOutlinedLabel"; +import inputOutlinedColors from "theme/components/input/inputOutlined/inputOutlinedColors"; +import inputOutlinedLabelColors from "theme/components/input/inputOutlined/inputOutlinedLabelColors"; + +const inputOutlined = { + base: { + input: { + simple: { + borderWidth: "placeholder-shown:border", + borderColor: "placeholder-shown:border-grey-400 placeholder-shown:border-t-grey-400", + }, + floated: { + borderWidth: "border-2 focus:border-2", + borderColor: "border-t-transparent focus:border-t-transparent", + }, + }, + label: inputOutlinedLabel, + }, + sizes: { + md: { + container: { + height: "h-10", + }, + input: { + fontSize: "text-sm", + px: "px-3", + py: "py-2.5", + borderRadius: "rounded-md", + }, + label: { + lineHeight: "peer-placeholder-shown:leading-[3.75]", + }, + }, + lg: { + container: { + height: "h-11", + }, + input: { + fontSize: "text-sm", + px: "px-3", + py: "py-3", + borderRadius: "rounded-md", + }, + label: { + lineHeight: "peer-placeholder-shown:leading-[4.1]", + }, + }, + }, + colors: { + input: inputOutlinedColors, + label: inputOutlinedLabelColors, + }, +}; + +export default inputOutlined; diff --git a/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedColors.js b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedColors.js new file mode 100644 index 000000000..6e4f55c4f --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedColors.js @@ -0,0 +1,80 @@ +const inputOutlinedColors = { + "blue-grey": { + borderColor: "border-blue-grey-500", + borderColorFocused: "focus:border-blue-grey-500", + }, + grey: { + borderColor: "border-grey-500", + borderColorFocused: "focus:border-grey-500", + }, + brown: { + borderColor: "border-brown-500", + borderColorFocused: "focus:border-brown-500", + }, + "deep-orange": { + borderColor: "border-deep-orange-500", + borderColorFocused: "focus:border-deep-orange-500", + }, + orange: { + borderColor: "border-orange-500", + borderColorFocused: "focus:border-orange-500", + }, + amber: { + borderColor: "border-amber-500", + borderColorFocused: "focus:border-amber-500", + }, + yellow: { + borderColor: "border-yellow-500", + borderColorFocused: "focus:border-yellow-500", + }, + lime: { + borderColor: "border-lime-500", + borderColorFocused: "focus:border-lime-500", + }, + "light-green": { + borderColor: "border-light-green-500", + borderColorFocused: "focus:border-light-green-500", + }, + green: { + borderColor: "border-green-500", + borderColorFocused: "focus:border-green-500", + }, + teal: { + borderColor: "border-teal-500", + borderColorFocused: "focus:border-teal-500", + }, + cyan: { + borderColor: "border-cyan-500", + borderColorFocused: "focus:border-cyan-500", + }, + "light-blue": { + borderColor: "border-light-blue-500", + borderColorFocused: "focus:border-light-blue-500", + }, + blue: { + borderColor: "border-blue-500", + borderColorFocused: "focus:border-blue-500", + }, + indigo: { + borderColor: "border-indigo-500", + borderColorFocused: "focus:border-indigo-500", + }, + "deep-purple": { + borderColor: "border-deep-purple-500", + borderColorFocused: "focus:border-deep-purple-500", + }, + purple: { + borderColor: "border-purple-500", + borderColorFocused: "focus:border-purple-500", + }, + pink: { + borderColor: "border-pink-500", + borderColorFocused: "focus:border-pink-500", + }, + red: { + borderColor: "border-red-500", + borderColorFocused: "focus:border-red-500", + }, +}; + +export default inputOutlinedColors; diff --git a/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabel.js b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabel.js new file mode 100644 index 000000000..1a3f160c3 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabel.js @@ -0,0 +1,46 @@ +const inputOutlinedLabel = { + position: "-top-1.5", + before: { + content: "before:content[' ']", + display: "before:block", + boxSizing: "before:box-border", + width: "before:w-2.5", + height: "before:h-1.5", + mt: "before:mt-[6.5px]", + mr: "before:mr-1", + simple: { + borderColor: "peer-placeholder-shown:before:border-transparent", + borderRadius: "before:rounded-tl-md", + }, + floated: { + bt: "before:border-t-2 peer-focus:before:border-t-2", + bl: "before:border-l-2 peer-focus:before:border-l-2", + }, + pointerEvents: "before:pointer-events-none", + transition: "before:transition-all", + disabled: "peer-disabled:before:border-transparent", + }, + after: { + content: "after:content[' ']", + display: "after:block", + flexGrow: "after:flex-grow", + boxSizing: "after:box-border", + width: "after:w-2.5", + height: "after:h-1.5", + mt: "after:mt-[6.5px]", + ml: "after:ml-1", + simple: { + borderColor: "peer-placeholder-shown:after:border-transparent", + borderRadius: "after:rounded-tr-md", + }, + floated: { + bt: "after:border-t-2 peer-focus:after:border-t-2", + br: "after:border-r-2 peer-focus:after:border-r-2", + }, + pointerEvents: "after:pointer-events-none", + transition: "after:transition-all", + disabled: "peer-disabled:after:border-transparent", + }, +}; + +export default inputOutlinedLabel; diff --git a/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabelColors.js b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabelColors.js new file mode 100644 index 000000000..bc469d206 --- /dev/null +++ b/packages/material-tailwind-react/src/theme/components/input/inputOutlined/inputOutlinedLabelColors.js @@ -0,0 +1,99 @@ +const inputOutlinedLabelColors = { + "blue-grey": { + color: "text-blue-grey-500 peer-focus:text-blue-grey-500", + before: "before:border-blue-grey-500 peer-focus:before:border-blue-grey-500", + after: "after:border-blue-grey-500 peer-focus:after:border-blue-grey-500", + }, + grey: { + color: "text-grey-500 peer-focus:text-grey-500", + before: "before:border-grey-500 peer-focus:before:border-grey-500", + after: "after:border-grey-500 peer-focus:after:border-grey-500", + }, + brown: { + color: "text-brown-500 peer-focus:text-brown-500", + before: "before:border-brown-500 peer-focus:before:border-brown-500", + after: "after:border-brown-500 peer-focus:after:border-brown-500", + }, + "deep-orange": { + color: "text-deep-orange-500 peer-focus:text-deep-orange-500", + before: "before:border-deep-orange-500 peer-focus:before:border-deep-orange-500", + after: "after:border-deep-orange-500 peer-focus:after:border-deep-orange-500", + }, + orange: { + color: "text-orange-500 peer-focus:text-orange-500", + before: "peer-focus:before:border-orange-500", + after: "peer-focus:after:border-orange-500", + }, + amber: { + color: "text-amber-500 peer-focus:text-amber-500", + before: "before:border-amber-500 peer-focus:before:border-amber-500", + after: "after:border-amber-500 peer-focus:after:border-amber-500", + }, + yellow: { + color: "text-yellow-500 peer-focus:text-yellow-500", + before: "before:border-yellow-500 peer-focus:before:border-yellow-500", + after: "after:border-yellow-500 peer-focus:after:border-yellow-500", + }, + lime: { + color: "text-lime-500 peer-focus:text-lime-500", + before: "before:border-lime-500 peer-focus:before:border-lime-500", + after: "after:border-lime-500 peer-focus:after:border-lime-500", + }, + "light-green": { + color: "text-light-green-500 peer-focus:text-light-green-500", + before: "before:border-light-green-500 peer-focus:before:border-light-green-500", + after: "after:border-light-green-500 peer-focus:after:border-light-green-500", + }, + green: { + color: "text-green-500 peer-focus:text-green-500", + before: "before:border-green-500 peer-focus:before:border-green-500", + after: "after:border-green-500 peer-focus:after:border-green-500", + }, + teal: { + color: "text-teal-500 peer-focus:text-teal-500", + before: "before:border-teal-500 peer-focus:before:border-teal-500", + after: "after:border-teal-500 peer-focus:after:border-teal-500", + }, + cyan: { + color: "text-cyan-500 peer-focus:text-cyan-500", + before: "before:border-cyan-500 peer-focus:before:border-cyan-500", + after: "after:border-cyan-500 peer-focus:after:border-cyan-500", + }, + "light-blue": { + color: "text-light-blue-500 peer-focus:text-light-blue-500", + before: "before:border-light-blue-500 peer-focus:before:border-light-blue-500", + after: "after:border-light-blue-500 peer-focus:after:border-light-blue-500", + }, + blue: { + color: "text-blue-500 peer-focus:text-blue-500", + before: "before:border-blue-500 peer-focus:before:border-blue-500", + after: "after:border-blue-500 peer-focus:after:border-blue-500", + }, + indigo: { + color: "text-indigo-500 peer-focus:text-indigo-500", + before: "before:border-indigo-500 peer-focus:before:border-indigo-500", + after: "after:border-indigo-500 peer-focus:after:border-indigo-500", + }, + "deep-purple": { + color: "text-deep-purple-500 peer-focus:text-deep-purple-500", + before: "before:border-deep-purple-500 peer-focus:before:border-deep-purple-500", + after: "after:border-deep-purple-500 peer-focus:after:border-deep-purple-500", + }, + purple: { + color: "text-purple-500 peer-focus:text-purple-500", + before: "before:border-purple-500 peer-focus:before:border-purple-500", + after: "after:border-purple-500 peer-focus:after:border-purple-500", + }, + pink: { + color: "text-pink-500 peer-focus:text-pink-500", + before: "before:border-pink-500 peer-focus:before:border-pink-500", + after: "after:border-pink-500 peer-focus:after:border-pink-500", + }, + red: { + color: "text-red-500 peer-focus:text-red-500", + before: "before:border-red-500 peer-focus:before:border-red-500", + after: "after:border-red-500 peer-focus:after:border-red-500", + }, +}; + +export default inputOutlinedLabelColors; diff --git a/packages/material-tailwind-react/src/theme/index.js b/packages/material-tailwind-react/src/theme/index.js index 014d2e7e8..3f9cdcfc0 100644 --- a/packages/material-tailwind-react/src/theme/index.js +++ b/packages/material-tailwind-react/src/theme/index.js @@ -4,6 +4,7 @@ import button from "theme/components/button"; import checkbox from "theme/components/checkbox"; import chip from "theme/components/chip"; import iconButton from "theme/components/iconButton"; +import input from "theme/components/input"; import progress from "theme/components/progress"; import radio from "theme/components/radio"; import switchButton from "theme/components/switch"; @@ -16,6 +17,7 @@ const theme = { checkbox, chip, iconButton, + input, progress, radio, switch: switchButton, diff --git a/pages/react.js b/pages/react.js index 51fd4f207..4992445f1 100644 --- a/pages/react.js +++ b/pages/react.js @@ -9,6 +9,8 @@ import Switches from "/react-sections/Switches"; import Typos from "/react-sections/Typos"; import ProgressBars from "/react-sections/ProgressBars"; +import Input from "components/Input"; + export default function React() { return (
@@ -37,6 +39,8 @@ export default function React() {
+ +
); From 285fdef75c83899145f5f7dd949aa353184cd11b Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Apr 2022 17:29:31 +0430 Subject: [PATCH 041/284] Refactor alert component --- .../src/components/Alert/index.js | 39 +++++++++---------- .../src/theme/components/alert/index.js | 27 +++++++------ 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Alert/index.js b/packages/material-tailwind-react/src/components/Alert/index.js index 65e1a524b..90c2e32f8 100644 --- a/packages/material-tailwind-react/src/components/Alert/index.js +++ b/packages/material-tailwind-react/src/components/Alert/index.js @@ -1,42 +1,38 @@ -import { forwardRef, useContext } from "react"; +import { forwardRef } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import { AnimatePresence, motion } from "framer-motion"; import Ripple from "material-ripple-effects"; import merge from "deepmerge"; -import validColors from "utils/validColors"; +import findMatch from "utils/findMatch"; import objectsToString from "utils/objectsToString"; -import { MaterialTailwindTheme } from "context/theme"; +import { useTheme } from "context/theme"; export const Alert = forwardRef( ({ variant, color, icon, show, dismissible, animate, className, children, ...rest }, ref) => { - const { alert } = useContext(MaterialTailwindTheme); - const { defaultProps } = alert; - const { root, variants, typography, spacing, border } = alert.styles; + // 1. init + const { alert } = useTheme(); + const { defaultProps, valid } = alert; + const { base, variants } = alert.styles; const rippleEffect = new Ripple(); + // 2. set default props variant = variant || defaultProps.variant; color = color || defaultProps.color; className = className || defaultProps.className; animate = animate || defaultProps.animate; show = show === undefined ? defaultProps.show : show; - const alertVariant = variants[variant] - ? objectsToString(variants[variant][validColors[color] || defaultProps.color]) - : ""; - const alertTypography = objectsToString(typography); - const alertSpacing = objectsToString(spacing); - const alertBorder = objectsToString(border); - - const classes = classnames( - root, - alertVariant, - alertTypography, - alertSpacing, - alertBorder, - className, + // 3. set styles + const alertBase = objectsToString(base); + const alertVariant = objectsToString( + variants[findMatch(valid.variants, variant, "filled")][ + findMatch(valid.colors, color, "light-blue") + ], ); + const classes = classnames(alertBase, alertVariant, className); + // 4. set animation const mainAnimation = { unmount: { opacity: 0, @@ -45,11 +41,12 @@ export const Alert = forwardRef( opacity: 1, }, }; - const appliedAnimation = merge(mainAnimation, animate); + // 5. icon template const iconTemplate =
{icon}
; + // 6. return return ( {show && ( diff --git a/packages/material-tailwind-react/src/theme/components/alert/index.js b/packages/material-tailwind-react/src/theme/components/alert/index.js index ec95a5728..1692ec902 100644 --- a/packages/material-tailwind-react/src/theme/components/alert/index.js +++ b/packages/material-tailwind-react/src/theme/components/alert/index.js @@ -1,5 +1,6 @@ import alertFilled from "theme/components/alert/alertFilled"; import alertGradient from "theme/components/alert/alertGradient"; +import validColors from "utils/validColors"; const alert = { defaultProps: { @@ -21,19 +22,21 @@ const alert = { }, className: "", }, + valid: { + variants: ["filled", "gradient"], + colors: validColors, + }, styles: { - root: "relative block w-full", - spacing: { - x: "px-4", - y: "py-4", - }, - border: { - radius: "rounded-lg", - }, - typography: { - family: "font-sans", - size: "text-base", - weight: "font-regular", + base: { + position: "relative", + display: "block", + width: "w-full", + fontFamily: "font-sans", + fontSize: "text-base", + fontWeight: "font-regular", + px: "px-4", + py: "py-4", + borderRadius: "rounded-lg", }, variants: { filled: alertFilled, From 280dd3dc9a59933e2a8d9ce84904005bb216afb3 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Apr 2022 17:29:43 +0430 Subject: [PATCH 042/284] Refactor avatar component --- .../src/components/Avatar/index.js | 24 +++++++++++-------- .../src/theme/components/avatar/index.js | 11 ++++++++- 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Avatar/index.js b/packages/material-tailwind-react/src/components/Avatar/index.js index 947b344bb..18a11a97d 100644 --- a/packages/material-tailwind-react/src/components/Avatar/index.js +++ b/packages/material-tailwind-react/src/components/Avatar/index.js @@ -1,31 +1,35 @@ /* eslint-disable @next/next/no-img-element */ /* eslint-disable jsx-a11y/alt-text */ -import { forwardRef, useContext } from "react"; +import { forwardRef } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; +import findMatch from "utils/findMatch"; import objectsToString from "utils/objectsToString"; -import { MaterialTailwindTheme } from "context/theme"; +import { useTheme } from "context/theme"; export const Avatar = forwardRef(({ variant, size, className, ...rest }, ref) => { - const { avatar } = useContext(MaterialTailwindTheme); - const { defaultProps } = avatar; - const { root, variants, sizes } = avatar.styles; + // 1. init + const { avatar } = useTheme(); + const { valid, defaultProps } = avatar; + const { base, variants, sizes } = avatar.styles; + // 2. set default props variant = variant || defaultProps.variant; size = size || defaultProps.size; className = className || defaultProps.className; - const avatarVariant = variants[variant] || ""; - const avatarSize = sizes[size] ? objectsToString(sizes[size]) : ""; - - const classes = classnames(root, avatarVariant, avatarSize, className); + // 3. set styles + const avatarVariant = variants[findMatch(valid.variants, variant, "rounded")]; + const avatarSize = objectsToString(sizes[findMatch(valid.sizes, size, "md")]); + const classes = classnames(objectsToString(base), avatarVariant, avatarSize, className); + // 4. return return ; }); Avatar.propTypes = { - size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), variant: PropTypes.oneOf(["rounded", "circular"]), + size: PropTypes.oneOf(["xs", "sm", "md", "lg", "xl", "xxl"]), className: PropTypes.string, }; diff --git a/packages/material-tailwind-react/src/theme/components/avatar/index.js b/packages/material-tailwind-react/src/theme/components/avatar/index.js index 70925abc2..e83cbd954 100644 --- a/packages/material-tailwind-react/src/theme/components/avatar/index.js +++ b/packages/material-tailwind-react/src/theme/components/avatar/index.js @@ -4,8 +4,17 @@ const avatar = { size: "md", className: "", }, + valid: { + variants: ["rounded", "circular"], + sizes: ["xs", "sm", "md", "lg", "xl", "xxl"], + }, styles: { - root: "inline-block relative object-cover object-center", + base: { + display: "inline-block", + position: "relative", + objectFit: "object-cover", + objectPosition: "object-center", + }, sizes: { xs: { with: "w-6", From 1ecb4aeb7333bf3e7b35c2e86f3ddf0284cdaf9d Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Apr 2022 17:29:53 +0430 Subject: [PATCH 043/284] Add new util --- .../src/utils/combineMerge.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) create mode 100644 packages/material-tailwind-react/src/utils/combineMerge.js diff --git a/packages/material-tailwind-react/src/utils/combineMerge.js b/packages/material-tailwind-react/src/utils/combineMerge.js new file mode 100644 index 000000000..d8c454570 --- /dev/null +++ b/packages/material-tailwind-react/src/utils/combineMerge.js @@ -0,0 +1,17 @@ +const merge = require("deepmerge"); + +export default function combineMerge(target, source, options) { + const destination = target.slice(); + + source.forEach((item, index) => { + if (typeof destination[index] === "undefined") { + destination[index] = options.cloneUnlessOtherwiseSpecified(item, options); + } else if (options.isMergeableObject(item)) { + destination[index] = merge(target[index], item, options); + } else if (target.indexOf(item) === -1) { + destination.push(item); + } + }); + + return destination; +} From c540feeefe89a0f823b8c01e0c586fa6c3a7ab8c Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Apr 2022 17:29:59 +0430 Subject: [PATCH 044/284] Add new util --- packages/material-tailwind-react/src/utils/findMatch.js | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 packages/material-tailwind-react/src/utils/findMatch.js diff --git a/packages/material-tailwind-react/src/utils/findMatch.js b/packages/material-tailwind-react/src/utils/findMatch.js new file mode 100644 index 000000000..416fba303 --- /dev/null +++ b/packages/material-tailwind-react/src/utils/findMatch.js @@ -0,0 +1,7 @@ +function findMatch(data, find, defaultValue) { + const founded = data.findIndex((el) => el === find); + + return founded >= 0 ? find : defaultValue; +} + +export default findMatch; From 1793c3dc60803525468cb77c01427cd8dc7faca9 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Apr 2022 17:30:15 +0430 Subject: [PATCH 045/284] Update the valid colors util --- .../src/utils/validColors.js | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/material-tailwind-react/src/utils/validColors.js b/packages/material-tailwind-react/src/utils/validColors.js index b87fa9367..82ac1a72c 100644 --- a/packages/material-tailwind-react/src/utils/validColors.js +++ b/packages/material-tailwind-react/src/utils/validColors.js @@ -1,23 +1,23 @@ -const validColors = { - "blue-grey": "blue-grey", - grey: "grey", - brown: "brown", - "deep-orange": "deep-orange", - orange: "orange", - amber: "amber", - yellow: "yellow", - lime: "lime", - "light-green": "light-green", - green: "green", - teal: "teal", - cyan: "cyan", - "light-blue": "light-blue", - blue: "blue", - indigo: "indigo", - "deep-purple": "deep-purple", - purple: "purple", - pink: "pink", - red: "red", -}; +const validColors = [ + "blue-grey", + "grey", + "brown", + "deep-orange", + "orange", + "amber", + "yellow", + "lime", + "light-green", + "green", + "teal", + "cyan", + "light-blue", + "blue", + "indigo", + "deep-purple", + "purple", + "pink", + "red", +]; export default validColors; From 67f620c2010a969375970864fb9cfa646b12ced3 Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Apr 2022 17:30:46 +0430 Subject: [PATCH 046/284] Update the theme context --- .../material-tailwind-react/src/context/theme.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/material-tailwind-react/src/context/theme.js b/packages/material-tailwind-react/src/context/theme.js index 52e4d64e2..340407f95 100644 --- a/packages/material-tailwind-react/src/context/theme.js +++ b/packages/material-tailwind-react/src/context/theme.js @@ -1,20 +1,24 @@ -import { createContext } from "react"; +import { createContext, useContext } from "react"; import PropTypes from "prop-types"; import theme from "theme/index"; +import combineMerge from "utils/combineMerge"; const merge = require("deepmerge"); export const MaterialTailwindTheme = createContext(theme); + MaterialTailwindTheme.displayName = "MaterialTailwindThemeProvider"; export function ThemeProvider({ value, children }) { + const mergedValue = merge(theme, value, { arrayMerge: combineMerge }); + return ( - - {children} - + {children} ); } +export const useTheme = () => useContext(MaterialTailwindTheme); + ThemeProvider.defaultProps = { value: theme, }; From 5904ea4d6ad3f541d1909311440599d04388d84b Mon Sep 17 00:00:00 2001 From: sajadevo Date: Mon, 4 Apr 2022 17:46:02 +0430 Subject: [PATCH 047/284] Refactor button component --- .../src/components/Button/index.js | 34 ++++++---- .../src/theme/components/button/index.js | 68 ++++++++----------- 2 files changed, 46 insertions(+), 56 deletions(-) diff --git a/packages/material-tailwind-react/src/components/Button/index.js b/packages/material-tailwind-react/src/components/Button/index.js index 06658be0e..4c8e45a80 100644 --- a/packages/material-tailwind-react/src/components/Button/index.js +++ b/packages/material-tailwind-react/src/components/Button/index.js @@ -1,17 +1,19 @@ -import { forwardRef, useContext } from "react"; +import { forwardRef } from "react"; import PropTypes from "prop-types"; import classnames from "classnames"; import Ripple from "material-ripple-effects"; -import validColors from "utils/validColors"; +import findMatch from "utils/findMatch"; import objectsToString from "utils/objectsToString"; -import { MaterialTailwindTheme } from "context/theme"; +import { useTheme } from "context/theme"; export const Button = forwardRef( ({ variant, size, color, fullWidth, ripple, className, children, ...rest }, ref) => { - const { button } = useContext(MaterialTailwindTheme); - const { defaultProps } = button; - const { root, variants, sizes, typography, fullWidth: block, transition } = button.styles; + // 1. init + const { button } = useTheme(); + const { valid, defaultProps } = button; + const { base, variants, sizes, fullWidth: block } = button.styles; + // 2. set default props variant = variant || defaultProps.variant; size = size || defaultProps.size; color = color || defaultProps.color; @@ -19,24 +21,26 @@ export const Button = forwardRef( ripple = ripple === undefined ? defaultProps.ripple : ripple; className = className || defaultProps.className; + // 3. set ripple effect instance const rippleEffect = ripple !== undefined && new Ripple(); - const buttonVariant = variants[variant] - ? objectsToString(variants[variant][validColors[color] || defaultProps.color]) - : ""; - const buttonSize = sizes[size] ? objectsToString(sizes[size]) : ""; - const buttonTypography = objectsToString(typography); - + // 4. set styles + const buttonBase = objectsToString(base); + const buttonVariant = objectsToString( + variants[findMatch(valid.variants, variant, "filled")][ + findMatch(valid.colors, color, "light-blue") + ], + ); + const buttonSize = objectsToString(sizes[findMatch(valid.sizes, size, "md")]); const classes = classnames( - root, + buttonBase, buttonSize, buttonVariant, - buttonTypography, { [block]: fullWidth }, - transition, className, ); + // 5. return return (