umwd-components 0.1.2 → 0.1.4

package/dist/index.es.js

@@ -1 +1 @@
-import e,{useState as t,useEffect as r,useCallback as a}from"react";import n from"prop-types";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const o=()=>e.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},e.createElement("g",null,e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),i=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),l=({value:a,requirement:n})=>{const[l,c]=t();return r((()=>{c(n.validator(a))}),[a,n]),e.createElement("div",{className:"requirement"},l?e.createElement(i,null):e.createElement(o,null),e.createElement("p",{className:l?"valid":"invalid"},n.text))},c=({value:t,requirements:n,onValidChange:o})=>{const i=a(o,[]);return r((()=>{i(n.every((e=>e.validator(t))))}),[t,n,i]),n.map(((r,a)=>e.createElement(l,{key:a,value:t,requirement:r,onValidChange:o})))};function s({label:e,backgroundColor:t="red",size:r="md",onClick:a}){let n=1;"sm"===r&&(n=.75),"lg"===r&&(n=1.25);const o={backgroundColor:t,padding:`${.5*n}rem ${1*n}rem`,border:"none"};return React.createElement("button",{style:o,onClick:a},e)}function m({children:e,spacing:t=2,direction:r="row",wrap:a=!1}){const n={display:"flex",gap:.25*t+"rem",flexWrap:a?"wrap":"nowrap",flexDirection:r};return React.createElement("div",{style:n},e)}s.propTypes={label:n.string,backgroundColor:n.string,size:n.oneOf(["sm","md","lg"]),onClick:n.func},m.propTypes={spacing:n.number,wrap:n.bool,direction:n.oneOf(["row","column"])};export{s as Button,c as Requirements,m as Stack};
+import e,{useState as t,useEffect as r,useCallback as a}from"react";import n from"prop-types";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===r&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const o=()=>e.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},e.createElement("g",null,e.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),i=()=>e.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},e.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),e.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),l=({value:a,requirement:n})=>{const[l,c]=t();return r((()=>{c(n.validator(a))}),[a,n]),e.createElement("div",{className:"requirement"},l?e.createElement(i,null):e.createElement(o,null),e.createElement("p",{className:l?"valid":"invalid"},n.text))},c=({value:t,requirements:n,onValidChange:o})=>{const i=a(o,[]);return r((()=>{i(n.every((e=>e.validator(t))))}),[t,n,i]),n.map(((r,a)=>e.createElement(l,{key:a,value:t,requirement:r,onValidChange:o})))};function s({label:t,backgroundColor:r="red",size:a="md",onClick:n}){let o=1;"sm"===a&&(o=.75),"lg"===a&&(o=1.25);const i={backgroundColor:r,padding:`${.5*o}rem ${1*o}rem`,border:"none"};return e.createElement("button",{style:i,onClick:n},t)}function m({children:t,spacing:r=2,direction:a="row",wrap:n=!1}){const o={display:"flex",gap:.25*r+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:a};return e.createElement("div",{style:o},t)}s.propTypes={label:n.string,backgroundColor:n.string,size:n.oneOf(["sm","md","lg"]),onClick:n.func},m.propTypes={spacing:n.number,wrap:n.bool,direction:n.oneOf(["row","column"])};export{s as Button,c as Requirements,m as Stack};

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),l=r(t);!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===r&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const n=()=>a.default.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},a.default.createElement("g",null,a.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),o=()=>a.default.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},a.default.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),a.default.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),s=({value:t,requirement:r})=>{const[l,s]=e.useState();return e.useEffect((()=>{s(r.validator(t))}),[t,r]),a.default.createElement("div",{className:"requirement"},l?a.default.createElement(o,null):a.default.createElement(n,null),a.default.createElement("p",{className:l?"valid":"invalid"},r.text))};function c({label:e,backgroundColor:t="red",size:r="md",onClick:a}){let l=1;"sm"===r&&(l=.75),"lg"===r&&(l=1.25);const n={backgroundColor:t,padding:`${.5*l}rem ${1*l}rem`,border:"none"};return React.createElement("button",{style:n,onClick:a},e)}function i({children:e,spacing:t=2,direction:r="row",wrap:a=!1}){const l={display:"flex",gap:.25*t+"rem",flexWrap:a?"wrap":"nowrap",flexDirection:r};return React.createElement("div",{style:l},e)}c.propTypes={label:l.default.string,backgroundColor:l.default.string,size:l.default.oneOf(["sm","md","lg"]),onClick:l.default.func},i.propTypes={spacing:l.default.number,wrap:l.default.bool,direction:l.default.oneOf(["row","column"])},exports.Button=c,exports.Requirements=({value:t,requirements:r,onValidChange:l})=>{const n=e.useCallback(l,[]);return e.useEffect((()=>{n(r.every((e=>e.validator(t))))}),[t,r,n]),r.map(((e,r)=>a.default.createElement(s,{key:r,value:t,requirement:e,onValidChange:l})))},exports.Stack=i;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("prop-types");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=r(e),l=r(t);!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],l=document.createElement("style");l.type="text/css","top"===r&&a.firstChild?a.insertBefore(l,a.firstChild):a.appendChild(l),l.styleSheet?l.styleSheet.cssText=e:l.appendChild(document.createTextNode(e))}}(".requirement{align-items:center;display:flex;height:35px}.requirement p{font-family:sans-serif;font-size:14px;font-weight:700;margin-left:10px}.invalid{color:red}.valid{color:#7ac142}.checkmark{stroke-width:5;stroke:#fff;stroke-miterlimit:10;animation:fill .4s ease-in-out .4s forwards,scale .3s ease-in-out .9s both;border-radius:50%;box-shadow:inset 0 0 0 #7ac142;display:block;height:15px;width:15px}.checkmark__circle{stroke-dasharray:166;stroke-dashoffset:166;stroke-width:2;stroke-miterlimit:10;stroke:#7ac142;fill:none;animation:stroke .6s cubic-bezier(.65,0,.45,1) forwards}.checkmark__check{stroke-dasharray:48;stroke-dashoffset:48;animation:stroke .2s cubic-bezier(.65,0,.45,1) .5s forwards;transform-origin:50% 50%}@keyframes stroke{to{stroke-dashoffset:0}}@keyframes scale{0%,to{transform:none}50%{transform:scale3d(1.1,1.1,1)}}@keyframes fill{to{box-shadow:inset 0 0 0 30px #7ac142}}");const n=()=>a.default.createElement("svg",{x:"0px",y:"0px",width:"15px",height:"15px",viewBox:"0 0 122.879 122.879",enableBackground:"new 0 0 122.879 122.879"},a.default.createElement("g",null,a.default.createElement("path",{fillRule:"evenodd",clipRule:"evenodd",fill:"#FF4141",d:"M61.44,0c33.933,0,61.439,27.507,61.439,61.439 s-27.506,61.439-61.439,61.439C27.507,122.879,0,95.372,0,61.439S27.507,0,61.44,0L61.44,0z M73.451,39.151 c2.75-2.793,7.221-2.805,9.986-0.027c2.764,2.776,2.775,7.292,0.027,10.083L71.4,61.445l12.076,12.249 c2.729,2.77,2.689,7.257-0.08,10.022c-2.773,2.765-7.23,2.758-9.955-0.013L61.446,71.54L49.428,83.728 c-2.75,2.793-7.22,2.805-9.986,0.027c-2.763-2.776-2.776-7.293-0.027-10.084L51.48,61.434L39.403,49.185 c-2.728-2.769-2.689-7.256,0.082-10.022c2.772-2.765,7.229-2.758,9.953,0.013l11.997,12.165L73.451,39.151L73.451,39.151z"}))),o=()=>a.default.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},a.default.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),a.default.createElement("path",{className:"checkmark__check",fill:"none",d:"M14.1 27.2l7.1 7.2 16.7-16.8"})),s=({value:t,requirement:r})=>{const[l,s]=e.useState();return e.useEffect((()=>{s(r.validator(t))}),[t,r]),a.default.createElement("div",{className:"requirement"},l?a.default.createElement(o,null):a.default.createElement(n,null),a.default.createElement("p",{className:l?"valid":"invalid"},r.text))};function i({label:e,backgroundColor:t="red",size:r="md",onClick:l}){let n=1;"sm"===r&&(n=.75),"lg"===r&&(n=1.25);const o={backgroundColor:t,padding:`${.5*n}rem ${1*n}rem`,border:"none"};return a.default.createElement("button",{style:o,onClick:l},e)}function c({children:e,spacing:t=2,direction:r="row",wrap:l=!1}){const n={display:"flex",gap:.25*t+"rem",flexWrap:l?"wrap":"nowrap",flexDirection:r};return a.default.createElement("div",{style:n},e)}i.propTypes={label:l.default.string,backgroundColor:l.default.string,size:l.default.oneOf(["sm","md","lg"]),onClick:l.default.func},c.propTypes={spacing:l.default.number,wrap:l.default.bool,direction:l.default.oneOf(["row","column"])},exports.Button=i,exports.Requirements=({value:t,requirements:r,onValidChange:l})=>{const n=e.useCallback(l,[]);return e.useEffect((()=>{n(r.every((e=>e.validator(t))))}),[t,r,n]),r.map(((e,r)=>a.default.createElement(s,{key:r,value:t,requirement:e,onValidChange:l})))},exports.Stack=c;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "umwd-components",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "description": "UMWD Component library",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -33,6 +33,9 @@
     ]
   },
   "devDependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
