Skip to content

Commit eaaacca

Browse files
ariflogsariflogs
authored
Merge pull request #63 from Logging-Stuff/pnpm-bun-yarn-cli
docs: pnpm, yarn, bun cli options
2 parents 9e951ae + 2970e64 commit eaaacca

30 files changed

+164
-164
lines changed

‎components/CodeBlock.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export function CodeBlock({ className, children, ...props }: ICodeBlock) {
2828
}, 3000);
2929
}
3030
};
31+
3132
return (
3233
<div className="relative">
3334
<pre

‎components/ComponentInstall.tsx‎

Lines changed: 100 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,108 @@
1-
import { componentConfig } from "@/config";
21
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
3-
import { Code } from "lucide-react";
2+
import React from "react";
43
import { HTMLAttributes } from "react";
4+
import { Check, Copy } from "lucide-react";
5+
import { useState } from "react";
6+
import { Button } from "./retroui";
57

68
interface IComponentShowcase extends HTMLAttributes<HTMLDivElement> {}
79

8-
function ComponentInstallCli({ children }: { children: React.ReactNode }) {
9-
return <TabPanel>{children}</TabPanel>;
10+
const CopyableCommand = ({ command }: { command: string }) => {
11+
const [copied, setCopied] = useState(false);
12+
13+
const copyToClipboard = async () => {
14+
await navigator.clipboard.writeText(command);
15+
setCopied(true);
16+
setTimeout(() => setCopied(false), 2000);
17+
};
18+
19+
return (
20+
<div className="flex items-center justify-between gap-2 group">
21+
<code className="flex-1">{command}</code>
22+
<Button size="sm" onClick={copyToClipboard} title="Copy to clipboard">
23+
{copied ? "Copied" : "Copy"}
24+
</Button>
25+
</div>
26+
);
27+
};
28+
29+
export function CliCommand({
30+
npmCommand,
31+
yarnCommand,
32+
pnpmCommand,
33+
bunCommand,
34+
}: {
35+
npmCommand: string;
36+
yarnCommand?: string;
37+
pnpmCommand?: string;
38+
bunCommand?: string;
39+
}) {
40+
const isNpx = npmCommand.includes("npx");
41+
if (isNpx) {
42+
pnpmCommand = pnpmCommand ?? npmCommand.replace("npx", "pnpm dlx");
43+
yarnCommand = yarnCommand ?? npmCommand.replace("npx", "yarn dlx");
44+
bunCommand = bunCommand ?? npmCommand.replace("npx", "bunx");
45+
} else {
46+
pnpmCommand = pnpmCommand ?? npmCommand.replace("npm", "pnpm");
47+
yarnCommand = yarnCommand ?? npmCommand.replace("npm install", "yarn add");
48+
bunCommand = bunCommand ?? npmCommand.replace("npm", "bun");
49+
}
50+
51+
return (
52+
<TabGroup className="p-4 my-2 bg-gray-800 rounded-md text-background/90">
53+
<TabList className="flex space-x-4 mb-6 text-sm">
54+
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
55+
pnpm
56+
</Tab>
57+
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
58+
npm
59+
</Tab>
60+
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
61+
yarn
62+
</Tab>
63+
<Tab className="cursor-pointer text-gray-400 relative px-2 py-1 bg-transparent data-selected:border-b-2 border-accent data-selected:text-white focus:outline-hidden">
64+
bun
65+
</Tab>
66+
</TabList>
67+
<TabPanels className="text-sm text-accent">
68+
<TabPanel>
69+
<CopyableCommand command={pnpmCommand} />
70+
</TabPanel>
71+
<TabPanel>
72+
<CopyableCommand command={npmCommand} />
73+
</TabPanel>
74+
<TabPanel>
75+
<CopyableCommand command={yarnCommand} />
76+
</TabPanel>
77+
<TabPanel>
78+
<CopyableCommand command={bunCommand} />
79+
</TabPanel>
80+
</TabPanels>
81+
</TabGroup>
82+
);
83+
}
84+
85+
function ComponentInstallCli({
86+
npmCommand,
87+
yarnCommand,
88+
pnpmCommand,
89+
bunCommand,
90+
}: {
91+
npmCommand: string;
92+
yarnCommand?: string;
93+
pnpmCommand?: string;
94+
bunCommand?: string;
95+
}) {
96+
return (
97+
<TabPanel>
98+
<CliCommand
99+
npmCommand={npmCommand}
100+
yarnCommand={yarnCommand}
101+
pnpmCommand={pnpmCommand}
102+
bunCommand={bunCommand}
103+
/>
104+
</TabPanel>
105+
);
10106
}
11107

12108
function ComponentInstallManual({ children }: { children: React.ReactNode }) {

‎components/MDX.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import { cn } from "@/lib/utils";
88
import { ComponentSource } from "./ComponentSource";
99
import { CodeBlock } from "./CodeBlock";
1010
import Link from "next/link";
11-
import { ComponentInstall } from "./ComponentInstall";
11+
import { ComponentInstall, CliCommand } from "./ComponentInstall";
1212
import Image from "next/image";
1313
import { Tab, TabGroup, TabList, TabPanel, TabPanels } from "@headlessui/react";
1414

@@ -103,6 +103,7 @@ const components = (type: "doc" | "blog") => ({
103103
ComponentShowcase,
104104
ComponentSource,
105105
ComponentInstall,
106+
CliCommand,
106107
});
107108

108109
export default function MDX({

‎content/docs/components/accordion.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,7 @@ links:
1414
## Installation
1515

1616
<ComponentInstall>
17-
<ComponentInstall.Cli>
18-
```sh
19-
npx shadcn@latest add "https://retroui.dev/r/accordion.json"
20-
```
21-
</ComponentInstall.Cli>
17+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/accordion.json'" />
2218
<ComponentInstall.Manual>
2319
#### 1. Install dependencies:
2420

‎content/docs/components/alert.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ lastUpdated: 24 Oct, 2024
99
<br />
1010

1111
<ComponentInstall>
12-
<ComponentInstall.Cli>
13-
```sh
14-
npx shadcn@latest add "https://retroui.dev/r/alert.json"
15-
```
16-
</ComponentInstall.Cli>
12+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/alert.json'" />
1713
<ComponentInstall.Manual>
1814
#### 1. Install dependencies:
1915

‎content/docs/components/avatar.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ lastUpdated: 12 Oct, 2024
99
<br />
1010

1111
<ComponentInstall>
12-
<ComponentInstall.Cli>
13-
```sh
14-
npx shadcn@latest add "https://retroui.dev/r/avatar.json"
15-
```
16-
</ComponentInstall.Cli>
12+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/avatar.json'" />
1713
<ComponentInstall.Manual>
1814
#### 1. Install dependencies:
1915

‎content/docs/components/badge.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ lastUpdated: 30 Oct, 2024
99
<br />
1010

1111
<ComponentInstall>
12-
<ComponentInstall.Cli>
13-
```sh
14-
npx shadcn@latest add "https://retroui.dev/r/badge.json"
15-
```
16-
</ComponentInstall.Cli>
12+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/badge.json'" />
1713
<ComponentInstall.Manual>
1814
#### 1. Install dependencies:
1915

‎content/docs/components/breadcrumb.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,7 @@ lastUpdated: 12 May, 2025
99
<br />
1010

1111
<ComponentInstall>
12-
<ComponentInstall.Cli>
13-
```sh
14-
npx shadcn@latest add "https://retroui.dev/r/breadcrumb.json"
15-
```
16-
</ComponentInstall.Cli>
12+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/breadcrumb.json'" />
1713
<ComponentInstall.Manual>
1814
#### 1. Install dependencies:
1915

‎content/docs/components/button.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,7 @@ links:
1111
<br />
1212

1313
<ComponentInstall>
14-
<ComponentInstall.Cli>
15-
```sh
16-
npx shadcn@latest add "https://retroui.dev/r/button.json"
17-
```
18-
</ComponentInstall.Cli>
14+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/button.json'" />
1915
<ComponentInstall.Manual>
2016
#### 1. Install dependencies:
2117

‎content/docs/components/card.mdx‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,7 @@ lastUpdated: 20 Oct, 2024
1111
## Installation
1212

1313
<ComponentInstall>
14-
<ComponentInstall.Cli>
15-
```sh
16-
npx shadcn@latest add "https://retroui.dev/r/card.json"
17-
```
18-
</ComponentInstall.Cli>
14+
<ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/card.json'" />
1915
<ComponentInstall.Manual>
2016

2117
#### Copy the code 👇 into your project:

0 commit comments

Comments
 (0)