refactor(docs): chip-dx

apps/docs/content/components/chip/avatar.raw.jsx

@@ -0,0 +1,20 @@
+import {Chip, Avatar} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip
+        avatar={<Avatar name="JW" src="https://i.pravatar.cc/300?u=a042581f4e29026709d" />}
+        variant="flat"
+      >
+        Avatar
+      </Chip>
+      <Chip
+        avatar={<Avatar getInitials={(name) => name.charAt(0)} name="JW" size="sm" />}
+        variant="flat"
+      >
+        Avatar
+      </Chip>
+    </div>
+  );
+}

apps/docs/content/components/chip/avatar.ts

@@ -1,30 +1,4 @@
-const App = `import {Chip, Avatar} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip
-        variant="flat"
-        avatar={
-          <Avatar
-            name="JW"
-            src="https://i.pravatar.cc/300?u=a042581f4e29026709d"
-          />
-        }
-      >
-        Avatar
-      </Chip>
-      <Chip
-        variant="flat"
-        avatar={
-          <Avatar name="JW" size="sm" getInitials={(name) => name.charAt(0)} />
-        }
-      >
-        Avatar
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./avatar.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/close-button.raw.jsx

@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      {/* eslint-disable no-console */}
+      <Chip onClose={() => console.log("close")}>Chip</Chip>
+      {/* eslint-disable no-console */}
+      <Chip variant="bordered" onClose={() => console.log("close")}>
+        Chip
+      </Chip>
+    </div>
+  );
+}

apps/docs/content/components/chip/close-button.ts

@@ -1,15 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip onClose={() => console.log("close")}>Chip</Chip>
-      <Chip onClose={() => console.log("close")} variant="bordered">
-        Chip
-      </Chip>
-    </div>
-  );
-}`;
+import App from "./close-button.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/colors.raw.jsx

@@ -0,0 +1,14 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="default">Default</Chip>
+      <Chip color="primary">Primary</Chip>
+      <Chip color="secondary">Secondary</Chip>
+      <Chip color="success">Success</Chip>
+      <Chip color="warning">Warning</Chip>
+      <Chip color="danger">Danger</Chip>
+    </div>
+  );
+}

apps/docs/content/components/chip/colors.ts

@@ -1,17 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip color="default">Default</Chip>
-      <Chip color="primary">Primary</Chip>
-      <Chip color="secondary">Secondary</Chip>
-      <Chip color="success">Success</Chip>
-      <Chip color="warning">Warning</Chip>
-      <Chip color="danger">Danger</Chip>
-    </div> 
-  );
-}`;
+import App from "./colors.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/custom-styles.raw.jsx

@@ -0,0 +1,15 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip
+      classNames={{
+        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
+        content: "drop-shadow shadow-black text-white",
+      }}
+      variant="shadow"
+    >
+      New
+    </Chip>
+  );
+}

apps/docs/content/components/chip/custom-styles.ts

@@ -1,18 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip
-      variant="shadow"
-      classNames={{
-        base: "bg-gradient-to-br from-indigo-500 to-pink-500 border-small border-white/50 shadow-pink-500/30",
-        content: "drop-shadow shadow-black text-white",
-      }}
-    >
-      New
-    </Chip>
-  );
-}`;
+import App from "./custom-styles.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/disabled.raw.jsx

@@ -0,0 +1,9 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <Chip isDisabled color="primary">
+      Chip
+    </Chip>
+  );
+}

apps/docs/content/components/chip/disabled.ts