+    "@mui/material": "^5.14.18",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@storybook/addon-essentials": "^7.5.3",
@@ -62,8 +65,9 @@
     "webpack": "^5.89.0"
   },
   "peerDependencies": {
+    "@mui/material": "^5.14.18",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "prop-types": "^15.8.1"
+    "react-dom": "^18.2.0"
   }
 }

package/src/components/Button.js

@@ -1,3 +1,4 @@
+import React from "react";
 import PropTypes from "prop-types";
 
 function Button({ label, backgroundColor = "red", size = "md", onClick }) {

package/src/components/NoteTextField/NoteTextField.js

@@ -0,0 +1,14 @@
+import React from "react";
+import { TextField } from "@mui/material";
+
+export const NoteTextField = (props) => {
+  return (
+    <TextField
+      {...props}
+      sx={{
+        background:
+          "linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)",
+      }}
+    />
+  );
+};

package/src/components/NoteTextField/index.js

@@ -0,0 +1 @@
+export * from "./NoteTextField";

package/src/components/Stack.js

@@ -1,3 +1,4 @@
+import React from "react";
 import PropTypes from "prop-types";
 
 function Stack({ children, spacing = 2, direction = "row", wrap = false }) {

package/src/stories/NoteTextField.stories.js

@@ -0,0 +1,15 @@
+import React from "react";
+import { NoteTextField } from "../components/NoteTextField";
+
+export default {
+  title: "UMWD/NoteTextField",
+  component: NoteTextField,
+};
+
+const NoteTextFieldWithHooks = () => {
+  return <NoteTextField label={"hello world"} />;
+};
+
+export const Default = {
+  render: () => <NoteTextFieldWithHooks />,
+};