umwd-components 0.1.0 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.es.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import e,{useState as t,useEffect as
|
|
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};
|
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function
|
|
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;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "umwd-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.2",
|
|
4
4
|
"description": "UMWD Component library",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -63,6 +63,7 @@
|
|
|
63
63
|
},
|
|
64
64
|
"peerDependencies": {
|
|
65
65
|
"react": "^18.2.0",
|
|
66
|
-
"react-dom": "^18.2.0"
|
|
66
|
+
"react-dom": "^18.2.0",
|
|
67
|
+
"prop-types": "^15.8.1"
|
|
67
68
|
}
|
|
68
69
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Xmark } from "../Xmark";
|
|
2
2
|
import { Checkmark } from "../Checkmark";
|
|
3
|
-
import { useEffect, useState } from "react";
|
|
3
|
+
import React, { useEffect, useState } from "react";
|
|
4
4
|
|
|
5
5
|
export const Requirement = ({ value, requirement }) => {
|
|
6
6
|
const [isValid, setIsValid] = useState();
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "../../styles.css";
|
|
2
2
|
import { Requirement } from "../Requirement";
|
|
3
|
-
import { useCallback, useEffect } from "react";
|
|
3
|
+
import React, { useCallback, useEffect } from "react";
|
|
4
4
|
|
|
5
5
|
export const Requirements = ({ value, requirements, onValidChange }) => {
|
|
6
6
|
const validChangeCb = useCallback(onValidChange, []);
|
package/src/index.js
CHANGED