Skip to content

Commit 0175125

Browse files
etienne-dldcetienne-dldc
committed
Format
1 parent 6d03d82 commit 0175125

File tree

18 files changed

+302
-376
lines changed

18 files changed

+302
-376
lines changed

‎apps/docs/src/components/CodeHighlight.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,9 @@ export function CodeHighlight({ language, theme, children }: CodeHighlightProps)
101101
}, [language, theme, children]);
102102

103103
return (
104-
<div className="h-full w-full rounded-lg bg-neutral-800 overflow-hidden">
104+
<div className="h-full w-full overflow-hidden rounded-lg bg-neutral-800">
105105
{/* <Scrollbars className={css({ h: "full", w: "full" })}> */}
106-
<div className="h-full w-full *:h-full *:text-sm *:p-4">{highlightedCode}</div>
106+
<div className="h-full w-full *:h-full *:p-4 *:text-sm">{highlightedCode}</div>
107107
{/* </Scrollbars> */}
108108
</div>
109109
);

‎apps/docs/src/components/HighlightedGrid.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -53,23 +53,23 @@ export function HighlightedGrid<TRow, TColumn>({
5353
return (
5454
<Paper background="900" className={className}>
5555
<Scrollbars className="h-full w-full">
56-
<div className="p-3 w-max">
56+
<div className="w-max p-3">
5757
<div
58-
className="gap-3 relative grid"
58+
className="relative grid gap-3"
5959
style={{
6060
gridTemplateRows: `${hasColumns ? "4px " : ""} repeat(${safeRows.length}, max-content)`,
6161
gridTemplateColumns: `${hasRows ? "4px " : ""} repeat(${safeColumns.length}, max-content)`,
6262
}}
6363
>
6464
{highlighted && hasRows && (
6565
<div
66-
className="bg-white/15 align-self-stretch justify-self-stretch rounded-0x my--1 sticky left-0"
66+
className="align-self-stretch rounded-0x my--1 sticky left-0 justify-self-stretch bg-white/15"
6767
style={{ gridColumn: 1, gridRow: rowOffset + highlighted.rowIndex }}
6868
/>
6969
)}
7070
{highlighted && hasColumns && (
7171
<div
72-
className="bg-white/15 align-self-stretch justify-self-stretch rounded-0x mx--1 sticky top-0"
72+
className="align-self-stretch rounded-0x mx--1 sticky top-0 justify-self-stretch bg-white/15"
7373
style={{ gridColumn: columnOffset + highlighted.columnIndex, gridRow: 1 }}
7474
/>
7575
)}

‎apps/docs/src/components/RootLayout.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ interface RootLayoutProps {
77

88
export function RootLayout({ children }: RootLayoutProps) {
99
return (
10-
<div className="grid grid-cols-[250px_1fr] gap-3 px-3 relative">
10+
<div className="relative grid grid-cols-[250px_1fr] gap-3 px-3">
1111
{/* Sidebar */}
12-
<aside className="py-3 max-h-screen sticky top-0 flex flex-col gap-2">
13-
<Paper background="900" className="flex flex-col overflow-y-auto py-2 gap-2">
14-
<h1 className="text-2xl font-bold text-neutral-100 px-3">UI Docs</h1>
12+
<aside className="sticky top-0 flex max-h-screen flex-col gap-2 py-3">
13+
<Paper background="900" className="flex flex-col gap-2 overflow-y-auto py-2">
14+
<h1 className="px-3 text-2xl font-bold text-neutral-100">UI Docs</h1>
1515
<Menu />
1616
</Paper>
1717
</aside>

‎apps/docs/src/components/StoryLayout.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,6 @@ import type { PropsWithChildren } from "react";
22

33
export function StoryLayout({ children }: PropsWithChildren) {
44
return (
5-
<div className="mx-auto max-w-5xl grid grid-cols-2 *:col-span-2 py-10 px-auto gap-y-3 gap-x-4">{children}</div>
5+
<div className="px-auto mx-auto grid max-w-5xl grid-cols-2 gap-x-4 gap-y-3 py-10 *:col-span-2">{children}</div>
66
);
77
}

‎apps/docs/src/components/Variants.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,7 @@ export function Variants<Dims extends TDimensions>({
124124
}, [presets]);
125125

126126
return (
127-
<div className="flex flex-col gap-2 items-stretch">
127+
<div className="flex flex-col items-stretch gap-2">
128128
<div className="flex flex-row gap-4">
129129
{title && (
130130
<h2
@@ -135,7 +135,7 @@ export function Variants<Dims extends TDimensions>({
135135
)}
136136
<div className="flex flex-row gap-4">
137137
<FrameGroup color="blue" variant="solid">
138-
<ButtonLike className="uppercase font-bold">Preset</ButtonLike>
138+
<ButtonLike className="font-bold uppercase">Preset</ButtonLike>
139139
<Select<string>
140140
label="preset"
141141
labelHidden
@@ -175,8 +175,8 @@ export function Variants<Dims extends TDimensions>({
175175
</Button>
176176
</div>
177177
</div>
178-
<div className="flex flex-row gap-8 items-start">
179-
<div className="flex flex-col gap-3 pt-4 items-stretch">
178+
<div className="flex flex-row items-start gap-8">
179+
<div className="flex flex-col items-stretch gap-3 pt-4">
180180
{Object.entries(dimensions)
181181
.filter(([key]) => !colAxis.includes(key) && !rowAxis.includes(key))
182182
.map(([dimKey, dim]) => {
@@ -192,15 +192,15 @@ export function Variants<Dims extends TDimensions>({
192192
onChange={(value) => setSelected({ ...selected, [dimKey]: value })}
193193
renderSelect={<Button className="flex-1" />}
194194
renderWrapper={<FrameGroup color="teal" />}
195-
renderLabel={<ButtonLike className="flex-1 uppercase font-bold min-w-[150px]">{dimKey}</ButtonLike>}
195+
renderLabel={<ButtonLike className="min-w-[150px] flex-1 font-bold uppercase">{dimKey}</ButtonLike>}
196196
/>
197197
);
198198
})}
199199
<Button onClick={() => setSelected(defaultSelected)} color="red" variant="subtle">
200200
Reset
201201
</Button>
202202
</div>
203-
<div className="max-h-[90vh] overflow-auto flex-1">
203+
<div className="max-h-[90vh] flex-1 overflow-auto">
204204
<div className="grid gap-4 py-4">
205205
{cols.length > 1 &&
206206
cols.map((col, colIndex) => {
@@ -209,7 +209,7 @@ export function Variants<Dims extends TDimensions>({
209209
<div
210210
key={`col-${colIndex}`}
211211
style={{ gridColumn: 1 + colOffset + colIndex, gridRow: 1 }}
212-
className="text-center bg-white/5 rounded-1_x uppercase font-bold p-1"
212+
className="rounded-1_x bg-white/5 p-1 text-center font-bold uppercase"
213213
>
214214
{colName}
215215
</div>
@@ -222,7 +222,7 @@ export function Variants<Dims extends TDimensions>({
222222
<div
223223
key={`row-${rowIndex}`}
224224
style={{ gridColumn: 1, gridRow: 1 + rowOffset + rowIndex }}
225-
className="flex bg-white/5 rounded-1_x uppercase font-bold p-1 items-center justify-center"
225+
className="rounded-1_x flex items-center justify-center bg-white/5 p-1 font-bold uppercase"
226226
>
227227
{rowName}
228228
</div>
@@ -289,7 +289,7 @@ function MultiSelect<T extends string>({ label, onChange, options, selected }: M
289289

290290
return (
291291
<FrameGroup variant="solid" color="blue">
292-
<ButtonLike className="uppercase font-bold">{label}</ButtonLike>
292+
<ButtonLike className="font-bold uppercase">{label}</ButtonLike>
293293
{selected.map((selectedItem, index) => {
294294
return (
295295
<Select<T | "REMOVE">

0 commit comments

Comments
 (0)