init: repo

Author: fouad

.dockerignore

@@ -0,0 +1,5 @@
+*
+!src
+!pages
+!yarn.lock
+!package.json

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[{package.json,*.yml}]
+indent_style = space
+indent_size = 2

.eslintrc.json

@@ -0,0 +1,10 @@
+{
+    "parser": "babel-eslint",
+    "extends": "airbnb",
+    "rules": {
+        "react/react-in-jsx-scope": 0,
+        "react/prop-types": 0,
+        "react/jsx-filename-extension": 0,
+        "jsx-a11y/anchor-is-valid": 0
+    }
+}

.gitignore

@@ -0,0 +1,7 @@
+.next
+node_modules
+.DS_Store
+.vscode
+out
+yarn-error.log
+bundles

.yarnrc

@@ -0,0 +1 @@
+save-prefix ""

Dockerfile

@@ -0,0 +1,12 @@
+FROM mhart/alpine-node:10
+# We store all our files in /usr/src to perform the build
+WORKDIR /usr/src
+# We first add only the files required for installing deps
+# If package.json or yarn.lock don't change, no need to re-install later
+COPY package.json yarn.lock ./
+# We install our deps
+RUN yarn
+# We copy all source files
+COPY . .
+# We run the build and expose as /public
+RUN yarn build && yarn export -o /public

README.md

