Get basic styleguidist to work

JelteF · JelteF · commit a2189d1740e6 · 2019-01-30T11:56:32.000+01:00
diff --git a/.eslintignore b/.eslintignore
@@ -1,5 +1,6 @@
 *.md
 **/*{.,-}min.js
+example/src/serviceWorker.js
 node_modules/
 /example/build/
 /lib/
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,13 +1,17 @@
 {
-  "plugins": [
-    "babel"
-  ],
+  "plugins": ["babel"],
   "extends": [
     "eslint:recommended",
     "plugin:flowtype/recommended",
     "plugin:react/recommended",
     "plugin:jest/recommended"
   ],
+  "settings": {
+    "react": {
+      "version": "detect",
+      "flowVersion": "0.91"
+    }
+  },
   "rules": {
     "no-console": 0,
     "no-mixed-spaces-and-tabs": 1,
@@ -27,17 +31,12 @@
     "require-await": 2,
     "react/prop-types": 0,
     "no-var": 2,
-    "linebreak-style": [
-      2,
-      "unix"
-    ],
-    "semi": [
-      1,
-      "always"
-    ],
+    "linebreak-style": [2, "unix"],
+    "semi": [1, "always"],
     "flowtype/require-valid-file-annotation": [
       0,
-      "always", {
+      "always",
+      {
         "annotationStyle": "line"
       }
     ],
@@ -52,8 +51,8 @@
   "parserOptions": {
     "sourceType": "module",
     "ecmaVersion": 2018,
-    "ecmaFeatures" : {
-        "modules": true
+    "ecmaFeatures": {
+      "modules": true
     }
   }
 }
diff --git a/.prettierignore b/.prettierignore
@@ -5,4 +5,5 @@
 /flow-typed/
 /docs/
 /.git/
+example/src/serviceWorker.js
 **/*.sh
diff --git a/.prettierrc b/.prettierrc
@@ -1,9 +1,9 @@
 {
-    "singleQuote": true,
-    "trailingComma": "all",
-    "arrowParens": "always",
-    "tabWidth": 2,
-    "overrides": [
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "tabWidth": 2,
+  "overrides": [
     {
       "files": "*.ts",
       "options": {
diff --git a/README.md b/README.md
@@ -13,15 +13,13 @@ npm install --save react-file-utils
 ## Usage
 
 ```jsx
-import React, { Component } from 'react'
+import React, { Component } from 'react';
 
-import MyComponent from 'react-file-utils'
+import MyComponent from 'react-file-utils';
 
 class Example extends Component {
-  render () {
-    return (
-      <MyComponent />
-    )
+  render() {
+    return <MyComponent />;
   }
 }
 ```
diff --git a/example/src/index.css b/example/src/index.css
@@ -1,14 +1,14 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
-    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
diff --git a/package.json b/package.json
@@ -15,6 +15,14 @@
   "scripts": {
     "test": "cross-env CI=1 react-scripts test --env=jsdom",
     "test:watch": "react-scripts test --env=jsdom",
+    "docs": "styleguidist build",
+    "docs-server": "styleguidist server",
+    "prettier": "prettier --list-different '**/*.{js,ts,md,css,scss,json}' .eslintrc.json .prettierrc .babelrc",
+    "prettier-fix": "prettier --write '**/*.{js,ts,md,css,scss,json}' .eslintrc.json .prettierrc .babelrc",
+    "eslint": "eslint '**/*.js' --max-warnings 0",
+    "eslint-fix": "eslint --fix '**/*.js' --max-warnings 0",
+    "lint": "prettier --list-different '**/*.{js,ts,md,css,scss,json}' .eslintrc.json .prettierrc .babelrc && eslint '**/*.{js,md}' --max-warnings 0",
+    "lint-fix": "prettier --write '**/*.{js,ts,md,css,scss,json}' .eslintrc.json .prettierrc .babelrc && eslint --fix '**/*.{js,md}' --max-warnings 0",
     "build": "rollup -c",
     "start": "rollup -c -w",
     "prepare": "yarn run build",
@@ -44,10 +52,16 @@
     "babel-register": "^7.0.0-beta.3",
     "cross-env": "^5.1.4",
     "eslint": "^5.0.1",
+    "eslint-config-react-app": "^3.0.6",
     "eslint-config-standard": "^11.0.0",
     "eslint-config-standard-react": "^6.0.0",
+    "eslint-loader": "^2.1.1",
     "eslint-plugin-babel": "^5.2.0",
+    "eslint-plugin-flowtype": "^3.2.1",
     "eslint-plugin-import": "^2.13.0",
+    "eslint-plugin-jest": "^22.2.1",
+    "eslint-plugin-jsx-a11y": "^6.2.0",
+    "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-node": "^7.0.1",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-react": "^7.10.0",
@@ -65,6 +79,7 @@
     "react": "^16.4.1",
     "react-dom": "^16.4.1",
     "react-scripts": "2.1.3",
+    "react-styleguidist": "^8.0.6",
     "rollup": "^0.66.4",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.1.8",
@@ -77,6 +92,7 @@
     "dist"
   ],
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^1.2.13",
     "@fortawesome/free-regular-svg-icons": "^5.7.0",
     "@fortawesome/react-fontawesome": "^0.1.4",
     "react-dropzone": "5.1.1"
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,42 @@
+/* eslint-disable */
+const variables = {
+  borderRadius: '4px',
+
+  z0: '0',
+  z1: '10',
+  z2: '20',
+  z3: '30',
+  z4: '40',
+  z5: '50',
+  z6: '60',
+  z7: '70',
+  z8: '80',
+  z9: '90',
+
+  transparent: 'rgba(255,255,255,0)',
+  white: '#ffffff',
+  black: '#000000',
+  primary: '#00D46A',
+  info: '#0BA8E0',
+  faded: '#DDDDDD',
+  error: '#FF0000',
+  fontColor: '#414D54',
+
+  // Colors to optimize
+  rafAttachedActivityAuthor: '#414D54',
+  rafActivityFooterBorder: '#E6F0F2',
+  rafCommentfieldBackground: '#F7F7F7', // lightest grey
+  rafCardBackground: '#F4F4F4', // lighter grey
+  rafCardBorder: '#A0B2B8', // grey
+  rafDropdownBackground: '#313E47', // dark grey
+};
+
+module.exports = {
+  plugins: {
+    'postcss-easy-import': {},
+    'postcss-cssnext': {},
+    'postcss-nested': {},
+    'postcss-color-function': {},
+    'postcss-simple-vars': { variables },
+  },
+};
diff --git a/rollup.config.js b/rollup.config.js
@@ -1,31 +1,25 @@
-import babel from 'rollup-plugin-babel'
-import commonjs from 'rollup-plugin-commonjs'
-import external from 'rollup-plugin-peer-deps-external'
-import postcss from 'rollup-plugin-postcss'
-import url from 'rollup-plugin-url'
+import babel from 'rollup-plugin-babel';
+import commonjs from 'rollup-plugin-commonjs';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import url from 'rollup-plugin-url';
 import replace from 'rollup-plugin-replace';
 
-import atImport from 'postcss-easy-import';
-import cssnext from 'postcss-cssnext';
-import nested from 'postcss-nested';
-import colorFunction from 'postcss-color-function';
-import vars from 'postcss-simple-vars';
-
-import pkg from './package.json'
+import pkg from './package.json';
 
 export default {
   input: 'src/index.js',
   output: [
     {
       file: pkg.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     {
       file: pkg.module,
       format: 'es',
-      sourcemap: true
-    }
+      sourcemap: true,
+    },
   ],
   external: [
     'react-images',
@@ -56,13 +50,6 @@ export default {
     }),
     external(),
     postcss({
-      plugins: [
-        atImport(),
-        nested(),
-        //vars({ variables }),
-        colorFunction(),
-        cssnext(),
-      ],
       modules: false,
       extract: true,
     }),
@@ -71,6 +58,6 @@ export default {
       runtimeHelpers: true,
       exclude: 'node_modules/**',
     }),
-    commonjs()
-  ]
-}
+    commonjs(),
+  ],
+};
diff --git a/src/index.js b/src/index.js
@@ -1,22 +1,16 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 
-import styles from './styles.css'
+import styles from './styles.css';
 
 export default class ExampleComponent extends Component {
   static propTypes = {
-    text: PropTypes.string
-  }
+    text: PropTypes.string,
+  };
 
   render() {
-    const {
-      text
-    } = this.props
+    const { text } = this.props;
 
-    return (
-      <div className={styles.test}>
-        Example Component: {text}
-      </div>
-    )
+    return <div className={styles.test}>Example Component: {text}</div>;
   }
 }
