@antscorp/antsomi-ui 1.3.5-beta.987 → 1.3.5-beta.988

package/es/components/molecules/CodeStructure/CodeStructure.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CodeStructureData } from './type';
+interface CodeStructureProps {
+    initialData: CodeStructureData;
+    onChange: (data: CodeStructureData) => void;
+}
+export declare const CodeStructure: React.FC<CodeStructureProps>;
+export {};

package/es/components/molecules/CodeStructure/CodeStructure.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// Libraries
+import { useCallback, useEffect } from 'react';
+import { Form, InputNumber, Radio, Select, Typography, Flex, Input, Row, Col } from 'antd';
+import { useImmer } from 'use-immer';
+import { translate, translations } from '@antscorp/antsomi-locales';
+// Utils
+import { calculateTotalCodes, generateCodeWithPrefixAndSuffix, generateRandomCodeWithConfig, } from './utils';
+// Types
+import { RefillUnitType } from './type';
+// Constants
+import { CAPITALIZATION_OPTIONS, CHARACTER_ORDER_OPTIONS, CHARACTER_TYPE_OPTIONS, REFILL_UNIT_OPTIONS, SEPARATOR_OPTIONS, } from './constants';
+import { CodeStructureWrapper } from './styled';
+const { Title } = Typography;
+export const CodeStructure = ({ initialData, onChange }) => {
+    const [form] = Form.useForm();
+    const [state, setState] = useImmer({
+        codeSample: '',
+        maxCodes: 0,
+        refillThreshold: 1,
+        refillInterval: 'auto',
+        refillUnit: 'codes',
+        codeWithPrefixAndSuffix: '',
+    });
+    const { codeSample, maxCodes, refillThreshold, refillUnit } = state;
+    const setCodeSample = (value) => {
+        setState(draft => {
+            draft.codeSample = value;
+        });
+    };
+    const setMaxCodes = (value) => {
+        setState(draft => {
+            draft.maxCodes = value;
+        });
+    };
+    /** ***********  ✨ Codeium Command ⭐  ************ */
+    /**
+     * Update the code sample with prefix and suffix
+     * @param {string} value The new value of code sample with prefix and suffix
+     */
+    /** ****  99b15217-c7a7-4093-8b8f-ea4b4271af48  ****** */
+    const setCodeWithPrefixAndSuffix = (value) => {
+        setState(draft => {
+            draft.codeWithPrefixAndSuffix = value;
+        });
+    };
+    const setRefillThreshold = useCallback((value) => {
+        setState(draft => {
+            draft.refillThreshold = value;
+        });
+    }, [setState]);
+    const setRefillUnit = useCallback((value) => {
+        setState(draft => {
+            draft.refillUnit = value;
+        });
+    }, [setState]);
+    const updateFormValues = (data) => {
+        const allValues = form.getFieldsValue();
+        form.setFieldsValue(allValues);
+        const dataOnChange = {
+            ...allValues,
+            ...(allValues.refillInterval === 'auto' ? { refillThreshold, refillUnit } : {}),
+        };
+        onChange(dataOnChange);
+        const isRelevantChangeCodeKey = Object.keys(data).some(key => key !== 'quantity' &&
+            key !== 'suffix' &&
+            key !== 'prefix' &&
+            key !== 'refillInterval' &&
+            key !== 'separator');
+        const isChangePrefix = Object.keys(data).some(key => key === 'suffix' || key === 'prefix' || key === 'separator');
+        if (isRelevantChangeCodeKey) {
+            setCodeSample(generateRandomCodeWithConfig(form.getFieldsValue()));
+        }
+        if (isChangePrefix) {
+            setCodeWithPrefixAndSuffix(generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')));
+        }
+    };
+    const computeTotalCodes = useCallback(() => {
+        const numLetters = form.getFieldValue('alphabetLetters');
+        const numDigits = form.getFieldValue('digitalNumbers');
+        const type = form.getFieldValue('characterType');
+        if (numLetters && numDigits && type) {
+            const total = calculateTotalCodes(numLetters, numDigits, type);
+            setMaxCodes(total);
+        }
+    }, [form]);
+    // Effects
+    useEffect(() => {
+        setRefillThreshold(initialData.refillThreshold || 1);
+    }, [initialData.refillThreshold, setRefillThreshold]);
+    useEffect(() => {
+        setRefillUnit(initialData.refillUnit || RefillUnitType.CODES);
+    }, [initialData.refillUnit, setRefillUnit]);
+    useEffect(() => {
+        computeTotalCodes();
+    }, [
+        form.getFieldValue('alphabetLetters'),
+        form.getFieldValue('digitalNumbers'),
+        form.getFieldValue('characterType'),
+    ]);
+    useEffect(() => {
+        setCodeSample(generateRandomCodeWithConfig(form.getFieldsValue()));
+        setMaxCodes(calculateTotalCodes(form.getFieldValue('alphabetLetters'), form.getFieldValue('digitalNumbers'), form.getFieldValue('characterType')));
+    }, []);
+    useEffect(() => {
+        form.setFieldsValue(initialData);
+    }, [initialData, form]);
+    return (_jsx(CodeStructureWrapper, { children: _jsxs(Form, { form: form, layout: "horizontal", labelCol: { span: 8 }, colon: false, wrapperCol: { span: 16 }, labelAlign: "left", initialValues: initialData, onValuesChange: updateFormValues, children: [_jsx(Title, { level: 2, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE, 'Code Structure') }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_PREFIX, 'Prefix'), name: "prefix", children: _jsx(Input, { placeholder: "" }) }), _jsxs(Row, { children: [_jsx(Col, { span: 8, offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_INFIX, 'Infix') }), _jsx(Col, { span: 16, offset: 0, children: _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 0, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE, 'Character Type') }) }), _jsx(Form.Item, { name: "characterType", children: _jsx(Radio.Group, { options: CHARACTER_TYPE_OPTIONS }) })] }) })] }), _jsx(Row, { children: _jsx(Col, { offset: 8, children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "digitalNumbers", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG_NO, 'digital numbers') })] }) }) }), _jsx(Row, { children: _jsx(Col, { offset: 8, children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "alphabetLetters", children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx("div", { style: { marginBottom: '15px' }, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET_NO, 'alphabet letters') })] }) }) }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 8, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP, 'Letters Capitalization') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "capitalization", children: _jsx(Radio.Group, { options: CAPITALIZATION_OPTIONS }) })] }), _jsxs(Flex, { vertical: true, gap: 10, children: [_jsx(Row, { children: _jsx(Col, { offset: 8, children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER, 'Character Order') }) }), _jsx(Form.Item, { label: _jsx("span", { children: "\u00A0" }), name: "characterOrder", children: _jsx(Radio.Group, { options: CHARACTER_ORDER_OPTIONS }) })] }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SUFFIX, 'Suffix'), name: "suffix", children: _jsx(Input, { placeholder: "" }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '50%' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 8, children: _jsxs(Flex, { justify: "start", align: "center", gap: 5, children: [translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_QUANTITY, 'Quantity'), ' ', _jsx("span", { style: { color: 'red' }, children: "*" })] }) }), _jsx(Col, { children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Form.Item, { name: "quantity", children: _jsx(InputNumber, { min: 1, max: 10000 }) }), _jsx("div", { style: { marginBottom: '15px' }, children: "code(s) per time" })] }) })] }), _jsxs(Form.Item, { label: translate(translations._ACT_PREVIEW, 'Preview'), children: ["Maximum of ", _jsx("b", { children: maxCodes.toLocaleString() }), " codes (sample", ' ', generateCodeWithPrefixAndSuffix(codeSample, form.getFieldValue('prefix'), form.getFieldValue('suffix'), form.getFieldValue('separator')), ") to be generated"] }), _jsx(Title, { level: 4, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, onChange: e => {
+                            e.preventDefault();
+                        }, children: [_jsx(Radio, { value: "manual", children: "Manual refill only" }), _jsx(Radio, { value: "auto", children: _jsxs(Flex, { gap: 10, align: "center", children: [_jsx(Typography.Text, { style: { whiteSpace: 'nowrap' }, children: "Add codes when less than" }), _jsx(InputNumber, { min: 1, max: 10000, style: { width: '63px' }, value: refillThreshold, onChange: value => setRefillThreshold(value || 1) }), _jsx(Select, { onClick: e => e.preventDefault(), value: refillUnit, onChange: setRefillUnit, options: REFILL_UNIT_OPTIONS, style: { width: '63px' } }), "remaining"] }) })] }) })] }) }));
+};

