Initial code copied from brianlovin.com

.babelrc

@@ -0,0 +1,14 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    "transform-flow-strip-types",
+    [
+      "styled-components", 
+      {
+        "ssr": true, 
+        "displayName": true, 
+        "preprocess": false 
+      }
+    ]
+  ]
+}

.eslintrc.json

@@ -0,0 +1,126 @@
+{
+  "extends": [
+    "airbnb",
+    "prettier",
+    "plugin:react/recommended"
+  ],
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "impliedStrict": true,
+      "classes": true
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "jquery": true,
+    "jest": true
+  },
+  "rules": {
+    "no-debugger": 0,
+    "no-alert": 0,
+    "no-unused-vars": [
+      1,
+      {
+        "ignoreSiblings": true,
+        "argsIgnorePattern": "res|next|^err"
+      }
+    ],
+    "prefer-const": [
+      "error",
+      {
+        "destructuring": "all"
+      }
+    ],
+    "arrow-body-style": [
+      2,
+      "as-needed"
+    ],
+    "no-unused-expressions": [
+      2,
+      {
+        "allowTaggedTemplates": true
+      }
+    ],
+    "no-param-reassign": [
+      2,
+      {
+        "props": false
+      }
+    ],
+    "no-console": 0,
+    "import/prefer-default-export": 0,
+    "import": 0,
+    "func-names": 0,
+    "space-before-function-paren": 0,
+    "comma-dangle": 0,
+    "max-len": 0,
+    "import/extensions": 0,
+    "no-underscore-dangle": 0,
+    "consistent-return": 0,
+    "react/display-name": 1,
+    "react/no-array-index-key": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/prefer-stateless-function": 0,
+    "react/forbid-prop-types": 0,
+    "react/no-unescaped-entities": 0,
+    "jsx-a11y/accessible-emoji": 0,
+    "react/jsx-one-expression-per-line": 0,
+    "react/require-default-props": 0,
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [
+          ".js",
+          ".jsx"
+        ]
+      }
+    ],
+    "radix": 0,
+    "no-shadow": [
+      2,
+      {
+        "hoist": "all",
+        "allow": [
+          "resolve",
+          "reject",
+          "done",
+          "next",
+          "err",
+          "error"
+        ]
+      }
+    ],
+    "quotes": [
+      2,
+      "single",
+      {
+        "avoidEscape": true,
+        "allowTemplateLiterals": true
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "trailingComma": "es5",
+        "singleQuote": true,
+        "printWidth": 80
+      }
+    ],
+    "jsx-a11y/href-no-hash": "off",
+    "jsx-a11y/anchor-is-valid": [
+      "warn",
+      {
+        "aspects": [
+          "invalidHref"
+        ]
+      }
+    ]
+  },
+  "plugins": [
+    "prettier"
+  ]
+}

.flowconfig

@@ -0,0 +1,26 @@
+[ignore]
+<PROJECT_ROOT>/node_modules
+
+[include]
+
+[libs]
+./flow-typed
+
+[options]
+suppress_comment=.*\\$FlowFixMe
+suppress_comment=.*\\$FlowIssue
+esproposal.class_instance_fields=enable
+module.system.node.resolve_dirname=node_modules
+module.system.node.resolve_dirname=.
+module.file_ext=.js
+module.file_ext=.jsx
+module.file_ext=.json
+
+[lints]
+untyped-type-import=error
+untyped-import=warn
+unclear-type=warn
+unsafe-getters-setters=error
+
+[version]
+0.90.0

.gitignore

@@ -4,6 +4,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.DS_Store
 
 # Runtime data
 pids

.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "prettier.printWidth": 120,
+  "prettier.tabWidth": 2,
+  "prettier.singleQuote": true,
+  "prettier.trailingComma": "none",
+  "prettier.bracketSpacing": true,
+  "prettier.parser": "flow",
+  "prettier.semi": true,
+  "prettier.useTabs": false,
+  "prettier.jsxBracketSameLine": false
+}

.travis.yml

@@ -0,0 +1,19 @@
+language: node_js
+node_js:
+  - 10
+cache:
+  directories:
+    - ~/.npm
+    - ~/.cache
+install:  
+  - npm install
+before_script:
+  - npm run build
+  - npm run start &
+script:
+  - node --version
+  - npm --version
+  - npm run flow
+  - npm run cypress:run
+notifications:
+  email: false

