oolib 2.134.6 → 2.135.0

package/dist/components/MaterialColors/index.d.ts

@@ -0,0 +1,5 @@
+export default ThemeColorDisplay;
+declare function ThemeColorDisplay({ color }: {
+    color: any;
+}): React.JSX.Element;
+import React from 'react';

package/dist/components/MaterialColors/index.js

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(require("react"));
+var Typo_1 = require("../Typo");
+// import { argbFromHex, themeFromSourceColor } from "@material/material-color-utilities";
+var utils_1 = require("./utils/utils");
+var material_color_utilities_1 = require("@material/material-color-utilities");
+var styled_1 = require("./styled");
+var ThemeColorDisplay = function (_a) {
+    var color = _a.color;
+    var originalTheme = (0, material_color_utilities_1.themeFromSourceColor)((0, material_color_utilities_1.argbFromHex)(color), []);
+    var kbfakfas = (0, material_color_utilities_1.argbFromHex)(color);
+    var colorHCT = material_color_utilities_1.Hct.fromInt(kbfakfas);
+    // const theme = convertThemeColorsToHex(originalTheme);
+    var tonalPalette = new material_color_utilities_1.SchemeTonalSpot(colorHCT, false, 1);
+    var scheme = new material_color_utilities_1.DynamicScheme({
+        sourceColorArgb: (0, material_color_utilities_1.argbFromHex)(color),
+        variant: 8,
+        isDark: false,
+        contrastLevel: 0.1,
+        primaryPalette: material_color_utilities_1.TonalPalette.fromInt(originalTheme.palettes.primary.keyColor.argb),
+        secondaryPalette: material_color_utilities_1.TonalPalette.fromInt(originalTheme.palettes.secondary.keyColor.argb),
+        tertiaryPalette: material_color_utilities_1.TonalPalette.fromInt(originalTheme.palettes.tertiary.keyColor.argb),
+        neutralPalette: material_color_utilities_1.TonalPalette.fromInt(originalTheme.palettes.neutral.keyColor.argb),
+        neutralVariantPalette: material_color_utilities_1.TonalPalette.fromInt(originalTheme.palettes.neutralVariant.keyColor.argb),
+    });
+    // const primaryTonalPalette = hexFromArgb(tonalPalette.primaryPalette.keyColor.argb);
+    // const secondaryTonalPalette = hexFromArgb(tonalPalette.secondaryPalette.keyColor.argb);
+    // const tertiaryTonalPalette = hexFromArgb(tonalPalette.tertiaryPalette.keyColor.argb);
+    // const primary1 = hexFromArgb(originalTheme.palettes.primary.keyColor.argb);
+    // const secondary1 = hexFromArgb(originalTheme.palettes.secondary.keyColor.argb);
+    // const tertiary1 = hexFromArgb(originalTheme.palettes.tertiary.keyColor.argb);
+    var primaryContainer = (0, material_color_utilities_1.hexFromArgb)(scheme.primaryContainer);
+    var secondaryContainer = (0, material_color_utilities_1.hexFromArgb)(scheme.secondaryContainer);
+    var tertiaryContainer = (0, material_color_utilities_1.hexFromArgb)(scheme.tertiaryContainer);
+    // const arrayWithTone = Array.from(Array(100)).map((_, i) => hexFromArgb(TonalPalette.fromInt(originalTheme.palettes.primary.keyColor.argb).tone(i)))
+    var argbDynamicPrimary = material_color_utilities_1.MaterialDynamicColors.primary.getArgb(scheme);
+    var argbDynamicSecondary = material_color_utilities_1.MaterialDynamicColors.secondary.getArgb(scheme);
+    var argbDynamicTertiary = material_color_utilities_1.MaterialDynamicColors.tertiary.getArgb(scheme);
+    var hctDynamic = material_color_utilities_1.MaterialDynamicColors.primary.getHct(scheme);
+    var palette = {
+        primaryContainer: primaryContainer,
+        secondaryContainer: secondaryContainer,
+        tertiaryContainer: tertiaryContainer,
+        schemePrimary: (0, material_color_utilities_1.hexFromArgb)(scheme.primary),
+        schemeSecondary: (0, material_color_utilities_1.hexFromArgb)(scheme.secondary),
+        schemetertiary: (0, material_color_utilities_1.hexFromArgb)(scheme.tertiary),
+        DynamicPrimary: (0, material_color_utilities_1.hexFromArgb)(argbDynamicPrimary),
+        DynamicSecondary: (0, material_color_utilities_1.hexFromArgb)(argbDynamicSecondary),
+        DynamicTertiary: (0, material_color_utilities_1.hexFromArgb)(argbDynamicTertiary),
+        hctDynamic: (0, material_color_utilities_1.hexFromArgb)(hctDynamic)
+    };
+    var showThisOnly = ['primaryContainer', 'secondaryContainer', 'tertiaryContainer', 'onPrimaryContainer', 'onSecondaryContainer', 'onTertiaryContainer'];
+    var renderColorBoxes = function (section) {
+        var _a;
+        return (section === "palettes" ?
+            react_1.default.createElement(react_1.default.Fragment, null, (_a = Object.entries(palette)) === null || _a === void 0 ? void 0 : _a.map(function (_a) {
+                var key = _a[0], color = _a[1];
+                return (react_1.default.createElement("div", { style: { margin: '2rem' } },
+                    react_1.default.createElement(Typo_1.SANS_2, null, key),
+                    react_1.default.createElement(Typo_1.SANS_2, null, color),
+                    react_1.default.createElement(styled_1.ColorBox, { key: color, bgColor: color })));
+            }))
+            : Object.entries(originalTheme.schemes[section].props).map(function (_a) {
+                var key = _a[0], color = _a[1];
+                if (showThisOnly.includes(key)) {
+                    return (react_1.default.createElement("div", { style: { margin: '2rem' } },
+                        react_1.default.createElement(Typo_1.SANS_2, null, key),
+                        react_1.default.createElement(Typo_1.SANS_2, null, (0, material_color_utilities_1.hexFromArgb)(color)),
+                        react_1.default.createElement(styled_1.ColorBox, { key: key, bgColor: (0, material_color_utilities_1.hexFromArgb)(color) })));
+                }
+            }));
+    };
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(styled_1.ColorSection, null,
+            react_1.default.createElement(Typo_1.SANS_2, null, "Palettes"),
+            react_1.default.createElement(styled_1.ColorGrid, null, renderColorBoxes('palettes')),
+            react_1.default.createElement(Typo_1.SANS_2, null, "Light Theme"),
+            react_1.default.createElement(styled_1.ColorGrid, null, renderColorBoxes('light'))),
+        react_1.default.createElement(styled_1.ColorSection, null,
+            react_1.default.createElement(Typo_1.SANS_2, null, "Dark Theme"),
+            react_1.default.createElement(styled_1.ColorGrid, null, renderColorBoxes('dark')))));
+};
+exports.default = ThemeColorDisplay;

