Skip to content

Commit

Permalink
tree comp preview
Browse files Browse the repository at this point in the history
  • Loading branch information
@Makisuo
Makisuo committed Oct 8, 2024
1 parent fd00be5 commit a10779f
Show file tree
Hide file tree
Showing 17 changed files with 1,892 additions and 1,273 deletions.
16 changes: 16 additions & 0 deletions apps/docs/content/components/data-display/tree.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
---
title: Tree
description: Displays a Tree.

docLink: https://react-spectrum.adobe.com/react-aria/Tree.html

slug: tree
---

<ComponentPreview name="tree/preview" />






12 changes: 6 additions & 6 deletions apps/docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,22 @@
"typecheck": "tsc --noEmit"
},
"dependencies": {
"@internationalized/date": "^3.5.5",
"@internationalized/date": "^3.5.6",
"@pixelshades/auto-form": "workspace:*",
"@pixelshades/cn": "workspace:*",
"@pixelshades/styles": "workspace:*",
"@pixelshades/ui": "workspace:*",
"@radix-ui/react-collapsible": "^1.1.0",
"@radix-ui/react-collapsible": "^1.1.1",
"geist": "^1.3.1",
"next": "14.2.13",
"next": "14.2.15",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-stately": "3.32.2",
"react-stately": "3.33.0",
"safesight": "^0.7.3"
},
"devDependencies": {
"@types/node": "^22.7.4",
"@types/react": "^18.3.10",
"@types/node": "^22.7.5",
"@types/react": "^18.3.11",
"@types/react-dom": "^18.3.0",
"postcss": "^8.4.47",
"rehype-autolink-headings": "^7.1.0",
Expand Down
183 changes: 175 additions & 8 deletions apps/docs/src/examples/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,45 +67,38 @@ import { Avatar } from "@pixelshades/ui/components"
export function Example() {
return (
<div className="flex flex-col gap-md">
<div className="flex flex-col gap-md md:flex-row">
<Avatar
variant="square"
src="https://pbs.twimg.com/profile_images/1271783863614873600/DozTdIj7_400x400.jpg"
alt="@makisuo__"
size="xxs"
/>
<Avatar
variant="square"
src="https://pbs.twimg.com/profile_images/1271783863614873600/DozTdIj7_400x400.jpg"
alt="@makisuo__"
size="xs"
/>
<Avatar
variant="square"
src="https://pbs.twimg.com/profile_images/1271783863614873600/DozTdIj7_400x400.jpg"
alt="@makisuo__"
size="sm"
/>
<Avatar
variant="square"
src="https://pbs.twimg.com/profile_images/1271783863614873600/DozTdIj7_400x400.jpg"
alt="@makisuo__"
size="md"
/>
<Avatar
variant="square"
src="https://pbs.twimg.com/profile_images/1271783863614873600/DozTdIj7_400x400.jpg"
alt="@makisuo__"
size="lg"
/>
<Avatar
variant="square"
src="https://pbs.twimg.com/profile_images/1271783863614873600/DozTdIj7_400x400.jpg"
alt="@makisuo__"
size="xl"
/>
<Avatar
variant="square"
src="https://pbs.twimg.com/profile_images/1271783863614873600/DozTdIj7_400x400.jpg"
alt="@makisuo__"
size="2xl"
Expand Down Expand Up @@ -2693,6 +2686,180 @@ export function Example() {
export function Example() {
return <Tooltip>Small Little Tooltip</Tooltip>
}
`,
},
"tree/preview": {
component: lazy(() => import("~/examples/tree/preview.tsx")),
code: `import { Tree } from "@pixelshades/ui/components"
import type * as React from "react"
import { Collection } from "react-aria-components"
export function App() {
const renderItem = (item: FileNode): React.ReactNode => {
return (
<Tree.Item key={item.id} textValue={item.title}>
<Tree.ItemContent>
{item.children.length > 0 && <Tree.ItemIndicator />}
<Tree.ItemCheckbox />
<Tree.ItemLabel>{item.title}</Tree.ItemLabel>
</Tree.ItemContent>
{item.children.length > 0 && <Collection items={item.children}>{renderItem}</Collection>}
</Tree.Item>
)
}
return (
<Tree className="w-full max-w-xl" aria-label="Files" selectionMode="multiple" items={files}>
{files.map(renderItem)}
</Tree>
)
}
type FileNode = {
id: number
title: string
children: FileNode[]
}
const files: FileNode[] = [
{
id: 1,
title: "Work",
children: [
{
id: 2,
title: "Reports",
children: [
{
id: 3,
title: "2023",
children: [
{
id: 4,
title: "Q1 Report",
children: [
{ id: 5, title: "Summary", children: [] },
{ id: 6, title: "Details", children: [] },
],
},
],
},
],
},
{
id: 7,
title: "Presentations",
children: [
{
id: 8,
title: "2023 Projects",
children: [
{
id: 9,
title: "Project A",
children: [
{ id: 10, title: "Draft", children: [] },
{ id: 11, title: "Final", children: [] },
],
},
{
id: 12,
title: "Project B",
children: [{ id: 13, title: "Research", children: [] }],
},
],
},
],
},
],
},
{
id: 14,
title: "Personal",
children: [
{
id: 15,
title: "Hobbies",
children: [
{
id: 16,
title: "Photography",
children: [
{ id: 17, title: "Travel", children: [] },
{ id: 18, title: "Portraits", children: [] },
],
},
{
id: 19,
title: "Cooking",
children: [{ id: 20, title: "Recipes", children: [] }],
},
],
},
],
},
{
id: 21,
title: "Projects",
children: [
{
id: 22,
title: "Web Development",
children: [
{
id: 23,
title: "Portfolio",
children: [
{ id: 24, title: "Images", children: [] },
{ id: 25, title: "CSS", children: [] },
],
},
{ id: 26, title: "Landing Page", children: [] },
],
},
{
id: 27,
title: "Mobile Apps",
children: [{ id: 28, title: "Weather App", children: [] }],
},
],
},
{
id: 29,
title: "Finance",
children: [
{
id: 30,
title: "Budget",
children: [
{
id: 31,
title: "2023",
children: [
{ id: 32, title: "January", children: [] },
{ id: 33, title: "February", children: [] },
],
},
],
},
],
},
{
id: 34,
title: "Health",
children: [
{
id: 35,
title: "Fitness",
children: [
{ id: 36, title: "Workouts", children: [] },
{ id: 37, title: "Nutrition", children: [] },
],
},
{ id: 38, title: "Wellness", children: [] },
],
},
]
`,
},
"typography/preview": {
Expand Down
Loading

0 comments on commit a10779f

Please sign in to comment.