prefabs-tech · uddhab · May 4, 2026 · Apr 28, 2026 · May 4, 2026 · May 4, 2026
diff --git a/apps/demo/package.json b/apps/demo/package.json
@@ -12,6 +12,8 @@
     "preview": "vite preview",
     "snapshot:update": "vitest --environment jsdom run --update",
     "sort-package": "npx sort-package-json",
+    "stylelint": "stylelint \"src/**/*.{css,vue}\" --allow-empty-input",
+    "stylelint:fix": "stylelint \"src/**/*.{css,vue}\" --fix --allow-empty-input",
     "test": "CI=true vitest",
     "test:unit": "CI=true vitest",
     "typecheck": "tsc --noEmit -p tsconfig.vitest.json --composite false"
@@ -23,7 +25,6 @@
     "@prefabs.tech/react-layout": "0.72.1",
     "@prefabs.tech/react-ui": "0.72.1",
     "@prefabs.tech/react-user": "0.72.1",
-    "@prefabs.tech/tsconfig": "0.6.0",
     "@reduxjs/toolkit": "1.9.7",
     "normalize.css": "8.0.1",
     "primeicons": "7.0.0",
@@ -36,11 +37,12 @@
     "zod": "3.24.4"
   },
   "devDependencies": {
-    "@prefabs.tech/tsconfig": "0.5.0",
     "@babel/core": "7.26.10",
     "@babel/plugin-syntax-flow": "7.26.0",
     "@babel/plugin-transform-react-jsx": "^7.21.5",
-    "@prefabs.tech/eslint-config": "0.5.0",
+    "@prefabs.tech/eslint-config": "0.7.0",
+    "@prefabs.tech/stylelint-config": "0.7.0",
+    "@prefabs.tech/tsconfig": "0.7.0",
     "@testing-library/react": "16.3.2",
     "@types/jsdom": "21.1.7",
     "@types/node": "25.3.5",
@@ -51,6 +53,9 @@
     "eslint": "9.39.4",
     "jsdom": "27.0.1",
     "prettier": "3.8.3",
+    "stylelint": "17.9.1",
+    "stylelint-config-standard": "40.0.0",
+    "stylelint-order": "8.1.1",
     "typescript": "5.9.3",
     "vite": "7.3.2",
     "vite-plugin-compression": "0.5.1",

diff --git a/apps/demo/setup-test.ts b/apps/demo/setup-test.ts
@@ -4,10 +4,10 @@ import { vi } from "vitest";
 vi.mock("@prefabs.tech/react-i18n", () => ({
   useTranslation: () => {
     return {
-      t: (string_) => string_,
       i18n: {
         changeLanguage: () => new Promise(() => {}),
       },
+      t: (string_) => string_,
     };
   },
 }));
diff --git a/apps/demo/src/Routers.tsx b/apps/demo/src/Routers.tsx
@@ -28,70 +28,70 @@ import {
 const router = createBrowserRouter(
   [
     {
-      path: "/",
-      element: <BasicLayout />,
-      errorElement: <ErrorBoundary />,
       children: [
         {
-          index: true,
           element: <Home />,
+          index: true,
         },
         {
-          path: "/ui",
-          element: <UIPages />,
           children: [
             {
-              index: true,
               element: <UIPage></UIPage>,
+              index: true,
             },
             ...uiRoutes,
           ],
+          element: <UIPages />,
+          path: "/ui",
         },
         {
-          path: "/user",
-          element: <UserPages />,
           children: [
             {
-              index: true,
               element: <UserPage></UserPage>,
+              index: true,
             },
             ...userRoutes,
           ],
+          element: <UserPages />,
+          path: "/user",
         },
         {
-          path: "/form",
-          element: <FormPages />,
           children: [
             {
-              index: true,
               element: <FormPage></FormPage>,
+              index: true,
             },
             ...formRoutes,
           ],
+          element: <FormPages />,
+          path: "/form",
         },
         {
-          path: "/layout",
-          element: <LayoutPages />,
           children: [
             {
-              index: true,
               element: <LayoutPage></LayoutPage>,
+              index: true,
             },
             ...layoutRoutes,
           ],
+          element: <LayoutPages />,
+          path: "/layout",
         },
         {
-          path: "/i18n",
-          element: <I18nPages />,
           children: [
             {
-              index: true,
               element: <I18nPage></I18nPage>,
+              index: true,
             },
             ...i18nRoutes,
           ],
+          element: <I18nPages />,
+          path: "/i18n",
         },
       ],
+      element: <BasicLayout />,
+      errorElement: <ErrorBoundary />,
+      path: "/",
     },
   ],
   {

diff --git a/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.snapshot.test.tsx b/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.snapshot.test.tsx
@@ -5,7 +5,7 @@ import ErrorBoundary from "../index";
 
 vi.mock("react-router-dom", async () => ({
   ...(await vi.importActual("react-router-dom")),
-  useRouteError: () => ({ statusText: 404, message: "Not Found" }),
+  useRouteError: () => ({ message: "Not Found", statusText: 404 }),
 }));
 
 test("Component matches snapshot", async () => {

diff --git a/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.test.tsx b/apps/demo/src/Views/ErrorBoundary/__test__/ErrorBoundary.test.tsx
@@ -5,7 +5,7 @@ import ErrorBoundary from "../index";
 
 vi.mock("react-router-dom", async () => ({
   ...(await vi.importActual("react-router-dom")),
-  useRouteError: () => ({ statusText: 404, message: "Not Found" }),
+  useRouteError: () => ({ message: "Not Found", statusText: 404 }),
 }));
 
 test("show error when loader throws error", async () => {

diff --git a/apps/demo/src/Views/ErrorBoundary/index.tsx b/apps/demo/src/Views/ErrorBoundary/index.tsx
@@ -1,11 +1,12 @@
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Page } from "@prefabs.tech/react-ui";
 import { useRouteError } from "react-router-dom";
+
 import "./ErrorBoundary.css";
 
 type RouteError = {
-  statusText?: string;
   message?: string;
+  statusText?: string;
 };
 
 const ErrorBoundary = (): JSX.Element => {

diff --git a/apps/demo/src/Views/Form/components/FileInput/FileInput.tsx b/apps/demo/src/Views/Form/components/FileInput/FileInput.tsx
@@ -2,14 +2,14 @@ import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Button, Page } from "@prefabs.tech/react-ui";
 import { useNavigate } from "react-router-dom";
 
+import { Section } from "../../../../components/Demo";
 import {
   FileAttachDemo,
   FileInputButton,
   FileUploadDemo,
   FormWithFileInput,
   FormWithFileInputButton,
 } from "./_components";
-import { Section } from "../../../../components/Demo";
 
 export const FileInputDemo = () => {
   const [t] = useTranslation("form");
@@ -21,10 +21,10 @@ export const FileInputDemo = () => {
       title={t("fileInput.title")}
       toolbar={
         <Button
-          label={t("buttons.back")}
-          variant="textOnly"
           iconLeft={<i className="pi pi-chevron-left"></i>}
+          label={t("buttons.back")}
           onClick={() => navigate("..")}
+          variant="textOnly"
         />
       }
     >

diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FileAttachDemo.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FileAttachDemo.tsx
@@ -1,10 +1,10 @@
+import type { FileExtended } from "@prefabs.tech/react-form";
+
 import { FileAttachBasic } from "@prefabs.tech/react-form";
 import { useTranslation } from "@prefabs.tech/react-i18n";
 import { Tooltip } from "@prefabs.tech/react-ui";
 import { useRef, useState } from "react";
 
-import type { FileExtended } from "@prefabs.tech/react-form";
-
 export const FileAttachDemo = () => {
   const { t } = useTranslation("files");
   const [selectedFiles, setSelectedFiles] = useState<FileExtended[]>([]);
@@ -13,26 +13,26 @@ export const FileAttachDemo = () => {
   return (
     <>
       <FileAttachBasic
-        name="fileAttach"
-        selectButtonProps={{ iconLeft: "pi pi-file" }}
-        value={selectedFiles}
         mode={"update"}
         multiple={true}
+        name="fileAttach"
         onChange={(file: FileExtended[]) => {
           setSelectedFiles(file);
         }}
+        selectButtonProps={{ iconLeft: "pi pi-file" }}
         selectedFileDisplay="none"
+        value={selectedFiles}
       />
 
       {selectedFiles.map((file: FileExtended, i) => {
         return (
-          <div key={file.name} className="attached-file">
+          <div className="attached-file" key={file.name}>
             <span>{file.name}</span>
             <Tooltip
+              delay={200}
               elementRef={reference}
-              position="top"
               offset={10}
-              delay={200}
+              position="top"
             >
               <span>{t("fileAttach.deleteFileMessage")}</span>
             </Tooltip>

diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FileInputButton.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FileInputButton.tsx
@@ -12,28 +12,28 @@ export const FileInputButton: React.FC = () => {
   return (
     <>
       <FileInput
-        selectedFileDisplay="popup"
-        inputMethod="button"
-        value={[]}
-        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
-        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
-        inputButtonLabelSelected={t(
-          "fileInput.buttons.label.inputButtonLabelSelected",
-        )}
-        name="images"
+        addDescriptionLabel={t("fileInput.description.label")}
+        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        dropzoneMessage={t("fileInput.dropzoneMessage")}
         dropzoneOptions={{
           accept: {
             "image/*": [".jpeg", ".png"],
           },
         }}
+        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
         enableDescription
-        dropzoneMessage={t("fileInput.dropzoneMessage")}
-        addDescriptionLabel={t("fileInput.description.label")}
-        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
+        inputButtonLabelSelected={t(
+          "fileInput.buttons.label.inputButtonLabelSelected",
+        )}
+        inputMethod="button"
+        name="images"
+        onChange={onChange}
         selectButtonProps={{
           iconLeft: "pi pi-file",
         }}
-        onChange={onChange}
+        selectedFileDisplay="popup"
+        value={[]}
       />
     </>
   );

diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FileUpload.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FileUpload.tsx
@@ -6,26 +6,26 @@ export const FileUploadDemo = () => {
 
   return (
     <FileUpload
-      name="images"
+      addDescriptionLabel={t("fileInput.description.label")}
+      cancelButtonOptions={{
+        iconLeft: "pi pi-times",
+        label: t("fileUpload.actions.cancel"),
+      }}
+      descriptionPlaceholder={t("fileInput.description.placeholder")}
+      dropzoneMessage={t("fileInput.dropzoneMessage")}
       dropzoneOptions={{
         accept: {
           "image/*": [".jpeg", ".png"],
         },
       }}
-      value={[]}
       enableDescription
-      dropzoneMessage={t("fileInput.dropzoneMessage")}
-      addDescriptionLabel={t("fileInput.description.label")}
-      descriptionPlaceholder={t("fileInput.description.placeholder")}
+      name="images"
       onUpload={() => {}}
       uploadButtonOptions={{
-        label: t("fileUpload.actions.upload"),
         iconLeft: "pi pi-plus",
+        label: t("fileUpload.actions.upload"),
       }}
-      cancelButtonOptions={{
-        label: t("fileUpload.actions.cancel"),
-        iconLeft: "pi pi-times",
-      }}
+      value={[]}
     />
   );
 };
diff --git a/apps/demo/src/Views/Form/components/FileInput/_components/FormFileInputButton.tsx b/apps/demo/src/Views/Form/components/FileInput/_components/FormFileInputButton.tsx
@@ -23,26 +23,26 @@ export const FormWithFileInputButton: React.FC = () => {
     <Provider onSubmit={onSubmit}>
       <UploadBy />
       <FormFileInput
-        selectedFileDisplay="popup"
-        inputMethod="button"
-        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
-        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
-        inputButtonLabelSelected={t(
-          "fileInput.buttons.label.inputButtonLabelSelected",
-        )}
-        name="images"
+        addDescriptionLabel={t("fileInput.description.label")}
+        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        dropzoneMessage={t("fileInput.dropzoneMessage")}
         dropzoneOptions={{
           accept: {
             "image/*": [".jpeg", ".png"],
           },
         }}
+        emptySelectionMessage={t("fileInput.emptySelectionMessage")}
         enableDescription
-        dropzoneMessage={t("fileInput.dropzoneMessage")}
-        addDescriptionLabel={t("fileInput.description.label")}
-        descriptionPlaceholder={t("fileInput.description.placeholder")}
+        inputButtonLabel={t("fileInput.buttons.label.inputButtonLabel")}
+        inputButtonLabelSelected={t(
+          "fileInput.buttons.label.inputButtonLabelSelected",
+        )}
+        inputMethod="button"
+        name="images"
         selectButtonProps={{
           iconLeft: "pi pi-file",
         }}
+        selectedFileDisplay="popup"
       />
       <div className="mb-4">
         <Button label={t("fileInput.actions.upload")} />