package/dist/components/MaterialColors/utils/utils.d.ts

@@ -0,0 +1,3 @@
+export function argbToHex(argb: any): string;
+export function convertThemeColorsToHex(obj: any): any;
+export function argbToRgba(argb: any): string;

package/dist/components/MaterialColors/utils/utils.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.convertThemeColorsToHex = exports.argbToRgba = exports.argbToHex = void 0;
+function argbToHex(argb) {
+    var r = (argb >> 16) & 255;
+    var g = (argb >> 8) & 255;
+    var b = argb & 255;
+    return "#".concat(r.toString(16).padStart(2, '0')).concat(g.toString(16).padStart(2, '0')).concat(b.toString(16).padStart(2, '0'));
+}
+exports.argbToHex = argbToHex;
+var argbToRgba = function (argb) {
+    var r = (argb >> 16) & 255;
+    var g = (argb >> 8) & 255;
+    var b = argb & 255;
+    var a = ((argb >> 24) & 255) / 255;
+    return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")");
+};
+exports.argbToRgba = argbToRgba;
+function convertThemeColorsToHex(obj) {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+    if (Array.isArray(obj)) {
+        return obj.map(convertThemeColorsToHex);
+    }
+    var result = {};
+    for (var _i = 0, _a = Object.entries(obj); _i < _a.length; _i++) {
+        var _b = _a[_i], key = _b[0], value = _b[1];
+        if (typeof value === 'number' && key !== 'source' && key !== 'hue' && key !== 'chroma') {
+            result[key] = (0, exports.argbToRgba)(value);
+        }
+        else if (typeof value === 'object') {
+            result[key] = convertThemeColorsToHex(value);
+        }
+        else {
+            result[key] = value;
+        }
+    }
+    return result;
+}
+exports.convertThemeColorsToHex = convertThemeColorsToHex;

