@uxf/ui 1.0.0-beta.71 → 1.0.0-beta.72

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 (4) hide show
  1. package/icon/icon.js +10 -3
  2. package/icon/icon.stories.d.ts +5 -1
  3. package/icon/icon.stories.js +35 -62
  4. package/package.json +1 -1
package/icon/icon.js CHANGED
@@ -25,7 +25,14 @@ exports.Icon = (0, forwardRef_1.forwardRef)("Icon", (props, ref) => {
25
25
  if (CustomComponent) {
26
26
  return (react_1.default.createElement(CustomComponent, { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style }));
27
27
  }
28
- const icon = componentContext.iconsConfig[props.name];
29
- return (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
30
- react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
28
+ if (props.name && props.name in componentContext.iconsConfig) {
29
+ const icon = componentContext.iconsConfig[props.name];
30
+ return (react_1.default.createElement("svg", { className: className, preserveAspectRatio: preserveAspectRatio, ref: ref, role: "img", style: style, viewBox: `0 0 ${icon.w} ${icon.h}` },
31
+ react_1.default.createElement("use", { xlinkHref: `${componentContext.spriteFilePath}#icon-sprite--${props.name}` })));
32
+ }
33
+ // eslint-disable-next-line no-console
34
+ console.warn(`Icon "${props.name}" not found.`);
35
+ return (react_1.default.createElement("span", { title: `icon "${props.name}" not found` },
36
+ react_1.default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 320 512", width: props.size, height: props.size },
37
+ react_1.default.createElement("path", { d: "M144 416c-17.67 0-32 14.33-32 32s14.33 32.01 32 32.01s32-14.34 32-32.01S161.7 416 144 416zM211.2 32H104C46.66 32 0 78.66 0 136v16C0 165.3 10.75 176 24 176S48 165.3 48 152v-16c0-30.88 25.12-56 56-56h107.2C244.7 80 272 107.3 272 140.8c0 22.66-12.44 43.27-32.5 53.81L167 232.8C137.1 248 120 277.9 120 310.6V328c0 13.25 10.75 24.01 24 24.01S168 341.3 168 328V310.6c0-14.89 8.188-28.47 21.38-35.41l72.47-38.14C297.7 218.2 320 181.3 320 140.8C320 80.81 271.2 32 211.2 32z" }))));
31
38
  });
package/icon/icon.stories.d.ts CHANGED
@@ -4,4 +4,8 @@ declare const _default: {
4
4
  component: React.ForwardRefExoticComponent<import("./icon").IconProps & React.RefAttributes<SVGSVGElement>>;
5
5
  };
6
6
  export default _default;
7
- export declare function Default(): JSX.Element;
7
+ export declare function AllIcons(): JSX.Element;
8
+ export declare function ColorAndSizes(): JSX.Element;
9
+ export declare function CustomComponent(): JSX.Element;
10
+ export declare function SpriteIcon(): JSX.Element;
11
+ export declare function SpriteIconNotExists(): JSX.Element;
package/icon/icon.stories.js CHANGED
@@ -3,72 +3,45 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Default = void 0;
6
+ exports.SpriteIconNotExists = exports.SpriteIcon = exports.CustomComponent = exports.ColorAndSizes = exports.AllIcons = void 0;
7
7
  const icon_1 = require("./icon");
8
8
  const react_1 = __importDefault(require("react"));
9
- function PinIcon(props) {
10
- return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
11
- react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
12
- }
9
+ const context_1 = require("../context");
13
10
  exports.default = {
14
11
  title: "UI/Icon",
15
12
  component: icon_1.Icon,
16
13
  };
