Styleguideist

package.json

@@ -14,9 +14,9 @@
     "md5-file": "^4.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
-    "react-helmet": "^5.2.0",
+    "react-helmet": "^5.2.1",
     "react-redux": "^5.1.1",
-    "react-scripts": "2.0.3",
+    "react-scripts": "^3.4.1",
     "react-window": "^1.8.1",
     "redux": "^4.0.1",
     "redux-observable": "^1.0.0",
@@ -31,7 +31,10 @@
     "eject": "react-scripts eject",
     "find-skins": "node ./scripts/findSkins.js",
     "index": "node ./scripts/createSearchIndex.js",
-    "extract": "node ./scripts/extractSkinText.js \"/Volumes/Mobile Backup/skins/md5Skins/\""
+    "extract": "node ./scripts/extractSkinText.js \"/Volumes/Mobile Backup/skins/md5Skins/\"",
+    "deploy": "netlify deploy",
+    "styleguide": "styleguidist server",
+    "styleguide:build": "styleguidist build"
   },
   "prettier": {},
   "browserslist": [
@@ -44,6 +47,8 @@
     "extends": "react-app"
   },
   "devDependencies": {
-    "bluebird": "^3.5.3"
+    "bluebird": "^3.5.3",
+    "netlify-cli": "^2.40.0",
+    "react-styleguidist": "^11.0.5"
   }
 }

src/components/BaseOverlay.md

@@ -0,0 +1,27 @@
+BaseOverlay example:
+
+```js
+const [open, setOpen] = React.useState(false);
+const [shouldAnimate, setShouldAnimate] = React.useState(false);
+return (
+  <>
+    <button onClick={() => setOpen(o => !o)}>Toggle Overlay</button>
+    {open && <BaseOverlay closeModal={() => setOpen(false)} />}
+  </>
+);
+```
+
+BaseOverlay example (animated):
+
+```js
+const [open, setOpen] = React.useState(false);
+const [shouldAnimate, setShouldAnimate] = React.useState(false);
+return (
+  <>
+    <button onClick={() => setOpen(o => !o)}>Toggle Overlay</button>
+    {open && (
+      <BaseOverlay closeModal={() => setOpen(false)} shouldAnimate={true} />
+    )}
+  </>
+);
+```

styleguide.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  components: "src/components/**/*.js"
+};

todo.md

@@ -2,8 +2,6 @@
 
 ## Rewrite
 
-Add color to index
-Add tweet likes to index
 Crawl/index IA view count
 
 Handle case where search results area loading
@@ -11,6 +9,12 @@ Handle slow search
 
 Define a Skin interface which has all skin data or dummy skin data with a loading function
 
+Add an x button to clear search
+
+"Random" skin button should act on full set not just the loaded skins
+
+Find a way to fetch skin data based on hash
+
 ## Blocking
 
 - Figure out how to get prerendering to work for Facebook