package/dist/components/Playground/index.js

@@ -5,17 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Playground = void 0;
 var react_1 = __importDefault(require("react"));
-var icons_1 = require("../../icons");
-var themes_1 = require("../../themes");
 var App = function (_a) {
     var invert = _a.invert;
-    var Inspiring = icons_1.icons.Inspiring, Celebrate = icons_1.icons.Celebrate, Learning = icons_1.icons.Learning, Like = icons_1.icons.Like, Reactions = icons_1.icons.Reactions, ThumbsUp = icons_1.icons.ThumbsUp;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Celebrate, { size: 24, weight: "fill" }),
-        react_1.default.createElement(Inspiring, { size: 24, weight: "fill" }),
-        react_1.default.createElement(Learning, { size: 24, weight: "fill" }),
-        react_1.default.createElement(Like, { size: 24, weight: "fill" }),
-        react_1.default.createElement(Reactions, { size: 24, weight: "fill" })));
+    return (react_1.default.createElement(react_1.default.Fragment, null));
 };
 var Playground = function (_a) {
     var invert = _a.invert;

package/dist/icons/index.d.ts

@@ -110,6 +110,7 @@ export namespace icons {
     export { SquareHalfBottom };
     export { MagicWand };
     export { CrownSimple };
+    export { Funnel };
     export { OkeGoogleIcon };
     export { LetterH };
     export { IndexIcon };
@@ -283,6 +284,7 @@ import { SquareHalf } from 'phosphor-react';
 import { SquareHalfBottom } from 'phosphor-react';
 import { MagicWand } from 'phosphor-react';
 import { CrownSimple } from 'phosphor-react';
+import { Funnel } from 'phosphor-react';
 import { OkeGoogleIcon } from "./custom";
 import { LetterH } from "./custom";
 import { IndexIcon } from "./custom";

package/dist/icons/index.js

@@ -115,6 +115,7 @@ exports.icons = {
     SquareHalfBottom: phosphor_react_1.SquareHalfBottom,
     MagicWand: phosphor_react_1.MagicWand,
     CrownSimple: phosphor_react_1.CrownSimple,
+    Funnel: phosphor_react_1.Funnel,
     //custom
     OkeGoogleIcon: custom_1.OkeGoogleIcon,
     LetterH: custom_1.LetterH,

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export * from "./components/Margins";
 export * from "./components/Paddings";
 export * from "./utils/_EXPORTS";
 export { colors } from "./themes";
+export { colors as colors2 } from "./v2/themes";
 export { icons } from "./icons";
 export { Section } from "./components/Section";
 export { UserRoleBadge } from "./components/UserRoleBadge";

package/dist/index.js

@@ -17,8 +17,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PDFInput = exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors = exports.GlobalStyles = void 0;
-exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = void 0;
+exports.AudioInput = exports.VideoInput = exports.ProfileImageInput = exports.ImageInput = exports.MetaBlock = exports.HintsProvider = exports.genTagComp = exports.generateOptions = exports.OptionsSingle = exports.DropdownMulti = exports.DropdownSingle = exports.parseCardConfig = exports.ListProfile = exports.CardProfile = exports.CardEmbed = exports.ListContent = exports.CardContent = exports.DateTimeRangePicker = exports.DateTimePicker = exports.TimeRangePicker = exports.TimePicker = exports.DateRangePicker = exports.DatePicker = exports.TextLoader = exports.BarChart = exports.PageScrollIndicator = exports.HomeCover = exports.EmptyStates = exports.ModalSmall = exports.Modal = exports.ModalForms = exports.ModalConfirm = exports.SkeletonLoader = exports.Divider = exports.PercentBarChart = exports.PercentCompletedPie = exports.Accordion = exports.ActionMenu = exports.Tooltip = exports.OKELink = exports.UserRoleBadge = exports.Section = exports.LoaderOverlay = exports.Loader = exports.ProgressBar = exports.LoaderCircle = exports.icons = exports.colors2 = exports.colors = exports.GlobalStyles = void 0;
+exports.TableCellResizerPlugin = exports.styledOKELinkCSS = exports.SimpleTable = exports.ModalConfirmAction = exports.BannerProvider = exports.useBannerContext = exports.BannerContext = exports.BannerInfo = exports.BannerAlert = exports.GroupQuestionsInputSingle = exports.ResourceInput = exports.IFrameInput = exports.PDFInput = void 0;
 //css and styling related ( styled-components )
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
@@ -26,6 +26,8 @@ __exportStar(require("./themes/mixins"), exports);
 //base style guide : i.e colors, icons, typo
 var themes_1 = require("./themes");
 Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return themes_1.colors; } });
