Merge pull request #7 from PDFTron/next

0.1.0

Author: liamross

.env.example

@@ -0,0 +1,51 @@
+module.exports = {
+  parser: '@typescript-eslint/parser',
+  parserOptions: { project: './tsconfig.lint.json' },
+  plugins: ['react-hooks'],
+  extends: [
+    'plugin:jsx-a11y/recommended',
+    'plugin:jest/recommended',
+    'plugin:jest/style',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/eslint-recommended',
+    'plugin:@typescript-eslint/recommended',
+
+    // Prettier overrides
+    'prettier',
+    'prettier/react',
+    'prettier/@typescript-eslint',
+  ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+  env: {
+    browser: true,
+    es6: true,
+    commonjs: true,
+    node: true,
+    jest: true,
+  },
+  rules: {
+    // Off
+    'react/prop-types': 'off',
+    'react/display-name': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/no-empty-interface': 'off',
+    '@typescript-eslint/camelcase': 'off',
+    '@typescript-eslint/no-triple-slash-reference': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/ban-ts-ignore': 'off',
+    '@typescript-eslint/no-use-before-define': 'off',
+
+    // On.
+    'prefer-const': 'error',
+    'react-hooks/rules-of-hooks': 'error',
+    'react-hooks/exhaustive-deps': 'error',
+    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
+    '@typescript-eslint/unbound-method': 'error',
+  },
+};

.eslintrc.js

@@ -30,7 +30,6 @@
 
 # SCRIPT(Make): Make script and utilities.
 /scripts/make/            @liamross
-/scripts/utils/           @liamross
 
 # SCRIPT(Sass): Sass AST parser and docs generator.
 /scripts/parse_scss.js    @liamross

.eslintrc.yaml

@@ -58,10 +58,8 @@ addParameters({
 
     // Since we do not add component description in code (instead inserting it
     // into a .md file) we extract it using the following.
-    extractComponentDescription: (_c: unknown, { info }: { info: string | { info?: string; text?: string } }) => {
-      if (typeof info === 'string') return info;
-      if (info.info) return info.info;
-      if (info.text) return info.text;
+    extractComponentDescription: (_c: unknown, { readme }: { readme: string }) => {
+      if (readme) return readme;
       return null;
     },
 

.github/CODEOWNERS

@@ -2,6 +2,82 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [0.1.0-beta.8](https://github.com/PDFTron/webviewer-react-toolkit/compare/v0.1.0-beta.7...v0.1.0-beta.8) (2020-02-19)
+
+### ⚠ BREAKING CHANGES
+
+- **Overlay:** removed blockClicks and darkOverlay from Overlay, will be moved into components that require these properties
+- **colors:** since color-blue-gray-4 was unused, shifted every color-blue-gray over so there is no longer a color-blue-gray-7, and every color above color-blue-gray-3 has been updated
+
+### Features
+
+- **ButtonGroup:** added button group for easy button layout ([9457c44](https://github.com/PDFTron/webviewer-react-toolkit/commit/9457c44242e6b8a92426cf3fbccd5ae3daa194a0))
+- **IconButton:** added icon button ([6fa450b](https://github.com/PDFTron/webviewer-react-toolkit/commit/6fa450be8d9242d8ce4656495bd930dec6382d7b))
+- **icons:** exposed single and multi page icons ([a45e459](https://github.com/PDFTron/webviewer-react-toolkit/commit/a45e459f542f566bceb747349d3df463740eb174))
+- **icons:** exposed some icons that are used internally ([0a35b58](https://github.com/PDFTron/webviewer-react-toolkit/commit/0a35b586ed437fb35cce32bae4cd479b647323ed))
+- **Modal:** added focus lock to modal to ensure user can't tab out ([7b005a8](https://github.com/PDFTron/webviewer-react-toolkit/commit/7b005a8741fe423e421d5ad32320bca0b574a436))
+- **Modal:** added modal component for displaying confirmations and info ([8a69e44](https://github.com/PDFTron/webviewer-react-toolkit/commit/8a69e44640e86701aeb271b39d4ed64188deefde))
+- **ToastProvider:** if added toast has timeout of 0 will not timeout ([c8c4f3c](https://github.com/PDFTron/webviewer-react-toolkit/commit/c8c4f3cdee1ecf8af5a5af1ba52866117302e00f))
+- **useUnmountDelay:** added hook for delayed unmounts, used in Modal ([1ef4338](https://github.com/PDFTron/webviewer-react-toolkit/commit/1ef433879b1cdac27cfad98ca8bc7602cd31fb94))
+
+### Bug Fixes
+
+- **Overlay:** no longer unmounts when first item removed ([52ae549](https://github.com/PDFTron/webviewer-react-toolkit/commit/52ae549d7b774b3eeea71275a98f3c82c6dc1245))
+
+### Styles
+
+- **colors:** removed unused color-blue-gray-4 ([89a4a5a](https://github.com/PDFTron/webviewer-react-toolkit/commit/89a4a5a65308b476c2c63bddec44523b8063df48))
+- **IconButton:** added padding to make button square given square icon ([39caaca](https://github.com/PDFTron/webviewer-react-toolkit/commit/39caacad795f8794d848ddc60e7cc45fe1b31a82))
+
+## [0.1.0-beta.7](https://github.com/PDFTron/webviewer-react-toolkit/compare/v0.1.0-beta.6...v0.1.0-beta.7) (2020-02-13)
+
+### ⚠ BREAKING CHANGES
+
+- **padding:** padding-half renamed to padding-small, padding-small renamed to padding-medium
+- **breakpoints:** media queries do not work with CSS variables, so created new Sass file for breakpoints, and removed breakpoints from mixins file
+
+### Features
+
+- **FocusTrap:** added FocusTrap and useFocusTrap hook ([b691590](https://github.com/PDFTron/webviewer-react-toolkit/commit/b691590c3dc1a885eff81798ff66ce01932c6a41))
+- **Toast:** added the Toast visual component ([b7b5eb0](https://github.com/PDFTron/webviewer-react-toolkit/commit/b7b5eb090f1f0323de2736ef0cdb5d401b65f328))
+- **ToastProvider:** added toast provider to access toast management ([1452669](https://github.com/PDFTron/webviewer-react-toolkit/commit/1452669447f85c48a8ace9b50ae492c94e248fdd))
+- **useToast:** added hook for accessing adding and removal of toasts ([34b7e5d](https://github.com/PDFTron/webviewer-react-toolkit/commit/34b7e5d1b60bccaaf266d929e6b43a87fb9830ec))
+
+### Bug Fixes
+
+- **Button:** now works with svg icon children ([2c40b9d](https://github.com/PDFTron/webviewer-react-toolkit/commit/2c40b9d5dc0a78ca7b51bf0d3290c8fe887828c0))
+
+### Styles
+
+- **breakpoints:** moved breakpoints to own file, removed CSS variables ([39b1c4c](https://github.com/PDFTron/webviewer-react-toolkit/commit/39b1c4ce0d69003e76b8536cf180078917f8fe9c))
+- **font:** made webkit font smoothing auto instead of antialiased ([0b2dca7](https://github.com/PDFTron/webviewer-react-toolkit/commit/0b2dca7c2537ab872351e398330c27a9d09c9b7d))
+- **padding:** renamed paddings to be more obvious as to size ([bef4c39](https://github.com/PDFTron/webviewer-react-toolkit/commit/bef4c3949b5a200f0460c45accd16dc5a13192b5))
+- **Spinner:** references new spinner mixin for animation ([477cdc1](https://github.com/PDFTron/webviewer-react-toolkit/commit/477cdc1cf990cc7d7499ca9f6041d52e4c9478fa))
+
+## [0.1.0-beta.6](https://github.com/PDFTron/webviewer-react-toolkit/compare/v0.1.0-beta.5...v0.1.0-beta.6) (2020-02-10)
+
+### Refactors
+
+- **Overlay:** correct memoization of props to avoid rerenders ([6e2879c](https://github.com/PDFTron/webviewer-react-toolkit/commit/6e2879cf82f4832e332c5d24fb487e28bce612ce))
+
+## [0.1.0-beta.5](https://github.com/PDFTron/webviewer-react-toolkit/compare/v0.1.0-beta.4...v0.1.0-beta.5) (2020-02-10)
+
+### ⚠ BREAKING CHANGES
+
+- **css:** renamed tablet-lower-boundary to breakpoint-tablet, and desktop-lower-boundary to breakpoint-desktop
+
+### Features
+
+- **Overlay:** created component ([946772c](https://github.com/PDFTron/webviewer-react-toolkit/commit/946772c606f8b21c4fbb5dfc539074cee6c23c35))
+
+### Bug Fixes
+
+- **css:** breakpoints renamed to breakpoint-\<device\> ([e0aeafc](https://github.com/PDFTron/webviewer-react-toolkit/commit/e0aeafc72f5a34e74dea764e63c039f231026908))
+
+### Styles
+
+- **mixins:** use CSS variables in mixins instead of Sass variables ([4fbe555](https://github.com/PDFTron/webviewer-react-toolkit/commit/4fbe555dbb5f62b615dc89773b96516b31804f4d))
+
 ## [0.1.0-beta.4](https://github.com/PDFTron/webviewer-react-toolkit/compare/v0.1.0-beta.3...v0.1.0-beta.4) (2020-02-06)
 
 ### ⚠ BREAKING CHANGES

.storybook/preview.tsx

@@ -1,6 +1,6 @@
 {
   "name": "@pdftron/webviewer-react-toolkit",
-  "version": "0.1.0-beta.4",
+  "version": "0.1.0-beta.8",
   "description": "A React component library for integrating with PDFTron WebViewer API.",
   "license": "SEE LICENSE IN LICENSE",
   "repository": {
@@ -13,17 +13,16 @@
     "start": "start-storybook -s public -p 6006",
     "make": "ts-node scripts/make",
     "parse-scss": "node scripts/parse_scss",
-    "lint": "eslint './src' --ext .js,.jsx,.ts,.tsx --cache",
-    "build": "yarn clean && webpack --config webpack.config.ts && scripts/build_package.sh",
     "clean": "rm -rf dist & rm -rf lib",
+    "build": "yarn clean && webpack --config webpack.config.ts && scripts/build_package.sh",
+    "lint": "eslint './src' --ext .js,.jsx,.ts,.tsx --cache",
     "test": "jest ./src --config ./jest.config.js",
+    "ci": "yarn lint && yarn test",
     "build-storybook": "build-storybook -s public",
     "deploy-storybook": "storybook-to-ghpages --out=.out",
     "commit": "commit",
-    "release": "yarn build && standard-version && git push && git push --tags && yarn publish",
-    "postrelease": "conventional-github-releaser --draft",
-    "release-next": "yarn build && standard-version --prerelease beta && git push && git push --tags && yarn publish --tag next",
-    "postrelease-next": "conventional-github-releaser --draft"
+    "release": "yarn ci && yarn build && standard-version && git push --follow-tags && yarn publish --non-interactive && yarn deploy-storybook",
+    "release-next": "yarn ci && yarn build && standard-version --prerelease beta && git push --follow-tags && yarn publish --non-interactive --tag next && yarn deploy-storybook"
   },
   "keywords": [
     "pdftron",
@@ -66,26 +65,26 @@
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@commitlint/prompt-cli": "^8.3.5",
-    "@storybook/addon-actions": "6.0.0-alpha.3",
-    "@storybook/addon-docs": "6.0.0-alpha.3",
-    "@storybook/addon-google-analytics": "6.0.0-alpha.3",
-    "@storybook/addon-info": "6.0.0-alpha.2",
-    "@storybook/addon-knobs": "6.0.0-alpha.3",
-    "@storybook/addon-links": "6.0.0-alpha.3",
-    "@storybook/addon-viewport": "6.0.0-alpha.3",
-    "@storybook/addons": "6.0.0-alpha.3",
+    "@storybook/addon-actions": "^6.0.0-alpha.9",
+    "@storybook/addon-docs": "^6.0.0-alpha.9",
+    "@storybook/addon-google-analytics": "^6.0.0-alpha.9",
+    "@storybook/addon-info": "^6.0.0-alpha.2",
+    "@storybook/addon-knobs": "^6.0.0-alpha.9",
+    "@storybook/addon-links": "^6.0.0-alpha.9",
+    "@storybook/addon-viewport": "^6.0.0-alpha.9",
+    "@storybook/addons": "^6.0.0-alpha.9",
     "@storybook/preset-typescript": "^1.2.0",
-    "@storybook/react": "6.0.0-alpha.3",
+    "@storybook/react": "^6.0.0-alpha.9",
     "@storybook/storybook-deployer": "^2.8.1",
     "@types/classnames": "^2.2.9",
     "@types/copy-webpack-plugin": "^5.0.0",
     "@types/enzyme": "^3.10.3",
-    "@types/jest": "^24.0.23",
+    "@types/jest": "^25.1.2",
     "@types/mini-css-extract-plugin": "^0.9.0",
     "@types/node": "^13.1.4",
     "@types/optimize-css-assets-webpack-plugin": "^5.0.1",
     "@types/react": "^16.9.17",
-    "@types/react-dnd-multi-backend": "^4.0.1",
+    "@types/react-dnd-multi-backend": "^5.0.0",
     "@types/react-dom": "^16.9.4",
     "@types/react-motion": "^0.0.29",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
@@ -114,7 +113,7 @@
     "eslint-plugin-react-hooks": "^2.3.0",
     "file-loader": "^5.0.2",
     "husky": "^4.0.10",
-    "jest": "^24.9.0",
+    "jest": "^25.1.0",
     "jest-svg-transformer": "^1.0.0",
     "node-sass": "^4.13.0",
     "normalize.css": "^8.0.1",
@@ -131,7 +130,7 @@
     "sinon": "^8.1.0",
     "standard-version": "^7.1.0",
     "style-loader": "^1.0.1",
-    "ts-jest": "^24.2.0",
+    "ts-jest": "^25.2.0",
     "ts-loader": "^6.2.1",
     "ts-node": "^8.5.4",
     "tsconfig-paths-webpack-plugin": "^3.2.0",

CHANGELOG.md

@@ -14,15 +14,15 @@ export interface ${componentName}Props extends ButtonHTMLAttributes<HTMLButtonEl
   someProp?: string;
 }
 
-export const ${componentName}: FC<${componentName}Props> = ({ someProp = 'Default value', className, ...buttonProps }) => {
+export const ${componentName}: FC<${componentName}Props> = ({ someProp = 'Default value', className, ...props }) => {
   const ${pascalToCamel(componentName)}Class = classnames(
     '${STYLE_PREFIX}__base ${STYLE_PREFIX}__${pascalToCamel(componentName)}',
-    { '${STYLE_PREFIX}__${pascalToCamel(componentName)}--disabled': buttonProps.disabled },
+    { '${STYLE_PREFIX}__${pascalToCamel(componentName)}--disabled': props.disabled },
     className,
   );
 
   return (
-    <button {...buttonProps} className={${pascalToCamel(componentName)}Class}>
+    <button {...props} className={${pascalToCamel(componentName)}Class}>
       {someProp}
     </button>
   );

package.json

@@ -15,15 +15,15 @@ export interface ${componentName}Props extends ButtonHTMLAttributes<HTMLButtonEl
 }
 
 export const ${componentName} = forwardRef<HTMLButtonElement, ${componentName}Props>(
-  ({ someProp = 'Default value', className, ...buttonProps }, ref) => {
+  ({ someProp = 'Default value', className, ...props }, ref) => {
     const ${pascalToCamel(componentName)}Class = classnames(
       '${STYLE_PREFIX}__base ${STYLE_PREFIX}__${pascalToCamel(componentName)}',
-      { '${STYLE_PREFIX}__${pascalToCamel(componentName)}--disabled': buttonProps.disabled },
+      { '${STYLE_PREFIX}__${pascalToCamel(componentName)}--disabled': props.disabled },
       className,
     );
 
     return (
-      <button {...buttonProps} className={${pascalToCamel(componentName)}Class} ref={ref}>
+      <button {...props} className={${pascalToCamel(componentName)}Class} ref={ref}>
         {someProp}
       </button>
     );

scripts/make/file-content/component.ts

@@ -3,9 +3,9 @@ export const componentStory = (componentName: string) =>
 import { boolean, text } from '@storybook/addon-knobs';
 import React from 'react';
 import { ${componentName} } from '../${componentName}';
-import info from './README.md';
+import readme from './README.md';
 
-export default { title: 'Components/${componentName}', component: ${componentName}, parameters: { info } };
+export default { title: 'Components/${componentName}', component: ${componentName}, parameters: { readme } };
 
 export const Basic = () => (
   <${componentName}