@uxf/ui 1.0.0-beta.55 → 1.0.0-beta.56

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 (16) hide show
  1. package/_private-utils/get-provider-config.d.ts +2 -0
  2. package/_private-utils/get-provider-config.js +7 -0
  3. package/context/context.d.ts +12 -0
  4. package/context/context.js +5 -0
  5. package/context/index.d.ts +3 -0
  6. package/context/index.js +19 -0
  7. package/context/provider.d.ts +8 -0
  8. package/context/provider.js +10 -0
  9. package/context/use-component-context.d.ts +3 -0
  10. package/context/use-component-context.js +13 -0
  11. package/icon/icon.d.ts +1 -2
  12. package/icon/icon.js +4 -2
  13. package/icon/icon.stories.js +58 -55
  14. package/icon/types.d.ts +2 -0
  15. package/icon/types.js +2 -0
  16. package/package.json +1 -1
package/_private-utils/get-provider-config.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { UiContextType } from "../context";
2
+ export declare const getProviderConfig: () => UiContextType;
package/_private-utils/get-provider-config.js ADDED
@@ -0,0 +1,7 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.getProviderConfig = void 0;
4
+ const getProviderConfig = () => ({
5
+ icon: { spriteFilePath: "/icons-generated/_icon-sprite.svg", iconsConfig: { test: { w: 29.65, h: 40 } } },
6
+ });
7
+ exports.getProviderConfig = getProviderConfig;
package/context/context.d.ts ADDED
@@ -0,0 +1,12 @@
1
+ /// <reference types="react" />
2
+ import { IconName } from "../icon/types";
3
+ export declare type UiContextType = {
4
+ icon: {
5
+ spriteFilePath: string;
6
+ iconsConfig: Record<IconName, {
7
+ w: number;
8
+ h: number;
9
+ }>;
10
+ };
11
+ };
12
+ export declare const UiContext: import("react").Context<UiContextType | undefined>;
package/context/context.js ADDED
@@ -0,0 +1,5 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.UiContext = void 0;
4
+ const react_1 = require("react");
5
+ exports.UiContext = (0, react_1.createContext)(undefined);
package/context/index.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ export * from "@uxf/ui/context/context";
2
+ export * from "@uxf/ui/context/provider";
3
+ export * from "@uxf/ui/context/use-component-context";
package/context/index.js ADDED
@@ -0,0 +1,19 @@
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 __exportStar = (this && this.__exportStar) || function(m, exports) {
14
+ for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
15
+ };
16
+ Object.defineProperty(exports, "__esModule", { value: true });
17
+ __exportStar(require("@uxf/ui/context/context"), exports);
18
+ __exportStar(require("@uxf/ui/context/provider"), exports);
19
+ __exportStar(require("@uxf/ui/context/use-component-context"), exports);
package/context/provider.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import { FC, ReactNode } from "react";
2
+ import { UiContextType } from "./context";
3
+ declare type UiContextProviderProps = {
4
+ value: UiContextType;
5
+ children: ReactNode;
6
+ };
7
+ export declare const UiContextProvider: FC<UiContextProviderProps>;
8
+ export {};
package/context/provider.js ADDED
@@ -0,0 +1,10 @@
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.UiContextProvider = void 0;
7
+ const react_1 = __importDefault(require("react"));
8
+ const context_1 = require("./context");
9
+ const UiContextProvider = (props) => (react_1.default.createElement(context_1.UiContext.Provider, { value: props.value }, props.children));
10
+ exports.UiContextProvider = UiContextProvider;
package/context/use-component-context.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { UiContextType } from "./context";
2
+ export declare type UiContextComponent = keyof UiContextType;
3
+ export declare const useComponentContext: <T extends "icon">(componentName: T) => UiContextType[T];
package/context/use-component-context.js ADDED
@@ -0,0 +1,13 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.useComponentContext = void 0;
4
+ const react_1 = require("react");
5
+ const context_1 = require("./context");
6
+ const useComponentContext = (componentName) => {
7
+ const context = (0, react_1.useContext)(context_1.UiContext);
8
+ if (typeof context === "undefined") {
9
+ throw new Error(`If you want to use the "${componentName}" UI component, you have to wrap your code in the "UiContextProvider"`);
10
+ }
11
+ return context[componentName];
12
+ };
13
+ exports.useComponentContext = useComponentContext;
package/icon/icon.d.ts CHANGED
@@ -1,6 +1,5 @@
1
- import { IconsSet } from "@uxf/ui/icon/theme";
2
1
  import React, { CSSProperties } from "react";
