feat: add theming & themable components support

.eslintrc

@@ -1,3 +1,3 @@
-{
-  "extends": ["@deity/eslint-config-falcon"]
-}
+{
+  "extends": ["@deity/eslint-config-falcon"]
+}

.lintstagedrc

@@ -1,4 +1,4 @@
 "linters": {
-  "*.{js,jxs}": ["eslint --fix", "git add"],
+  "*.{js,jxs,ts, tsx}": ["eslint --fix", "git add"],
   "*.{json,css,scss,graphql,yml}": ["prettier --write", "git add"]
 }

packages/falcon-dev-tools/eslint-config-falcon/index.js

@@ -3,7 +3,11 @@ module.exports = {
   extends: ['eslint-config-airbnb', 'plugin:prettier/recommended'],
   plugins: ['react', 'import', 'prettier'],
   settings: {
-    'import/parser': 'babel-eslint'
+    'import/parser': 'babel-eslint',
+    'import/resolver': {
+      node: true,
+      'eslint-import-resolver-typescript': true
+    }
   },
   env: {
     browser: true,
@@ -27,12 +31,7 @@ module.exports = {
     'import/no-unresolved': 'off',
     'import/no-named-as-default': 'error',
     'import/extensions': ['off', 'never'],
-    'import/no-extraneous-dependencies': [
-      'error',
-      {
-        devDependencies: ['**/__tests__/*', '**/*.test.js', '**/webpack/*.js']
-      }
-    ],
+    'import/no-extraneous-dependencies': ['error'],
     'jsx-a11y/anchor-is-valid': [
       'off',
       {
@@ -77,7 +76,7 @@ module.exports = {
     'react/jsx-filename-extension': [
       1,
       {
-        extensions: ['.js', '.jsx']
+        extensions: ['.js', '.jsx', '.tsx']
       }
     ],
     'react/no-danger': 'off',
@@ -99,5 +98,25 @@ module.exports = {
     __DEVTOOLS__: true,
     socket: true,
     webpackIsomorphicTools: true
-  }
+  },
+  overrides: [
+    {
+      files: ['**/*.ts', '**/*.tsx'],
+      parser: 'typescript-eslint-parser',
+      plugins: ['typescript'],
+      rules: {
+        'no-undef': 'off',
+        'no-unused-vars': 'off',
+        'no-restricted-globals': 'off',
+        'react/prefer-stateless-function': 'off',
+        'react/react-in-jsx-scope': 'off',
+        'no-use-before-define': 'off',
+        'no-continue': 'off',
+        'dot-notation': 'off',
+        'react/prop-types': 'off',
+        'import/prefer-default-export': 'off',
+        'import-name': [true, { react: 'React' }]
+      }
+    }
+  ]
 };

packages/falcon-dev-tools/eslint-config-falcon/package.json

@@ -9,9 +9,13 @@
     "eslint-config-airbnb": "^16.0.0",
     "eslint-config-prettier": "^2.9.0",
     "eslint-plugin-import": "^2.13.0",
+    "eslint-import-resolver-typescript": "^1.0.2",
     "eslint-plugin-jsx-a11y": "^6.1.1",
     "eslint-plugin-prettier": "^2.6.2",
     "eslint-plugin-react": "^7.10.0",
+    "eslint-plugin-typescript": "^0.12.0",
+    "typescript": "^3.0.1",
+    "typescript-eslint-parser": "^18.0.0",
     "prettier": "^1.14.0"
   },
   "peerDependencies": {

packages/falcon-ui/.gitignore

@@ -0,0 +1,3 @@
+.docz/
+dist/
+node_modules/

packages/falcon-ui/.size-snapshot.json

@@ -0,0 +1,35 @@
+{
+  "dist/falcon-ui.cjs.js": {
+    "bundled": 15553,
+    "minified": 7559,
+    "gzipped": 2747
+  },
+  "dist/falcon-ui.es.js": {
+    "bundled": 2149,
+    "minified": 937,
+    "gzipped": 506,
+    "treeshaked": {
+      "rollup": {
+        "code": 689,
+        "import_statements": 57
+      },
+      "webpack": {
+        "code": 1753
+      }
+    }
+  },
+  "dist/falcon-ui.esm.js": {
+    "bundled": 15117,
+    "minified": 7200,
+    "gzipped": 2662,
+    "treeshaked": {
+      "rollup": {
+        "code": 6240,
+        "import_statements": 146
+      },
+      "webpack": {
+        "code": 7410
+      }
+    }
+  }
+}

packages/falcon-ui/README.md

@@ -0,0 +1,53 @@
+// rename docs na docs helpers? wyniesc ponad src? chyba tak
+// komponent hide?
+
+2 docz - dodac custom tsconfig, jak?
+// jak powinna wygladac tabelka z props? design
+
+// Dodać conventional commits?
+// TODO:
+// 1 obsluga refs przetestowac
+
+// dodac docsy dla flex, css, theme, root itp
+// tak powinien wyglądać doc z theme - https://pricelinelabs.github.io/design-system/Color plus edycja? tak jak tu? https://material-ui.com/style/color/#color-tool albo tu https://material.io/tools/color/#!/?view.left=0&view.right=0
+
+//2 mozna dodac komentarze do props mapping i to zadziała!
+//4 docz hot reload? nie dziala?
+// UKRYC PROPERTY THEME Z PROPS? TAK JSDOC HIDDEN?
+
+// czwartek
+// dodac component card? - ma box shadow?
+
+// TODO: dodac ratio do theme props? sprobowac ?
+
+https://github.com/prettier/prettier/pull/4975
+
+// Track https://github.com/frenic/csstype/issues/8#issuecomment-403489436
+
+///////////
+///////////
+///////////
+OTHER TODO:
+// w projekcie klienckim będzie getTheme, ktory zwraca i nadpisuje default theme, plus strona z edycją themu
+// kazda kliencka aplikacja ma stronę /\_theme ktora pokazuje jaka jest obecna definicja dla theme'a oraz dodaje mozliwosc zmiany
+Components - ogolne/generyczne
+Containers - product card, product list etc, checkout
+// dodać https://github.com/Andarist/babel-plugin-annotate-pure-calls ?
+// https://www.npmjs.com/package/tinycolor2
+// https://reactjs.org/blog/2018/03/29/react-v-16-3.html#strictmode-component
+// https://github.com/final-form/react-final-form
+// scenariusze modyfikacji
+// edycja istniejących zmiennych
+// dodanie nowej zmiennej (kolor)
+// dodanie nowego komponentu
+https://github.com/cimdalli/mui-theme-generator
+// TODO: odpalanie build przy install? jak?
+// TODO: dzialajace testy jest
+// TODO: dokumentacja
+// opisac jak mozna modyfikować theme
+// Themowalne propsy trzymam w theme, łatwo można dodawać nowe themes, osobna paczka z nowym themem,
+// - css custom prop (moze przyjmowac funkcje)
+// - as props
+// - className fallback
+// - przyjmowanie wszystkich propsow
+// falcon abstractor i dominator

packages/falcon-ui/babel.config.js

@@ -0,0 +1,25 @@
+const { BABEL_ENV, NODE_ENV } = process.env;
+const cjs = BABEL_ENV === 'cjs' || NODE_ENV === 'test';
+
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        modules: false,
+        loose: true,
+        targets: {
+          // > 0.5%, last 2 versions, Firefox ESR, not dead
+          browsers: 'defaults'
+        }
+      }
+    ],
+    '@babel/preset-typescript',
+    '@babel/preset-react'
+  ],
+  plugins: [
+    '@babel/plugin-proposal-class-properties',
+    '@babel/plugin-proposal-object-rest-spread',
+    cjs && 'transform-es2015-modules-commonjs'
+  ].filter(Boolean)
+};

