chore: lint

Author: chase-crumbaugh

src/react-components/code-sample.tsx

@@ -1,19 +1,26 @@
-import {domMax, LazyMotion} from "motion/react";
-import React, {useEffect, useMemo} from "react";
-import {SpeakeasyCodeSamplesCore} from "../core.js";
-import {GetCodeSamplesRequest, MethodPaths,} from "../models/operations/getcodesamples.js";
-import {OperationId} from "../types/custom.js";
-import {getMethodPath, useCodeSampleState} from "./code-sample.state.js";
+import { domMax, LazyMotion } from "motion/react";
+import React, { useEffect, useMemo } from "react";
+import { SpeakeasyCodeSamplesCore } from "../core.js";
+import {
+  GetCodeSamplesRequest,
+  MethodPaths,
+} from "../models/operations/getcodesamples.js";
+import { OperationId } from "../types/custom.js";
+import { getMethodPath, useCodeSampleState } from "./code-sample.state.js";
 import classes from "./code-sample.styles.js";
-import {CodeViewer, ErrorDisplay} from "./code-viewer.js";
+import { CodeViewer, ErrorDisplay } from "./code-viewer.js";
 import codehikeTheme from "./codehike/theme.js";
-import {CopyButton} from "./copy-button.js";
-import {LanguageSelectorSkeleton, LoadingSkeleton} from "./skeleton.js";
-import {getCssVars, useSystemColorMode} from "./styles.js";
-import {CodeSampleFilenameTitle, CodeSampleTitle, type CodeSampleTitleComponent,} from "./titles.js";
-import {prettyLanguageName} from "./utils.js";
-import {Selector} from "./selector";
-import {UsageSnippet} from "../models/components";
+import { CopyButton } from "./copy-button.js";
+import { LanguageSelectorSkeleton, LoadingSkeleton } from "./skeleton.js";
+import { getCssVars, useSystemColorMode } from "./styles.js";
+import {
+  CodeSampleFilenameTitle,
+  CodeSampleTitle,
+  type CodeSampleTitleComponent,
+} from "./titles.js";
+import { prettyLanguageName } from "./utils.js";
+import { Selector } from "./selector";
+import { UsageSnippet } from "../models/components";
 
 export type CodeSamplesViewerProps = {
   /** Whether the code snippet should be copyable. */
@@ -66,35 +73,35 @@ export type CodeSamplesViewerProps = {
 };
 
 export function CodeSamplesViewer({
-                                    theme = "system",
-                                    title = CodeSampleFilenameTitle,
-                                    defaultLanguage,
-                                    operations,
-                                    copyable,
-                                    client: clientProp,
-                                    style,
-                                    codeWindowStyle,
-                                    fixedHeight,
-                                    className,
-                                  }: CodeSamplesViewerProps) {
+  theme = "system",
+  title = CodeSampleFilenameTitle,
+  defaultLanguage,
+  operations,
+  copyable,
+  client: clientProp,
+  style,
+  codeWindowStyle,
+  fixedHeight,
+  className,
+}: CodeSamplesViewerProps) {
   const requestParams: GetCodeSamplesRequest = React.useMemo(() => {
     if (typeof operations?.[0] === "string")
-      return {operationIds: operations as OperationId[]};
+      return { operationIds: operations as OperationId[] };
     else if (operations?.[0]?.method && operations[0].path)
-      return {methodPaths: operations as MethodPaths[]};
+      return { methodPaths: operations as MethodPaths[] };
 
     return {};
   }, [operations]);
 
-  const {state, selectSnippet} = useCodeSampleState({
+  const { state, selectSnippet } = useCodeSampleState({
     client: clientProp,
     requestParams,
   });
 
   // On mount, select the defaults
   useEffect(() => {
     if (!state.snippets || state.status !== "success") return;
-    selectSnippet({language: defaultLanguage});
+    selectSnippet({ language: defaultLanguage });
   }, [state.status]);
 
   const systemColorMode = useSystemColorMode();
@@ -106,13 +113,13 @@ export function CodeSamplesViewer({
   const languages: string[] = useMemo(() => {
     return [
       ...new Set(
-        state.snippets?.map(({raw}) => prettyLanguageName(raw.language)),
+        state.snippets?.map(({ raw }) => prettyLanguageName(raw.language)),
       ),
     ];
   }, [state.snippets]);
 
   const getOperationKey = (snippet: UsageSnippet | undefined): string => {
-    let {operationId} = snippet;
+    let { operationId } = snippet;
     const methodPathDisplay = getMethodPath(snippet);
     if (!operationId) {
       operationId = methodPathDisplay;
@@ -124,7 +131,7 @@ export function CodeSamplesViewer({
   // For the selector, we try to show operation ID but fall back on method+path if it's missing
   const operationIdToMethodAndPath: Record<string, string> = useMemo(() => {
     return Object.fromEntries(
-      state.snippets?.map(({raw}) => [
+      state.snippets?.map(({ raw }) => [
         getOperationKey(raw),
         getMethodPath(raw),
       ]) ?? [],
@@ -171,10 +178,10 @@ export function CodeSamplesViewer({
               status={state.status}
               data={state.selectedSnippet?.raw}
             />
-            <div style={{display: "flex", gap: "0.75rem"}}>
+            <div style={{ display: "flex", gap: "0.75rem" }}>
               {state.status === "loading" && (
-                <div style={{width: "180px"}}>
-                  <LanguageSelectorSkeleton/>
+                <div style={{ width: "180px" }}>
+                  <LanguageSelectorSkeleton />
                 </div>
               )}
               {state.status === "success" && operationIds.length > 1 && (
@@ -195,7 +202,7 @@ export function CodeSamplesViewer({
                     state.selectedSnippet?.raw.language,
                   )}
                   values={languages}
-                  onChange={(language: string) => selectSnippet({language})}
+                  onChange={(language: string) => selectSnippet({ language })}
                   className={classes.selector}
                 />
               )}
@@ -204,10 +211,10 @@ export function CodeSamplesViewer({
         )}
         <div className={classes.codeContainer}>
           {state.status === "success" && copyable && (
-            <CopyButton code={state.selectedSnippet.code}/>
+            <CopyButton code={state.selectedSnippet.code} />
           )}
-          {state.status === "loading" && <LoadingSkeleton/>}
-          {state.status === "error" && <ErrorDisplay error={state.error}/>}
+          {state.status === "loading" && <LoadingSkeleton />}
+          {state.status === "error" && <ErrorDisplay error={state.error} />}
           {state.status === "success" && (
             <CodeViewer
               status={state.status}