@antscorp/antsomi-ui 1.3.6-beta.4 → 1.3.6-beta.5

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

@@ -7,5 +7,26 @@ interface CodeStructureProps {
         isError: boolean;
     }) => void;
 }
+/**
+ * Component to configure the code structure for a pool rule.
+ *
+ * The component contains a form with fields for:
+ * - Prefix
+ * - Infix (character type, number of digits, number of letters, capitalization, character order)
+ * - Suffix
+ * - Separator
+ * - Quantity (number of codes per time)
+ * - Refill interval (manual or automatic)
+ * - Refill threshold (number of codes remaining)
+ * - Refill unit (codes or percent)
+ *
+ * The form also displays a preview of the generated code sample.
+ *
+ * The component calls the `onChange` callback with the updated form values and an `isError` flag
+ * indicating whether the form is valid or not.
+ *
+ * @param {CodeStructureProps} props The component props.
+ * @returns {React.ReactElement} The rendered component.
+ */
 export declare const CodeStructure: React.FC<CodeStructureProps>;
 export {};

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

@@ -4,17 +4,39 @@ import { 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';
+import { isEmpty } from 'lodash';
 // Utils
 import { calculateTotalCodes, generateCodeWithPrefixAndSuffix, generateRandomCodeWithConfig, } from './utils';
 // Types
 import { CapitalizationType, CharacterOrderType, CharacterType, RefillType, RefillUnitType, SeparatorType, } from './type';
 // Constants
 import { CAPITALIZATION_OPTIONS, CHARACTER_ORDER_OPTIONS, CHARACTER_TYPE_OPTIONS, REFILL_UNIT_OPTIONS, SEPARATOR_OPTIONS, } from './constants';
-import { CodeStructureWrapper } from './styled';
+import { BlockAbsolute, CodeStructureWrapper } from './styled';
 import { useDebouncedCallbackV2 } from '@antscorp/antsomi-ui/es/hooks';
 const { Title } = Typography;
+/**
+ * Component to configure the code structure for a pool rule.
+ *
+ * The component contains a form with fields for:
+ * - Prefix
+ * - Infix (character type, number of digits, number of letters, capitalization, character order)
+ * - Suffix
+ * - Separator
+ * - Quantity (number of codes per time)
+ * - Refill interval (manual or automatic)
+ * - Refill threshold (number of codes remaining)
+ * - Refill unit (codes or percent)
+ *
+ * The form also displays a preview of the generated code sample.
+ *
+ * The component calls the `onChange` callback with the updated form values and an `isError` flag
+ * indicating whether the form is valid or not.
+ *
+ * @param {CodeStructureProps} props The component props.
+ * @returns {React.ReactElement} The rendered component.
+ */
 export const CodeStructure = ({ initialData, onChange }) => {
-    const { characterType = CharacterType.DIGIT_AND_LETTERS, digitalNumbers = 2, alphabetLetters = 3, capitalization = CapitalizationType.UPPERCASE, characterOrder = CharacterOrderType.RANDOM, separator = SeparatorType.UNDERSCORE, quantity = 1, suffix = '', refillInterval = RefillType.MANUAL, prefix = '', refillThreshold = 10, refillUnit = RefillUnitType.CODES, } = initialData;
+    const { characterType = CharacterType.DIGIT_AND_LETTERS, digitalNumbers = 2, alphabetLetters = 3, capitalization = CapitalizationType.UPPERCASE, characterOrder = CharacterOrderType.RANDOM, separator = SeparatorType.UNDERSCORE, quantity = 50, suffix = '', refillInterval = RefillType.MANUAL, prefix = '', refillThreshold = 10, refillUnit = RefillUnitType.CODES, } = initialData;
     const [form] = Form.useForm();
     const [state, setState] = useImmer({
         codeSample: '',
@@ -42,7 +64,7 @@ export const CodeStructure = ({ initialData, onChange }) => {
             draft.codeWithPrefixAndSuffix = value;
         });
     };
-    const debouncedOnChange = useDebouncedCallbackV2(onChange, 350);
+    const debouncedOnChange = useDebouncedCallbackV2(onChange, 700);
     const updateFormValues = async (fieldKeyChange, isError) => {
         // Get all values from the form
         const allValues = form.getFieldsValue();
@@ -110,28 +132,32 @@ export const CodeStructure = ({ initialData, onChange }) => {
                 updateFormValues(fieldKeyChange, isValidate);
             }, children: [_jsx(Title, { level: 5, 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: "", style: {
                             maxWidth: 465,
-                        } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, 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: 6, 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: 6, 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: 6, 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: 6, 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: "", style: {
+                        } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, 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: 6, children: _jsxs(Flex, { gap: 10, align: "center", style: {
+                                position: 'relative',
+                            }, children: [_jsx(Form.Item, { name: "digitalNumbers", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx(BlockAbsolute, { children: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CHAC_TYPE_DIG_NO, 'digital numbers') })] }) }) }), _jsx(Row, { children: _jsx(Col, { offset: 6, children: _jsxs(Flex, { gap: 10, align: "center", style: {
+                                position: 'relative',
+                            }, children: [_jsx(Form.Item, { name: "alphabetLetters", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 50, style: { width: '40px' } }) }), _jsx(BlockAbsolute, { 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: 6, 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: 6, 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: "", style: {
                             maxWidth: 465,
-                        } }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '180px' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, 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, { required: true, name: "quantity", rules: [{ required: true }], 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: 5, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, 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(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ getFieldValue }) => {
+                        } }) }), _jsx(Form.Item, { label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_SEPARATOR, 'Separator'), name: "separator", children: _jsx(Select, { options: SEPARATOR_OPTIONS, style: { width: '180px' } }) }), _jsxs(Row, { children: [_jsx(Col, { span: 6, 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", style: { position: 'relative' }, children: [_jsx(Form.Item, { required: true, name: "quantity", rules: [{ required: true, message: `This field can't be empty` }], children: _jsx(InputNumber, { min: 1, max: 10000 }) }), _jsx(BlockAbsolute, { left: 100, 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: 5, children: "Code Refill" }), _jsx(Form.Item, { label: "Refill Interval", name: "refillInterval", children: _jsxs(Radio.Group, { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, onChange: e => {
+                            if (e.target.value === 'manual' && isEmpty(form.getFieldValue('refillThreshold'))) {
+                                form.setFieldsValue({ refillThreshold: 10 });
+                                form.validateFields(['refillThreshold']);
+                            }
+                        }, 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(Form.Item, { noStyle: true, shouldUpdate: true, children: ({ getFieldValue }) => {
                                                 const refillUnit = getFieldValue('refillUnit');
                                                 return (_jsx(Form.Item, { name: "refillThreshold", noStyle: true, rules: [
                                                         { required: true, message: '' },
                                                         {
                                                             validator: (_, value) => {
                                                                 if (refillUnit === RefillUnitType.PERCENT) {
-                                                                    if (value < 1 || value > 100) {
-                                                                        return Promise.reject(new Error(''));
-                                                                    }
-                                                                }
-                                                                else if (refillUnit === RefillUnitType.CODES) {
-                                                                    if (value < 0) {
-                                                                        return Promise.reject(new Error(''));
+                                                                    if (value > 100) {
+                                                                        form.setFieldsValue({ refillThreshold: 100 });
                                                                     }
                                                                 }
                                                                 return Promise.resolve();
                                                             },
                                                         },
-                                                    ], children: _jsx(InputNumber, { min: refillUnit === RefillUnitType.CODES ? 0 : 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' } }) }));
+                                                    ], children: _jsx(InputNumber, { min: 1, max: refillUnit === RefillUnitType.PERCENT ? 100 : undefined, style: { width: '63px' } }) }));
                                             } }), _jsx(Form.Item, { noStyle: true, shouldUpdate: true, children: () => (_jsx(Form.Item, { name: "refillUnit", noStyle: true, rules: [
                                                     { required: true, message: '' },
                                                     {

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

@@ -29,10 +29,10 @@ export const CAPITALIZATION_OPTIONS = [
         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'),
-    },
+    // {
+    //   value: CapitalizationType.TITLE_CASE,
+    //   label: translate(translations._POOL_RULE_SETTING_CODE_STRUCTURE_CAP_TITL, 'Title case'),
+    // },
 ];
 export const CHARACTER_ORDER_OPTIONS = [
     {

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

@@ -1 +1,4 @@
 export declare const CodeStructureWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BlockAbsolute: import("styled-components").StyledComponent<"div", any, {
+    left?: number | undefined;
+}, never>;

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

@@ -1,2 +1,8 @@
 import styled from 'styled-components';
 export const CodeStructureWrapper = styled.div ``;
+export const BlockAbsolute = styled.div `
+  position: absolute;
+  left: ${p => p.left || 50}px;
+  white-space: nowrap;
+  margin-bottom: 15px;
+`;

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

@@ -10,8 +10,7 @@ export declare enum CharacterOrderType {
 }
 export declare enum CapitalizationType {
     UPPERCASE = "upper",
-    LOWERCASE = "lower",
-    TITLE_CASE = "title"
+    LOWERCASE = "lower"
 }
 export declare enum SeparatorType {
     HYPHEN = "hyphen",

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

@@ -14,7 +14,6 @@ export var CapitalizationType;
 (function (CapitalizationType) {
     CapitalizationType["UPPERCASE"] = "upper";
     CapitalizationType["LOWERCASE"] = "lower";
-    CapitalizationType["TITLE_CASE"] = "title";
 })(CapitalizationType || (CapitalizationType = {}));
 export var SeparatorType;
 (function (SeparatorType) {

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

@@ -18,9 +18,9 @@ export const generateRandomCodeWithConfig = ({ characterType, digitalNumbers, al
     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();
-    }
+    // } 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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antscorp/antsomi-ui",
-  "version": "1.3.6-beta.004",
+  "version": "1.3.6-beta.005",
   "description": "An enterprise-class UI design language and React UI library.",
   "sideEffects": [
     "dist/*",