umwd-components 0.1.5 → 0.1.6

package/.storybook/main.js

@@ -1,20 +1,18 @@
-/** @type { import('@storybook/react-webpack5').StorybookConfig } */
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   addons: [
     "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/preset-create-react-app",
     "@storybook/addon-onboarding",
     "@storybook/addon-interactions",
   ],
   framework: {
-    name: "@storybook/react-webpack5",
+    name: '@storybook/nextjs',
     options: {},
   },
   docs: {
     autodocs: "tag",
   },
-  staticDirs: ["..\\public"],
+  staticDirs: ["..\\public"]
 };
 export default config;

package/.storybook/preview.js

@@ -8,6 +8,7 @@ const preview = {
         date: /Date$/i,
       },
     },
+    layout: "fullscreen",
   },
 };
 

package/aant.txt

@@ -0,0 +1,10 @@
+publishing to npm
+
+package version ++
+
+npm login
+
+jellepa
+ueHs/fW%&66BNs)
+
+npm publish

package/dist/index.es.js

@@ -1 +1 @@
-import e,{useState as r,useEffect as t,useCallback as a}from"react";import{TextField as n}from"@mui/material";import o from"prop-types";!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&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 i=()=>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"}))),l=()=>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"})),c=({value:a,requirement:n})=>{const[o,c]=r();return t((()=>{c(n.validator(a))}),[a,n]),e.createElement("div",{className:"requirement"},o?e.createElement(l,null):e.createElement(i,null),e.createElement("p",{className:o?"valid":"invalid"},n.text))},s=({value:r,requirements:n,onValidChange:o})=>{const i=a(o,[]);return t((()=>{i(n.every((e=>e.validator(r))))}),[r,n,i]),n.map(((t,a)=>e.createElement(c,{key:a,value:r,requirement:t,onValidChange:o})))};function m(){return m=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},m.apply(this,arguments)}const d=r=>e.createElement(n,m({},r,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}}));function f({label:r,backgroundColor:t="red",size:a="md",onClick:n}){let o=1;"sm"===a&&(o=.75),"lg"===a&&(o=1.25);const i={backgroundColor:t,padding:`${.5*o}rem ${1*o}rem`,border:"none"};return e.createElement("button",{style:i,onClick:n},r)}function p({children:r,spacing:t=2,direction:a="row",wrap:n=!1}){const o={display:"flex",gap:.25*t+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:a};return e.createElement("div",{style:o},r)}f.propTypes={label:o.string,backgroundColor:o.string,size:o.oneOf(["sm","md","lg"]),onClick:o.func},p.propTypes={spacing:o.number,wrap:o.bool,direction:o.oneOf(["row","column"])};export{f as Button,d as NoteTextField,s as Requirements,p as Stack};
+import e,{useState as t,useEffect as r,useCallback as a}from"react";import{TextField as n}from"@mui/material";import o from"prop-types";import"next/image";import"next/router";import"next/link";import"@mui/icons-material/Close";import"@mui/icons-material/MoreVert";!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 i=()=>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"}))),l=()=>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"})),c=({value:a,requirement:n})=>{const[o,c]=t();return r((()=>{c(n.validator(a))}),[a,n]),e.createElement("div",{className:"requirement"},o?e.createElement(l,null):e.createElement(i,null),e.createElement("p",{className:o?"valid":"invalid"},n.text))},s=({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(c,{key:a,value:t,requirement:r,onValidChange:o})))};function m(){return m=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},m.apply(this,arguments)}const d=t=>e.createElement(n,m({},t,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}}));function p({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 f({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)}p.propTypes={label:o.string,backgroundColor:o.string,size:o.oneOf(["sm","md","lg"]),onClick:o.func},f.propTypes={spacing:o.number,wrap:o.bool,direction:o.oneOf(["row","column"])};export{p as Button,d as NoteTextField,s as Requirements,f as Stack};

package/dist/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@mui/material"),r=require("prop-types");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(e),n=a(r);!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 o=()=>l.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"},l.default.createElement("g",null,l.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"}))),i=()=>l.default.createElement("svg",{className:"checkmark",viewBox:"0 0 52 52"},l.default.createElement("circle",{className:"checkmark__circle",cx:"26",cy:"26",r:"25",fill:"none"}),l.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[a,n]=e.useState();return e.useEffect((()=>{n(r.validator(t))}),[t,r]),l.default.createElement("div",{className:"requirement"},a?l.default.createElement(i,null):l.default.createElement(o,null),l.default.createElement("p",{className:a?"valid":"invalid"},r.text))};function c(){return c=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var a in r)Object.prototype.hasOwnProperty.call(r,a)&&(e[a]=r[a])}return e},c.apply(this,arguments)}function d({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 l.default.createElement("button",{style:o,onClick:a},e)}function u({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 l.default.createElement("div",{style:n},e)}d.propTypes={label:n.default.string,backgroundColor:n.default.string,size:n.default.oneOf(["sm","md","lg"]),onClick:n.default.func},u.propTypes={spacing:n.default.number,wrap:n.default.bool,direction:n.default.oneOf(["row","column"])},exports.Button=d,exports.NoteTextField=e=>l.default.createElement(t.TextField,c({},e,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}})),exports.Requirements=({value:t,requirements:r,onValidChange:a})=>{const n=e.useCallback(a,[]);return e.useEffect((()=>{n(r.every((e=>e.validator(t))))}),[t,r,n]),r.map(((e,r)=>l.default.createElement(s,{key:r,value:t,requirement:e,onValidChange:a})))},exports.Stack=u;
+"use strict";var e=require("react"),r=require("@mui/material"),t=require("prop-types");require("next/image"),require("next/router"),require("next/link"),require("@mui/icons-material/Close"),require("@mui/icons-material/MoreVert");!function(e,r){void 0===r&&(r={});var t=r.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&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 a=()=>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"}))),n=()=>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"})),i=({value:r,requirement:t})=>{const[i,o]=e.useState();return e.useEffect((()=>{o(t.validator(r))}),[r,t]),e.createElement("div",{className:"requirement"},i?e.createElement(n,null):e.createElement(a,null),e.createElement("p",{className:i?"valid":"invalid"},t.text))};function o(){return o=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var a in t)Object.prototype.hasOwnProperty.call(t,a)&&(e[a]=t[a])}return e},o.apply(this,arguments)}function s({label:r,backgroundColor:t="red",size:a="md",onClick:n}){let i=1;"sm"===a&&(i=.75),"lg"===a&&(i=1.25);const o={backgroundColor:t,padding:`${.5*i}rem ${1*i}rem`,border:"none"};return e.createElement("button",{style:o,onClick:n},r)}function l({children:r,spacing:t=2,direction:a="row",wrap:n=!1}){const i={display:"flex",gap:.25*t+"rem",flexWrap:n?"wrap":"nowrap",flexDirection:a};return e.createElement("div",{style:i},r)}s.propTypes={label:t.string,backgroundColor:t.string,size:t.oneOf(["sm","md","lg"]),onClick:t.func},l.propTypes={spacing:t.number,wrap:t.bool,direction:t.oneOf(["row","column"])},exports.Button=s,exports.NoteTextField=t=>e.createElement(r.TextField,o({},t,{sx:{background:"linear-gradient(45deg, rgba(251,246,137,1) 30%, rgba(252,242,138,1) 90%)"}})),exports.Requirements=({value:r,requirements:t,onValidChange:a})=>{const n=e.useCallback(a,[]);return e.useEffect((()=>{n(t.every((e=>e.validator(r))))}),[r,t,n]),t.map(((t,n)=>e.createElement(i,{key:n,value:r,requirement:t,onValidChange:a})))},exports.Stack=l;

