Skip to content

Commit 9d8df56

Browse files
tjktjk
committed
more linting
1 parent b57ecf8 commit 9d8df56

34 files changed

+1038
-733
lines changed

‎.eslintrc‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
{
7979
"files": [
8080
"*.ts",
81+
"*.tsx",
8182
"*.mts"
8283
],
8384
"extends": [
@@ -110,6 +111,17 @@
110111
}
111112
}]
112113
}
114+
},
115+
{
116+
"files": [
117+
"*.tsx"
118+
],
119+
"extends": [
120+
"plugin:react/recommended"
121+
],
122+
"rules": {
123+
"react/react-in-jsx-scope": "off"
124+
}
113125
}
114126
],
115127
"parserOptions": {

‎packages/connect-react/.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,3 @@
11
dist
2+
Makefile
3+
examples/nextjs/app/favicon.ico

‎packages/connect-react/examples/nextjs/src/app/layout.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
1-
export default function RootLayout({
2-
children,
3-
}: Readonly<{
1+
export default function RootLayout({ children }: Readonly<{
42
children: React.ReactNode;
53
}>) {
64
return (

‎packages/connect-react/examples/nextjs/src/app/page.tsx‎

Lines changed: 14 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,25 @@
1-
"use client"
1+
"use client";
22

3-
import { useState } from "react"
4-
import { createFrontendClient } from "@pipedream/sdk/browser"
5-
import { ComponentFormContainer, FrontendClientProvider } from "@pipedream/connect-react"
6-
import { fetchToken } from "./actions"
3+
import { useState } from "react";
4+
import { createFrontendClient } from "@pipedream/sdk/browser";
5+
import {
6+
ComponentFormContainer, FrontendClientProvider,
7+
} from "@pipedream/connect-react";
8+
import { fetchToken } from "./actions";
79

810
export default function Home() {
9-
const userId = "my-authed-user-id"
11+
const userId = "my-authed-user-id";
1012
const client = createFrontendClient({
1113
environment: "development",
1214
externalUserId: userId,
1315
tokenCallback: fetchToken,
14-
})
15-
const [configuredProps, setConfiguredProps] = useState({
16+
});
17+
const [
18+
configuredProps,
19+
setConfiguredProps,
20+
] = useState({
1621
text: "hello slack!",
17-
})
22+
});
1823

1924
return (
2025
<>

‎packages/connect-react/src/components/Alert.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
import type { ConfigurablePropAlert } from "@pipedream/sdk"
1+
import type { ConfigurablePropAlert } from "@pipedream/sdk";
22

33
type AlertProps = {
4-
prop: ConfigurablePropAlert
5-
}
4+
prop: ConfigurablePropAlert;
5+
};
66

77
export function Alert({ prop }: AlertProps) {
88
// XXX useCustomize, getClassNames
9-
return <p className={`pd-alert-${prop.alertType}`}>{prop.content}</p>
9+
return <p className={`pd-alert-${prop.alertType}`}>{prop.content}</p>;
1010
}

‎packages/connect-react/src/components/ComponentForm.tsx‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,28 @@
1-
import { FormContextProvider, type FormContext } from "../hooks/form-context"
1+
import {
2+
FormContextProvider, type FormContext,
3+
} from "../hooks/form-context";
24
import type {
35
ConfigurableProps,
46
ConfiguredProps,
57
V1Component,
6-
} from "@pipedream/sdk"
7-
import { InternalComponentForm } from "./InternalComponentForm"
8+
} from "@pipedream/sdk";
9+
import { InternalComponentForm } from "./InternalComponentForm";
810

911
export type ComponentFormProps<T extends ConfigurableProps = any> = {
10-
userId: string
11-
component: V1Component<T>
12-
configuredProps?: ConfiguredProps<T> // XXX value?
13-
disableQueryDisabling?: boolean
14-
propNames?: string[] // TODO PropNames<T>
15-
onSubmit?: (ctx: FormContext) => void | Promise<void> // if passed, we include button
16-
onUpdateConfiguredProps?: (v: ConfiguredProps<T>) => void // XXX onChange?
17-
hideOptionalProps?: boolean
18-
}
12+
userId: string;
13+
component: V1Component<T>;
14+
configuredProps?: ConfiguredProps<T>; // XXX value?
15+
disableQueryDisabling?: boolean;
16+
propNames?: string[]; // TODO PropNames<T>
17+
onSubmit?: (ctx: FormContext) => void | Promise<void>; // if passed, we include button
18+
onUpdateConfiguredProps?: (v: ConfiguredProps<T>) => void; // XXX onChange?
19+
hideOptionalProps?: boolean;
20+
};
1921

2022
export function ComponentForm(props: ComponentFormProps) {
2123
return (
2224
<FormContextProvider props={props}>
2325
<InternalComponentForm />
2426
</FormContextProvider>
25-
)
27+
);
2628
}

‎packages/connect-react/src/components/ComponentFormContainer.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,40 @@
1-
import { useComponent } from "../hooks/use-component"
2-
import { ComponentForm, type ComponentFormProps } from "./ComponentForm"
1+
import { useComponent } from "../hooks/use-component";
2+
import {
3+
ComponentForm, type ComponentFormProps,
4+
} from "./ComponentForm";
35

46
// given
57
// key: string // in future, can be [@<owner>/]<key>[@<version>] -- for now just key
68
// load a component and pass it down
79
type ComponentFormContainerProps = Omit<ComponentFormProps, "component"> & {
8-
componentKey: string
9-
}
10+
componentKey: string;
11+
};
1012

