mottled-library - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/components/NetworkIcon/NetworkIcon.d.ts

 import { FunctionComponent } from "react";
 import type { ClassAndStyle } from "../common_types";
-import type { Size } from "mottled-library";
-import { Network } from "mottled-library";
+import type { Size } from "../..";
+import { Network } from "../..";
 export interface NetworkIconProps extends ClassAndStyle {
@@ -6,0 +6,0 @@ network?: Network;

dist/components/Tooltip/Tooltip.js

@@ -1,1 +0,1 @@
-"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("react"));exports.Tooltip=({children:t,text:o,position:a="top",st:l,cName:c})=>{const r=`rounded shadow-lg p-1 bg-gray-100 ${a} `;return e.default.createElement("div",{"data-testid":"Tooltip",className:"_mottled_tooltip"},e.default.createElement("span",{style:l,className:c?"_mottled_tooltiptext ".concat(r).concat(c):"_mottled_tooltiptext ".concat(r)},o),t)};
+"use strict";function t(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}Object.defineProperty(exports,"__esModule",{value:!0});var e=t(require("react"));exports.Tooltip=({children:t,text:o,position:a="top",st:l,cName:c})=>{const r=`rounded shadow-lg p-1 bg-gray-100 tooltip_${a} `;return e.default.createElement("div",{"data-testid":"Tooltip",className:"_mottled_tooltip"},e.default.createElement("span",{style:l,className:c?"_mottled_tooltiptext ".concat(r).concat(c):"_mottled_tooltiptext ".concat(r)},o),t)};

dist/index.d.ts

@@ -6,2 +6,3 @@ export * from "./core/index";
 export { Tooltip } from "./components/Tooltip/Tooltip";
+export { Accordion } from "./components/Accordion/Accordion";
 export { NetworkSlider } from "./recipes/NetworkSlider/NetworkSlider";

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/index.js"),o=require("./components/Button/Button.js"),r=require("./components/NetworkIcon/NetworkIcon.js"),t=require("./components/Card/Card.js"),s=require("./components/Tooltip/Tooltip.js"),i=require("./recipes/NetworkSlider/NetworkSlider.js");exports.createSecColor=e.createSecColor,exports.defaultChains=e.defaultChains,exports.getChain=e.getChain,exports.getChains=e.getChains,exports.Button=o.Button,exports.NetworkIcon=r.NetworkIcon,exports.Card=t.Card,exports.Tooltip=s.Tooltip,exports.NetworkSlider=i.NetworkSlider;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/index.js"),o=require("./components/Button/Button.js"),r=require("./components/NetworkIcon/NetworkIcon.js"),t=require("./components/Card/Card.js"),s=require("./components/Tooltip/Tooltip.js"),n=require("./components/Accordion/Accordion.js"),i=require("./recipes/NetworkSlider/NetworkSlider.js");exports.createSecColor=e.createSecColor,exports.defaultChains=e.defaultChains,exports.getChain=e.getChain,exports.getChains=e.getChains,exports.Button=o.Button,exports.NetworkIcon=r.NetworkIcon,exports.Card=t.Card,exports.Tooltip=s.Tooltip,exports.Accordion=n.Accordion,exports.NetworkSlider=i.NetworkSlider;

dist/recipes/NetworkSlider/NetworkSlider.d.ts

 import React from "react";