@@ -0,0 +1,11 @@
+# Rehooks website
+
+The official website for [Rehooks](https://rehooks.com)
+
+## Contribution
+
+If you need to make any changes to the website:
+
+1. Clone this repo
+2. Run `yarn` to install dependencies
+3. Run `yarn dev` to start the server on `http://localhost:3000`

components/background-slider.js

@@ -0,0 +1,31 @@
+export default ({ duration, children }) => (
+  <div className="slider-container">
+    <style jsx>{`
+      .slider-container {
+        overflow: hidden;
+        white-space: nowrap;
+      }
+      .slider-content-wrapper {
+        display: inline-block;
+        white-space: nowrap;
+        overflow: hidden;
+        animation: slide ${duration * 2 || 10}s linear infinite;
+      }
+      .slider-content-wrapper > div {
+        display: inline-block;
+      }
+      @keyframes slide {
+        from {
+          transform: translate3d(0, 0, 0);
+        }
+        to {
+          transform: translate3d(-50%, 0, 0);
+        }
+      }
+    `}</style>
+    <div className="slider-content-wrapper">
+      <div>{children}</div>
+      <div>{children}</div>
+    </div>
+  </div>
+);

components/button.js

@@ -0,0 +1,63 @@
+import Link from 'next/link'
+import classNames from 'classnames'
+
+import withPure from './hoc/pure'
+
+export default withPure(
+  ({ children, invert, href, as, className, prefetch, ...props }) => {
+    const a = (
+      <a
+        className={classNames(className, 'fw4 no-drag', { invert })}
+        role="button"
+        {...props}
+      >
+        {children}
+        <style jsx>
+          {`
+            a {
+              display: inline-block;
+              cursor: pointer;
+              text-decoration: none;
+              padding: 0.25rem 0.5rem;
+              margin: -0.25rem -0.5rem;
+              border-radius: 7px;
+              color: #0076ff;
+              transition: background 0.2s ease, color 0.2s ease,
+                box-shadow 0.2s ease;
+            }
+            a:hover {
+              color: #0076ff;
+              background: rgba(0, 118, 255, 0.1);
+            }
+            a.invert {
+              margin: 0;
+              padding: 0 2rem;
+              height: 2.5rem;
+              line-height: 2.5rem;
+              border-radius: 7px;
+              background: #000;
+              box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.39);
+              color: white;
+            }
+            a.invert:hover {
+              background: #272727;
+              box-shadow: 0 6px 20px 0 rgba(50, 50, 50, 0.23);
+            }
+            a.invert:active {
+              background: #484848;
+            }
+          `}
+        </style>
+      </a>
+    )
+
+    if (href) {
+      return (
+        <Link href={href} as={as} prefetch={prefetch}>
+          {a}
+        </Link>
+      )
+    }
+    return a
+  }
+)

components/container.js

@@ -0,0 +1,61 @@
+export default ({
+  center,
+  vCenter,
+  dark,
+  gray,
+  wide,
+  small,
+  padding,
+  overflow,
+  minHeight,
+  dotBackground,
+  children,
+  mobileStyle,
+  ...props
+}) => (
+  <div {...props}>
+    <style jsx>
+      {`
+      {
+        width: 100%;
+        margin: 0 auto;
+        padding: ${padding ? '4rem' : '0'} ${wide ? '0' : '1rem'};
+        ${wide && !small ? '' : 'max-width: 1024px;'}
+        ${small ? 'max-width: 682px;' : ''}
+        ${center ? 'text-align: center;' : ''}
+        ${
+          dark
+            ? 'background-image: linear-gradient(to bottom, #121212 0%, #323232 100%);'
+            : ''
+        }
+        ${dark ? 'color: #f1f1f1;' : ''}
+        ${gray ? 'background-color: #f6f6f6;' : ''}
+        ${wide && !overflow ? 'overflow: hidden;' : ''}
+        ${minHeight ? `min-height: ${minHeight}px;` : ''}
+        ${vCenter ? 'display: flex; align-items: center;' : ''}
+      }
+      :after {
+        // BFC
+        content: '';
+        display: table;
+        clear: both;
+      }
+      
+      // CSS only media query for tablet
+      @media screen and (max-width: 960px) {
+        div {
+          padding: ${padding ? '4rem' : '0'} ${wide ? '0' : '2rem'};
+        }
+      }
+      // CSS only media query for mobile
+      @media screen and (max-width: 640px) {
+        div {
+          padding: ${padding ? '4rem' : '0'} ${wide ? '0' : '1rem'};
+          ${mobileStyle || ''}
+        }
+      }
+    `}
+    </style>
+    {children}
+  </div>
+)

components/css-config.js

@@ -0,0 +1,10 @@
+export const FONT_FAMILY_SANS =
+  '-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif'
+
+export const FONT_FAMILY_MONO =
+  'Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif'
+
+export const COLOR_ERROR = '#FF001F'
+export const COLOR_SUCCESS = '#067DF7'
+
+export const COLOR_CODE_LIGHT = '#000000'

components/docs/docs.mdx

@@ -0,0 +1,102 @@
+## Getting Started
+
+### Setup
+
+First, you need to install **React v16.7 or higher**:
+
+```bash
+npm install --save react@^16.7.0-alpha.0 react-dom@^16.7.0-alpha.0
+```
+
+Or with yarn:
+
+```bash
+yarn add react@^16.7.0-alpha.0 react-dom@^16.7.0-alpha.0
+```
+
+Now you can start writing `useState` and `useEffect` in your code. Here's a simple counter example:
+
+```jsx
+import { useState } from 'react'
+
+function Example() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  )
+}
+```
+
+Alternatively, this is class-based equivalent:
+
+```jsx
+class Example extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      count: 0
+    }
+  }
+
+  onClick = () => {
+    this.setState({
+      count: this.state.count + 1
+    })
+  }
+
+  render() {
+    return (
+      <div>
+        <p>You clicked {this.state.count} times</p>
+        <button onClick={this.onClick}>
+          Click me
+        </button>
+      </div>
+    )
+  }
+}
+```
+
+### Controlled Inputs
+
+First install `@rehooks/input-value`:
+
+```
+yarn add @rehooks/input-value
+```
+
+Then apply `useInputValue` in your component:
+
+```jsx
+import useInputValue from '@rehooks/input-value';
+
+function MyComponent() {
+  let name = useInputValue('Jamie');
+  // name = { value: 'Jamie', onChange: [Function] }
+  return <input {...name}/>;
+}
+```
+
+## FAQ
+
+### What are React Hooks?
+
+React Hooks allow you to use React concepts like state, context and methods without writing a class.
+
+### What are Rehooks?
+
+Rehooks are packages that make it easy to use Hooks in your existing application. Kinda like lodash for React Hooks.
+
+## Contributing
+
+Please check out the [rehooks/ideas repo](https://github.com/rehooks/ideas) or if you already know a Hook you want to build, check out the [rehooks/template repo](https://github.com/rehooks/template)
+
+## Edit this page
+
+You can find the repo for this website at [rehooks/website](http://github.com/rehooks/website)