Docs/playground

.github/workflows/deploy.yml

@@ -0,0 +1,39 @@
+name: Deploy to Github Pages
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  deploy:
+    runs-on: ubuntu-18.04
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Setup Node
+        uses: actions/setup-node@v1
+        with:
+          node-version: '14.x'
+
+      - name: Get yarn cache
+        id: yarn-cache
+        run: echo "::set-output name=dir::$(yarn cache dir)"
+
+      - name: Cache dependencies
+        uses: actions/cache@v1
+        with:
+          path: ${{ steps.yarn-cache.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn build
+      - run: yarn build:playground
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./playground/dist

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules\\typescript\\lib"
+}

package.json

@@ -13,6 +13,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
+    "build:playground": "yarn --cwd ./playground install && yarn --cwd ./playground build",
     "test": "tsdx test --passWithNoTests",
     "test:watch": "tsdx test --watch",
     "test:coverage": "tsdx test --coverage",

playground/app.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { WizardModule } from './modules';
+import { Page, Style } from './modules/common';
+
+const App = () => {
+  return (
+    <>
+      <Style />
+      <Page
+        title="react-use-wizard"
+        description="Playground to showcase the functionalities of react-use-wizard"
+      >
+        <WizardModule />
+      </Page>
+    </>
+  );
+};
+
+export default App;

example/components/asyncStep.tsx → playground/components/asyncStep.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
+import styled from 'styled-components';
 
-import { useWizard } from '../..';
+import { useWizard } from '../../dist';
 import { useMockMutation } from '../hooks';
 
 type Props = {
@@ -18,6 +19,22 @@ const MOCK = [
   },
 ];
 
+const Container = styled('div')`
+  background: var(--step);
+  border: 1px solid #250b46;
+  border-radius: 2px;
+  padding: 2.75rem 0.35rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 15vh;
+  justify-content: center;
+  align-items: center;
+`;
+
+const P = styled.p`
+  color: white;
+`;
+
 const AsyncStep: React.FC<Props> = React.memo(({ number }) => {
   const [mutate] = useMockMutation(MOCK);
   const { handleStep, isLoading } = useWizard();
@@ -33,20 +50,10 @@ const AsyncStep: React.FC<Props> = React.memo(({ number }) => {
   // });
 
   return (
-    <div
-      style={{
-        border: '1px solid grey',
-        minHeight: '20vh',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        flexDirection: 'column',
-      }}
-    >
-      <code>Async</code>
-      <p>Step {number}</p>
-      {isLoading && <p>loading...</p>}
-    </div>
+    <Container>
+      <P>(Async) Step {number}</P>
+      {isLoading && <P>Loading...</P>}
+    </Container>
   );
 });
 

playground/components/footer.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { useWizard } from '../../dist';
+import { Button } from '../modules/common';
+
+const Actions = styled.div`
+  display: grid;
+  justify-content: center;
+  margin: 1rem 0;
+  grid-template-columns: min-content min-content;
+  gap: 1rem;
+`;
+
+const Info = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+`;
+
+const Footer: React.FC = React.memo(() => {
+  const {
+    nextStep,
+    previousStep,
+    isLoading,
+    activeStep,
+    isLastStep,
+    isFirstStep,
+  } = useWizard();
+
+  return (
+    <>
+      <code>
+        <Info>
+          <p>Has previous step: {!isFirstStep ? '✅' : '⛔'}</p>
+          <br />
+          <p>Has next step: {!isLastStep ? '✅' : '⛔'} </p>
+          <br />
+          <p>
+            Active step: {activeStep + 1} <br />
+          </p>
+        </Info>
+        <Actions>
+          <Button
+            label="Previous"
+            onClick={previousStep}
+            disabled={isLoading || isFirstStep}
+          >
+            Previous
+          </Button>
+          <Button
+            label="Next"
+            onClick={nextStep}
+            disabled={isLoading || isLastStep}
+          />
+        </Actions>
+      </code>
+    </>
+  );
+});
+
+export default Footer;

example/components/index.ts → playground/components/index.ts

@@ -1,3 +1,5 @@
 export { default as Step } from './step';
 export { default as AsyncStep } from './asyncStep';
 export { default as Footer } from './footer';
+export { default as AnimatedStep } from './animatedStep';
+export { default as Tooltip } from './tooltip';

playground/components/step.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+import { useWizard } from '../../dist';
+
+type Props = {
+  number: number;
+  withCallback?: boolean;
+};
+
+const Container = styled('div')`
+  background: var(--step);
+  border: 1px solid #250b46;
+  border-radius: 2px;
+  padding: 2.75rem 0.35rem;
+  display: flex;
+  flex-direction: column;
+  min-height: 15vh;
+  justify-content: center;
+  align-items: center;
+`;
+
+const P = styled.p`
+  color: white;
+`;
+
+const Step: React.FC<Props> = React.memo(({ number, withCallback = true }) => {
+  const { isLoading, handleStep } = useWizard();
+
+  if (withCallback) {
+    handleStep(() => {
+      alert('Going to next step');
+    });
+  }
+
+  return (
+    <Container>
+      <P>(Sync) Step {number}</P>
+      {isLoading && <P>Loading...</P>}
+    </Container>
+  );
+});
+
+export default Step;