oolib 2.142.0 → 2.144.0

package/dist/icons/index.d.ts

@@ -22,6 +22,7 @@ export namespace icons {
     export { CalendarBlank };
     export { Trash };
     export { DotsThreeVertical };
+    export { DotsThreeCircle };
     export { DotsThree };
     export { CaretUp };
     export { CaretDown };
@@ -200,6 +201,7 @@ import { ArrowLeft } from 'phosphor-react';
 import { CalendarBlank } from 'phosphor-react';
 import { Trash } from 'phosphor-react';
 import { DotsThreeVertical } from 'phosphor-react';
+import { DotsThreeCircle } from 'phosphor-react';
 import { DotsThree } from 'phosphor-react';
 import { CaretUp } from 'phosphor-react';
 import { CaretDown } from 'phosphor-react';

package/dist/icons/index.js

@@ -27,6 +27,7 @@ exports.icons = {
     CalendarBlank: phosphor_react_1.CalendarBlank,
     Trash: phosphor_react_1.Trash,
     DotsThreeVertical: phosphor_react_1.DotsThreeVertical,
+    DotsThreeCircle: phosphor_react_1.DotsThreeCircle,
     DotsThree: phosphor_react_1.DotsThree,
     CaretUp: phosphor_react_1.CaretUp,
     CaretDown: phosphor_react_1.CaretDown,

package/dist/stories/Oolib/components/Icons.stories.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    let title: string;
+    namespace args {
+        let invert: boolean;
+    }
+}
+export default _default;
+export function Icons(args: any): import("react").JSX.Element;

package/dist/stories/Oolib/components/Icons.stories.js

@@ -0,0 +1,84 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icons = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var icons_1 = require("../../../icons");
+var themes_1 = require("../../../themes");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var TextInputs_1 = require("../../../v2/components/TextInputs");
+var react_1 = require("react");
+exports.default = {
+    title: "Components/Icons",
+    args: {
+        invert: false,
+    },
+};
+var StyledWrapperIconsGrid = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(", ", 1fr));\n  grid-template-rows: auto;\n  grid-row-gap: 2rem;\n  grid-column-gap: 2rem;\n"], ["\n  width: 100%;\n  position: relative;\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(", ", 1fr));\n  grid-template-rows: auto;\n  grid-row-gap: 2rem;\n  grid-column-gap: 2rem;\n"])), function (_a) {
+    var minWidth = _a.minWidth;
+    return minWidth;
+});
+var weightOptions = ['thin', 'light', 'regular', 'bold', 'fill', 'duotone'];
+var Icons = function (args) {
+    var _a = (0, react_1.useState)(""), searchIcon = _a[0], setSearchIcon = _a[1];
+    var _b = (0, react_1.useState)(null), selectedIcon = _b[0], setSelectedIcon = _b[1];
+    var _c = (0, react_1.useState)('regular'), selectedWeight = _c[0], setSelectedWeight = _c[1];
+    var iconArray = Object.entries(icons_1.icons).map(function (_a) {
+        var key = _a[0], value = _a[1];
+        return ({
+            key: key,
+            value: value
+        });
+    });
+    var filterIcons = function (value) {
+        setSearchIcon(value);
+    };
+    var filteredIcons = iconArray.filter(function (icon) {
+        return icon.key.toLowerCase().includes(searchIcon.toLowerCase());
+    });
+    var handleIconClick = function (key, iconComponent) {
+        setSelectedIcon(selectedIcon === key ? null : key);
+        setSelectedWeight('regular');
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextInputs_1.TextInput, { value: searchIcon, onChange: function (id, value) { return filterIcons(value); }, label: "Search Icon" }),
+        React.createElement(StyledWrapperIconsGrid, { minWidth: "10rem" }, filteredIcons.map(function (_a) {
+            var key = _a.key, Icon = _a.value;
+            return (React.createElement("div", { key: key },
+                React.createElement("div", { style: {
+                        display: "flex",
+                        flexDirection: 'column',
+                        alignItems: "center",
+                        padding: "1rem",
+                        cursor: "pointer",
+                        border: selectedIcon === key ? '2px solid blue' : 'none',
+                    }, onClick: function () { return handleIconClick(key, Icon); } },
+                    React.createElement(Icon, { size: 24, color: "red" }),
+                    React.createElement(Typo2_1.UI_CAPTION, null, key)),
+                selectedIcon === key && (React.createElement("div", { style: {
+                        marginTop: '1rem',
+                        padding: '1rem',
+                        border: '1px solid #ccc',
+                        borderRadius: '4px',
+                        backgroundColor: '#f9f9f9',
+                        width: '100svw'
+                    } },
+                    React.createElement("h4", { style: { marginBottom: '0.5rem' } }, "Select Weight:"),
+                    React.createElement("select", { value: selectedWeight, onChange: function (e) { return setSelectedWeight(e.target.value); }, style: {
+                            width: '100%',
+                            padding: '0.5rem',
+                            marginBottom: '1rem'
+                        } }, weightOptions.map(function (weight) { return (React.createElement("option", { key: weight, value: weight }, weight)); })),
+                    React.createElement("div", { style: { display: 'flex', justifyContent: 'center' } },
+                        React.createElement(Icon, { size: 32, weight: selectedWeight === 'regular' ? undefined : selectedWeight })),
+                    React.createElement(Typo2_1.UI_CAPTION, { style: { textAlign: 'center', marginTop: '0.5rem' } }, "<".concat(key, " size={32} ").concat(selectedWeight !== 'regular' ? "weight=\"".concat(selectedWeight, "\"") : '', " />"))))));
+        }))));
+};
+exports.Icons = Icons;
+var templateObject_1;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.142.0",
+  "version": "2.144.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",