feat: add script to generate preview imports

Author: mehdibha

README.md

@@ -43,13 +43,11 @@
 
 ## About The Project
 
-in 2024, shadcn/ui popularized the copy paste method instead of installing multiple dependencies that you can not control only via props. 
+in 2024, shadcn/ui popularized the copy paste method instead of installing multiple dependencies that you can not control only via props.
 rCopy wants to extend this not only for core components but for any kind of components, hooks, icons, pages and more.
 
 If you want to join this journey, <a href="https://discord.gg/DXpj5V2fU8">join our discord community</a>
 
-
-
 ### Built with
 
 - Next.js (v14 with app dir) and React

content/hooks/use-continuous-retry.mdx

@@ -2,3 +2,5 @@
 title: useContinuousRetry
 description: Automates retries of a callback function until it succeeds with useContinuousRetry
 ---
+
+<ComponentPreview name="hooks/use-continuous-retry" />

content/hooks/use-continuous-retry.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-debounce.tsx

@@ -11,7 +11,7 @@ export default function UseDebounceDemo() {
   const debouncedValue = useDebounce<string>(searchInput, 1000);
 
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setIsLoading(false)
+    setIsLoading(false);
     setSearchInput(e.target.value);
   };
 
@@ -30,7 +30,7 @@ export default function UseDebounceDemo() {
   return (
     <div className="relative w-52">
       {isLoading ? (
-        <div className="absolute left-2 h-full flex items-center">
+        <div className="absolute left-2 flex h-full items-center">
           <Loader2Icon
             size={18}
             className="pointer-events-none animate-spin text-muted-foreground"

content/hooks/use-fetch.mdx

@@ -2,3 +2,5 @@
 title: useFetch
 description: Fetch data with accurate states, caching, and no stale responses using useFetch.
 ---
+
+<ComponentPreview name="hooks/use-fetch" />

content/hooks/use-fetch.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-intersection-observer.mdx

@@ -2,3 +2,5 @@
 title: useIntersectionObserver
 description: Track and manage the visibility of your DOM elements within the viewport with useIntersectionObserver.
 ---
+
+<ComponentPreview name="hooks/use-intersection-observer" />

content/hooks/use-intersection-observer.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-local-storage.mdx

@@ -1,4 +1,6 @@
 ---
 title: useLocalStorage
 description: Store, retrieve, and synchronize data from the browser’s localStorage API with useLocalStorage
----
+---
+
+<ComponentPreview name="hooks/use-local-storage" />

content/hooks/use-local-storage.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-media-query.mdx

@@ -1,4 +1,6 @@
 ---
 title: useMediaQuery
 description: Subscribe and respond to media query changes with useMediaQuery.
----
+---
+
+<ComponentPreview name="hooks/use-media-query" />

content/hooks/use-media-query.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-network-state.mdx

@@ -2,3 +2,5 @@
 title: useNetworkState
 description: Monitor and adapt to network conditions seamlessly with useNetworkState.
 ---
+
+<ComponentPreview name="hooks/use-network-state" />

content/hooks/use-network-state.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-orientation.mdx

@@ -2,3 +2,5 @@
 title: useOrientation
 description: Manage and respond to changes in device orientation with useOrientation.
 ---
+
+<ComponentPreview name="hooks/use-orientation" />

content/hooks/use-orientation.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-prefeerred-language.mdx

@@ -1,4 +1,6 @@
 ---
 title: usePreferredLanguage
 description: Adapt to user language preferences dynamically with usePreferredLanguage.
----
+---
+
+<ComponentPreview name="hooks/use-preferred-language" />

content/hooks/use-prefeerred-language.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-previous.mdx

@@ -1,4 +1,6 @@
 ---
 title: usePrevious
 description: Track the previous value of a variable with usePrevious.
----
+---
+
+<ComponentPreview name="hooks/use-previous" />

content/hooks/use-previous.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-session-storage.mdx

@@ -2,3 +2,5 @@
 title: useSessionStorage
 description: Store, retrieve, and synchronize data from the browser’s session storage with useSessionStorage.
 ---
+
+<ComponentPreview name="hooks/use-sesssion-storage" />

content/hooks/use-session-storage.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-visibility-change.mdx

@@ -2,3 +2,5 @@
 title: useVisibilityChange
 description: Track document visibility and respond to changes with useVisibilityChange.
 ---
+
+<ComponentPreview name="hooks/use-visibility-change" />

content/hooks/use-visibility-change.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

content/hooks/use-window-size.mdx

@@ -1,4 +1,6 @@
 ---
 title: useWindowSize
 description: Track the dimensions of the browser window with useWindowSize.
----
+---
+
+<ComponentPreview name="hooks/use-window-size" />

content/hooks/use-window-size.tsx

@@ -0,0 +1,3 @@
+export default function Demo() {
+  return <div>demo</div>;
+}

package.json

@@ -5,6 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "next build",
+    "build:preview-imports": "tsx ./scripts/build-preview-imports.ts",
     "start": "next start",
     "dev": "next dev",
     "typecheck": "tsc --noEmit",
@@ -60,6 +61,7 @@
     "superjson": "^2.2.1",
     "tailwind-merge": "^2.2.0",
     "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.7.1",
     "use-debounce": "^10.0.0",
     "vfile": "^6.0.1",
     "vfile-matter": "^5.0.0",
@@ -83,6 +85,7 @@
     "prettier": "^3.1.0",
     "prettier-plugin-tailwindcss": "^0.5.7",
     "prisma": "^5.6.0",
+    "rimraf": "^5.0.5",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.1.6"
   },