package/es/components/molecules/CodeStructure/constants.d.ts

@@ -0,0 +1,21 @@
+import { CapitalizationType, CharacterOrderType, CharacterType, RefillUnitType, SeparatorType } from './type';
+export declare const SEPARATOR_OPTIONS: {
+    value: SeparatorType;
+    label: string;
+}[];
+export declare const CHARACTER_TYPE_OPTIONS: {
+    value: CharacterType;
+    label: string;
+}[];
+export declare const CAPITALIZATION_OPTIONS: {
+    value: CapitalizationType;
+    label: string;
+}[];
+export declare const CHARACTER_ORDER_OPTIONS: {
+    value: CharacterOrderType;
+    label: string;
+}[];
+export declare const REFILL_UNIT_OPTIONS: {
+    value: RefillUnitType;
+    label: string;
+}[];

package/es/components/molecules/CodeStructure/constants.js

@@ -0,0 +1,60 @@
+import { CapitalizationType, CharacterOrderType, CharacterType, RefillUnitType, SeparatorType, } from './type';
+import { translate, translations } from '@antscorp/antsomi-locales';
+export const SEPARATOR_OPTIONS = [
+    { value: SeparatorType.HYPHEN, label: 'Hyphen (-)' },
+    { value: SeparatorType.UNDERSCORE, label: 'Underscore (_)' },
+    { value: SeparatorType.NONE, label: 'None' },
+    { value: SeparatorType.DOT, label: 'Dot (.)' },
+];
+export const CHARACTER_TYPE_OPTIONS = [
+    {
+        value: CharacterType.DIGITS,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG, 'Digits only'),
+    },
+    {
+        value: CharacterType.LETTERS,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_LET, 'Letters only'),
+    },
+    {
+        value: CharacterType.DIGIT_AND_LETTERS,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_BOTH, 'Digit & letters'),
+    },
+];
+export const CAPITALIZATION_OPTIONS = [
+    {
+        value: CapitalizationType.UPPERCASE,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_UP, 'Uppercase'),
+    },
+    {
+        value: CapitalizationType.LOWERCASE,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_LOW, 'lowercase'),
+    },
+    {
+        value: CapitalizationType.TITLE_CASE,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_TITL, 'Title case'),
+    },
+];
+export const CHARACTER_ORDER_OPTIONS = [
+    {
+        value: CharacterOrderType.RANDOM,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_RANDOM, 'Random'),
+    },
+    {
+        value: CharacterOrderType.LETTER_FIRST,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_LET, 'Letter first'),
+    },
+    {
+        value: CharacterOrderType.NUMBER_FIRST,
+        label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_ORDER_NO, 'Number first'),
+    },
+];
+export const REFILL_UNIT_OPTIONS = [
+    {
+        value: RefillUnitType.CODES,
+        label: 'codes',
+    },
+    {
+        value: RefillUnitType.PERCENT,
+        label: '%',
+    },
+];

