@egov3/system-design 1.0.16 → 1.0.17

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+import { Components } from "./src/components";
+export { Components };

package/dist/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Components = void 0;
+const components_1 = require("./src/components");
+Object.defineProperty(exports, "Components", { enumerable: true, get: function () { return components_1.Components; } });

package/dist/jest.config.d.ts

@@ -0,0 +1,3 @@
+import type { Config } from '@jest/types';
+declare const _default: () => Promise<Config.InitialProjectOptions>;
+export default _default;

package/dist/jest.config.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jest_1 = __importDefault(require("next/jest"));
+const createJestConfig = (0, jest_1.default)({
+    dir: './'
+});
+const customJestConfig = {
+    collectCoverage: true,
+    collectCoverageFrom: [
+        'src/**/*.tsx'
+    ],
+    coveragePathIgnorePatterns: [
+        '<rootDir>/src/store',
+        '<rootDir>/src/stories',
+    ],
+    testMatch: ['**/*.test.tsx'],
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+    testEnvironment: 'jsdom',
+    moduleNameMapper: {
+        '@/(.*)': '<rootDir>/$1',
+        '~constants/(.*)': '<rootDir>/src/constants/$1',
+        '~customHooks/(.*)': '<rootDir>/src/customHooks/$1',
+        '~customMock/(.*)': '<rootDir>/__tests__/customMock/$1',
+        '~components': '<rootDir>/src/components/index.tsx',
+        '~module': '<rootDir>/src/components/index.tsx',
+        '~svg': '<rootDir>/src/svg/index.tsx',
+        '~templates': '<rootDir>/src/templates/index.tsx',
+        '~utils/(.*)': '<rootDir>/src/utils/$1'
+    },
+    coverageThreshold: {
+        global: {
+            branches: 40,
+            functions: 40,
+            lines: 40,
+            statements: 40
+        }
+    },
+    transform: {
+        '^.+\\.(ts|tsx)$': 'ts-jest',
+    },
+    transformIgnorePatterns: ['/node_modules/'],
+};
+exports.default = createJestConfig(customJestConfig);

package/dist/jest.setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/jest.setup.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Learn more: https://github.com/testing-library/jest-dom
+require("@testing-library/jest-dom");

package/dist/src/app/page.js

@@ -0,0 +1 @@
+"use strict";

package/dist/src/components/InputField/index.d.ts

@@ -0,0 +1,19 @@
+import React, { HTMLInputTypeAttribute } from "react";
+export type TOtpType = "OTP" | "TEXT";
+export interface IInputFieldProps {
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    value?: string;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    isClearable?: boolean;
+    inputLeftIcon?: JSX.Element;
+    type?: HTMLInputTypeAttribute;
+    id: string;
+    labelText?: string;
+    ariaLabel: string;
+}
+export declare const InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: IInputFieldProps) => React.ReactNode;

package/dist/src/components/InputField/index.js

@@ -0,0 +1,37 @@
+"use strict";
+"use client";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InputField = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ClassNamesFn_1 = require("~utils/ClassNamesFn");
+const InputField_module_scss_1 = __importDefault(require("./InputField.module.scss"));
+const _svg_1 = require("~svg");
+const InputField = ({ onFocus, onBlur, onChange, onEnterPress, value = "", inputLeftIcon, placeholder = "", className = "", style, isClearable = false, type = "text", id, labelText = "", ariaLabel = "", }) => {
+    const [focused, setFocused] = (0, react_1.useState)(false);
+    return ((0, jsx_runtime_1.jsxs)("div", { "data-testid": "InputField_MAIN", className: (0, ClassNamesFn_1.ClassNamesFn)(InputField_module_scss_1.default[labelText.length ? "inputContainerLabeled" : "inputContainer"], className, focused ? InputField_module_scss_1.default[`input--onfocus`] : undefined, InputField_module_scss_1.default[`input-${type === null || type === void 0 ? void 0 : type.toLocaleLowerCase()}`]), style: style, children: [labelText.length > 0 && ((0, jsx_runtime_1.jsx)("label", { htmlFor: id, "data-testid": "InputField_LABEL", children: labelText })), inputLeftIcon, (0, jsx_runtime_1.jsx)("input", { "data-testid": "InputField_INPUT", "aria-label": ariaLabel, id: id, type: type, className: InputField_module_scss_1.default.input, placeholder: placeholder, "aria-placeholder": placeholder, onFocus: () => {
+                    setFocused(true);
+                    if (onFocus) {
+                        onFocus();
+                    }
+                }, onBlur: () => {
+                    setFocused(false);
+                    if (onBlur) {
+                        onBlur();
+                    }
+                }, onChange: onChange, onKeyDown: (event) => {
+                    if (onEnterPress && event.key === "Enter") {
+                        onEnterPress(event);
+                    }
+                }, value: value, readOnly: !onChange }), isClearable && value && ((0, jsx_runtime_1.jsx)(_svg_1.ClearIcon, { fill: "red", pathFill: "#758393", className: InputField_module_scss_1.default.clearIcon, onClick: () => {
+                    if (onChange) {
+                        onChange({
+                            target: { value: "" },
+                        });
+                    }
+                } }))] }));
+};
+exports.InputField = InputField;

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

@@ -0,0 +1,3 @@
+export declare const Components: {
+    InputField: ({ onFocus, onBlur, onChange, onEnterPress, value, inputLeftIcon, placeholder, className, style, isClearable, type, id, labelText, ariaLabel, }: import("./InputField").IInputFieldProps) => React.ReactNode;
+};

package/dist/src/components/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Components = void 0;
+const InputField_1 = require("./InputField");
+exports.Components = { InputField: InputField_1.InputField };

package/dist/src/svg/ClearIcon.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const ClearIcon: ({ width, height, fill, pathFill, }: React.SVGProps<SVGSVGElement> & {
+    pathFill?: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/svg/ClearIcon.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearIcon = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ClearIcon = ({ width = 20, height = 20, fill = "none", pathFill = "#fff", }) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { "data-testid": "Icons_CLEAR", xmlns: "http://www.w3.org/2000/svg", width: width, height: height, fill: fill, viewBox: "0 0 20 20", children: (0, jsx_runtime_1.jsx)("path", { fill: pathFill, fillRule: "evenodd", d: "M10 18.333a8.333 8.333 0 100-16.666 8.333 8.333 0 000 16.666zM7.5 6.027L6.027 7.5l2.5 2.5-2.5 2.5L7.5 13.973l2.5-2.5 2.5 2.5 1.473-1.473-2.5-2.5 2.5-2.5L12.5 6.027l-2.5 2.5-2.5-2.5z", clipRule: "evenodd" }) }));
+};
+exports.ClearIcon = ClearIcon;

package/dist/src/svg/index.d.ts

@@ -0,0 +1,2 @@
+import { ClearIcon } from "./ClearIcon";
+export { ClearIcon };

package/dist/src/svg/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearIcon = void 0;
+const ClearIcon_1 = require("./ClearIcon");
+Object.defineProperty(exports, "ClearIcon", { enumerable: true, get: function () { return ClearIcon_1.ClearIcon; } });

package/dist/src/utils/ClassNamesFn.d.ts

@@ -0,0 +1 @@
+export declare const ClassNamesFn: (...args: unknown[]) => string;

package/dist/src/utils/ClassNamesFn.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClassNamesFn = void 0;
+const ClassNamesFn = (...args) => args.filter((item) => !!item).join(" ");
+exports.ClassNamesFn = ClassNamesFn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egov3/system-design",
-  "version": "1.0.16",
+  "version": "1.0.17",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",