Merge pull request #6 from mbrookson/bugfix/transitions-example

Fix build for example site

Author: mbrookson

example/package-lock.json

@@ -9,24 +9,24 @@
     "build:css": "postcss tailwind.css -o styles.css"
   },
   "dependencies": {
+    "@fullhuman/postcss-purgecss": "^2.1.2",
     "components": "^0.1.0",
+    "autoprefixer": "^9.7.6",
+    "cssnano": "^4.1.10",
+    "parcel-bundler": "^1.12.4",
+    "postcss-cli": "^7.1.0",
+    "tailwindcss": "^1.3.5",
+    "typescript": "^3.4.5",
     "react-app-polyfill": "^1.0.0",
-    "react-icons": "^3.10.0"
+    "react-icons-kit": "^1.3.1"
   },
   "alias": {
     "react": "../node_modules/react",
     "react-dom": "../node_modules/react-dom/profiling",
     "scheduler/tracing": "../node_modules/scheduler/tracing-profiling"
   },
   "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^2.1.2",
     "@types/react": "^16.9.11",
-    "@types/react-dom": "^16.8.4",
-    "autoprefixer": "^9.7.6",
-    "cssnano": "^4.1.10",
-    "parcel": "^1.12.3",
-    "postcss-cli": "^7.1.0",
-    "tailwindcss": "^1.3.5",
-    "typescript": "^3.4.5"
+    "@types/react-dom": "^16.8.4"
   }
 }

example/package.json

@@ -2,10 +2,12 @@ const tailwindcss = require('tailwindcss');
 const autoprefixer = require('autoprefixer');
 const cssnano = require('cssnano');
 const purgecss = require('@fullhuman/postcss-purgecss')({
-  content: ['./*.html', './*.tsx', './components/*.tsx'],
+  content: ['./*.html', './*.tsx', './src/*.tsx'],
   defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
 });
 
+console.log(`NODE_ENV: ${process.env.NODE_ENV}`);
+
 module.exports = {
   plugins: [
     tailwindcss(),

example/postcss.config.js

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { FaGithub } from 'react-icons/fa';
+import { Icon } from 'react-icons-kit';
+import { github } from 'react-icons-kit/fa/github';
 // @ts-ignore
 import images from '../*.png';
 
@@ -11,7 +12,7 @@ export const Header = () => {
           <div className="lg:pr-16">
             <h1 className="mb-4 text-5xl font-bold">React Simple Hook Modal</h1>
             <div className="flex flex-row items-center justify-center lg:justify-end pb-8">
-              <FaGithub className="inline" />
+              <Icon icon={github} className="inline" />
               <a
                 className="ml-2 hover:text-blue-300 transition transition-colors duration-200"
                 href="https://github.com/mbrookson/react-simple-hook-modal"

example/src/Header.tsx

@@ -3,7 +3,7 @@
   "license": "MIT",
   "name": "react-simple-hook-modal",
   "description": "A simple React modal with hook based API",
-  "homepage": "https://github.com/mbrookson/react-simple-hook-modal",
+  "homepage": "https://react-simple-hook-modal.now.sh",
   "repository": {
     "type": "git",
     "url": "https://github.com/mbrookson/react-simple-hook-modal.git"
@@ -21,6 +21,7 @@
   "scripts": {
     "start": "tsdx watch",
     "build": "tsdx build",
+    "build:all": "tsdx build && cd example && npm install && npm run build",
     "test": "tsdx test --passWithNoTests",
     "lint": "tsdx lint",
     "install-peers": "install-peers -f"