@egov3/system-design 1.0.14 → 1.0.16

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/@types/scss-modules.d.ts

@@ -0,0 +1,5 @@
+// scss-modules.d.ts
+declare module '*.module.scss' {
+  const classes: { [key: string]: string };
+  export default classes;
+}

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

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

package/jest.config.ts

@@ -1,10 +1,11 @@
 import nextJest from 'next/jest';
+import type { Config } from '@jest/types';
 
 const createJestConfig = nextJest({
   dir: './'
 });
 
-const customJestConfig = {
+const customJestConfig: Config.InitialOptions = {
   collectCoverage: true,
   collectCoverageFrom: [
     'src/**/*.tsx'

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@egov3/system-design",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "type": "module",
-  "main": "index.tsx",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -12,12 +13,13 @@
     "url": "https://github.com/Zhassulan-Baigozha/egov3-design.git"
   },
   "scripts": {
+    "build": "tsc --project tsconfig.json",
     "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 ",
+    "type-check": "tsc --project tsconfig.json --pretty --noEmit && echo",
     "prepare": "cross-env NODE_ENV=development yarn prepare:dev",
     "prepare:dev": "husky install",
     "storybook": "storybook dev -p 6006",
@@ -58,8 +60,8 @@
     "@testing-library/react": "^14.3.1",
     "@types/jest": "^29.5.14",
     "@types/node": "^20.11.19",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
@@ -79,7 +81,8 @@
     "npm-check-updates": "^16.14.18",
     "prettier": "^3.2.5",
     "react-test-renderer": "^18.2.0",
-    "sass": "^1.75.0",
+    "sass": "^1.80.5",
+    "sass-loader": "^16.0.2",
     "storybook": "^8.0.8",
     "ts-node": "^10.9.2",
     "typescript": "^5.4.0"

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

@@ -1,38 +1,38 @@
 {
   "compilerOptions": {
-    "types": ["@types/react", "@types/react-dom"],
+    "target": "es6",
+    "module": "commonjs",
+    "jsx": "react-jsx",
+    "outDir": "./dist",
     "baseUrl": "./",
-    "target": "ESNext",
+    "paths": {
+      "~utils/*": ["./src/utils/*"],
+      "~components": ["./src/components/index"],
+      "~svg": ["./src/svg/index"]
+    },
     "lib": ["dom", "dom.iterable", "esnext"],
+    "types": ["@types/react", "@types/react-dom"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
-    "noEmit": true,
+    "noEmit": false,
+    "declaration": true,
     "esModuleInterop": true,
-    "module": "ESNext",
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve",
     "incremental": true,
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
-    "paths": {
-      "~utils/*": ["./src/utils/*"],
-      "~baseComponents": ["./src/baseComponents/index"],
-      "~svg": ["./src/svg/index"]
-    }
+    "plugins": [{ "name": "next" }]
   },
   "include": [
+    "src",
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     "**/*.css",
-    ".next/types/**/*.ts"
+    ".next/types/**/*.ts",
+    "@types"
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "__tests__", "src/stories", "dist"]
 }

package/@types/typings.d.ts

@@ -1 +0,0 @@
-declare module '*.module.scss';