npm - @antscorp/antsomi-ui - Versions diffs - 1.3.2-beta.25 → 1.3.2-beta.26 - Mend

@antscorp/antsomi-ui 1.3.2-beta.25 → 1.3.2-beta.26

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 (8) hide show

package/dist/index.js +1 -1
package/es/components/molecules/GradientSetting/index.d.ts +1 -38
package/es/components/molecules/GradientSetting/index.js +22 -59
package/es/constants/gradientSetting.d.ts +83 -0
package/es/constants/gradientSetting.js +83 -0
package/es/constants/index.d.ts +1 -0
package/es/constants/index.js +1 -0
package/package.json +4 -4

package/es/components/molecules/GradientSetting/index.d.ts CHANGED Viewed

@@ -1,46 +1,9 @@
 import React from 'react';
+import { POSITION } from '@antscorp/antsomi-ui/es/constants';
 interface GradientColor {
     gradientColor: string;
     gradientColorLocation: number;
 }
-declare const POSITION: {
-    readonly LEFT_TOP: {
-        readonly value: "left top";
-        readonly label: string;
-    };
-    readonly LEFT_CENTER: {
-        readonly value: "left center";
-        readonly label: string;
-    };
-    readonly LEFT_BOTTOM: {
-        readonly value: "left bottom";
-        readonly label: string;
-    };
-    readonly RIGHT_TOP: {
-        readonly value: "right top";
-        readonly label: string;
-    };
-    readonly RIGHT_CENTER: {
-        readonly value: "right center";
-        readonly label: string;
-    };
-    readonly RIGHT_BOTTOM: {
-        readonly value: "right bottom";
-        readonly label: string;
-    };
-    readonly CENTER_TOP: {
-        readonly value: "center top";
-        readonly label: string;
-    };
-    readonly CENTER_CENTER: {
-        readonly value: "center center";
-        readonly label: string;
-    };
-    readonly CENTER_BOTTOM: {
-        readonly value: "center bottom";
-        readonly label: string;
-    };
-};
 type PositionValue = (typeof POSITION)[keyof typeof POSITION]['value'];
 interface GradientConfig {
     gradients: GradientColor[];

package/es/components/molecules/GradientSetting/index.js CHANGED Viewed

@@ -1,8 +1,6 @@
 // Libraries
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-// Locales
-import { getTranslateMessage, translations } from '@antscorp/antsomi-ui/es/locales/translations';
 // Components
 import { ColorSetting, Select, SettingWrapper, SliderWithInputNumber, } from '@antscorp/antsomi-ui/es/components/molecules';
 // Utils
@@ -10,54 +8,8 @@ import { Button } from '@antscorp/antsomi-ui/es/components/atoms';
 import Icon from '@antscorp/icons';
 import { mapNumberToOrdinalText } from '@antscorp/antsomi-ui/es/utils';
 import { cloneDeep } from 'lodash';
-const GRADIENT_TYPE = {
-    LINEAR: {
-        value: 'linear-gradient',
-        label: getTranslateMessage(translations.linear),
-    },
-    RADIAL: {
-        value: 'radial-gradient',
-        label: getTranslateMessage(translations.radial),
-    },
-};
-const POSITION = {
-    LEFT_TOP: {
-        value: 'left top',
-        label: getTranslateMessage(translations.leftTop),
-    },
-    LEFT_CENTER: {
-        value: 'left center',
-        label: getTranslateMessage(translations.leftCenter),
-    },
-    LEFT_BOTTOM: {
-        value: 'left bottom',
-        label: getTranslateMessage(translations.leftBottom),
-    },
-    RIGHT_TOP: {
-        value: 'right top',
-        label: getTranslateMessage(translations.rightTop),
-    },
-    RIGHT_CENTER: {
-        value: 'right center',
-        label: getTranslateMessage(translations.rightCenter),
-    },
-    RIGHT_BOTTOM: {
-        value: 'right bottom',
-        label: getTranslateMessage(translations.rightBottom),
-    },
-    CENTER_TOP: {
-        value: 'center top',
-        label: getTranslateMessage(translations.centerTop),
-    },
-    CENTER_CENTER: {
-        value: 'center center',
-        label: getTranslateMessage(translations.centerCenter),
-    },
-    CENTER_BOTTOM: {
-        value: 'center bottom',
-        label: getTranslateMessage(translations.centerBottom),
-    },
-};
+// Constants
+import { GRADIENT_TEXT_LABEL, GRADIENT_TYPE, POSITION } from '@antscorp/antsomi-ui/es/constants';
 const GRADIENT_MIN = 2;
 const GRADIENT_MAX = 5;
 const DEFAULT_GRADIENTS = [
@@ -75,9 +27,9 @@ export const GradientSetting = ({ onChange }) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [JSON.stringify(gradients), gradientType, radialPosition, linearAngle]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.gradientStyle) },
+        React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: GRADIENT_TEXT_LABEL.gradientStyle },
             React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(GRADIENT_TYPE), value: gradientType, onChange: value => setGradientType(value) })),