3
- export declare type IconName = keyof IconsSet;
2
+ import { IconName } from "./types";
4
3
  declare type NameOrComponentType = {
5
4
  name: IconName;
6
5
  Component?: never;
package/icon/icon.js CHANGED
@@ -4,11 +4,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
6
  const react_1 = __importDefault(require("react"));
7
+ const context_1 = require("../context");
7
8
  const cx_1 = require("../utils/cx");
8
9
  const forward_ref_1 = require("../utils/forward-ref");
9
10
  const rem_1 = require("../utils/rem");
10
11
  function Icon(props, ref) {
11
12
  var _a, _b;
13
+ const componentContext = (0, context_1.useComponentContext)("icon");
12
14
  const CustomComponent = props.Component;
13
15
  const className = (0, cx_1.cx)("uxf-icon", props.className);
14
16
  const preserveAspectRatio = `xMidYMid ${(_a = props.mode) !== null && _a !== void 0 ? _a : "meet"}`;
@@ -19,7 +21,7 @@ function Icon(props, ref) {
19
21
  ...((_b = props.style) !== null && _b !== void 0 ? _b : {}),
20
22
  }
21
23
  : props.style;
22
- return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style })) : (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style },
23
- react_1.default.createElement("use", { xlinkHref: `/icons-generated/_icon-sprite.svg#icon-sprite--${props.name}` })));
24
+ return CustomComponent ? (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style })) : (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${componentContext.iconsConfig[props.name].w} ${componentContext.iconsConfig[props.name].h}` },
25
+ react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
24
26
  }
25
27
  exports.default = (0, forward_ref_1.forwardRef)("Icon", Icon);
package/icon/icon.stories.js CHANGED
@@ -6,65 +6,68 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.Default = void 0;
7
7
  const index_1 = require("./index");
8
8
  const react_1 = __importDefault(require("react"));
9
+ const get_provider_config_1 = require("../_private-utils/get-provider-config");
10
+ const context_1 = require("../context");
9
11
  exports.default = {
10
12
  title: "UI/Icon",
11
13
  component: index_1.Icon,
12
14
  };
13
15
  function Default() {
14
- return (react_1.default.createElement("div", { className: "space-y-2" },
15
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
16
- "Type: ",
17
- react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
18
- ", Color:",
19
- " ",
20
- react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
21
- ", Size: ",
22
- react_1.default.createElement("span", { className: "font-semibold" }, "16")),
23
- react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 16, className: "text-red-600" }),
24
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
25
- "Type: ",
26
- react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
27
- ", Color:",
28
- " ",
29
- react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
30
- ", Size: ",
31
- react_1.default.createElement("span", { className: "font-semibold" }, "24")),
32
- react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 24, className: "text-blue-600" }),
33
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
34
- "Type: ",
35
- react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
36
- ", Color:",
37
- " ",
38
- react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
39
- ", Size: ",
40
- react_1.default.createElement("span", { className: "font-semibold" }, "48")),
41
- react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 48, className: "text-green-600" }),
42
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
43
- "Type: ",
44
- react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
45
- ", Color:",
46
- " ",
47
- react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
48
- ", Size: ",
49
- react_1.default.createElement("span", { className: "font-semibold" }, "16")),
50
- react_1.default.createElement(index_1.Icon, { name: "test", size: 16, className: "text-red-600" }),
51
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
52
- "Type: ",
53
- react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
54
- ", Color:",
55
- " ",
56
- react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
57
- ", Size: ",
58
- react_1.default.createElement("span", { className: "font-semibold" }, "24")),
59
- react_1.default.createElement(index_1.Icon, { name: "test", size: 24, className: "text-blue-600" }),
60
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
61
- "Type: ",
62
- react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
63
- ", Color:",
64
- " ",
65
- react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
66
- ", Size: ",
67
- react_1.default.createElement("span", { className: "font-semibold" }, "48")),
68
- react_1.default.createElement(index_1.Icon, { name: "test", size: 48, className: "text-green-600" })));
16
+ return (react_1.default.createElement(context_1.UiContextProvider, { value: (0, get_provider_config_1.getProviderConfig)() },
17
+ react_1.default.createElement("div", { className: "space-y-2" },
18
+ react_1.default.createElement("div", { className: "mb-2 text-sm" },
19
+ "Type: ",
20
+ react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
21
+ ", Color:",
22
+ " ",
23
+ react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
24
+ ", Size: ",
25
+ react_1.default.createElement("span", { className: "font-semibold" }, "16")),
26
+ react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 16, className: "text-red-600" }),
27
+ react_1.default.createElement("div", { className: "mb-2 text-sm" },
28
+ "Type: ",
29
+ react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
30
+ ", Color:",
31
+ " ",
32
+ react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
33
+ ", Size: ",
34
+ react_1.default.createElement("span", { className: "font-semibold" }, "24")),
35
+ react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 24, className: "text-blue-600" }),
36
+ react_1.default.createElement("div", { className: "mb-2 text-sm" },
37
+ "Type: ",
38
+ react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
39
+ ", Color:",
40
+ " ",
41
+ react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
42
+ ", Size: ",
43
+ react_1.default.createElement("span", { className: "font-semibold" }, "48")),
44
+ react_1.default.createElement(index_1.Icon, { Component: index_1.PinIcon, size: 48, className: "text-green-600" }),
45
+ react_1.default.createElement("div", { className: "mb-2 text-sm" },
46
+ "Type: ",
47
+ react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
48
+ ", Color:",
49
+ " ",
50
+ react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
51
+ ", Size: ",
52
+ react_1.default.createElement("span", { className: "font-semibold" }, "16")),
53
+ react_1.default.createElement(index_1.Icon, { name: "test", size: 16, className: "text-red-600" }),
54
+ react_1.default.createElement("div", { className: "mb-2 text-sm" },
55
+ "Type: ",
56
+ react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
57
+ ", Color:",
58
+ " ",
59
+ react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
60
+ ", Size: ",
61
+ react_1.default.createElement("span", { className: "font-semibold" }, "24")),
62
+ react_1.default.createElement(index_1.Icon, { name: "test", size: 24, className: "text-blue-600" }),
63
+ react_1.default.createElement("div", { className: "mb-2 text-sm" },
64
+ "Type: ",
65
+ react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
66
+ ", Color:",
67
+ " ",
68
+ react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
69
+ ", Size: ",
70
+ react_1.default.createElement("span", { className: "font-semibold" }, "48")),
71
+ react_1.default.createElement(index_1.Icon, { name: "test", size: 48, className: "text-green-600" }))));
69
72
  }
70
73
  exports.Default = Default;
package/icon/types.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { IconsSet } from "@uxf/ui/icon/theme";
2
+ export declare type IconName = keyof IconsSet;
package/icon/types.js ADDED
@@ -0,0 +1,2 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.55",
3
+ "version": "1.0.0-beta.56",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"