fix: export separatedly components with document error (#112)

Author: hussedev

colors.md

@@ -82,6 +82,31 @@
       "types": "./dist/retrofunding.d.ts",
       "import": "./dist/retrofunding.js",
       "require": "./dist/retrofunding.js"
+    },
+    "./form": {
+      "types": "./dist/form.d.ts",
+      "import": "./dist/form.js",
+      "require": "./dist/form.js"
+    },
+    "./setup-progress-form": {
+      "types": "./dist/setupProgressForm.d.ts",
+      "import": "./dist/setupProgressForm.js",
+      "require": "./dist/setupProgressForm.js"
+    },
+    "./accordion": {
+      "types": "./dist/accordion.d.ts",
+      "import": "./dist/accordion.js",
+      "require": "./dist/accordion.js"
+    },
+    "./markdown-editor": {
+      "types": "./dist/markdownEditor.d.ts",
+      "import": "./dist/markdownEditor.js",
+      "require": "./dist/markdownEditor.js"
+    },
+    "./markdown": {
+      "types": "./dist/markdown.d.ts",
+      "import": "./dist/markdown.js",
+      "require": "./dist/markdown.js"
     }
   },
   "devDependencies": {

package.json

@@ -1,3 +1,5 @@
+"use client";
+
 import { CartesianGrid, Line, YAxis, LineChart } from "recharts";
 
 export const AllocationChart = ({

src/components/AllocationSidebar/components/AllocationChart.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { PropsWithChildren } from "react";
 
 import { cn } from "@/lib/utils";

src/components/AllocationSidebar/components/AllocationItem.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { ArrowDownNarrowWide } from "lucide-react";
 import { ArrowUpWideNarrow } from "lucide-react";
 

src/components/AllocationSidebar/components/AllocationSortButton.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@/lib/utils";
 import { Skeleton } from "@/primitives/Skeleton";
 

src/components/AllocationSidebar/components/SkeletonAllocationItems.tsx

@@ -1,4 +1,5 @@
-// src/components/Form/FormAllowlistController.tsx
+"use client";
+
 import React, { useRef } from "react";
 import { useFormContext, Controller } from "react-hook-form";
 

src/components/Form/FormControllers/AllowlistFormController/AllowlistFormController.tsx

@@ -1,4 +1,5 @@
-// src/components/Form/ApplicationQuestionsController.tsx
+"use client";
+
 import React from "react";
 import { useEffect } from "react";
 import { useFieldArray, useFormContext, Controller } from "react-hook-form";

src/components/Form/FormControllers/ApplicationQuestionsFormController/ApplicationQuestionsFormController.tsx

@@ -1,4 +1,5 @@
-// src/components/Form/DisabledInputController.tsx
+"use client";
+
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 

src/components/Form/FormControllers/DisabledProgramInputFormController/DisabledProgramInputFormController.tsx

@@ -1,4 +1,5 @@
-// src/components/Form/FieldArrayController.tsx
+"use client";
+
 import React from "react";
 import { useFieldArray, useFormContext, Controller } from "react-hook-form";
 

src/components/Form/FormControllers/FieldArrayFormController/FieldArrayFormController.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 

src/components/Form/FormControllers/FileUploadController/FileUploadController.tsx

@@ -1,4 +1,5 @@
-// src/components/Form/MarkdownEditorController.tsx
+"use client";
+
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 

src/components/Form/FormControllers/MarkdownEditorFormController/MarkdownEditorFormController.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 

src/components/Form/FormControllers/MetricsFormController/MetricsFormController.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 import { useFormContext, Controller } from "react-hook-form";
 

src/components/Form/FormControllers/RoundDatesFormController/RoundDatesFormController.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import moment from "moment-timezone";

src/components/Form/FormControllers/RoundDatesFormController/SelectedDateRenderer.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { CheckCircle2Icon } from "lucide-react";
 
 import { Label } from "@/ui-shadcn/label";

src/components/Form/FormControllers/RoundDatesFormController/TimelineRow.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import React from "react";
 import { Controller, useFormContext } from "react-hook-form";
 

src/components/Form/FormControllers/SelectFormController/SelectFormController.tsx

@@ -1,4 +1,3 @@
-// File: utils/buildSchemaFromFields.ts
 import { z } from "zod";
 
 import { FormField } from "../types/fieldTypes";

src/components/Form/utils/buildSchemaFromFields.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import "lucide-react";
 
 import { cn } from "@/lib/utils";

src/components/IconLabel/IconLabelContainer.tsx

@@ -1,4 +1,3 @@
-import { HeroiconsType } from "@/assets";
 import { IconType } from "@/primitives/Icon";
 
 interface AIEvaluationProps {

src/components/IconLabel/types.ts

@@ -1,3 +1,5 @@
+"use client";
+
 import { tv } from "tailwind-variants";
 
 import { AccordionItem, NavItem, InternalSideNavProps } from "@/components/SideNav";

src/components/SideNav/SideNav.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { SideNavItem } from "@/components/SideNav";
 import { cn } from "@/lib/utils";
 import { Icon } from "@/primitives/Icon";

src/components/SideNav/components/NavItem.tsx

@@ -1,9 +1,6 @@
-export * from "./AllocationSidebar";
-export * from "./EvaluationForm";
 export * from "./Form";
 export * from "./IconLabel";
 export * from "./ProgressModal";
 export * from "./RadioGroupList";
-export * from "./SetupProgressForm";
 export * from "./SideNav";
 export * from "./Toaster";

src/components/index.ts

@@ -0,0 +1 @@
+export * from "./withSSR";

src/lib/withSSR/index.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+
+export function withSSR<P extends object>(
+  Component: React.ComponentType<P>,
+  fallback: React.ReactNode = null,
+) {
+  return function SSRSafeComponent(props: P) {
+    const [mounted, setMounted] = React.useState(false);
+
+    React.useEffect(() => {
+      setMounted(true);
+    }, []);
+
+    if (!mounted) {
+      return <>{fallback}</>;
+    }
+
+    return <Component {...props} />;
+  };
+}

src/lib/withSSR/withSSR.tsx

@@ -2,8 +2,8 @@ import type { Meta, StoryObj } from "@storybook/react";
 
 import { DefaultLogo } from "@/assets";
 import { CheckerIcon } from "@/assets/icons";
+import { Button } from "@/primitives/Button";
 
-import { Button } from "../Button";
 import { Navbar } from "./Navbar";
 
 // Adjust the path as needed

src/primitives/Navbar/Navbar.stories.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import * as React from "react";
 
 import { tv } from "tailwind-variants";

src/primitives/Navbar/Navbar.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { GitcoinLogo } from "@/assets";
 
 const defaultLogo = GitcoinLogo;

src/primitives/Navbar/components/NavbarLogo.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import { cn } from "@/lib";
 
 export interface NavbarTitleProps {

src/primitives/Navbar/components/NavbarTitle.tsx

@@ -18,6 +18,13 @@ export default defineConfig({
         mocks: resolve(__dirname, "./src/mocks/handlers.ts"),
         types: resolve(__dirname, "./src/types/index.ts"),
 
+        // client
+        setupProgressForm: resolve(__dirname, "./src/components/SetupProgressForm/index.ts"),
+        form: resolve(__dirname, "./src/components/Form/index.ts"),
+        accordion: resolve(__dirname, "./src/primitives/Accordion/index.ts"),
+        markdownEditor: resolve(__dirname, "./src/primitives/MarkdownEditor/index.ts"),
+        markdown: resolve(__dirname, "./src/primitives/Markdown/index.ts"),
+
         // features
         application: resolve(__dirname, "./src/features/application/index.ts"),
         checker: resolve(__dirname, "./src/features/checker/index.ts"),