Continue w/ generics article

.prettierrc

@@ -1,4 +1,12 @@
 {
   "semi": false,
-  "singleQuote": true
+  "singleQuote": true,
+  "overrides": [
+    {
+      "files": "snippets/snippets/**/*.ts",
+      "options": {
+        "printWidth": 45
+      }
+    }
+  ]
 }

package.json

@@ -18,13 +18,17 @@
     "build": "next build && next export",
     "start": "next start",
     "tsc": "tsc",
+    "ts-node": "ts-node",
     "eslint": "eslint --ext .js,.ts,.tsx .",
     "eslint:fix": "eslint --ext .js,.ts,.tsx --fix .",
-    "svgr": "svgr --ext tsx --no-svgo --no-dimensions -d ."
+    "svgr": "svgr --ext tsx --no-svgo --no-dimensions -d .",
+    "snippets": "runSnippet snippets/bin/generateSnippetsBundle.ts",
+    "runSnippet": "ts-node --project tsconfig.snippets.json"
   },
   "devDependencies": {
     "@svgr/cli": "^4.3.3",
     "@types/color": "^3.0.0",
+    "@types/glob": "^7.1.1",
     "@types/luxon": "^1.15.2",
     "@types/node": "^12.12.7",
     "@types/prettier": "^1.18.3",
@@ -34,13 +38,16 @@
     "@typescript-eslint/parser": "^2.7.0",
     "babel-eslint": "^10.0.3",
     "babel-plugin-emotion": "^10.0.23",
+    "chokidar": "^3.3.0",
     "eslint": "^6.5.1",
     "eslint-config-prettier": "^6.4.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-prettier": "^3.1.1",
     "eslint-plugin-react": "^7.16.0",
     "eslint-plugin-react-hooks": "2.2.0",
+    "glob": "^7.1.6",
     "prettier": "^1.19.1",
+    "ts-node": "^8.5.2",
     "typescript": "^3.7.2"
   }
 }

snippets/.eslintrc.js

@@ -0,0 +1,9 @@
+const config = require('../.eslintrc')
+
+module.exports = {
+  ...config,
+  parserOptions: {
+    project: './snippets/tsconfig.json'
+  },
+  root: true
+}

snippets/bin/generateSnippetsBundle.ts

@@ -0,0 +1,28 @@
+const glob = require('glob')
+const fs = require('fs')
+const chokidar = require('chokidar')
+
+const regenerate = () => {
+  glob('./snippets/snippets/**/*.ts', (_: any, files: readonly string[]) => {
+    const result = files
+      .map(file => {
+        const contents = fs.readFileSync(file, 'utf8')
+        return `export const ${file
+          .replace(/\.\/snippets\/snippets\/\w+\//, '')
+          .replace(/\.ts/, '')} = \`${contents.trim()}\``
+      })
+      .join('\n\n')
+
+    fs.writeFile('./src/lib/snippets.ts', `${result}\n`, (err: any) => {
+      if (err) {
+        throw err
+      }
+      console.log('snippets generated')
+    })
+  })
+}
+
+regenerate()
+chokidar.watch('./snippets/snippets/**/*.ts').on('change', () => {
+  regenerate()
+})

snippets/snippets/generics/cbeq.ts

@@ -0,0 +1,7 @@
+const { getState, setState } = createState()
+
+setState(1)
+console.log(getState())
+
+setState(2)
+console.log(getState())

snippets/snippets/generics/cupt.ts

@@ -0,0 +1,16 @@
+function createState() {
+  let state: number
+
+  function getState() {
+    return state
+  }
+
+  function setState(x: number) {
+    state = x
+  }
+
+  return {
+    getState,
+    setState
+  }
+}

snippets/snippets/generics/kiyi.ts

@@ -0,0 +1,5 @@
+// Confused by generics code like this?
+function getProperty<T, K extends keyof T>(
+  obj: T,
+  key: K
+)

snippets/snippets/generics/udpv.ts

@@ -0,0 +1,24 @@
+function createState() {
+  let state: number
+
+  function getState() {
+    return state
+  }
+
+  function setState(x: number) {
+    state = x
+  }
+
+  return {
+    getState,
+    setState
+  }
+}
+
+const { getState, setState } = createState()
+
+setState(1)
+console.log(getState())
+
+setState(2)
+console.log(getState())

snippets/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../tsconfig.snippets.json"
+}

src/components/ButtonWithTouchActiveStates.tsx

@@ -0,0 +1,43 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core'
+import { useState } from 'react'
+
+type ButtonWithTouchActiveStatesProps<
+  T = JSX.IntrinsicElements['button']
+> = T & {
+  activeBackgroundColor: string
+}
+
+const ButtonWithTouchActiveStates = ({
+  activeBackgroundColor,
+  ...props
+}: ButtonWithTouchActiveStatesProps) => {
+  const [isActive, setIsActive] = useState(false)
+  const activate = () => {
+    if (!props.disabled) {
+      // NOTE: Originally tried to call the callback here and do e.preventDefault()
+      // to prevent mouse click event from happening, so that callback fires
+      // on tap start instead of on tap end, but that was buggy so ended up removing.
+      setIsActive(true)
+    }
+  }
+  const deactivate = () => {
+    setIsActive(false)
+  }
+  return (
+    <button
+      {...props}
+      css={
+        isActive &&
+        css`
+          background: ${activeBackgroundColor} !important;
+        `
+      }
+      onTouchStart={activate}
+      onTouchEnd={deactivate}
+      onTouchCancel={deactivate}
+    />
+  )
+}
+
+export default ButtonWithTouchActiveStates

src/components/Card.tsx

@@ -7,7 +7,7 @@ import { H3 } from 'src/components/ContentTags'
 
 export interface CardProps {
   children: React.ReactNode
-  color?: 'default'
+  color?: 'default' | 'pink'
   slideNumber?: number
   slideCount?: number
   isLast?: boolean
@@ -26,14 +26,16 @@ export const backgroundColor = (
   color: NonNullable<CardProps['color']>
 ): keyof typeof allColors =>
   ({
-    default: 'lightYellow1' as const
+    default: 'lightYellow1' as const,
+    pink: 'lightPink2' as const
   }[color])
 
 const slideLabelBgColor = (
   color: NonNullable<CardProps['color']>
 ): keyof typeof allColors =>
   ({
-    default: 'brown' as const
+    default: 'brown' as const,
+    pink: 'brown' as const
   }[color])
 
 const Card = ({
@@ -140,21 +142,16 @@ const Card = ({
           {footer && (
             <div
               css={css`
-                padding-top: ${spaces(0.75)};
-                padding-left: ${spaces(1)};
-                padding-right: ${spaces(1)};
-                padding-bottom: ${spaces(0.5)};
+                margin-top: ${spaces('-0.5')};
+                padding: ${spaces(0.75)};
 
                 ${ns} {
-                  margin-top: ${spaces('-0.25')};
                   padding-top: ${spaces(1.25)};
-                  padding-left: ${spaces(2)};
-                  padding-right: ${spaces(2)};
+                  padding-left: ${spaces(1.5)};
+                  padding-right: ${spaces(1.5)};
                   padding-bottom: ${spaces(1)};
                 }
-                background: ${colors(
-                  backgroundColor(footer.color || 'default')
-                )};
+                background: ${colors(backgroundColor(footer.color || 'pink'))};
                 border-bottom-right-radius: ${radii(0.5)};
                 border-bottom-left-radius: ${radii(0.5)};
               `}