mottled-library - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/components/NetworkIcon/NetworkIcon.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("../../core/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}require("../../recipes/NetworkSlider/NetworkSlider.js");var r=o(e);exports.NetworkIcon=({network:e=t.Network.polkadot,size:o="2xl",show:c="both",color:a})=>{const l="txt-".concat(o);return r.default.createElement("div",{className:"__mottled_networkicon_container",style:{color:a}},("icon"===c||"both"===c)&&r.default.createElement("div",{className:["_mottled_icon",l].join(" ")},e),("name"===c||"both"===c)&&r.default.createElement("div",{className:l.concat(" cap"),style:{color:a}},e))};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}Object.defineProperty(exports,"__esModule",{value:!0});var t=e(require("react"));exports.NetworkIcon=({network:e="polkadot",size:o="2xl",show:c="both",color:a})=>{const r="txt-".concat(o);return t.default.createElement("div",{className:"__mottled_networkicon_container",style:{color:a}},("icon"===c||"both"===c)&&t.default.createElement("div",{className:["_mottled_icon",r].join(" ")},e),("name"===c||"both"===c)&&t.default.createElement("div",{className:r.concat(" cap"),style:{color:a}},e))};

dist/core/index.d.ts

 export declare const createSecColor: (color: string, amount: number) => string;
-export declare enum Network {
-    polkadot = "polkadot",
-    kusama = "kusama",
-    westend = "westend",
-    rococo = "rococo"
-}
-export declare type DefaultNetworks = Network.polkadot | Network.kusama | Network.westend | Network.rococo;
-export declare type Size = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
-export declare const defaultNetworks: Network[];
+export declare type Network = "polkadot" | "kusama" | "westend" | "rococo";
 export interface NetworkDetails {
@@ -16,4 +8,7 @@ id: string;
     secColor: string;
+    type?: Network;
 }
-export declare const getSubstrateNetwork: (a: Network) => NetworkDetails | undefined;
-export declare const getSubstrateNetworks: () => Map<Network, NetworkDetails>;
+export declare type Size = "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl";
+export declare const defaultChains: Network[];
+export declare const getChain: (a: string) => NetworkDetails | undefined;
+export declare const getChains: () => Map<string, NetworkDetails>;

dist/core/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const o=(o,e)=>"#"+o.replace(/^#/,"").replace(/../g,(o=>("0"+Math.min(255,Math.max(0,parseInt(o,16)+e)).toString(16)).substr(-2)));var e;exports.Network=void 0,(e=exports.Network||(exports.Network={})).polkadot="polkadot",e.kusama="kusama",e.westend="westend",e.rococo="rococo";const t=[exports.Network.polkadot,exports.Network.kusama,exports.Network.westend,exports.Network.rococo],r=new Map;r.set(exports.Network.polkadot,{id:"polkadot",name:"Polkadot",color:"#E6007A",secColor:o("#E6007A",-30)}),r.set(exports.Network.kusama,{id:"ksmcc3",name:"Kusama",color:"#2F2F2F",secColor:o("#2F2F2F",-30)}),r.set(exports.Network.westend,{id:"westend2",name:"Westend",color:"#FF9C28",secColor:o("#FF9C28",-30)}),r.set(exports.Network.rococo,{id:"rococo_v_2",name:"Rococo 2",color:"#696bff",secColor:o("#696bff",-30)});exports.createSecColor=o,exports.defaultNetworks=t,exports.getSubstrateNetwork=o=>r.get(o),exports.getSubstrateNetworks=()=>r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const o=(o,e)=>"#"+o.replace(/^#/,"").replace(/../g,(o=>("0"+Math.min(255,Math.max(0,parseInt(o,16)+e)).toString(16)).substr(-2))),e={id:"polkadot",name:"Polkadot",color:"#E6007A"},s={id:"ksmcc3",name:"Kusama",color:"#2F2F2F"},t={id:"westend2",name:"Westend",color:"#FF9C28"},c={id:"rococo_v_2",name:"Rococo",color:"#696bff"},a=new Map;a.set("polkadot",Object.assign(Object.assign({},e),{secColor:o(e.color,-60)})),a.set("kusama",Object.assign(Object.assign({},s),{secColor:o(s.color,-60)})),a.set("westend",Object.assign(Object.assign({},t),{secColor:o(t.color,-60)})),a.set("rococo",Object.assign(Object.assign({},c),{secColor:o(c.color,-60)}));exports.createSecColor=o,exports.defaultChains=["polkadot","kusama","westend","rococo"],exports.getChain=o=>a.get(o),exports.getChains=()=>a;

dist/index.js

@@ -1,1 +0,1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/index.js"),r=require("./components/Button/Button.js"),t=require("./components/NetworkIcon/NetworkIcon.js"),o=require("./components/Card/Card.js"),s=require("./recipes/NetworkSlider/NetworkSlider.js");Object.defineProperty(exports,"Network",{enumerable:!0,get:function(){return e.Network}}),exports.createSecColor=e.createSecColor,exports.defaultNetworks=e.defaultNetworks,exports.getSubstrateNetwork=e.getSubstrateNetwork,exports.getSubstrateNetworks=e.getSubstrateNetworks,exports.Button=r.Button,exports.NetworkIcon=t.NetworkIcon,exports.Card=o.Card,exports.NetworkSlider=s.NetworkSlider;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/index.js"),r=require("./components/Button/Button.js"),t=require("./components/NetworkIcon/NetworkIcon.js"),o=require("./components/Card/Card.js"),s=require("./recipes/NetworkSlider/NetworkSlider.js");exports.createSecColor=e.createSecColor,exports.defaultChains=e.defaultChains,exports.getChain=e.getChain,exports.getChains=e.getChains,exports.Button=r.Button,exports.NetworkIcon=t.NetworkIcon,exports.Card=o.Card,exports.NetworkSlider=s.NetworkSlider;

dist/recipes/NetworkSlider/NetworkSlider.d.ts

 import React from "react";
 import { Network, NetworkDetails } from "mottled-library";
+import "mottled-library/css/core.css";
+import "mottled-library/css/Button.css";
+import "mottled-library/css/NetworkIcon.css";
 interface NetworkSliderProps {
@@ -4,0 +7,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"}),u=n.default.memo((({network:e,active:t,cb:l,type:c,leftPosition:u,primary:s})=>{let a=Object.assign({},{left:`${u}px`},t?{backgroundColor:"#ffffff",color:s,hover:{backgroundColor:"#ffffff",color:s}}:{});return n.default.createElement(o.Button,{cName:"positioning _mottled_button_ow",st:a,onClick:()=>l(e)},n.default.createElement(r.NetworkIcon,{size:"2xl",network:e,show:c}))}));exports.NetworkSlider=({networks:r,defaultNetwork:l,setNetwork:s,type:a="both"})=>{const[d,i]=e.useState(l||t.Network.polkadot),[f,k]=e.useState(150),m=r||t.defaultNetworks,w=new Map;t.defaultNetworks.forEach((e=>{let o=t.getSubstrateNetworks().get(e);(null==o?void 0:o.color)&&o.secColor&&w.set(e,[null==o?void 0:o.color,null==o?void 0:o.secColor])}));const v=e.useRef(null),[p,N]=e.useState(0),[b,g]=e.useState(!0),[h,C]=e.useState({});return e.useEffect((()=>{"icon"===a?k(50):"name"===a&&k(130)}),[a]),e.useEffect((()=>{if(v.current){const e=m.length*f,t=v.current.offsetWidth;g(e<=t||m.length*f*p>e)}}),[m.length,p,f,v]),e.useEffect((()=>{const e=t.getSubstrateNetworks().get(d);e&&(C(e),s(e))}),[d,s]),n.default.createElement("div",{"data-testid":"NetworkSlider",ref:v,style:{background:null==h?void 0:h.secColor},className:"_mottled_SliderButtons"},n.default.createElement(o.Button,{cName:"_mottled_handle",st:c(null==h?void 0:h.color,null==h?void 0:h.secColor,b,p,!0),onClick:()=>N(p-1)},"<"),n.default.createElement(o.Button,{st:c(null==h?void 0:h.color,null==h?void 0:h.secColor,b,p),cName:"_mottled_handle handle_right",onClick:()=>N(p+1)},">"),m.map((e=>n.default.createElement(u,{primary:null==h?void 0:h.color,secondary:null==h?void 0:h.secColor,leftPosition:-p*f,key:e,network:e,type:a,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 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}))))};

package.json

 {
   "name": "mottled-library",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "publishConfig": {
@@ -5,0 +5,0 @@ "access": "public"

README.md

@@ -1,15 +0,31 @@
-# Mottled-library
+# 🪴 Mottled Library 🪴
 
 A tree-shakeable library containing common reusable components for substrate based chains
 
-## Install and run dev
+## Library and decisions made
 
 Package is using workspaces for custom build/bundle the library. Core components exist under dir `packages/library`.
 For documentation and development purposes [Storybook](https://storybook.js.org/) was the tool of choice. This way contributors can catch up to speed with current components and also develop faster new ones.
-In order to install all required packages and execute in `watch` mode the library and storybook just run the command below:
 
-```
-yarn && yarn run dev
-```
+The idea behind this library started as "creating our own design components", but after some serious brainstorming ended up as: "create our own substrate specific components" - meaning reusable combination of components (that are called `recipes`), which can help dApp devs to re-use in their projects without the need of rebuilding everything from scratch.
 
+Library is separated in 3 basic "modules":
+
+- `core`: all common types/variables/functions/hooks that can be reused from components, recipes or the dev;
+- `components`: are shared, content-agnostic, and context-agnostic built for maximal reuse. These are the components you see in all the publicly-available design systems in the wild;
+- `recipes`: recipe components are specific compositions of design system components (for the most part) that are to be consistently used across a product, but aren’t agnostic enough to live in the design system. These are valuable, reusable components but may only apply to one product;
+
+### Commands:
+
+- `yarn`: Install all dependencies;
+- `yarn run dev`: builds the library and executes storybook. Once this is running all changes in existing components will depict in storybook running instance;
+- `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 watch`: builds and watches typescript files for changes;
+- `yarn run format`: formats all files based on prettier configuration;
+- `yarn run storybook`: runs storybook;
+- `yarn run build-storybook`: prepares storybook (doc) for release;
+- `yarn run generate`: is used to auto-generate all files need for a component/recipe.
+
 ## Usage
@@ -40,4 +56,2 @@
 
-In addition to components exists the `core` of the library that contains reusable variables and functions that are used from almost all components but can also be useful stand alone.
-
 ## Storybook
@@ -44,0 +58,0 @@

No alert changes

Improved metrics

Total package byte prevSize

29879

increased by8.89%

Number of package files

25

increased by4.17%

Lines of code

315

increased by36.36%

Number of lines in readme file

66

increased by26.92%

No dependency changes