@refinedev/antd 5.37.4 → 6.0.0

package/refine.config.js

@@ -1,411 +1,399 @@
 const { dirname, join } = require("path");
 const {
-    getImports,
-    appendAfterImports,
-    getFileContent,
+  getImports,
+  appendAfterImports,
+  getFileContent,
 } = require("@refinedev/cli");
 
 /** @type {import('@refinedev/cli').RefineConfig} */
 module.exports = {
-    group: "UI Framework",
-    swizzle: {
-        items: [
-            {
-                group: "Buttons",
-                label: "ShowButton",
-                files: [
-                    {
-                        src: "./src/components/buttons/show/index.tsx",
-                        dest: "./components/buttons/show.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "CreateButton",
-                message: `
+  group: "UI Framework",
+  swizzle: {
+    items: [
+      {
+        group: "Buttons",
+        label: "ShowButton",
+        files: [
+          {
+            src: "./src/components/buttons/show/index.tsx",
+            dest: "./components/buttons/show.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "CreateButton",
+        message: `
                 **\`Warning:\`**
                 This component is used in the below component. If you want to change it, you can run the **swizzle** command for the below component or you can use props to override the default buttons.
                     - <List/>
                 `,
-                files: [
-                    {
-                        src: "./src/components/buttons/create/index.tsx",
-                        dest: "./components/buttons/create.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "CloneButton",
-                files: [
-                    {
-                        src: "./src/components/buttons/clone/index.tsx",
-                        dest: "./components/buttons/clone.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "DeleteButton",
-                message: `
+        files: [
+          {
+            src: "./src/components/buttons/create/index.tsx",
+            dest: "./components/buttons/create.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "CloneButton",
+        files: [
+          {
+            src: "./src/components/buttons/clone/index.tsx",
+            dest: "./components/buttons/clone.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "DeleteButton",
+        message: `
                 **\`Warning:\`**
                 This component is used in the below components. If you want to change it, you can run the **swizzle** command for the below components or you can use props to override the default buttons.
                     - <Edit/>
                     - <List/>
                 `,
-                files: [
-                    {
-                        src: "./src/components/buttons/delete/index.tsx",
-                        dest: "./components/buttons/delete.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "EditButton",
-                message: `
+        files: [
+          {
+            src: "./src/components/buttons/delete/index.tsx",
+            dest: "./components/buttons/delete.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "EditButton",
+        message: `
                 **\`Warning:\`**
                 This component is used in the below component. If you want to change it, you can run the **swizzle** command for the below component or you can use props to override the default buttons.
                     - <Show/>
                 `,
-                files: [
-                    {
-                        src: "./src/components/buttons/edit/index.tsx",
-                        dest: "./components/buttons/edit.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "ExportButton",
-                files: [
-                    {
-                        src: "./src/components/buttons/export/index.tsx",
-                        dest: "./components/buttons/export.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "ImportButton",
-                files: [
-                    {
-                        src: "./src/components/buttons/import/index.tsx",
-                        dest: "./components/buttons/import.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "ListButton",
-                message: `
+        files: [
+          {
+            src: "./src/components/buttons/edit/index.tsx",
+            dest: "./components/buttons/edit.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "ExportButton",
+        files: [
+          {
+            src: "./src/components/buttons/export/index.tsx",
+            dest: "./components/buttons/export.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "ImportButton",
+        files: [
+          {
+            src: "./src/components/buttons/import/index.tsx",
+            dest: "./components/buttons/import.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "ListButton",
+        message: `
                 **\`Warning:\`**
                 This component is used in the below components. If you want to change it, you can run the **swizzle** command for the below components or you can use props to override the default buttons.
                     - <Edit/>
                     - <Show/>
                 `,
-                files: [
-                    {
-                        src: "./src/components/buttons/list/index.tsx",
-                        dest: "./components/buttons/list.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "RefreshButton",
-                message: `
+        files: [
+          {
+            src: "./src/components/buttons/list/index.tsx",
+            dest: "./components/buttons/list.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "RefreshButton",
+        message: `
                 **\`Warning:\`**
                 This component is used in the below components. If you want to change it, you can run the **swizzle** command for the below components or you can use props to override the default buttons.
                     - <Edit/>
                     - <Show/>
                 `,
-                files: [
-                    {
-                        src: "./src/components/buttons/refresh/index.tsx",
-                        dest: "./components/buttons/refresh.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Buttons",
-                label: "SaveButton",
-                message: `
+        files: [
+          {
+            src: "./src/components/buttons/refresh/index.tsx",
+            dest: "./components/buttons/refresh.tsx",
+          },
+        ],
+      },
+      {
+        group: "Buttons",
+        label: "SaveButton",
+        message: `
                 **\`Warning:\`**
                 This component is used in the below components. If you want to change it, you can run the **swizzle** command for the below components or you can use props to override the default buttons.
                     - <Create/>
                     - <Edit/>
                 `,
-                files: [
-                    {
-                        src: "./src/components/buttons/save/index.tsx",
-                        dest: "./components/buttons/save.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Basic Views",
-                label: "Create",
-                files: [
-                    {
-                        src: "./src/components/crud/create/index.tsx",
-                        dest: "./components/crud/create.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Basic Views",
-                label: "List",
-                files: [
-                    {
-                        src: "./src/components/crud/list/index.tsx",
-                        dest: "./components/crud/list.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Basic Views",
-                label: "Show",
-                files: [
-                    {
-                        src: "./src/components/crud/show/index.tsx",
-                        dest: "./components/crud/show.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Basic Views",
-                label: "Edit",
-                files: [
-                    {
-                        src: "./src/components/crud/edit/index.tsx",
-                        dest: "./components/crud/edit.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "BooleanField",
-                files: [
-                    {
-                        src: "./src/components/fields/boolean/index.tsx",
-                        dest: "./components/fields/boolean.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "DateField",
-                files: [
-                    {
-                        src: "./src/components/fields/date/index.tsx",
-                        dest: "./components/fields/date.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "EmailField",
-                files: [
-                    {
-                        src: "./src/components/fields/email/index.tsx",
-                        dest: "./components/fields/email.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "FileField",
-                files: [
-                    {
-                        src: "./src/components/fields/file/index.tsx",
-                        dest: "./components/fields/file.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "ImageField",
-                files: [
-                    {
-                        src: "./src/components/fields/image/index.tsx",
-                        dest: "./components/fields/image.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "MarkdownField",
-                files: [
-                    {
-                        src: "./src/components/fields/markdown/index.tsx",
-                        dest: "./components/fields/markdown.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "NumberField",
-                files: [
-                    {
-                        src: "./src/components/fields/number/index.tsx",
-                        dest: "./components/fields/number.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "TagField",
-                files: [
-                    {
-                        src: "./src/components/fields/tag/index.tsx",
-                        dest: "./components/fields/tag.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "TextField",
-                files: [
-                    {
-                        src: "./src/components/fields/text/index.tsx",
-                        dest: "./components/fields/text.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Fields",
-                label: "UrlField",
-                files: [
-                    {
-                        src: "./src/components/fields/url/index.tsx",
-                        dest: "./components/fields/url.tsx",
-                    },
-                ],
-            },
-            {
-                group: "Pages",
-                label: "ErrorPage",
-                message: `
+        files: [
+          {
+            src: "./src/components/buttons/save/index.tsx",
+            dest: "./components/buttons/save.tsx",
+          },
+        ],
+      },
+      {
+        group: "Basic Views",
+        label: "Create",
+        files: [
+          {
+            src: "./src/components/crud/create/index.tsx",
+            dest: "./components/crud/create.tsx",
+          },
+        ],
+      },
+      {
+        group: "Basic Views",
+        label: "List",
+        files: [
+          {
+            src: "./src/components/crud/list/index.tsx",
+            dest: "./components/crud/list.tsx",
+          },
+        ],
+      },
+      {
+        group: "Basic Views",
+        label: "Show",
+        files: [
+          {
+            src: "./src/components/crud/show/index.tsx",
+            dest: "./components/crud/show.tsx",
+          },
+        ],
+      },
+      {
+        group: "Basic Views",
+        label: "Edit",
+        files: [
+          {
+            src: "./src/components/crud/edit/index.tsx",
+            dest: "./components/crud/edit.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "BooleanField",
+        files: [
+          {
+            src: "./src/components/fields/boolean/index.tsx",
+            dest: "./components/fields/boolean.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "DateField",
+        files: [
+          {
+            src: "./src/components/fields/date/index.tsx",
+            dest: "./components/fields/date.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "EmailField",
+        files: [
+          {
+            src: "./src/components/fields/email/index.tsx",
+            dest: "./components/fields/email.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "FileField",
+        files: [
+          {
+            src: "./src/components/fields/file/index.tsx",
+            dest: "./components/fields/file.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "ImageField",
+        files: [
+          {
+            src: "./src/components/fields/image/index.tsx",
+            dest: "./components/fields/image.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "MarkdownField",
+        files: [
+          {
+            src: "./src/components/fields/markdown/index.tsx",
+            dest: "./components/fields/markdown.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "NumberField",
+        files: [
+          {
+            src: "./src/components/fields/number/index.tsx",
+            dest: "./components/fields/number.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "TagField",
+        files: [
+          {
+            src: "./src/components/fields/tag/index.tsx",
+            dest: "./components/fields/tag.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "TextField",
+        files: [
+          {
+            src: "./src/components/fields/text/index.tsx",
+            dest: "./components/fields/text.tsx",
+          },
+        ],
+      },
+      {
+        group: "Fields",
+        label: "UrlField",
+        files: [
+          {
+            src: "./src/components/fields/url/index.tsx",
+            dest: "./components/fields/url.tsx",
+          },
+        ],
+      },
+      {
+        group: "Pages",
+        label: "ErrorPage",
+        message: `
                 **\`Info:\`**
                 If you want to see an example of error page in use, you can refer to the documentation at https://refine.dev/docs/packages/documentation/routers
                 `,
-                files: [
-                    {
-                        src: "./src/components/pages/error/index.tsx",
-                        dest: "./components/pages/error.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-
-                            // for remove RefineErorrPageProps
-                            const refineErrorPagePropsRegex =
-                                /React\.FC<RefineErrorPageProps>/g;
-
-                            newContent = newContent.replace(
-                                refineErrorPagePropsRegex,
-                                "React.FC",
-                            );
-
-                            return newContent;
-                        },
-                    },
-                ],
+        files: [
+          {
+            src: "./src/components/pages/error/index.tsx",
+            dest: "./components/pages/error.tsx",
+            transform: (content) => {
+              let newContent = content;
+
+              // for remove RefineErorrPageProps
+              const refineErrorPagePropsRegex =
+                /React\.FC<RefineErrorPageProps>/g;
+
+              newContent = newContent.replace(
+                refineErrorPagePropsRegex,
+                "React.FC",
+              );
+
+              return newContent;
             },
-            {
-                group: "Pages",
-                label: "AuthPage",
-                message: `
+          },
+        ],
+      },
+      {
+        group: "Pages",
+        label: "AuthPage",
+        message: `
                 **\`Info:\`**
                 If you want to see examples of authentication pages in use, you can refer to the documentation at https://refine.dev/docs/packages/documentation/routers
                 `,
-                files: [
-                    {
-                        src: "./src/components/pages/auth/index.tsx",
-                        dest: "./components/pages/auth/index.tsx",
-                    },
-                    {
-                        src: "./src/components/pages/auth/components/forgotPassword/index.tsx",
-                        dest: "./components/pages/auth/components/forgotPassword.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-
-                            // for change style import path
-                            const styleImportRegex = /"\.\.\/styles";/g;
-
-                            newContent = newContent.replace(
-                                styleImportRegex,
-                                `"./styles";`,
-                            );
-
-                            return newContent;
-                        },
-                    },
-                    {
-                        src: "./src/components/pages/auth/components/login/index.tsx",
-                        dest: "./components/pages/auth/components/login.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-
-                            // for change style import path
-                            const styleImportRegex = /"\.\.\/styles";/g;
-
-                            newContent = newContent.replace(
-                                styleImportRegex,
-                                `"./styles";`,
-                            );
-
-                            return newContent;
-                        },
-                    },
-                    {
-                        src: "./src/components/pages/auth/components/register/index.tsx",
-                        dest: "./components/pages/auth/components/register.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-
-                            // for change style import path
-                            const styleImportRegex = /"\.\.\/styles";/g;
-
-                            newContent = newContent.replace(
-                                styleImportRegex,
-                                `"./styles";`,
-                            );
-
-                            return newContent;
-                        },
-                    },
-                    {
-                        src: "./src/components/pages/auth/components/updatePassword/index.tsx",
-                        dest: "./components/pages/auth/components/updatePassword.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-
-                            // for change style import path
-                            const styleImportRegex = /"\.\.\/styles";/g;
-
-                            newContent = newContent.replace(
-                                styleImportRegex,
-                                `"./styles";`,
-                            );
-
-                            return newContent;
-                        },
-                    },
-                    {
-                        src: "./src/components/pages/auth/components/index.tsx",
-                        dest: "./components/pages/auth/components/index.tsx",
-                    },
-                    {
-                        src: "./src/components/pages/auth/components/styles.ts",
-                        dest: "./components/pages/auth/components/styles.ts",
-                    },
-                ],
+        files: [
+          {
+            src: "./src/components/pages/auth/index.tsx",
+            dest: "./components/pages/auth/index.tsx",
+          },
+          {
+            src: "./src/components/pages/auth/components/forgotPassword/index.tsx",
+            dest: "./components/pages/auth/components/forgotPassword.tsx",
+            transform: (content) => {
+              let newContent = content;
+
+              // for change style import path
+              const styleImportRegex = /"\.\.\/styles";/g;
+
+              newContent = newContent.replace(styleImportRegex, `"./styles";`);
+
+              return newContent;
+            },
+          },
+          {
+            src: "./src/components/pages/auth/components/login/index.tsx",
+            dest: "./components/pages/auth/components/login.tsx",
+            transform: (content) => {
+              let newContent = content;
+
+              // for change style import path
+              const styleImportRegex = /"\.\.\/styles";/g;
+
+              newContent = newContent.replace(styleImportRegex, `"./styles";`);
+
+              return newContent;
+            },
+          },
+          {
+            src: "./src/components/pages/auth/components/register/index.tsx",
+            dest: "./components/pages/auth/components/register.tsx",
+            transform: (content) => {
+              let newContent = content;
+
+              // for change style import path
+              const styleImportRegex = /"\.\.\/styles";/g;
+
+              newContent = newContent.replace(styleImportRegex, `"./styles";`);
+
+              return newContent;
+            },
+          },
+          {
+            src: "./src/components/pages/auth/components/updatePassword/index.tsx",
+            dest: "./components/pages/auth/components/updatePassword.tsx",
+            transform: (content) => {
+              let newContent = content;
+
+              // for change style import path
+              const styleImportRegex = /"\.\.\/styles";/g;
+
+              newContent = newContent.replace(styleImportRegex, `"./styles";`);
+
+              return newContent;
             },
-            {
-                group: "Other",
-                label: "Breadcrumb",
-                message: `
+          },
+          {
+            src: "./src/components/pages/auth/components/index.tsx",
+            dest: "./components/pages/auth/components/index.tsx",
+          },
+          {
+            src: "./src/components/pages/auth/components/styles.ts",
+            dest: "./components/pages/auth/components/styles.ts",
+          },
+        ],
+      },
+      {
+        group: "Other",
+        label: "Breadcrumb",
+        message: `
                 **\`Warning:\`**
                 This component is used in the below components. If you want to change it, you can use props to override the default breadcrumb or you can manage globally with the **options** prop to the **<Refine/>** component.
                     - <Edit/>
@@ -432,40 +420,37 @@ module.exports = {
                 }
                 \`\`\`
                 `,
-                files: [
-                    {
-                        src: "./src/components/breadcrumb/index.tsx",
-                        dest: "./components/breadcrumb.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-
-                            // for remove type export
-                            const breadcrumbPropsExportRegex =
-                                /export type BreadcrumbProps = RefineBreadcrumbProps<AntdBreadcrumbProps>;?/g;
-
-                            newContent = newContent.replace(
-                                breadcrumbPropsExportRegex,
-                                `import { BreadcrumbProps } from "@refinedev/antd";`,
-                            );
-
-                            // change the breadcrumb import path
-                            const breadcrumbImportRegex =
-                                /BreadcrumbProps as AntdBreadcrumbProps,/g;
-
-                            newContent = newContent.replace(
-                                breadcrumbImportRegex,
-                                "",
-                            );
-
-                            return newContent;
-                        },
-                    },
-                ],
+        files: [
+          {
+            src: "./src/components/breadcrumb/index.tsx",
+            dest: "./components/breadcrumb.tsx",
+            transform: (content) => {
+              let newContent = content;
+
+              // for remove type export
+              const breadcrumbPropsExportRegex =
+                /export type BreadcrumbProps = RefineBreadcrumbProps<AntdBreadcrumbProps>;?/g;
+
+              newContent = newContent.replace(
+                breadcrumbPropsExportRegex,
+                `import { BreadcrumbProps } from "@refinedev/antd";`,
+              );
+
+              // change the breadcrumb import path
+              const breadcrumbImportRegex =
+                /BreadcrumbProps as AntdBreadcrumbProps,/g;
+
+              newContent = newContent.replace(breadcrumbImportRegex, "");
+
+              return newContent;
             },
-            {
-                group: "Other",
-                label: "ThemedLayoutV2",
-                message: `
+          },
+        ],
+      },
+      {
+        group: "Other",
+        label: "ThemedLayoutV2",
+        message: `
                 **\`Warning:\`**
                 If you want to change the default layout;
                 You should pass layout related components to the **<ThemedLayoutV2 />** component's props.
@@ -490,140 +475,128 @@ module.exports = {
                 }
                 \`\`\`
                 `,
-                files: [
-                    {
-                        src: "./src/components/themedLayoutV2/sider/index.tsx",
-                        dest: "./components/layout/sider.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-                            const imports = getImports(content);
-
-                            imports.map((importItem) => {
-                                // handle @components import replacement
-                                if (
-                                    importItem.importPath === "@components" ||
-                                    importItem.importPath === "@hooks"
-                                ) {
-                                    const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
-
-                                    newContent = newContent.replace(
-                                        importItem.statement,
-                                        newStatement,
-                                    );
-                                }
-
-                                // add content of ./styles.ts and remove import
-                                if (importItem.importPath === "./styles") {
-                                    newContent = newContent.replace(
-                                        importItem.statement,
-                                        "",
-                                    );
-
-                                    let appending = "";
-
-                                    try {
-                                        const stylesContent = getFileContent(
-                                            join(
-                                                dirname(
-                                                    "./src/components/themedLayoutV2/sider/index.tsx",
-                                                ),
-                                                "/styles.ts",
-                                            ),
-                                            "utf-8",
-                                        ).replace("export const", "const");
-
-                                        appending = stylesContent;
-                                    } catch (err) {
-                                        // console.log(err);
-                                    }
-
-                                    newContent = appendAfterImports(
-                                        newContent,
-                                        appending,
-                                    );
-                                }
-                            });
-
-                            return newContent;
-                        },
-                    },
-                    {
-                        src: "./src/components/themedLayoutV2/header/index.tsx",
-                        dest: "./components/layout/header.tsx",
-                    },
-                    {
-                        src: "./src/components/themedLayoutV2/title/index.tsx",
-                        dest: "./components/layout/title.tsx",
-                    },
-                    {
-                        src: "./src/components/themedLayoutV2/index.tsx",
-                        dest: "./components/layout/index.tsx",
-                        transform: (content) => {
-                            let newContent = content;
-                            const imports = getImports(content);
-
-                            imports.map((importItem) => {
-                                // handle @components import replacement
-                                if (
-                                    importItem.importPath === "@components" ||
-                                    importItem.importPath === "@contexts" ||
-                                    importItem.importPath === "@hooks"
-                                ) {
-                                    const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
-
-                                    newContent = newContent.replace(
-                                        importItem.statement,
-                                        newStatement,
-                                    );
-                                }
-                            });
-
-                            return newContent;
-                        },
-                    },
-                ],
-            },
-        ],
-        transform: (content) => {
-            let newContent = content;
-            const imports = getImports(content);
-
-            imports.map((importItem) => {
-                if (importItem.importPath === "@components") {
-                    const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
+        files: [
+          {
+            src: "./src/components/themedLayoutV2/sider/index.tsx",
+            dest: "./components/layout/sider.tsx",
+            transform: (content) => {
+              let newContent = content;
+              const imports = getImports(content);
+
+              imports.map((importItem) => {
+                // handle @components import replacement
+                if (
+                  importItem.importPath === "@components" ||
+                  importItem.importPath === "@hooks"
+                ) {
+                  const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
 
-                    newContent = newContent.replace(
-                        importItem.statement,
-                        newStatement,
-                    );
+                  newContent = newContent.replace(
+                    importItem.statement,
+                    newStatement,
+                  );
                 }
 
-                // for ui-types
-                if (importItem.importPath === "@refinedev/ui-types") {
-                    newContent = newContent.replace(importItem.statement, "");
-
-                    // prop is data-testid
-                    // remove data-testid={*} from props
-                    const testIdPropRegex = /data-testid={.*?}/g;
-
-                    newContent = newContent.replace(testIdPropRegex, "");
+                // add content of ./styles.ts and remove import
+                if (importItem.importPath === "./styles") {
+                  newContent = newContent.replace(importItem.statement, "");
+
+                  let appending = "";
+
+                  try {
+                    const stylesContent = getFileContent(
+                      join(
+                        dirname(
+                          "./src/components/themedLayoutV2/sider/index.tsx",
+                        ),
+                        "/styles.ts",
+                      ),
+                      "utf-8",
+                    ).replace("export const", "const");
+
+                    appending = stylesContent;
+                  } catch (err) {
+                    // console.log(err);
+                  }
+
+                  newContent = appendAfterImports(newContent, appending);
                 }
+              });
 
-                // for prop types
+              return newContent;
+            },
+          },
+          {
+            src: "./src/components/themedLayoutV2/header/index.tsx",
+            dest: "./components/layout/header.tsx",
+          },
+          {
+            src: "./src/components/themedLayoutV2/title/index.tsx",
+            dest: "./components/layout/title.tsx",
+          },
+          {
+            src: "./src/components/themedLayoutV2/index.tsx",
+            dest: "./components/layout/index.tsx",
+            transform: (content) => {
+              let newContent = content;
+              const imports = getImports(content);
+
+              imports.map((importItem) => {
+                // handle @components import replacement
                 if (
-                    importItem.importPath === "../types" ||
-                    importItem.importPath === "./types"
+                  importItem.importPath === "@components" ||
+                  importItem.importPath === "@contexts" ||
+                  importItem.importPath === "@hooks"
                 ) {
-                    const newStatement = `import type ${importItem.namedImports} from "@refinedev/antd";`;
+                  const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
 
-                    newContent = newContent.replace(
-                        importItem.statement,
-                        newStatement,
-                    );
+                  newContent = newContent.replace(
+                    importItem.statement,
+                    newStatement,
+                  );
                 }
-            });
+              });
 
-            return newContent;
-        },
+              return newContent;
+            },
+          },
+        ],
+      },
+    ],
+    transform: (content) => {
+      let newContent = content;
+      const imports = getImports(content);
+
+      imports.map((importItem) => {
+        if (importItem.importPath === "@components") {
+          const newStatement = `import ${importItem.namedImports} from "@refinedev/antd";`;
+
+          newContent = newContent.replace(importItem.statement, newStatement);
+        }
+
+        // for ui-types
+        if (importItem.importPath === "@refinedev/ui-types") {
+          newContent = newContent.replace(importItem.statement, "");
+
+          // prop is data-testid
+          // remove data-testid={*} from props
+          const testIdPropRegex = /data-testid={.*?}/g;
+
+          newContent = newContent.replace(testIdPropRegex, "");
+        }
+
+        // for prop types
+        if (
+          importItem.importPath === "../types" ||
+          importItem.importPath === "./types"
+        ) {
+          const newStatement = `import type ${importItem.namedImports} from "@refinedev/antd";`;
+
+          newContent = newContent.replace(importItem.statement, newStatement);
+        }
+      });
+
+      return newContent;
     },
+  },
 };