17
- function Default() {
18
- return (react_1.default.createElement("div", { className: "space-y-2" },
19
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
20
- "Type: ",
21
- react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
22
- ", Color:",
23
- " ",
24
- react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
25
- ", Size: ",
26
- react_1.default.createElement("span", { className: "font-semibold" }, "16")),
27
- react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 16, className: "text-red-600" }),
28
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
29
- "Type: ",
30
- react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
31
- ", Color:",
32
- " ",
33
- react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
34
- ", Size: ",
35
- react_1.default.createElement("span", { className: "font-semibold" }, "24")),
36
- react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 24, className: "text-primary-600" }),
37
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
38
- "Type: ",
39
- react_1.default.createElement("span", { className: "font-semibold" }, "Custom component"),
40
- ", Color:",
41
- " ",
42
- react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
43
- ", Size: ",
44
- react_1.default.createElement("span", { className: "font-semibold" }, "48")),
45
- react_1.default.createElement(icon_1.Icon, { Component: PinIcon, size: 48, className: "text-green-600" }),
46
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
47
- "Type: ",
48
- react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
49
- ", Color:",
50
- " ",
51
- react_1.default.createElement("span", { className: "font-semibold" }, "Red"),
52
- ", Size: ",
53
- react_1.default.createElement("span", { className: "font-semibold" }, "16")),
54
- react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 16, className: "text-red-600" }),
55
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
56
- "Type: ",
57
- react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
58
- ", Color:",
59
- " ",
60
- react_1.default.createElement("span", { className: "font-semibold" }, "Blue"),
61
- ", Size: ",
62
- react_1.default.createElement("span", { className: "font-semibold" }, "24")),
63
- react_1.default.createElement(icon_1.Icon, { name: "chevronUp", size: 24, className: "text-primary-600" }),
64
- react_1.default.createElement("div", { className: "mb-2 text-sm" },
65
- "Type: ",
66
- react_1.default.createElement("span", { className: "font-semibold" }, "SVG sprite"),
67
- ", Color:",
68
- " ",
69
- react_1.default.createElement("span", { className: "font-semibold" }, "Green"),
70
- ", Size: ",
71
- react_1.default.createElement("span", { className: "font-semibold" }, "48")),
72
- react_1.default.createElement(icon_1.Icon, { name: "chevronDown", size: 48, className: "text-green-600" })));
14
+ function AllIcons() {
15
+ const iconContext = (0, context_1.useComponentContext)("icon");
16
+ return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap" }, Object.keys(iconContext.iconsConfig).map((iconName) => (react_1.default.createElement("div", { key: iconName, className: "flex h-28 w-28 flex-col items-center justify-center gap-3" },
17
+ react_1.default.createElement(icon_1.Icon, { name: iconName, size: 24 }),
18
+ react_1.default.createElement("div", { className: "text-gray-400" },
19
+ react_1.default.createElement("small", null, iconName)))))));
20
+ }
21
+ exports.AllIcons = AllIcons;
22
+ function ColorAndSizes() {
23
+ return (react_1.default.createElement("div", { className: "flex flex-row flex-wrap gap-4" },
24
+ react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12 }),
25
+ react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 }),
26
+ react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20 }),
27
+ react_1.default.createElement(icon_1.Icon, { name: "camera", size: 12, className: "text-primary-600" }),
28
+ react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16, className: "text-orange-600" }),
29
+ react_1.default.createElement(icon_1.Icon, { name: "camera", size: 20, className: "text-green-600" })));
30
+ }
31
+ exports.ColorAndSizes = ColorAndSizes;
32
+ function CustomComponent() {
33
+ const SvgIcon = (props) => {
34
+ return (react_1.default.createElement("svg", { viewBox: "0 0 29.65 40", ...props },
35
+ react_1.default.createElement("path", { fill: "currentColor", fillRule: "evenodd", d: "M0 14.83C0 6.61 6.61 0 14.83 0c8.11 0 14.83 6.61 14.83 14.83 0 8.64-8.85 19.41-14.83 25.17C8.75 34.24 0 23.47 0 14.83zm9.28 0c0-3.09 2.45-5.55 5.55-5.55 2.99 0 5.44 2.45 5.44 5.55 0 2.99-2.45 5.44-5.44 5.44-3.1 0-5.55-2.46-5.55-5.44z", clipRule: "evenodd" })));
36
+ };
37
+ return react_1.default.createElement(icon_1.Icon, { Component: SvgIcon, size: 16 });
38
+ }
39
+ exports.CustomComponent = CustomComponent;
40
+ function SpriteIcon() {
41
+ return react_1.default.createElement(icon_1.Icon, { name: "camera", size: 16 });
42
+ }
43
+ exports.SpriteIcon = SpriteIcon;
44
+ function SpriteIconNotExists() {
45
+ return react_1.default.createElement(icon_1.Icon, { name: "not-exists", size: 16 });
73
46
  }
74
- exports.Default = Default;
47
+ exports.SpriteIconNotExists = SpriteIconNotExists;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uxf/ui",
3
- "version": "1.0.0-beta.71",
3
+ "version": "1.0.0-beta.72",
4
4
  "description": "",
5
5
  "publishConfig": {
6
6
  "access": "public"