@egov3/system-design 1.0.3 → 1.0.5

package/__tests__/baseComponents/InputField.test.tsx

@@ -0,0 +1,101 @@
+import React from "react";
+import { render, fireEvent } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { InputField } from "~baseComponents";
+
+describe("InputField", () => {
+  it("(1) Should render without crashing", () => {
+    const { getByPlaceholderText } = render(
+      <InputField
+        id={"testRenderId"}
+        labelText={""}
+        ariaLabel={"test ariaLabel"}
+      />
+    );
+    expect(getByPlaceholderText("")).toBeInTheDocument();
+  });
+
+  it("(2) Should render with the correct placeholder", () => {
+    const placeholder = "Enter text";
+    const { getByPlaceholderText } = render(
+      <InputField
+        id={"testPlaceholderId"}
+        labelText={""}
+        ariaLabel={"test ariaLabel"}
+        placeholder={placeholder}
+      />
+    );
+    expect(getByPlaceholderText(placeholder)).toBeInTheDocument();
+  });
+
+  it("(3) Should call onFocus and onBlur handlers", () => {
+    const onFocus = jest.fn();
+    const onBlur = jest.fn();
+    const { getByPlaceholderText } = render(
+      <InputField
+        id={"testOnBlurId"}
+        labelText={""}
+        ariaLabel={"test ariaLabel"}
+        placeholder="test"
+        onFocus={onFocus}
+        onBlur={onBlur}
+      />
+    );
+    const input = getByPlaceholderText("test");
+    fireEvent.focus(input);
+    expect(onFocus).toHaveBeenCalled();
+    fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalled();
+  });
+
+  it("(4) Should render inputLeftIcon if provided", () => {
+    const leftIcon = <span data-testid="left-icon">Icon</span>;
+    const { getByTestId } = render(
+      <InputField
+        id={"testLeftId"}
+        labelText={""}
+        ariaLabel={"test ariaLabel"}
+        inputLeftIcon={leftIcon}
+      />
+    );
+    expect(getByTestId("left-icon")).toBeInTheDocument();
+  });
+
+  it.skip("(5) Should render and clears value when clear icon is clicked", () => {
+    const onChange = jest.fn();
+    const value = "test value";
+    const { getByPlaceholderText, getByTestId } = render(
+      <InputField
+        id={"testId"}
+        labelText={""}
+        ariaLabel={"test ariaLabel"}
+        placeholder="test"
+        value={value}
+        onChange={onChange}
+        isClearable
+      />
+    );
+    const input = getByPlaceholderText("test");
+    expect(input).toHaveValue(value);
+    const clearIcon = getByTestId("Icons_CLEAR");
+    fireEvent.click(clearIcon);
+    expect(onChange).toHaveBeenCalledWith(
+      expect.objectContaining({ target: { value: "" } })
+    );
+  });
+
+  it("(6) Should apply focused class on focus", () => {
+    const { getByPlaceholderText, container } = render(
+      <InputField
+        id={"testFocusedId"}
+        labelText={""}
+        ariaLabel={"test ariaLabel"}
+        placeholder="test"
+      />
+    );
+    const input = getByPlaceholderText("test");
+    fireEvent.focus(input);
+    expect(container.firstChild).toHaveClass("input--onfocus");
+  });
+});

package/index.tsx

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

package/jest.config.ts

