@onepercentio/one-ui 0.5.2 → 0.6.0

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.
Files changed (22) hide show
  1. package/dist/components/AnimatedEntrance/AnimatedEntrance.module.scss +2 -1
  2. package/dist/components/BucketFill/BucketFill.d.ts +12 -0
  3. package/dist/components/BucketFill/BucketFill.js +66 -0
  4. package/dist/components/BucketFill/BucketFill.js.map +1 -0
  5. package/dist/components/BucketFill/BucketFill.module.scss +36 -0
  6. package/dist/components/BucketFill/BucketFill.stories.d.ts +17 -0
  7. package/dist/components/BucketFill/BucketFill.stories.js +141 -0
  8. package/dist/components/BucketFill/BucketFill.stories.js.map +1 -0
  9. package/dist/components/BucketFill/BucketFill.stories.module.scss +3 -0
  10. package/dist/components/BucketFill/index.d.ts +1 -0
  11. package/dist/components/BucketFill/index.js +9 -0
  12. package/dist/components/BucketFill/index.js.map +1 -0
  13. package/dist/components/MutableHamburgerButton/MutableHamburgerButton.d.ts +1 -1
  14. package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss +74 -6
  15. package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.d.ts +9 -2
  16. package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.js +63 -5
  17. package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.js.map +1 -1
  18. package/dist/components/Text/Text.d.ts +3 -1
  19. package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.d.ts +3 -1
  20. package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.d.ts +5 -0
  21. package/package.json +1 -1
  22. package/src/types.d.ts +8 -0
