feat: dropdown 2.0

.github/workflows/release-rc.yaml

@@ -50,7 +50,7 @@ jobs:
           GIT_REFNAME: ${{ github.ref_name }}
 
       - name: Run Release 🚀
-        run: pnpm run release:ci
+        run: pnpm run release:ci --npm.tag=next
         working-directory: ./packages/raystack
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yaml

@@ -50,7 +50,7 @@ jobs:
           GIT_REFNAME: ${{ github.ref_name }}
 
       - name: Run Release 🚀
-        run: pnpm run release:ci
+        run: pnpm run release:ci --npm.tag=latest
         working-directory: ./packages/raystack
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

apps/www/package.json

@@ -21,7 +21,7 @@
     "lucide-react": "^0.477.0",
     "next": "14.2.5",
     "next-themes": "^0.4.4",
-    "prettier": "^2.5.1",
+    "prettier": "^2.8.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-live": "^4.1.8",

apps/www/src/components/demo/demo-preview.tsx

@@ -2,15 +2,24 @@
 
 import { useState } from "react";
 import { LiveProvider } from "react-live";
+import { cx } from "class-variance-authority";
+import { Tab, Tabs } from "fumadocs-ui/components/tabs";
 import Preview from "../preview";
 import Editor from "../editor";
 import styles from "./styles.module.css";
 import { DemoPreviewProps } from "./types";
-import { cx } from "class-variance-authority";
 
-export default function DemoPreview({ code, tabs, scope }: DemoPreviewProps) {
+export default function DemoPreview({
+  code,
+  tabs,
+  scope,
+  codePreview,
+}: DemoPreviewProps) {
   const [activeTab, setActiveTab] = useState(0);
   const activeCode = ((tabs ? tabs[activeTab].code : code) ?? "").trim();
+
+  const previewCode =
+    typeof codePreview === "string" ? codePreview : activeCode;
   return (
     <LiveProvider code={activeCode} scope={scope} disabled>
       <div className={styles.container}>
@@ -32,7 +41,19 @@ export default function DemoPreview({ code, tabs, scope }: DemoPreviewProps) {
         <div className={styles.preview}>
           <Preview />
         </div>
-        <Editor code={activeCode} />
+        {Array.isArray(codePreview) ? (
+          <Tabs
+            items={codePreview.map(tab => tab.label)}
+            className={styles.codeTabGroup}>
+            {codePreview.map(tab => (
+              <Tab className={styles.codeTab} value={tab.label}>
+                <Editor code={tab.code} />
+              </Tab>
+            ))}
+          </Tabs>
+        ) : (
+          <Editor code={previewCode} />
+        )}
       </div>
     </LiveProvider>
   );

apps/www/src/components/demo/demo.tsx

@@ -8,11 +8,21 @@ import DemoPlayground from "./demo-playground";
 import { Suspense } from "react";
 import { Info, X, Home, Laugh } from "lucide-react";
 import DataTableDemo from "../datatable-demo";
+import LinearDropdownDemo from "../linear-dropdown-demo";
 
 export default function Demo(props: DemoProps) {
   const {
     data,
-    scope = { ...Apsara, ...ApsaraV1, DataTableDemo, Info, X, Home, Laugh },
+    scope = {
+      ...Apsara,
+      ...ApsaraV1,
+      DataTableDemo,
+      LinearDropdownDemo,
+      Info,
+      X,
+      Home,
+      Laugh,
+    },
   } = props;
 
   if (data.type === "code") {

apps/www/src/components/demo/styles.module.css

@@ -99,6 +99,21 @@
 .iconButton.active {
   border-color: var(--rs-color-background-accent-emphasis);
 }
+
+.codeTabGroup {
+  border-radius: 0;
+  margin: 0;
+  border-bottom: none;
+  border-right: none;
+  border-left: none;
+  padding: 0;
+}
+
+.codeTab {
+  border-radius: 0;
+  padding: 0;
+}
+
 @media (max-width: 920px) {
   .previewContainer {
     flex-direction: column;

apps/www/src/components/demo/types.ts

@@ -1,10 +1,15 @@
 export type ScopeType = Record<string, unknown>;
 
+type TabProps = {
+  label: string;
+  code: string;
+};
 export type DemoPreviewProps = {
   type: "code";
   code?: string;
   tabs?: { name: string; code: string }[];
   scope?: ScopeType;
+  codePreview?: string | TabProps[];
 };
 
 export type DemoPlaygroundProps = {