feat: make proper react library

packages/theme/.editorconfig

@@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

packages/theme/.eslintignore

@@ -0,0 +1,5 @@
+build/
+dist/
+node_modules/
+.snapshots/
+*.min.js

packages/theme/.eslintrc

@@ -0,0 +1,33 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "standard",
+    "standard-react",
+    "plugin:prettier/recommended",
+    "prettier/standard",
+    "prettier/react"
+  ],
+  "env": {
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "ecmaFeatures": {
+      "legacyDecorators": true,
+      "jsx": true
+    }
+  },
+  "settings": {
+    "react": {
+      "version": "16"
+    }
+  },
+  "rules": {
+    "space-before-function-paren": 0,
+    "react/prop-types": 0,
+    "react/jsx-handler-names": 0,
+    "react/jsx-fragments": 0,
+    "react/no-unused-prop-types": 0,
+    "import/export": 0
+  }
+}

packages/theme/.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+dist

packages/theme/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "semi": false,
+  "tabWidth": 2,
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always",
+  "trailingComma": "none"
+}

packages/theme/.travis.yml

@@ -0,0 +1,4 @@
+language: node_js
+node_js:
+  - 12
+  - 10

packages/theme/README.md

@@ -0,0 +1,30 @@
+# themeprovider
+
+> ThemeProvider for Rebass
+
+[![NPM](https://img.shields.io/npm/v/themeprovider.svg)](https://www.npmjs.com/package/themeprovider) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
+
+## Install
+
+```bash
+npm install --save themeprovider
+```
+
+## Usage
+
+```jsx
+import React, { Component } from 'react'
+
+import MyComponent from 'themeprovider'
+import 'themeprovider/dist/index.css'
+
+class Example extends Component {
+  render() {
+    return <MyComponent />
+  }
+}
+```
+
+## License
+
+MIT © [thecodrr](https://github.com/thecodrr)

packages/theme/index.js

@@ -1,28 +0,0 @@
-import React from "react";
-import { ThemeProvider as EmotionThemeProvider } from "emotion-theming";
-import ThemeFactory from "./theme";
-import { injectCss } from "utils/css";
-import { isMobile } from "utils/dimensions";
-
-const factory = new ThemeFactory();
-
-function ThemeProvider(props) {
-  const { useStore } = props;
-  const themeType = useStore((store) => store.theme);
-  const accent = useStore((store) => store.accent);
-  const theme = factory.construct({
-    theme: themeType,
-    accent,
-    scale: isMobile() ? 0.8 : 1,
-  });
-  injectCss(factory.transform("css", theme));
-
-  return (
-    <EmotionThemeProvider theme={theme}>
-      {props.children instanceof Function
-        ? props.children(theme)
-        : props.children}
-    </EmotionThemeProvider>
-  );
-}
-export default ThemeProvider;

packages/theme/package.json

@@ -1,29 +1,55 @@
 {
-  "name": "themefactory",
+  "name": "themeprovider",
   "version": "1.0.0",
-  "description": "React Rebass theme factory.",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/streetwriters/themefactory.git"
-  },
-  "keywords": [
-    "theme",
-    "rebass",
-    "react"
-  ],
-  "author": "thecodrr <thecodrr@protonmail.com>",
+  "description": "ThemeProvider for Rebass",
+  "author": "thecodrr",
   "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/streetwriters/themefactory/issues"
+  "repository": "streetwriters/themeprovider",
+  "main": "dist/index.js",
+  "module": "dist/index.modern.js",
+  "source": "src/index.js",
+  "engines": {
+    "node": ">=10"
   },
-  "homepage": "https://github.com/streetwriters/themefactory#readme",
-  "dependencies": {
+  "scripts": {
+    "build": "microbundle-crl --no-compress --format modern,cjs",
+    "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prepare": "run-s build",
+    "test": "run-s test:unit test:lint test:build",
+    "test:build": "run-s build",
+    "test:lint": "eslint .",
+    "test:unit": "cross-env CI=1 react-scripts test --env=jsdom",
+    "test:watch": "react-scripts test --env=jsdom",
+    "predeploy": "cd example && yarn install && yarn run build",
+    "deploy": "gh-pages -d example/build"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
     "emotion-theming": "^10.0.27",
-    "react": "^16.13.1",
     "utils": "https://github.com/streetwriters/utils.git"
-  }
-}
+  },
+  "devDependencies": {
+    "microbundle-crl": "^0.13.10",
+    "babel-eslint": "^10.0.3",
+    "cross-env": "^7.0.2",
+    "eslint": "^6.8.0",
+    "eslint-config-prettier": "^6.7.0",
+    "eslint-config-standard": "^14.1.0",
+    "eslint-config-standard-react": "^9.2.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-node": "^11.0.0",
+    "eslint-plugin-prettier": "^3.1.1",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-react": "^7.17.0",
+    "eslint-plugin-standard": "^4.0.1",
+    "gh-pages": "^2.2.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.0.4",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1"
+  },
+  "files": [
+    "dist"
+  ]
+}

packages/theme/src/.eslintrc

@@ -0,0 +1,5 @@
+{
+  "env": {
+    "jest": true
+  }
+}

packages/theme/src/index.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'
+import ThemeFactory from './theme'
+import { injectCss } from 'utils/css'
+import { isMobile } from 'utils/dimensions'
+
+const factory = new ThemeFactory()
+
+function ThemeProvider(props) {
+  const { useStore } = props
+  const themeType = useStore((store) => store.theme)
+  const accent = useStore((store) => store.accent)
+  const theme = factory.construct({
+    theme: themeType,
+    accent,
+    scale: isMobile() ? 0.8 : 1
+  })
+  injectCss(factory.transform('css', theme))
+
+  return (
+    <EmotionThemeProvider theme={theme}>
+      {props.children instanceof Function
+        ? props.children(theme)
+        : props.children}
+    </EmotionThemeProvider>
+  )
+}
+export default ThemeProvider