Merge pull request #6 from 5app/v2

Version 2

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+test/coverage

.eslintrc.js

@@ -11,19 +11,17 @@ module.exports = {
 	},
 	env: {
 		browser: true,
+		jest: true,
 	},
-	plugins: ['prettier'],
+	plugins: ['react-hooks', 'prettier'],
 	rules: {
-		'arrow-parens': [0, 'as-needed'],
-		'prefer-template': 0,
-		'quote-props': [0, 'as-needed'],
 		'no-unused-vars': [2, {ignoreRestSiblings: true}],
-
-		'jsx-quotes': [2, 'prefer-double'],
-		'react/jsx-indent': [2, 'tab'],
+		'prefer-template': 0,
+		'prettier/prettier': 'error',
 		'react/jsx-no-bind': [2, {allowArrowFunctions: true, ignoreRefs: true}],
 		'react/prop-types': 0,
-		'prettier/prettier': 'error',
+		'react-hooks/rules-of-hooks': 'error',
+		'react-hooks/exhaustive-deps': 'warn',
 	},
 	settings: {
 		react: {

.gitignore

@@ -1,5 +1,6 @@
 dist
 node_modules
+/test/coverage
 .DS_Store
 
 .docz/**

README.md

@@ -68,3 +68,27 @@ To publish changes to the components in this repo, please follow these steps. Th
 ## Updating just the docs
 
 If you did not make any changes to components and only want to update the docs in our online [component library](https://5app.github.io/base5-ui), just submit a PR or push to the `master` branch directly using a `docs:` prefix for the commit message.
+
+## Tests
+
+Execute `npm test` or `npm run test` to run the tests
+
+Execute `npm run test:cover` to run the tests with coverage analysis.
+
+- A summary report such as the following will be available in the terminal:
+
+```
+=============================== Coverage summary ===============================
+Statements   : 76.38% ( 524/686 )
+Branches     : 53.81% ( 120/223 )
+Functions    : 87.06% ( 148/170 )
+Lines        : 77.04% ( 520/675 )
+================================================================================
+Test Suites: 12 passed, 12 total
+Tests:       3 skipped, 32 passed, 35 total
+Snapshots:   0 total
+Time:        3.818s
+```
+
+- A detailed html code analysis report will be available at `./test/coverage/index.html`
+The detailed report provides a good insight on what to test and how well the component is tested.

docz/Wrapper/index.js

@@ -1,12 +1,28 @@
 import React from 'react';
+import {createGlobalStyle} from 'styled-components';
 import ThemeSection from '../../src/ThemeSection';
 
 import theme from '../../src/theme';
 
+import 'focus-visible';
+
+const GlobalStyle = createGlobalStyle`
+	*:focus:not(:focus-visible) {
+		outline: none;
+	}
+
+	*:focus:not(.focus-visible) {
+		outline: none;
+	}
+`;
+
 const Wrapper = ({children}) => (
-	<ThemeSection name="page" baseTheme={theme}>
-		{children}
-	</ThemeSection>
+	<>
+		<GlobalStyle />
+		<ThemeSection name="page" baseTheme={theme}>
+			{children}
+		</ThemeSection>
+	</>
 );
 
 export default Wrapper;

jest.config.js

@@ -0,0 +1,14 @@
+module.exports = {
+	verbose: true,
+	coverageReporters: ['html'],
+	coverageDirectory: './test/coverage',
+	testEnvironment: 'jsdom',
+	collectCoverageFrom: [
+		'**/*.{js}',
+		'!**/docz/**',
+		'!**/node_modules/**',
+		'!**/test/**',
+	],
+	coveragePathIgnorePatterns: ['/node_modules/', '/docz/', '/test/'],
+	modulePathIgnorePatterns: ['/node_modules/', '/docz/'],
+};

package.json

