A design system in a box.
hip-ui.tngl.io/docs/introduction
Factor out pre
+174
-84
+71
-1
apps/docs/src/components/typography/index.tsx
+71
-1
apps/docs/src/components/typography/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
-
import { useMemo } from "react";
2
+
import {
3
+
createContext,
4
+
use,
5
+
useEffect,
6
+
useMemo,
7
+
useRef,
8
+
useState,
9
+
} from "react";
3
10
11
+
import { CopyToClipboardButton } from "../copy-to-clipboard-button";
4
12
import { LinkContext } from "../link/link-context";
13
+
import { uiColor } from "../theme/color.stylex";
5
14
import { mediaQueries } from "../theme/media-queries.stylex";
6
15
import { radius } from "../theme/radius.stylex";
7
16
import { critical, ui } from "../theme/semantic-color.stylex";
···
15
24
} from "../theme/typography.stylex";
16
25
17
26
const styles = stylex.create({
27
+
pre: {
28
+
// eslint-disable-next-line @stylexjs/valid-styles
29
+
cornerShape: "squircle",
30
+
padding: spacing["4"],
31
+
borderColor: uiColor.border2,
32
+
borderRadius: {
33
+
default: radius["lg"],
34
+
"@supports (corner-shape: squircle)": radius["4xl"],
35
+
},
36
+
borderStyle: "solid",
37
+
borderWidth: 1,
38
+
position: "relative",
39
+
marginBottom: spacing["8"],
40
+
marginTop: spacing["8"],
41
+
},
42
+
copyButton: {
43
+
position: "absolute",
44
+
right: spacing["3"],
45
+
top: spacing["2.5"],
46
+
},
18
47
blockquote: {
19
48
color: ui.textDim,
20
49
fontFamily: fontFamily["serif"],
···
289
318
);
290
319
};
291
320
321
+
const PreContext = createContext(false);
322
+
323
+
export interface PreProps extends StyleXComponentProps<
324
+
React.ComponentProps<"pre">
325
+
> {}
326
+
327
+
export function Pre({ style, children, ...props }: PreProps) {
328
+
const [textContent, setTextContent] = useState("error");
329
+
const ref = useRef<HTMLPreElement>(null);
330
+
331
+
useEffect(() => {
332
+
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-hooks/set-state-in-effect
333
+
setTextContent(ref.current?.textContent ?? "error");
334
+
}, [ref]);
335
+
336
+
return (
337
+
<PreContext value={true}>
338
+
<pre
339
+
ref={ref}
340
+
{...props}
341
+
{...stylex.props(styles.pre, style)}
342
+
data-testid="code"
343
+
>
344
+
{children}
345
+
<CopyToClipboardButton style={styles.copyButton} text={textContent} />
346
+
</pre>
347
+
</PreContext>
348
+
);
349
+
}
350
+
292
351
export interface InlineCodeProps extends StyleXComponentProps<
293
352
React.ComponentProps<"code">
294
353
> {}
295
354
296
355
export const InlineCode = ({ style, ...props }: InlineCodeProps) => {
356
+
const isPre = use(PreContext);
357
+
358
+
if (isPre) {
359
+
return (
360
+
<code
361
+
{...props}
362
+
// className={className} style={style}
363
+
/>
364
+
);
365
+
}
366
+
297
367
return (
298
368
<code
299
369
{...props}
+9
-2
apps/docs/src/docs/components/content/typography.mdx
+9
-2
apps/docs/src/docs/components/content/typography.mdx
···
17
17
import { Typeramp } from '../../../examples/typography/typeramp'
18
18
import { BlockquoteExample } from '../../../examples/typography/blockquote'
19
19
import { InlineCodeExample } from '../../../examples/typography/inline-code'
20
-
20
+
import { PreExample } from '../../../examples/typography/pre'
21
+
21
22
<Example src={Typeramp} />
22
23
23
24
## Installation
···
32
33
33
34
This is a custom component collection built for typography.
34
35
35
-
<PropDocs components={["Heading1", "Heading2", "Heading3", "Heading4", "Heading5", "Body", "SmallBody", "LabelText", "SubLabel", "Blockquote", "UnorderedList", "OrderedList", "ListItem", "InlineCode"]} />
36
+
<PropDocs components={["Heading1", "Heading2", "Heading3", "Heading4", "Heading5", "Body", "SmallBody", "LabelText", "SubLabel", "Blockquote", "UnorderedList", "OrderedList", "ListItem", "InlineCode", "Pre"]} />
36
37
37
38
## Typeramp
38
39
···
78
79
Typography also includes an inline code component.
79
80
80
81
<Example src={InlineCodeExample} />
82
+
83
+
### Pre
84
+
85
+
Typography also includes a pre component.
86
+
87
+
<Example src={PreExample} />
81
88
82
89
## Related Components
83
90
+16
apps/docs/src/examples/typography/pre.tsx
+16
apps/docs/src/examples/typography/pre.tsx
···
1
+
import { Pre, InlineCode } from "@/components/typography";
2
+
import * as stylex from "@stylexjs/stylex";
3
+
4
+
const styles = stylex.create({
5
+
pre: {
6
+
width: "min(80%, 340px)",
7
+
},
8
+
});
9
+
10
+
export function PreExample() {
11
+
return (
12
+
<Pre style={styles.pre}>
13
+
<InlineCode>npm install @hip-ui/core</InlineCode>
14
+
</Pre>
15
+
);
16
+
}
+7
-80
apps/docs/src/routes/docs.$.tsx
+7
-80
apps/docs/src/routes/docs.$.tsx
···
19
19
import * as stylex from "@stylexjs/stylex";
20
20
import { allDocs } from "content-collections";
21
21
import { LinkIcon } from "lucide-react";
22
-
import {
23
-
createContext,
24
-
Suspense,
25
-
use,
26
-
useEffect,
27
-
useRef,
28
-
useState,
29
-
} from "react";
22
+
import { Suspense } from "react";
30
23
import { modules, pages } from "virtual:content";
31
24
32
25
import { Flex } from "@/components/flex";
33
26
import { LinkProps, Link as TypographyLink } from "@/components/link";
34
27
import {
35
28
Blockquote,
36
-
BlockquoteProps,
37
29
Body,
38
30
Heading1,
39
31
Heading2,
···
43
35
InlineCode,
44
36
ListItem,
45
37
OrderedList,
38
+
Pre,
46
39
UnorderedList,
47
40
} from "@/components/typography";
48
41
import { Text } from "@/components/typography/text";
···
50
43
import { CopyToClipboardButton } from "@/components/copy-to-clipboard-button";
51
44
52
45
import { animationDuration } from "../components/theme/animations.stylex";
53
-
import { radius } from "../components/theme/radius.stylex";
54
-
import { uiColor } from "../components/theme/color.stylex";
55
46
import { spacing } from "../components/theme/spacing.stylex";
56
47
import { Content } from "@/components/content";
57
48
import { containerBreakpoints } from "../components/theme/media-queries.stylex";
···
71
62
[containerBreakpoints.lg]: "minmax(0, 1fr) 240px",
72
63
},
73
64
},
74
-
pre: {
75
-
borderColor: uiColor.border2,
76
-
borderRadius: {
77
-
default: radius["lg"],
78
-
"@supports (corner-shape: squircle)": radius["4xl"],
79
-
},
80
-
cornerShape: "squircle",
81
-
borderStyle: "solid",
82
-
borderWidth: 1,
83
-
marginBottom: spacing["8"],
84
-
marginTop: spacing["8"],
85
-
padding: spacing["4"],
86
-
position: "relative",
87
-
},
88
-
copyButton: {
89
-
position: "absolute",
90
-
right: spacing["3"],
91
-
top: spacing["2.5"],
92
-
},
93
65
header: {
94
66
marginBottom: spacing["12"],
95
-
},
96
-
blockquote: {
97
-
marginBottom: 0,
98
-
marginLeft: spacing["2"],
99
-
marginRight: 0,
100
-
marginTop: 0,
101
-
paddingLeft: spacing["4"],
102
67
},
103
68
linkedHeadingLink: {
104
69
color: "inherit",
···
125
90
},
126
91
});
127
92
128
-
const PreContext = createContext(false);
129
-
130
-
function Pre({ children, ...props }: React.ComponentProps<"pre">) {
131
-
const [textContent, setTextContent] = useState("error");
132
-
const ref = useRef<HTMLPreElement>(null);
133
-
134
-
useEffect(() => {
135
-
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-hooks/set-state-in-effect
136
-
setTextContent(ref.current?.textContent ?? "error");
137
-
}, [ref]);
138
-
139
-
return (
140
-
<PreContext value={true}>
141
-
<pre
142
-
ref={ref}
143
-
{...props}
144
-
{...stylex.props(styles.pre)}
145
-
data-testid="code"
146
-
>
147
-
{children}
148
-
<CopyToClipboardButton style={styles.copyButton} text={textContent} />
149
-
</pre>
150
-
</PreContext>
151
-
);
152
-
}
153
-
154
-
function Code({ className, style, ...props }: React.ComponentProps<"code">) {
155
-
const isPre = use(PreContext);
156
-
157
-
if (isPre) {
158
-
return <code {...props} className={className} style={style} />;
159
-
}
160
-
161
-
return <InlineCode {...props} />;
162
-
}
163
-
164
-
function DocsBlockquote(props: BlockquoteProps) {
165
-
return <Blockquote {...props} style={styles.blockquote} />;
166
-
}
167
-
168
93
function LinkedHeading({
169
94
id,
170
95
children,
···
216
141
}
217
142
218
143
const components: MDXComponents = {
219
-
pre: Pre,
220
144
h1: ({ className: _className, style: _style, ...props }) => (
221
145
<Heading1 {...props} />
222
146
),
···
255
179
li: ({ className: _className, style: _style, ...props }) => (
256
180
<ListItem {...props} />
257
181
),
258
-
code: Code,
182
+
pre: Pre,
183
+
code: ({ className: _className, style: _style, ...props }) => (
184
+
<InlineCode {...props} />
185
+
),
259
186
blockquote: ({ className: _className, style: _style, ...props }) => (
260
-
<DocsBlockquote {...props} />
187
+
<Blockquote {...props} />
261
188
),
262
189
};
263
190
+71
-1
packages/hip-ui/src/components/typography/index.tsx
+71
-1
packages/hip-ui/src/components/typography/index.tsx
···
1
1
import * as stylex from "@stylexjs/stylex";
2
-
import { useMemo } from "react";
2
+
import {
3
+
createContext,
4
+
use,
5
+
useEffect,
6
+
useMemo,
7
+
useRef,
8
+
useState,
9
+
} from "react";
3
10
11
+
import { CopyToClipboardButton } from "../copy-to-clipboard-button";
4
12
import { LinkContext } from "../link/link-context";
13
+
import { uiColor } from "../theme/color.stylex";
5
14
import { mediaQueries } from "../theme/media-queries.stylex";
6
15
import { radius } from "../theme/radius.stylex";
7
16
import { critical, ui } from "../theme/semantic-color.stylex";
···
15
24
} from "../theme/typography.stylex";
16
25
17
26
const styles = stylex.create({
27
+
pre: {
28
+
// eslint-disable-next-line @stylexjs/valid-styles
29
+
cornerShape: "squircle",
30
+
padding: spacing["4"],
31
+
borderColor: uiColor.border2,
32
+
borderRadius: {
33
+
default: radius["lg"],
34
+
"@supports (corner-shape: squircle)": radius["4xl"],
35
+
},
36
+
borderStyle: "solid",
37
+
borderWidth: 1,
38
+
position: "relative",
39
+
marginBottom: spacing["8"],
40
+
marginTop: spacing["8"],
41
+
},
42
+
copyButton: {
43
+
position: "absolute",
44
+
right: spacing["3"],
45
+
top: spacing["2.5"],
46
+
},
18
47
blockquote: {
19
48
color: ui.textDim,
20
49
fontFamily: fontFamily["serif"],
···
289
318
);
290
319
};
291
320
321
+
const PreContext = createContext(false);
322
+
323
+
export interface PreProps extends StyleXComponentProps<
324
+
React.ComponentProps<"pre">
325
+
> {}
326
+
327
+
export function Pre({ style, children, ...props }: PreProps) {
328
+
const [textContent, setTextContent] = useState("error");
329
+
const ref = useRef<HTMLPreElement>(null);
330
+
331
+
useEffect(() => {
332
+
// eslint-disable-next-line @eslint-react/hooks-extra/no-direct-set-state-in-use-effect, react-hooks/set-state-in-effect
333
+
setTextContent(ref.current?.textContent ?? "error");
334
+
}, [ref]);
335
+
336
+
return (
337
+
<PreContext value={true}>
338
+
<pre
339
+
ref={ref}
340
+
{...props}
341
+
{...stylex.props(styles.pre, style)}
342
+
data-testid="code"
343
+
>
344
+
{children}
345
+
<CopyToClipboardButton style={styles.copyButton} text={textContent} />
346
+
</pre>
347
+
</PreContext>
348
+
);
349
+
}
350
+
292
351
export interface InlineCodeProps extends StyleXComponentProps<
293
352
React.ComponentProps<"code">
294
353
> {}
295
354
296
355
export const InlineCode = ({ style, ...props }: InlineCodeProps) => {
356
+
const isPre = use(PreContext);
357
+
358
+
if (isPre) {
359
+
return (
360
+
<code
361
+
{...props}
362
+
// className={className} style={style}
363
+
/>
364
+
);
365
+
}
366
+
297
367
return (
298
368
<code
299
369
{...props}