refactor(docs): snippet dx (#4044)

heroui-inc · Nov 14, 2024 · 2fad7a6 · 2fad7a6
1 parent 6a2a717
commit 2fad7a6
Show file tree

Hide file tree

Showing 18 changed files with 146 additions and 144 deletions.
diff --git a/apps/docs/content/components/snippet/colors.raw.jsx b/apps/docs/content/components/snippet/colors.raw.jsx
@@ -0,0 +1,14 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Snippet color="default">npm install @nextui-org/react</Snippet>
+      <Snippet color="primary">npm install @nextui-org/react</Snippet>
+      <Snippet color="secondary">npm install @nextui-org/react</Snippet>
+      <Snippet color="success">npm install @nextui-org/react</Snippet>
+      <Snippet color="warning">npm install @nextui-org/react</Snippet>
+      <Snippet color="danger">npm install @nextui-org/react</Snippet>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/snippet/colors.ts b/apps/docs/content/components/snippet/colors.ts
@@ -1,17 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Snippet color="default">npm install @nextui-org/react</Snippet>
-      <Snippet color="primary">npm install @nextui-org/react</Snippet>
-      <Snippet color="secondary">npm install @nextui-org/react</Snippet>
-      <Snippet color="success">npm install @nextui-org/react</Snippet>
-      <Snippet color="warning">npm install @nextui-org/react</Snippet>
-      <Snippet color="danger">npm install @nextui-org/react</Snippet>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/snippet/custom-icons.raw.jsx b/apps/docs/content/components/snippet/custom-icons.raw.jsx
@@ -0,0 +1,43 @@
+import {Snippet} from "@nextui-org/react";
+
+export const CopyIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 20}
+      shapeRendering="geometricPrecision"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="1.5"
+      viewBox="0 0 24 24"
+      width={size || width || 20}
+      {...props}
+    >
+      <path d="M6 17C4.89543 17 4 16.1046 4 15V5C4 3.89543 4.89543 3 6 3H13C13.7403 3 14.3866 3.4022 14.7324 4M11 21H18C19.1046 21 20 20.1046 20 19V9C20 7.89543 19.1046 7 18 7H11C9.89543 7 9 7.89543 9 9V19C9 20.1046 9.89543 21 11 21Z" />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="currentColor"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z" />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <Snippet checkIcon={<CheckIcon />} copyIcon={<CopyIcon />} variant="bordered">
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/custom-icons.ts b/apps/docs/content/components/snippet/custom-icons.ts
@@ -1,62 +1,7 @@
-export const CopyIcon = `export const CopyIcon = ({ size, height, width, ...props }) => {
-  return (
-    <svg
-      fill="none"
-      height={height || 20}
-      shape-rendering="geometricPrecision"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-      viewBox="0 0 24 24"
-      width={width || 20}
-      {...props}
-    >
-      <path d="M6 17C4.89543 17 4 16.1046 4 15V5C4 3.89543 4.89543 3 6 3H13C13.7403 3 14.3866 3.4022 14.7324 4M11 21H18C19.1046 21 20 20.1046 20 19V9C20 7.89543 19.1046 7 18 7H11C9.89543 7 9 7.89543 9 9V19C9 20.1046 9.89543 21 11 21Z" />
-    </svg>
-  );
-};`;
-
-export const CheckIcon = `export const CheckIcon = ({
-  size,
-  height,
-  width,
-  ...props
-}) => {
-  return (
-    <svg
-      width={size || width || 24}
-      height={size || height || 24}
-      viewBox="0 0 24 24"
-      fill="currentColor"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}
-    >
-      <path d="m2.394 13.742 4.743 3.62 7.616-8.704-1.506-1.316-6.384 7.296-3.257-2.486zm19.359-5.084-1.506-1.316-6.369 7.279-.753-.602-1.25 1.562 2.247 1.798z"/>
-    </svg>
-  );
-};`;
-
-const App = `import {Snippet} from "@nextui-org/react";
-import {CopyIcon} from "./CopyIcon";
-import {CheckIcon} from "./CheckIcon";
-
-export default function App() {
-  return (
-    <Snippet
-      variant="bordered"
-      copyIcon={<CopyIcon />}
-      checkIcon={<CheckIcon />}
-    >
-      npm install @nextui-org/react
-    </Snippet>
-  );
-}`;
+import App from "./custom-icons.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,
-  "/CopyIcon.jsx": CopyIcon,
-  "/CheckIcon.jsx": CheckIcon,
 };
 
 export default {

diff --git a/apps/docs/content/components/snippet/custom-tooltip.raw.jsx b/apps/docs/content/components/snippet/custom-tooltip.raw.jsx
@@ -0,0 +1,17 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet
+      tooltipProps={{
+        color: "foreground",
+        content: "Copy this snippet",
+        disableAnimation: true,
+        placement: "right",
+        closeDelay: 0,
+      }}
+    >
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/custom-tooltip.ts b/apps/docs/content/components/snippet/custom-tooltip.ts
@@ -1,20 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet
-      tooltipProps={{
-        color: "foreground",
-        content: "Copy this snippet",
-        disableAnimation: true,
-        placement: "right",
-        closeDelay: 0
-      }}
-    >
-      npm install @nextui-org/react
-    </Snippet>
-  );
-}`;
+import App from "./custom-tooltip.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/snippet/multiline.raw.jsx b/apps/docs/content/components/snippet/multiline.raw.jsx
@@ -0,0 +1,11 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet>
+      <span>npm install @nextui-org/react</span>
+      <span>yarn add @nextui-org/react</span>
+      <span>pnpm add @nextui-org/react</span>
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/multiline.ts b/apps/docs/content/components/snippet/multiline.ts
@@ -1,14 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet>
-      <span>npm install @nextui-org/react</span>
-      <span>yarn add @nextui-org/react</span>
-      <span>pnpm add @nextui-org/react</span>
-    </Snippet>
-  );
-}`;
+import App from "./multiline.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/snippet/sizes.raw.jsx b/apps/docs/content/components/snippet/sizes.raw.jsx
@@ -0,0 +1,11 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Snippet size="sm">npm install @nextui-org/react</Snippet>
+      <Snippet size="md">npm install @nextui-org/react</Snippet>
+      <Snippet size="lg">npm install @nextui-org/react</Snippet>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/snippet/sizes.ts b/apps/docs/content/components/snippet/sizes.ts
@@ -1,14 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Snippet size="sm">npm install @nextui-org/react</Snippet>
-      <Snippet size="md">npm install @nextui-org/react</Snippet>
-      <Snippet size="lg">npm install @nextui-org/react</Snippet>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/snippet/symbol.raw.jsx b/apps/docs/content/components/snippet/symbol.raw.jsx
@@ -0,0 +1,9 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet symbol="#" variant="bordered">
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/symbol.ts b/apps/docs/content/components/snippet/symbol.ts
@@ -1,10 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet symbol="#" variant="bordered">npm install @nextui-org/react</Snippet>
-  );
-}`;
+import App from "./symbol.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/snippet/usage.raw.jsx b/apps/docs/content/components/snippet/usage.raw.jsx
@@ -0,0 +1,5 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return <Snippet>npm install @nextui-org/react</Snippet>;
+}
diff --git a/apps/docs/content/components/snippet/usage.ts b/apps/docs/content/components/snippet/usage.ts
@@ -1,10 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet>npm install @nextui-org/react</Snippet>
-  );
-}`;
+import App from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/snippet/variants.raw.jsx b/apps/docs/content/components/snippet/variants.raw.jsx
@@ -0,0 +1,18 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex flex-wrap gap-4">
+      <Snippet variant="bordered">npm install @nextui-org/react</Snippet>
+      <Snippet color="warning" variant="flat">
+        npm install @nextui-org/react
+      </Snippet>
+      <Snippet color="primary" variant="solid">
+        npm install @nextui-org/react
+      </Snippet>
+      <Snippet color="secondary" variant="shadow">
+        npm install @nextui-org/react
+      </Snippet>
+    </div>
+  );
+}
diff --git a/apps/docs/content/components/snippet/variants.ts b/apps/docs/content/components/snippet/variants.ts
@@ -1,15 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex flex-wrap gap-4">
-      <Snippet variant="bordered">npm install @nextui-org/react</Snippet>
-      <Snippet variant="flat" color="warning">npm install @nextui-org/react</Snippet>
-      <Snippet variant="solid" color="primary">npm install @nextui-org/react</Snippet>
-      <Snippet variant="shadow" color="secondary">npm install @nextui-org/react</Snippet>
-    </div> 
-  );
-}`;
+import App from "./variants.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

diff --git a/apps/docs/content/components/snippet/without-copy.raw.jsx b/apps/docs/content/components/snippet/without-copy.raw.jsx
@@ -0,0 +1,9 @@
+import {Snippet} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Snippet hideCopyButton color="primary" variant="solid">
+      npm install @nextui-org/react
+    </Snippet>
+  );
+}
diff --git a/apps/docs/content/components/snippet/without-copy.ts b/apps/docs/content/components/snippet/without-copy.ts
@@ -1,12 +1,4 @@
-const App = `import {Snippet} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Snippet hideCopyButton color="primary" variant="solid">
-      npm install @nextui-org/react
-    </Snippet>
-  );
-}`;
+import App from "./without-copy.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,