@@ -1,98 +1,104 @@
 {
-	"name": "base5-ui",
-	"version": "1.14.18",
-	"description": "5app's reusable UI component library",
-	"main": "index.js",
-	"scripts": {
-		"build-icons": "pixo src-icons/svg --out-dir src/icons --template src-icons/template.js",
-		"compile": "babel src --out-dir dist",
-		"copypackage": "cp -rf package.json README.md dist",
-		"predist": "npm run copypackage",
-		"dist": "cd dist && npm publish",
-		"docz:dev": "docz dev",
-		"docz:build": "docz build",
-		"deploy-docs": "npm run docz:build && gh-pages -d .docz/dist -m 'Update docs [skip ci]'",
-		"lint": "eslint ./",
-		"postversion": "pwd && cp -r package.json ../",
-		"semantic-release": "semantic-release",
-		"test": "npm run lint"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/5app/base5-ui.git"
-	},
-	"author": "Dionysos Dajka",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/5app/base5-ui/issues"
-	},
-	"homepage": "https://github.com/5app/base5-ui#readme",
-	"devDependencies": {
-		"@babel/cli": "^7.4.4",
-		"@babel/core": "^7.4.5",
-		"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
-		"@babel/plugin-transform-react-jsx": "^7.3.0",
-		"@babel/preset-env": "^7.4.5",
-		"@semantic-release/changelog": "^3.0.4",
-		"@semantic-release/git": "^7.0.14",
-		"babel-eslint": "^10.0.2",
-		"babel-plugin-styled-components": "^1.10.2",
-		"docz": "^1.2.0",
-		"docz-theme-default": "^1.2.0",
-		"eslint": "^5.5.0",
-		"eslint-config-5app": "^0.6.4",
-		"eslint-config-prettier": "^6.0.0",
-		"eslint-plugin-import": "^2.18.0",
-		"eslint-plugin-jsx-a11y": "^6.2.1",
-		"eslint-plugin-prettier": "^3.1.0",
-		"eslint-plugin-react": "^7.14.2",
-		"gh-pages": "^2.0.1",
-		"pixo": "^1.1.2",
-		"prettier": "1.18.2",
-		"prop-types": "^15.7.2",
-		"react": "^16.8.1",
-		"react-dom": "^16.8.1",
-		"semantic-release": "^15.13.12",
-		"styled-components": "^4.0.1-0"
-	},
-	"peerDependencies": {
-		"react": "^16.8.1",
-		"styled-components": "^4.3.2"
-	},
-	"dependencies": {
-		"chroma-js": "^2.0.4",
-		"classnames": "^2.2.6",
-		"prop-types": "^15.7.2",
-		"react-hook-size": "^1.3.0",
-		"react-popper": "^1.3.3"
-	},
-	"release": {
-		"branch": "master",
-		"prepare": [
-			"@semantic-release/changelog",
-			{
-				"path": "@semantic-release/npm",
-				"pkgRoot": "dist"
-			},
-			{
-				"path": "@semantic-release/git",
-				"assets": [
-					"package.json",
-					"CHANGELOG.md"
-				],
-				"message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
-			}
-		],
-		"plugins": [
-			"@semantic-release/commit-analyzer",
-			"@semantic-release/release-notes-generator",
-			[
-				"@semantic-release/npm",
-				{
-					"pkgRoot": "dist"
-				}
-			],
-			"@semantic-release/github"
-		]
-	}
+  "name": "base5-ui",
+  "version": "2.0.1",
+  "description": "5app's reusable UI component library",
+  "main": "index.js",
+  "scripts": {
+    "build-icons": "pixo src-icons/svg --out-dir src/icons --template src-icons/template.js",
+    "compile": "babel src --out-dir dist",
+    "copypackage": "cp -rf package.json README.md dist",
+    "predist": "npm run copypackage",
+    "dist": "cd dist && npm publish",
+    "docz:dev": "docz dev",
+    "docz:build": "docz build",
+    "deploy-docs": "npm run docz:build && gh-pages -d .docz/dist -m 'Update docs [skip ci]'",
+    "lint": "eslint ./",
+    "postversion": "pwd && cp -r package.json ../",
+    "semantic-release": "semantic-release",
+    "test": "jest /src && npm run lint",
+    "test:cover": "jest /src --coverage && npm run lint"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/5app/base5-ui.git"
+  },
+  "author": "Dionysos Dajka",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/5app/base5-ui/issues"
+  },
+  "homepage": "https://github.com/5app/base5-ui#readme",
+  "devDependencies": {
+    "@babel/cli": "^7.4.4",
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
+    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@babel/preset-env": "^7.4.5",
+    "@semantic-release/changelog": "3.0.4",
+    "@semantic-release/git": "7.0.14",
+    "@testing-library/react": "8.0.4",
+    "babel-eslint": "^10.0.2",
+    "babel-plugin-styled-components": "^1.10.2",
+    "docz": "^1.2.0",
+    "docz-theme-default": "^1.2.0",
+    "eslint": "^5.5.0",
+    "eslint-config-5app": "^0.6.4",
+    "eslint-config-prettier": "^6.0.0",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-jsx-a11y": "^6.2.1",
+    "eslint-plugin-prettier": "^3.1.0",
+    "eslint-plugin-react": "^7.14.2",
+    "eslint-plugin-react-hooks": "^1.6.1",
+    "gh-pages": "^2.0.1",
+    "jest": "23.1.0",
+    "jest-dom": "3.5.0",
+    "pixo": "^1.1.2",
+    "prettier": "^1.18.2",
+    "prop-types": "15.7.2",
+    "react": "16.8.6",
+    "react-dom": "16.8.6",
+    "semantic-release": "^15.13.12",
+    "styled-components": "4.3.2"
+  },
+  "peerDependencies": {
+    "react": "16.8.6",
+    "styled-components": "4.3.2"
+  },
+  "dependencies": {
+    "chroma-js": "^2.0.4",
+    "classnames": "^2.2.6",
+    "focus-visible": "^4.1.5",
+    "prop-types": "15.7.2",
+    "react-hook-size": "1.3.0",
+    "react-popper": "1.3.3"
+  },
+  "release": {
+    "branch": "master",
+    "prepare": [
+      "@semantic-release/changelog",
+      {
+        "path": "@semantic-release/npm",
+        "pkgRoot": "dist"
+      },
+      {
+        "path": "@semantic-release/git",
+        "assets": [
+          "package.json",
+          "CHANGELOG.md"
+        ],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ],
+    "plugins": [
+      "@semantic-release/commit-analyzer",
+      "@semantic-release/release-notes-generator",
+      [
+        "@semantic-release/npm",
+        {
+          "pkgRoot": "dist"
+        }
+      ],
+      "@semantic-release/github"
+    ]
+  }
 }