package/es/components/molecules/CodeStructure/styled.d.ts

@@ -0,0 +1 @@
+export declare const CodeStructureWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

package/es/components/molecules/CodeStructure/styled.js

@@ -0,0 +1,2 @@
+import styled from 'styled-components';
+export const CodeStructureWrapper = styled.div ``;

package/es/components/molecules/CodeStructure/type.d.ts

@@ -0,0 +1,43 @@
+export declare enum CharacterType {
+    DIGITS = "digits",
+    LETTERS = "letters",
+    DIGIT_AND_LETTERS = "digitAndLetters"
+}
+export declare enum CharacterOrderType {
+    RANDOM = "random",
+    LETTER_FIRST = "letterFirst",
+    NUMBER_FIRST = "numberFirst"
+}
+export declare enum CapitalizationType {
+    UPPERCASE = "uppercase",
+    LOWERCASE = "lowercase",
+    TITLE_CASE = "titlecase"
+}
+export declare enum SeparatorType {
+    HYPHEN = "hyphen",
+    UNDERSCORE = "underscore",
+    DOT = "dot",
+    NONE = "none"
+}
+export declare enum RefillType {
+    AUTO = "auto",
+    MANUAL = "manual"
+}
+export declare enum RefillUnitType {
+    CODES = "codes",
+    PERCENT = "percent"
+}
+export interface CodeStructureData {
+    characterType: CharacterType;
+    digitalNumbers: number;
+    alphabetLetters: number;
+    capitalization: CapitalizationType;
+    characterOrder: CharacterOrderType;
+    separator: SeparatorType;
+    quantity: number;
+    suffix: string;
+    refillInterval: RefillType;
+    prefix: string;
+    refillThreshold?: number;
+    refillUnit?: RefillUnitType;
+}

package/es/components/molecules/CodeStructure/type.js

@@ -0,0 +1,35 @@
+export var CharacterType;
+(function (CharacterType) {
+    CharacterType["DIGITS"] = "digits";
+    CharacterType["LETTERS"] = "letters";
+    CharacterType["DIGIT_AND_LETTERS"] = "digitAndLetters";
+})(CharacterType || (CharacterType = {}));
+export var CharacterOrderType;
+(function (CharacterOrderType) {
+    CharacterOrderType["RANDOM"] = "random";
+    CharacterOrderType["LETTER_FIRST"] = "letterFirst";
+    CharacterOrderType["NUMBER_FIRST"] = "numberFirst";
+})(CharacterOrderType || (CharacterOrderType = {}));
+export var CapitalizationType;
+(function (CapitalizationType) {
+    CapitalizationType["UPPERCASE"] = "uppercase";
+    CapitalizationType["LOWERCASE"] = "lowercase";
+    CapitalizationType["TITLE_CASE"] = "titlecase";
+})(CapitalizationType || (CapitalizationType = {}));
+export var SeparatorType;
+(function (SeparatorType) {
+    SeparatorType["HYPHEN"] = "hyphen";
+    SeparatorType["UNDERSCORE"] = "underscore";
+    SeparatorType["DOT"] = "dot";
+    SeparatorType["NONE"] = "none";
+})(SeparatorType || (SeparatorType = {}));
+export var RefillType;
+(function (RefillType) {
+    RefillType["AUTO"] = "auto";
+    RefillType["MANUAL"] = "manual";
+})(RefillType || (RefillType = {}));
+export var RefillUnitType;
+(function (RefillUnitType) {
+    RefillUnitType["CODES"] = "codes";
+    RefillUnitType["PERCENT"] = "percent";
+})(RefillUnitType || (RefillUnitType = {}));

