Skip to content

Commit d2c9d1d

Browse files
Brayan-724Brayan-724
committed
style(react): pnpm run fmt 
1 parent 26216a8 commit d2c9d1d

File tree

13 files changed

+99
-95
lines changed

13 files changed

+99
-95
lines changed

‎js/react/eslint.config.ts‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,9 +23,12 @@ export default ts.config([
2323
rules: {
2424
"no-sparse-arrays": "off",
2525
"@typescript-eslint/no-unsafe-function-type": "off",
26-
"react-refresh/only-export-components": ["warn", {
27-
allowConstantExport: true,
28-
}],
26+
"react-refresh/only-export-components": [
27+
"warn",
28+
{
29+
allowConstantExport: true,
30+
},
31+
],
2932
},
3033
},
3134
globalIgnores(["**/dist"]),

‎js/react/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />

‎js/react/lib/components/Example/index.tsx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
export function Example(
2-
props: {
3-
text?: string;
4-
boolean?: boolean;
5-
object?: object;
6-
required: string;
7-
function?: () => void;
8-
callback?: () => void;
9-
},
10-
) {
1+
export function Example(props: {
2+
text?: string;
3+
boolean?: boolean;
4+
object?: object;
5+
required: string;
6+
function?: () => void;
7+
callback?: () => void;
8+
}) {
119
return (
1210
<pre className="text-red-900" onClick={props.callback}>
1311
{JSON.stringify(props, null, 2)}

‎js/react/lib/components/button/button.component.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const Button = (props: ButtonProps) => {
1616
<button
1717
className={cn(
1818
...variants[variant],
19-
"px-8 h-12 text-button w-fit cursor-pointer disabled:cursor-not-allowed flex items-center justify-center gap-2.5 transition",
19+
"text-button flex h-12 w-fit cursor-pointer items-center justify-center gap-2.5 px-8 transition disabled:cursor-not-allowed",
2020
"[&>svg]:size-6",
2121
className
2222
)}

‎js/react/showcase/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ import { ShowComponent } from "./ShowComponent";
33

44
export function App() {
55
return (
6-
<div className="px-5 max-w-[1024px] mx-auto mt-10">
7-
<h1 className="text-5xl font-bold text-center mb-5">
6+
<div className="mx-auto mt-10 max-w-[1024px] px-5">
7+
<h1 className="mb-5 text-center text-5xl font-bold">
88
RustLangES Components
99
</h1>
1010
<p className="text-center text-xs">

‎js/react/showcase/ShowComponent/Container.tsx‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,22 @@ import { PropsWithChildren } from "react";
33
import { ChevronDown } from "../icons";
44

55
export function ShowComponentContainer(
6-
props: PropsWithChildren<
7-
{ title: React.ReactNode; className?: string; contentClassName?: string }
8-
>,
6+
props: PropsWithChildren<{
7+
title: React.ReactNode;
8+
className?: string;
9+
contentClassName?: string;
10+
}>
911
) {
1012
return (
1113
<details
12-
className={"border-1 rounded-sm border-black shadow-brutal px-3 py-2 mb-5 details-content:flex " +
13-
props.className}
14+
className={
15+
"border-1 shadow-brutal details-content:flex mb-5 rounded-sm border-black px-3 py-2 " +
16+
props.className
17+
}
1418
>
15-
<summary className="flex justify-between items-center pr-3 marker:hidden list-none text-lg border-b-0 border-b-gray-300 in-open:border-b-1">
16-
<span className="flex items-center gap-2">
17-
{props.title}
18-
</span>
19-
<span className="text-2xl rotate-[-90deg] in-open:rotate-0 transition">
19+
<summary className="in-open:border-b-1 flex list-none items-center justify-between border-b-0 border-b-gray-300 pr-3 text-lg marker:hidden">
20+
<span className="flex items-center gap-2">{props.title}</span>
21+
<span className="in-open:rotate-0 rotate-[-90deg] text-2xl transition">
2022
<ChevronDown />
2123
</span>
2224
</summary>

‎js/react/showcase/ShowComponent/Error.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
11
import { BombIcon } from "../icons";
22
import { ShowComponentContainer } from "./Container";
33

4-
export function ShowComponentError(
5-
{ title, error: err }: { title: string; error: Error },
6-
) {
4+
export function ShowComponentError({
5+
title,
6+
error: err,
7+
}: {
8+
title: string;
9+
error: Error;
10+
}) {
711
return (
812
<ShowComponentContainer
913
title={
@@ -14,13 +18,10 @@ export function ShowComponentError(
1418
className="bg-red-300"
1519
contentClassName="flex-col"
1620
>
17-
<span className="text-xl font-bold">
18-
{err.message}
19-
</span>
20-
{(err.stack?.split?.("\n") ?? []).map((line) => {
21+
<span className="text-xl font-bold">{err.message}</span>
22+
{(err.stack?.split?.("\n") ?? []).map(line => {
2123
// really last @
22-
const [, name, source_ = ""] = line.match(/(.*)@([^@]*)$/) ??
23-
[, line];
24+
const [, name, source_ = ""] = line.match(/(.*)@([^@]*)$/) ?? [, line];
2425

2526
let source = source_;
2627

@@ -39,18 +40,18 @@ export function ShowComponentError(
3940
: source;
4041

4142
// match to <source-file>?<timestamp-or-version>:<line>:<column>
42-
const [, sourceFile, lineN, columnN] =
43-
source.match(/^(.+)?(?:t=\d+|v=\w+):(\d+):(\d+)$/) ??
44-
[, source, "", ""];
43+
const [, sourceFile, lineN, columnN] = source.match(
44+
/^(.+)?(?:t=\d+|v=\w+):(\d+):(\d+)$/
45+
) ?? [, source, "", ""];
4546
source = `${sourceFile}${lineN}:${columnN}`;
4647

4748
return (
48-
<span key={line} className="w-full flex justify-between">
49+
<span key={line} className="flex w-full justify-between">
4950
<span className="font-semibold">{name}</span>
5051
<span
51-
className={!source.startsWith("/node_modules")
52-
? "font-semibold"
53-
: ""}
52+
className={
53+
!source.startsWith("/node_modules") ? "font-semibold" : ""
54+
}
5455
>
5556
{source}
5657
</span>

‎js/react/showcase/ShowComponent/Field.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export function ShowComponentField({
2626
});
2727

2828
return (
29-
<div className="w-full flex items-center">
29+
<div className="flex w-full items-center">
3030
<label className="w-full">
3131
{name}
3232
<span className={def.optional ? "text-cyan-700" : "text-red-700"}>
@@ -35,7 +35,7 @@ export function ShowComponentField({
3535
</label>
3636
{modified && (
3737
<button
38-
className="flex justify-center items-center min-w-[1.7rem] h-[1.7rem] border-1 rounded-sm shadow-brutal mr-1"
38+
className="border-1 shadow-brutal mr-1 flex h-[1.7rem] min-w-[1.7rem] items-center justify-center rounded-sm"
3939
// Ignore label events
4040
onClick={() => {
4141
setValue(def.default);
@@ -59,7 +59,7 @@ export function ShowComponentField({
5959
{def.options.length ? (
6060
<select
6161
defaultValue={def.default as string}
62-
onChange={(e) => {
62+
onChange={e => {
6363
setModified(true);
6464
setValue(e.currentTarget.value);
6565
}}
@@ -81,9 +81,9 @@ export function ShowComponentField({
8181
</select>
8282
) : (
8383
<textarea
84-
className="max-w-[150px] min-h-[1.7rem] h-[1.7rem] border-1 rounded-sm shadow-brutal px-1"
84+
className="border-1 shadow-brutal h-[1.7rem] min-h-[1.7rem] max-w-[150px] rounded-sm px-1"
8585
value={value as string}
86-
onChange={(ev) => {
86+
onChange={ev => {
8787
setModified(true);
8888
setValue(ev.currentTarget.value);
8989
}}
@@ -93,7 +93,7 @@ export function ShowComponentField({
9393
) : def.type === "boolean" ? (
9494
<>
9595
<button
96-
className="flex justify-center items-center min-w-[1.7rem] h-[1.7rem] border-1 shadow-brutal rounded-sm cursor-pointer"
96+
className="border-1 shadow-brutal flex h-[1.7rem] min-w-[1.7rem] cursor-pointer items-center justify-center rounded-sm"
9797
onClick={() => {
9898
setModified(true);
9999
setValue(!props.value);
@@ -102,27 +102,27 @@ export function ShowComponentField({
102102
<span
103103
className={
104104
(props.value ? "block" : "hidden") +
105-
" bg-black w-[1rem] h-[1rem] rounded-xs"
105+
" rounded-xs h-[1rem] w-[1rem] bg-black"
106106
}
107107
/>
108108
</button>
109109
</>
110110
) : def.type === "object" ? (
111111
<input
112112
disabled
113-
className="max-w-[150px] h-[1.7rem] border-1 rounded-sm shadow-brutal px-1 bg-gray-300 cursor-not-allowed"
113+
className="border-1 shadow-brutal h-[1.7rem] max-w-[150px] cursor-not-allowed rounded-sm bg-gray-300 px-1"
114114
value="object"
115115
/>
116116
) : def.type === "function" ? (
117117
<input
118118
disabled
119-
className="w-[150px] h-[1.7rem] border-1 rounded-sm shadow-brutal px-1 bg-gray-300 cursor-not-allowed"
119+
className="border-1 shadow-brutal h-[1.7rem] w-[150px] cursor-not-allowed rounded-sm bg-gray-300 px-1"
120120
value="function"
121121
/>
122122
) : def.type === "callback" ? (
123123
<p
124124
className={
125-
"min-w-[150px] h-[1.7rem] border-1 rounded-sm shadow-brutal px-1 text-center " +
125+
"border-1 shadow-brutal h-[1.7rem] min-w-[150px] rounded-sm px-1 text-center " +
126126
(props.value ? "bg-green-400" : "")
127127
}
128128
>

‎js/react/showcase/ShowComponent/index.tsx‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export function ShowComponent(
2929
const title =
3030
props.title ??
3131
("component" in props
32-
? props.component.displayName ?? props.component.name
32+
? (props.component.displayName ?? props.component.name)
3333
: null) ??
3434
"No title";
3535

@@ -72,18 +72,20 @@ function ShowComponentInner(
7272
prop.type === "string"
7373
? ""
7474
: prop.type === "boolean"
75-
? false
76-
: prop.type === "number"
77-
? 0
78-
: prop.type === "object"
79-
? {}
80-
: prop.type === "function"
81-
? () => {}
82-
: prop.type === "callback"
83-
? () => {}
84-
: (() => {
85-
throw new Error("Unknown prop type: " + prop.type);
86-
})(),
75+
? false
76+
: prop.type === "number"
77+
? 0
78+
: prop.type === "object"
79+
? {}
80+
: prop.type === "function"
81+
? () => {}
82+
: prop.type === "callback"
83+
? () => {}
84+
: (() => {
85+
throw new Error(
86+
"Unknown prop type: " + prop.type
87+
);
88+
})(),
8789
disabled: false,
8890
optional: false,
8991
options: [],
@@ -101,11 +103,11 @@ function ShowComponentInner(
101103
return (
102104
<ShowComponentContainer title={props.title} className="bg-gray-50">
103105
{!!Object.keys(inputs).length && (
104-
<div className="w-full max-w-xs border-r-1 border-r-gray-300 pt-2 pr-2 flex flex-col gap-2">
106+
<div className="border-r-1 flex w-full max-w-xs flex-col gap-2 border-r-gray-300 pr-2 pt-2">
105107
{inputs}
106108
</div>
107109
)}
108-
<div className="w-full py-2 flex justify-center items-center gap-2 flex-wrap">
110+
<div className="flex w-full flex-wrap items-center justify-center gap-2 py-2">
109111
{"component" in props ? (
110112
<props.component {...childrenProps} />
111113
) : (
@@ -131,8 +133,8 @@ function processProps(
131133
prop.type === "callback"
132134
? () => setValue(true)
133135
: !prop.optional || modified
134-
? value
135-
: prop.settedDefault,
136+
? value
137+
: prop.settedDefault,
136138
element: (
137139
<ShowComponentField
138140
key={name}
@@ -153,7 +155,7 @@ function processProps(
153155
Object.entries(newProps).map(([k, v]) => [k, v.value])
154156
);
155157

156-
const inputs = Object.values(newProps).map((p) => p.element);
158+
const inputs = Object.values(newProps).map(p => p.element);
157159

158160
return [childrenProps, inputs];
159161
}

‎js/react/showcase/ShowComponent/types.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
export type FieldType<Field, F> = unknown extends F
22
? string
33
: Field extends string
4-
? "string"
5-
: Field extends boolean
6-
? "boolean"
7-
: Field extends Function
8-
? "function" | "callback"
9-
: Field extends object
10-
? "object"
11-
: string;
4+
? "string"
5+
: Field extends boolean
6+
? "boolean"
7+
: Field extends Function
8+
? "function" | "callback"
9+
: Field extends object
10+
? "object"
11+
: string;
1212

1313
export type PropsDefOptional<Field> = undefined extends Field
1414
? Field extends undefined

0 commit comments

Comments
 (0)