-        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "ants-mb-[15px]", label: t(translations.angle), min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: t(translations.position) },
+        gradientType === GRADIENT_TYPE.LINEAR.value ? (React.createElement(SliderWithInputNumber, { className: "ants-mb-[15px]", label: GRADIENT_TEXT_LABEL.angle, min: 0, max: 360, value: linearAngle, onAfterChange: value => setLinearAngle(value) })) : (React.createElement(SettingWrapper, { className: "ants-mb-[15px]", label: GRADIENT_TEXT_LABEL.position },
             React.createElement(Select, { className: "ants-w-[112px]", options: Object.values(POSITION), value: radialPosition, onChange: value => setRadialPosition(value) }))),
         Array.isArray(gradients) && gradients.length
             ? gradients.map((gradient, index) => {
@@ -85,9 +37,12 @@ export const GradientSetting = ({ onChange }) => {
                 return (React.createElement("div", { className: "ants-flex ants-gap-x-2 ants-mb-[15px]", key: index },
                     React.createElement("div", { className: "ants-grid md:ants-grid-cols-5 ants-grid-cols-1 ants-gap-y-5" },
                         React.createElement("div", { className: "ants-col-span-2" },
-                            React.createElement(ColorSetting, { labelClassName: "!ants-text-cus-base", label: t(translations.gradientColor, {
-                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                                }), color: gradientColor, positionInput: "right", onChange: color => {
+                            React.createElement(ColorSetting, { labelClassName: "!ants-text-cus-base",
+                                // label={t(translations.gradientColor, {
+                                //   name: translations?.ordinalText?.first,
+                                //   // name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                // })}
+                                label: GRADIENT_TEXT_LABEL.gradientColor.replace('{{name}}', GRADIENT_TEXT_LABEL.ordinalText[mapNumberToOrdinalText(index + 1)]), color: gradientColor, positionInput: "right", onChange: color => {
                                     setGradients(prev => {
                                         const clonePrev = cloneDeep(prev);
                                         clonePrev[index].gradientColor = color;
@@ -95,9 +50,17 @@ export const GradientSetting = ({ onChange }) => {
                                     });
                                 } })),
                         React.createElement("div", { className: "ants-col-span-3" },
-                            React.createElement(SliderWithInputNumber, { label: t(translations.gradientLocation, {
-                                    name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
-                                }), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
+                            React.createElement(SliderWithInputNumber
+                            // label={t(translations.gradientLocation, {
+                            //   name: t(translations.ordinalText?.first),
+                            //   // name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                            // })}
+                            , {
+                                // label={t(translations.gradientLocation, {
+                                //   name: t(translations.ordinalText?.first),
+                                //   // name: t(translations.ordinalText[mapNumberToOrdinalText(index + 1)]),
+                                // })}
+                                label: GRADIENT_TEXT_LABEL.gradientLocation.replace('{{name}}', GRADIENT_TEXT_LABEL.ordinalText[mapNumberToOrdinalText(index + 1)]), min: 0, max: 100, value: gradientColorLocation, onAfterChange: color => {
                                     setGradients(prev => {
                                         const clonePrev = cloneDeep(prev);
                                         clonePrev[index].gradientColorLocation = color;
@@ -118,5 +81,5 @@ export const GradientSetting = ({ onChange }) => {
                 });
             } },
             "+ ",
-            t(translations.addColor)))));
+            GRADIENT_TEXT_LABEL.addColor))));
 };

package/es/constants/gradientSetting.d.ts ADDED Viewed

@@ -0,0 +1,83 @@
+export declare const GRADIENT_TEXT_LABEL: {
+    linear: string;
+    radial: string;
+    gradientStyle: string;
+    angle: string;
+    gradientColor: string;
+    gradientLocation: string;
+    firstColor: string;
+    secondColor: string;
+    firstColorLocation: string;
+    secondColorLocation: string;
+    leftTop: string;
+    leftCenter: string;
+    leftBottom: string;
+    rightTop: string;
+    rightCenter: string;
+    rightBottom: string;
+    centerTop: string;
+    centerCenter: string;
+    centerBottom: string;
+    position: string;
+    addColor: string;
+    ordinalText: {
+        first: string;
+        second: string;
+        third: string;
+        fourth: string;
+        fifth: string;
+        sixth: string;
+        seventh: string;
+        eighth: string;
+        ninth: string;
+        tenth: string;
+    };
+};
+export declare const GRADIENT_TYPE: {
+    LINEAR: {
+        value: string;
+        label: string;
+    };
+    RADIAL: {
+        value: string;
+        label: string;
+    };
+};
+export declare const POSITION: {
+    readonly LEFT_TOP: {
+        readonly value: "left top";
+        readonly label: string;
+    };
+    readonly LEFT_CENTER: {
+        readonly value: "left center";
+        readonly label: string;
+    };
+    readonly LEFT_BOTTOM: {
+        readonly value: "left bottom";
+        readonly label: string;
+    };
+    readonly RIGHT_TOP: {
+        readonly value: "right top";
+        readonly label: string;
+    };
+    readonly RIGHT_CENTER: {
+        readonly value: "right center";
+        readonly label: string;
+    };
+    readonly RIGHT_BOTTOM: {
+        readonly value: "right bottom";
+        readonly label: string;
+    };
+    readonly CENTER_TOP: {
+        readonly value: "center top";
+        readonly label: string;
+    };
+    readonly CENTER_CENTER: {
+        readonly value: "center center";
+        readonly label: string;
+    };
+    readonly CENTER_BOTTOM: {
+        readonly value: "center bottom";
+        readonly label: string;
+    };
+};

package/es/constants/gradientSetting.js ADDED Viewed

@@ -0,0 +1,83 @@
+export const GRADIENT_TEXT_LABEL = {
+    linear: 'Linear',
+    radial: 'Radial',
+    gradientStyle: 'Gradient Style',
+    angle: 'Angle',
+    gradientColor: '{{name}} Color',
+    gradientLocation: '{{name}} Color Location',
+    firstColor: 'First Color',
+    secondColor: 'Second Color',
+    firstColorLocation: 'First Color Location',
+    secondColorLocation: 'Second Color Location',
+    leftTop: 'Left Top',
+    leftCenter: 'Left Center',
+    leftBottom: 'Left Bottom',
+    rightTop: 'Right Top',
+    rightCenter: 'Right Center',
+    rightBottom: 'Right Bottom',
+    centerTop: 'Center Top',
+    centerCenter: 'Center Center',
+    centerBottom: 'Center Bottom',
+    position: 'Position',
+    addColor: 'Add color',
+    ordinalText: {
+        first: 'First',
+        second: 'Second',
+        third: 'Third',
+        fourth: 'Fourth',
+        fifth: 'Fifth',
+        sixth: 'Sixth',
+        seventh: 'Seventh',
+        eighth: 'Eighth',
+        ninth: 'Ninth',
+        tenth: 'Tenth',
+    },
+};
+export const GRADIENT_TYPE = {
+    LINEAR: {
+        value: 'linear-gradient',
+        label: GRADIENT_TEXT_LABEL.linear,
+    },
+    RADIAL: {
+        value: 'radial-gradient',
+        label: GRADIENT_TEXT_LABEL.radial,
+    },
+};
+export const POSITION = {
+    LEFT_TOP: {
+        value: 'left top',
+        label: GRADIENT_TEXT_LABEL.leftTop,
+    },
+    LEFT_CENTER: {
+        value: 'left center',
+        label: GRADIENT_TEXT_LABEL.leftCenter,
+    },
+    LEFT_BOTTOM: {
+        value: 'left bottom',
+        label: GRADIENT_TEXT_LABEL.leftBottom,
+    },
+    RIGHT_TOP: {
+        value: 'right top',
+        label: GRADIENT_TEXT_LABEL.rightTop,
+    },
+    RIGHT_CENTER: {
+        value: 'right center',
+        label: GRADIENT_TEXT_LABEL.rightCenter,
+    },
+    RIGHT_BOTTOM: {
+        value: 'right bottom',
+        label: GRADIENT_TEXT_LABEL.rightBottom,
+    },
+    CENTER_TOP: {
+        value: 'center top',
+        label: GRADIENT_TEXT_LABEL.centerTop,
+    },
+    CENTER_CENTER: {
+        value: 'center center',
+        label: GRADIENT_TEXT_LABEL.centerCenter,
+    },
+    CENTER_BOTTOM: {
+        value: 'center bottom',
+        label: GRADIENT_TEXT_LABEL.centerBottom,
+    },
+};

package/es/constants/index.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
 export { THEME } from './theme';
 export * from './storybook';
+export * from './gradientSetting';

package/es/constants/index.js CHANGED Viewed

@@ -1,2 +1,3 @@
 export { THEME } from './theme';
 export * from './storybook';
+export * from './gradientSetting';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.2-beta.25",
+  "version": "1.3.2-beta.26",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -73,8 +73,6 @@
     "highlight.js": "^11.8.0",
     "html-to-image": "^1.11.11",
     "html2canvas": "^1.4.1",
-    "i18next": "^23.7.11",
-    "i18next-browser-languagedetector": "^7.2.0",
     "lodash": "^4.17.21",
     "moment": "2.29.2",
     "qs": "6.10.3",
@@ -147,6 +145,8 @@
     "eslint-plugin-storybook": "^0.6.11",
     "file-loader": "^6.2.0",
     "husky": "^8.0.3",
+    "i18next": "21.6.16",
+    "i18next-browser-languagedetector": "6.1.2",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "lint-staged": "^13.2.0",
@@ -157,7 +157,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-fast-compare": "^3.2.1",
-    "react-i18next": "^12.2.0",
+    "react-i18next": "11.16.7",
     "sass": "^1.60.0",
     "sass-loader": "^13.2.2",
     "style-loader": "^3.3.2",