Skip to content

Commit f2224df

Browse files
devrntdevrnt
committed
feat: add playground site
1 parent d5c48b5 commit f2224df

File tree

18 files changed

+657
-117
lines changed

18 files changed

+657
-117
lines changed

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"scripts": {
1414
"start": "tsdx watch",
1515
"build": "tsdx build",
16+
"build:playground": "yarn --cwd ./playground install && yarn --cwd ./playground build",
1617
"test": "tsdx test --passWithNoTests",
1718
"test:watch": "tsdx test --watch",
1819
"test:coverage": "tsdx test --coverage",

‎playground/app.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 { WizardModule } from './modules';
4+
import { Page, Style } from './modules/common';
5+
6+
const App = () => {
7+
return (
8+
<>
9+
<Style />
10+
<Page
11+
title="react-use-wizard"
12+
description="Playground to showcase the functionalities of react-use-wizard"
13+
>
14+
<WizardModule />
15+
</Page>
16+
</>
17+
);
18+
};
19+
20+
export default App;

‎playground/components/asyncStep.tsx‎

Lines changed: 21 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import * as React from 'react';
2+
import styled from 'styled-components';
23

34
import { useWizard } from '../../dist';
45
import { useMockMutation } from '../hooks';
@@ -18,6 +19,22 @@ const MOCK = [
1819
},
1920
];
2021