1113
export function ComponentFormContainer(props: ComponentFormContainerProps) {
1214
const {
1315
isLoading,
1416
error,
1517
component,
16-
} = useComponent({ key: props.componentKey })
18+
} = useComponent({
19+
key: props.componentKey,
20+
});
1721

1822
if (!props.componentKey) {
19-
throw new Error("componentKey required")
23+
throw new Error("componentKey required");
2024
}
2125

2226
if (isLoading) {
23-
return <p>Loading...</p>
27+
return <p>Loading...</p>;
2428
}
2529

2630
if (error) {
27-
return <p>Error: {error.message}</p>
31+
return <p>Error: {error.message}</p>;
2832
}
2933

3034
if (!component) {
31-
return <p>Component not found</p>
35+
return <p>Component not found</p>;
3236
}
3337

3438
// TODO move / improve lib.ts and make sure V1Component and it match / are shared
35-
return <ComponentForm component={component} {...props} />
39+
return <ComponentForm component={component} {...props} />;
3640
}

‎packages/connect-react/src/components/Control.tsx‎

Lines changed: 50 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,77 @@
1-
import { FormContext } from "../hooks/form-context"
2-
import { FormFieldContext } from "../hooks/form-field-context"
3-
import { ConfigurableProp } from "@pipedream/sdk"
1+
import { FormContext } from "../hooks/form-context";
2+
import { FormFieldContext } from "../hooks/form-field-context";
3+
import { ConfigurableProp } from "@pipedream/sdk";
44
// import { ControlAny } from "./ControlAny"
5-
import { ControlApp } from "./ControlApp"
6-
import { ControlBoolean } from "./ControlBoolean"
7-
import { ControlInput } from "./ControlInput"
8-
import { ControlSelect } from "./ControlSelect"
9-
import { RemoteOptionsContainer } from "./RemoteOptionsContainer"
5+
import { ControlApp } from "./ControlApp";
6+
import { ControlBoolean } from "./ControlBoolean";
7+
import { ControlInput } from "./ControlInput";
8+
import { ControlSelect } from "./ControlSelect";
9+
import { RemoteOptionsContainer } from "./RemoteOptionsContainer";
1010

1111
export type ControlProps<T extends ConfigurableProp> = {
12-
field: FormFieldContext<T>
13-
form: FormContext
14-
}
12+
field: FormFieldContext<T>;
13+
form: FormContext;
14+
};
1515

