Skip to content

Commit 0766e5a

Browse files
devrntdevrnt
authored
Merge pull request #17 from devrnt/chore/add-react-query-in-playground
Chore/add react query in playground
2 parents 384754b + 3b61be3 commit 0766e5a

File tree

10 files changed

+296
-79
lines changed

10 files changed

+296
-79
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,6 +179,12 @@ It's recommended to pass the shared components to the `header` or `footer` in th
179179
Small playground to showcase the functionalities of `react-use-wizard`:
180180
[https://devrnt.github.io/react-use-wizard/](https://devrnt.github.io/react-use-wizard/)
181181

182+
Following use cases are available in the playground
183+
- Simple wizard with async and sync steps
184+
- Animated wizard with sync steps
185+
- Integration with [react-query](https://react-query.tanstack.com/) (mutation on next step)
186+
187+
Source code can be found [here](https://github.com/devrnt/react-use-wizard/tree/main/playground).
182188
## Examples
183189
Go to [examples](https://github.com/devrnt/react-use-wizard/tree/master/examples) to check out some integrations (Gatsby, NextJS...).
184190

‎playground/modules/common/section.tsx‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { styled } from 'goober';
2+
import * as React from 'react';
3+
4+
const Title = styled('h2')`
5+
font-family: 'Rokkitt';
6+
font-size: 1.75rem;
7+
8+
span {
9+
margin-left: 0.5rem;
10+
font-weight: 100;
11+
font-size: 1.5rem;
12+
}
13+
`;
14+
15+
const Item = styled('div')<{ showDivider: boolean }>`
16+
display: flex;
17+
flex-direction: column;
18+
19+
&::after {
20+
margin: 3rem 0 2rem;
21+
content: '';
22+
background-image: linear-gradient(48.66deg, var(--purple), var(--blue));
23+
width: 100%;
24+
position: relative;
25+
height: ${({ showDivider }) => (showDivider ? '1px' : 0)};
26+
}
27+
28+
${({ showDivider }) =>
29+
showDivider
30+
? `
31+
&::after {
32+
margin: 3rem 0 2rem;
33+
content: '';
34+
background-image: linear-gradient(
35+
48.66deg,
36+
var(--purple),
37+
var(--blue)
38+
);
39+
width: 100%;
40+
position: relative;
41+
height: 1px;
42+
}
43+
`
44+
: ''}
45+
`;
46+
47+
type Props = {
48+
title: string;
49+
description: string;
50+
showDivider?: boolean;
51+
};
52+
53+
const Section: React.FC<Props> = ({
54+
title,
55+
description,
56+
showDivider = true,
57+
children,
58+
}) => {
59+
return (
60+
<>
61+
<Title>
62+
{title} <span>{description}</span>
63+
</Title>
64+
<Item showDivider={showDivider}>{children}</Item>
65+
</>
66+
);
67+
};
68+
69+
export default Section;

‎playground/modules/wizard/animated/index.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import * as React from 'react';
2+
3+
import { Wizard } from '../../../../dist';
4+
import { AnimatedStep, Footer, Step } from '../../../components';
5+
import Section from '../../common/section';
6+
7+
const AnimatedSection: React.FC = () => {
8+
return (
9+
<Section
10+
title="Animated wizard"
11+
description="animation by framer motion"
12+
showDivider={false}
13+
>
14+
<Wizard footer={<Footer />}>
15+
<AnimatedStep>
16+
<Step number={1} withCallback={false} />
17+
</AnimatedStep>
18+
<AnimatedStep>
19+
<Step number={2} withCallback={false} />
20+
</AnimatedStep>
21+
<AnimatedStep>
22+
<Step number={3} withCallback={false} />
23+
</AnimatedStep>
24+
<AnimatedStep>
25+
<Step number={4} withCallback={false} />
26+
</AnimatedStep>
27+
</Wizard>
28+
</Section>
29+
);
30+
};
31+
32+
export default AnimatedSection;

‎playground/modules/wizard/reactQuery/index.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import * as React from 'react';
2+
import { QueryClient, QueryClientProvider } from 'react-query';
3+
4+
import { Wizard } from '../../../../dist';
5+
import { Footer } from '../../../components';
6+
import Section from '../../common/section';
7+
import LazyQueryStep from './lazyQuery';
8+
import QueryStep from './queryStep';
9+
10+
const queryClient = new QueryClient();
11+
12+
const ReactQuerySection: React.FC = () => {
13+
return (
14+
<QueryClientProvider client={queryClient}>
15+
<Section
16+
title="React query"
17+
description="integration with react-query"
18+
showDivider={false}
19+
>
20+
<Wizard footer={<Footer />}>
21+
<QueryStep number={1} />
22+
<LazyQueryStep number={2} />
23+
<QueryStep number={3} />
24+
<LazyQueryStep number={4} />
25+
<QueryStep number={5} />
26+
</Wizard>
27+
</Section>
28+
</QueryClientProvider>
29+
);
30+
};
31+
32+
export default ReactQuerySection;

‎playground/modules/wizard/reactQuery/lazyQuery.tsx‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
import { styled } from 'goober';
2+
import * as React from 'react';
3+
import { useMutation } from 'react-query';
4+
5+
import { useWizard } from '../../../../dist';
6+
7+
const Container = styled('div')`
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
flex-direction: column;
12+
min-height: 35vh;
13+
`;
14+
15+
const P = styled('p')`
16+
color: var(--text);
17+
`;
18+
19+
type Props = {
20+
number: number;
21+
};
22+
23+
const LazyQueryStep: React.FC<Props> = ({ number }) => {
24+
const { handleStep, isLoading } = useWizard();
25+
const { error, data, mutateAsync } = useMutation('repDataMutation', () =>
26+
fetch('https://jsonplaceholder.typicode.com/todos').then((res) =>
27+
res.json(),
28+
),
29+
);
30+
31+
handleStep(() => {
32+
return mutateAsync();
33+
});
34+
35+
const content = React.useMemo(() => {
36+
if (error) return 'An error has occurred: ' + (error as Error).message;
37+
38+
return data
39+
? data.map((todo) => (
40+
<div key={todo.id}>
41+
<h1>{data.name}</h1>
42+
</div>
43+
))
44+
: !isLoading && <p>Click next button to make request</p>;
45+
}, [error, data, isLoading]);
46+
47+
return (
48+
<Container>
49+
<P>Step {number}</P>
50+
{content}
51+
{isLoading && <P>Loading...</P>}
52+
</Container>
53+
);
54+
};
55+
56+
export default LazyQueryStep;

‎playground/modules/wizard/reactQuery/queryStep.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { styled } from 'goober';
2+
import * as React from 'react';
3+
import { useQuery } from 'react-query';
4+
5+
const Container = styled('div')`
6+
display: flex;
7+
justify-content: center;
8+
align-items: center;
9+
flex-direction: column;
10+
min-height: 35vh;
11+
`;
12+
13+
const P = styled('p')`
14+
color: var(--text);
15+
`;
16+
17+
type Props = {
18+
number: number;
19+
};
20+
21+
const QueryStep: React.FC<Props> = ({ number }) => {
22+
const { isLoading, error, data } = useQuery('repoData', () =>
23+
fetch(`https://jsonplaceholder.typicode.com/todos/${number}`).then((res) =>
24+
res.json(),
25+
),
26+
);
27+
28+
const content = React.useMemo(() => {
29+
if (isLoading) return 'Loading...';
30+
31+
if (error) return 'An error has occurred: ' + (error as Error).message;
32+
33+
return (
34+
<div>
35+
<h1>
36+
todo {data.id}: {data.title}
37+
</h1>
38+
</div>
39+
);
40+
}, [isLoading, error, data]);
41+
42+
return (
43+
<Container>
44+
<P>Step {number}</P>
45+
{content}
46+
</Container>
47+
);
48+
};
49+
50+
export default QueryStep;

‎playground/modules/wizard/simple/index.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import * as React from 'react';
2+
3+
import { Wizard } from '../../../../dist';
4+
import { AsyncStep, Footer, Step } from '../../../components';
5+
import Section from '../../common/section';
6+
7+
const SimpleSection: React.FC = () => {
8+
return (
9+
<Section title="Simple wizard" description="mix of async and sync steps">
10+
<Wizard footer={<Footer />}>
11+
<AsyncStep number={1} />
12+
<Step number={2} />
13+
<AsyncStep number={3} />
14+
<Step number={4} />
15+
</Wizard>
16+
</Section>
17+
);
18+
};
19+
20+
export default SimpleSection;

‎playground/modules/wizard/wizard.tsx‎

Lines changed: 7 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,22 @@
1-
import { css, styled } from 'goober';
1+
import { styled } from 'goober';
22
import * as React from 'react';
33

4-
import { Wizard } from '../../../dist';
5-
import { AnimatedStep, AsyncStep, Footer, Step } from '../../components';
4+
import AnimatedSection from './animated';
5+
import ReactQuerySection from './reactQuery';
6+
import SimpleSection from './simple';
67

78
const Container = styled('section')`
89
display: flex;
910
flex-direction: column;
1011
width: 100%;
1112
`;
1213

13-
const Title = styled('h2')`
14-
font-family: 'Rokkitt';
15-
font-size: 1.75rem;
16-
17-
span {
18-
margin-left: 0.5rem;
19-
font-weight: 100;
20-
font-size: 1.5rem;
21-
}
22-
`;
23-
24-
const Item = styled('div')<{ showDivider: boolean }>`
25-
display: flex;
26-
flex-direction: column;
27-
28-
&::after {
29-
margin: 3rem 0 2rem;
30-
content: '';
31-
background-image: linear-gradient(48.66deg, var(--purple), var(--blue));
32-
width: 100%;
33-
position: relative;
34-
height: ${({ showDivider }) => (showDivider ? '1px' : 0)};
35-
}
36-
37-
${({ showDivider }) =>
38-
showDivider
39-
? `
40-
&::after {
41-
margin: 3rem 0 2rem;
42-
content: '';
43-
background-image: linear-gradient(
44-
48.66deg,
45-
var(--purple),
46-
var(--blue)
47-
);
48-
width: 100%;
49-
position: relative;
50-
height: 1px;
51-
}
52-
`
53-
: ''}
54-
`;
55-
5614
const WizardModule = () => {
5715
return (
5816
<Container>
59-
<Title>
60-
Simple wizard <span>mix of async and sync steps</span>
61-
</Title>
62-
<Item showDivider>
63-
<Wizard footer={<Footer />}>
64-
<AsyncStep number={1} />
65-
<Step number={2} />
66-
<AsyncStep number={3} />
67-
<Step number={4} />
68-
</Wizard>
69-
</Item>
70-
71-
<Title>
72-
Animated wizard <span>animation by framer motion</span>
73-
</Title>
74-
<Item showDivider={false}>
75-
<Wizard footer={<Footer />}>
76-
<AnimatedStep>
77-
<Step number={1} withCallback={false} />
78-
</AnimatedStep>
79-
<AnimatedStep>
80-
<Step number={2} withCallback={false} />
81-
</AnimatedStep>
82-
<AnimatedStep>
83-
<Step number={3} withCallback={false} />
84-
</AnimatedStep>
85-
<AnimatedStep>
86-
<Step number={4} withCallback={false} />
87-
</AnimatedStep>
88-
</Wizard>
89-
</Item>
17+
<SimpleSection />
18+
<AnimatedSection />
19+
<ReactQuerySection />
9020
</Container>
9121
);
9222
};

‎playground/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@
1212
"dependencies": {
1313
"framer-motion": "^3.1.1",
1414
"goober": "^2.0.19-next.1",
15-
"react-app-polyfill": "^2.0.0"
15+
"react-app-polyfill": "^2.0.0",
16+
"react-query": "^3.5.11"
1617
},
1718
"alias": {
1819
"react": "../node_modules/react",

0 commit comments

Comments
 (0)