@@ -18,7 +18,6 @@ const customJestConfig = {
   testEnvironment: 'jsdom',
   moduleNameMapper: {
     '@/(.*)': '<rootDir>/$1',
-    '~app/(.*)': '<rootDir>/src/app/$1',
     '~constants/(.*)': '<rootDir>/src/constants/$1',
     '~customHooks/(.*)': '<rootDir>/src/customHooks/$1',
     '~customMock/(.*)': '<rootDir>/__tests__/customMock/$1',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@egov3/system-design",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "type": "module",
   "main": "index.tsx",
   "private": false,
@@ -9,6 +9,9 @@
   },
   "scripts": {
     "lint": "next lint",
+    "test": "jest",
+    "test:unit:update": "jest -u",
+    "test:unit:coverage": "jest --coverage",
     "lint-staged": "lint-staged",
     "type-check": "tsc --project tsconfig.json --pretty --noEmit && echo ",
     "prepare": "cross-env NODE_ENV=development yarn prepare:dev",
@@ -20,26 +23,61 @@
   "license": "ISC",
   "description": "system-design components for new egov 3.0",
   "dependencies": {
-    "next": "^15.0.0"
+    "@types/js-cookie": "^3.0.6",
+    "@types/qrcode": "^1.5.5",
+    "critters": "^0.0.24",
+    "js-cookie": "^3.0.5",
+    "next": "^14.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "ts-jest": "^29.1.2"
   },
   "devDependencies": {
-    "@babel/preset-env": "^7.25.9",
-    "@babel/preset-typescript": "^7.25.9",
+    "@babel/plugin-syntax-jsx": "^7.23.3",
+    "@babel/preset-env": "^7.23.9",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
     "@chromatic-com/storybook": "^1.3.2",
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.2",
+    "@next/eslint-plugin-next": "^14.1.0",
     "@storybook/addon-essentials": "^8.0.8",
     "@storybook/addon-interactions": "^8.0.8",
     "@storybook/addon-links": "^8.0.8",
     "@storybook/addon-onboarding": "^8.0.8",
+    "@storybook/blocks": "^8.0.8",
     "@storybook/nextjs": "^8.0.8",
     "@storybook/react": "^8.1.11",
     "@storybook/test": "^8.0.8",
+    "@testing-library/dom": "^10.3.2",
+    "@testing-library/jest-dom": "^6.4.8",
+    "@testing-library/react": "^14.3.1",
+    "@types/jest": "^29.5.12",
     "@types/node": "^20.11.19",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "babel-jest": "^29.7.0",
+    "@types/react-test-renderer": "^18.0.7",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "commitizen": "^4.3.0",
     "cross-env": "^7.0.3",
+    "eslint": "^8.56.0",
+    "eslint-config-next": "14.1.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-n": "^16.6.2",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-storybook": "^0.8.0",
     "husky": "^9.0.11",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "lint-staged": "^15.2.2",
+    "npm-check-updates": "^16.14.18",
+    "prettier": "^3.2.5",
+    "react-test-renderer": "^18.2.0",
     "sass": "^1.75.0",
-    "storybook": "^8.0.8"
+    "storybook": "^8.0.8",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.4.0"
   }
 }

package/src/baseComponents/InputField/InputField.module.scss

@@ -0,0 +1,57 @@
+@import '/src/styles/colors.module';
+@import '/src/styles/typography.module';
+
+.inputContainer {
+  display: flex;
+  align-items: center;
+  background-color: $Surface-Surface-1;
+  border-radius: 8px;
+  padding: 12px 16px;
+}
+
+.inputContainerLabeled {
+  display: block;
+  background-color: $Surface-Surface-1;
+  border-radius: 8px;
+  padding: 12px 16px;
+
+  label {
+    color: $Text-Secondary;
+  }
+}
+
+.input {
+  width: 100%;
+  border: none;
+  background-color: $Surface-Surface-1;
+
+  &:active,
+  &:focus {
+    outline: none;
+  }
+
+  &::placeholder {
+    color: $Text-Disabled-color;
+  }
+
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+}
+
+.clearIcon {
+  cursor: pointer;
+}
+
+.input--onfocus {
+  background-color: $Surface-Surface-3-color;
+  .input {
+    background-color: $Surface-Surface-3-color;
+  }
+}
+
+.input-text {
+  @include Body1Regular;
+}

package/src/baseComponents/InputField/index.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import React, { HTMLInputTypeAttribute, useState } from "react";
+
+import { ClassNamesFn } from "~utils/ClassNamesFn";
+
+import styles from "./InputField.module.scss";
+import { ClearIcon } from "~svg";
+
+export type TOtpType = "OTP" | "TEXT";
+
+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 const InputField = ({
+  onFocus,
+  onBlur,
+  onChange,
+  onEnterPress,
+  value = "",
+  inputLeftIcon,
+  placeholder = "",
+  className = "",
+  style,
+  isClearable = false,
+  type = "text",
+  id,
+  labelText = "",
+  ariaLabel = "",
+}: IInputFieldProps): React.ReactNode => {
+  const [focused, setFocused] = useState<boolean>(false);
+  return (
+    <div
+      data-testid="InputField_MAIN"
+      className={ClassNamesFn(
+        styles[labelText.length ? "inputContainerLabeled" : "inputContainer"],
+        className,
+        focused ? styles[`input--onfocus`] : undefined,
+        styles[`input-${type?.toLocaleLowerCase()}`]
+      )}
+      style={style}
+    >
+      {labelText.length > 0 && (
+        <label htmlFor={id} data-testid="InputField_LABEL">
+          {labelText}
+        </label>
+      )}
+      {inputLeftIcon}
+      <input
+        data-testid="InputField_INPUT"
+        aria-label={ariaLabel}
+        id={id}
+        type={type}
+        className={styles.input}
+        placeholder={placeholder}
+        aria-placeholder={placeholder}
+        onFocus={() => {
+          setFocused(true);
+          if (onFocus) {
+            onFocus();
+          }
+        }}
+        onBlur={() => {
+          setFocused(false);
+          if (onBlur) {
+            onBlur();
+          }
+        }}
+        onChange={onChange}
+        onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+          if (onEnterPress && event.key === "Enter") {
+            onEnterPress(event);
+          }
+        }}
+        value={value}
+        readOnly={!onChange}
+      />
+      {isClearable && value && (
+        <ClearIcon
+          fill="red"
+          pathFill="#758393"
+          className={styles.clearIcon}
+          onClick={() => {
+            if (onChange) {
+              onChange({
+                target: { value: "" },
+              } as React.ChangeEvent<HTMLInputElement>);
+            }
+          }}
+        />
+      )}
+    </div>
+  );
+};