packages/falcon-ui/doczrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  typescript: true,
+  src: './src',
+  wrapper: 'src/docs/Wrapper',
+  modifyBundlerConfig: config => {
+    console.log(config);
+
+    return config;
+  }
+};

packages/falcon-ui/jest.config.js

@@ -0,0 +1,11 @@
+const { defaults } = require('jest-config');
+
+module.exports = {
+  snapshotSerializers: ['jest-serializer-html'],
+  coveragePathIgnorePatterns: ['/node_modules/', '<rootDir>/docs'],
+  moduleFileExtensions: [...defaults.moduleFileExtensions, 'ts', 'tsx'],
+  transform: {
+    // (.js, .ts, .jsx, .tsx) files
+    '^.+\\.(j|t)sx?$': 'babel-jest'
+  }
+};

packages/falcon-ui/package.json

@@ -1,7 +1,62 @@
 {
   "name": "@deity/falcon-ui",
   "license": "OSL-3.0",
-  "main": "index.js",
   "version": "1.0.0",
-  "repository": "git@github.com:deity-io/falcon.git"
+  "repository": "git@github.com:deity-io/falcon.git",
+  "main": "dist/falcon-ui.cjs.js",
+  "module": "dist/falcon-ui.esm.js",
+  "types": "dist/index.d.ts",
+  "source": "src/index.ts",
+  "sideEffects": false,
+  "files": [
+    "dist",
+    "src"
+  ],
+  "peerDependencies": {
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2"
+  },
+  "scripts": {
+    "prebuild": "rimraf dist",
+    "build": "rollup -c & tsc & docz build",
+    "start": "docz dev",
+    "test": "jest"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.0.0-rc.1",
+    "@babel/core": "^7.0.0-rc.1",
+    "@babel/plugin-proposal-class-properties": "^7.0.0-rc.1",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0-rc.1",
+    "@babel/preset-env": "^7.0.0-rc.1",
+    "@babel/preset-react": "^7.0.0-rc.1",
+    "@babel/preset-typescript": "^7.0.0-rc.1",
+    "@types/deepmerge": "^2.1.0",
+    "@types/jest": "^23.3.1",
+    "@types/react": "^16.4.9",
+    "babel-jest": "^23.4.2",
+    "babel-loader": "8.0.0-beta.4",
+    "babel-plugin-module-resolver": "^3.1.1",
+    "docz": "^0.10.3",
+    "jest-cli": "^23.4.2",
+    "jest-config": "^23.4.2",
+    "jest-serializer-html": "^5.0.0",
+    "react": "^16.4.2",
+    "react-dom": "^16.4.2",
+    "react-test-renderer": "^16.4.2",
+    "rimraf": "^2.6.1",
+    "rollup": "^0.64.1",
+    "rollup-plugin-babel": "^4.0.0-beta.8",
+    "rollup-plugin-node-resolve": "^3.3.0",
+    "rollup-plugin-size-snapshot": "^0.6.1",
+    "typescript": "^3.0.1"
+  },
+  "dependencies": {
+    "@emotion/core": "^0.13.0",
+    "@emotion/is-prop-valid": "^0.6.5",
+    "@emotion/provider": "^0.11.1",
+    "@emotion/styled-base": "^0.10.3",
+    "@mdx-js/tag": "^0.15.0-2",
+    "csstype": "^2.5.6",
+    "deepmerge": "^2.1.1"
+  }
 }

