Skip to content

Commit 2948d4d

Browse files
chase-crumbaughchase-crumbaugh
committed
chore: less pretty
1 parent d03ef18 commit 2948d4d

File tree

7 files changed

+157
-139
lines changed

7 files changed

+157
-139
lines changed

‎src/react-components/code-sample.state.tsx

Lines changed: 49 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import {HighlightedCode} from "codehike/code";
1+
import { HighlightedCode } from "codehike/code";
22
import React from "react";
3-
import {SpeakeasyCodeSamplesCore} from "../core.js";
4-
import {codeSamplesGet} from "../funcs/codeSamplesGet.js";
5-
import {UsageSnippet} from "../models/components/usagesnippet.js";
6-
import {GetCodeSamplesRequest} from "../models/operations/getcodesamples.js";
7-
import {useSpeakeasyCodeSamplesContext} from "../react-query/_context.js";
8-
import {highlightCode} from "./utils.js";
3+
import { SpeakeasyCodeSamplesCore } from "../core.js";
4+
import { codeSamplesGet } from "../funcs/codeSamplesGet.js";
5+
import { UsageSnippet } from "../models/components/usagesnippet.js";
6+
import { GetCodeSamplesRequest } from "../models/operations/getcodesamples.js";
7+
import { useSpeakeasyCodeSamplesContext } from "../react-query/_context.js";
8+
import { highlightCode } from "./utils.js";
99

1010
export type SpeakeasyHighlightedCode = HighlightedCode & {
1111
/** The snippet data from the code samples api */
@@ -15,23 +15,23 @@ export type SpeakeasyHighlightedCode = HighlightedCode & {
1515
// Define the state shape.
1616
export type CodeSampleState =
1717
| {
18-
status: "loading";
19-
error?: Error | undefined;
20-
snippets?: SpeakeasyHighlightedCode[] | undefined;
21-
selectedSnippet?: SpeakeasyHighlightedCode | undefined;
22-
}
18+
status: "loading";
19+
error?: Error | undefined;
20+
snippets?: SpeakeasyHighlightedCode[] | undefined;
21+
selectedSnippet?: SpeakeasyHighlightedCode | undefined;
22+
}
2323
| {
24-
status: "success";
25-
error?: Error | undefined;
26-
snippets: SpeakeasyHighlightedCode[];
27-
selectedSnippet: SpeakeasyHighlightedCode;
28-
}
24+
status: "success";
25+
error?: Error | undefined;
26+
snippets: SpeakeasyHighlightedCode[];
27+
selectedSnippet: SpeakeasyHighlightedCode;
28+
}
2929
| {
30-
status: "error";
31-
error: Error;
32-
snippets?: SpeakeasyHighlightedCode[] | undefined;
33-
selectedSnippet?: SpeakeasyHighlightedCode | undefined;
34-
};
30+
status: "error";
31+
error: Error;
32+
snippets?: SpeakeasyHighlightedCode[] | undefined;
33+
selectedSnippet?: SpeakeasyHighlightedCode | undefined;
34+
};
3535