package/next.config.js

@@ -0,0 +1,15 @@
+// @ts-check
+ 
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    /* config options here */
+    images: {
+        remotePatterns: [{
+            protocol: 'https',
+            hostname: 'www.google.com',
+            pathname: '/images/**',
+        }        ],
+    }
+  }
+   
+  module.exports = nextConfig

package/package.json

@@ -1,73 +1,79 @@
-{
-  "name": "umwd-components",
-  "version": "0.1.5",
-  "description": "UMWD Component library",
-  "main": "dist/index.js",
-  "module": "dist/index.es.js",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build-lib": "rollup -c"
-  },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest",
-      "plugin:storybook/recommended"
-    ]
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  },
-  "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",
-    "@storybook/addon-interactions": "^7.5.3",
-    "@storybook/addon-links": "^7.5.3",
-    "@storybook/addon-onboarding": "^1.0.8",
-    "@storybook/blocks": "^7.5.3",
-    "@storybook/preset-create-react-app": "^7.5.3",
-    "@storybook/react": "^7.5.3",
-    "@storybook/react-webpack5": "^7.5.3",
-    "@storybook/testing-library": "^0.2.2",
-    "@testing-library/jest-dom": "^5.17.0",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "babel-plugin-named-exports-order": "^0.0.2",
-    "eslint-plugin-storybook": "^0.6.15",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-scripts": "5.0.1",
-    "rollup": "^2.79.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-terser": "^7.0.2",
-    "storybook": "^7.5.3",
-    "web-vitals": "^2.1.4",
-    "webpack": "^5.89.0"
-  },
-  "peerDependencies": {
-    "@mui/material": "^5.14.18",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  }
-}
+{
+  "name": "umwd-components",
+  "version": "0.1.6",
+  "description": "UMWD Component library",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build-lib": "rollup -c",
+    "build-next": "next build",
+    "develop": "next dev",
+    "dev": "next dev",
+    "start": "next start -p 3000",
+    "deploy": "next build && next export",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix"
+  },
+  "eslintConfig": {
+    "extends": [
+      "next"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@emotion/react": "^11.11.3",
+    "@emotion/styled": "^11.11.0",
+    "@babel/preset-react": "7.23.3",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-essentials": "^7.6.7",
+    "@storybook/addon-interactions": "^7.6.7",
+    "@storybook/addon-links": "^7.6.7",
+    "@storybook/addon-onboarding": "^1.0.10",
+    "@storybook/blocks": "^7.6.7",
+    "@storybook/nextjs": "^7.6.16",
+    "@storybook/react": "^7.6.7",
+    "@storybook/testing-library": "^0.2.2",
+    "@testing-library/jest-dom": "^6.1.6",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "babel-plugin-named-exports-order": "^0.0.2",
+    "eslint-plugin-storybook": "^0.6.15",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rollup": "^4.9.2",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^7.6.7",
+    "web-vitals": "^3.5.1",
+    "webpack": "^5.89.0"
+  },
+  "peerDependencies": {
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.3",
+    "mui-markdown": "^1.1.13",
+    "next": "^14.1.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1"
+  }
+}