package/dist/components/AnimatedEntrance/AnimatedEntrance.module.scss CHANGED
@@ -1,3 +1,4 @@
1
+ @use 'sass:math';
1
2
  @keyframes expand {
2
3
  0% {
3
4
  transform: translateX(100%);
@@ -62,7 +63,7 @@ $duration: 1s;
62
63
  }
63
64
 
64
65
  .resetHeight {
65
- transition: max-height $duration/2 $duration * 0.2;
66
+ transition: max-height math.div($duration, 2) $duration * 0.2;
66
67
  min-height: initial;
67
68
  align-items: flex-start !important;
68
69
  > * {
package/dist/components/BucketFill/BucketFill.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ import { PropsWithChildren, ReactNode } from "react";
2
+ /**
3
+ * A weird name for a component, but it's objective is to change element colors as the user progresses through a series of steps
4
+ *
5
+ * IT IS NOT READY (AND PROBABLY NEVER WILL) FOR FRAGMENT NODES
6
+ **/
7
+ export default function BucketFill({ children, background, fillTo, }: {
8
+ children: ReactNode[];
9
+ fillTo: number;
10
+ background: string;
11
+ }): JSX.Element;
12
+ export declare function IgnoreFill({ children }: PropsWithChildren<{}>): JSX.Element;
package/dist/components/BucketFill/BucketFill.js ADDED
@@ -0,0 +1,66 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.IgnoreFill = void 0;
30
+ const react_1 = __importStar(require("react"));
31
+ const BucketFill_module_scss_1 = __importDefault(require("./BucketFill.module.scss"));
32
+ /**
33
+ * A weird name for a component, but it's objective is to change element colors as the user progresses through a series of steps
34
+ *
35
+ * IT IS NOT READY (AND PROBABLY NEVER WILL) FOR FRAGMENT NODES
36
+ **/
37
+ function BucketFill({ children, background, fillTo, }) {
38
+ const rootRef = (0, react_1.useRef)(null);
39
+ function resize() {
40
+ const childs = rootRef.current.children;
41
+ const s = rootRef.current.style;
42
+ const elementAtPosition = fillTo === 0 ? null : childs.item(fillTo - 1);
43
+ const elementOffsetAndHeight = elementAtPosition === null
44
+ ? 0
45
+ : elementAtPosition.offsetTop + elementAtPosition.clientHeight;
46
+ const elementRootHeight = rootRef.current.clientHeight;
47
+ const percentToFill = Math.min((elementOffsetAndHeight * 100) / elementRootHeight, 100);
48
+ s.setProperty("--fill-height", `${percentToFill}%`);
49
+ s.setProperty("--empty-height", `${100 - percentToFill}%`);
50
+ s.setProperty("--bg-offset", `${percentToFill === 100 ? -1000 : 100 / ((100 - percentToFill) / 100)}%`);
51
+ }
52
+ (0, react_1.useEffect)(() => {
53
+ resize();
54
+ window.addEventListener("resize", resize);
55
+ return () => window.removeEventListener("resize", resize);
56
+ }, [fillTo]);
57
+ return (react_1.default.createElement("div", { ref: rootRef, style: {
58
+ "--bg": background,
59
+ }, className: BucketFill_module_scss_1.default.root }, children));
60
+ }
61
+ exports.default = BucketFill;
62
+ function IgnoreFill({ children }) {
63
+ return react_1.default.createElement("div", { className: BucketFill_module_scss_1.default.ignoreFill }, children);
64
+ }
65
+ exports.IgnoreFill = IgnoreFill;
66
+ //# sourceMappingURL=BucketFill.js.map
package/dist/components/BucketFill/BucketFill.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BucketFill.js","sourceRoot":"","sources":["../../../src/components/BucketFill/BucketFill.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA+E;AAC/E,sFAA8C;AAE9C;;;;IAII;AACJ,SAAwB,UAAU,CAAC,EACjC,QAAQ,EACR,UAAU,EACV,MAAM,GAKP;IACC,MAAM,OAAO,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAC7C,SAAS,MAAM;QACb,MAAM,MAAM,GAAG,OAAO,CAAC,OAAQ,CAAC,QAAQ,CAAC;QACzC,MAAM,CAAC,GAAG,OAAO,CAAC,OAAQ,CAAC,KAAK,CAAC;QACjC,MAAM,iBAAiB,GACrB,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAE,MAAM,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAiB,CAAC;QACjE,MAAM,sBAAsB,GAC1B,iBAAiB,KAAK,IAAI;YACxB,CAAC,CAAC,CAAC;YACH,CAAC,CAAC,iBAAiB,CAAC,SAAS,GAAG,iBAAiB,CAAC,YAAY,CAAC;QACnE,MAAM,iBAAiB,GAAG,OAAO,CAAC,OAAQ,CAAC,YAAY,CAAC;QACxD,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAC5B,CAAC,sBAAsB,GAAG,GAAG,CAAC,GAAG,iBAAiB,EAClD,GAAG,CACJ,CAAC;QAEF,CAAC,CAAC,WAAW,CAAC,eAAe,EAAE,GAAG,aAAa,GAAG,CAAC,CAAC;QACpD,CAAC,CAAC,WAAW,CAAC,gBAAgB,EAAE,GAAG,GAAG,GAAG,aAAa,GAAG,CAAC,CAAC;QAC3D,CAAC,CAAC,WAAW,CACX,aAAa,EACb,GAAG,aAAa,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,aAAa,CAAC,GAAG,GAAG,CAAC,GAAG,CAC1E,CAAC;IACJ,CAAC;IACD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,EAAE,CAAC;QACT,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;QAE1C,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;IAC5D,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,OAAO,CACL,uCACE,GAAG,EAAE,OAAO,EACZ,KAAK,EACH;YACE,MAAM,EAAE,UAAU;SACZ,EAEV,SAAS,EAAE,gCAAM,CAAC,IAAI,IAErB,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AApDD,6BAoDC;AAED,SAAgB,UAAU,CAAC,EAAE,QAAQ,EAAyB;IAC5D,OAAO,uCAAK,SAAS,EAAE,gCAAM,CAAC,UAAU,IAAG,QAAQ,CAAO,CAAC;AAC7D,CAAC;AAFD,gCAEC"}
package/dist/components/BucketFill/BucketFill.module.scss ADDED
@@ -0,0 +1,36 @@
1
+ @import "../../assets/styles/variables.scss";
2
+
3
+ .root {
4
+ position: relative;
5
+ z-index: 1;
6
+ > :not(div) {
7
+ mix-blend-mode: color;
8
+ }
9
+ > div > * {
10
+ mix-blend-mode: color;
11
+ }
12
+ &::before,
13
+ &::after {
14
+ background: var(--bg);
15
+ width: 100%;
16
+ position: absolute;
17
+ content: " ";
18
+ z-index: -1;
19
+ transition: height $fast, background-size $fast;
20
+ }
21
+ &::before {
22
+ opacity: 0;
23
+ top: 0;
24
+ height: var(--fill-height);
25
+ }
26
+ &::after {
27
+ opacity: 0.6;
28
+ bottom: 0;
29
+ height: var(--empty-height);
30
+ background-size: 100% var(--bg-offset);
31
+ background-position: bottom;
32
+ }
33
+ .ignoreFill {
34
+ mix-blend-mode: multiply;
35
+ }
36
+ }
package/dist/components/BucketFill/BucketFill.stories.d.ts ADDED
@@ -0,0 +1,17 @@
1
+ import React from "react";
2
+ import BucketFill from "./BucketFill";
3
+ import "./BucketFill.stories.module.scss";
4
+ declare const _default: {
5
+ component: typeof BucketFill;
6
+ title: string;
7
+ };
8
+ export default _default;
9
+ export declare const AutoFill: {
10
+ (args: any): JSX.Element;
11
+ args: Partial<{
12
+ children: React.ReactNode[];
13
+ fillTo: number;
14
+ background: string;
15
+ }>;
16
+ };
17
+ export declare const Sandbox: (args: any) => JSX.Element;
package/dist/components/BucketFill/BucketFill.stories.js ADDED
@@ -0,0 +1,141 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
25
+ var __importDefault = (this && this.__importDefault) || function (mod) {
26
+ return (mod && mod.__esModule) ? mod : { "default": mod };
27
+ };
28
+ Object.defineProperty(exports, "__esModule", { value: true });
29
+ exports.Sandbox = exports.AutoFill = void 0;
30
+ const react_1 = __importStar(require("react"));
31
+ const Button_1 = __importDefault(require("../Button"));
32
+ const MutableHamburgerButton_1 = __importDefault(require("../MutableHamburgerButton"));
33
+ const BucketFill_1 = __importStar(require("./BucketFill"));
34
+ require("./BucketFill.stories.module.scss");
35
+ exports.default = {
36
+ component: BucketFill_1.default,
37
+ title: "Bucket Fill",
38
+ };
39
+ const AutoFill = (args) => {
40
+ const [fillTo, ss] = (0, react_1.useState)(0);
41
+ (0, react_1.useEffect)(() => {
42
+ const i = setInterval(() => {
43
+ ss((a) => (a === 4 ? 0 : a + 1));
44
+ }, 1000);
45
+ return () => clearInterval(i);
46
+ }, []);
47
+ return (react_1.default.createElement(react_1.default.Fragment, null,
48
+ react_1.default.createElement("h1", null,
49
+ "Filling to ",
50
+ fillTo),
51
+ react_1.default.createElement("div", { style: { display: "flex" } },
52
+ react_1.default.createElement("div", null,
53
+ react_1.default.createElement(BucketFill_1.default, Object.assign({}, args, { fillTo: fillTo, background: "white" }),
54
+ react_1.default.createElement("h1", null, "First step"),
55
+ react_1.default.createElement("div", null,
56
+ react_1.default.createElement("p", null, "Second"),
57
+ react_1.default.createElement("p", null, "step")),
58
+ react_1.default.createElement(BucketFill_1.IgnoreFill, null,
59
+ react_1.default.createElement(Button_1.default, { variant: "filled" }, "Third step")),
60
+ react_1.default.createElement("div", null,
61
+ react_1.default.createElement(MutableHamburgerButton_1.default, { state: "loading", size: 180 }),
62
+ react_1.default.createElement(BucketFill_1.IgnoreFill, null,
63
+ react_1.default.createElement(Button_1.default, null, "BADADADADAD")),
64
+ react_1.default.createElement("p", null, "Fourth step")))),
65
+ react_1.default.createElement("div", { style: {
66
+ background: "#000",
67
+ color: "white",
68
+ "--digital-blue": "white",
69
+ } },
70
+ react_1.default.createElement("div", null,
71
+ react_1.default.createElement(BucketFill_1.default, Object.assign({}, args, { fillTo: fillTo, background: "#000" }),
72
+ react_1.default.createElement("h1", null, "First step"),
73
+ react_1.default.createElement("div", null,
74
+ react_1.default.createElement("p", null, "Second"),
75
+ react_1.default.createElement("p", null, "step")),
76
+ react_1.default.createElement("p", null, "Third step"),
77
+ react_1.default.createElement("div", { style: {} },
78
+ react_1.default.createElement(MutableHamburgerButton_1.default, { state: "loading", size: 180 }),
79
+ "Fourth step")))),
80
+ react_1.default.createElement("div", { style: {
81
+ background: "yellow",
82
+ color: "black",
83
+ "--digital-blue": "black",
84
+ } },
85
+ react_1.default.createElement("div", null,
86
+ react_1.default.createElement(BucketFill_1.default, Object.assign({}, args, { fillTo: fillTo, background: "yellow" }),
87
+ react_1.default.createElement("h1", null, "First step"),
88
+ react_1.default.createElement("div", null,
89
+ react_1.default.createElement("p", null, "Second"),
90
+ react_1.default.createElement("p", null, "step")),
91
+ react_1.default.createElement("p", null, "Third step"),
92
+ react_1.default.createElement("div", { style: {} },
93
+ react_1.default.createElement(MutableHamburgerButton_1.default, { state: "loading", size: 180 }),
94
+ "Fourth step")))),
95
+ react_1.default.createElement("div", { style: {
96
+ background: "linear-gradient(to bottom, red, green, blue)",
97
+ color: "black",
98
+ "--digital-blue": "black",
99
+ } },
100
+ react_1.default.createElement(BucketFill_1.default, Object.assign({}, args, { fillTo: fillTo, background: "linear-gradient(to bottom, red, green, blue)" }),
101
+ react_1.default.createElement("h1", null, "First step"),
102
+ react_1.default.createElement("div", null,
103
+ react_1.default.createElement("p", null, "Second"),
104
+ react_1.default.createElement("p", null, "step")),
105
+ react_1.default.createElement("p", null, "Third step"),
106
+ react_1.default.createElement("div", { style: {} },
107
+ react_1.default.createElement(MutableHamburgerButton_1.default, { state: "loading", size: 180 }),
108
+ "Fourth step"))),
109
+ react_1.default.createElement("div", { style: {
110
+ background: "linear-gradient(to right, red, green, blue)",
111
+ color: "black",
112
+ "--digital-blue": "black",
113
+ } },
114
+ react_1.default.createElement(BucketFill_1.default, Object.assign({}, args, { fillTo: fillTo, background: "linear-gradient(to right, red, green, blue)" }),
115
+ react_1.default.createElement("h1", null, "First step"),
116
+ react_1.default.createElement("div", null,
117
+ react_1.default.createElement("p", null, "Second"),
118
+ react_1.default.createElement("p", null, "step")),
119
+ react_1.default.createElement("p", null, "Third step"),
120
+ react_1.default.createElement("div", { style: {} },
121
+ react_1.default.createElement(MutableHamburgerButton_1.default, { state: "loading", size: 180 }),
122
+ "Fourth step"))))));
123
+ };
124
+ exports.AutoFill = AutoFill;
125
+ exports.AutoFill.args = {};
126
+ const Sandbox = (args) => {
127
+ return (react_1.default.createElement(react_1.default.Fragment, null,
128
+ react_1.default.createElement("div", null,
129
+ react_1.default.createElement(BucketFill_1.default, Object.assign({}, args),
130
+ react_1.default.createElement("h1", null, "First step"),
131
+ react_1.default.createElement("div", null,
132
+ react_1.default.createElement("p", null, "Second"),
133
+ react_1.default.createElement("p", null, "step")),
134
+ react_1.default.createElement("p", null, "Third step"),
135
+ react_1.default.createElement("div", { style: {} },
136
+ react_1.default.createElement(Button_1.default, null, "sajdnasnd"),
137
+ react_1.default.createElement(MutableHamburgerButton_1.default, { state: "loading", size: 180 }),
138
+ react_1.default.createElement("p", null, "Fourth step"))))));
139
+ };
140
+ exports.Sandbox = Sandbox;
141
+ //# sourceMappingURL=BucketFill.stories.js.map
package/dist/components/BucketFill/BucketFill.stories.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BucketFill.stories.js","sourceRoot":"","sources":["../../../src/components/BucketFill/BucketFill.stories.tsx"],"names":[],"mappings":"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"}
package/dist/components/BucketFill/BucketFill.stories.module.scss ADDED
@@ -0,0 +1,3 @@
1
+ * {
2
+ margin: 0px;
3
+ }
package/dist/components/BucketFill/index.d.ts ADDED
@@ -0,0 +1 @@
1
+ export { default } from './BucketFill';
package/dist/components/BucketFill/index.js ADDED
@@ -0,0 +1,9 @@
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ exports.default = void 0;
7
+ var BucketFill_1 = require("./BucketFill");
8
+ Object.defineProperty(exports, "default", { enumerable: true, get: function () { return __importDefault(BucketFill_1).default; } });
9
+ //# sourceMappingURL=index.js.map
package/dist/components/BucketFill/index.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BucketFill/index.tsx"],"names":[],"mappings":";;;;;;AAAA,2CAAuC;AAA9B,sHAAA,OAAO,OAAA"}
package/dist/components/MutableHamburgerButton/MutableHamburgerButton.d.ts CHANGED
@@ -3,6 +3,6 @@ import React from "react";
3
3
  * A hamburger button that mutates according to it's state
4
4
  **/
5
5
  export default function MutableHamburgerButton({ state, size, className, ...props }: {
6
- state?: "default" | "closed" | "arrow-up" | "arrow-down" | "search";
6
+ state?: "default" | "closed" | "arrow-up" | "arrow-down" | "search" | "loading" | "checkmark";
7
7
  size: number;
8
8
  } & React.HTMLProps<HTMLDivElement>): JSX.Element;
package/dist/components/MutableHamburgerButton/MutableHamburgerButton.module.scss CHANGED
@@ -1,6 +1,7 @@
1
+ @use 'sass:math';
1
2
  @import "../../assets/styles/index.scss";
2
3
 
3
- $slice: 1/7;
4
+ $slice: math.div(1, 7);
4
5
 
5
6
  .container {
6
7
  box-sizing: content-box;
@@ -14,18 +15,33 @@ $slice: 1/7;
14
15
  background-size: 0 0;
15
16
  background-repeat: no-repeat;
16
17
  transition: transform 250ms;
18
+ transition-timing-function: ease-in-out;
17
19
  &:active {
18
20
  transform: scale(0.9);
19
21
  }
20
22
  > * {
23
+ flex-shrink: 0;
21
24
  box-sizing: content-box;
22
25
  width: 0.8em;
23
26
  height: #{$slice}em;
24
- border-radius: #{$slice / 2}em;
25
- transition: transform $veryFast, width $veryFast;
27
+ border-radius: #{math.div($slice, 2)}em;
28
+ transition: transform $veryFast, width $veryFast, height $veryFast,
29
+ border-width $veryFast, background-color $veryFast,
30
+ border-radius $veryFast;
26
31
  background: var(--mutable-hamburger-background, $digitalBlue);
27
32
  background-size: 1em 1em;
28
33
  background-repeat: no-repeat;
34
+ border: 0em solid #0000;
35
+ &:nth-child(1) {
36
+ border-top-color: var(--mutable-hamburger-background, $digitalBlue);
37
+ }
38
+ &:nth-child(2) {
39
+ border-right-color: var(--mutable-hamburger-background, $digitalBlue);
40
+ }
41
+ &:nth-child(3) {
42
+ border-bottom-color: var(--mutable-hamburger-background, $digitalBlue);
43
+ border-left-color: var(--mutable-hamburger-background, $digitalBlue);
44
+ }
29
45
  }
30
46
  & > * {
31
47
  background-position-x: -0.1em;
@@ -89,20 +105,72 @@ $slice: 1/7;
89
105
  height: #{$slice * $rate}em;
90
106
  border-radius: #{$slice * $rate * 2}em;
91
107
  background-color: transparent;
92
- border: #{$slice / 1.35}em solid
108
+ border: #{math.div($slice, 1.35)}em solid
93
109
  var(--mutable-hamburger-background, $digitalBlue);
94
110
  transform: translateX(-0.15em);
95
111
  }
96
112
  > :nth-child(2) {
97
113
  transform: translateX(0.12em) translateY(-0.05em) rotateZ(45deg);
98
- height: #{$slice / 1.35}em;
114
+ height: #{math.div($slice, 1.35)}em;
99
115
  width: 0.55em;
100
116
  }
101
117
  > :nth-child(3) {
102
118
  transform: translateX(0.12em) translateY(-#{($slice * 1.3) + 0.05}em)
103
119
  rotateZ(45deg);
104
- height: #{$slice / 1.35}em;
120
+ height: #{math.div($slice, 1.35)}em;
105
121
  width: 0.55em;
106
122
  }
107
123
  }
124
+
125
+ &.checkmark {
126
+ > :nth-child(1) {
127
+ transform: translateY(#{$slice * 2}em) translateX(-0.178em)
128
+ translateY(0.13em) rotate(45deg);
129
+ height: #{$slice}em;
130
+ width: 0.45em;
131
+ }
132
+ > :nth-child(2) {
133
+ height: #{$slice}em;
134
+ width: 0.7em;
135
+ transform: translateX(0.1em) rotate(-55deg);
136
+ }
137
+ > :nth-child(3) {
138
+ transform: translateY(-#{$slice * 2}em) translateX(0.1em) rotate(-55deg);
139
+ height: #{$slice}em;
140
+ width: 0.7em;
141
+ }
142
+ }
143
+
144
+ &.loading {
145
+ $slice: math.div(1, 6);
146
+ @keyframes rotate {
147
+ 0% {
148
+ transform: rotate(0deg);
149
+ }
150
+ 100% {
151
+ transform: rotate(360deg);
152
+ }
153
+ }
154
+ animation-name: rotate;
155
+ animation-duration: 1s;
156
+ animation-delay: $veryFast;
157
+ animation-iteration-count: infinite;
158
+ animation-timing-function: linear;
159
+ > * {
160
+ background-color: #0000;
161
+ width: #{$slice * 2.5}em;
162
+ height: #{$slice * 2.5}em;
163
+ border-radius: #{$slice * 2.5}em;
164
+ border-width: #{$slice}em;
165
+ }
166
+ > :nth-child(1) {
167
+ transform: translateY(#{$slice * 4.5}em);
168
+ }
169
+ > :nth-child(2) {
170
+ transform: rotateZ(-5deg);
171
+ }
172
+ > :nth-child(3) {
173
+ transform: translateY(-#{$slice * 4.5}em) rotateZ(-95deg);
174
+ }
175
+ }
108
176
  }
package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ import React from "react";
2
2
  import MutableHamburgerButton from "./MutableHamburgerButton";
3
3
  declare const _default: {
4
4
  component: typeof MutableHamburgerButton;
@@ -8,7 +8,14 @@ export default _default;
8
8
  export declare const InitialImplementation: {
9
9
  (args: any): JSX.Element;
10
10
  args: Partial<{
11
- state?: "search" | "default" | "closed" | "arrow-up" | "arrow-down" | undefined;
11
+ state?: "search" | "default" | "closed" | "arrow-up" | "arrow-down" | "loading" | "checkmark" | undefined;
12
+ size: number;
13
+ } & React.HTMLProps<HTMLDivElement>>;
14
+ };
15
+ export declare const TransitionToLoader: {
16
+ (args: any): JSX.Element;
17
+ args: Partial<{
18
+ state?: "search" | "default" | "closed" | "arrow-up" | "arrow-down" | "loading" | "checkmark" | undefined;
12
19
  size: number;
13
20
  } & React.HTMLProps<HTMLDivElement>>;
14
21
  };
package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.js CHANGED
@@ -1,16 +1,74 @@
1
1
  "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || function (mod) {
19
+ if (mod && mod.__esModule) return mod;
20
+ var result = {};
21
+ if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
+ __setModuleDefault(result, mod);
23
+ return result;
24
+ };
2
25
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
26
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
27
  };
5
28
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.InitialImplementation = void 0;
7
- const react_1 = __importDefault(require("react"));
29
+ exports.TransitionToLoader = exports.InitialImplementation = void 0;
30
+ const react_1 = __importStar(require("react"));
8
31
  const MutableHamburgerButton_1 = __importDefault(require("./MutableHamburgerButton"));
9
32
  exports.default = {
10
33
  component: MutableHamburgerButton_1.default,
11
- title: "Mutable Hamburger Button"
34
+ title: "Mutable Hamburger Button",
12
35
  };
13
- const InitialImplementation = (args) => react_1.default.createElement(MutableHamburgerButton_1.default, Object.assign({}, args));
36
+ const InitialImplementation = (args) => (react_1.default.createElement("div", { style: { backgroundColor: "#00f5", display: "inline-block" } },
37
+ react_1.default.createElement(MutableHamburgerButton_1.default, Object.assign({}, args))));
14
38
  exports.InitialImplementation = InitialImplementation;
15
- exports.InitialImplementation.args = {};
39
+ exports.InitialImplementation.args = {
40
+ size: window.screen.availHeight * 0.4,
41
+ };
42
+ const TransitionToLoader = (args) => {
43
+ const [s, ss] = (0, react_1.useState)("closed");
44
+ function randomState() {
45
+ const r = Math.random();
46
+ if (r < 0.2) {
47
+ return "default";
48
+ }
49
+ else if (r < 0.4) {
50
+ return "arrow-down";
51
+ }
52
+ else if (r < 0.6) {
53
+ return "arrow-up";
54
+ }
55
+ else if (r < 0.8) {
56
+ return "closed";
57
+ }
58
+ else {
59
+ return "search";
60
+ }
61
+ }
62
+ (0, react_1.useEffect)(() => {
63
+ const o = setInterval(() => {
64
+ ss((p) => (p !== "loading" ? "loading" : randomState()));
65
+ }, 500);
66
+ return () => clearInterval(o);
67
+ });
68
+ return react_1.default.createElement(MutableHamburgerButton_1.default, Object.assign({}, args, { state: s }));
69
+ };
70
+ exports.TransitionToLoader = TransitionToLoader;
71
+ exports.TransitionToLoader.args = {
72
+ size: window.screen.availHeight * 0.4,
73
+ };
16
74
  //# sourceMappingURL=MutableHamburgerButton.stories.js.map
package/dist/components/MutableHamburgerButton/MutableHamburgerButton.stories.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"MutableHamburgerButton.stories.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/MutableHamburgerButton.stories.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,sFAA8D;AAE9D,kBAAe;IACX,SAAS,EAAE,gCAAsB;IACjC,KAAK,EAAE,0BAA0B;CACpC,CAAA;AAEM,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,8BAAC,gCAAsB,oBAAK,IAAI,EAAG,CAAC;AAA3E,QAAA,qBAAqB,yBAAsD;AACxF,6BAAqB,CAAC,IAAI,GAAG,EAAkE,CAAA"}
1
+ {"version":3,"file":"MutableHamburgerButton.stories.js","sourceRoot":"","sources":["../../../src/components/MutableHamburgerButton/MutableHamburgerButton.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAAmE;AACnE,sFAA8D;AAE9D,kBAAe;IACb,SAAS,EAAE,gCAAsB;IACjC,KAAK,EAAE,0BAA0B;CAClC,CAAC;AAEK,MAAM,qBAAqB,GAAG,CAAC,IAAS,EAAE,EAAE,CAAC,CAClD,uCAAK,KAAK,EAAE,EAAC,eAAe,EAAE,OAAO,EAAE,OAAO,EAAE,cAAc,EAAC;IAC7D,8BAAC,gCAAsB,oBAAK,IAAI,EAAI,CAChC,CACP,CAAC;AAJW,QAAA,qBAAqB,yBAIhC;AACF,6BAAqB,CAAC,IAAI,GAAG;IAC3B,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,GAAG,GAAG;CAC0B,CAAC;AAE3D,MAAM,kBAAkB,GAAG,CAAC,IAAS,EAAE,EAAE;IAC9C,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC,GACX,IAAA,gBAAQ,EAAyD,QAAQ,CAAC,CAAC;IAE3E,SAAS,WAAW;QAChB,MAAM,CAAC,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;QACxB,IAAI,CAAC,GAAG,GAAG,EAAE;YACT,OAAO,SAAS,CAAA;SACnB;aAAM,IAAI,CAAC,GAAG,GAAG,EAAE;YAChB,OAAO,YAAY,CAAA;SACtB;aAAM,IAAI,CAAC,GAAG,GAAG,EAAE;YAChB,OAAO,UAAU,CAAA;SACpB;aAAM,IAAI,CAAC,GAAG,GAAG,EAAE;YAChB,OAAO,QAAQ,CAAC;SACnB;aAAM;YACH,OAAO,QAAQ,CAAA;SAClB;IACL,CAAC;IAEH,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,CAAC,GAAG,WAAW,CAAC,GAAG,EAAE;YACzB,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,CAAC,CAAC;QAC3D,CAAC,EAAE,GAAG,CAAC,CAAC;QAER,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;IACH,OAAO,8BAAC,gCAAsB,oBAAK,IAAI,IAAE,KAAK,EAAE,CAAC,IAAI,CAAC;AACxD,CAAC,CAAC;AA3BW,QAAA,kBAAkB,sBA2B7B;AACF,0BAAkB,CAAC,IAAI,GAAG;IACxB,IAAI,EAAE,MAAM,CAAC,MAAM,CAAC,WAAW,GAAG,GAAG;CAC0B,CAAC"}
package/dist/components/Text/Text.d.ts CHANGED
@@ -9,5 +9,7 @@ export declare function _Text({ type, children, className, ...otherProps }: Reac
9
9
  declare const _default: React.ForwardRefExoticComponent<{
10
10
  className?: string | undefined;
11
11
  type: "link" | "caption" | "title" | "content" | "description" | "error" | "highlightTitle" | "highlight" | "subtitle" | "boldTitle" | "boldTitleBig";
12
- } & React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<unknown>>;
12
+ } & React.HTMLAttributes<HTMLParagraphElement> & {
13
+ children?: React.ReactNode;
14
+ } & React.RefAttributes<unknown>>;
13
15
  export default _default;
package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.d.ts CHANGED
@@ -37,7 +37,9 @@ declare type Props = {
37
37
  */
38
38
  Content: (props: WalletConnectionProps) => ReactElement;
39
39
  };
40
- declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<{
40
+ declare const _default: React.ForwardRefExoticComponent<Props & {
41
+ children?: React.ReactNode;
42
+ } & React.RefAttributes<{
41
43
  connect: () => Promise<void>;
42
44
  disconnect: () => void;
43
45
  }>>;
package/dist/components/WalletConnectionWrapper/WalletConnectionWrapper.stories.d.ts CHANGED
@@ -15,6 +15,8 @@ declare const _default: {
15
15
  changeChainId: () => void;
16
16
  }> | undefined;
17
17
  Content: (props: import("./WalletConnectionWrapper").WalletConnectionProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
18
+ } & {
19
+ children?: React.ReactNode;
18
20
  } & React.RefAttributes<{
19
21
  connect: () => Promise<void>;
20
22
  disconnect: () => void;
@@ -36,6 +38,8 @@ export declare const BasicUsage: {
36
38
  changeChainId: () => void;
37
39
  }> | undefined;
38
40
  Content: (props: import("./WalletConnectionWrapper").WalletConnectionProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
41
+ } & {
42
+ children?: React.ReactNode;
39
43
  } & React.RefAttributes<{
40
44
  connect: () => Promise<void>;
41
45
  disconnect: () => void;
@@ -56,6 +60,7 @@ export declare const UsageWithActionProps: {
56
60
  changeChainId: () => void;
57
61
  }> | undefined;
58
62
  Content: (props: import("./WalletConnectionWrapper").WalletConnectionProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
63
+ children?: React.ReactNode;
59
64
  ref?: React.Ref<{
60
65
  connect: () => Promise<void>;
61
66
  disconnect: () => void;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onepercentio/one-ui",
3
- "version": "0.5.2",
3
+ "version": "0.6.0",
4
4
  "description": "A set of reusable components created through the development of Onepercent projects",
5
5
  "files": [
6
6
  "dist",
package/src/types.d.ts CHANGED
@@ -1,3 +1,11 @@
1
+ type PrependNextNum<A extends Array<unknown>> = A['length'] extends infer T ? ((t: T, ...a: A) => void) extends ((...x: infer X) => void) ? X : never : never;
2
+
3
+ type EnumerateInternal<A extends Array<unknown>, N extends number> = { 0: A, 1: EnumerateInternal<PrependNextNum<A>, N> }[N extends A['length'] ? 0 : 1];
4
+
5
+ export type Enumerate<N extends number> = EnumerateInternal<[], N> extends (infer E)[] ? E : never;
6
+
7
+ export type Range<FROM extends number, TO extends number> = Exclude<Enumerate<TO>, Enumerate<FROM>>;
8
+
1
9
  export type CommonErrorCodes = "UNEXPECTED_ERROR";
2
10
 
3
11
  type Decompose<O extends object> = O;