3636
type FetchSuccessPayload = {
3737
snippets: SpeakeasyHighlightedCode[];
@@ -43,8 +43,7 @@ type Action =
4343
| { type: "FETCH_INIT" }
4444
| { type: "FETCH_SUCCESS"; payload: FetchSuccessPayload }
4545
| { type: "FETCH_FAILURE"; payload: Error }
46-
| { type: "SELECT"; payload: SafeGetSnippetParams }
47-
46+
| { type: "SELECT"; payload: SafeGetSnippetParams };
4847

4948
type SafeGetSnippetParams = {
5049
operationId?: string | undefined;
@@ -53,11 +52,16 @@ type SafeGetSnippetParams = {
5352

5453
function safeGetSnippet(
5554
snippets: SpeakeasyHighlightedCode[],
56-
{operationId, language}: SafeGetSnippetParams,
55+
{ operationId, language }: SafeGetSnippetParams,
5756
): SpeakeasyHighlightedCode {
58-
const maybeEqual = (a: string, b: string | undefined) => b === undefined || a.toLowerCase() === b.toLowerCase();
57+
const maybeEqual = (a: string, b: string | undefined) =>
58+
b === undefined || a.toLowerCase() === b.toLowerCase();
5959

60-
const selectedSnippet = snippets.find((s) => maybeEqual(s.raw.operationId, operationId) && maybeEqual(s.lang, language));
60+
const selectedSnippet = snippets.find(
61+
(s) =>
62+
maybeEqual(s.raw.operationId, operationId) &&
63+
maybeEqual(s.lang, language),
64+
);
6165
if (selectedSnippet) {
6266
return selectedSnippet;
6367
}
@@ -76,15 +80,14 @@ const reducer: React.Reducer<CodeSampleState, Action> = (
7680
) => {
7781
switch (action.type) {
7882
case "FETCH_INIT":
79-
return {...state, status: "loading"};
83+
return { ...state, status: "loading" };
8084
case "FETCH_SUCCESS":
8185
return {
8286
status: "success",
8387
snippets: action.payload.snippets,
84-
selectedSnippet: safeGetSnippet(
85-
action.payload.snippets,
86-
{language: action.payload.defaultLanguage},
87-
),
88+
selectedSnippet: safeGetSnippet(action.payload.snippets, {
89+
language: action.payload.defaultLanguage,
90+
}),
8891
};
8992
case "FETCH_FAILURE":
9093
return {
@@ -95,10 +98,7 @@ const reducer: React.Reducer<CodeSampleState, Action> = (
9598
case "SELECT":
9699
return {
97100
...state,
98-
selectedSnippet: safeGetSnippet(
99-
state.snippets!,
100-
action.payload,
101-
),
101+
selectedSnippet: safeGetSnippet(state.snippets!, action.payload),
102102
};
103103
default:
104104
return state;
@@ -112,11 +112,11 @@ type UseCodeSampleStateInit = {
112112
};
113113

114114
export const useCodeSampleState = ({
115-
client: clientProp,
116-
requestParams,
117-
defaultLanguage,
118-
}: UseCodeSampleStateInit) => {
119-
const [state, dispatch] = React.useReducer(reducer, {status: "loading"});
115+
client: clientProp,
116+
requestParams,
117+
defaultLanguage,
118+
}: UseCodeSampleStateInit) => {
119+
const [state, dispatch] = React.useReducer(reducer, { status: "loading" });
120120
const client = useSafeSpeakeasyCodeSamplesContext(clientProp);
121121

122122
const highlightSnippets = async (snippets: UsageSnippet[]) => {
@@ -128,17 +128,17 @@ export const useCodeSampleState = ({
128128
"github-from-css",
129129
);
130130

131-
return {...highlightedCode, raw: snippet};
131+
return { ...highlightedCode, raw: snippet };
132132
}),
133133
);
134134
};
135135

136136
async function handleMount() {
137-
dispatch({type: "FETCH_INIT"});
137+
dispatch({ type: "FETCH_INIT" });
138138
const result = await codeSamplesGet(client, requestParams);
139139

140140
if (!result.ok) {
141-
return dispatch({type: "FETCH_FAILURE", payload: result.error});
141+
return dispatch({ type: "FETCH_FAILURE", payload: result.error });
142142
}
143143

144144
dispatch({
@@ -156,15 +156,16 @@ export const useCodeSampleState = ({
156156

157157
function selectSnippet(params: SafeGetSnippetParams) {
158158
dispatch({
159-
type: "SELECT", payload: {
159+
type: "SELECT",
160+
payload: {
160161
language: state.selectedSnippet?.raw.language,
161162
operationId: state.selectedSnippet?.raw.operationId,
162163
...params,
163-
}
164+
},
164165
});
165166
}
166167

167-
return {state, selectSnippet};
168+
return { state, selectSnippet };
168169
};
169170

170171
/** Intended to give the user the option of providing their own client. */
@@ -181,7 +182,7 @@ export const useSafeSpeakeasyCodeSamplesContext = (
181182
} catch {
182183
throw new Error(
183184
"The Speakeasy Code Samples component must either be given an apiKey and " +
184-
"registryUrl, or be wrapped in a SpeakeasyCodeSamplesProvider.",
185+
"registryUrl, or be wrapped in a SpeakeasyCodeSamplesProvider.",
185186
);
186187
}
187188
};

‎src/react-components/code-sample.styles.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {css} from "@emotion/css";
2-
import {cssVarKey} from "./styles.js";
1+
import { css } from "@emotion/css";
2+
import { cssVarKey } from "./styles.js";
33

44
const classes = {
55
root: css({
@@ -29,7 +29,7 @@ const classes = {
2929
},
3030
"&::-webkit-select-arrow": {
3131
color: `red`, // For WebKit browsers
32-
}
32+
},
3333
}),
3434
codeContainer: css({
3535
position: "relative",

‎src/react-components/code-sample.tsx

Lines changed: 56 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,25 @@
1-
import {domMax, LazyMotion} from "motion/react";
2-
import React, {useEffect, useMemo} from "react";
3-
import {SpeakeasyCodeSamplesCore} from "../core.js";
4-
import {GetCodeSamplesRequest, MethodPaths,} from "../models/operations/getcodesamples.js";
5-
import {OperationId} from "../types/custom.js";
6-
import {useCodeSampleState} from "./code-sample.state.js";
1+
import { domMax, LazyMotion } from "motion/react";
2+
import React, { useEffect, useMemo } from "react";
3+
import { SpeakeasyCodeSamplesCore } from "../core.js";
4+
import {
5+
GetCodeSamplesRequest,
6+
MethodPaths,
7+
} from "../models/operations/getcodesamples.js";
8+
import { OperationId } from "../types/custom.js";
9+
import { useCodeSampleState } from "./code-sample.state.js";
710
import classes from "./code-sample.styles.js";
8-
import {CodeViewer, ErrorDisplay} from "./code-viewer.js";
11+
import { CodeViewer, ErrorDisplay } from "./code-viewer.js";
912
import codehikeTheme from "./codehike/theme.js";
10-
import {CopyButton} from "./copy-button.js";
11-
import {LanguageSelectorSkeleton, LoadingSkeleton} from "./skeleton.js";
12-
import {getCssVars, useSystemColorMode} from "./styles.js";
13-
import {CodeSampleFilenameTitle, CodeSampleTitle, type CodeSampleTitleComponent} from "./titles.js";
14-
import {prettyLanguageName} from "./utils.js";
15-
import {Selector} from "./selector";
13+
import { CopyButton } from "./copy-button.js";
14+
import { LanguageSelectorSkeleton, LoadingSkeleton } from "./skeleton.js";
15+
import { getCssVars, useSystemColorMode } from "./styles.js";
16+
import {
17+
CodeSampleFilenameTitle,
18+
CodeSampleTitle,
19+
type CodeSampleTitleComponent,
20+
} from "./titles.js";
21+
import { prettyLanguageName } from "./utils.js";
22+
import { Selector } from "./selector";
1623

1724
export type CodeSamplesViewerProps = {
1825
/** Whether the code snippet should be copyable. */
@@ -57,36 +64,36 @@ export type CodeSamplesViewerProps = {
5764
style?: React.CSSProperties;
5865
};
5966

60-
export function CodeSamplesViewer(
61-
{
62-
theme = "system",
63-
title = CodeSampleFilenameTitle,
64-
defaultLanguage,
65-
defaultOperation,
66-
operations,
67-
copyable,
68-
client: clientProp,
69-
style,
70-
codeWindowStyle,
71-
className,
72-
}: CodeSamplesViewerProps
73-
) {
67+
export function CodeSamplesViewer({
68+
theme = "system",
69+
title = CodeSampleFilenameTitle,
70+
defaultLanguage,
71+
defaultOperation,
72+
operations,
73+
copyable,
74+
client: clientProp,
75+
style,
76+
codeWindowStyle,
77+
className,
78+
}: CodeSamplesViewerProps) {
7479
const requestParams: GetCodeSamplesRequest = React.useMemo(() => {
75-
if (typeof operations?.[0] === "string") return {operationIds: operations as OperationId[]};
76-
else if (operations?.[0]?.method && operations[0].path) return {methodPaths: operations as MethodPaths[]};
80+
if (typeof operations?.[0] === "string")
81+
return { operationIds: operations as OperationId[] };
82+
else if (operations?.[0]?.method && operations[0].path)
83+
return { methodPaths: operations as MethodPaths[] };
7784

7885
return {};
7986
}, [operations]);
8087

81-
const {state, selectSnippet} = useCodeSampleState({
88+
const { state, selectSnippet } = useCodeSampleState({
8289
client: clientProp,
8390
requestParams,
8491
});
8592

8693
// On mount, select the defaults
8794
useEffect(() => {
8895
if (!state.snippets || state.status !== "success") return;
89-
selectSnippet({language: defaultLanguage, operationId: defaultOperation});
96+
selectSnippet({ language: defaultLanguage, operationId: defaultOperation });
9097
}, [state.status]);
9198

9299
const systemColorMode = useSystemColorMode();
@@ -98,16 +105,14 @@ export function CodeSamplesViewer(
98105
const languages: string[] = useMemo(() => {
99106
return [
100107
...new Set(
101-
state.snippets?.map(({raw}) => prettyLanguageName(raw.language))
108+
state.snippets?.map(({ raw }) => prettyLanguageName(raw.language)),
102109
),
103110
];
104111
}, [state.snippets]);
105112

106113
const operationIds: string[] = useMemo(() => {
107114
return [
108-
...new Set(
109-
state.snippets?.map(({raw}) => raw.operationId) ?? []
110-
),
115+
...new Set(state.snippets?.map(({ raw }) => raw.operationId) ?? []),
111116
];
112117
}, [state.snippets]);
113118

@@ -130,34 +135,39 @@ export function CodeSamplesViewer(
130135
status={state.status}
131136
data={state.selectedSnippet?.raw}
132137
/>
133-
<div style={{display: "flex", gap: "0.75rem"}}>
134-
{state.status === "loading" && <div style={{width: "180px"}}>
135-
<LanguageSelectorSkeleton/>
136-
</div>}
138+
<div style={{ display: "flex", gap: "0.75rem" }}>
139+
{state.status === "loading" && (
140+
<div style={{ width: "180px" }}>
141+
<LanguageSelectorSkeleton />
142+
</div>
143+
)}
137144
{state.status === "success" && operationIds.length > 1 && (
138145
<Selector
139146
value={state.selectedSnippet?.raw.operationId}
140147
values={operationIds}
141-
onChange={(operationId) => selectSnippet({operationId})}
148+
onChange={(operationId) => selectSnippet({ operationId })}
142149
className={classes.selector}
143150
/>
144151
)}
145152
{state.status === "success" && (
146153
<Selector
147-
value={prettyLanguageName(state.selectedSnippet?.raw.language)}
154+
value={prettyLanguageName(
155+
state.selectedSnippet?.raw.language,
156+
)}
148157
values={languages}
149-
onChange={(language) => selectSnippet({language})}
158+
onChange={(language) => selectSnippet({ language })}
150159
className={classes.selector}
151160
/>
152161
)}
153162
</div>
154-
</div>)}
163+
</div>
164+
)}
155165
<div className={classes.codeContainer}>
156166
{state.status === "success" && copyable && (
157-
<CopyButton code={state.selectedSnippet.code}/>
167+
<CopyButton code={state.selectedSnippet.code} />
158168
)}
159-
{state.status === "loading" && <LoadingSkeleton/>}
160-
{state.status === "error" && <ErrorDisplay error={state.error}/>}
169+
{state.status === "loading" && <LoadingSkeleton />}
170+
{state.status === "error" && <ErrorDisplay error={state.error} />}
161171
{state.status === "success" && (
162172
<CodeViewer
163173
status={state.status}

0 commit comments

Comments
 (0)