packages/falcon-ui/rollup.config.js

@@ -0,0 +1,27 @@
+import babel from 'rollup-plugin-babel';
+import resolve from 'rollup-plugin-node-resolve';
+import { sizeSnapshot } from 'rollup-plugin-size-snapshot';
+import pkg from './package.json';
+
+const externals = [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})];
+
+const makeExternalPredicate = externalsArr => {
+  if (externalsArr.length === 0) {
+    return () => false;
+  }
+  const externalPattern = new RegExp(`^(${externalsArr.join('|')})($|/)`);
+  return id => externalPattern.test(id);
+};
+
+export default {
+  input: 'src/index.ts',
+  external: makeExternalPredicate(externals),
+  plugins: [
+    resolve({
+      extensions: ['.ts', '.tsx', '.js', '.jsx', '.json']
+    }),
+    babel(),
+    sizeSnapshot({ matchSnapshot: false })
+  ],
+  output: [{ file: pkg.main, format: 'cjs', sourcemap: true }, { file: pkg.module, format: 'esm', sourcemap: true }]
+};

packages/falcon-ui/src/components/Button.mdx

@@ -0,0 +1,35 @@
+---
+name: Button
+menu: Components
+---
+
+import { Playground } from 'docz'
+import { PropsTable } from '../docs/PropsTable'
+import { Button, GridLayout, Card } from '../'
+
+# Button
+description
+
+### Best practices
+TODO
+
+### Basic usage
+<Playground>
+ <GridLayout gridTemplateColumns={{ xs: '1fr 2fr', md: '2fr 2fr' }}>
+  <Card>
+    <Button bg={{ xs: 'primary', md: 'secondary' }}>Hello!</Button>
+  </Card>
+  <Card>
+    <Button>World</Button>
+  </Card>
+  <Card>
+    <Button>test</Button>
+  </Card>
+  <Card>
+    <Button variant="primary">test 2</Button>
+  </Card>
+</GridLayout>
+</Playground>
+
+### Properties
+<PropsTable of={Button} />

packages/falcon-ui/src/components/Button.tsx

@@ -0,0 +1,16 @@
+import { themed } from '../theme';
+
+export const Button = themed({
+  themeKey: 'button',
+  as: 'button'
+})({
+  fontFamily: 'inherit',
+  WebkitFontSmoothing: 'antialiased',
+  display: 'inline-block',
+  border: 'none',
+  textDecoration: 'none',
+  appearance: 'none',
+  ':focus': {
+    outline: 'none'
+  }
+});

packages/falcon-ui/src/components/Card.tsx

@@ -0,0 +1,6 @@
+import { themed } from '../theme';
+
+export const Card = themed({
+  themeKey: 'card',
+  as: 'div'
+})();

packages/falcon-ui/src/components/FlexLayout.tsx

@@ -0,0 +1,6 @@
+import { themed } from '../theme';
+
+export const FlexLayout = themed({
+  themeKey: 'flexLayout',
+  as: 'div'
+})();