components/Button/Button.js

@@ -0,0 +1,9 @@
+// @flow
+import React from 'react';
+import * as Styled from './style';
+import type { ButtonProps } from './types';
+
+export default function Button(props: ButtonProps) {
+  const { children } = props;
+  return <Styled.Button {...props}>{children}</Styled.Button>;
+}

components/Button/CopyLinkButton.js

@@ -0,0 +1,45 @@
+// @flow
+// $FlowIssue
+import React, { useState } from 'react';
+import dynamic from 'next/dynamic';
+import * as Styled from './style';
+import Icon from '../Icon';
+import type { ButtonProps } from './types';
+
+const Clipboard = dynamic(() => import('react-clipboard.js'), {
+  ssr: false,
+  loading: () => null,
+});
+
+type CopyLinkProps = {
+  ...$Exact<ButtonProps>,
+  text: string,
+};
+
+export default function CopyLinkButton(props: CopyLinkProps) {
+  const { text, children } = props;
+  const [isClicked, handleClick] = useState(false);
+
+  const onClick = () => {
+    handleClick(true);
+    setTimeout(() => handleClick(false), 2000);
+  };
+
+  return (
+    <Clipboard
+      style={{ background: 'none' }}
+      data-clipboard-text={text}
+      onSuccess={onClick}
+      component="a"
+    >
+      <Styled.CopyLinkButton
+        data-cy="copy-link-button"
+        isClicked={isClicked}
+        {...props}
+      >
+        <Icon glyph="link" size={24} />
+        {isClicked ? 'Copied!' : children}
+      </Styled.CopyLinkButton>
+    </Clipboard>
+  );
+}

components/Button/FacebookButton.js

@@ -0,0 +1,15 @@
+// @flow
+import React from 'react';
+import * as Styled from './style';
+import Icon from '../Icon';
+import type { ButtonProps } from './types';
+
+export default function FacebookButton(props: ButtonProps) {
+  const { children } = props;
+  return (
+    <Styled.FacebookButton {...props}>
+      <Icon glyph="facebook" size={24} />
+      {children}
+    </Styled.FacebookButton>
+  );
+}

components/Button/GhostButton.js

@@ -0,0 +1,9 @@
+// @flow
+import React from 'react';
+import * as Styled from './style';
+import type { ButtonProps } from './types';
+
+export default function GhostButton(props: ButtonProps) {
+  const { children } = props;
+  return <Styled.GhostButton {...props}>{children}</Styled.GhostButton>;
+}

components/Button/OutlineButton.js

@@ -0,0 +1,9 @@
+// @flow
+import React from 'react';
+import * as Styled from './style';
+import type { ButtonProps } from './types';
+
+export default function OutlineButton(props: ButtonProps) {
+  const { children } = props;
+  return <Styled.OutlineButton {...props}>{children}</Styled.OutlineButton>;
+}

components/Button/PrimaryButton.js

@@ -0,0 +1,9 @@
+// @flow
+import React from 'react';
+import * as Styled from './style';
+import type { ButtonProps } from './types';
+
+export default function PrimaryButton(props: ButtonProps) {
+  const { children } = props;
+  return <Styled.PrimaryButton {...props}>{children}</Styled.PrimaryButton>;
+}

components/Button/TwitterButton.js

@@ -0,0 +1,15 @@
+// @flow
+import React from 'react';
+import * as Styled from './style';
+import Icon from '../Icon';
+import type { ButtonProps } from './types';
+
+export default function TwitterButton(props: ButtonProps) {
+  const { children } = props;
+  return (
+    <Styled.TwitterButton {...props}>
+      <Icon glyph="twitter" size={24} />
+      {children}
+    </Styled.TwitterButton>
+  );
+}

components/Button/index.js

@@ -0,0 +1,22 @@
+// @flow
+import * as Styled from './style';
+import Button from './Button';
+import CopyLinkButton from './CopyLinkButton';
+import FacebookButton from './FacebookButton';
+import GhostButton from './GhostButton';
+import OutlineButton from './OutlineButton';
+import PrimaryButton from './PrimaryButton';
+import TwitterButton from './TwitterButton';
+
+const { ButtonRow } = Styled;
+
+export {
+  Button,
+  CopyLinkButton,
+  FacebookButton,
+  GhostButton,
+  OutlineButton,
+  PrimaryButton,
+  TwitterButton,
+  ButtonRow,
+};