Merge pull request #14 from devrnt/chore/prepare-release

Chore/prepare release

Author: devrnt

package.json

@@ -1,15 +1,46 @@
 {
+  "name": "react-use-wizard",
+  "author": "devrnt <[email protected]>",
+  "description": "React wizard (stepper) builder without the hassle, powered by hooks.",
+  "homepage": "https://github.com/devrnt/react-use-wizard#readme",
+  "module": "dist/react-use-wizard.esm.js",
   "version": "0.0.0",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/devrnt/react-use-wizard"
+  },
+  "bugs": {
+    "url": "https://github.com/devrnt/react-use-wizard/issues"
+  },
   "files": [
     "dist",
     "src"
   ],
   "engines": {
     "node": ">=10"
   },
+  ".": {
+    "browser": "./dist/react-use-wizard.esm.js",
+    "import": "./dist/react-use-wizard.esm.js",
+    "require": "./dist/react-use-wizard.js"
+  },
+  "keywords": [
+    "react",
+    "reactjs",
+    "wizard",
+    "stepper",
+    "react-stepper",
+    "react-wizard",
+    "react-use",
+    "typescript",
+    "react-hooks",
+    "react-use-wizard",
+    "react-use-stepper",
+    "devrnt"
+  ],
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
@@ -32,9 +63,6 @@
       "pre-commit": "tsdx lint"
     }
   },
-  "name": "react-use-wizard",
-  "author": "devrnt",
-  "module": "dist/react-use-wizard.esm.js",
   "size-limit": [
     {
       "path": "dist/react-use-wizard.cjs.production.min.js",

playground/app.tsx

@@ -1,8 +1,11 @@
+import { setup } from 'goober';
 import * as React from 'react';
 
 import { WizardModule } from './modules';
 import { Page, Style } from './modules/common';
 
+setup(React.createElement);
+
 const App = () => {
   return (
     <>

playground/components/asyncStep.tsx

@@ -1,5 +1,5 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { useWizard } from '../../dist';
 import { useMockMutation } from '../hooks';
@@ -31,7 +31,7 @@ const Container = styled('div')`
   align-items: center;
 `;
 
-const P = styled.p`
+const P = styled('p')`
   color: white;
 `;
 

playground/components/footer.tsx

@@ -1,18 +1,18 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { useWizard } from '../../dist';
 import { Button } from '../modules/common';
 
-const Actions = styled.div`
+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`
+const Info = styled('div')`
   display: flex;
   justify-content: center;
   gap: 1rem;

playground/components/step.tsx

@@ -1,5 +1,5 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import { useWizard } from '../../dist';
 
@@ -20,7 +20,7 @@ const Container = styled('div')`
   align-items: center;
 `;
 
-const P = styled.p`
+const P = styled('p')`
   color: white;
 `;
 

playground/components/tooltip.tsx

@@ -1,11 +1,11 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 type Props = {
   label: string;
 };
 
-const Container = styled.div<Props>`
+const Container = styled('div')<Props>`
   position: relative;
   height: 100%;
   width: 100%;

playground/index.tsx

@@ -1,4 +1,5 @@
 import 'react-app-polyfill/ie11';
+import './normalize.css';
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';

playground/modules/common/button.tsx

@@ -1,12 +1,12 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 type Props = {
   label: string;
   disabled: boolean;
 } & React.HTMLAttributes<HTMLButtonElement>;
 
-const Container = styled.button`
+const Container = styled('button')`
   width: fit-content;
   min-width: 8rem;
   border: 1px solid var(--purple);

playground/modules/common/page.tsx

@@ -1,5 +1,5 @@
+import { styled } from 'goober';
 import * as React from 'react';
-import styled from 'styled-components';
 
 import githubLogoPath from '../../assets/images/githubLogo.svg';
 import logoPath from '../../assets/images/logo.svg';
@@ -10,34 +10,34 @@ type Props = {
   children: React.ReactNode;
 };
 
-const Container = styled.main`
+const Container = styled('main')`
   display: flex;
   justify-content: center;
   background: var(--dark);
 `;
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
   width: 100%;
 `;
 
-const Body = styled.div`
+const Body = styled('div')`
   margin-top: 2rem;
 `;
 
-const Description = styled.div`
+const Description = styled('div')`
   font-size: 1.1rem;
   font-weight: 200;
 `;
 
-const Divider = styled.div`
+const Divider = styled('div')`
   height: 2px;
   width: 7%;
   background-image: linear-gradient(48.66deg, var(--purple), var(--blue));
   margin: 2.5rem 0;
   display: flex;
 `;
 
-const TopBar = styled.header`
+const TopBar = styled('header')`
   position: sticky;
   top: 0;
   left: 0;
@@ -52,12 +52,12 @@ const TopBar = styled.header`
   z-index: 1000;
 `;
 
-const Logo = styled.img`
+const Logo = styled('img')`
   height: 3rem;
   width: 3rem;
 `;
 
-const GithubLogo = styled.img`
+const GithubLogo = styled('img')`
   width: 2rem;
 `;
 

playground/modules/common/style.tsx

@@ -1,8 +1,8 @@
+// @ts-ignore
+import { createGlobalStyles } from 'goober/global';
 import * as React from 'react';
-import { createGlobalStyle } from 'styled-components';
-import { Normalize } from 'styled-normalize';
 
-const GlobalStyle = createGlobalStyle`
+const GlobalStyle = createGlobalStyles`
   :root {
     --light: #0b002b;
     --nav: rgba(3, 0, 12, 0.5);
@@ -50,7 +50,6 @@ const GlobalStyle = createGlobalStyle`
 
 const Style = () => (
   <>
-    <Normalize />
     <GlobalStyle />
   </>
 );