A design system in a box.
hip-ui.tngl.io/docs/introduction
sidebar
+785
-34
+4
-1
apps/docs/src/components/listbox/index.tsx
+4
-1
apps/docs/src/components/listbox/index.tsx
···
122
122
<div {...stylex.props(listBoxItemStyles.addon)}>
123
123
<ListBoxCheckbox
124
124
isSelected={isSelected}
125
-
id={props.id || (props.value as { id: string })?.id}
125
+
id={
126
+
(props.id as string) ||
127
+
(props.value as { id?: string } | undefined)?.id
128
+
}
126
129
onPress={(e) => e.continuePropagation()}
127
130
/>
128
131
</div>
-2
apps/docs/src/routes/docs.$.tsx
-2
apps/docs/src/routes/docs.$.tsx
···
22
22
import { createContext, use, useEffect, useRef, useState } from "react";
23
23
import { pages, tableOfContents } from "virtual:content";
24
24
25
-
import { Button } from "@/components/button";
26
25
import { Flex } from "@/components/flex";
27
26
import { Grid } from "@/components/grid";
28
27
import { LinkProps, Link as TypographyLink } from "@/components/link";
···
299
298
}
300
299
301
300
const toc = tableOfContents[location.pathname];
302
-
console.log(toc);
303
301
304
302
return (
305
303
<Grid columns="max-content 240px" columnGap="4" style={styles.root}>
+45
-30
apps/docs/src/routes/docs.tsx
+45
-30
apps/docs/src/routes/docs.tsx
···
8
8
createLink,
9
9
} from "@tanstack/react-router";
10
10
import { allDocs } from "content-collections";
11
-
import { Collection } from "react-aria-components";
12
11
13
12
import { Grid } from "@/components/grid";
14
-
import { Tree, TreeItem } from "@/components/tree";
13
+
import {
14
+
Sidebar,
15
+
SidebarGroup,
16
+
SidebarHeader,
17
+
SidebarItem,
18
+
SidebarSection,
19
+
} from "@/components/sidebar";
20
+
import { Text } from "@/components/typography/text";
15
21
16
-
import { spacing } from "../components/theme/spacing.stylex";
22
+
import { uiColor } from "../components/theme/semantic-color.stylex";
17
23
18
-
const TreeItemLink = createLink(TreeItem);
24
+
const SidebarItemLink = createLink(SidebarItem);
19
25
20
26
const styles = stylex.create({
21
27
root: {
22
28
width: "100%",
23
29
},
24
30
aside: {
31
+
backgroundColor: uiColor.bgSubtle,
32
+
borderRightColor: uiColor.border2,
33
+
borderRightStyle: "solid",
34
+
borderRightWidth: 1,
25
35
boxSizing: "border-box",
26
36
height: "100vh",
27
37
overflow: "auto",
28
-
paddingBottom: spacing["16"],
29
-
paddingLeft: spacing["4"],
30
-
paddingRight: spacing["4"],
31
-
paddingTop: spacing["12"],
32
38
position: "sticky",
33
39
top: 0,
34
40
},
···
53
59
);
54
60
55
61
const sidebarItems: SidebarItem[] = [
56
-
{
57
-
id: "home",
58
-
label: "Home",
59
-
to: "/",
60
-
},
61
62
{
62
63
id: "foundations",
63
64
label: "Foundations",
···
94
95
.flatMap((item) => ("items" in item ? item.items : [item]))
95
96
.filter((item): item is SidebarItem => item !== undefined);
96
97
97
-
function Sidebar() {
98
+
function DocSidebar() {
98
99
const location = useLocation();
99
100
const matches = useMatches();
100
101
const match = matches.find((match) => match.pathname === location.pathname);
101
-
const item = flatItems.find(
102
+
const currentItem = flatItems.find(
102
103
(item) =>
103
104
match?.params &&
104
105
"_splat" in match.params &&
···
107
108
);
108
109
109
110
return (
110
-
<Tree
111
-
items={sidebarItems}
112
-
selectionMode="single"
113
-
selectionBehavior="replace"
114
-
defaultExpandedKeys={["foundations", "components"]}
115
-
selectedKeys={item ? [item.id] : []}
116
-
>
117
-
{function renderTreeItem(item) {
111
+
<Sidebar>
112
+
<SidebarHeader>
113
+
<Text font="serif" size="4xl" weight="bold">
114
+
Hip UI
115
+
</Text>
116
+
</SidebarHeader>
117
+
{sidebarItems.map((item) => {
118
+
if (!item.items) {
119
+
return null;
120
+
}
121
+
118
122
return (
119
-
<TreeItemLink title={item.label} to={item.to} params={item.params}>
120
-
<Collection items={item.items}>{renderTreeItem}</Collection>
121
-
</TreeItemLink>
123
+
<SidebarGroup title={item.label} key={item.id}>
124
+
<SidebarSection>
125
+
{item.items.map((item) => (
126
+
<SidebarItemLink
127
+
key={item.id}
128
+
to={item.to}
129
+
params={item.params}
130
+
isActive={currentItem?.id === item.id}
131
+
>
132
+
{item.label}
133
+
</SidebarItemLink>
134
+
))}
135
+
</SidebarSection>
136
+
</SidebarGroup>
122
137
);
123
-
}}
124
-
</Tree>
138
+
})}
139
+
</Sidebar>
125
140
);
126
141
}
127
142
···
131
146
132
147
function RouteComponent() {
133
148
return (
134
-
<Grid columns="240px 1fr" columnGap="4" style={styles.root}>
149
+
<Grid columns="max-content 1fr" columnGap="4" style={styles.root}>
135
150
<aside {...stylex.props(styles.aside)}>
136
-
<Sidebar />
151
+
<DocSidebar />
137
152
</aside>
138
153
<main>
139
154
<Outlet />
+2
packages/hip-ui/src/cli/install.tsx
+2
packages/hip-ui/src/cli/install.tsx
···
43
43
import { segmentedControlConfig } from "../components/segmented-control/segmented-control-config.js";
44
44
import { selectConfig } from "../components/select/select-config.js";
45
45
import { separatorConfig } from "../components/separator/separator-config.js";
46
+
import { sidebarConfig } from "../components/sidebar/sidebar-config.js";
46
47
import { sliderConfig } from "../components/slider/slider-config.js";
47
48
import { switchConfig } from "../components/switch/switch-config.js";
48
49
import { tableConfig } from "../components/table/table-config.js";
···
108
109
segmentedControlConfig,
109
110
paginationConfig,
110
111
kbdConfig,
112
+
sidebarConfig,
111
113
];
112
114
113
115
function StringSetting({
+4
-1
packages/hip-ui/src/components/listbox/index.tsx
+4
-1
packages/hip-ui/src/components/listbox/index.tsx
···
122
122
<div {...stylex.props(listBoxItemStyles.addon)}>
123
123
<ListBoxCheckbox
124
124
isSelected={isSelected}
125
-
id={props.id || (props.value as { id: string })?.id}
125
+
id={
126
+
(props.id as string) ||
127
+
(props.value as { id?: string } | undefined)?.id
128
+
}
126
129
onPress={(e) => e.continuePropagation()}
127
130
/>
128
131
</div>