src-icons/template.js

@@ -1,8 +1,12 @@
-module.exports = ({name, viewBox, pathData}) => `import React from 'react';
+module.exports = ({
+	name,
+	viewBox,
+	pathData,
+}) => `import React, {forwardRef} from 'react';
 
 import Svg from './BaseSvg';
 
-const ${name}Icon = React.forwardRef((props, ref) => {
+const ${name}Icon = forwardRef((props, ref) => {
 	const {
 		size,
 		color,

src/Box/README.mdx

@@ -0,0 +1,34 @@
+---
+name: Box
+menu: Components
+---
+
+import { Playground, Props } from 'docz'
+import Box from './'
+
+# Box
+
+`Box` is a generic layout primitive, exposing many useful props for controlling style and layout of the component.
+
+The following properties can be changed:
+
+- Position
+- Margin and padding
+- Border
+- Flex behaviour (grow, shrink, basis, flexAlign)
+- Text styles (bold, dimmed, textAlign, overflow, caps)
+
+## Examples
+
+<Playground>
+	<Box border="bottom" pb="s">
+		Hello
+	</Box>
+	<Box bold mt="s" p="s">
+		Hello
+	</Box>
+</Playground>
+
+## Props
+
+<Props of={Box} />

src/Box/index.js

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+
+import {
+	positionProps,
+	flexProps,
+	spacingProps,
+	borderProps,
+	textProps,
+} from '../styleProps';
+
+const Box = styled.div`
+	${positionProps}
+	${flexProps}
+	${spacingProps}
+	${borderProps}
+	${textProps}
+`;
+
+Box.propTypes = {
+	position: PropTypes.oneOf(['static', 'relative', 'absolute', 'fixed']),
+	border: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
+	flexAlign: PropTypes.oneOf(['top', 'left', 'center', 'bottom', 'right']),
+	basis: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+	grow: PropTypes.bool,
+	shrink: PropTypes.bool,
+	bold: PropTypes.bool,
+	caps: PropTypes.oneOf(['all', 'first']),
+	dimmed: PropTypes.bool,
+	fontSize: PropTypes.string,
+	lineHeight: PropTypes.number,
+	overflow: PropTypes.oneOf(['ellipsis', 'wrap']),
+	textAlign: PropTypes.oneOf(['left', 'center', 'right']),
+};
+
+export default Box;