+var themes_2 = require("./v2/themes");
+Object.defineProperty(exports, "colors2", { enumerable: true, get: function () { return themes_2.colors; } });
 var icons_1 = require("./icons");
 Object.defineProperty(exports, "icons", { enumerable: true, get: function () { return icons_1.icons; } });
 __exportStar(require("./components/Typo"), exports);

package/dist/stories/v2/themes/MaterialTheme.stories.d.ts

@@ -0,0 +1,12 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace color {
+            let name: string;
+            let type: string;
+        }
+    }
+}
+export default _default;
+export function _MaterialColors(args: any): import("react").JSX.Element;
+export function Colors(args: any): import("react").JSX.Element;

package/dist/stories/v2/themes/MaterialTheme.stories.js

@@ -0,0 +1,61 @@
+"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.Colors = exports._MaterialColors = void 0;
+var react_1 = require("react");
+var MaterialColors_1 = __importDefault(require("../../../components/MaterialColors"));
+var Typo_1 = require("../../../components/Typo");
+var Typo2_1 = require("../../../v2/components/Typo2");
+var themes_1 = require("../../../v2/themes");
+var styled_components_1 = __importDefault(require("styled-components"));
+exports.default = {
+    title: "Oolib V 2.0/themes/Material Colors",
+    argTypes: {
+        color: {
+            name: "Color",
+            type: "color",
+            // options: ["!", "2", "3"]
+        }
+    }
+};
+var _MaterialColors = function (args) {
+    var _a = (0, react_1.useState)("#63A002"), color = _a[0], setColor = _a[1];
+    return (React.createElement("div", null,
+        React.createElement(Typo_1.SANS_3_4, null, "Theme Color Display"),
+        React.createElement(Typo_1.SANS_3_4, null, color),
+        React.createElement("input", { type: "color", value: color, onChange: function (e) { return setColor(e.target.value); }, style: { margin: "2rem" } }),
+        React.createElement(MaterialColors_1.default, { color: color })));
+};
+exports._MaterialColors = _MaterialColors;
+var ColorDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: ", ";\n  height: 200px;\n  width: 200px;\n  transition: transform 250ms;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: .5rem;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  h4 {\n    display: none;\n  }\n  :hover {\n    transform: scale(0.9);\n    opacity: .8;\n    h4 {\n      display: block;\n    }\n  }\n"], ["\n  background-color: ", ";\n  height: 200px;\n  width: 200px;\n  transition: transform 250ms;\n  cursor: pointer;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: .5rem;\n  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n  h4 {\n    display: none;\n  }\n  :hover {\n    transform: scale(0.9);\n    opacity: .8;\n    h4 {\n      display: block;\n    }\n  }\n"])), function (_a) {
+    var color = _a.color;
+    return color;
+});
+var Colors = function (args) {
+    var _a = (0, react_1.useState)(''), copied = _a[0], setCopied = _a[1];
+    var handleCopyToClipboard = function (value, i) {
+        navigator.clipboard
+            .writeText(value)
+            .then(function () { return setCopied(i); })
+            .catch(function () { return setCopied(''); });
+        setTimeout(function () { return setCopied(''); }, 1000);
+    };
+    return (React.createElement("div", { style: { display: 'flex', gap: '1rem', flexWrap: 'wrap' } }, Object.entries(themes_1.colors).map(function (item, i) { return (React.createElement("div", { style: { display: 'flex', flexDirection: 'column', gap: "1rem" } },
+        React.createElement(ColorDiv, { onClick: function () { return handleCopyToClipboard(item[1], i); }, color: item[1] },
+            React.createElement(Typo2_1.UI_CARDTITLE, { capitalize: true }, copied === i ? 'Copied' : 'copy color')),
+        React.createElement("div", { style: {
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center',
+            } },
+            React.createElement(Typo2_1.UI_CARDTITLE, null, item[0]),
+            React.createElement(Typo2_1.UI_CARDTITLE, null, item[1])))); })));
+};
+exports.Colors = Colors;
+var templateObject_1;

package/dist/v2/themes/colors.d.ts

@@ -0,0 +1,32 @@
+export declare const colors: {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    primaryContainer: string;
+    onPrimary: string;
+    secondaryContainer: string;
+    onSecondary: string;
+    tertiaryContainer: string;
+    onTertiary: string;
+    surfaceContainer: string;
+    surfaceContainerLow: string;
+    grey80: string;
+    grey40: string;
+    grey10: string;
+};
+export interface Colors2Type {
+    primary: string;
+    secondary: string;
+    tertiary: string;
+    primaryContainer: string;
+    onPrimary: string;
+    secondaryContainer: string;
+    onSecondary: string;
+    tertiaryContainer: string;
+    onTertiary: string;
+    surfaceContainer: string;
+    surfaceContainerLow: string;
+    grey80: string;
+    grey40: string;
+    grey10: string;
+}

package/dist/v2/themes/colors.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colors = void 0;
+var primary = "#006686";
+var secondary = "#456272";
+var tertiary = "#764F8B";
+var primaryContainer = "#98DCFF";
+var onPrimary = "#000000";
+var secondaryContainer = "#C9E8FA";
+var onSecondary = "#2F4C5B";
+var tertiaryContainer = "#D4CAD8";
+var onTertiary = "#532E68";
+var surfaceContainer = "#EBEEF1";
+var surfaceContainerLow = "#F1F4F7";
+var grey80 = '#333333';
+var grey40 = "#999999";
+var grey10 = "#E7E7E7";
+exports.colors = {
+    primary: primary,
+    secondary: secondary,
+    tertiary: tertiary,
+    primaryContainer: primaryContainer,
+    onPrimary: onPrimary,
+    secondaryContainer: secondaryContainer,
+    onSecondary: onSecondary,
+    tertiaryContainer: tertiaryContainer,
+    onTertiary: onTertiary,
+    surfaceContainer: surfaceContainer,
+    surfaceContainerLow: surfaceContainerLow,
+    grey80: grey80,
+    grey40: grey40,
+    grey10: grey10
+};

package/dist/v2/themes/index.d.ts

@@ -1 +1,2 @@
 export { typo } from './typo';
+export { colors } from './colors';

package/dist/v2/themes/index.js

@@ -1,5 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.typo = void 0;
+exports.colors = exports.typo = void 0;
 var typo_1 = require("./typo");
 Object.defineProperty(exports, "typo", { enumerable: true, get: function () { return typo_1.typo; } });
+var colors_1 = require("./colors");
+Object.defineProperty(exports, "colors", { enumerable: true, get: function () { return colors_1.colors; } });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.134.6",
+  "version": "2.135.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -88,6 +88,7 @@
     "@faker-js/faker": "^8.3.1",
     "@lexical/react": "^0.13.1",
     "@lexical/table": "^0.13.1",
+    "@material/material-color-utilities": "^0.3.0",
     "@react-hook/resize-observer": "^1.2.6",
     "babel-polyfill": "^6.26.0",
     "d3": "^7.8.5",