@egov3/system-design 1.0.15 → 1.0.17

package/.github/workflows/publish.yml

@@ -27,6 +27,9 @@ jobs:
       - name: Install dependencies
         run: yarn install
 
+      - name: Build project
+        run: yarn build
+
       - name: Increment version
         run: yarn version --patch --no-git-tag-version
 
@@ -40,7 +43,7 @@ jobs:
         run: |
           git ls-remote https://Zhassulan-Baigozha:${{ secrets.PERSONAL_TOKEN }}@github.com/Zhassulan-Baigozha/egov3-design.git
         env:
-          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }} # Use GITHUB_TOKEN for repo access
+          PERSONAL_TOKEN: ${{ secrets.PERSONAL_TOKEN }}
 
       - name: Commit updated package.json
         run: |

package/__tests__/{baseComponents → components}/InputField.test.tsx

@@ -2,12 +2,12 @@ import React from "react";
 import { render, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom";
 
-import { InputField } from "~baseComponents";
+import { Components } from "~components";
 
 describe("InputField", () => {
   it("(1) Should render without crashing", () => {
     const { getByPlaceholderText } = render(
-      <InputField
+      <Components.InputField
         id={"testRenderId"}
         labelText={""}
         ariaLabel={"test ariaLabel"}
@@ -19,7 +19,7 @@ describe("InputField", () => {
   it("(2) Should render with the correct placeholder", () => {
     const placeholder = "Enter text";
     const { getByPlaceholderText } = render(
-      <InputField
+      <Components.InputField
         id={"testPlaceholderId"}
         labelText={""}
         ariaLabel={"test ariaLabel"}
@@ -33,7 +33,7 @@ describe("InputField", () => {
     const onFocus = jest.fn();
     const onBlur = jest.fn();
     const { getByPlaceholderText } = render(
-      <InputField
+      <Components.InputField
         id={"testOnBlurId"}
         labelText={""}
         ariaLabel={"test ariaLabel"}
@@ -52,7 +52,7 @@ describe("InputField", () => {
   it("(4) Should render inputLeftIcon if provided", () => {
     const leftIcon = <span data-testid="left-icon">Icon</span>;
     const { getByTestId } = render(
-      <InputField
+      <Components.InputField
         id={"testLeftId"}
         labelText={""}
         ariaLabel={"test ariaLabel"}
@@ -66,7 +66,7 @@ describe("InputField", () => {
     const onChange = jest.fn();
     const value = "test value";
     const { getByPlaceholderText, getByTestId } = render(
-      <InputField
+      <Components.InputField
         id={"testId"}
         labelText={""}
         ariaLabel={"test ariaLabel"}
@@ -87,7 +87,7 @@ describe("InputField", () => {
 
   it("(6) Should apply focused class on focus", () => {
     const { getByPlaceholderText, container } = render(
-      <InputField
+      <Components.InputField
         id={"testFocusedId"}
         labelText={""}
         ariaLabel={"test ariaLabel"}

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/index.tsx

@@ -1,3 +1,3 @@
-import { InputField } from "src/baseComponents/InputField";
+import { Components } from "./src/components";
 
-export { InputField };
+export { Components };

package/package.json

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

package/src/{baseComponents → components}/InputField/index.tsx

@@ -9,7 +9,7 @@ import { ClearIcon } from "~svg";
 
 export type TOtpType = "OTP" | "TEXT";
 
-interface IInputFieldProps {
+export interface IInputFieldProps {
   onFocus?: () => void;
   onBlur?: () => void;
   onEnterPress?: (event: React.KeyboardEvent<HTMLInputElement>) => void;

package/src/{baseComponents → components}/index.tsx

@@ -1,3 +1,3 @@
 import { InputField } from "./InputField";
 
-export { InputField };
+export const Components = { InputField };

package/src/stories/components/Button.stories.tsx

@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { fn } from "@storybook/test";
 
-import { Button } from "~baseComponents";
+import { Components } from "~components";
 
 const meta = {
-  title: "baseComponents/Button",
-  component: Button,
+  title: "Components/Button",
+  component: Components.Button,
   parameters: {
     layout: "centered",
   },
@@ -14,7 +14,7 @@ const meta = {
   args: {
     onClick: fn(),
   },
-} satisfies Meta<typeof Button>;
+} satisfies Meta<typeof Components.Button>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;

package/tsconfig.json

@@ -7,7 +7,7 @@
     "baseUrl": "./",
     "paths": {
       "~utils/*": ["./src/utils/*"],
-      "~baseComponents": ["./src/baseComponents/index"],
+      "~components": ["./src/components/index"],
       "~svg": ["./src/svg/index"]
     },
     "lib": ["dom", "dom.iterable", "esnext"],
@@ -25,6 +25,14 @@
     "incremental": true,
     "plugins": [{ "name": "next" }]
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "src", "@types"],
+  "include": [
+    "src",
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    "**/*.css",
+    ".next/types/**/*.ts",
+    "@types"
+  ],
   "exclude": ["node_modules", "__tests__", "src/stories", "dist"]
 }