package/{rollup.config.js → rollup.config.mjs}

@@ -1,10 +1,10 @@
 import babel from "@rollup/plugin-babel";
 import resolve from "@rollup/plugin-node-resolve";
 import external from "rollup-plugin-peer-deps-external";
-import { terser } from "rollup-plugin-terser";
+import terser from "@rollup/plugin-terser";
 import postcss from "rollup-plugin-postcss";
 
-export default [
+const config = [
   {
     input: "./src/index.js",
     output: [
@@ -33,3 +33,6 @@ export default [
     ],
   },
 ];
+
+export default config;
+

package/src/components/DragAndDropList/DraggableItem.js

@@ -0,0 +1,27 @@
+import React from "react";
+import { useDrag } from "react-dnd";
+
+const DraggableItem = ({ id, text }) => {
+  const [{ isDragging }, drag] = useDrag({
+    type: "item",
+    item: { id },
+    collect: (monitor) => ({
+      isDragging: !!monitor.isDragging(),
+    }),
+  });
+
+  return (
+    <div
+      ref={drag}
+      style={{
+        opacity: isDragging ? 0.5 : 1,
+        cursor: "grab",
+        border: isDragging ? "2px solid red" : "2px solid blue",
+      }}
+    >
+      {text}
+    </div>
+  );
+};
+
+export default DraggableItem;

package/src/components/DragAndDropList/DroppableArea.js

@@ -0,0 +1,13 @@
+import React from "react";
+import { useDrop } from "react-dnd";
+
+const DroppableArea = ({ onDrop, children }) => {
+  const [, drop] = useDrop({
+    accept: "item",
+    drop: onDrop,
+  });
+
+  return <div ref={drop}>{children}</div>;
+};
+
+export default DroppableArea;

package/src/components/DragAndDropList/index.js

@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+import { DndProvider } from "react-dnd";
+import DraggableItem from "./DraggableItem";
+import DroppableArea from "./DroppableArea";
+import { HTML5Backend } from "react-dnd-html5-backend";
+
+const DragAndDropList = () => {
+  const [items, setItems] = useState([
+    { id: 1, text: "Item 1" },
+    { id: 2, text: "Item 2" },
+    { id: 3, text: "Item 3" },
+  ]);
+
+  const handleDrop = (item) => {
+    // Implement logic to update the order of items after drop
+    console.log("Item dropped:", item);
+  };
+
+  return (
+    <DndProvider backend={HTML5Backend}>
+      <DroppableArea onDrop={handleDrop}>
+        {items.map((item) => (
+          <DraggableItem key={item.id} id={item.id} text={item.text} />
+        ))}
+      </DroppableArea>
+    </DndProvider>
+  );
+};
+
+export { DragAndDropList };