Merge pull request #15 from locol23/feature/add-recompose-state-base

feat: add recompose-state-base

Author: locol23

README.md

@@ -16,6 +16,7 @@ Learn React with TypeScript
     - [Base](https://github.com/locol23/learn-react-ts/tree/master/packages/styled-components-base)
 - Recompose
   - State(withStateHandlers)
+    - [Base](https://github.com/locol23/learn-react-ts/tree/master/packages/recompose-state-base)
 - React Hooks
   - State(useState)
     - [Base](https://github.com/locol23/learn-react-ts/tree/master/packages/hooks-state-base)

packages/recompose-state-base/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["react", ["env", {"targets": {"chorme": 67} }]],
+  "plugins": ["transform-object-rest-spread", "transform-class-properties"]
+}

packages/recompose-state-base/.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "tslint.autoFixOnSave": true
+}

packages/recompose-state-base/README.md

@@ -0,0 +1,62 @@
+# hooks-state-base
+
+[Hooks API Reference](https://reactjs.org/docs/hooks-reference.html)
+
+## useState
+
+```tsx
+const App = () => {
+  const [text, setText] = useState('init')
+
+  return <div>{text}</div> // text = 'init'
+}
+```
+
+```tsx
+const App = (props: AppProps) => {
+  const [text, setText] = useState(() => `Hello ${props.text}`) // props.text = 'World'
+
+  return <div>{text}</div> // text = 'Hello World'
+}
+```
+
+## useEffect
+
+```tsx
+const App = () => {
+  const [text, setText] = useState('init')
+  useEffect(() => setText('update'), []) // like componentDidMount
+
+  return <div>{text}</div> // text = 'update'
+}
+```
+
+# useCallback
+
+Returns a memoized callback.
+
+```tsx
+const App = () => {
+  const [text, setText] = useState('init')
+  const handler = useCallback(() => setText(text), [text])
+
+  return (
+    <div>{text}</div> // text = 'init'
+    <button onClick={handler}>button</button>
+  )
+}
+```
+
+# useMemo
+
+Returns a memoized value.
+useMemo is like memoize of [reselect](https://github.com/reduxjs/reselect)
+
+```tsx
+const App = () => {
+  const [text, setText] = useState('init')
+  useMemo(() => text, [text])
+
+  return <div>{text}</div> // text = 'init'
+}
+```

packages/recompose-state-base/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "recompose-state-base",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://github.com/locol23/learn-react-ts.git",
+  "license": "MIT",
+  "scripts": {
+    "clean": "rimraf dist",
+    "parcel": "parcel src/index.html",
+    "lint": "tslint src/**/*.ts{,x}",
+    "lint-watch": "chokidar src/**/*.ts{,x} -c 'npm run lint'",
+    "dev": "run-s clean lint && run-p lint-watch parcel",
+    "build": "run-s clean lint && parcel build src/index.html"
+  },
+  "dependencies": {
+    "react": "16.7.0-alpha.0",
+    "react-dom": "16.7.0-alpha.0",
+    "recompose": "^0.30.0",
+    "styled-components": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^16.7.8",
+    "@types/react-dom": "^16.0.11",
+    "@types/recompose": "0.27.0",
+    "@types/styled-components": "^4.1.2",
+    "babel-core": "^6.26.3",
+    "babel-plugin-transform-class-properties": "6.24.1",
+    "babel-plugin-transform-object-rest-spread": "6.26.0",
+    "babel-preset-env": "1.7.0",
+    "babel-preset-react": "6.24.1",
+    "chokidar-cli": "1.2.1",
+    "json5": "^2.1.0",
+    "npm-run-all": "4.1.3",
+    "parcel-bundler": "^1.10.3",
+    "prettier": "1.15.2",
+    "rimraf": "2.6.2",
+    "tslint": "5.11.0",
+    "tslint-config-prettier": "1.16.0",
+    "tslint-plugin-prettier": "2.0.1",
+    "typescript": "3.1.6"
+  }
+}

packages/recompose-state-base/src/components/pages/App.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import {
+  compose,
+  setDisplayName,
+  StateHandler,
+  StateHandlerMap,
+  withStateHandlers,
+} from 'recompose'
+import { Layout } from '../utils/Layout'
+
+const Component = (props: AppProps) => {
+  const handler = () => props.setText('Change Text!!')
+
+  return (
+    <React.Fragment>
+      <Layout>
+        <h1>{props.text}</h1>
+      </Layout>
+      <Layout>
+        <button onClick={handler}>change</button>
+      </Layout>
+    </React.Fragment>
+  )
+}
+
+interface AppProps {
+  text: string
+  setText: (str: string) => StateHandler<AppEnhancerStateProps>
+}
+
+interface AppEnhancerStateProps {
+  text: string
+}
+
+type AppEnhancerStateHandlerProps = {
+  setText: (str: string) => StateHandler<AppEnhancerStateProps>
+} & StateHandlerMap<AppEnhancerStateProps>
+
+type EnhancedAppProps = AppEnhancerStateProps &
+  AppEnhancerStateHandlerProps &
+  AppProps
+
+const Enhancer = compose<EnhancedAppProps, AppProps>(
+  setDisplayName('App'),
+  withStateHandlers<
+    AppEnhancerStateProps,
+    AppEnhancerStateHandlerProps,
+    AppProps
+  >(
+    {
+      text: 'Function Components',
+    },
+    {
+      setText: () => str => ({ text: str }),
+    }
+  )
+)
+
+export const App = Enhancer(Component)

packages/recompose-state-base/src/components/utils/Layout.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  margin: 10px;
+`
+
+interface LayoutProps {
+  children: React.ReactNode
+}
+
+export const Layout = (props: LayoutProps) => (
+  <Container>{props.children}</Container>
+)

packages/recompose-state-base/src/index.html

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Learn React</title>
+</head>
+<body>
+  <div id="app">Loading...</div>
+  <script src="index.tsx"></script>
+</body>
+</html>

packages/recompose-state-base/src/index.tsx

@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './components/pages/App'
+
+ReactDOM.render(<App />, document.getElementById('app'))

packages/recompose-state-base/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "ES2015",
+    "allowJs": true,
+    "jsx": "react",
+    "sourceMap": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "strictFunctionTypes": true,
+    "noImplicitThis": true,
+    "alwaysStrict": true,
+    "moduleResolution": "node",
+    "allowSyntheticDefaultImports": true,
+    "strictPropertyInitialization": true,
+    "rootDir": "src",
+    "outDir": "./dist/",
+  },
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

packages/recompose-state-base/tslint.json

@@ -0,0 +1,21 @@
+{
+  "rulesDirectory": ["tslint-plugin-prettier"],
+  "defaultSeverity": "error",
+  "extends": ["tslint:latest", "tslint-config-prettier"],
+  "rules": {
+    "interface-name": false,
+    "no-empty-interface": false,
+    "object-literal-sort-keys" : false,
+    "no-submodule-imports": false,
+    "allowSyntheticDefaultImports": true,
+    "prettier": [
+      true, {
+        "semi": false,
+        "singleQuote": true,
+        "tabWidth": 2,
+        "bracketSpacing": true,
+        "trailingComma": "es5"
+      }
+    ]
+  }
+}