diff --git a/.eslintrc.json b/.eslintrc.json index 3f52c896..4163597f 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -3,7 +3,8 @@ "plugins": ["jest"], "rules": { "@typescript-eslint/interface-name-prefix": "off", - "@typescript-eslint/ban-ts-ignore": "off" + "@typescript-eslint/ban-ts-ignore": "off", + "sort-exports/sort-exports": "off" }, "env": { "jest": true diff --git a/.storybook/config.js b/.storybook/config.js index 1282d758..2bd843b9 100644 --- a/.storybook/config.js +++ b/.storybook/config.js @@ -5,7 +5,7 @@ import { themes } from '@storybook/theming' addParameters({ options: { theme: themes.normal } }) addDecorator(storyFn => ( -
+
{storyFn()}
)) diff --git a/README.md b/README.md index c88aadc7..d15f3ef9 100755 --- a/README.md +++ b/README.md @@ -68,7 +68,7 @@ const MyFacebookLoader = () => ```jsx const MyLoader = () => ( - + {/* Only SVG shapes */}     @@ -101,7 +101,7 @@ const MyFacebookLoader = () => import ContentLoader, { Rect, Circle } from 'react-content-loader/native' const MyLoader = () => ( - + @@ -115,7 +115,7 @@ const MyLoader = () => ( Defaults to `true`. Opt-out of animations with `false` -#### **`ariaLabel?: string`** - _Web only_ +#### **`title?: string`** - _Web only_ Defaults to `Loading interface...`. It's used to describe what element it is. Use ''(empty string) to remove. @@ -126,53 +126,37 @@ Defaults to an empty string. This prop is common used as: `` element. - -#### **`width?: number`** - -Defaults to `400`. It will be set in the viewbox attr in the ``. - -#### **`height?: number`** - -Defaults to `130`. It will be set in the viewbox attr in the ``. - #### **`viewBox?: string`** -Use viewBox props to set a custom viewBox value. Additionally, pass viewBox props as empty string to remove viewBox. +Use viewBox props to set a custom viewBox value, for more information about how to use it, read the article [How to Scale SVG](https://css-tricks.com/scale-svg/). #### **`gradientRatio?: number`** - _Web only_ -Defaults to `2`. Width of the animated gradient as a fraction of the viewbox width. +Defaults to `1.2`. Width of the animated gradient as a fraction of the viewbox width. #### **`rtl?: boolean`** Defaults to `false`. Content right-to-left. -#### **`preserveAspectRatio?: string`** - -Defaults to `xMidYMid meet`. Aspect ratio option of ``. See the available options [here](https://github.com/danilowoz/react-content-loader/blob/master/src/interface.ts#L7). - -#### **`primaryColor?: string`** +#### **`backgroundColor?: string`** -Defaults to `#f3f3f3` which is used as background of animation. +Defaults to `#f5f6f7` which is used as background of animation. -#### **`secondaryColor?: string`** +#### **`foregroundColor?: string`** -Defaults to `#ecebeb` which is used as the foreground of animation. +Defaults to `#eee` which is used as the foreground of animation. -#### **`primaryOpacity?: number`** - _Web only_ +#### **`backgroundOpacity?: number`** - _Web only_ Defaults to `1`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios) -#### **`secondaryOpacity?: number`** - _Web only_ +#### **`foregroundOpacity?: number`** - _Web only_ Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#safari--ios) @@ -180,7 +164,7 @@ Defaults to `1`. Animation opacity (0 = transparent, 1 = opaque) used Defaults to an empty object. -#### **`uniquekey?: string`** - _Web only_ +#### **`uniqueKey?: string`** - _Web only_ Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78). @@ -246,17 +230,14 @@ const MyLoader = () => ( -     {/* Only SVG shapes */} -      + {/* Only SVG shapes */} -      -      -    ) ``` @@ -306,21 +287,21 @@ Commit messages should follow the [commit message convention](https://con ##### **Alpha is not working: Safari / iOS** -When using `rgba` as a `primaryColor` or `secondaryColor` value, [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180), meaning that the color will be opaque. To prevent this, instead of using an `rgba` value for `primaryColor`/`secondaryColor`, use the `rgb` equivalent and move the alpha channel value to the `primaryOpacity`/`secondaryOpacity` props. +When using `rgba` as a `backgroundColor` or `foregroundColor` value, [Safari does not respect the alpha channel](https://github.com/w3c/svgwg/issues/180), meaning that the color will be opaque. To prevent this, instead of using an `rgba` value for `backgroundColor`/`foregroundColor`, use the `rgb` equivalent and move the alpha channel value to the `backgroundOpacity`/`foregroundOpacity` props. ```jsx {/* Opaque color in Safari and iOS */} +  backgroundColor="rgba(0,0,0,0.06)" +  foregroundColor="rgba(0,0,0,0.12)"> {/_ Semi-transparent color in Safari and iOS _/} +    backgroundColor="rgb(0,0,0)" +    foregroundColor="rgb(0,0,0)" +    backgroundOpacity={0.06} +    foregroundOpacity={0.12}> ``` diff --git a/docs/index.stories.tsx b/docs/index.stories.tsx index 64b31c89..ea5a4678 100644 --- a/docs/index.stories.tsx +++ b/docs/index.stories.tsx @@ -1,16 +1,40 @@ import React from 'react' +import SyntaxHighlighter from 'react-syntax-highlighter' +import { docco } from 'react-syntax-highlighter/dist/esm/styles/hljs' -import ContentLoader, { Facebook, Instagram } from '../src' +import ContentLoader, { + BulletList, + Code, + Facebook, + Instagram, + List, +} from '../src/web' export default { title: 'React Content Loader', } +const SyntaxCode = ({ children }) => { + return ( + + {children} + + ) +} + /** * Animated */ export const animate = () => { - return + return ( + <> + {''} + + + {''} + + + ) } animate.story = { @@ -22,116 +46,132 @@ animate.story = { } /** - * Aria label + * Background color */ -export const ariaLabel = () => { - return +export const backgroundColor = () => { + return ( + <> + {''} + + + ) } -ariaLabel.story = { +backgroundColor.story = { parameters: { - notes: `## \`ariaLabel?: string | boolean\` + notes: `## \`backgroundColor?: string\` - Defaults to \`Loading interface...\`. It's used to describe what element it is. Use \`false\` to remove. - `, + Defaults to \`#f5f6f7\` which is used as background of animation.`, }, } /** - * Base URL + * Foreground color */ -export const baseURL = () => { - return +export const foregroundColor = () => { + return ( + <> + {''} + + + ) } -baseURL.story = { +foregroundColor.story = { parameters: { - notes: `## \`baseUrl?: string\` + notes: `## \`foregroundColor?: string\` - Required if you're using \`\` in the \`\`. Defaults to an empty string. This prop is common used as: \`\` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). - `, + Defaults to \`#eee\` which is used as foreground of animation.`, }, } /** - * Children - */ -export const children = () => { - return ( - - - - - - ) -} - -children.story = { parameters: { notes: `## \`children?: ReactNode\`` } } - -/** - * Speed + * Background opacity */ -export const speed = () => { +export const backgroundOpacity = () => { return ( <> - - + {''} + ) } -speed.story = { +backgroundOpacity.story = { parameters: { - notes: `## \`speed?: number\` + notes: `## \`backgroundOpacity?: number\` - Defaults to \`2\`. Animation speed in seconds.`, + Defaults to \`1\`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`, }, } /** - * Interval + * Foreground opacity */ -export const interval = () => { - return +export const foregroundOpacity = () => { + return ( + <> + {''} + + + ) } -interval.story = { +foregroundOpacity.story = { parameters: { - notes: `## \`interval?: number\` + notes: `## \`foregroundOpacity?: number\` - Defaults to \`0.25\`. Interval of time between runs of the animation, as a fraction of the animation speed.`, + Defaults to \`1\`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`, }, } /** - * Width + * Base URL */ -export const width = () => { - return +export const baseURL = () => { + return ( + <> + {''} + + + ) } -width.story = { +baseURL.story = { parameters: { - notes: `## \`width?: number\` + notes: `## \`baseUrl?: string\` - Defaults to \`400\`. It will be set in the viewbox attr in the \`\`.`, + Required if you're using \`\` in the \`\`. Defaults to an empty string. This prop is common used as: \`\` which will fill the SVG attribute with the relative path. Related [#93](https://github.com/danilowoz/react-content-loader/issues/93). + `, }, } /** - * Height + * Children */ -export const height = () => { - return +export const children = () => { + return ( + <> +

Custom

+ {` + + + +`} + + + + + + +

Default

+ {``} + + + ) } -height.story = { - parameters: { - notes: `## \`height?: number\` - - Defaults to \`130\`. It will be set in the viewbox attr in the \`\`.`, - }, -} +children.story = { parameters: { notes: `## \`children?: ReactNode\`` } } /** * Gradient Ratio @@ -139,15 +179,26 @@ height.story = { export const gradientRatio = () => { return ( <> - {``} + - {``} + ) @@ -162,92 +213,117 @@ gradientRatio.story = { } /** - * RTL + * Speed */ -export const RTL = () => { - return +export const speed = () => { + return ( + <> + {``} + + {``} + + + ) } -RTL.story = { +speed.story = { parameters: { - notes: `## \`rtl?: boolean\` + notes: `## \`speed?: number\` - Defaults to \`false\`. Content right-to-left.`, + Defaults to \`1.2\`. Animation speed in seconds.`, }, } /** - * Primary color + * Interval */ -export const primaryColor = () => { - return +export const interval = () => { + return ( + <> + {``} + + + ) } -primaryColor.story = { +interval.story = { parameters: { - notes: `## \`primaryColor?: string\` + notes: `## \`interval?: number\` - Defaults to \`#f3f3f3\` which is used as background of animation.`, + Defaults to \`0.25\`. Interval of time between runs of the animation, as a fraction of the animation speed.`, }, } /** - * Secondary color + * RTL */ -export const secondaryColor = () => { - return +export const RTL = () => { + return ( + <> + {``} + + + ) } -secondaryColor.story = { +RTL.story = { parameters: { - notes: `## \`secondaryColor?: string\` + notes: `## \`rtl?: boolean\` - Defaults to \`#ecebeb\` which is used as foreground of animation.`, + Defaults to \`false\`. Content right-to-left.`, }, } /** - * Primary opacity + * Unique key */ -export const primaryOpacity = () => { - return +export const uniqueKey = () => { + return ( + <> + {``} + + + ) } -primaryOpacity.story = { +uniqueKey.story = { parameters: { - notes: `## \`primaryOpacity?: number\` - - Defaults to \`1\`. Background opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`, + notes: `## \`uniqueKey?: string\` + + Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).`, }, } /** - * Secondary opacity + * Responsive */ -export const secondaryOpacity = () => { - return -} - -secondaryOpacity.story = { - parameters: { - notes: `## \`secondaryOpacity?: number\` - - Defaults to \`1\`. Animation opacity (0 = transparent, 1 = opaque) used to solve a issue in [Safari](#bugfix-in-safari)`, - }, +export const responsive = () => { + return ( +
+ {"'"} + +
+ ) } /** - * Unique key + * Title */ -export const uniqueKey = () => { - return +export const title = () => { + return ( + <> + {``} + + + ) } -uniqueKey.story = { +title.story = { parameters: { - notes: `## \`uniquekey?: string\` - - Defaults to random unique id. Use the same value of prop key, that will solve inconsistency on the SSR, see more [here](https://github.com/danilowoz/react-content-loader/issues/78).`, + notes: `## \`title?: string | boolean\` + + Defaults to \`Loading interface...\`. It's used to describe what element it is. Use \`false\` to remove. + `, }, } @@ -255,7 +331,15 @@ uniqueKey.story = { * View box */ export const viewBox = () => { - return + return ( + <> + {''} + + + {''} + + + ) } viewBox.story = { @@ -266,3 +350,56 @@ viewBox.story = { Additionally, pass viewBox props as empty string to remove viewBox.`, }, } + +/** + * Presets + */ +export const presets = () => { + return ( + <> + {''} + + + {''} + + + {''} + + + {''} + + + {''} + + + ) +} + +/** + * Content loader vs SVG + */ +export const contentLoaderVsSVG = () => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + ) +} diff --git a/jest.web.config.js b/jest.web.config.js index 5cb71022..640482d9 100644 --- a/jest.web.config.js +++ b/jest.web.config.js @@ -5,7 +5,7 @@ module.exports = { transform: { '^.+\\.(t|j)sx?$': 'ts-jest', }, - testRegex: '/src/__tests__/.*(\\.|/)(test|spec)\\.[jt]sx?$', + testRegex: '/src/web/__tests__/.*(\\.|/)(test|spec)\\.[jt]sx?$', roots: ['/src'], moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'], globals: { diff --git a/package-lock.json b/package-lock.json index fcb6db18..1b01616d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-content-loader", - "version": "4.4.2", + "version": "5.0.0-rc4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -3686,15 +3686,6 @@ "esutils": "^2.0.2" } }, - "eslint-plugin-flowtype": { - "version": "2.50.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz", - "integrity": "sha512-X+AoKVOr7Re0ko/yEXyM5SSZ0tazc6ffdIOocp2fFUlWoDt7DV0Bz99mngOkAFLOAWjqRA5jPwqUCbrx13XoxQ==", - "dev": true, - "requires": { - "lodash": "^4.17.10" - } - }, "eslint-plugin-jest": { "version": "22.4.1", "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-22.4.1.tgz", @@ -4168,626 +4159,128 @@ "dev": true, "requires": { "locate-path": "^5.0.0", - "path-exists": "^4.0.0" - } - }, - "get-stream": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz", - "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==", - "dev": true, - "requires": { - "pump": "^3.0.0" - } - }, - "locate-path": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", - "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", - "dev": true, - "requires": { - "p-locate": "^4.1.0" - } - }, - "p-locate": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", - "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", - "dev": true, - "requires": { - "p-limit": "^2.2.0" - } - }, - "parse-json": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", - "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "error-ex": "^1.3.1", - "json-parse-better-errors": "^1.0.1", - "lines-and-columns": "^1.1.6" - } - }, - "path-exists": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", - "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", - "dev": true - }, - "read-pkg": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", - "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==", - "dev": true, - "requires": { - "@types/normalize-package-data": "^2.4.0", - "normalize-package-data": "^2.5.0", - "parse-json": "^5.0.0", - "type-fest": "^0.6.0" - }, - "dependencies": { - "type-fest": { - "version": "0.6.0", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", - "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", - "dev": true - } - } - }, - "read-pkg-up": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz", - "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==", - "dev": true, - "requires": { - "find-up": "^4.1.0", - "read-pkg": "^5.2.0", - "type-fest": "^0.8.1" - } - }, - "through2": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz", - "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==", - "dev": true, - "requires": { - "readable-stream": "2 || 3" - } - }, - "type-fest": { - "version": "0.8.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", - "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", - "dev": true - } - } - }, - "@significa/eslint-config": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@significa/eslint-config/-/eslint-config-0.0.8.tgz", - "integrity": "sha512-oZc4aSGAZw/6mlorxGPjdSGNzWIwQJoIBb/2OYztnwJgQ/IyLvpXxtP79DyvnqX+Z5N0lGFh7Ez3DhgTaK/SwA==", - "dev": true, - "requires": { - "@react-native-community/eslint-config": "0.0.5", - "@typescript-eslint/eslint-plugin": "^2.10.0", - "@typescript-eslint/parser": "^2.10.0", - "eslint": "^6.7.2", - "eslint-config-prettier": "^6.7.0", - "eslint-plugin-prettier": "^3.1.1", - "eslint-plugin-react": "^7.17.0", - "eslint-plugin-react-hooks": "^2.3.0", - "typescript": "^3.7.3" - }, - "dependencies": { - "@typescript-eslint/eslint-plugin": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.13.0.tgz", - "integrity": "sha512-QoiANo0MMGNa8ej/yX3BrW5dZj5d8HYcKiM2fyYUlezECqn8Xc7T/e4EUdiGinn8jhBrn+9X47E9TWaaup3u1g==", - "dev": true, - "requires": { - "@typescript-eslint/experimental-utils": "2.13.0", - "eslint-utils": "^1.4.3", - "functional-red-black-tree": "^1.0.1", - "regexpp": "^3.0.0", - "tsutils": "^3.17.1" - } - }, - "@typescript-eslint/experimental-utils": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.13.0.tgz", - "integrity": "sha512-+Hss3clwa6aNiC8ZjA45wEm4FutDV5HsVXPl/rDug1THq6gEtOYRGLqS3JlTk7mSnL5TbJz0LpEbzbPnKvY6sw==", - "dev": true, - "requires": { - "@types/json-schema": "^7.0.3", - "@typescript-eslint/typescript-estree": "2.13.0", - "eslint-scope": "^5.0.0" - } - }, - "@typescript-eslint/parser": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.13.0.tgz", - "integrity": "sha512-vbDeLr5QRJ1K7x5iRK8J9wuGwR9OVyd1zDAY9XFAQvAosHVjSVbDgkm328ayE6hx2QWVGhwvGaEhedcqAbfQcA==", - "dev": true, - "requires": { - "@types/eslint-visitor-keys": "^1.0.0", - "@typescript-eslint/experimental-utils": "2.13.0", - "@typescript-eslint/typescript-estree": "2.13.0", - "eslint-visitor-keys": "^1.1.0" - } - }, - "@typescript-eslint/typescript-estree": { - "version": "2.13.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.13.0.tgz", - "integrity": "sha512-t21Mg5cc8T3ADEUGwDisHLIubgXKjuNRbkpzDMLb7/JMmgCe/gHM9FaaujokLey+gwTuLF5ndSQ7/EfQqrQx4g==", - "dev": true, - "requires": { - "debug": "^4.1.1", - "eslint-visitor-keys": "^1.1.0", - "glob": "^7.1.6", - "is-glob": "^4.0.1", - "lodash.unescape": "4.0.1", - "semver": "^6.3.0", - "tsutils": "^3.17.1" - } - }, - "acorn": { - "version": "7.1.0", - "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.0.tgz", - "integrity": "sha512-kL5CuoXA/dgxlBbVrflsflzQ3PAas7RYZB52NOm/6839iVYJgKMJ3cQJD+t2i5+qFa8h3MDpEOJiS64E8JLnSQ==", - "dev": true - }, - "acorn-jsx": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.1.0.tgz", - "integrity": "sha512-tMUqwBWfLFbJbizRmEcWSLw6HnFzfdJs2sOJEOwwtVPMoH/0Ay+E703oZz78VSXZiiDcZrQ5XKjPIUQixhmgVw==", - "dev": true - }, - "ansi-escapes": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.0.tgz", - "integrity": "sha512-EiYhwo0v255HUL6eDyuLrXEkTi7WwVCLAw+SeOQ7M7qdun1z1pum4DEm/nuqIVbPvi9RPPc9k9LbyBv6H0DwVg==", - "dev": true, - "requires": { - "type-fest": "^0.8.1" - } - }, - "ansi-regex": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz", - "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==", - "dev": true - }, - "cli-cursor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-3.1.0.tgz", - "integrity": "sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==", - "dev": true, - "requires": { - "restore-cursor": "^3.1.0" - } - }, - "emoji-regex": { - "version": "8.0.0", - "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz", - "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", - "dev": true - }, - "es-abstract": { - "version": "1.17.0", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.0.tgz", - "integrity": "sha512-yYkE07YF+6SIBmg1MsJ9dlub5L48Ek7X0qz+c/CPCHS9EBXfESorzng4cJQjJW5/pB6vDF41u7F8vUhLVDqIug==", - "dev": true, - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.1.5", - "is-regex": "^1.0.5", - "object-inspect": "^1.7.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.0", - "string.prototype.trimleft": "^2.1.1", - "string.prototype.trimright": "^2.1.1" - } - }, - "es-to-primitive": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz", - "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==", - "dev": true, - "requires": { - "is-callable": "^1.1.4", - "is-date-object": "^1.0.1", - "is-symbol": "^1.0.2" - } - }, - "eslint": { - "version": "6.8.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz", - "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==", - "dev": true, - "requires": { - "@babel/code-frame": "^7.0.0", - "ajv": "^6.10.0", - "chalk": "^2.1.0", - "cross-spawn": "^6.0.5", - "debug": "^4.0.1", - "doctrine": "^3.0.0", - "eslint-scope": "^5.0.0", - "eslint-utils": "^1.4.3", - "eslint-visitor-keys": "^1.1.0", - "espree": "^6.1.2", - "esquery": "^1.0.1", - "esutils": "^2.0.2", - "file-entry-cache": "^5.0.1", - "functional-red-black-tree": "^1.0.1", - "glob-parent": "^5.0.0", - "globals": "^12.1.0", - "ignore": "^4.0.6", - "import-fresh": "^3.0.0", - "imurmurhash": "^0.1.4", - "inquirer": "^7.0.0", - "is-glob": "^4.0.0", - "js-yaml": "^3.13.1", - "json-stable-stringify-without-jsonify": "^1.0.1", - "levn": "^0.3.0", - "lodash": "^4.17.14", - "minimatch": "^3.0.4", - "mkdirp": "^0.5.1", - "natural-compare": "^1.4.0", - "optionator": "^0.8.3", - "progress": "^2.0.0", - "regexpp": "^2.0.1", - "semver": "^6.1.2", - "strip-ansi": "^5.2.0", - "strip-json-comments": "^3.0.1", - "table": "^5.2.3", - "text-table": "^0.2.0", - "v8-compile-cache": "^2.0.3" - }, - "dependencies": { - "regexpp": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz", - "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", - "dev": true - } - } - }, - "eslint-plugin-react": { - "version": "7.17.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.17.0.tgz", - "integrity": "sha512-ODB7yg6lxhBVMeiH1c7E95FLD4E/TwmFjltiU+ethv7KPdCwgiFuOZg9zNRHyufStTDLl/dEFqI2Q1VPmCd78A==", - "dev": true, - "requires": { - "array-includes": "^3.0.3", - "doctrine": "^2.1.0", - "eslint-plugin-eslint-plugin": "^2.1.0", - "has": "^1.0.3", - "jsx-ast-utils": "^2.2.3", - "object.entries": "^1.1.0", - "object.fromentries": "^2.0.1", - "object.values": "^1.1.0", - "prop-types": "^15.7.2", - "resolve": "^1.13.1" - }, - "dependencies": { - "doctrine": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz", - "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==", - "dev": true, - "requires": { - "esutils": "^2.0.2" - } - } - } - }, - "eslint-plugin-react-hooks": { - "version": "2.3.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-2.3.0.tgz", - "integrity": "sha512-gLKCa52G4ee7uXzdLiorca7JIQZPPXRAQDXV83J4bUEeUuc5pIEyZYAZ45Xnxe5IuupxEqHS+hUhSLIimK1EMw==", - "dev": true - }, - "eslint-scope": { - "version": "5.0.0", - "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", - "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==", - "dev": true, - "requires": { - "esrecurse": "^4.1.0", - "estraverse": "^4.1.1" - } - }, - "eslint-utils": { - "version": "1.4.3", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", - "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", - "dev": true, - "requires": { - "eslint-visitor-keys": "^1.1.0" - } - }, - "espree": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/espree/-/espree-6.1.2.tgz", - "integrity": "sha512-2iUPuuPP+yW1PZaMSDM9eyVf8D5P0Hi8h83YtZ5bPc/zHYjII5khoixIUTMO794NOY8F/ThF1Bo8ncZILarUTA==", - "dev": true, - "requires": { - "acorn": "^7.1.0", - "acorn-jsx": "^5.1.0", - "eslint-visitor-keys": "^1.1.0" - } - }, - "figures": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/figures/-/figures-3.1.0.tgz", - "integrity": "sha512-ravh8VRXqHuMvZt/d8GblBeqDMkdJMBdv/2KntFH+ra5MXkO7nxNKpzQ3n6QD/2da1kH0aWmNISdvhM7gl2gVg==", - "dev": true, - "requires": { - "escape-string-regexp": "^1.0.5" - } - }, - "glob": { - "version": "7.1.6", - "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", - "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", - "dev": true, - "requires": { - "fs.realpath": "^1.0.0", - "inflight": "^1.0.4", - "inherits": "2", - "minimatch": "^3.0.4", - "once": "^1.3.0", - "path-is-absolute": "^1.0.0" - } - }, - "glob-parent": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.0.tgz", - "integrity": "sha512-qjtRgnIVmOfnKUE3NJAQEdk+lKrxfw8t5ke7SXtfMTHcjsBfOfWXCQfdb30zfDoZQ2IRSIiidmjtbHZPZ++Ihw==", - "dev": true, - "requires": { - "is-glob": "^4.0.1" - } - }, - "globals": { - "version": "12.3.0", - "resolved": "https://registry.npmjs.org/globals/-/globals-12.3.0.tgz", - "integrity": "sha512-wAfjdLgFsPZsklLJvOBUBmzYE8/CwhEqSBEMRXA3qxIiNtyqvjYurAtIfDh6chlEPUfmTY3MnZh5Hfh4q0UlIw==", - "dev": true, - "requires": { - "type-fest": "^0.8.1" - } - }, - "has-symbols": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.1.tgz", - "integrity": "sha512-PLcsoqu++dmEIZB+6totNFKq/7Do+Z0u4oT0zKOJNl3lYK6vGwwu2hjHs+68OEZbTjiUE9bgOABXbP/GvrS0Kg==", - "dev": true - }, - "ignore": { - "version": "4.0.6", - "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz", - "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==", - "dev": true - }, - "inquirer": { - "version": "7.0.1", - "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.1.tgz", - "integrity": "sha512-V1FFQ3TIO15det8PijPLFR9M9baSlnRs9nL7zWu1MNVA2T9YVl9ZbrHJhYs7e9X8jeMZ3lr2JH/rdHFgNCBdYw==", - "dev": true, - "requires": { - "ansi-escapes": "^4.2.1", - "chalk": "^2.4.2", - "cli-cursor": "^3.1.0", - "cli-width": "^2.0.0", - "external-editor": "^3.0.3", - "figures": "^3.0.0", - "lodash": "^4.17.15", - "mute-stream": "0.0.8", - "run-async": "^2.2.0", - "rxjs": "^6.5.3", - "string-width": "^4.1.0", - "strip-ansi": "^5.1.0", - "through": "^2.3.6" - } - }, - "is-callable": { - "version": "1.1.5", - "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.5.tgz", - "integrity": "sha512-ESKv5sMCJB2jnHTWZ3O5itG+O128Hsus4K4Qh1h2/cgn2vbgnLSVqfV46AeJA9D5EeeLa9w81KUXMtn34zhX+Q==", - "dev": true - }, - "is-fullwidth-code-point": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz", - "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==", - "dev": true - }, - "is-regex": { - "version": "1.0.5", - "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.5.tgz", - "integrity": "sha512-vlKW17SNq44owv5AQR3Cq0bQPEb8+kF3UKZ2fiZNOWtztYE5i0CzCZxFDwO58qAOWtxdBRVO/V5Qin1wjCqFYQ==", - "dev": true, - "requires": { - "has": "^1.0.3" - } - }, - "jsx-ast-utils": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", - "integrity": "sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==", - "dev": true, - "requires": { - "array-includes": "^3.0.3", - "object.assign": "^4.1.0" - } - }, - "mimic-fn": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", - "integrity": "sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==", - "dev": true - }, - "mute-stream": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz", - "integrity": "sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==", - "dev": true - }, - "object.fromentries": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.2.tgz", - "integrity": "sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==", - "dev": true, - "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1", - "function-bind": "^1.1.1", - "has": "^1.0.3" - } - }, - "onetime": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.0.tgz", - "integrity": "sha512-5NcSkPHhwTVFIQN+TUqXoS5+dlElHXdpAWu9I0HP20YOtIi+aZ0Ct82jdlILDxjLEAWwvm+qj1m6aEtsDVmm6Q==", - "dev": true, - "requires": { - "mimic-fn": "^2.1.0" - } - }, - "optionator": { - "version": "0.8.3", - "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", - "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "path-exists": "^4.0.0" + } + }, + "get-stream": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.1.0.tgz", + "integrity": "sha512-EXr1FOzrzTfGeL0gQdeFEvOMm2mzMOglyiOXSTpPC+iAjAKftbr3jpCMWynogwYnM+eSj9sHGc6wjIcDvYiygw==", "dev": true, "requires": { - "deep-is": "~0.1.3", - "fast-levenshtein": "~2.0.6", - "levn": "~0.3.0", - "prelude-ls": "~1.1.2", - "type-check": "~0.3.2", - "word-wrap": "~1.2.3" + "pump": "^3.0.0" } }, - "regexpp": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.0.0.tgz", - "integrity": "sha512-Z+hNr7RAVWxznLPuA7DIh8UNX1j9CDrUQxskw9IrBE1Dxue2lyXT+shqEIeLUjrokxIP8CMy1WkjgG3rTsd5/g==", - "dev": true - }, - "resolve": { - "version": "1.14.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.14.1.tgz", - "integrity": "sha512-fn5Wobh4cxbLzuHaE+nphztHy43/b++4M6SsGFC2gB8uYwf0C8LcarfCz1un7UTW8OFQg9iNjZ4xpcFVGebDPg==", + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", "dev": true, "requires": { - "path-parse": "^1.0.6" + "p-locate": "^4.1.0" } }, - "restore-cursor": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-3.1.0.tgz", - "integrity": "sha512-l+sSefzHpj5qimhFSE5a8nufZYAM3sBSVMAPtYkmC+4EH2anSGaEMXSD0izRQbu9nfyQ9y5JrVmp7E8oZrUjvA==", + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", "dev": true, "requires": { - "onetime": "^5.1.0", - "signal-exit": "^3.0.2" + "p-limit": "^2.2.0" } }, - "rxjs": { - "version": "6.5.3", - "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.5.3.tgz", - "integrity": "sha512-wuYsAYYFdWTAnAaPoKGNhfpWwKZbJW+HgAJ+mImp+Epl7BG8oNWBCTyRM8gba9k4lk8BgWdoYm21Mo/RYhhbgA==", + "parse-json": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.0.0.tgz", + "integrity": "sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==", "dev": true, "requires": { - "tslib": "^1.9.0" + "@babel/code-frame": "^7.0.0", + "error-ex": "^1.3.1", + "json-parse-better-errors": "^1.0.1", + "lines-and-columns": "^1.1.6" } }, - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", "dev": true }, - "string-width": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz", - "integrity": "sha512-zUz5JD+tgqtuDjMhwIg5uFVV3dtqZ9yQJlZVfq4I01/K5Paj5UHj7VyrQOJvzawSVlKpObApbfD0Ed6yJc+1eg==", + "read-pkg": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz", + "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==", "dev": true, "requires": { - "emoji-regex": "^8.0.0", - "is-fullwidth-code-point": "^3.0.0", - "strip-ansi": "^6.0.0" + "@types/normalize-package-data": "^2.4.0", + "normalize-package-data": "^2.5.0", + "parse-json": "^5.0.0", + "type-fest": "^0.6.0" }, "dependencies": { - "strip-ansi": { - "version": "6.0.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz", - "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==", - "dev": true, - "requires": { - "ansi-regex": "^5.0.0" - } + "type-fest": { + "version": "0.6.0", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz", + "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==", + "dev": true } } }, - "strip-ansi": { - "version": "5.2.0", - "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", - "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "read-pkg-up": { + "version": "7.0.1", + "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz", + "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==", "dev": true, "requires": { - "ansi-regex": "^4.1.0" - }, - "dependencies": { - "ansi-regex": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", - "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", - "dev": true - } + "find-up": "^4.1.0", + "read-pkg": "^5.2.0", + "type-fest": "^0.8.1" } }, - "strip-json-comments": { + "through2": { "version": "3.0.1", - "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.0.1.tgz", - "integrity": "sha512-VTyMAUfdm047mwKl+u79WIdrZxtFtn+nBxHeb844XBQ9uMNTuTHdx2hc5RiAJYqwTj3wc/xe5HLSdJSkJ+WfZw==", - "dev": true + "resolved": "https://registry.npmjs.org/through2/-/through2-3.0.1.tgz", + "integrity": "sha512-M96dvTalPT3YbYLaKaCuwu+j06D/8Jfib0o/PxbVt6Amhv3dUAtW6rTV1jPgJSBG83I/e04Y6xkVdVhSRhi0ww==", + "dev": true, + "requires": { + "readable-stream": "2 || 3" + } }, "type-fest": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz", "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==", "dev": true - }, - "typescript": { - "version": "3.7.4", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.7.4.tgz", - "integrity": "sha512-A25xv5XCtarLwXpcDNZzCGvW2D1S3/bACratYBx2sax8PefsFhlYmkQicKHvpYflFS8if4zne5zT5kpJ7pzuvw==", - "dev": true } } }, + "@significa/eslint-config": { + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@significa/eslint-config/-/eslint-config-0.0.9.tgz", + "integrity": "sha512-wFsutCY6IH8jVvAoMMCOtSxFJ8zJfATdX91aJhqJ7hdCJbFye+/TXUP0+XXQ4HFqixYv91daWZCnr15NtHmvKw==", + "dev": true, + "requires": { + "@react-native-community/eslint-config": "0.0.5", + "@typescript-eslint/eslint-plugin": "^2.10.0", + "@typescript-eslint/parser": "^2.10.0", + "eslint": "^6.7.2", + "eslint-config-prettier": "^6.7.0", + "eslint-plugin-prettier": "^3.1.1", + "eslint-plugin-react": "^7.17.0", + "eslint-plugin-react-hooks": "^2.3.0", + "eslint-plugin-simple-import-sort": "^5.0.0", + "eslint-plugin-sort-exports": "^0.2.0", + "typescript": "^3.7.3" + } + }, "@significa/prettier-config": { - "version": "0.0.8", - "resolved": "https://registry.npmjs.org/@significa/prettier-config/-/prettier-config-0.0.8.tgz", - "integrity": "sha512-LqlMW9iJi3+BY5u17AQTk5MAluUphvQVJrvRyOJeXI61oyudsZdbU+TTdCw6Z4lk4ATznSJm4R6eHzvVPrh2GQ==", + "version": "0.0.9", + "resolved": "https://registry.npmjs.org/@significa/prettier-config/-/prettier-config-0.0.9.tgz", + "integrity": "sha512-tBM0EopHtAeAFW4f4dKFDHeFN/TKQwxmimOWRKHqBJC/AbVhFxE1uSFMRUMqMHhBCPQ/UX7o1UMWTcRTzvgzhA==", "dev": true, "requires": { "prettier": "^1.19.1" - }, - "dependencies": { - "prettier": { - "version": "1.19.1", - "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz", - "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==", - "dev": true - } } }, "@storybook/addon-notes": { @@ -5021,6 +4514,35 @@ "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.0.tgz", "integrity": "sha512-AHPTNKzyB+YwgDWoSOCaid9PUSEF6781vsfiK8qUz62zRR448/XgK2NtCbpiUGizbep8Lrpt0Du19PpGGZvw3Q==", "dev": true + }, + "highlight.js": { + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", + "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=", + "dev": true + }, + "lowlight": { + "version": "1.9.2", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz", + "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==", + "dev": true, + "requires": { + "fault": "^1.0.2", + "highlight.js": "~9.12.0" + } + }, + "react-syntax-highlighter": { + "version": "8.1.0", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz", + "integrity": "sha512-G2bkZxmF3VOa4atEdXIDSfwwCqjw6ZQX5znfTaHcErA1WqHIS0o6DaSCDKFPVaOMXQEB9Hf1UySYQvuJmV8CXg==", + "dev": true, + "requires": { + "babel-runtime": "^6.18.0", + "highlight.js": "~9.12.0", + "lowlight": "~1.9.1", + "prismjs": "^1.8.4", + "refractor": "^2.4.1" + } } } }, @@ -6743,6 +6265,76 @@ } } }, + "@typescript-eslint/parser": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-2.16.0.tgz", + "integrity": "sha512-+w8dMaYETM9v6il1yYYkApMSiwgnqXWJbXrA94LAWN603vXHACsZTirJduyeBOJjA9wT6xuXe5zZ1iCUzoxCfw==", + "dev": true, + "requires": { + "@types/eslint-visitor-keys": "^1.0.0", + "@typescript-eslint/experimental-utils": "2.16.0", + "@typescript-eslint/typescript-estree": "2.16.0", + "eslint-visitor-keys": "^1.1.0" + }, + "dependencies": { + "@typescript-eslint/experimental-utils": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-2.16.0.tgz", + "integrity": "sha512-bXTmAztXpqxliDKZgvWkl+5dHeRN+jqXVZ16peKKFzSXVzT6mz8kgBpHiVzEKO2NZ8OCU7dG61K9sRS/SkUUFQ==", + "dev": true, + "requires": { + "@types/json-schema": "^7.0.3", + "@typescript-eslint/typescript-estree": "2.16.0", + "eslint-scope": "^5.0.0" + } + }, + "@typescript-eslint/typescript-estree": { + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.16.0.tgz", + "integrity": "sha512-hyrCYjFHISos68Bk5KjUAXw0pP/455qq9nxqB1KkT67Pxjcfw+r6Yhcmqnp8etFL45UexCHUMrADHH7dI/m2WQ==", + "dev": true, + "requires": { + "debug": "^4.1.1", + "eslint-visitor-keys": "^1.1.0", + "glob": "^7.1.6", + "is-glob": "^4.0.1", + "lodash": "^4.17.15", + "semver": "^6.3.0", + "tsutils": "^3.17.1" + } + }, + "eslint-scope": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.0.0.tgz", + "integrity": "sha512-oYrhJW7S0bxAFDvWqzvMPRm6pcgcnWc4QnofCAqRTRfQC0JcwenzGglTtsLyIuuWFfkqDG9vz67cnttSd53djw==", + "dev": true, + "requires": { + "esrecurse": "^4.1.0", + "estraverse": "^4.1.1" + } + }, + "glob": { + "version": "7.1.6", + "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz", + "integrity": "sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==", + "dev": true, + "requires": { + "fs.realpath": "^1.0.0", + "inflight": "^1.0.4", + "inherits": "2", + "minimatch": "^3.0.4", + "once": "^1.3.0", + "path-is-absolute": "^1.0.0" + } + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + } + } + }, "@typescript-eslint/typescript-estree": { "version": "2.13.0", "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-2.13.0.tgz", @@ -10114,21 +9706,21 @@ } }, "character-entities": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.3.tgz", - "integrity": "sha512-yB4oYSAa9yLcGyTbB4ItFwHw43QHdH129IJ5R+WvxOkWlyFnR5FAaBNnUq4mcxsTVZGh28bHoeTHMKXH1wZf3w==", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-1.2.4.tgz", + "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", "dev": true }, "character-entities-legacy": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.3.tgz", - "integrity": "sha512-YAxUpPoPwxYFsslbdKkhrGnXAtXoHNgYjlBM3WMXkWGTl5RsY3QmOyhwAgL8Nxm9l5LBThXGawxKPn68y6/fww==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", + "integrity": "sha512-3Xnr+7ZFS1uxeiUDvV02wQ+QDbc55o97tIV5zHScSPJpcLm/r0DFPcoY3tYRp+VZukxuMeKgXYmsXQHO05zQeA==", "dev": true }, "character-reference-invalid": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.3.tgz", - "integrity": "sha512-VOq6PRzQBam/8Jm6XBGk2fNEnHXAdGd6go0rtd4weAGECBamHDwwCQSOT12TACIYUZegUXnV6xBXqUssijtxIg==", + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz", + "integrity": "sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==", "dev": true }, "chardet": { @@ -10470,9 +10062,9 @@ } }, "comma-separated-tokens": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz", - "integrity": "sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==", + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-1.0.8.tgz", + "integrity": "sha512-GHuDRO12Sypu2cV70d1dkA2EUmXHgntrzbpvOB+Qy+49ypNfGgFQIC2fhhXbnyrJRynDCAARsT7Ou0M6hirpfw==", "dev": true }, "command-exists": { @@ -12414,9 +12006,9 @@ } }, "eslint-config-prettier": { - "version": "6.7.0", - "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.7.0.tgz", - "integrity": "sha512-FamQVKM3jjUVwhG4hEMnbtsq7xOIDm+SY5iBPfR8gKsJoAB2IQnNF+bk1+8Fy44Nq7PPJaLvkRxILYdJWoguKQ==", + "version": "6.9.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-6.9.0.tgz", + "integrity": "sha512-k4E14HBtcLv0uqThaI6I/n1LEqROp8XaPu6SO9Z32u5NlGRC07Enu1Bh2KEFw4FNHbekH8yzbIU9kUGxbiGmCA==", "dev": true, "requires": { "get-stdin": "^6.0.0" @@ -12454,6 +12046,15 @@ "integrity": "sha512-kT3A/ZJftt28gbl/Cv04qezb/NQ1dwYIbi8lyf806XMxkus7DvOVCLIfTXMrorp322Pnoez7+zabXH29tADIDg==", "dev": true }, + "eslint-plugin-flowtype": { + "version": "2.50.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-flowtype/-/eslint-plugin-flowtype-2.50.3.tgz", + "integrity": "sha512-X+AoKVOr7Re0ko/yEXyM5SSZ0tazc6ffdIOocp2fFUlWoDt7DV0Bz99mngOkAFLOAWjqRA5jPwqUCbrx13XoxQ==", + "dev": true, + "requires": { + "lodash": "^4.17.10" + } + }, "eslint-plugin-jest": { "version": "23.1.1", "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-23.1.1.tgz", @@ -12604,6 +12205,18 @@ "integrity": "sha512-9aEPf1JEpiTjcFAmmyw8eiIXmcNZOqaZyHO77wgm0/dWfT/oxC1SrIq8ET38pMxHYrcB6Uew+TzUVsBeczF88g==", "dev": true }, + "eslint-plugin-simple-import-sort": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-simple-import-sort/-/eslint-plugin-simple-import-sort-5.0.0.tgz", + "integrity": "sha512-Zn6OppySnbwl/UonkzmMBbiFXZwe/tI9ZlSXwQek5h1FfPv3hcDTE3kG0SC70pBsKuVE8IMwZCMl0tKwcY89rw==", + "dev": true + }, + "eslint-plugin-sort-exports": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-sort-exports/-/eslint-plugin-sort-exports-0.2.0.tgz", + "integrity": "sha512-iu8qzet9q0x02CMAqc9lMpAYoDXX0S4bhglCES4Llci4TV6BmfEqBNyTp0DAQJQpwmMRLTWUdnqHh2R6kbUh+w==", + "dev": true + }, "eslint-scope": { "version": "4.0.3", "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-4.0.3.tgz", @@ -12615,12 +12228,12 @@ } }, "eslint-utils": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.2.tgz", - "integrity": "sha512-eAZS2sEUMlIeCjBeubdj45dmBHQwPHWyBcT1VSYB7o9x9WRRqKxyUoiXlRjyAwzN7YEzHJlYg0NmzDRWx6GP4Q==", + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", + "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", "dev": true, "requires": { - "eslint-visitor-keys": "^1.0.0" + "eslint-visitor-keys": "^1.1.0" } }, "eslint-visitor-keys": { @@ -13086,12 +12699,12 @@ } }, "fault": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.3.tgz", - "integrity": "sha512-sfFuP4X0hzrbGKjAUNXYvNqsZ5F6ohx/dZ9I0KQud/aiZNwg263r5L9yGB0clvXHCkzXh5W3t7RSHchggYIFmA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/fault/-/fault-1.0.4.tgz", + "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==", "dev": true, "requires": { - "format": "^0.2.2" + "format": "^0.2.0" } }, "faye-websocket": { @@ -14702,9 +14315,9 @@ "dev": true }, "highlight.js": { - "version": "9.12.0", - "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.12.0.tgz", - "integrity": "sha1-5tnb5Xy+/mB1HwKvM2GVhwyQwB4=", + "version": "9.15.10", + "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-9.15.10.tgz", + "integrity": "sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw==", "dev": true }, "hmac-drbg": { @@ -15398,15 +15011,15 @@ } }, "is-alphabetical": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.3.tgz", - "integrity": "sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-1.0.4.tgz", + "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", "dev": true }, "is-alphanumerical": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.3.tgz", - "integrity": "sha512-A1IGAPO5AW9vSh7omxIlOGwIqEvpW/TA+DksVOPM5ODuxKlZS09+TEM1E3275lJqO2oJ38vDpeAL3DCIiHE6eA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", + "integrity": "sha512-UzoZUr+XfVz3t3v4KyGEniVL9BDRoQtY7tOyrRybkVNjDFWyo1yhXNGrrBTQxp3ib9BLAWs7k2YKBQsFRkZG9A==", "dev": true, "requires": { "is-alphabetical": "^1.0.0", @@ -15482,9 +15095,9 @@ "dev": true }, "is-decimal": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.3.tgz", - "integrity": "sha512-bvLSwoDg2q6Gf+E2LEPiklHZxxiSi3XAh4Mav65mKqTfCO1HM3uBs24TjEH8iJX3bbDdLXKJXBTmGzuTUuAEjQ==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-1.0.4.tgz", + "integrity": "sha512-RGdriMmQQvZ2aqaQq3awNA6dCGtKpiDFcOzrTWrDAT2MiWrKQVPmxLGHl7Y2nNu6led0kEyoX0enY0qXYsv9zw==", "dev": true }, "is-descriptor": { @@ -15555,9 +15168,9 @@ } }, "is-hexadecimal": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.3.tgz", - "integrity": "sha512-zxQ9//Q3D/34poZf8fiy3m3XVpbQc7ren15iKqrTtLPwkPD/t3Scy9Imp63FujULGxuK0ZlCwoo5xNpktFgbOA==", + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz", + "integrity": "sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==", "dev": true }, "is-map": { @@ -16481,9 +16094,9 @@ } }, "jsx-ast-utils": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.1.tgz", - "integrity": "sha512-v3FxCcAf20DayI+uxnCuw795+oOIkVu6EnJ1+kSzhqqTZHNkTZ7B66ZgLp4oLJ/gbA64cI0B7WRoHZMSRdyVRQ==", + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-2.2.3.tgz", + "integrity": "sha512-EdIHFMm+1BPynpKOpdPqiOsvnIrInRGJD7bzPZdPkjitQEqpdpUuFpq4T0npZFKTiB3RhWFdGN+oqOJIdhDhQA==", "dev": true, "requires": { "array-includes": "^3.0.3", @@ -16957,13 +16570,13 @@ "dev": true }, "lowlight": { - "version": "1.9.2", - "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.9.2.tgz", - "integrity": "sha512-Ek18ElVCf/wF/jEm1b92gTnigh94CtBNWiZ2ad+vTgW7cTmQxUY3I98BjHK68gZAJEWmybGBZgx9qv3QxLQB/Q==", + "version": "1.12.1", + "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-1.12.1.tgz", + "integrity": "sha512-OqaVxMGIESnawn+TU/QMV5BJLbUghUfjDWPAtFqDYDmDtr4FnB+op8xM+pR7nKlauHNUHXGt0VgWatFB8voS5w==", "dev": true, "requires": { "fault": "^1.0.2", - "highlight.js": "~9.12.0" + "highlight.js": "~9.15.0" } }, "lru-cache": { @@ -20851,7 +20464,7 @@ "requires": { "execa": "^0.7.0", "lcid": "^1.0.0", - "mem": "^4.0.0" + "mem": "^1.1.0" } }, "os-tmpdir": { @@ -22379,7 +21992,7 @@ "requires": { "execa": "^0.7.0", "lcid": "^1.0.0", - "mem": "^4.0.0" + "mem": "^1.1.0" }, "dependencies": { "cross-spawn": { @@ -23203,9 +22816,9 @@ } }, "prismjs": { - "version": "1.17.1", - "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz", - "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==", + "version": "1.19.0", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.19.0.tgz", + "integrity": "sha512-IVFtbW9mCWm9eOIaEkNyo2Vl4NnEifis2GQ7/MLRG5TQe6t+4Sj9J5QWI9i3v+SS43uZBlCAOn+zYTVYQcPXJw==", "dev": true, "requires": { "clipboard": "^2.0.0" @@ -23402,12 +23015,12 @@ } }, "property-information": { - "version": "5.3.0", - "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.3.0.tgz", - "integrity": "sha512-IslotQn1hBCZDY7SaJ3zmCjVea219VTwmOk6Pu3z9haU9m4+T8GwaDubur+6NMHEU+Fjs/6/p66z6QULPkcL1w==", + "version": "5.4.0", + "resolved": "https://registry.npmjs.org/property-information/-/property-information-5.4.0.tgz", + "integrity": "sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==", "dev": true, "requires": { - "xtend": "^4.0.1" + "xtend": "^4.0.0" } }, "proxy-addr": { @@ -24287,14 +23900,14 @@ } }, "react-syntax-highlighter": { - "version": "8.1.0", - "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz", - "integrity": "sha512-G2bkZxmF3VOa4atEdXIDSfwwCqjw6ZQX5znfTaHcErA1WqHIS0o6DaSCDKFPVaOMXQEB9Hf1UySYQvuJmV8CXg==", + "version": "12.2.1", + "resolved": "https://registry.npmjs.org/react-syntax-highlighter/-/react-syntax-highlighter-12.2.1.tgz", + "integrity": "sha512-CTsp0ZWijwKRYFg9xhkWD4DSpQqE4vb2NKVMdPAkomnILSmsNBHE0n5GuI5zB+PU3ySVvXvdt9jo+ViD9XibCA==", "dev": true, "requires": { - "babel-runtime": "^6.18.0", - "highlight.js": "~9.12.0", - "lowlight": "~1.9.1", + "@babel/runtime": "^7.3.1", + "highlight.js": "~9.15.1", + "lowlight": "1.12.1", "prismjs": "^1.8.4", "refractor": "^2.4.1" } @@ -24486,14 +24099,25 @@ } }, "refractor": { - "version": "2.10.0", - "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.0.tgz", - "integrity": "sha512-maW2ClIkm9IYruuFYGTqKzj+m31heq92wlheW4h7bOstP+gf8bocmMec+j7ljLcaB1CAID85LMB3moye31jH1g==", + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/refractor/-/refractor-2.10.1.tgz", + "integrity": "sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==", "dev": true, "requires": { "hastscript": "^5.0.0", "parse-entities": "^1.1.2", "prismjs": "~1.17.0" + }, + "dependencies": { + "prismjs": { + "version": "1.17.1", + "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.17.1.tgz", + "integrity": "sha512-PrEDJAFdUGbOP6xK/UsfkC5ghJsPJviKgnQOoxaDbBjwc8op68Quupwt1DeAFoG8GImPhiKXAvvsH7wDSLsu1Q==", + "dev": true, + "requires": { + "clipboard": "^2.0.0" + } + } } }, "regenerate": { @@ -26364,9 +25988,9 @@ "dev": true }, "space-separated-tokens": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.4.tgz", - "integrity": "sha512-UyhMSmeIqZrQn2UdjYpxEkwY9JUrn8pP+7L4f91zRzOQuI8MF1FGLfYU9DKCYeLdo7LXMxwrX5zKFy7eeeVHuA==", + "version": "1.1.5", + "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz", + "integrity": "sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==", "dev": true }, "spawn-error-forwarder": { diff --git a/package.json b/package.json index 7a40e41e..fe7a4fe2 100755 --- a/package.json +++ b/package.json @@ -57,8 +57,8 @@ "@babel/runtime": "7.7.7", "@commitlint/cli": "8.2.0", "@commitlint/config-conventional": "8.2.0", - "@significa/eslint-config": "0.0.8", - "@significa/prettier-config": "0.0.8", + "@significa/eslint-config": "0.0.9", + "@significa/prettier-config": "0.0.9", "@storybook/addon-notes": "5.2.8", "@storybook/addons": "5.2.8", "@storybook/react": "5.2.8", @@ -88,6 +88,7 @@ "react-dom": "16.12.0", "react-native": "0.61.5", "react-native-svg": "9.13.6", + "react-syntax-highlighter": "^12.2.1", "react-test-renderer": "16.12.0", "rollup": "1.27.14", "rollup-plugin-copy": "3.1.0", diff --git a/rollup.config.js b/rollup.config.js index 0a22627e..35d159cb 100644 --- a/rollup.config.js +++ b/rollup.config.js @@ -41,7 +41,7 @@ const configBase = { const umdConfig = mergeAll([ configBase, { - input: 'src/index.ts', + input: 'src/web/index.ts', output: mergeAll([ configBase.output, { @@ -58,7 +58,7 @@ const umdConfig = mergeAll([ const devUmdConfig = mergeAll([ umdConfig, { - input: 'src/index.ts', + input: 'src/web/index.ts', plugins: umdConfig.plugins.concat( replace({ 'process.env.NODE_ENV': JSON.stringify('development'), @@ -70,7 +70,7 @@ const devUmdConfig = mergeAll([ const prodUmdConfig = mergeAll([ umdConfig, { - input: 'src/index.ts', + input: 'src/web/index.ts', output: mergeAll([ umdConfig.output, { file: umdConfig.output.file.replace(/\.js$/, '.min.js') }, @@ -95,7 +95,7 @@ const prodUmdConfig = mergeAll([ const webConfig = mergeAll([ configBase, { - input: 'src/index.ts', + input: 'src/web/index.ts', output: [ mergeAll([configBase.output, { ...esm, file: pkg.module }]), mergeAll([configBase.output, { ...cjs, file: pkg.main }]), diff --git a/src/Holder.tsx b/src/Holder.tsx deleted file mode 100644 index 8e925e24..00000000 --- a/src/Holder.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react' - -import Svg from './Svg' -import { IContentLoaderProps } from './' - -export const defaultProps: IContentLoaderProps = { - animate: true, - ariaLabel: 'Loading interface...', - baseUrl: '', - gradientRatio: 2, - height: 130, - interval: 0.25, - preserveAspectRatio: 'none', - primaryColor: '#f0f0f0', - primaryOpacity: 1, - rtl: false, - secondaryColor: '#e0e0e0', - secondaryOpacity: 1, - speed: 2, - style: {}, - width: 400, -} - -const InitialComponent: React.FC = props => ( - -) - -const ContentLoader = (props: IContentLoaderProps) => { - const mergedProps = { ...defaultProps, ...props } - - return ( - - {props.children || } - - ) -} - -export default ContentLoader diff --git a/src/index.ts b/src/index.ts deleted file mode 100755 index 5b56539f..00000000 --- a/src/index.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { SVGAttributes } from 'react' - -import ContentLoader from './Holder' - -export interface IContentLoaderProps extends SVGAttributes { - animate?: boolean - ariaLabel?: string - baseUrl?: string - primaryColor?: string - primaryOpacity?: number - rtl?: boolean - secondaryColor?: string - secondaryOpacity?: number - speed?: number - interval?: number - uniquekey?: string - gradientRatio?: number -} - -export { default as Facebook } from './stylized/FacebookStyle' -export { default as Instagram } from './stylized/InstagramStyle' -export { default as Code } from './stylized/CodeStyle' -export { default as List } from './stylized/ListStyle' -export { default as BulletList } from './stylized/BulletListStyle' - -export default ContentLoader diff --git a/src/native/ContentLoader.tsx b/src/native/ContentLoader.tsx new file mode 100644 index 00000000..dd2605f8 --- /dev/null +++ b/src/native/ContentLoader.tsx @@ -0,0 +1,12 @@ +import * as React from 'react' +import { Circle, Rect } from 'react-native-svg' + +import { Facebook, IContentLoaderProps } from '.' +import Svg from './Svg' + +const ContentLoader: React.FC = props => + props.children ? : + +export { Circle, Rect } + +export default ContentLoader diff --git a/src/native/Holder.tsx b/src/native/Holder.tsx deleted file mode 100644 index 648259dc..00000000 --- a/src/native/Holder.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react' -import { Circle, Rect } from 'react-native-svg' - -import Svg from './Svg' -import { IContentLoaderProps } from './' - -type DefaultProps = Pick< - Required, - | 'animate' - | 'height' - | 'preserveAspectRatio' - | 'primaryColor' - | 'rtl' - | 'secondaryColor' - | 'speed' - | 'style' - | 'width' -> - -export const defaultProps: DefaultProps = { - animate: true, - height: 130, - preserveAspectRatio: 'none', - primaryColor: '#f0f0f0', - rtl: false, - secondaryColor: '#e0e0e0', - speed: 1, - style: {}, - width: 400, -} - -const InitialComponent: React.FC = props => ( - -) - -const ContentLoader = (props: IContentLoaderProps) => { - const mergedProps = { ...defaultProps, ...props } - - return ( - - {props.children || } - - ) -} - -export { Circle, Rect } - -export default ContentLoader diff --git a/src/native/Svg.tsx b/src/native/Svg.tsx index ac0b55af..bfa1de60 100644 --- a/src/native/Svg.tsx +++ b/src/native/Svg.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react' import { Animated } from 'react-native' - import Svg, { ClipPath, Defs, @@ -9,36 +8,29 @@ import Svg, { Stop, } from 'react-native-svg' +import uid from '../shared/uid' import { IContentLoaderProps } from './' import offsetValueBound from './offsetValueBound' -import uid from '../uid' - -type RequiredIContentLoaderProps = IContentLoaderProps & - Pick< - Required, - | 'animate' - | 'height' - | 'preserveAspectRatio' - | 'primaryColor' - | 'rtl' - | 'secondaryColor' - | 'speed' - | 'style' - | 'width' - > - -interface State { - offset: number -} -class NativeSvg extends Component { +class NativeSvg extends Component { + static defaultProps = { + animate: true, + backgroundColor: '#f5f6f7', + foregroundColor: '#eee', + rtl: false, + speed: 1.2, + style: {}, + } + state = { offset: -1 } animatedValue = new Animated.Value(0) - idClip = this.props.id ? `${this.props.id}-idClip` : uid() + fixedId = this.props.uniqueKey || uid() + + idClip = `${this.fixedId}-diff` - idGradient = this.props.id ? `${this.props.id}-idGradient` : uid() + idGradient = `${this.fixedId}-animated-diff` setAnimation = () => { // Turn in seconds to keep compatible with web one @@ -76,10 +68,8 @@ class NativeSvg extends Component { render() { const { children, - height, - primaryColor, - secondaryColor, - width, + backgroundColor, + foregroundColor, rtl, style, ...props @@ -93,24 +83,17 @@ class NativeSvg extends Component { const composedStyle = Object.assign(style, rtlStyle) // Remove unnecessary keys - delete props.id + delete props.uniqueKey delete props.animate delete props.speed return ( - + @@ -125,9 +108,9 @@ class NativeSvg extends Component { x2={'100%'} y2={0} > - - - + + + diff --git a/src/native/__tests__/Holder.test.tsx b/src/native/__tests__/ContentLoader.test.tsx similarity index 71% rename from src/native/__tests__/Holder.test.tsx rename to src/native/__tests__/ContentLoader.test.tsx index 228c17ff..b301bc53 100644 --- a/src/native/__tests__/Holder.test.tsx +++ b/src/native/__tests__/ContentLoader.test.tsx @@ -2,9 +2,9 @@ import * as React from 'react' import * as renderer from 'react-test-renderer' import * as ShallowRenderer from 'react-test-renderer/shallow' -import ContentLoader, { Rect, Circle } from '../Holder' +import ContentLoader, { Circle, Rect } from '../ContentLoader' -describe('Holder', () => { +describe('ContentLoader', () => { describe('when type is custom', () => { const customWrapper = renderer.create( @@ -25,7 +25,11 @@ describe('Holder', () => { describe('Props are propagated', () => { const noPropsComponent = ShallowRenderer.createRenderer() - noPropsComponent.render() + noPropsComponent.render( + + + + ) const withPropsComponent = ShallowRenderer.createRenderer() withPropsComponent.render( @@ -33,13 +37,15 @@ describe('Holder', () => { animate={false} height={200} preserveAspectRatio="xMaxYMax meet" - primaryColor="#000" + backgroundColor="#000" rtl - secondaryColor="#fff" + foregroundColor="#fff" speed={10} style={{ marginBottom: '10px' }} width={200} - /> + > + + ) const { props: propsFromEmpty } = noPropsComponent.getRenderOutput() @@ -48,25 +54,19 @@ describe('Holder', () => { it("`speed` is a number and it's used", () => { // defaultProps expect(typeof propsFromEmpty.speed).toBe('number') - expect(propsFromEmpty.speed).toBe(1) + expect(propsFromEmpty.speed).toBe(1.2) // custom props expect(typeof propsFromFullField.speed).toBe('number') expect(propsFromFullField.speed).toBe(10) }) it("`height` is a number and it's used", () => { - // defaultProps - expect(typeof propsFromEmpty.height).toBe('number') - expect(propsFromEmpty.height).toBe(130) // custom props expect(typeof propsFromFullField.height).toBe('number') expect(propsFromFullField.height).toBe(200) }) it("`width` is a number and it's used", () => { - // defaultProps - expect(typeof propsFromEmpty.width).toBe('number') - expect(propsFromEmpty.width).toBe(400) // custom props expect(typeof propsFromFullField.width).toBe('number') expect(propsFromFullField.width).toBe(200) @@ -81,28 +81,25 @@ describe('Holder', () => { expect(propsFromFullField.animate).toBe(false) }) - it("`primaryColor` is a string and it's used", () => { + it("`backgroundColor` is a string and it's used", () => { // defaultProps - expect(typeof propsFromEmpty.primaryColor).toBe('string') - expect(propsFromEmpty.primaryColor).toBe('#f0f0f0') + expect(typeof propsFromEmpty.backgroundColor).toBe('string') + expect(propsFromEmpty.backgroundColor).toBe('#f5f6f7') // custom props - expect(typeof propsFromFullField.primaryColor).toBe('string') - expect(propsFromFullField.primaryColor).toBe('#000') + expect(typeof propsFromFullField.backgroundColor).toBe('string') + expect(propsFromFullField.backgroundColor).toBe('#000') }) - it("`secondaryColor` is a string and it's used", () => { + it("`foregroundColor` is a string and it's used", () => { // defaultProps - expect(typeof propsFromEmpty.secondaryColor).toBe('string') - expect(propsFromEmpty.secondaryColor).toBe('#e0e0e0') + expect(typeof propsFromEmpty.foregroundColor).toBe('string') + expect(propsFromEmpty.foregroundColor).toBe('#eee') // custom props - expect(typeof propsFromFullField.secondaryColor).toBe('string') - expect(propsFromFullField.secondaryColor).toBe('#fff') + expect(typeof propsFromFullField.foregroundColor).toBe('string') + expect(propsFromFullField.foregroundColor).toBe('#fff') }) it("`preserveAspectRatio` is a string and it's used", () => { - // defaultProps - expect(typeof propsFromEmpty.preserveAspectRatio).toBe('string') - expect(propsFromEmpty.preserveAspectRatio).toBe('none') // custom props expect(typeof propsFromFullField.preserveAspectRatio).toBe('string') expect(propsFromFullField.preserveAspectRatio).toBe('xMaxYMax meet') diff --git a/src/native/__tests__/Svg.test.tsx b/src/native/__tests__/Svg.test.tsx index eb87615c..16bf9818 100644 --- a/src/native/__tests__/Svg.test.tsx +++ b/src/native/__tests__/Svg.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react' +import Svg, { ClipPath, LinearGradient, Stop } from 'react-native-svg' import * as renderer from 'react-test-renderer' import ContentLoader from '..' -import Svg, { ClipPath, LinearGradient, Stop } from 'react-native-svg' interface IPredicateArgs { type: any diff --git a/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap b/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap new file mode 100644 index 00000000..3eec8f55 --- /dev/null +++ b/src/native/__tests__/__snapshots__/snapshots.test.tsx.snap @@ -0,0 +1,337 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ContentLoader snapshots renders correctly the basic version 1`] = ` + + + + + + + + + + + + + + + + + + +`; + +exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = ` + + + + + + + + + + + + + + + + + + +`; + +exports[`ContentLoader snapshots renders correctly with viewBox defined and sizes defined too 1`] = ` + + + + + + + + + + + + + + + + + + +`; + +exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = ` + + + + + + + + + + + + + + + + + + +`; diff --git a/src/native/__tests__/stylized/BulletListStyle.test.tsx b/src/native/__tests__/presets/BulletListStyle.test.tsx similarity index 73% rename from src/native/__tests__/stylized/BulletListStyle.test.tsx rename to src/native/__tests__/presets/BulletListStyle.test.tsx index 0cc56dd2..a8267081 100644 --- a/src/native/__tests__/stylized/BulletListStyle.test.tsx +++ b/src/native/__tests__/presets/BulletListStyle.test.tsx @@ -1,12 +1,13 @@ import 'react-native' + import * as React from 'react' import * as renderer from 'react-test-renderer' -import BulletListStyle from '../../stylized/BulletListStyle' +import BulletListStyle from '../../presets/BulletListStyle' describe('BulletListStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { diff --git a/src/native/__tests__/stylized/CodeStyle.test.tsx b/src/native/__tests__/presets/CodeStyle.test.tsx similarity index 76% rename from src/native/__tests__/stylized/CodeStyle.test.tsx rename to src/native/__tests__/presets/CodeStyle.test.tsx index 78c03cbe..7062076c 100644 --- a/src/native/__tests__/stylized/CodeStyle.test.tsx +++ b/src/native/__tests__/presets/CodeStyle.test.tsx @@ -1,12 +1,13 @@ import 'react-native' + import * as React from 'react' import * as renderer from 'react-test-renderer' -import CodeStyle from '../../stylized/CodeStyle' +import CodeStyle from '../../presets/CodeStyle' describe('CodeStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { diff --git a/src/native/__tests__/stylized/FacebookStyle.test.tsx b/src/native/__tests__/presets/FacebookStyle.test.tsx similarity index 74% rename from src/native/__tests__/stylized/FacebookStyle.test.tsx rename to src/native/__tests__/presets/FacebookStyle.test.tsx index a1a5dea6..5579dcb5 100644 --- a/src/native/__tests__/stylized/FacebookStyle.test.tsx +++ b/src/native/__tests__/presets/FacebookStyle.test.tsx @@ -1,12 +1,13 @@ import 'react-native' + import * as React from 'react' import * as renderer from 'react-test-renderer' -import FacebookStyle from '../../stylized/FacebookStyle' +import FacebookStyle from '../../presets/FacebookStyle' describe('FacebookStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { diff --git a/src/native/__tests__/stylized/InstagramStyle.test.tsx b/src/native/__tests__/presets/InstagramStyle.test.tsx similarity index 73% rename from src/native/__tests__/stylized/InstagramStyle.test.tsx rename to src/native/__tests__/presets/InstagramStyle.test.tsx index d1e0ff02..a876b935 100644 --- a/src/native/__tests__/stylized/InstagramStyle.test.tsx +++ b/src/native/__tests__/presets/InstagramStyle.test.tsx @@ -1,12 +1,13 @@ import 'react-native' + import * as React from 'react' import * as renderer from 'react-test-renderer' -import InstagramStyle from '../../stylized/InstagramStyle' +import InstagramStyle from '../../presets/InstagramStyle' describe('InstagramStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { diff --git a/src/native/__tests__/stylized/ListStyle.test.tsx b/src/native/__tests__/presets/ListStyle.test.tsx similarity index 76% rename from src/native/__tests__/stylized/ListStyle.test.tsx rename to src/native/__tests__/presets/ListStyle.test.tsx index 5cf1988a..b11387a3 100644 --- a/src/native/__tests__/stylized/ListStyle.test.tsx +++ b/src/native/__tests__/presets/ListStyle.test.tsx @@ -1,12 +1,13 @@ import 'react-native' + import * as React from 'react' import * as renderer from 'react-test-renderer' -import ListStyle from '../../stylized/ListStyle' +import ListStyle from '../../presets/ListStyle' describe('ListStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { diff --git a/src/native/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap similarity index 77% rename from src/native/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap rename to src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap index 93b61d9d..71b150bb 100644 --- a/src/native/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap @@ -2,23 +2,22 @@ exports[`BulletListStyle renders correctly 1`] = ` diff --git a/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap new file mode 100644 index 00000000..157e5acf --- /dev/null +++ b/src/native/__tests__/presets/__snapshots__/CodeStyle.test.tsx.snap @@ -0,0 +1,101 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`CodeStyle renders correctly 1`] = ` + + + + + + + + + + + + + + + + + + + + +`; diff --git a/src/native/__tests__/stylized/__snapshots__/FacebookStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap similarity index 53% rename from src/native/__tests__/stylized/__snapshots__/FacebookStyle.test.tsx.snap rename to src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap index 9fc1bf11..19fd1fd0 100644 --- a/src/native/__tests__/stylized/__snapshots__/FacebookStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/FacebookStyle.test.tsx.snap @@ -2,72 +2,66 @@ exports[`FacebookStyle renders correctly 1`] = ` diff --git a/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap new file mode 100644 index 00000000..3eb021f1 --- /dev/null +++ b/src/native/__tests__/presets/__snapshots__/InstagramStyle.test.tsx.snap @@ -0,0 +1,74 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InstagramStyle renders correctly 1`] = ` + + + + + + + + + + + + + + + + +`; diff --git a/src/native/__tests__/stylized/__snapshots__/ListStyle.test.tsx.snap b/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap similarity index 78% rename from src/native/__tests__/stylized/__snapshots__/ListStyle.test.tsx.snap rename to src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap index 1b7c891f..b8ae0df2 100644 --- a/src/native/__tests__/stylized/__snapshots__/ListStyle.test.tsx.snap +++ b/src/native/__tests__/presets/__snapshots__/ListStyle.test.tsx.snap @@ -2,23 +2,22 @@ exports[`ListStyle renders correctly 1`] = ` diff --git a/src/native/__tests__/snapshots.test.tsx b/src/native/__tests__/snapshots.test.tsx new file mode 100644 index 00000000..ba51ec2d --- /dev/null +++ b/src/native/__tests__/snapshots.test.tsx @@ -0,0 +1,52 @@ +import * as React from 'react' +import * as renderer from 'react-test-renderer' + +import ContentLoader from '../ContentLoader' + +describe('ContentLoader snapshots', () => { + test('renders correctly the basic version', () => { + const wrapper = renderer.create( + + ) + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) + + test('renders correctly with viewBox empty', () => { + const wrapper = renderer.create( + + ) + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) + + test('renders correctly with viewBox defined', () => { + const wrapper = renderer.create( + + ) + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) + + test('renders correctly with viewBox defined and sizes defined too', () => { + const wrapper = renderer.create( + + ) + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) +}) diff --git a/src/native/__tests__/stylized/__snapshots__/CodeStyle.test.tsx.snap b/src/native/__tests__/stylized/__snapshots__/CodeStyle.test.tsx.snap deleted file mode 100644 index bc0fafec..00000000 --- a/src/native/__tests__/stylized/__snapshots__/CodeStyle.test.tsx.snap +++ /dev/null @@ -1,118 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`CodeStyle renders correctly 1`] = ` - - - - - - - - - - - - - - - - - - - - - -`; diff --git a/src/native/__tests__/stylized/__snapshots__/InstagramStyle.test.tsx.snap b/src/native/__tests__/stylized/__snapshots__/InstagramStyle.test.tsx.snap deleted file mode 100644 index 882a9d40..00000000 --- a/src/native/__tests__/stylized/__snapshots__/InstagramStyle.test.tsx.snap +++ /dev/null @@ -1,75 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`InstagramStyle renders correctly 1`] = ` - - - - - - - - - - - - - - - - -`; diff --git a/src/native/index.ts b/src/native/index.ts index 2ffad37d..20871ecf 100644 --- a/src/native/index.ts +++ b/src/native/index.ts @@ -1,11 +1,21 @@ -import ContentLoader, { Rect, Circle } from './Holder' -export { IContentLoaderProps } from './interface' +import { SvgProps } from 'react-native-svg' -export { default as Facebook } from './stylized/FacebookStyle' -export { default as Instagram } from './stylized/InstagramStyle' -export { default as Code } from './stylized/CodeStyle' -export { default as List } from './stylized/ListStyle' -export { default as BulletList } from './stylized/BulletListStyle' +import ContentLoader from './ContentLoader' -export { Rect, Circle } +export interface IContentLoaderProps extends SvgProps { + animate?: boolean + backgroundColor?: string + foregroundColor?: string + rtl?: boolean + speed?: number + uniqueKey?: string +} + +export { default as Facebook } from './presets/FacebookStyle' +export { default as Instagram } from './presets/InstagramStyle' +export { default as Code } from './presets/CodeStyle' +export { default as List } from './presets/ListStyle' +export { default as BulletList } from './presets/BulletListStyle' + +export { Circle, Rect } from './ContentLoader' export default ContentLoader diff --git a/src/native/interface.ts b/src/native/interface.ts deleted file mode 100644 index e9cce831..00000000 --- a/src/native/interface.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { SvgProps } from 'react-native-svg' - -export interface IContentLoaderProps extends SvgProps { - animate?: boolean - children?: React.ReactNode - id?: string - primaryColor?: string - rtl?: boolean - secondaryColor?: string - speed?: number -} diff --git a/src/native/stylized/BulletListStyle.tsx b/src/native/presets/BulletListStyle.tsx similarity index 74% rename from src/native/stylized/BulletListStyle.tsx rename to src/native/presets/BulletListStyle.tsx index a350e5a1..d2a8e9aa 100644 --- a/src/native/stylized/BulletListStyle.tsx +++ b/src/native/presets/BulletListStyle.tsx @@ -1,10 +1,10 @@ import * as React from 'react' -import Holder, { Rect, Circle } from '../Holder' -import { IContentLoaderProps } from '../' +import { IContentLoaderProps } from '..' +import ContentLoader, { Circle, Rect } from '../ContentLoader' const ReactContentLoaderBulletList: React.FC = props => ( - + @@ -13,7 +13,7 @@ const ReactContentLoaderBulletList: React.FC = props => ( - + ) export default ReactContentLoaderBulletList diff --git a/src/native/presets/CodeStyle.tsx b/src/native/presets/CodeStyle.tsx new file mode 100644 index 00000000..7b0ec4d8 --- /dev/null +++ b/src/native/presets/CodeStyle.tsx @@ -0,0 +1,19 @@ +import * as React from 'react' + +import { IContentLoaderProps } from '..' +import ContentLoader, { Rect } from '../ContentLoader' + +const ReactContentLoaderCode: React.FC = props => ( + + + + + + + + + + +) + +export default ReactContentLoaderCode diff --git a/src/native/presets/FacebookStyle.tsx b/src/native/presets/FacebookStyle.tsx new file mode 100644 index 00000000..22047007 --- /dev/null +++ b/src/native/presets/FacebookStyle.tsx @@ -0,0 +1,17 @@ +import * as React from 'react' + +import { IContentLoaderProps } from '..' +import ContentLoader, { Circle, Rect } from '../ContentLoader' + +const ReactContentLoaderFacebook: React.FC = props => ( + + + + + + + + +) + +export default ReactContentLoaderFacebook diff --git a/src/native/presets/InstagramStyle.tsx b/src/native/presets/InstagramStyle.tsx new file mode 100644 index 00000000..33c618f6 --- /dev/null +++ b/src/native/presets/InstagramStyle.tsx @@ -0,0 +1,15 @@ +import * as React from 'react' + +import { IContentLoaderProps } from '..' +import ContentLoader, { Circle, Rect } from '../ContentLoader' + +const ReactContentLoaderInstagram: React.FC = props => ( + + + + + + +) + +export default ReactContentLoaderInstagram diff --git a/src/native/stylized/ListStyle.tsx b/src/native/presets/ListStyle.tsx similarity index 74% rename from src/native/stylized/ListStyle.tsx rename to src/native/presets/ListStyle.tsx index 3c045d6f..9a6f495e 100644 --- a/src/native/stylized/ListStyle.tsx +++ b/src/native/presets/ListStyle.tsx @@ -1,17 +1,17 @@ import * as React from 'react' -import Holder, { Rect } from '../Holder' -import { IContentLoaderProps } from '../' +import { IContentLoaderProps } from '..' +import ContentLoader, { Rect } from '../ContentLoader' const ReactContentLoaderListStyle: React.FC = props => ( - + - + ) export default ReactContentLoaderListStyle diff --git a/src/native/stylized/CodeStyle.tsx b/src/native/stylized/CodeStyle.tsx deleted file mode 100644 index d7aff5f2..00000000 --- a/src/native/stylized/CodeStyle.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react' - -import Holder, { Rect } from '../Holder' -import { IContentLoaderProps } from '../' - -const ReactContentLoaderCode: React.FC = props => ( - - - - - - - - - - - - - - -) - -export default ReactContentLoaderCode diff --git a/src/native/stylized/FacebookStyle.tsx b/src/native/stylized/FacebookStyle.tsx deleted file mode 100644 index b9c1eb27..00000000 --- a/src/native/stylized/FacebookStyle.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react' - -import Holder, { Rect, Circle } from '../Holder' -import { IContentLoaderProps } from '../' - -const ReactContentLoaderFacebook: React.FC = props => ( - - - - - - - - -) - -export default ReactContentLoaderFacebook diff --git a/src/native/stylized/InstagramStyle.tsx b/src/native/stylized/InstagramStyle.tsx deleted file mode 100644 index 9a1d7df6..00000000 --- a/src/native/stylized/InstagramStyle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react' - -import Holder, { Rect, Circle } from '../Holder' -import { IContentLoaderProps } from '../' - -const ReactContentLoaderInstagram: React.FC = props => ( - - - - - - - -) - -export default ReactContentLoaderInstagram diff --git a/src/uid.ts b/src/shared/uid.ts similarity index 77% rename from src/uid.ts rename to src/shared/uid.ts index 93d6a34e..f6f4979a 100644 --- a/src/uid.ts +++ b/src/shared/uid.ts @@ -1,4 +1,4 @@ export default (): string => Math.random() .toString(36) - .substring(2) + .substring(6) diff --git a/src/stylized/CodeStyle.tsx b/src/stylized/CodeStyle.tsx deleted file mode 100644 index 13a9a3cd..00000000 --- a/src/stylized/CodeStyle.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react' - -import Holder from '../Holder' -import { IContentLoaderProps } from '../' - -const ReactContentLoaderCode: React.FC = props => ( - - - - - - - - - - - - - - -) - -export default ReactContentLoaderCode diff --git a/src/stylized/FacebookStyle.tsx b/src/stylized/FacebookStyle.tsx deleted file mode 100644 index 35f58e1b..00000000 --- a/src/stylized/FacebookStyle.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react' - -import Holder from '../Holder' -import { IContentLoaderProps } from '../' - -const ReactContentLoaderFacebook: React.FC = props => ( - - - - - - - - -) - -export default ReactContentLoaderFacebook diff --git a/src/stylized/InstagramStyle.tsx b/src/stylized/InstagramStyle.tsx deleted file mode 100644 index ad725471..00000000 --- a/src/stylized/InstagramStyle.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import * as React from 'react' - -import Holder from '../Holder' -import { IContentLoaderProps } from '../' - -const ReactContentLoaderInstagram: React.FC = props => ( - - - - - - - -) - -export default ReactContentLoaderInstagram diff --git a/src/web/ContentLoader.tsx b/src/web/ContentLoader.tsx new file mode 100644 index 00000000..fb1719b1 --- /dev/null +++ b/src/web/ContentLoader.tsx @@ -0,0 +1,9 @@ +import * as React from 'react' + +import { Facebook, IContentLoaderProps } from '.' +import Svg from './Svg' + +const ContentLoader: React.FC = props => + props.children ? : + +export default ContentLoader diff --git a/src/Svg.tsx b/src/web/Svg.tsx similarity index 60% rename from src/Svg.tsx rename to src/web/Svg.tsx index 008ce39b..c46c17ab 100644 --- a/src/Svg.tsx +++ b/src/web/Svg.tsx @@ -1,63 +1,60 @@ import * as React from 'react' +import uid from '../shared/uid' import { IContentLoaderProps } from './' -import uid from './uid' -export default ({ +const SVG: React.FC = ({ + animate, + backgroundColor, + backgroundOpacity, + baseUrl, + children, + foregroundColor, + foregroundOpacity, + gradientRatio, + uniqueKey, + interval, rtl, speed, - interval, style, - width, - height, - baseUrl, - gradientRatio, - animate, - ariaLabel, - children, - className, - uniquekey, - primaryColor, - primaryOpacity, - secondaryColor, - secondaryOpacity, - preserveAspectRatio, + title, ...props -}: IContentLoaderProps) => { - const idClip = uniquekey ? `${uniquekey}-idClip` : uid() - const idGradient = uniquekey ? `${uniquekey}-idGradient` : uid() - const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : {} +}) => { + const fixedId = uniqueKey || uid() + const idClip = `${fixedId}-diff` + const idGradient = `${fixedId}-animated-diff` + const idAria = `${fixedId}-aria` + + const rtlStyle = rtl ? { transform: 'scaleX(-1)' } : null const keyTimes = `0; ${interval}; 1` const dur = `${speed}s` return ( - {ariaLabel ? {ariaLabel} : null} + {title ? {title} : null} - + {children} {animate && ( {animate && ( {animate && ( ) } + +SVG.defaultProps = { + animate: true, + backgroundColor: '#f5f6f7', + backgroundOpacity: 1, + baseUrl: '', + foregroundColor: '#eee', + foregroundOpacity: 1, + gradientRatio: 2, + id: null, + interval: 0.25, + rtl: false, + speed: 1.2, + style: {}, + title: 'Loading...', +} + +export default SVG diff --git a/src/__tests__/Holder.test.tsx b/src/web/__tests__/ContentLoader.test.tsx similarity index 65% rename from src/__tests__/Holder.test.tsx rename to src/web/__tests__/ContentLoader.test.tsx index 55f33595..184fc33b 100644 --- a/src/__tests__/Holder.test.tsx +++ b/src/web/__tests__/ContentLoader.test.tsx @@ -2,9 +2,9 @@ import * as React from 'react' import * as renderer from 'react-test-renderer' import * as ShallowRenderer from 'react-test-renderer/shallow' -import ContentLoader from '../Holder' +import ContentLoader from '../ContentLoader' -describe('Holder', () => { +describe('ContentLoader', () => { describe('when type is custom', () => { const customWrapper = renderer.create( @@ -25,28 +25,34 @@ describe('Holder', () => { describe('Props are propagated', () => { const noPropsComponent = ShallowRenderer.createRenderer() - noPropsComponent.render() + noPropsComponent.render( + + + + ) const withPropsComponent = ShallowRenderer.createRenderer() withPropsComponent.render( + > + + ) const { props: propsFromEmpty } = noPropsComponent.getRenderOutput() @@ -55,7 +61,7 @@ describe('Holder', () => { it("`speed` is a number and it's used", () => { // defaultProps expect(typeof propsFromEmpty.speed).toBe('number') - expect(propsFromEmpty.speed).toBe(2) + expect(propsFromEmpty.speed).toBe(1.2) // custom props expect(typeof propsFromFullfield.speed).toBe('number') expect(propsFromFullfield.speed).toBe(10) @@ -71,18 +77,12 @@ describe('Holder', () => { }) it("`height` is a number and it's used", () => { - // defaultProps - expect(typeof propsFromEmpty.height).toBe('number') - expect(propsFromEmpty.height).toBe(130) // custom props expect(typeof propsFromFullfield.height).toBe('number') expect(propsFromFullfield.height).toBe(200) }) it("`width` is a number and it's used", () => { - // defaultProps - expect(typeof propsFromEmpty.width).toBe('number') - expect(propsFromEmpty.width).toBe(400) // custom props expect(typeof propsFromFullfield.width).toBe('number') expect(propsFromFullfield.width).toBe(200) @@ -106,46 +106,43 @@ describe('Holder', () => { expect(propsFromFullfield.animate).toBe(false) }) - it("`primaryColor` is a string and it's used", () => { + it("`backgroundColor` is a string and it's used", () => { // defaultProps - expect(typeof propsFromEmpty.primaryColor).toBe('string') - expect(propsFromEmpty.primaryColor).toBe('#f0f0f0') + expect(typeof propsFromEmpty.backgroundColor).toBe('string') + expect(propsFromEmpty.backgroundColor).toBe('#f5f6f7') // custom props - expect(typeof propsFromFullfield.primaryColor).toBe('string') - expect(propsFromFullfield.primaryColor).toBe('#000') + expect(typeof propsFromFullfield.backgroundColor).toBe('string') + expect(propsFromFullfield.backgroundColor).toBe('#000') }) - it("`secondaryColor` is a string and it's used", () => { + it("`foregroundColor` is a string and it's used", () => { // defaultProps - expect(typeof propsFromEmpty.secondaryColor).toBe('string') - expect(propsFromEmpty.secondaryColor).toBe('#e0e0e0') + expect(typeof propsFromEmpty.foregroundColor).toBe('string') + expect(propsFromEmpty.foregroundColor).toBe('#eee') // custom props - expect(typeof propsFromFullfield.secondaryColor).toBe('string') - expect(propsFromFullfield.secondaryColor).toBe('#fff') + expect(typeof propsFromFullfield.foregroundColor).toBe('string') + expect(propsFromFullfield.foregroundColor).toBe('#fff') }) - it("`primaryOpacity` is a number and it's used", () => { + it("`backgroundOpacity` is a number and it's used", () => { // defaultProps - expect(typeof propsFromEmpty.primaryOpacity).toBe('number') - expect(propsFromEmpty.primaryOpacity).toBe(1) + expect(typeof propsFromEmpty.backgroundOpacity).toBe('number') + expect(propsFromEmpty.backgroundOpacity).toBe(1) // custom props - expect(typeof propsFromFullfield.primaryOpacity).toBe('number') - expect(propsFromFullfield.primaryOpacity).toBe(0.06) + expect(typeof propsFromFullfield.backgroundOpacity).toBe('number') + expect(propsFromFullfield.backgroundOpacity).toBe(0.06) }) - it("`secondaryOpacity` is a number and it's used", () => { + it("`foregroundOpacity` is a number and it's used", () => { // defaultProps - expect(typeof propsFromEmpty.secondaryOpacity).toBe('number') - expect(propsFromEmpty.secondaryOpacity).toBe(1) + expect(typeof propsFromEmpty.foregroundOpacity).toBe('number') + expect(propsFromEmpty.foregroundOpacity).toBe(1) // custom props - expect(typeof propsFromFullfield.secondaryOpacity).toBe('number') - expect(propsFromFullfield.secondaryOpacity).toBe(0.12) + expect(typeof propsFromFullfield.foregroundOpacity).toBe('number') + expect(propsFromFullfield.foregroundOpacity).toBe(0.12) }) it("`preserveAspectRatio` is a string and it's used", () => { - // defaultProps - expect(typeof propsFromEmpty.preserveAspectRatio).toBe('string') - expect(propsFromEmpty.preserveAspectRatio).toBe('none') // custom props expect(typeof propsFromFullfield.preserveAspectRatio).toBe('string') expect(propsFromFullfield.preserveAspectRatio).toBe('xMaxYMax meet') @@ -167,13 +164,13 @@ describe('Holder', () => { expect(propsFromFullfield.rtl).toBe(true) }) - it("`ariaLabel` is a string and it's used", () => { + it("`title` is a string and it's used", () => { // defaultProps - expect(typeof propsFromEmpty.ariaLabel).toBe('string') - expect(propsFromEmpty.ariaLabel).toBe('Loading interface...') + expect(typeof propsFromEmpty.title).toBe('string') + expect(propsFromEmpty.title).toBe('Loading...') // custom props - expect(typeof propsFromFullfield.ariaLabel).toBe('string') - expect(propsFromFullfield.ariaLabel).toBe('My custom loading title') + expect(typeof propsFromFullfield.title).toBe('string') + expect(propsFromFullfield.title).toBe('My custom loading title') }) it("`baseUrl` is a string and it's used", () => { @@ -184,5 +181,14 @@ describe('Holder', () => { expect(typeof propsFromFullfield.baseUrl).toBe('string') expect(propsFromFullfield.baseUrl).toBe('/mypage') }) + + it("`uniqueKey` is a string and it's used", () => { + // defaultProps + expect(typeof propsFromEmpty.uniqueKey).toBe('undefined') + expect(propsFromEmpty.uniqueKey).toBe(undefined) + // custom props + expect(typeof propsFromFullfield.uniqueKey).toBe('string') + expect(propsFromFullfield.uniqueKey).toBe('my-id') + }) }) }) diff --git a/src/__tests__/Svg.test.tsx b/src/web/__tests__/Svg.test.tsx similarity index 77% rename from src/__tests__/Svg.test.tsx rename to src/web/__tests__/Svg.test.tsx index b9939dca..4d9d89c2 100644 --- a/src/__tests__/Svg.test.tsx +++ b/src/web/__tests__/Svg.test.tsx @@ -3,14 +3,14 @@ import * as renderer from 'react-test-renderer' import Svg from '..' -interface IpredicateArgs { +interface PredicateArgs { type: any props: any } describe('Svg', () => { const wrapper = renderer.create().root - const predicateRectClipPath = ({ type, props }: IpredicateArgs) => + const predicateRectClipPath = ({ type, props }: PredicateArgs) => type === 'rect' && props.clipPath const partsOfComponent = { allLinearGradient: wrapper.findAllByType('linearGradient'), @@ -23,7 +23,7 @@ describe('Svg', () => { title: wrapper.findByType('title'), } - it('baseUrl is used correctly', () => { + it('`baseUrl` is used correctly', () => { const baseUrl = '/page-path' const wrapperWithBaseUrl = renderer.create().root @@ -76,22 +76,22 @@ describe('Svg', () => { }) describe('unique key', () => { - it('`uniquekey` does not generate undefined `id` values for SVG', () => { + it('`id` does not generate undefined `id` values for SVG', () => { const { clipPath, linearGradient } = partsOfComponent expect(clipPath.props.id).not.toBe(undefined) expect(linearGradient.props.id).not.toBe(undefined) }) - it('custom `uniquekey` is used', () => { - const uniquekey = 'my-unique-key' - const wrapperUniqueKey = renderer.create() + it('custom `id` is used', () => { + const id = 'my-unique-key' + const wrapperid = renderer.create() - const clipPath = wrapperUniqueKey.root.findByType('clipPath') - const linearGradient = wrapperUniqueKey.root.findByType('linearGradient') + const clipPath = wrapperid.root.findByType('clipPath') + const linearGradient = wrapperid.root.findByType('linearGradient') - expect(clipPath.props.id).toBe(`${uniquekey}-idClip`) - expect(linearGradient.props.id).toBe(`${uniquekey}-idGradient`) + expect(clipPath.props.id).toBe(`${id}-diff`) + expect(linearGradient.props.id).toBe(`${id}-animated-diff`) }) it('render two components with different ids', () => { @@ -123,18 +123,26 @@ describe('Svg', () => { }) describe('a11y', () => { - it('svg has aria-label', () => { + it('svg has aria-labelledby', () => { const { svg } = partsOfComponent - expect(typeof svg.props['aria-label']).toBe('string') - expect(svg.props['aria-label'].length).not.toBe(0) + expect(typeof svg.props['aria-labelledby']).toBe('string') + expect(svg.props['aria-labelledby'].length).not.toBe(0) + }) + + it('aria-labelledby point to title', () => { + const { svg } = partsOfComponent + const ariaId = svg.props['aria-labelledby'] + + const title = wrapper.findByType('title') + expect(title.props.id).toBe(ariaId) }) it('svg has role', () => { const { svg } = partsOfComponent - const role = 'role' - expect(typeof svg.props[role]).toBe('string') - expect(svg.props[role]).toBe('img') + + expect(typeof svg.props['role']).toBe('string') + expect(svg.props['role']).toBe('img') }) it('svg has a title', () => { diff --git a/src/web/__tests__/__snapshots__/snapshots.test.tsx.snap b/src/web/__tests__/__snapshots__/snapshots.test.tsx.snap new file mode 100644 index 00000000..9901bcfc --- /dev/null +++ b/src/web/__tests__/__snapshots__/snapshots.test.tsx.snap @@ -0,0 +1,483 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ContentLoader snapshots renders correctly the basic version 1`] = ` + + + Loading... + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`ContentLoader snapshots renders correctly with viewBox defined 1`] = ` + + + Loading... + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`ContentLoader snapshots renders correctly with viewBox defined and sizes defined too 1`] = ` + + + Loading... + + + + + + + + + + + + + + + + + + + + + + + + +`; + +exports[`ContentLoader snapshots renders correctly with viewBox empty 1`] = ` + + + Loading... + + + + + + + + + + + + + + + + + + + + + + + + +`; diff --git a/src/__tests__/dependency.test.tsx b/src/web/__tests__/dependency.test.tsx similarity index 81% rename from src/__tests__/dependency.test.tsx rename to src/web/__tests__/dependency.test.tsx index c9c08801..67d03dd6 100644 --- a/src/__tests__/dependency.test.tsx +++ b/src/web/__tests__/dependency.test.tsx @@ -1,5 +1,5 @@ -import pkg from '../../package.json' -import pkgNative from '../../src/native/package.json' +import pkg from '../../../package.json' +import pkgNative from '../../../src/native/package.json' describe('web/package.json', () => { it(`doesn't have any dependency for web version`, () => { diff --git a/src/__tests__/index.test.tsx b/src/web/__tests__/index.test.tsx similarity index 100% rename from src/__tests__/index.test.tsx rename to src/web/__tests__/index.test.tsx diff --git a/src/__tests__/stylized/BulletListStyle.test.tsx b/src/web/__tests__/presets/BulletListStyle.test.tsx similarity index 66% rename from src/__tests__/stylized/BulletListStyle.test.tsx rename to src/web/__tests__/presets/BulletListStyle.test.tsx index 76c86be8..5944d79d 100644 --- a/src/__tests__/stylized/BulletListStyle.test.tsx +++ b/src/web/__tests__/presets/BulletListStyle.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import * as renderer from 'react-test-renderer' -import BulletListStyle from '../../stylized/BulletListStyle' +import BulletListStyle from '../../presets/BulletListStyle' describe('BulletListStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { @@ -16,6 +16,6 @@ describe('BulletListStyle', () => { test('props are propagated ', () => { expect(wrapper.root.props.speed).toEqual(20) - expect(wrapper.root.props.uniquekey).toEqual('BulletListStyle') + expect(wrapper.root.props.uniqueKey).toEqual('BulletListStyle') }) }) diff --git a/src/__tests__/stylized/CodeStyle.test.tsx b/src/web/__tests__/presets/CodeStyle.test.tsx similarity index 68% rename from src/__tests__/stylized/CodeStyle.test.tsx rename to src/web/__tests__/presets/CodeStyle.test.tsx index 55c3b571..a9f3be54 100644 --- a/src/__tests__/stylized/CodeStyle.test.tsx +++ b/src/web/__tests__/presets/CodeStyle.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import * as renderer from 'react-test-renderer' -import CodeStyle from '../../stylized/CodeStyle' +import CodeStyle from '../../presets/CodeStyle' describe('CodeStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { @@ -16,6 +16,6 @@ describe('CodeStyle', () => { test('props are propagated ', () => { expect(wrapper.root.props.speed).toEqual(20) - expect(wrapper.root.props.uniquekey).toEqual('CodeStyle') + expect(wrapper.root.props.uniqueKey).toEqual('CodeStyle') }) }) diff --git a/src/__tests__/stylized/FacebookStyle.test.tsx b/src/web/__tests__/presets/FacebookStyle.test.tsx similarity index 67% rename from src/__tests__/stylized/FacebookStyle.test.tsx rename to src/web/__tests__/presets/FacebookStyle.test.tsx index f4141d31..919d153c 100644 --- a/src/__tests__/stylized/FacebookStyle.test.tsx +++ b/src/web/__tests__/presets/FacebookStyle.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import * as renderer from 'react-test-renderer' -import FacebookStyle from '../../stylized/FacebookStyle' +import FacebookStyle from '../../presets/FacebookStyle' describe('FacebookStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { @@ -16,6 +16,6 @@ describe('FacebookStyle', () => { test('props are propagated ', () => { expect(wrapper.root.props.speed).toEqual(20) - expect(wrapper.root.props.uniquekey).toEqual('FacebookStyle') + expect(wrapper.root.props.uniqueKey).toEqual('FacebookStyle') }) }) diff --git a/src/__tests__/stylized/InstagramStyle.test.tsx b/src/web/__tests__/presets/InstagramStyle.test.tsx similarity index 66% rename from src/__tests__/stylized/InstagramStyle.test.tsx rename to src/web/__tests__/presets/InstagramStyle.test.tsx index c2554841..58763cfc 100644 --- a/src/__tests__/stylized/InstagramStyle.test.tsx +++ b/src/web/__tests__/presets/InstagramStyle.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import * as renderer from 'react-test-renderer' -import InstagramStyle from '../../stylized/InstagramStyle' +import InstagramStyle from '../../presets/InstagramStyle' describe('InstagramStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { @@ -16,6 +16,6 @@ describe('InstagramStyle', () => { test('props are propagated ', () => { expect(wrapper.root.props.speed).toEqual(20) - expect(wrapper.root.props.uniquekey).toEqual('InstagramStyle') + expect(wrapper.root.props.uniqueKey).toEqual('InstagramStyle') }) }) diff --git a/src/__tests__/stylized/ListStyle.test.tsx b/src/web/__tests__/presets/ListStyle.test.tsx similarity index 68% rename from src/__tests__/stylized/ListStyle.test.tsx rename to src/web/__tests__/presets/ListStyle.test.tsx index e76a6716..e9a3336a 100644 --- a/src/__tests__/stylized/ListStyle.test.tsx +++ b/src/web/__tests__/presets/ListStyle.test.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import * as renderer from 'react-test-renderer' -import ListStyle from '../../stylized/ListStyle' +import ListStyle from '../../presets/ListStyle' describe('ListStyle', () => { const wrapper = renderer.create( - + ) test('renders correctly', () => { @@ -16,6 +16,6 @@ describe('ListStyle', () => { test('props are propagated ', () => { expect(wrapper.root.props.speed).toEqual(20) - expect(wrapper.root.props.uniquekey).toEqual('ListStyle') + expect(wrapper.root.props.uniqueKey).toEqual('ListStyle') }) }) diff --git a/src/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap b/src/web/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap similarity index 79% rename from src/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap rename to src/web/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap index 59034d01..bca25ccb 100644 --- a/src/__tests__/stylized/__snapshots__/BulletListStyle.test.tsx.snap +++ b/src/web/__tests__/presets/__snapshots__/BulletListStyle.test.tsx.snap @@ -2,30 +2,35 @@ exports[`BulletListStyle renders correctly 1`] = ` - - Loading interface... + + Loading... - + - - Loading interface... + <title + id="CodeStyle-aria" + > + Loading... - + - - - Loading interface... + <title + id="FacebookStyle-aria" + > + Loading... - + - - Loading interface... + <title + id="InstagramStyle-aria" + > + Loading... - + - - Loading interface... + <title + id="ListStyle-aria" + > + Loading... - + { + test('renders correctly the basic version', () => { + const wrapper = renderer.create() + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) + + test('renders correctly with viewBox empty', () => { + const wrapper = renderer.create( + + ) + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) + + test('renders correctly with viewBox defined', () => { + const wrapper = renderer.create( + + ) + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) + + test('renders correctly with viewBox defined and sizes defined too', () => { + const wrapper = renderer.create( + + ) + const tree = wrapper.toJSON() + + expect(tree).toMatchSnapshot() + }) +}) diff --git a/src/__tests__/uid.test.tsx b/src/web/__tests__/uid.test.tsx similarity index 93% rename from src/__tests__/uid.test.tsx rename to src/web/__tests__/uid.test.tsx index 656c201d..86fbc564 100644 --- a/src/__tests__/uid.test.tsx +++ b/src/web/__tests__/uid.test.tsx @@ -1,4 +1,4 @@ -import uid from '../uid' +import uid from '../../shared/uid' describe('unique id', () => { const options = 100 diff --git a/src/web/index.ts b/src/web/index.ts new file mode 100755 index 00000000..9a8c0923 --- /dev/null +++ b/src/web/index.ts @@ -0,0 +1,26 @@ +import { SVGAttributes } from 'react' + +import ContentLoader from './ContentLoader' + +export interface IContentLoaderProps extends SVGAttributes { + animate?: boolean + backgroundColor?: string + backgroundOpacity?: number + baseUrl?: string + foregroundColor?: string + foregroundOpacity?: number + gradientRatio?: number + interval?: number + rtl?: boolean + speed?: number + title?: string + uniqueKey?: string +} + +export { default as Facebook } from './presets/FacebookStyle' +export { default as Instagram } from './presets/InstagramStyle' +export { default as Code } from './presets/CodeStyle' +export { default as List } from './presets/ListStyle' +export { default as BulletList } from './presets/BulletListStyle' + +export default ContentLoader diff --git a/src/stylized/BulletListStyle.tsx b/src/web/presets/BulletListStyle.tsx similarity index 78% rename from src/stylized/BulletListStyle.tsx rename to src/web/presets/BulletListStyle.tsx index a7d5bb92..df9188c1 100644 --- a/src/stylized/BulletListStyle.tsx +++ b/src/web/presets/BulletListStyle.tsx @@ -1,10 +1,10 @@ import * as React from 'react' -import Holder from '../Holder' -import { IContentLoaderProps } from '../' +import { IContentLoaderProps } from '..' +import ContentLoader from '../ContentLoader' const ReactContentLoaderBulletList: React.FC = props => ( - + @@ -13,7 +13,7 @@ const ReactContentLoaderBulletList: React.FC = props => ( - + ) export default ReactContentLoaderBulletList diff --git a/src/web/presets/CodeStyle.tsx b/src/web/presets/CodeStyle.tsx new file mode 100644 index 00000000..2692cf8a --- /dev/null +++ b/src/web/presets/CodeStyle.tsx @@ -0,0 +1,19 @@ +import * as React from 'react' + +import { IContentLoaderProps } from '..' +import ContentLoader from '../ContentLoader' + +const ReactContentLoaderCode: React.FC = props => ( + + + + + + + + + + +) + +export default ReactContentLoaderCode diff --git a/src/web/presets/FacebookStyle.tsx b/src/web/presets/FacebookStyle.tsx new file mode 100644 index 00000000..7f6a38ae --- /dev/null +++ b/src/web/presets/FacebookStyle.tsx @@ -0,0 +1,17 @@ +import * as React from 'react' + +import { IContentLoaderProps } from '..' +import ContentLoader from '../ContentLoader' + +const ReactContentLoaderFacebook: React.FC = props => ( + + + + + + + + +) + +export default ReactContentLoaderFacebook diff --git a/src/web/presets/InstagramStyle.tsx b/src/web/presets/InstagramStyle.tsx new file mode 100644 index 00000000..e548e210 --- /dev/null +++ b/src/web/presets/InstagramStyle.tsx @@ -0,0 +1,15 @@ +import * as React from 'react' + +import { IContentLoaderProps } from '..' +import ContentLoader from '../ContentLoader' + +const ReactContentLoaderInstagram: React.FC = props => ( + + + + + + +) + +export default ReactContentLoaderInstagram diff --git a/src/stylized/ListStyle.tsx b/src/web/presets/ListStyle.tsx similarity index 77% rename from src/stylized/ListStyle.tsx rename to src/web/presets/ListStyle.tsx index 01cc5437..ef86a045 100644 --- a/src/stylized/ListStyle.tsx +++ b/src/web/presets/ListStyle.tsx @@ -1,17 +1,17 @@ import * as React from 'react' -import Holder from '../Holder' -import { IContentLoaderProps } from '../' +import { IContentLoaderProps } from '..' +import ContentLoader from '../ContentLoader' const ReactContentLoaderListStyle: React.FC = props => ( - + - + ) export default ReactContentLoaderListStyle diff --git a/tsconfig.base.json b/tsconfig.base.json index bd4dd3bb..7ec264d2 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -14,5 +14,5 @@ "target": "es5" }, "include": ["./src/**/*"], - "exclude": ["node_modules", "src/__tests__"] + "exclude": ["node_modules", "src/web/__tests__"] }