diff --git a/src/styleguide-styles.css b/src/styleguide-styles.css
@@ -0,0 +1,3 @@
+a > code {
+  cursor: pointer !important;
+}
diff --git a/src/styleguideComponents/PathlineRenderer.js b/src/styleguideComponents/PathlineRenderer.js
@@ -0,0 +1,43 @@
+// @noflow
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'react-styleguidist/lib/rsg-components/Link';
+import Styled from 'react-styleguidist/lib/rsg-components/Styled';
+
+export const styles = ({ space, fontFamily, fontSize, color }) => ({
+  pathline: {
+    fontFamily: fontFamily.monospace,
+    fontSize: fontSize.small,
+    color: color.light,
+    wordBreak: 'break-all',
+  },
+  copyButton: {
+    marginLeft: space[0],
+  },
+});
+
+export function PathlineRenderer({ classes, children }) {
+  const source = children;
+
+  return (
+    <div className={classes.pathline}>
+      <Link
+        href={
+          'https://github.com/GetStream/react-file-utils/blob/master/' +
+          source
+        }
+        target="blank"
+        rel="noopener"
+      >
+        {source}
+      </Link>
+    </div>
+  );
+}
+
+PathlineRenderer.propTypes = {
+  classes: PropTypes.object.isRequired,
+  children: PropTypes.string,
+};
+
+export default Styled(styles)(PathlineRenderer);
diff --git a/src/test.js b/src/test.js
@@ -1,7 +1,7 @@
-import ExampleComponent from './'
+import ExampleComponent from './';
 
 describe('ExampleComponent', () => {
   it('is truthy', () => {
-    expect(ExampleComponent).toBeTruthy()
-  })
-})
+    expect(ExampleComponent).toBeTruthy();
+  });
+});
diff --git a/src/types.js b/src/types.js
@@ -1,7 +1,5 @@
 // @flow
 
-import * as React from 'react';
-
 export type UploadState = 'uploading' | 'finished' | 'failed';
 
 export type FileLike = Blob | File;
diff --git a/src/utils.js b/src/utils.js
@@ -1,5 +1,4 @@
 // @flow
-import * as React from 'react';
 import type { FileLike } from './types';
 // import type { UserResponse } from 'getstream';
 
diff --git a/styleguide.config.js b/styleguide.config.js
diff --git a/webpack.config.styleguidist.js b/webpack.config.styleguidist.js
diff --git a/yarn.lock b/yarn.lock
