Skip to content

Commit

Permalink
style: fix field label
Browse files Browse the repository at this point in the history
  • Loading branch information
asmyshlyaev177 committed Nov 2, 2024
1 parent 386b7bf commit 1ab57a5
Show file tree
Hide file tree
Showing 18 changed files with 77 additions and 64 deletions.
8 changes: 4 additions & 4 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -185,14 +185,14 @@ function MyComponent() {
export const form: Form = {
name: '',
age: undefined,
'agree to terms': false,
agree_to_terms: false,
tags: [],
};

type Form = {
name: string;
age?: number;
'agree to terms': boolean;
agree_to_terms: boolean;
tags: { id: string; value: { text: string; time: Date } }[];
};
```
Expand Down Expand Up @@ -391,14 +391,14 @@ API is same as for Next.js version, except can pass options from [NavigateOption
export const form: Form = {
name: '',
age: undefined,
'agree to terms': false,
agree_to_terms: false,
tags: [],
};

type Form = {
name: string;
age?: number;
'agree to terms': boolean;
agree_to_terms: boolean;
tags: { id: string; value: { text: string; time: Date } }[];
};

Expand Down
1 change: 1 addition & 0 deletions packages/example-nextjs14/src/app/(tests)/useSharedState/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const FirstComponent = () => {
onChange={(ev) =>
setState((curr) => ({ ...curr, agree: ev.target.checked }))
}
data-testid="agree_to_terms"
></Input>
</div>
</div>
Expand Down
11 changes: 7 additions & 4 deletions packages/example-nextjs14/src/app/Form-for-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ export const Form = ({

const onChangeTerms = React.useCallback(
(ev: React.ChangeEvent<HTMLInputElement>) => {
setUrl({ 'agree to terms': ev.target.checked });
setUrl({ agree_to_terms: ev.target.checked });
},
[setUrl],
);
Expand Down Expand Up @@ -107,15 +107,18 @@ export const Form = ({
type="number"
value={urlState.age}
onChange={onChangeAge}
name="name"
/>
</Field>

<Field id="agree to terms" text="Agree to terms">
<Field id="agree_to_terms" text="Agree to terms">
<Input
id="agree to terms"
id="agree_to_terms"
type="checkbox"
checked={urlState['agree to terms']}
checked={urlState['agree_to_terms']}
onChange={onChangeTerms}
name="agree_to_terms"
data-testid="agree_to_terms"
/>
</Field>

Expand Down
33 changes: 18 additions & 15 deletions packages/example-nextjs14/src/app/Form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,43 +15,43 @@ export const Form = ({
searchParams?: object;
ghLink: string
}) => {
const { state, updateUrl } = useUrlState({
const { urlState, setUrl } = useUrlState({
defaultState: form,
searchParams,
});

const onChangeAge = React.useCallback(
(ev: React.ChangeEvent<HTMLInputElement>) => {
const val = +ev.target.value;
updateUrl({ age: val ? val : undefined });
setUrl({ age: val ? val : undefined });
},
[updateUrl],
[setUrl],
);

const onChangeName = React.useCallback(
(ev: React.ChangeEvent<HTMLInputElement>) => {
updateUrl({ name: ev.target.value });
setUrl({ name: ev.target.value });
},
[updateUrl],
[setUrl],
);

const onChangeTerms = React.useCallback(
(ev: React.ChangeEvent<HTMLInputElement>) => {
updateUrl({ 'agree to terms': ev.target.checked });
setUrl({ agree_to_terms: ev.target.checked });
},
[updateUrl],
[setUrl],
);

const onChangeTags = React.useCallback(
(tag: (typeof tags)[number]) => {
updateUrl((curr) => ({
setUrl((curr) => ({
...curr,
tags: curr.tags.find((t) => t.id === tag.id)
? curr.tags.filter((t) => t.id !== tag.id)
: curr.tags.concat(tag),
}));
},
[updateUrl],
[setUrl],
);

return (
Expand All @@ -65,39 +65,42 @@ export const Form = ({
<Field id="name" text="Name">
<Input
id="name"
value={state.name}
value={urlState.name}
onChange={onChangeName}
name="name"
/>
</Field>

<Field id="age" text="Age">
<Input
id="age"
type="number"
value={state.age}
value={urlState.age}
onChange={onChangeAge}
name="age"
/>
</Field>

<Field
id="agree to terms"
id="agree_to_terms"
text="Agree to terms"
className="flex flex-row justify-between gap-2 max-w-[150px] min-w-[150px]"
>
<Input
id="agree to terms"
id="agree_to_terms"
type="checkbox"
className="max-w-[24px]"
checked={state['agree to terms']}
checked={urlState['agree_to_terms']}
onChange={onChangeTerms}
name="agree_to_terms"
/>
</Field>

<Field id="tags" text="Tags">
<div className="flex flex-wrap gap-2">
{tags.map((tag) => (
<Tag
active={!!state.tags.find((t) => t.id === tag.id)}
active={!!urlState.tags.find((t) => t.id === tag.id)}
text={tag.value.text}
onClick={() => onChangeTags(tag)}
key={tag.id}
Expand Down
4 changes: 2 additions & 2 deletions packages/example-nextjs14/src/app/components/CodeBlocksNext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export const CodeBlocks = () => {
content={`export const form: Form = {
name: '',
age: undefined,
'agree to terms': false,
agree_to_terms: false,
tags: [],
};
type Form = {
name: string;
age?: number;
'agree to terms': boolean;
agree_to_terms: boolean;
tags: { id: string; value: { text: string; time: Date } }[];
};`}
/>
Expand Down
4 changes: 2 additions & 2 deletions packages/example-nextjs14/src/app/components/CodeBlocksRR.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,14 @@ export const CodeBlocksRR = () => {
content={`export const form: Form = {
name: '',
age: undefined,
'agree to terms': false,
agree_to_terms: false,
tags: [],
};
type Form = {
name: string;
age?: number;
'agree to terms': boolean;
agree_to_terms: boolean;
tags: { id: string; value: { text: string; time: Date } }[];
};`}
/>
Expand Down
1 change: 1 addition & 0 deletions packages/example-nextjs15/src/app/(tests)/useSharedState/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const FirstComponent = () => {
onChange={(ev) =>
setState((curr) => ({ ...curr, agree: ev.target.checked }))
}
data-testid="agree_to_terms"
></Input>
</div>
</div>
Expand Down
9 changes: 5 additions & 4 deletions packages/example-nextjs15/src/app/Form-for-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ export const Form = ({

const onChangeTerms = React.useCallback(
(ev: React.ChangeEvent<HTMLInputElement>) => {
setUrl({ 'agree to terms': ev.target.checked });
setUrl({ agree_to_terms: ev.target.checked });
},
[setUrl],
);
Expand Down Expand Up @@ -110,12 +110,13 @@ export const Form = ({
/>
</Field>

<Field id="agree to terms" text="Agree to terms">
<Field id="agree_to_terms" text="Agree to terms">
<Input
id="agree to terms"
id="agree_to_terms"
type="checkbox"
checked={urlState['agree to terms']}
checked={urlState['agree_to_terms']}
onChange={onChangeTerms}
data-testid="agree_to_terms"
/>
</Field>

Expand Down
6 changes: 3 additions & 3 deletions packages/example-react-router6/src/FewComponents/Component.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { useUrlState } from "state-in-url/react-router";
import { stateShape } from "./stateShape";

export const Component = () => {
const { state, updateUrl } = useUrlState({
const { urlState, setUrl } = useUrlState({
defaultState: stateShape,
replace: false,
});
Expand All @@ -14,9 +14,9 @@ export const Component = () => {
<div className="flex gap-2">
<h2>Per page select</h2>
<select
value={state.perPage}
value={urlState.perPage}
onChange={(ev) =>
updateUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
setUrl((curr) => ({ ...curr, perPage: +ev.target.value }))
}
className=""
data-testid="select"
Expand Down
9 changes: 5 additions & 4 deletions packages/example-react-router6/src/Form-for-test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const Form = ({ className }: { className?: string }) => {

const onChangeTerms = React.useCallback(
(ev: React.ChangeEvent<HTMLInputElement>) => {
setUrl({ "agree to terms": ev.target.checked });
setUrl({ agree_to_terms: ev.target.checked });
},
[setUrl],
);
Expand Down Expand Up @@ -105,16 +105,17 @@ export const Form = ({ className }: { className?: string }) => {
</Field>

<Field
id="agree to terms"
id="agree_to_terms"
text="Agree to terms"
className="select-none flex gap-4 cursor-pointer"
>
<Input
id="agree to terms"
id="agree_to_terms"
type="checkbox"
checked={urlState["agree to terms"]}
checked={urlState["agree_to_terms"]}
onChange={onChangeTerms}
className="w-[25px] h-[25px] text-black"
data-testid="agree_to_terms"
/>
</Field>

Expand Down
5 changes: 4 additions & 1 deletion packages/example-react/src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@ const FirstComponent = () => {
<Label htmlFor='agree'>Agree</Label>
<Input id="agree"
checked={state.agree} type="checkbox"
onChange={ev => setState(curr => ({ ...curr, agree: ev.target.checked }))}></Input>
onChange={ev => setState(curr => ({ ...curr, agree: ev.target.checked }))}
data-testid="agree_to_terms"
></Input>

</div>
</div>
}
Expand Down
4 changes: 2 additions & 2 deletions packages/shared/form.ts
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
export const form: Form = {
name: "",
age: undefined,
"agree to terms": false,
agree_to_terms: false,
tags: [],
};

type Form = {
name: string;
age?: number;
"agree to terms": boolean;
agree_to_terms: boolean;
tags: { id: string; value: { text: string; time: Date; iso?: string } }[];
};
12 changes: 6 additions & 6 deletions packages/urlstate/parseSPObj.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,12 @@ import { parseSPObj } from './parseSPObj';
describe('should decode server components searchParams', () => {
it('without errors', () => {
const sp = {
'agree to terms': 'true',
agree_to_terms: 'true',
tags: "[{'id':'3','value':{'text':'TailwindCSS','time':'2024-07-07T13:51:18.069Z'}}]",
};
const expected = {
...form,
'agree to terms': true,
agree_to_terms: true,
tags: [
{
id: '3',
Expand All @@ -22,12 +22,12 @@ describe('should decode server components searchParams', () => {

it('invalid string', () => {
const sp = {
'agree to terms': 'true',
agree_to_terms: 'true',
tags: "[{'id':'3','value':{'text':'TailwindC",
};
const expected = {
...form,
'agree to terms': true,
agree_to_terms: true,
tags: [],
};

Expand All @@ -38,13 +38,13 @@ describe('should decode server components searchParams', () => {
const form: Form = {
name: '',
age: undefined,
'agree to terms': false,
agree_to_terms: false,
tags: [],
};

type Form = {
name: string;
age?: number;
'agree to terms': boolean;
agree_to_terms: boolean;
tags: { id: string; value: { text: string; time: Date } }[];
};
4 changes: 2 additions & 2 deletions packages/urlstate/useSharedState/useSharedState.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,13 +255,13 @@ describe('useSharedState', () => {
export const form: Form = {
name: '',
age: undefined,
'agree to terms': false,
agree_to_terms: false,
tags: [],
};

type Form = {
name: string;
age?: number;
'agree to terms': boolean;
agree_to_terms: boolean;
tags: { id: string; value: { text: string; time: Date } }[];
};
Loading

0 comments on commit 1ab57a5

Please sign in to comment.