-import { Network, NetworkDetails } from "mottled-library";
+import { Network, NetworkDetails } from "../..";
 interface NetworkSliderProps {
@@ -4,0 +4,0 @@ networks?: Network[];

dist/recipes/NetworkSlider/NetworkSlider.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../core/index.js"),o=require("../../components/Button/Button.js"),r=require("../../components/NetworkIcon/NetworkIcon.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(e);const c=(e,t,o,r,l=!1)=>({backgroundColor:e,hover:{backgroundColor:t,border:`0.1rem solid ${e}`},display:l?r>0?"flex":"none":o?"none":"flex"}),a=n.default.memo((({network:e,active:t,cb:l,type:c,leftPosition:a,primary:u})=>{let s=Object.assign({},{left:`${a}px`},t?{backgroundColor:"#ffffff",color:u,hover:{backgroundColor:"#ffffff",color:u}}:{});return n.default.createElement(o.Button,{cName:"positioning _mottled_button_ow",st:s,onClick:()=>l(e)},n.default.createElement(r.NetworkIcon,{size:"2xl",network:e,show:c}))}));exports.NetworkSlider=({networks:r,defaultNetwork:l,setNetwork:u,type:s="both"})=>{const[d,i]=e.useState(l||"polkadot"),[f,m]=e.useState(150),k=r||t.defaultChains,p=e.useRef(null),[v,h]=e.useState(0),[b,w]=e.useState(!0),[C,g]=e.useState({});return e.useEffect((()=>{"icon"===s?m(50):"name"===s&&m(130)}),[s]),e.useEffect((()=>{if(p.current){const e=k.length*f,t=p.current.offsetWidth;w(e<=t||k.length*f*v>e)}}),[k.length,v,f,p]),e.useEffect((()=>{const e=t.getChain(d);e&&(g(e),u(e))}),[d,u]),n.default.createElement("div",{"data-testid":"NetworkSlider",ref:p,style:{background:null==C?void 0:C.secColor},className:"_mottled_SliderButtons"},n.default.createElement(o.Button,{cName:"_mottled_handle",st:c(null==C?void 0:C.color,null==C?void 0:C.secColor,b,v,!0),onClick:()=>h(v-1)},"<"),n.default.createElement(o.Button,{st:c(null==C?void 0:C.color,null==C?void 0:C.secColor,b,v),cName:"_mottled_handle handle_right",onClick:()=>h(v+1)},">"),k.map((e=>n.default.createElement(a,{primary:null==C?void 0:C.color,secondary:null==C?void 0:C.secColor,leftPosition:-v*f,key:e,network:e,type:s,active:d===e,cb:i}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../core/index.js"),o=require("../../components/Button/Button.js"),r=require("../../components/NetworkIcon/NetworkIcon.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../components/Accordion/Accordion.js");var l=n(e);const c=(e,t,o,r,n=!1)=>({backgroundColor:e,hover:{backgroundColor:t,border:`0.1rem solid ${e}`},display:n?r>0?"flex":"none":o?"none":"flex"}),a=l.default.memo((({network:e,active:t,cb:n,type:c,leftPosition:a,primary:u})=>{let s=Object.assign({},{left:`${a}px`},t?{backgroundColor:"#ffffff",color:u,hover:{backgroundColor:"#ffffff",color:u}}:{});return l.default.createElement(o.Button,{cName:"positioning _mottled_button_ow",st:s,onClick:()=>n(e)},l.default.createElement(r.NetworkIcon,{size:"2xl",network:e,show:c}))}));exports.NetworkSlider=({networks:r,defaultNetwork:n,setNetwork:u,type:s="both"})=>{const[i,d]=e.useState(n||"polkadot"),[f,m]=e.useState(150),k=r||t.defaultChains,p=e.useRef(null),[v,h]=e.useState(0),[w,b]=e.useState(!0),[g,C]=e.useState({});return e.useEffect((()=>{"icon"===s?m(50):"name"===s&&m(130)}),[s]),e.useEffect((()=>{if(p.current){const e=k.length*f,t=p.current.offsetWidth;b(e<=t||k.length*f*v>e)}}),[k.length,v,f,p]),e.useEffect((()=>{const e=t.getChain(i);e&&(C(e),u(e))}),[i,u]),console.log("actNetwork",g),l.default.createElement("div",{"data-testid":"NetworkSlider",ref:p,style:{background:null==g?void 0:g.secColor},className:"_mottled_SliderButtons"},l.default.createElement(o.Button,{cName:"_mottled_handle",st:c(null==g?void 0:g.color,null==g?void 0:g.secColor,w,v,!0),onClick:()=>h(v-1)},"<"),l.default.createElement(o.Button,{st:c(null==g?void 0:g.color,null==g?void 0:g.secColor,w,v),cName:"_mottled_handle handle_right",onClick:()=>h(v+1)},">"),k.map((e=>l.default.createElement(a,{primary:null==g?void 0:g.color,secondary:null==g?void 0:g.secColor,leftPosition:-v*f,key:e,network:e,type:s,active:i===e,cb:d}))))};

package.json

 {
   "name": "mottled-library",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "author": "Parity Team <[e-mail]>",
@@ -20,27 +20,28 @@ "maintainers": [
   "scripts": {
-    "ts:typedefs": "tsc --outDir ./dist --emitDeclarationOnly",
-    "watch": "rollup -w",
-    "build": "yarn run ts:typedefs && node ./utils/cssbundle.js && rollup -c",
+    "dev": "yarn run build && yarn run sb",
+    "build": "yarn run ts:typedefs && yarn run css && node utils/cssbundle.js && rollup -c",
     "generate": "node ./utils/generate.js",
     "clean": "rm -rf dist css storybook-static",
-    "clean:all": "yarn run clean && node ./utils/clean.js",
+    "sb": "start-storybook -p 6006",
+    "build-sb": "build-storybook",
+    "sb:safe": "start-storybook -p --no-manager-cache 6006",
     "lint": "prettier --check .",
     "format": "prettier --write .",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
-    "deploy-storybook": "yarn run build-storybook && gh-pages -d storybook-static"
+    "deploy-sb": "yarn run build-storybook && gh-pages -d storybook-static",
+    "ts:typedefs": "tsc --outDir ./dist --emitDeclarationOnly",
+    "css": "postcss src/**/*.css -d css"
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^13.2.0",
+    "@rollup/plugin-node-resolve": "^13.2.1",
     "@rollup/plugin-run": "^2.1.0",
-    "@storybook/addon-actions": "^6.4.21",
-    "@storybook/addon-docs": "^6.4.21",
-    "@storybook/addon-essentials": "^6.4.21",
-    "@storybook/addon-interactions": "^6.4.21",
-    "@storybook/addon-links": "^6.4.21",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-links": "^6.4.22",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/react": "^6.4.21",
+    "@storybook/addons": "^6.4.22",
+    "@storybook/preset-create-react-app": "^4.1.0",
+    "@storybook/react": "^6.4.22",
     "@storybook/testing-library": "^0.0.9",
@@ -50,8 +51,10 @@ "@types/babel__core": "^7",
     "@types/glob": "^7",
-    "@types/node": "^17.0.23",
+    "@types/node": "^17.0.24",
     "@types/prettier": "^2",
-    "@types/react": "^18.0.1",
+    "@types/react": "^18.0.5",
     "@types/react-dom": "^18",
     "@types/rollup-plugin-peer-deps-external": "^2",
-    "@typescript-eslint/parser": "^5.18.0",
+    "@types/storybook__addon-info": "^5",
+    "@typescript-eslint/parser": "^5.19.0",
+    "autoprefixer": "^9",
     "babel-loader": "^8.2.4",
@@ -61,9 +64,12 @@ "concurrently": "^7.1.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-config-react-app": "^7.0.0",
+    "eslint-config-react-app": "^7.0.1",
     "gh-pages": "^3.2.3",
     "glob": "^8.0.1",
     "node-sass": "^7.0.1",
+    "npm-watch": "^0.11.0",
     "postcss": "^8.4.12",
+    "postcss-cli": "^9.1.0",
     "prettier": "2.6.2",
-    "rollup": "^2.70.1",
+    "react-docgen-typescript-loader": "^3.7.2",
+    "rollup": "^2.70.2",
     "rollup-plugin-execute": "^1.1.1",
@@ -74,2 +80,3 @@ "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-typescript2": "^0.31.2",
+    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.17",
     "typescript": "^4.6.3"
@@ -76,0 +83,0 @@ },

README.md

@@ -22,9 +22,7 @@ # 🪴 Mottled Library 🪴
 - `yarn run dev`: builds the library and executes storybook. Once this is running all changes in existing components will depict in storybook running instance;
+- `generate`: receives 2 input parameters, type (component or recipe) and name of component, and generates a directory including *.tsx, *modules.css and \*.stories.tsx files in respective type chosen
 - `yarn run build`: prepares the library for publishing (css and ts files);
-- `yarn run css`: transpiles and builds only css files;
-- `yarn run css-watch`: builds and watches css files for changes;
+- `yarn run css`: Preparesall `css` files and places them in `./css` directory;
 - `yarn run format`: formats all files based on prettier configuration;
-- `yarn run storybook`: runs storybook;
 - `yarn run deploy-storybook`: prepares and deploys storybook (doc) at gh-pages;
-- `generate`: receives 2 input parameters, type (component or recipe) and name of component, and generates a directory including *.tsx, *modules.css and \*.stories.tsx files in respective type chosen
 
@@ -59,3 +57,3 @@ ## Usage
 As mentioned above, Storybook is used for documentation and development.
-In order to see a showcase of current components and recipes see [here]()(Implementation pending)
+In order to see a showcase of current components and recipes see [here](https://paritytech.github.io/mottled-library/index.html)
 
@@ -67,1 +65,6 @@ ## Possible Errors:
 An `error:0308010C:digital envelope routines::unsupported` occurs with the Node.js version 17 as it’s not the LTS version, and there is a breaking change in the OpenSSL. Use LTS version 16.14.0 for not facing the issue. NODE_OPTIONS could also be set, as an alternative, but is not a recommended approach (you can still try this on your local machine as a quick fix).
+
+### Storybook page upon start, returns `Cannot Get /`
+
+If this error appears instead of storybook execute once the command:
+`yarn run sb:safe`. This starts storybook with the flag `--no-manager-cache`

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4044899

increased by12871.07%

Number of package files

32

increased by14.29%

Lines of code

147099

increased by52623.66%

Number of lines in readme file

68

increased by4.62%

Worsened metrics

Dev dependency count

45

increased by15.38%

Number of low quality alerts

8

increased by14.29%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes