linkedunion-design-kit 1.5.0 → 1.5.2

package/dist/utils/index.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.customAspectRatio = exports.customBorderRadius = exports.customBorderWidth = exports.customOpacity = exports.customButtonIconSize = exports.customIconSize = exports.customLogoSize = exports.customMinHeight = exports.customMinWidth = exports.customHeight = exports.customWidth = exports.customSize = exports.customTextWrap = exports.customTextDecoration = exports.customTextTransform = exports.customTextAlignment = exports.customLineHeight = exports.customFontWeight = exports.customFontSize = exports.sectionTypeList = exports.avtarBackgroundSize = exports.headingsList = exports.avatarShapeList = exports.textColorList = exports.avatarSizesList = exports.landscapeaspectRatioList = exports.portraitaspectRatioList = exports.buttonWithIconList = exports.butttonSizeList = exports.buttonColorsList = exports.iconColorList = exports.buttonIconSizeList = exports.iconSizeList = exports.borderWidthList = exports.borderRadiusList = exports.spacings = exports.minHeights = exports.minWidths = exports.heights = exports.widths = exports.sizes = exports.textWraps = exports.textDecorations = exports.textTransform = exports.textAlignment = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.defaultCardProps = exports.text = void 0;
-exports.table_row_className = exports.table_sub_heading_className = exports.table_header_className = exports.table_data_className = exports.customHeadings = exports.customizeTextColors = exports.customizeAvtarShape = exports.customAvatarSize = exports.customIconButtonSize = exports.customButtonSize = exports.customButtonOutlineColors = exports.customButtonColors = exports.customIconColors = exports.customBoxShadow = void 0;
-exports.default = generateUtilities;
+exports.customAspectRatio = exports.customBorderRadius = exports.customBorderWidth = exports.customOpacity = exports.customButtonIconSize = exports.customIconSize = exports.customLogoSize = exports.customMinHeight = exports.customMinWidth = exports.customHeight = exports.customWidth = exports.customSize = exports.customTextWrap = exports.customTextDecoration = exports.customTextTransform = exports.customTextAlignment = exports.customLineHeight = exports.customFontWeight = exports.customFontSize = exports.sectionTypeList = exports.avatarBackgroundSize = exports.headingsList = exports.avatarShapeList = exports.textColorList = exports.avatarSizesList = exports.landscapeAspectRatioList = exports.portraitAspectRatioList = exports.buttonWithIconList = exports.buttonSizeList = exports.buttonColorsList = exports.iconColorList = exports.buttonIconSizeList = exports.iconSizeList = exports.borderWidthList = exports.borderRadiusList = exports.spacings = exports.minHeights = exports.minWidths = exports.heights = exports.widths = exports.sizes = exports.textWraps = exports.textDecorations = exports.textTransform = exports.textAlignment = exports.lineHeights = exports.fontWeights = exports.fontSizes = exports.defaultCardProps = exports.text = void 0;
+exports.table_row_className = exports.table_sub_heading_className = exports.table_header_className = exports.table_data_className = exports.customHeadings = exports.customizeTextColors = exports.customizeAvatarShape = exports.customAvatarSize = exports.customIconButtonSize = exports.customButtonSize = exports.customButtonOutlineColors = exports.customButtonColors = exports.customIconColors = exports.customBoxShadow = void 0;
+exports.generateUtilities = generateUtilities;
 var index_1 = require("../components/MediaCard/index");
 var enums_1 = require("./enums");
 //************Used for typography and color utilities Storybook************
-exports.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.";
+exports.text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popular in the 1960s with the release of Let set sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Ald PageMaker including versions of Lorem Ipsum.";
 exports.defaultCardProps = {
     type: index_1.SectionTypeEnum.postByCategoriesTheme,
     image: "/images/demo-image.jpg",
@@ -76,8 +76,8 @@ exports.textDecorations = [
         label: "lu-text-decoration-underline: underline",
     },
     {
-        key: "lu-text-decoration-linethrough",
-        label: "lu-text-decoration-linethrough: linethrough",
+        key: "lu-text-decoration-line-through",
+        label: "lu-text-decoration-line-through: line-through",
     },
 ];
 exports.textWraps = [
@@ -237,7 +237,7 @@ exports.buttonColorsList = [
     { key: "lu-btn-gray-light", label: "lu-btn-gray-light" },
     { key: "lu-btn-disabled", label: "lu-btn-disabled" },
 ];
-exports.butttonSizeList = [
+exports.buttonSizeList = [
     { key: "lu-btn-sm", label: "lu-btn-sm" },
     { key: "lu-btn-md", label: "lu-btn-md" },
     { key: "lu-btn-lg", label: "lu-btn-lg" },
@@ -249,7 +249,7 @@ exports.buttonWithIconList = [
     { key: "lu-btn-lg", label: "lu-btn-lg" },
     { key: "lu-btn-xl", label: "lu-btn-xl" },
 ];
-exports.portraitaspectRatioList = [
+exports.portraitAspectRatioList = [
     { key: "lu-aspect-square", label: "lu-aspect-square: 1/1" },
     { key: "lu-aspect-1-2-por", label: "lu-aspect-1-2-por: 1/2" },
     { key: "lu-aspect-2-3-por", label: "lu-aspect-2-3-por: 2/3" },
@@ -259,7 +259,7 @@ exports.portraitaspectRatioList = [
     { key: "lu-aspect-9-16-por", label: "lu-aspect-9-16-por: 9/16" },
     { key: "lu-aspect-9-21-por", label: "lu-aspect-9-21-por: 9/21" },
 ];
-exports.landscapeaspectRatioList = [
+exports.landscapeAspectRatioList = [
     { key: "lu-aspect-square", label: "lu-aspect-square: 1/1" },
     { key: "lu-aspect-2-1-landsc", label: "lu-aspect-2-1-landsc: 2/1" },
     { key: "lu-aspect-3-2-landsc", label: "lu-aspect-3-2-landsc: 3/2" },
@@ -311,7 +311,7 @@ exports.headingsList = [
     { key: "lu-heading-h5", label: "lu-heading-h5" },
     { key: "lu-heading-h6", label: "lu-heading-h6" },
 ];
-var avtarBackgroundSize = function (size) {
+var avatarBackgroundSize = function (size) {
     if (size === "lu-avatar-massive") {
         return {
             width: "200px",
@@ -348,12 +348,6 @@ var avtarBackgroundSize = function (size) {
             height: "96px",
         };
     }
-    else if (size === "lu-avatar-4x-large") {
-        return {
-            width: "96px",
-            height: "96px",
-        };
-    }
     else if (size === "lu-avatar-3x-large") {
         return {
             width: "76px",
@@ -391,7 +385,7 @@ var avtarBackgroundSize = function (size) {
         };
     }
 };
-exports.avtarBackgroundSize = avtarBackgroundSize;
+exports.avatarBackgroundSize = avatarBackgroundSize;
 exports.sectionTypeList = Object.values(index_1.SectionTypeEnum).map(function (type) { return ({
     key: type,
     label: type,
@@ -454,7 +448,7 @@ exports.customTextTransform = {
 exports.customTextDecoration = {
     "lu-text-decoration-none": "none",
     "lu-text-decoration-underline": "underline",
-    "lu-text-decoration-linethrough": "line-through",
+    "lu-text-decoration-line-through": "line-through",
 };
 exports.customTextWrap = {
     "lu-text-wrap": "normal",
@@ -643,6 +637,7 @@ exports.customBorderRadius = {
     ".lu-border-rounded-3xl": { borderRadius: "var(--core-300)" },
     ".lu-border-rounded-full": { borderRadius: "9999px" },
 };
+// TODO: fix this name class name keep simple and short and remove landsc from  cspell list
 exports.customAspectRatio = {
     ".lu-aspect-square": { aspectRatio: "1 / 1" },
     ".lu-aspect-2-1-landsc": { aspectRatio: "2 / 1" },
@@ -667,6 +662,7 @@ exports.customBoxShadow = {
     "lu-shadow-lg": "0px 4px 18px 0 rgba(52, 52, 52, 0.15)",
     "lu-shadow-xl": "0px 8px 24px 0 rgba(52, 52, 52, 0.15)",
 };
+// TODO: fix this name midtone to to other and remove landsc from  cspell list
 exports.customIconColors = {
     ".lu-disabled-icon-light": { fill: "#D2D3D5" },
     ".lu-disabled-icon-dark": { fill: "var(--neutral-400)" },
@@ -1536,7 +1532,7 @@ exports.customAvatarSize = {
         height: "var(--core-175)",
     },
 };
-exports.customizeAvtarShape = {
+exports.customizeAvatarShape = {
     ".square": { borderRadius: "0px" },
     ".circle": { borderRadius: "9999px" },
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "linkedunion-design-kit",
-  "version": "1.5.0",
+  "version": "1.5.2",
   "private": false,
   "files": [
     "dist",
@@ -20,7 +20,20 @@
     "build-storybook": "storybook build",
     "test": "jest",
     "coverage": "jest --coverage",
-    "test:watch": "jest --watch"
+    "test:watch": "jest --watch",
+    "spellcheck": "cspell \"**/*.{js,ts,tsx,md,json}\"",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "**/*.{js,ts,tsx,mjs,cjs}": [
+      "prettier --write",
+      "eslint --fix",
+      "npx cspell"
+    ],
+    "**/*.{md,json}": [
+      "prettier --write",
+      "npx cspell"
+    ]
   },
   "author": "linkedunion",
   "license": "MIT",
@@ -30,10 +43,11 @@
   "dependencies": {
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
-    "next": "14.0.0",
-    "react": "^18",
-    "react-dom": "^18",
+    "@testing-library/react": "^16.2.0",
+    "eslint-plugin-testing-library": "^7.1.1",
+    "next": "^15.2.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "tsc-alias": "^1.8.10"
   },
   "devDependencies": {
@@ -44,29 +58,41 @@
     "@storybook/blocks": "^8.4.3",
     "@storybook/client-logger": "^8.4.4",
     "@storybook/nextjs": "^8.4.3",
-    "@storybook/react": "^8.4.4",
+    "@storybook/react": "^8.6.2",
     "@storybook/test": "^8.4.3",
     "@storybook/testing-react": "^2.0.1",
+    "@testing-library/dom": "^10.4.0",
     "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20",
-    "@types/react": "^18",
-    "@types/react-dom": "^18",
+    "@types/node": "^22.13.5",
+    "@types/react": "^19.0.10",
+    "@types/react-dom": "^19.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.25.0",
+    "@typescript-eslint/parser": "^8.25.0",
     "autoprefixer": "^10",
-    "eslint": "^8",
-    "eslint-config-next": "14.0.0",
+    "cspell": "^8.17.5",
+    "eslint": "^9.21.0",
+    "eslint-config-next": "^15.2.0",
     "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-storybook": "^0.11.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-import-resolver-typescript": "^3.8.3",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-storybook": "^0.11.3",
+    "husky": "^9.1.7",
     "jest": "^29.7.0",
     "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jest-fetch-mock": "^3.0.3",
+    "lint-staged": "^15.4.3",
     "matchmedia-polyfill": "^0.3.2",
     "postcss": "^8.4.49",
     "postcss-cli": "^11.0.0",
-    "prettier": "^3.4.2",
+    "prettier": "^3.5.2",
     "storybook": "^8.4.3",
     "tailwindcss": "^3",
+    "ts-node": "^10.9.2",
     "typescript": "^5"
   }
 }

package/dist/components/Color/BackgroundColor/Color.d.ts

@@ -1,2 +0,0 @@
-import { ColorProps } from "@/types/interface";
-export declare const Color: ({ label, color }: ColorProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Color/BackgroundColor/Color.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Color = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Color = function (_a) {
-    var label = _a.label, color = _a.color;
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h2", { className: "lu-font-size-large lu-font-weight-bold lu-mb-200", children: label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-10 h-10 rounded ".concat(color), "data-testid": "color-box" }), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("p", { className: "lu-font-weight-semibold", children: color === null || color === void 0 ? void 0 : color.replace("bg-", "") }), (0, jsx_runtime_1.jsx)("code", { className: "lu-font-size-small", children: color })] })] })] }));
-};
-exports.Color = Color;

package/dist/components/Color/BackgroundColor/Color.stories.d.ts

@@ -1,10 +0,0 @@
-import { Meta } from "@storybook/react";
-import { ColorProps } from "@/types/interface";
-declare const _default: Meta;
-export default _default;
-export declare const Primary: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Gray: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Success: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Warning: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Danger: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;
-export declare const Info: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ColorProps>;

package/dist/components/Color/BackgroundColor/Color.stories.js

@@ -1,103 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Info = exports.Danger = exports.Warning = exports.Success = exports.Gray = exports.Primary = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var Color_1 = require("../../../components/Color/BackgroundColor/Color");
-var _1 = require(".");
-exports.default = {
-    title: "Components/Color/BackgroundColor",
-    component: Color_1.Color,
-    argTypes: {
-        label: { control: "text" },
-    },
-};
-var Template = function (args) { return (0, jsx_runtime_1.jsx)(Color_1.Color, __assign({}, args)); };
-exports.Primary = Template.bind({});
-exports.Primary.args = {
-    label: "Primary",
-    color: "lu-bg-primary-500", // Default color
-};
-exports.Primary.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(_1.customBackgroundColor)
-            .filter(function (key) { return key.startsWith(".lu-bg-primary-"); })
-            .map(function (key) { return key.slice(1); }),
-    },
-};
-exports.Gray = Template.bind({});
-exports.Gray.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(_1.customBackgroundColor)
-            .filter(function (key) { return key.startsWith(".lu-bg-neutral-"); })
-            .map(function (key) { return key.slice(1); }),
-    },
-};
-exports.Gray.args = {
-    label: "Gray",
-    color: "lu-bg-neutral-500",
-};
-exports.Success = Template.bind({});
-exports.Success.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(_1.customBackgroundColor)
-            .filter(function (key) { return key.startsWith(".lu-bg-success-"); })
-            .map(function (key) { return key.slice(1); }),
-    },
-};
-exports.Success.args = {
-    label: "Success",
-    color: "lu-bg-success-500",
-};
-exports.Warning = Template.bind({});
-exports.Warning.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(_1.customBackgroundColor)
-            .filter(function (key) { return key.startsWith(".lu-bg-warning-"); })
-            .map(function (key) { return key.slice(1); }),
-    },
-};
-exports.Warning.args = {
-    label: "Warning",
-    color: "lu-bg-warning-500",
-};
-exports.Danger = Template.bind({});
-exports.Danger.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(_1.customBackgroundColor)
-            .filter(function (key) { return key.startsWith(".lu-bg-danger-"); })
-            .map(function (key) { return key.slice(1); }),
-    },
-};
-exports.Danger.args = {
-    label: "Danger",
-    color: "lu-bg-danger-500",
-};
-exports.Info = Template.bind({});
-exports.Info.argTypes = {
-    color: {
-        control: { type: "select" },
-        options: Object.keys(_1.customBackgroundColor)
-            .filter(function (key) { return key.startsWith(".lu-bg-info-"); })
-            .map(function (key) { return key.slice(1); }),
-    },
-};
-exports.Info.args = {
-    label: "Info",
-    color: "lu-bg-info-500",
-};

package/dist/components/Color/TextColor.d.ts

@@ -1,3 +0,0 @@
-export declare const TextColor: ({ color, }: {
-    color?: string;
-}) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Color/TextColor.js

@@ -1,9 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextColor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var TextColor = function (_a) {
-    var _b = _a.color, color = _b === void 0 ? "lu-text-default" : _b;
-    return (0, jsx_runtime_1.jsxs)("div", { className: "".concat(color), children: [".", color] });
-};
-exports.TextColor = TextColor;

package/dist/components/Color/TextColor.stories.d.ts

@@ -1,6 +0,0 @@
-import { Meta } from "@storybook/react";
-declare const _default: Meta;
-export default _default;
-export declare const textColor: import("@storybook/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, {
-    color: string;
-}>;

package/dist/components/Color/TextColor.stories.js

@@ -1,35 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.textColor = void 0;
-var jsx_runtime_1 = require("react/jsx-runtime");
-var TextColor_1 = require("./TextColor");
-var utils_1 = require("../../utils");
-exports.default = {
-    title: "Components/Color",
-    component: TextColor_1.TextColor,
-};
-var Template = function (args) { return (0, jsx_runtime_1.jsx)(TextColor_1.TextColor, __assign({}, args)); };
-exports.textColor = Template.bind({});
-exports.textColor.args = {
-    color: "lu-text-default", // Default color
-};
-exports.textColor.argTypes = {
-    color: {
-        control: {
-            type: "select",
-            labels: Object.fromEntries(utils_1.textColorList.map(function (color) { return [color.key, color.label]; })),
-        },
-        options: utils_1.textColorList.map(function (color) { return color.key; }),
-    },
-};

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

@@ -1,4 +0,0 @@
-export declare enum OrientationEnum {
-    portrait = "Portrait",
-    landscape = "Landscape"
-}

package/dist/components/Images/index.js

@@ -1,6 +0,0 @@
-export var OrientationEnum;
-(function (OrientationEnum) {
-    OrientationEnum["portrait"] = "Portrait";
-    OrientationEnum["landscape"] = "Landscape";
-})(OrientationEnum || (OrientationEnum = {}));
-;

package/dist/utils/enum.d.ts

@@ -1,25 +0,0 @@
-export declare const contentTypeEnum: {
-    none: string;
-    text_with_icon: string;
-    icon_only: string;
-};
-export declare const buttonTypeEnum: {
-    fill: string;
-    outline: string;
-};
-export declare const orientationEnum: {
-    portrait: string;
-    landscape: string;
-};
-export declare const cardLayoutEnum: {
-    horizontal: string;
-    vertical: string;
-};
-export declare const sectionType: {
-    multiplePostsTheme: string;
-    singlePostTheme: string;
-    postByCategoriesTheme: string;
-    contactsProfileTheme: string;
-    galleryTheme: string;
-    albumTheme: string;
-};

package/dist/utils/enum.js

@@ -1,25 +0,0 @@
-export var contentTypeEnum = {
-    none: "None",
-    text_with_icon: "Text with Icon",
-    icon_only: "Icon Only",
-};
-export var buttonTypeEnum = {
-    fill: "Fill",
-    outline: "Outline",
-};
-export var orientationEnum = {
-    portrait: "Portrait",
-    landscape: "Landscape",
-};
-export var cardLayoutEnum = {
-    horizontal: "Horizontal",
-    vertical: "Vertical",
-};
-export var sectionType = {
-    multiplePostsTheme: "Multiple Posts",
-    singlePostTheme: "Single Post",
-    postByCategoriesTheme: "Post By Categories",
-    contactsProfileTheme: "Contacts Profile",
-    galleryTheme: "Gallery",
-    albumTheme: "Album",
-};