1616
// TODO for easier Control* overriding, should probably pass more stuff in so they don't need to reach into context?
1717
// ... or do we want the API to incentivize just reaching into context?
1818
export function Control<T extends ConfigurableProp>(props: ControlProps<T>) {
19-
const { field, form } = props
20-
const { queryDisabledIdx } = form
21-
const { prop, idx } = field
22-
const app = "app" in field.extra ? field.extra.app : undefined
19+
const {
20+
field, form,
21+
} = props;
22+
const { queryDisabledIdx } = form;
23+
const {
24+
prop, idx,
25+
} = field;
26+
const app = "app" in field.extra
27+
? field.extra.app
28+
: undefined;
2329

2430
if (prop.remoteOptions || prop.type === "$.discord.channel") {
25-
return <RemoteOptionsContainer queryEnabled={queryDisabledIdx == null || queryDisabledIdx >= idx} />
31+
return <RemoteOptionsContainer queryEnabled={queryDisabledIdx == null || queryDisabledIdx >= idx} />;
2632
}
2733

2834
if ("options" in prop && prop.options) {
29-
let options = prop.options
35+
let options = prop.options;
3036
if (typeof options[0] !== "object") {
31-
options = options.map((o: unknown) => ({label: o, value: o}))
37+
options = options.map((o: unknown) => ({
38+
label: o,
39+
value: o,
40+
}));
3241
}
33-
return <ControlSelect options={options} components={{ IndicatorSeparator: () => null }} /> // TODO fix typing issue here!
42+
return <ControlSelect options={options} components={{
43+
IndicatorSeparator: () => null,
44+
}} />; // TODO fix typing issue here!
3445
}
3546

3647
// TODO just look at registry component repo and look for what we should make sure we support
3748
// TODO deal with suspense stuff!
3849
if (prop.type.endsWith("[][]")) {
39-
throw new Error("Unsupported property type: " + prop.type)
50+
throw new Error("Unsupported property type: " + prop.type);
4051
}
4152

4253
if (prop.type.endsWith("[]")) {
43-
return <ControlSelect isCreatable={true} options={[]} components={{ IndicatorSeparator: () => null }} />
54+
return <ControlSelect isCreatable={true} options={[]} components={{
55+
IndicatorSeparator: () => null,
56+
}} />;
4457
}
4558

4659
switch (prop.type) {
47-
// problem with this is that it should be the JSON value, but if it is at any point
48-
// not a valid json value, it should just be the string so the value is not lost... so it's just very odd
49-
// without a more stringent JSON builder type component
50-
// case "any":
51-
// return <ControlAny />
52-
case "app":
53-
return <ControlApp app={app} />
54-
case "boolean":
55-
return <ControlBoolean />
56-
case "string":
57-
case "integer":
58-
// XXX split into ControlString, ControlInteger, etc? but want to share autoComplet="off", etc functionality in base one
59-
return <ControlInput />
60-
default:
61-
// TODO "not supported prop type should bubble up"
62-
throw new Error("Unsupported property type: " + prop.type)
60+
// problem with this is that it should be the JSON value, but if it is at any point
61+
// not a valid json value, it should just be the string so the value is not lost... so it's just very odd
62+
// without a more stringent JSON builder type component
63+
// case "any":
64+
// return <ControlAny />
65+
case "app":
66+
return <ControlApp app={app} />;
67+
case "boolean":
68+
return <ControlBoolean />;
69+
case "string":
70+
case "integer":
71+
// XXX split into ControlString, ControlInteger, etc? but want to share autoComplet="off", etc functionality in base one
72+
return <ControlInput />;
73+
default:
74+
// TODO "not supported prop type should bubble up"
75+
throw new Error("Unsupported property type: " + prop.type);
6376
}
6477
}

‎packages/connect-react/src/components/ControlAny.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,26 @@
1-
import { useFormFieldContext } from "../hooks/form-field-context"
2-
import { useCustomize } from "../hooks/customization-context"
3-
import type { CSSProperties } from "react"
1+
import { useFormFieldContext } from "../hooks/form-field-context";
2+
import { useCustomize } from "../hooks/customization-context";
3+
import type { CSSProperties } from "react";
44

55
export function ControlAny() {
6-
const props = useFormFieldContext()
7-
const { id, onChange, value } = props
8-
const { getProps, theme } = useCustomize()
6+
const props = useFormFieldContext();
7+
const {
8+
id, onChange, value,
9+
} = props;
10+
const {
11+
getProps, theme,
12+
} = useCustomize();
913
const baseStyles: CSSProperties = {
1014
display: "block",
1115
gridArea: "control",
1216
width: "100%",
1317
fontSize: "0.875rem",
1418
boxShadow: theme.boxShadow.input,
15-
}
19+
};
1620

17-
let jsonValue = value
21+
let jsonValue = value;
1822
if (typeof jsonValue === "object") {
19-
jsonValue = JSON.stringify(jsonValue)
23+
jsonValue = JSON.stringify(jsonValue);
2024
}
2125

2226
// XXX this needs to be a more complex component so disabled above
@@ -27,5 +31,5 @@ export function ControlAny() {
2731
onChange={(e) => onChange(e.target.value)}
2832
{...getProps("controlAny", baseStyles, props)}
2933
/>
30-
)
34+
);
3135
}

0 commit comments

Comments
 (0)