22+
const Container = styled('div')`
23+
background: var(--step);
24+
border: 1px solid #250b46;
25+
border-radius: 2px;
26+
padding: 2.75rem 0.35rem;
27+
display: flex;
28+
flex-direction: column;
29+
min-height: 15vh;
30+
justify-content: center;
31+
align-items: center;
32+
`;
33+
34+
const P = styled.p`
35+
color: white;
36+
`;
37+
2138
const AsyncStep: React.FC<Props> = React.memo(({ number }) => {
2239
const [mutate] = useMockMutation(MOCK);
2340
const { handleStep, isLoading } = useWizard();
@@ -33,20 +50,10 @@ const AsyncStep: React.FC<Props> = React.memo(({ number }) => {
3350
// });
3451

3552
return (
36-
<div
37-
style={{
38-
border: '1px solid grey',
39-
minHeight: '20vh',
40-
display: 'flex',
41-
alignItems: 'center',
42-
justifyContent: 'center',
43-
flexDirection: 'column',
44-
}}
45-
>
46-
<code>Async</code>
47-
<p>Step {number}</p>
48-
{isLoading && <p>loading...</p>}
49-
</div>
53+
<Container>
54+
<P>(Async) Step {number}</P>
55+
{isLoading && <P>Loading...</P>}
56+
</Container>
5057
);
5158
});
5259

‎playground/components/footer.tsx‎

Lines changed: 41 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
11
import * as React from 'react';
2+
import styled from 'styled-components';
23

34
import { useWizard } from '../../dist';
5+
import { Button } from '../modules/common';
6+
7+
const Actions = styled.div`
8+
display: grid;
9+
justify-content: center;
10+
margin: 1rem 0;
11+
grid-template-columns: min-content min-content;
12+
gap: 1rem;
13+
`;
14+
15+
const Info = styled.div`
16+
display: flex;
17+
justify-content: center;
18+
gap: 1rem;
19+
`;
420

521
const Footer: React.FC = React.memo(() => {
622
const {
@@ -14,19 +30,31 @@ const Footer: React.FC = React.memo(() => {
1430

1531
return (
1632
<>
17-
<p>Step info</p>
18-
<div className="info">
19-
Has next step: {!isLastStep ? '✅' : '⛔'}
20-
<br />
21-
Has previous step : {!isFirstStep ? '✅' : '⛔'}
22-
</div>
23-
Active steps {activeStep + 1} <br />
24-
<button onClick={previousStep} disabled={isLoading || isFirstStep}>
25-
Previous
26-
</button>
27-
<button onClick={nextStep} disabled={isLoading || isLastStep}>
28-
Next
29-
</button>
33+
<code>
34+
<Info>
35+
<p>Has previous step: {!isFirstStep ? '✅' : '⛔'}</p>
36+
<br />
37+
<p>Has next step: {!isLastStep ? '✅' : '⛔'} </p>
38+
<br />
39+
<p>
40+
Active step: {activeStep + 1} <br />
41+
</p>
42+
</Info>
43+
<Actions>
44+
<Button
45+
label="Previous"
46+
onClick={previousStep}
47+
disabled={isLoading || isFirstStep}
48+
>
49+
Previous
50+
</Button>
51+
<Button
52+
label="Next"
53+
onClick={nextStep}
54+
disabled={isLoading || isLastStep}
55+
/>
56+
</Actions>
57+
</code>
3058
</>
3159
);
3260
});

‎playground/components/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
export { default as Step } from './step';
22
export { default as AsyncStep } from './asyncStep';
33
export { default as Footer } from './footer';
4+
export { default as AnimatedStep } from './animatedStep';
5+
export { default as Tooltip } from './tooltip';

‎playground/components/step.tsx‎

Lines changed: 28 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,43 @@
11
import * as React from 'react';
2+
import styled from 'styled-components';
23

34
import { useWizard } from '../../dist';
45

56
type Props = {
67
number: number;
8+
withCallback?: boolean;
79
};
810

9-
const Step: React.FC<Props> = React.memo(({ number }) => {
11+
const Container = styled('div')`
12+
background: var(--step);
13+
border: 1px solid #250b46;
14+
border-radius: 2px;
15+
padding: 2.75rem 0.35rem;
16+
display: flex;
17+
flex-direction: column;
18+
min-height: 15vh;
19+
justify-content: center;
20+
align-items: center;
21+
`;
22+
23+
const P = styled.p`
24+
color: white;
25+
`;
26+
27+
const Step: React.FC<Props> = React.memo(({ number, withCallback = true }) => {
1028
const { isLoading, handleStep } = useWizard();
1129

12-
handleStep(() => {
13-
alert('Going to next step');
14-
});
30+
if (withCallback) {
31+
handleStep(() => {
32+
alert('Going to next step');
33+
});
34+
}
1535

1636
return (
17-
<div
18-
style={{
19-
border: '1px solid grey',
20-
minHeight: '20vh',
21-
display: 'flex',
22-
alignItems: 'center',
23-
justifyContent: 'center',
24-
flexDirection: 'column',
25-
}}
26-
>
27-
<code>Sync</code>
28-
<p>Step {number}</p>
29-
{isLoading && <p>loading...</p>}
30-
</div>
37+
<Container>
38+
<P>(Sync) Step {number}</P>
39+
{isLoading && <P>Loading...</P>}
40+
</Container>
3141
);
3242
});
3343

‎playground/components/tooltip.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import * as React from 'react';
2+
import styled from 'styled-components';
3+
4+
type Props = {
5+
label: string;
6+
};
7+
8+
const Container = styled.div<Props>`
9+
position: relative;
10+
height: 100%;
11+
width: 100%;
12+
display: flex;
13+
flex-direction: column;
14+
15+
&::after {
16+
position: absolute;
17+
content: ${({ label }) => label};
18+
right: -9rem;
19+
border: 2px solid var(--code);
20+
padding: 0.65rem 1.25rem;
21+
top: 50%;
22+
font-weight: 300;
23+
font-size: 0.95rem;
24+
transform: translateY(-50%);
25+
z-index: 10;
26+
background: var(--dark);
27+
}
28+
`;
29+
30+
const Tooltip: React.FC<Props> = ({ children, label }) => {
31+
return <Container label={label}>{children}</Container>;
32+
};
33+
34+
export default Tooltip;

‎playground/global.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
declare module '*.png' {
2+
const value: any;
3+
export default value;
4+
}
5+
6+
declare module '*.svg' {
7+
const value: any;
8+
export default value;
9+
}

‎playground/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,12 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>Playground</title>
7+
<link rel="preconnect" href="https://fonts.gstatic.com" />
8+
<link rel="preconnect" href="https://fonts.gstatic.com" />
9+
<link
10+
href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;400;500;600;700;800;900&family=Rokkitt:wght@100;200;300;400;500;600;700;800;900&display=swap"
11+
rel="stylesheet"
12+
/>
813
</head>
914

1015
<body>

‎playground/index.tsx‎

Lines changed: 1 addition & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,8 @@
11
import 'react-app-polyfill/ie11';
2-
import './style.css';
32

43
import * as React from 'react';
54
import * as ReactDOM from 'react-dom';
65

7-
import { Wizard } from '../dist';
8-
import { AsyncStep, Footer, Step } from './components';
9-
import AnimatedStep from './components/animatedStep';
10-
11-
const App: React.FC = () => {
12-
return (
13-
<div
14-
style={{
15-
display: 'grid',
16-
gridTemplateRows: '1fr 1fr',
17-
}}
18-
>
19-
<section>
20-
<h2>Vanila</h2>
21-
<Wizard footer={<Footer />} header={<p>header</p>}>
22-
<AsyncStep number={1} />
23-
<Step number={2} />
24-
<AsyncStep number={3} />
25-
<Step number={4} />
26-
</Wizard>
27-
</section>
28-
<section>
29-
<h2>With animation</h2>
30-
<Wizard footer={<Footer />} header={<p>header</p>}>
31-
<AnimatedStep>
32-
<AsyncStep number={1} />
33-
</AnimatedStep>
34-
<AnimatedStep>
35-
<Step number={2} />
36-
</AnimatedStep>
37-
<AnimatedStep>
38-
<AsyncStep number={3} />
39-
</AnimatedStep>
40-
<AnimatedStep>
41-
<Step number={4} />
42-
</AnimatedStep>
43-
</Wizard>
44-
</section>
45-
</div>
46-
);
47-
};
6+
import App from './app';
487

498
ReactDOM.render(<App />, document.getElementById('root'));

0 commit comments

Comments
 (0)