package/src/baseComponents/index.tsx

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

package/src/svg/ClearIcon.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+
+export const ClearIcon = ({
+  width = 20,
+  height = 20,
+  fill = "none",
+  pathFill = "#fff",
+}: React.SVGProps<SVGSVGElement> & { pathFill?: string }) => {
+  return (
+    <svg
+      data-testid="Icons_CLEAR"
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      fill={fill}
+      viewBox="0 0 20 20"
+    >
+      <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"
+      ></path>
+    </svg>
+  );
+};

package/src/svg/index.tsx

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

package/tsconfig.json

@@ -23,7 +23,8 @@
     ],
     "paths": {
       "~utils/*": ["./src/utils/*"],
-      "~baseComponents": ["./src/baseComponents/index"]
+      "~baseComponents": ["./src/baseComponents/index"],
+      "~svg": ["./src/svg/index"]
     }
   },
   "include": [

package/src/baseComponents/Button/button.module.scss

@@ -1,101 +0,0 @@
-@import '/src/styles/typography.module';
-@import '/src/styles/colors.module';
-
-.button {
-  border: none;
-  transition: background-color 0.2s ease;
-
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  cursor: pointer;
-}
-
-.btn-default {
-  color: $default-white-color;
-  background-color: $default-primary-accent;
-}
-
-.btn-default--disabled {
-  color: $Text-Disabled-color;
-  background-color: $button-disabled-default-color;
-}
-
-.btn-tinted {
-  color: $Text-Accent;
-  background-color: $button-tinted-default-color;
-}
-
-.btn-tinted--disabled {
-  color: $Text-Disabled-Accent-color;
-  background-color: $button-tinted-default-color;
-}
-
-.btn-secondary {
-  color: $Text-Primary;
-  background-color: $Surface-Surface-3-color;
-}
-
-.btn-secondary--disabled {
-  color: $Text-Secondary;
-  background-color: $Surface-Surface-3-color;
-}
-
-.btn-default:hover {
-  background-color: $button-primary-on-hover-color;
-}
-
-.btn-tinted:hover {
-  background-color: $button-tinted-on-hover-color;
-}
-
-.btn-secondary:hover {
-  background-color: $button-secondary-on-hover;
-}
-
-.btn--mini {
-  gap: 4px;
-  padding: 6px 12px;
-  @include caption2Medium;
-}
-.btn--small {
-  gap: 8px;
-  padding: 8px 16px;
-  @include caption1Medium;
-}
-.btn--medium {
-  gap: 8px;
-  padding: 8px 20px;
-  @include body2Medium;
-}
-.btn--large {
-  gap: 8px;
-  padding: 14px 24px;
-  @include bodyMedium;
-}
-
-.btn-square--mini {
-  border-radius: 4px;
-}
-.btn-square--small {
-  border-radius: 6px;
-}
-.btn-square--medium {
-  border-radius: 10px;
-}
-.btn-square--large {
-  border-radius: 12px;
-}
-
-.btn-rounded--mini {
-  border-radius: 32px;
-}
-.btn-rounded--small {
-  border-radius: 32px;
-}
-.btn-rounded--medium {
-  border-radius: 32px;
-}
-.btn-rounded--large {
-  border-radius: 40px;
-}

package/src/baseComponents/Button/index.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-import { ClassNamesFn } from '~utils/ClassNamesFn';
-
-import styles from './button.module.scss';
-
-interface IButtonProps {
-  ariaLabel?: string;
-  onClick?: () => void;
-  children: React.ReactNode;
-  className?: string;
-  isRounded?: boolean;
-  disabled?: boolean;
-  variant?: 'default' | 'tinted' | 'secondary';
-  size?: 'mini' | 'small' | 'medium' | 'large';
-  style?: React.CSSProperties;
-}
-
-export const Button = ({
-  onClick,
-  children,
-  style,
-  className = '',
-  isRounded = false,
-  disabled = false,
-  variant = 'default',
-  size = 'medium',
-  ariaLabel = 'Кнопка',
-}: IButtonProps) => (
-  <button
-    data-testid="Button_MAIN"
-    aria-label={ariaLabel}
-    disabled={disabled}
-    aria-disabled={disabled}
-    onClick={onClick}
-    className={ClassNamesFn(
-      styles[`btn--${size}`],
-      isRounded
-        ? styles[`btn-rounded--${size}`]
-        : styles[`btn-square--${size}`],
-      disabled ? styles[`btn-${variant}--disabled`] : styles[`btn-${variant}`],
-      styles.button,
-      className
-    )}
-    style={style}
-  >
-    {children}
-  </button>
-);