fix(docs): added missing package manager tabs in docs

heroui-inc · Aug 10, 2024 · a4e5024 · a4e5024
1 parent 9d35f93
commit a4e5024
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 16 deletions.
diff --git a/apps/docs/content/docs/guide/cli.mdx b/apps/docs/content/docs/guide/cli.mdx
@@ -30,11 +30,16 @@ To install the `CLI` globally, execute one of the following commands in your ter
 
 ### Without Installation
 
-Alternatively, you can use the `CLI` without a global installation by employing `npx`:
+Alternatively, you can use the `CLI` without a global installation by running the following commands:
 
-```bash
-npx nextui-cli@latest
-```
+<PackageManagers
+  commands={{
+    npm: "npx nextui-cli@latest",
+    yarn: "yarn dlx nextui-cli@latest",
+    pnpm: "pnpm dlx nextui-cli@latest",
+    bun: "bunx nextui-cli@latest",
+  }}
+/>
 
 </Steps>
 
@@ -113,14 +118,24 @@ You will be prompted to configure your project:
 ```
 
 Install the dependencies to start the local server:
-```codeBlock bash
-cd my-nextui-app && npm install
-```
+<PackageManagers
+  commands={{
+    npm: "cd my-nextui-app && npm install",
+    yarn: "cd my-nextui-app && yarn install",
+    pnpm: "cd my-nextui-app && pnpm install",
+    bun: "cd my-nextui-app && bun install",
+  }}
+/>
 
 Start the local server:
-```codeBlock bash
-npm run dev
-```
+<PackageManagers
+  commands={{
+    npm: "npm run dev",
+    yarn: "yarn run dev",
+    pnpm: "pnpm run dev",
+    bun: "bun run dev",
+  }}
+/>
 
 ## add
 

diff --git a/apps/docs/content/docs/guide/installation.mdx b/apps/docs/content/docs/guide/installation.mdx
@@ -39,14 +39,17 @@ You will be prompted to configure your project:
 ```
 
 Install the dependencies to start the local server:
-```codeBlock bash
-cd my-nextui-app && npm install
-```
+
 
 Start the local server:
-```codeBlock bash
-npm run dev
-```
+<PackageManagers
+  commands={{
+    npm: "npm run dev",
+    yarn: "yarn run dev",
+    pnpm: "pnpm run dev",
+    bun: "bun run dev",
+  }}
+/>
 
 Once your NextUI project is ready to develop, you can add individual components using the CLI. For example, to add a button component:
 

diff --git a/packages/components/dropdown/stories/dropdown.stories.tsx b/packages/components/dropdown/stories/dropdown.stories.tsx
@@ -739,3 +739,36 @@ export const DisableAnimation = {
     disableAnimation: true,
   },
 };
+
+export const TestTemplate = () => {
+  const [selectedKeys, setSelectedKeys] = React.useState(new Set(["text"]));
+
+  const selectedValue = React.useMemo(
+    () => Array.from(selectedKeys).join(", ").replaceAll("_", " "),
+    [selectedKeys],
+  );
+
+  return (
+    <Dropdown>
+      <DropdownTrigger>
+        <Button className="capitalize" variant="bordered">
+          {selectedValue}
+        </Button>
+      </DropdownTrigger>
+      <DropdownMenu
+        disallowEmptySelection
+        aria-label="Single selection example"
+        selectedKeys={selectedKeys}
+        selectionMode="single"
+        variant="flat"
+        onSelectionChange={setSelectedKeys}
+      >
+        <DropdownItem key="text">Text</DropdownItem>
+        <DropdownItem key="number">Number</DropdownItem>
+        <DropdownItem key="date">Date</DropdownItem>
+        <DropdownItem key="single_date">Single Date</DropdownItem>
+        <DropdownItem key="iteration">Iteration</DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+};