package/es/components/molecules/CodeStructure/utils.d.ts

@@ -0,0 +1,4 @@
+import { CharacterType, CodeStructureData, SeparatorType } from './type';
+export declare const generateRandomCodeWithConfig: ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }: CodeStructureData) => string;
+export declare const generateCodeWithPrefixAndSuffix: (code: string, prefix: string, suffix: string, separator: SeparatorType) => string;
+export declare const calculateTotalCodes: (numberOfLetters: number, numberOfDigits: number, characterType: CharacterType) => number;

package/es/components/molecules/CodeStructure/utils.js

@@ -0,0 +1,63 @@
+import { CapitalizationType, CharacterOrderType, CharacterType, SeparatorType, } from './type';
+export const generateRandomCodeWithConfig = ({ characterType, digitalNumbers, alphabetLetters, capitalization, characterOrder, }) => {
+    const digits = '0123456789';
+    const letters = 'abcdefghijklmnopqrstuvwxyz';
+    let numPart = '';
+    let letterPart = '';
+    if (characterType === CharacterType.DIGITS || characterType === CharacterType.DIGIT_AND_LETTERS) {
+        numPart = Array.from({ length: digitalNumbers }, () => digits[Math.floor(Math.random() * digits.length)]).join('');
+    }
+    if (characterType === CharacterType.LETTERS ||
+        characterType === CharacterType.DIGIT_AND_LETTERS) {
+        letterPart = Array.from({ length: alphabetLetters }, () => letters[Math.floor(Math.random() * letters.length)]).join('');
+    }
+    // Apply capitalization
+    if (capitalization === CapitalizationType.UPPERCASE) {
+        letterPart = letterPart.toUpperCase();
+    }
+    else if (capitalization === CapitalizationType.LOWERCASE) {
+        letterPart = letterPart.toLowerCase();
+    }
+    else if (capitalization === CapitalizationType.TITLE_CASE && letterPart.length > 0) {
+        letterPart = letterPart.charAt(0).toUpperCase() + letterPart.slice(1).toLowerCase();
+    }
+    // Order characters
+    let finalCode = '';
+    if (characterOrder === CharacterOrderType.RANDOM) {
+        finalCode = (numPart + letterPart)
+            .split('')
+            .sort(() => Math.random() - 0.5)
+            .join('');
+    }
+    else if (characterOrder === CharacterOrderType.LETTER_FIRST) {
+        finalCode = letterPart + numPart;
+    }
+    else {
+        finalCode = numPart + letterPart;
+    }
+    return finalCode;
+};
+export const generateCodeWithPrefixAndSuffix = (code, prefix, suffix, separator) => {
+    let finalCode = code;
+    // Apply prefix and suffix
+    if (prefix)
+        finalCode = `${prefix}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${finalCode}`;
+    if (suffix)
+        finalCode = `${finalCode}${separator !== SeparatorType.NONE ? (separator === SeparatorType.HYPHEN ? '-' : separator === SeparatorType.DOT ? '.' : '_') : ''}${suffix}`;
+    return finalCode;
+};
+export const calculateTotalCodes = (numberOfLetters, numberOfDigits, characterType) => {
+    let totalCodes = 0;
+    switch (characterType) {
+        case CharacterType.LETTERS:
+        case CharacterType.DIGITS:
+            totalCodes = 26 ** numberOfLetters * 10 ** numberOfDigits;
+            break;
+        case CharacterType.DIGIT_AND_LETTERS:
+            totalCodes = 26 * 26 ** (numberOfLetters - 1) * 10 ** numberOfDigits;
+            break;
+        default:
+            throw new Error('Invalid character type');
+    }
+    return totalCodes;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.5-beta.987",
+  "version": "1.3.5-beta.988",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",
@@ -61,7 +61,7 @@
     "not op_mini all"
   ],
   "dependencies": {
-    "@antscorp/antsomi-locales": "1.0.34",
+    "@antscorp/antsomi-locales": "1.0.35",
     "@ant-design/cssinjs": "^1.6.2",
     "@antscorp/icons": "0.27.54",
     "@antscorp/image-editor": "1.0.2",