@@ -1,10 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <Chip isDisabled color="primary">Chip</Chip>
-  );
-}`;
+import App from "./disabled.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/list.raw.jsx

@@ -0,0 +1,24 @@
+import {Chip} from "@nextui-org/react";
+
+const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"];
+
+export default function App() {
+  const [fruits, setFruits] = React.useState(initialFruits);
+
+  const handleClose = (fruitToRemove) => {
+    setFruits(fruits.filter((fruit) => fruit !== fruitToRemove));
+    if (fruits.length === 1) {
+      setFruits(initialFruits);
+    }
+  };
+
+  return (
+    <div className="flex gap-2">
+      {fruits.map((fruit, index) => (
+        <Chip key={index} variant="flat" onClose={() => handleClose(fruit)}>
+          {fruit}
+        </Chip>
+      ))}
+    </div>
+  );
+}

apps/docs/content/components/chip/list.ts

@@ -1,27 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-const initialFruits = ["Apple", "Banana", "Cherry", "Watermelon", "Orange"]
-
-export default function App() {
-  const [fruits, setFruits] = React.useState(initialFruits);
-
-  const handleClose = (fruitToRemove) => {
-    setFruits(fruits.filter(fruit => fruit !== fruitToRemove));
-    if (fruits.length === 1) {
-      setFruits(initialFruits);
-    }
-  };
-
-  return (
-    <div className="flex gap-2">
-      {fruits.map((fruit, index) => (
-        <Chip key={index} onClose={() => handleClose(fruit)} variant="flat">
-          {fruit}
-        </Chip>
-      ))}
-    </div>
-  );
-}`;
+import App from "./list.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/radius.raw.jsx

@@ -0,0 +1,12 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip radius="full">Full</Chip>
+      <Chip radius="lg">Large</Chip>
+      <Chip radius="md">Medium</Chip>
+      <Chip radius="sm">Small</Chip>
+    </div>
+  );
+}

apps/docs/content/components/chip/radius.ts

@@ -1,15 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip radius="full">Full</Chip>
-      <Chip radius="lg">Large</Chip>
-      <Chip radius="md">Medium</Chip>
-      <Chip radius="sm">Small</Chip>
-    </div>  
-  );
-}`;
+import App from "./radius.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/sizes.raw.jsx

@@ -0,0 +1,11 @@
+import {Chip} from "@nextui-org/react";
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip size="sm">Small</Chip>
+      <Chip size="md">Medium</Chip>
+      <Chip size="lg">Large</Chip>
+    </div>
+  );
+}

apps/docs/content/components/chip/sizes.ts

@@ -1,14 +1,4 @@
-const App = `import {Chip} from "@nextui-org/react";
-
-export default function App() {
-  return (
-    <div className="flex gap-4">
-      <Chip size="sm">Small</Chip>
-      <Chip size="md">Medium</Chip>
-      <Chip size="lg">Large</Chip>
-    </div>  
-  );
-}`;
+import App from "./sizes.raw.jsx?raw";
 
 const react = {
   "/App.jsx": App,

apps/docs/content/components/chip/start-end-content.raw.jsx

@@ -0,0 +1,52 @@
+import {Chip} from "@nextui-org/react";
+
+export const NotificationIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M18.707 8.796c0 1.256.332 1.997 1.063 2.85.553.628.73 1.435.73 2.31 0 .874-.287 1.704-.863 2.378a4.537 4.537 0 01-2.9 1.413c-1.571.134-3.143.247-4.736.247-1.595 0-3.166-.068-4.737-.247a4.532 4.532 0 01-2.9-1.413 3.616 3.616 0 01-.864-2.378c0-.875.178-1.682.73-2.31.754-.854 1.064-1.594 1.064-2.85V8.37c0-1.682.42-2.781 1.283-3.858C7.861 2.942 9.919 2 11.956 2h.09c2.08 0 4.204.987 5.466 2.625.82 1.054 1.195 2.108 1.195 3.745v.426zM9.074 20.061c0-.504.462-.734.89-.833.5-.106 3.545-.106 4.045 0 .428.099.89.33.89.833-.025.48-.306.904-.695 1.174a3.635 3.635 0 01-1.713.731 3.795 3.795 0 01-1.008 0 3.618 3.618 0 01-1.714-.732c-.39-.269-.67-.694-.695-1.173z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  );
+};
+
+export const CheckIcon = ({size, height, width, ...props}) => {
+  return (
+    <svg
+      fill="none"
+      height={size || height || 24}
+      viewBox="0 0 24 24"
+      width={size || width || 24}
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
+export default function App() {
+  return (
+    <div className="flex gap-4">
+      <Chip color="success" startContent={<CheckIcon size={18} />} variant="faded">
+        Chip
+      </Chip>
+      <Chip color="secondary" endContent={<NotificationIcon size={18} />} variant="flat">
+        Chip
+      </Chip>
+    </div>
+  );
+}