diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage.md b/packages/dnb-design-system-portal/src/pages/uilib/usage.md index 7b6868e83d9..b10a4fcd6f3 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage.md @@ -5,13 +5,23 @@ draft: false order: 3 --- + + +import WatchingReleases from 'Pages/uilib/info/about-watching-releases.md' + # Usage **Get started using the DNB user interface library** -The UI Library HTML elements are isolated, ready-to-use elements. They are self-supporting, and will use the styles they need to display. +The UI Library HTML Elements and UI Components are isolated, ready-to-use elements. They are self-supporting, and will use the styles they need to display. + +- **HTML Elements** are styled HTML tags +- **UI Components** are styled and custom build HTML elements +- **UI Patterns** are a way to demonstrate how a set of components and elements could work together + +You can use any of the HTML Elements and UI Components as demonstrated in the documentation with a variety of customization properties. -You can use any of the HTML Elements as demonstrated in the documentation. Please refer to the demo pages to see [how they should be used](/uilib/components). + ## Installation @@ -22,7 +32,7 @@ _NB!_ [React](https://www.npmjs.com/package/react) and [React-dom](https://www.n ```bash # at time of writing, React version 16 was used # so consider to run react@16 and react-dom@16 -$ yarn add dnb-ui-lib react react-dom +$ npm i dnb-ui-lib react react-dom ``` Read more in the [First Steps](/uilib/usage/first-steps/) section. diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps.md index 4251c7562fc..143cffdf31a 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps.md @@ -4,6 +4,9 @@ draft: false order: 2 --- +import GithubLogo from 'Pages/uilib/development/assets/github-logo.js' +import { Icon } from 'dnb-ui-lib/src' + # First Steps ## Installation @@ -12,7 +15,7 @@ Check out the `dnb-ui-lib` **[Installation documentation](/uilib/usage/#installa ## Working Examples -You can find some more detailed and running examples under `REPOSITORY/packages/examples/...`. +You can find some more detailed and running examples under [ REPOSITORY/packages/examples/...](https://github.com/dnbexperience/eufemia/tree/develop/packages/examples) ## Be continued diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md index ad81549be0e..f1aaa84a843 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/first-steps/the-basics.md @@ -22,12 +22,32 @@ There are three things going on once an HTML element is displayed and up-and-run - styling by CSS - internal states by JavaScript -From here we can redefine the properties of the HTML elements in order to customise them. +From here we can redefine the properties of the HTML elements in order to customize them. We can also bind event listeners to work together with your application. +### Pixel Perfect + +One of the most important reasons why Eufemia exists, is to make it more easy to get a pixel perfect result on developing WEB Applications. + +Therefore, You come a long way on using the `dnb-ui-lib` correctly: + +- Make You use [import the style packages correctly](/uilib/usage/customisation/styling) (with or without CSS reset depending on Your legacy code situation) +- Always (mostly) use `rem` to the nearest "8px" value, like **1px = 0.0625rem** (1/16) +- Always use the [HTML Elements](/uilib/elements) or [UI Components](/uilib/components) +- There are more [useful tips on styling](/uilib/usage/best-practices/for-styling) + +**Make sure You test Your Layout and Styles for various conditions during and after development:** + +- Up two 3x times in **font-size** (change the Web Browser default font size) +- **Zoom** the Web Browser up to 3x times +- Make Your layout **responsive**, either with CSS Grid or Media Queries and, +- Check the different screen sizes +- Test Your App on different devices and operating systems +- Pixel perfection is good for many, for the rest, make everything [accessible for everyone](/uilib/usage/accessibility) + ## States -All the HTML elements have individual interaction states. The look and feel is defined in the default [theming file](/uilib/usage/customisation/theming) (**theme-ui**). +All the UI Components (and some HTML Elements) have individual interaction states. The look and feel is defined in the default [theming file](/uilib/usage/customisation/theming) (**theme-ui**). - hover - active (TouchStart) diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md index bd56e9f1702..45a822e8ffa 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md +++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md @@ -31,9 +31,9 @@ If You are working together with an DNB UX Designer, You can decide freely what ### Media Queries and Breakpoints -- `small`: 40em -- `medium`: 50em -- `large`: 60em -- `x-large`: 90em (is the default max-width of 1440px) +- `40em` **small** +- `50em` **medium** +- `60em` **large** +- `90em` **x-large** (is the default max-width of 1440px) Use `em` for media query sizing for best overall browser support. Read [more abouts units](/uilib/usage/best-practices/for-styling#units) diff --git a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js b/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js index 7d972c84c08..08b5c054ec2 100644 --- a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js +++ b/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js @@ -19,7 +19,8 @@ import { DesignSystemSvg } from './MainMenuGraphics' import { Logo, Button } from 'dnb-ui-lib/src' -import { buildVersion } from '../../../package.json' +// import { buildVersion } from '../../../package.json' +import { version as buildVersion } from '../../../version.json' import { MainMenuContext } from './MainMenuContext' import { setPageFocusElement, diff --git a/packages/dnb-design-system-portal/src/shared/parts/Link.js b/packages/dnb-design-system-portal/src/shared/parts/Link.js index 9966d6cf8bf..6e6a911f22f 100644 --- a/packages/dnb-design-system-portal/src/shared/parts/Link.js +++ b/packages/dnb-design-system-portal/src/shared/parts/Link.js @@ -5,6 +5,7 @@ import { Link as GatsbyLink } from 'gatsby' import React from 'react' +import PropTypes from 'prop-types' import isAbsoluteUrl from 'is-absolute-url' /* eslint-disable jsx-a11y/anchor-has-content */ @@ -14,5 +15,8 @@ const Link = ({ to, ...props }) => ) : ( ) +Link.propTypes = { + to: PropTypes.string.isRequired +} export default Link diff --git a/packages/dnb-design-system-portal/src/shared/tags/Anchor.js b/packages/dnb-design-system-portal/src/shared/tags/Anchor.js index 772bc0fef85..6d011c865e9 100644 --- a/packages/dnb-design-system-portal/src/shared/tags/Anchor.js +++ b/packages/dnb-design-system-portal/src/shared/tags/Anchor.js @@ -21,6 +21,9 @@ const Anchor = ({ children, className, href, ...rest }) => { ) } + if (/^http/.test(href)) { + rest.target = '_blank' + } return ( { @@ -31,8 +32,9 @@ const dev = async () => { // await runStyleFactory() // await convertSvgToJsx({ preventDelete }) // await makeLibStyles() - await makeLibModules() - await makeMainUMDBundle() + await prepareTemplates() + // await makeLibModules() + // await makeMainUMDBundle() log.succeed('Nice') return true diff --git a/packages/dnb-ui-lib/scripts/prepub/index.js b/packages/dnb-ui-lib/scripts/prepub/index.js index 12939afd42d..866320b435e 100644 --- a/packages/dnb-ui-lib/scripts/prepub/index.js +++ b/packages/dnb-ui-lib/scripts/prepub/index.js @@ -6,12 +6,17 @@ * */ -// process.env.ROOT_DIR = `${__dirname}/../../` process.env.ROOT_DIR = require('packpath').self() import { ErrorHandler, log } from '../lib' import del from 'del' +/** + * The Templates (prepareTemplates) generation is special in the sense + * That it has to be run locally to generate the files statily + * so we can commit them as as core part. + * The rest is only generated during the package build + */ import { prepareTemplates } from './tasks/prepareTemplates' import { runStyleFactory } from './tasks/styleFactory' import { runThemeFactory } from './tasks/themeFactory' diff --git a/packages/dnb-ui-lib/scripts/prepub/tasks/prepareTemplates.js b/packages/dnb-ui-lib/scripts/prepub/tasks/prepareTemplates.js index 64610f98087..e4e92a911ed 100644 --- a/packages/dnb-ui-lib/scripts/prepub/tasks/prepareTemplates.js +++ b/packages/dnb-ui-lib/scripts/prepub/tasks/prepareTemplates.js @@ -9,6 +9,7 @@ import path, { join as joinPath } from 'path' import camelCase from 'camelcase' import prettier from 'prettier' import { ErrorHandler, log } from '../../lib' +import { asyncForEach } from '../../tools' const prettierrc = JSON.parse( fs.readFileSync(path.resolve(__dirname, '../../../.prettierrc'), 'utf-8') @@ -61,6 +62,24 @@ const prepareTemplates = async () => { } return res }) + await runFactory({ + ...componentsTemplateConfig, + ...{ + srcFile: path.resolve( + __dirname, + '../../../src/core/templates/component-export-template.js' + ), + destFile: false, + destPath: path.resolve(__dirname, '../../../src/components') + } + }).then(res => { + if (require.main === module) { + log.succeed( + '> PrePublish: Created the index template with all the components' + ) + } + return res + }) // process elements const elementsTemplateConfig = { @@ -165,11 +184,12 @@ const autoAdvice = '/**\n * ATTENTION: This file is auto generated by using "prepareTemplates".\n * Do not change the content!\n *\n */\n\n' const runFactory = async ({ - templateObjectToFill, + templateObjectToFill = '{ Template }', templateListToExtend, templateListToExtendBy, srcFile, destFile, + destPath = null, processToNamesList, processToNamesIgnoreList = [], processToNamesListByUsingFolders = false, @@ -207,64 +227,104 @@ const runFactory = async ({ const template = await fs.readFile(srcFile, 'utf-8') - const content = template - .trim() - .replace( - new RegExp(templateObjectToFill, 'g'), - `{ ${processToNamesList - .map(({ file }) => camelCase(file, { pascalCase: true })) - .join(', ')} }` - ) - .replace( - new RegExp(templateListToExtend, 'g'), - processToNamesList - .map(({ file, source }) => { - let res = templateListToExtend - .replace( - new RegExp(templateListToExtendBy, 'g'), - camelCase(file, { pascalCase: true }) - ) - .replace( - new RegExp(templateListToExtendBy.toLowerCase(), 'g'), - file - ) + if (destPath) { + await asyncForEach(processToNamesList, async ({ file }) => { + const destFile = path.resolve( + destPath, + `${camelCase(file, { pascalCase: true })}.js` + ) + + try { + // replace the content in the template + const content = template + .trim() + // 1. replace templateListToExtendBy + .replace( + new RegExp(templateListToExtendBy, 'g'), + camelCase(file, { pascalCase: true }) + ) + // 2. replace templateListToExtendBy, but lower case + .replace( + new RegExp(templateListToExtendBy.toLowerCase(), 'g'), + file + ) + + await fs.writeFile( + destFile, + prettier.format(`${autoAdvice}${content}`, { + ...prettierrc, + parser: 'babel' + }) + ) + } catch (e) { + log.fail(`There was an error on creating ${destFile}!`) + new ErrorHandler(e) + } + }) + } - // in case we have a type to replace - if (/\{type\}/.test(res)) { - const type = source - .trim('/') - .split(/\//g) - .slice(-2, -1)[0] - res = res.replace(new RegExp('{type}', 'g'), type) - } + if (destFile) { + // replace the content in the template + const content = template + .trim() + // 1. replace templateObjectToFill + .replace( + new RegExp(templateObjectToFill, 'g'), + `{ ${processToNamesList + .map(({ file }) => camelCase(file, { pascalCase: true })) + .join(', ')} }` + ) + // 2. replace templateListToExtend + .replace( + new RegExp(templateListToExtend, 'g'), + processToNamesList + .map(({ file, source }) => { + let res = templateListToExtend + .replace( + new RegExp(templateListToExtendBy, 'g'), + camelCase(file, { pascalCase: true }) + ) + .replace( + new RegExp(templateListToExtendBy.toLowerCase(), 'g'), + file + ) - if (typeof transformNamesList === 'function') { - const transformedResult = transformNamesList({ - file, - source, - result: res - }) - if (transformedResult) { - res = transformedResult + // in case we have a type to replace + if (/\{type\}/.test(res)) { + const type = source + .trim('/') + .split(/\//g) + .slice(-2, -1)[0] + res = res.replace(new RegExp('{type}', 'g'), type) } - } - return res - }) - .join('\n') - ) + if (typeof transformNamesList === 'function') { + const transformedResult = transformNamesList({ + file, + source, + result: res + }) + if (transformedResult) { + res = transformedResult + } + } - try { - await fs.writeFile( - destFile, - prettier.format(`${autoAdvice}${content}`, { - ...prettierrc, - parser: 'babel' - }) - ) - } catch (e) { - log.fail(`There was an error on creating ${destFile}!`) - new ErrorHandler(e) + return res + }) + .join('\n') + ) + try { + await fs.writeFile( + destFile, + prettier.format(`${autoAdvice}${content}`, { + ...prettierrc, + parser: 'babel' + }) + ) + } catch (e) { + log.fail(`There was an error on creating ${destFile}!`) + new ErrorHandler(e) + } } return processToNamesList diff --git a/packages/dnb-ui-lib/src/components/Button.js b/packages/dnb-ui-lib/src/components/Button.js new file mode 100644 index 00000000000..f118edbe05d --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Button.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index button to autogenerate all the components and patterns + * Used by "prepareButtons" + */ + +import Button from './button/Button' +export * from './button/Button' +export default Button diff --git a/packages/dnb-ui-lib/src/components/Dropdown.js b/packages/dnb-ui-lib/src/components/Dropdown.js new file mode 100644 index 00000000000..7fc51ab22c7 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Dropdown.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index dropdown to autogenerate all the components and patterns + * Used by "prepareDropdowns" + */ + +import Dropdown from './dropdown/Dropdown' +export * from './dropdown/Dropdown' +export default Dropdown diff --git a/packages/dnb-ui-lib/src/components/FormLabel.js b/packages/dnb-ui-lib/src/components/FormLabel.js new file mode 100644 index 00000000000..bd3d95ac9be --- /dev/null +++ b/packages/dnb-ui-lib/src/components/FormLabel.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index form-label to autogenerate all the components and patterns + * Used by "prepareFormLabels" + */ + +import FormLabel from './form-label/FormLabel' +export * from './form-label/FormLabel' +export default FormLabel diff --git a/packages/dnb-ui-lib/src/components/FormStatus.js b/packages/dnb-ui-lib/src/components/FormStatus.js new file mode 100644 index 00000000000..33757833472 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/FormStatus.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index form-status to autogenerate all the components and patterns + * Used by "prepareFormStatuss" + */ + +import FormStatus from './form-status/FormStatus' +export * from './form-status/FormStatus' +export default FormStatus diff --git a/packages/dnb-ui-lib/src/components/Icon.js b/packages/dnb-ui-lib/src/components/Icon.js new file mode 100644 index 00000000000..badd29ec4bb --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Icon.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index icon to autogenerate all the components and patterns + * Used by "prepareIcons" + */ + +import Icon from './icon/Icon' +export * from './icon/Icon' +export default Icon diff --git a/packages/dnb-ui-lib/src/components/IconPrimary.js b/packages/dnb-ui-lib/src/components/IconPrimary.js new file mode 100644 index 00000000000..3c44d10dc44 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/IconPrimary.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index icon-primary to autogenerate all the components and patterns + * Used by "prepareIconPrimarys" + */ + +import IconPrimary from './icon-primary/IconPrimary' +export * from './icon-primary/IconPrimary' +export default IconPrimary diff --git a/packages/dnb-ui-lib/src/components/Input.js b/packages/dnb-ui-lib/src/components/Input.js new file mode 100644 index 00000000000..8f4d3a7c0cb --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Input.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index input to autogenerate all the components and patterns + * Used by "prepareInputs" + */ + +import Input from './input/Input' +export * from './input/Input' +export default Input diff --git a/packages/dnb-ui-lib/src/components/InputMasked.js b/packages/dnb-ui-lib/src/components/InputMasked.js new file mode 100644 index 00000000000..39227d7039d --- /dev/null +++ b/packages/dnb-ui-lib/src/components/InputMasked.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index input-masked to autogenerate all the components and patterns + * Used by "prepareInputMaskeds" + */ + +import InputMasked from './input-masked/InputMasked' +export * from './input-masked/InputMasked' +export default InputMasked diff --git a/packages/dnb-ui-lib/src/components/LineTitle.js b/packages/dnb-ui-lib/src/components/LineTitle.js new file mode 100644 index 00000000000..26305b23f78 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/LineTitle.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index line-title to autogenerate all the components and patterns + * Used by "prepareLineTitles" + */ + +import LineTitle from './line-title/LineTitle' +export * from './line-title/LineTitle' +export default LineTitle diff --git a/packages/dnb-ui-lib/src/components/Logo.js b/packages/dnb-ui-lib/src/components/Logo.js new file mode 100644 index 00000000000..8f076054d90 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Logo.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index logo to autogenerate all the components and patterns + * Used by "prepareLogos" + */ + +import Logo from './logo/Logo' +export * from './logo/Logo' +export default Logo diff --git a/packages/dnb-ui-lib/src/components/Modal.js b/packages/dnb-ui-lib/src/components/Modal.js new file mode 100644 index 00000000000..ecac6121df1 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Modal.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index modal to autogenerate all the components and patterns + * Used by "prepareModals" + */ + +import Modal from './modal/Modal' +export * from './modal/Modal' +export default Modal diff --git a/packages/dnb-ui-lib/src/components/Notification.js b/packages/dnb-ui-lib/src/components/Notification.js new file mode 100644 index 00000000000..433f5cd45f3 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Notification.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index notification to autogenerate all the components and patterns + * Used by "prepareNotifications" + */ + +import Notification from './notification/Notification' +export * from './notification/Notification' +export default Notification diff --git a/packages/dnb-ui-lib/src/components/Slider.js b/packages/dnb-ui-lib/src/components/Slider.js new file mode 100644 index 00000000000..f5d61f6108a --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Slider.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index slider to autogenerate all the components and patterns + * Used by "prepareSliders" + */ + +import Slider from './slider/Slider' +export * from './slider/Slider' +export default Slider diff --git a/packages/dnb-ui-lib/src/components/StepIndicator.js b/packages/dnb-ui-lib/src/components/StepIndicator.js new file mode 100644 index 00000000000..ae0d513dfaa --- /dev/null +++ b/packages/dnb-ui-lib/src/components/StepIndicator.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index step-indicator to autogenerate all the components and patterns + * Used by "prepareStepIndicators" + */ + +import StepIndicator from './step-indicator/StepIndicator' +export * from './step-indicator/StepIndicator' +export default StepIndicator diff --git a/packages/dnb-ui-lib/src/components/Switch.js b/packages/dnb-ui-lib/src/components/Switch.js new file mode 100644 index 00000000000..ba210a03eae --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Switch.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index switch to autogenerate all the components and patterns + * Used by "prepareSwitchs" + */ + +import Switch from './switch/Switch' +export * from './switch/Switch' +export default Switch diff --git a/packages/dnb-ui-lib/src/components/Tabs.js b/packages/dnb-ui-lib/src/components/Tabs.js new file mode 100644 index 00000000000..6aee77e22e0 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/Tabs.js @@ -0,0 +1,14 @@ +/** + * ATTENTION: This file is auto generated by using "prepareTemplates". + * Do not change the content! + * + */ + +/** + * Library Index tabs to autogenerate all the components and patterns + * Used by "prepareTabss" + */ + +import Tabs from './tabs/Tabs' +export * from './tabs/Tabs' +export default Tabs diff --git a/packages/dnb-ui-lib/src/core/templates/component-export-template.js b/packages/dnb-ui-lib/src/core/templates/component-export-template.js new file mode 100644 index 00000000000..951276907c8 --- /dev/null +++ b/packages/dnb-ui-lib/src/core/templates/component-export-template.js @@ -0,0 +1,8 @@ +/** + * Library Index template to autogenerate all the components and patterns + * Used by "prepareTemplates" + */ + +import Template from './template/Template' +export * from './template/Template' +export default Template diff --git a/packages/examples/example-angular-1/babel.config.js b/packages/examples/example-angular-1/babel.config.js new file mode 100644 index 00000000000..5b0be032545 --- /dev/null +++ b/packages/examples/example-angular-1/babel.config.js @@ -0,0 +1,17 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + debug: false, + targets: { + browsers: ['last 1 versions'] + } + } + ], + '@babel/preset-react' + ], + // sourceType: 'unambiguous', // we need to set this, once we define: "useBuiltIns: 'usage'" + ignore: ['node_modules/**'], + plugins: ['@babel/plugin-proposal-class-properties'] +} diff --git a/packages/examples/example-angular-1/package.json b/packages/examples/example-angular-1/package.json index 43b86235c3d..0939058825f 100644 --- a/packages/examples/example-angular-1/package.json +++ b/packages/examples/example-angular-1/package.json @@ -9,7 +9,7 @@ "version": "1.0.0", "scripts": { "start": "webpack-dev-server --port=1234", - "build": "webpack --mode=production --display-modules" + "build": "webpack --mode=production --display-modules && cp index.html dist/index.html" }, "dependencies": { "angular": "1.7.8", @@ -19,12 +19,16 @@ "react2angular": "4.0.6" }, "devDependencies": { + "@babel/core": "^7.4.3", + "@babel/plugin-proposal-class-properties": "^7.4.0", + "@babel/preset-env": "^7.4.3", + "@babel/preset-react": "^7.0.0", "@types/angular": "1.6.54", - "prop-types": "^15.7.2", - "babel-loader": "^8.0.5", - "file-loader": "^3.0.1", + "babel-loader": "8.0.5", "css-loader": "^2.1.1", + "file-loader": "^3.0.1", "node-sass": "^4.11.0", + "prop-types": "^15.7.2", "sass-loader": "^7.1.0", "style-loader": "^0.23.1", "webpack": "^4.29.6", diff --git a/packages/examples/example-angular-1/webpack.config.js b/packages/examples/example-angular-1/webpack.config.js index 209430e944d..c9cc97f3b0f 100644 --- a/packages/examples/example-angular-1/webpack.config.js +++ b/packages/examples/example-angular-1/webpack.config.js @@ -6,10 +6,7 @@ module.exports = { test: /\.(js|jsx)$/, use: [ { - loader: 'babel-loader', - options: { - rootMode: 'upward' - } + loader: 'babel-loader' } ] }, @@ -18,7 +15,7 @@ module.exports = { use: ['style-loader', 'css-loader', 'sass-loader'] }, { - test: /\.(woff|woff2|ttf|otf|eot)$/, + test: /\.(woff|woff2|ttf)$/, loader: 'file-loader' } ] @@ -28,4 +25,4 @@ module.exports = { minimize: true, sideEffects: false } -}; +} diff --git a/packages/examples/example-react/babel.config.js b/packages/examples/example-react/babel.config.js new file mode 100644 index 00000000000..c3bfa4e7226 --- /dev/null +++ b/packages/examples/example-react/babel.config.js @@ -0,0 +1,19 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + debug: false, + targets: { + browsers: ['last 2 versions', 'explorer >= 11'] + }, + useBuiltIns: 'usage', // add polyfill proposal usage + corejs: 2 // define the version we use in package.json + } + ], + '@babel/preset-react' + ], + sourceType: 'unambiguous', // we need to set this, once we define: "useBuiltIns: 'usage'" + ignore: ['node_modules/**'], + plugins: ['@babel/plugin-proposal-class-properties'] +} diff --git a/packages/examples/example-react/package.json b/packages/examples/example-react/package.json index 349a98a8b31..9a859bab40e 100644 --- a/packages/examples/example-react/package.json +++ b/packages/examples/example-react/package.json @@ -9,7 +9,7 @@ "version": "1.0.0", "scripts": { "start": "webpack-dev-server --port=1234", - "build": "webpack --mode=production --display-modules" + "build": "webpack --mode=production --display-modules && cp index.html dist/index.html" }, "dependencies": { "dnb-ui-lib": "*", @@ -17,7 +17,11 @@ "react-dom": "^16.8.4" }, "devDependencies": { - "babel-loader": "^8.0.5", + "@babel/core": "^7.4.3", + "@babel/plugin-proposal-class-properties": "^7.4.0", + "@babel/preset-env": "^7.4.3", + "@babel/preset-react": "^7.0.0", + "babel-loader": "8.0.5", "css-loader": "^2.1.1", "file-loader": "^3.0.1", "mini-css-extract-plugin": "^0.5.0", diff --git a/packages/examples/example-react/src/App.jsx b/packages/examples/example-react/src/App.jsx index 99a945a918c..5676489fefb 100644 --- a/packages/examples/example-react/src/App.jsx +++ b/packages/examples/example-react/src/App.jsx @@ -6,19 +6,19 @@ import React, { PureComponent } from 'react' // With this we get 100kb more in bundle size -// import { Button, Input, Icon } from 'dnb-ui-lib/components' -// import { H1, H2, P, Section } from 'dnb-ui-lib/elements' -// import { bell_medium as Bell } from 'dnb-ui-lib/icons' +import { Button, Input, Icon } from 'dnb-ui-lib/components' +import { H1, H2, P, Section } from 'dnb-ui-lib/elements' +import { bell_medium as Bell } from 'dnb-ui-lib/icons' // Better for Tree Shaking as webpack treeshaking only works with ES6 module syntax -import Icon from 'dnb-ui-lib/es/components/icon/Icon' -import Input from 'dnb-ui-lib/es/components/input/Input' -import Button from 'dnb-ui-lib/es/components/button/Button' -import H1 from 'dnb-ui-lib/es/elements/H1' -import H2 from 'dnb-ui-lib/es/elements/H2' -import P from 'dnb-ui-lib/es/elements/P' -import Section from 'dnb-ui-lib/es/elements/Section' -import Bell from 'dnb-ui-lib/icons/bell_medium' +// import Icon from 'dnb-ui-lib/es/components/icon/Icon' +// import Input from 'dnb-ui-lib/es/components/input/Input' +// import Button from 'dnb-ui-lib/es/components/button/Button' +// import H1 from 'dnb-ui-lib/es/elements/H1' +// import H2 from 'dnb-ui-lib/es/elements/H2' +// import P from 'dnb-ui-lib/es/elements/P' +// import Section from 'dnb-ui-lib/es/elements/Section' +// import Bell from 'dnb-ui-lib/icons/bell_medium' export default class App extends PureComponent { state = { inputValue: null } diff --git a/packages/examples/example-react/webpack.config.js b/packages/examples/example-react/webpack.config.js index 4bb4209e7bf..80671b3a971 100644 --- a/packages/examples/example-react/webpack.config.js +++ b/packages/examples/example-react/webpack.config.js @@ -5,12 +5,13 @@ module.exports = { rules: [ { test: /\.(js|jsx)$/, + exclude: [/node_modules/], // intention: exclude dependencies from transpilation use: [ { - loader: 'babel-loader', - options: { - rootMode: 'upward' - } + loader: 'babel-loader' + // ,options: { + // rootMode: 'upward' + // } } ] }, @@ -25,7 +26,7 @@ module.exports = { ] }, { - test: /\.(woff|woff2|ttf|otf|eot)$/, + test: /\.(woff|woff2|ttf)$/, loader: 'file-loader' } ] diff --git a/packages/examples/example-ssr/.eslintrc b/packages/examples/example-ssr/.eslintrc new file mode 100644 index 00000000000..c01380984e4 --- /dev/null +++ b/packages/examples/example-ssr/.eslintrc @@ -0,0 +1,3 @@ +{ + "extends": "../../dnb-design-system-portal/.eslintrc" +} diff --git a/packages/examples/example-ssr/.gitignore b/packages/examples/example-ssr/.gitignore new file mode 100644 index 00000000000..86e7a6909d6 --- /dev/null +++ b/packages/examples/example-ssr/.gitignore @@ -0,0 +1,10 @@ +# dependencies +/node_modules + +# production +/dist + +# misc +.DS_Store +.cache +*not_in_use* diff --git a/packages/examples/example-ssr/.prettierrc b/packages/examples/example-ssr/.prettierrc new file mode 100644 index 00000000000..6a8dc4009a5 --- /dev/null +++ b/packages/examples/example-ssr/.prettierrc @@ -0,0 +1,22 @@ +{ + "printWidth": 75, + "tabWidth": 2, + "singleQuote": true, + "bracketSpacing": true, + "useTabs": false, + "semi": false, + "jsxBracketSameLine": false, + "trailingComma": "none", + "overrides": [ + { + "files": ".babelrc", + "options": { + "singleQuote": false + } + }, + { + "files": "*.html", + "parser": "html" + } + ] +} diff --git a/packages/examples/example-ssr/README.md b/packages/examples/example-ssr/README.md new file mode 100644 index 00000000000..7ef8de6461e --- /dev/null +++ b/packages/examples/example-ssr/README.md @@ -0,0 +1,11 @@ +# DNB UI Library - React SSR Example + +## How to run this Example App + +1. Make sure You have installed the dependencies `yarn install`. +1. If You run this app inside the mono repo Eufemia, then make sure You build the `dnb-ui-lib` first. To do so, go to the `dnb-ui-lib` directory and run `yarn build`. This is because we consume the package content directly like: import `dnb-ui-lib/style` and not from the `src` folder, like: `dnb-ui-lib/src/style`. +1. To generate the static HTML file (as we don't use a dynamic backend server), run `yarn generate` inside this Example App. +1. Check out the new `/dist` folder with the static files (index.html). + +**Why class-properties?** +We only use the Babel Plugin `transform-class-properties` to run the `handleClick` event like a class property. diff --git a/packages/examples/example-ssr/babel.config.js b/packages/examples/example-ssr/babel.config.js new file mode 100644 index 00000000000..a0cc9804dc5 --- /dev/null +++ b/packages/examples/example-ssr/babel.config.js @@ -0,0 +1,19 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + debug: false, + targets: { + browsers: ['last 1 versions'] + }, + useBuiltIns: 'entry', // add polyfill proposal usage + corejs: 2 // define the version we use in package.json + } + ], + '@babel/preset-react' + ], + sourceType: 'unambiguous', // we need to set this, once we define: "useBuiltIns: 'usage'" + ignore: ['node_modules/**'], + plugins: ['@babel/plugin-proposal-class-properties'] +} diff --git a/packages/examples/example-ssr/index.html b/packages/examples/example-ssr/index.html new file mode 100644 index 00000000000..345a3d72a37 --- /dev/null +++ b/packages/examples/example-ssr/index.html @@ -0,0 +1,11 @@ + + + + React Example + + + +

React Components 12

This is not for real world usage. But only to show the functionality of the dnb-ui-lib

H2

Show me an Icon

+ + + \ No newline at end of file diff --git a/packages/examples/example-ssr/package.json b/packages/examples/example-ssr/package.json new file mode 100644 index 00000000000..e0c18979487 --- /dev/null +++ b/packages/examples/example-ssr/package.json @@ -0,0 +1,42 @@ +{ + "name": "example-ssr", + "description": "React SSR example", + "license": "SEE LICENSE IN LICENSE FILE", + "repository": { + "type": "git", + "url": "https://github.com/dnbexperience/eufemia.git" + }, + "version": "1.0.0", + "scripts": { + "generate": "nodemon --exec 'babel-node ./scripts/generator.js' --ext js,json,jsx", + "start": "babel-node ./scripts/generator.js && webpack-dev-server --port=1234", + "build": "webpack --mode=production --display-modules && cp index.html dist/index.html && cp src/favicon.ico dist/favicon.ico" + }, + "dependencies": { + "core-js": "2", + "dnb-ui-lib": "*", + "react": "^16.8.4", + "react-dom": "^16.8.4" + }, + "devDependencies": { + "@babel/core": "^7.4.3", + "@babel/node": "^7.2.2", + "@babel/plugin-proposal-class-properties": "^7.4.0", + "@babel/polyfill": "^7.4.3", + "@babel/preset-env": "^7.4.3", + "@babel/preset-react": "^7.0.0", + "babel-loader": "8.0.5", + "css-loader": "^2.1.1", + "file-loader": "^3.0.1", + "mini-css-extract-plugin": "^0.5.0", + "node-sass": "^4.11.0", + "nodemon": "^1.18.10", + "prop-types": "^15.7.2", + "react-prerendered-component": "^1.1.1", + "sass-loader": "^7.1.0", + "style-loader": "^0.23.1", + "webpack": "4.29.6", + "webpack-cli": "3.3.0", + "webpack-dev-server": "^3.2.1" + } +} diff --git a/packages/examples/example-ssr/scripts/generator.js b/packages/examples/example-ssr/scripts/generator.js new file mode 100644 index 00000000000..c2fd73528b8 --- /dev/null +++ b/packages/examples/example-ssr/scripts/generator.js @@ -0,0 +1,46 @@ +/** + * To showcase the usage of the dnb-ui-lib in React SSR + * + */ + +import React from 'react' + +import path from 'path' +import fs from 'fs' + +import App from '../src/App.jsx' +import { + PrerenderedControler, + thisIsServer +} from 'react-prerendered-component' +import { renderToString } from 'react-dom/server' + +GenerateHtmlFile(App, '../index.html') + +function GenerateHtmlFile(Component, file) { + global.document = { getElementById: () => {} } + thisIsServer(false) + + const html = ` + + + + React Example + + + +
${renderToString( + + + + )}
+ + + + `.trim() + + const exportedFilePath = path.resolve(__dirname, file) + fs.writeFileSync(exportedFilePath, html) + + // console.log(html) +} diff --git a/packages/examples/example-ssr/src/App.css b/packages/examples/example-ssr/src/App.css new file mode 100644 index 00000000000..453d5815555 --- /dev/null +++ b/packages/examples/example-ssr/src/App.css @@ -0,0 +1,3 @@ +body { + background-color: var(--color-white); +} diff --git a/packages/examples/example-ssr/src/App.jsx b/packages/examples/example-ssr/src/App.jsx new file mode 100644 index 00000000000..0330548b083 --- /dev/null +++ b/packages/examples/example-ssr/src/App.jsx @@ -0,0 +1,74 @@ +/** + * To showcase the usage of the dnb-ui-lib in React SSR + * + */ + +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { PrerenderedComponent } from 'react-prerendered-component' + +// With this we get 100kb more in bundle size +import { Button, Input, Icon } from 'dnb-ui-lib/components' +import { H1, H2, P, Section } from 'dnb-ui-lib/elements' +import { bell_medium as Bell } from 'dnb-ui-lib/icons' + +export default class App extends PureComponent { + static propTypes = { + count: PropTypes.number + } + static defaultProps = { + count: 1 + } + state = { inputValue: null, count: 0, restored: false } + constructor(props) { + super(props) + this.state.count = props.count + } + handleClick = e => { + console.log('handleClick', e) + } + handleValueChange = e => { + const inputValue = e.value || (e.detail && e.detail.value) || '' + console.log('handleValueChange', inputValue) + this.setState({ inputValue }) + } + restore = (element, state) => { + this.setState({ ...state, restored: true }) + } + render() { + const { inputValue } = this.state + return ( + +
+
+

React Components {this.state.count}

+

+ This is not for real world usage. But only to show the + functionality of the dnb-ui-lib +

+ +
+
+

H2

+

+ Show me an Icon +

+
+
+ + ) + } +} diff --git a/packages/examples/example-ssr/src/favicon.ico b/packages/examples/example-ssr/src/favicon.ico new file mode 100644 index 00000000000..d6668a82e3a Binary files /dev/null and b/packages/examples/example-ssr/src/favicon.ico differ diff --git a/packages/examples/example-ssr/src/index.js b/packages/examples/example-ssr/src/index.js new file mode 100644 index 00000000000..21964004bd6 --- /dev/null +++ b/packages/examples/example-ssr/src/index.js @@ -0,0 +1,28 @@ +/** + * To showcase the usage of the dnb-ui-lib in React SSR + * + */ + +import '@babel/polyfill' + +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App.jsx' +import { PrerenderedControler } from 'react-prerendered-component' + +// Custom Eufemia import, instead of effecting the body reset with 'dnb-ui-lib/style' +// import 'dnb-ui-lib/style' // Import the global DNB stylesheet +import 'dnb-ui-lib/style/basis' +import 'dnb-ui-lib/style/components' +import 'dnb-ui-lib/style/themes/ui' + +import './App.css' + +// ReactDOM.render(, document.getElementById('app')) + +ReactDOM.hydrate( + + + , + document.getElementById('app') +) diff --git a/packages/examples/example-ssr/webpack.config.js b/packages/examples/example-ssr/webpack.config.js new file mode 100644 index 00000000000..9e9b345dfcc --- /dev/null +++ b/packages/examples/example-ssr/webpack.config.js @@ -0,0 +1,40 @@ +const MiniCssExtractPlugin = require('mini-css-extract-plugin') +module.exports = { + mode: 'development', + module: { + rules: [ + { + test: /\.(js|jsx)$/, + use: [ + { + loader: 'babel-loader' + } + ] + }, + { + test: /\.(css|scss)$/, + use: [ + process.env.NODE_ENV === 'development' + ? 'style-loader' + : MiniCssExtractPlugin.loader, + 'css-loader', + 'sass-loader' + ] + }, + { + test: /\.(woff|woff2|ttf|otf|eot)$/, + loader: 'file-loader' + } + ] + }, + plugins: [ + new MiniCssExtractPlugin({ + filename: 'bundle.css' + }) + ], + optimization: { + usedExports: true, + minimize: true, + sideEffects: false + } +} diff --git a/babel.config.js b/packages/examples/example-styling/babel.config.js similarity index 57% rename from babel.config.js rename to packages/examples/example-styling/babel.config.js index 54e2ea2d087..05f704548a4 100644 --- a/babel.config.js +++ b/packages/examples/example-styling/babel.config.js @@ -1,6 +1,4 @@ module.exports = { - ignore: ['node_modules/**'], - babelrcRoots: ['packages/examples/**'], presets: [ [ '@babel/preset-env', @@ -8,14 +6,16 @@ module.exports = { debug: false, targets: { browsers: ['last 2 versions', 'explorer >= 11'] - } + }, + useBuiltIns: 'entry' } ], '@babel/preset-react' ], + sourceMaps: true, + ignore: ['node_modules/**'], plugins: [ - '@babel/plugin-proposal-export-default-from', - '@babel/plugin-proposal-object-rest-spread', - '@babel/plugin-proposal-class-properties' + '@babel/plugin-proposal-class-properties', + '@babel/plugin-syntax-dynamic-import' ] } diff --git a/packages/examples/example-styling/package.json b/packages/examples/example-styling/package.json index 2876d7594cb..1ca4b9395cc 100644 --- a/packages/examples/example-styling/package.json +++ b/packages/examples/example-styling/package.json @@ -17,6 +17,12 @@ "react-dom": "^16.8.3" }, "devDependencies": { + "@babel/core": "^7.4.3", + "@babel/plugin-proposal-class-properties": "^7.4.0", + "@babel/plugin-syntax-dynamic-import": "^7.2.0", + "@babel/polyfill": "^7.4.3", + "@babel/preset-env": "^7.4.3", + "@babel/preset-react": "^7.0.0", "@emotion/core": "^10.0.7", "@emotion/styled": "^10.0.7", "parcel-bundler": "^1.11.0" diff --git a/packages/examples/example-styling/src/main.js b/packages/examples/example-styling/src/main.js index f7aed84eae9..3c333b13130 100644 --- a/packages/examples/example-styling/src/main.js +++ b/packages/examples/example-styling/src/main.js @@ -3,6 +3,8 @@ * */ +import '@babel/polyfill' + import React from 'react' import { render } from 'react-dom' import App from './App' diff --git a/packages/examples/example-vue/babel.config.js b/packages/examples/example-vue/babel.config.js new file mode 100644 index 00000000000..1c8191fb505 --- /dev/null +++ b/packages/examples/example-vue/babel.config.js @@ -0,0 +1,19 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + debug: false, + targets: { + browsers: ['last 2 versions', 'explorer >= 11'] + }, + useBuiltIns: 'usage', // add polyfill proposal usage + corejs: 2 // define the version we use in package.json + } + ], + 'vue' + ], + sourceType: 'unambiguous', // we need to set this, once we define: "useBuiltIns: 'usage'" + ignore: ['node_modules/**'], + plugins: ['@babel/plugin-proposal-class-properties'] +} diff --git a/packages/examples/example-vue/package.json b/packages/examples/example-vue/package.json index c31756872f2..84686d8a0bb 100644 --- a/packages/examples/example-vue/package.json +++ b/packages/examples/example-vue/package.json @@ -12,6 +12,7 @@ "build": "webpack --mode=production --display-modules" }, "dependencies": { + "core-js": "2", "dnb-ui-lib": "*", "react": "^16.8.4", "react-dom": "^16.8.4", @@ -19,7 +20,13 @@ "vuera": "^0.2.3" }, "devDependencies": { + "@babel/core": "^7.4.3", + "@babel/plugin-proposal-class-properties": "^7.4.0", + "@babel/polyfill": "^7.4.3", + "@babel/preset-env": "^7.4.3", + "@babel/preset-react": "^7.0.0", "@vue/component-compiler-utils": "^2.6.0", + "babel-preset-vue": "^2.0.2", "babel-loader": "^8.0.5", "css-loader": "^2.1.1", "eslint-plugin-vue": "^5.2.2", diff --git a/packages/examples/example-vue/webpack.config.js b/packages/examples/example-vue/webpack.config.js index 3b904b12954..99b992e9ac5 100644 --- a/packages/examples/example-vue/webpack.config.js +++ b/packages/examples/example-vue/webpack.config.js @@ -19,10 +19,7 @@ module.exports = { ], js: [ { - loader: 'babel-loader', - options: { - rootMode: 'upward' - } + loader: 'babel-loader' } ] }, @@ -36,10 +33,7 @@ module.exports = { exclude: file => !/\.vue\.js/.test(file), use: [ { - loader: 'babel-loader', - options: { - rootMode: 'upward' - } + loader: 'babel-loader' } ] }, @@ -48,7 +42,7 @@ module.exports = { use: ['vue-style-loader', 'css-loader', 'sass-loader'] }, { - test: /\.(woff|woff2|ttf|otf|eot)$/, + test: /\.(woff|woff2|ttf)$/, loader: 'file-loader' } ] diff --git a/packages/examples/example-web-components/babel.config.js b/packages/examples/example-web-components/babel.config.js new file mode 100644 index 00000000000..5b86f47a058 --- /dev/null +++ b/packages/examples/example-web-components/babel.config.js @@ -0,0 +1,16 @@ +module.exports = { + presets: [ + [ + '@babel/preset-env', + { + debug: false, + targets: { + browsers: ['last 2 versions', 'explorer >= 11'] + } + } + ], + '@babel/preset-react' + ], + ignore: ['node_modules/**'], + plugins: ['@babel/plugin-proposal-class-properties'] +} diff --git a/packages/examples/example-web-components/package.json b/packages/examples/example-web-components/package.json index 6045d090200..6d12d2f63b7 100644 --- a/packages/examples/example-web-components/package.json +++ b/packages/examples/example-web-components/package.json @@ -17,6 +17,10 @@ "react-dom": "^16.8.4" }, "devDependencies": { + "@babel/core": "^7.4.3", + "@babel/plugin-proposal-class-properties": "^7.4.0", + "@babel/preset-env": "^7.4.3", + "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.5", "css-loader": "^2.1.1", "file-loader": "^3.0.1", diff --git a/packages/examples/example-web-components/webpack.config.js b/packages/examples/example-web-components/webpack.config.js index 209430e944d..c9cc97f3b0f 100644 --- a/packages/examples/example-web-components/webpack.config.js +++ b/packages/examples/example-web-components/webpack.config.js @@ -6,10 +6,7 @@ module.exports = { test: /\.(js|jsx)$/, use: [ { - loader: 'babel-loader', - options: { - rootMode: 'upward' - } + loader: 'babel-loader' } ] }, @@ -18,7 +15,7 @@ module.exports = { use: ['style-loader', 'css-loader', 'sass-loader'] }, { - test: /\.(woff|woff2|ttf|otf|eot)$/, + test: /\.(woff|woff2|ttf)$/, loader: 'file-loader' } ] @@ -28,4 +25,4 @@ module.exports = { minimize: true, sideEffects: false } -}; +} diff --git a/yarn.lock b/yarn.lock index 6550ae3a727..b3de8db8d09 100644 --- a/yarn.lock +++ b/yarn.lock @@ -773,7 +773,7 @@ resolve "^1.8.1" semver "^5.5.1" -"@babel/plugin-transform-runtime@^7.0.0": +"@babel/plugin-transform-runtime@^7.0.0", "@babel/plugin-transform-runtime@^7.4.3": version "7.4.3" resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.4.3.tgz#4d6691690ecdc9f5cb8c3ab170a1576c1f556371" integrity sha512-7Q61bU+uEI7bCUFReT1NKn7/X6sDQsZ7wL1sJ9IYMAO7cI+eg6x9re1cEw2fCRMbbTVyoeUKWSV1M6azEfKCfg== @@ -837,7 +837,7 @@ "@babel/helper-regex" "^7.4.3" regexpu-core "^4.5.4" -"@babel/polyfill@^7.0.0", "@babel/polyfill@^7.4.0": +"@babel/polyfill@^7.0.0", "@babel/polyfill@^7.4.0", "@babel/polyfill@^7.4.3": version "7.4.3" resolved "https://registry.yarnpkg.com/@babel/polyfill/-/polyfill-7.4.3.tgz#332dc6f57b718017c3a8b37b4eea8aa6eeac1187" integrity sha512-rkv8WIvJshA5Ev8iNMGgz5WZkRtgtiPexiT7w5qevGTuT7ZBfM3de9ox1y9JR5/OXb/sWGBbWlHNa7vQKqku3Q== @@ -3570,6 +3570,11 @@ babel-helper-to-multiple-sequence-expressions@^0.5.0: resolved "https://registry.yarnpkg.com/babel-helper-to-multiple-sequence-expressions/-/babel-helper-to-multiple-sequence-expressions-0.5.0.tgz#a3f924e3561882d42fcf48907aa98f7979a4588d" integrity sha512-m2CvfDW4+1qfDdsrtf4dwOslQC3yhbgyBFptncp4wvtdrDHqueW7slsYv4gArie056phvQFhT2nRcGS4bnm6mA== +babel-helper-vue-jsx-merge-props@^2.0.2: + version "2.0.3" + resolved "https://registry.yarnpkg.com/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz#22aebd3b33902328e513293a8e4992b384f9f1b6" + integrity sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg== + babel-jest@^24.7.1: version "24.7.1" resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-24.7.1.tgz#73902c9ff15a7dfbdc9994b0b17fcefd96042178" @@ -3649,6 +3654,20 @@ babel-plugin-jest-hoist@^24.6.0: dependencies: "@types/babel__traverse" "^7.0.6" +babel-plugin-jsx-event-modifiers@^2.0.2: + version "2.0.5" + resolved "https://registry.yarnpkg.com/babel-plugin-jsx-event-modifiers/-/babel-plugin-jsx-event-modifiers-2.0.5.tgz#93e6ebb5d7553bb08f9fedbf7a0bee3af09a0472" + integrity sha512-tWGnCk0whZ+nZcj9tYLw4+y08tPJXqaEjIxRJZS6DkUUae72Kz4BsoGpxt/Kow7mmgQJpvFCw8IPLSNh5rkZCg== + +babel-plugin-jsx-v-model@^2.0.1: + version "2.0.3" + resolved "https://registry.yarnpkg.com/babel-plugin-jsx-v-model/-/babel-plugin-jsx-v-model-2.0.3.tgz#c396416b99cb1af782087315ae1d3e62e070f47d" + integrity sha512-SIx3Y3XxwGEz56Q1atwr5GaZsxJ2IRYmn5dl38LFkaTAvjnbNQxsZHO+ylJPsd+Hmv+ixJBYYFEekPBTHwiGfQ== + dependencies: + babel-plugin-syntax-jsx "^6.18.0" + html-tags "^2.0.0" + svg-tags "^1.0.0" + babel-plugin-macros@2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.5.0.tgz#01f4d3b50ed567a67b80a30b9da066e94f4097b6" @@ -3868,6 +3887,13 @@ babel-plugin-transform-undefined-to-void@^6.9.4: resolved "https://registry.yarnpkg.com/babel-plugin-transform-undefined-to-void/-/babel-plugin-transform-undefined-to-void-6.9.4.tgz#be241ca81404030678b748717322b89d0c8fe280" integrity sha1-viQcqBQEAwZ4t0hxcyK4nQyP4oA= +babel-plugin-transform-vue-jsx@^3.5.0: + version "3.7.0" + resolved "https://registry.yarnpkg.com/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-3.7.0.tgz#d40492e6692a36b594f7e9a1928f43e969740960" + integrity sha512-W39X07/n3oJMQd8tALBO+440NraGSF//Lo1ydd/9Nme3+QiRGFBb1Q39T9iixh0jZPPbfv3so18tNoIgLatymw== + dependencies: + esutils "^2.0.2" + babel-preset-fbjs@^3.1.2: version "3.2.0" resolved "https://registry.yarnpkg.com/babel-preset-fbjs/-/babel-preset-fbjs-3.2.0.tgz#c0e6347d3e0379ed84b3c2434d3467567aa05297" @@ -3975,6 +4001,17 @@ babel-preset-react-app@^7.0.0: babel-plugin-macros "2.5.0" babel-plugin-transform-react-remove-prop-types "0.4.24" +babel-preset-vue@^2.0.2: + version "2.0.2" + resolved "https://registry.yarnpkg.com/babel-preset-vue/-/babel-preset-vue-2.0.2.tgz#cfadf1bd736125397481b5f8525ced0049a0c71f" + integrity sha1-z63xvXNhJTl0gbX4UlztAEmgxx8= + dependencies: + babel-helper-vue-jsx-merge-props "^2.0.2" + babel-plugin-jsx-event-modifiers "^2.0.2" + babel-plugin-jsx-v-model "^2.0.1" + babel-plugin-syntax-jsx "^6.18.0" + babel-plugin-transform-vue-jsx "^3.5.0" + babel-runtime@^6.11.6, babel-runtime@^6.18.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" @@ -10169,6 +10206,14 @@ hoist-non-react-statics@^3.3.0: dependencies: react-is "^16.7.0" +hoist-react-statics@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/hoist-react-statics/-/hoist-react-statics-1.0.2.tgz#27e9aa24714560fd3b2e43a160069ffd6682d807" + integrity sha512-tAUX5aT4aKq+D1E1hVnf+veWZPDCOZFaPZri+T38XNs1SueTDQWVwcVy0pEkjV6tCq0Xl6HMyTgzJjs7W2w92w== + dependencies: + hoist-non-react-statics "^2.3.1" + react-display-name "^0.2.3" + homedir-polyfill@^1.0.1: version "1.0.3" resolved "https://registry.yarnpkg.com/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz#743298cef4e5af3e194161fbadcc2151d3a058e8" @@ -17485,6 +17530,11 @@ react-dev-utils@^7.0.0, react-dev-utils@^7.0.1: strip-ansi "5.0.0" text-table "0.2.0" +react-display-name@^0.2.3: + version "0.2.4" + resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf" + integrity sha512-zvU6iouW+SWwHTyThwxGICjJYCMZFk/6r/+jmOdC7ntQoPlS/Pqb81MkxaMf2bHTSq9TN3K3zX2/ayMW/jCtyA== + react-docgen@^3.0.0, react-docgen@^3.0.0-rc.2: version "3.0.0" resolved "https://registry.yarnpkg.com/react-docgen/-/react-docgen-3.0.0.tgz#79c6e1b1870480c3c2bc1a65bede0577a11c38cd" @@ -17666,6 +17716,15 @@ react-popper@^1.3.3: typed-styles "^0.0.7" warning "^4.0.2" +react-prerendered-component@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/react-prerendered-component/-/react-prerendered-component-1.1.1.tgz#d3237927d96509c2ff0308d3d8958565afb0df53" + integrity sha512-9CYFNGp3vNeE8mxcIZ/UcCLX+26ET1xGQvE53Zice08+OzDR7QecMkaFkOHfC3HMpbmyqZzyN3wai/1vg++ktA== + dependencies: + detect-node "^2.0.4" + hoist-react-statics "^1.0.2" + react-uid "^2.2.0" + react-resize-detector@^3.2.1: version "3.4.0" resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-3.4.0.tgz#2ccd399958a0efe9b7c52c5db5a13d87e47cd585" @@ -17725,6 +17784,11 @@ react-textarea-autosize@^7.0.4: "@babel/runtime" "^7.1.2" prop-types "^15.6.0" +react-uid@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/react-uid/-/react-uid-2.2.0.tgz#0f77e1e0594fbf29fc4fe528cc9aa415c5bf9159" + integrity sha512-z+g5+hFOQ08hCfrGcJ1PNs+cmvH8Uq2CVzCmPeWBsUi5A4W4NWXR5jouledzy3oSKGMU9HOzf8zFuGi15TXJoQ== + react2angular@4.0.6: version "4.0.6" resolved "https://registry.yarnpkg.com/react2angular/-/react2angular-4.0.6.tgz#ec49ef834d101c9a320e25229fc5afa5b29edc4f" @@ -21779,7 +21843,7 @@ webidl-conversions@^4.0.2: resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad" integrity sha512-YQ+BmxuTgd6UXZW3+ICGfyqRyHXVlD5GtQr5+qjiNW7bF0cqrzX500HVXPBOvgXb5YnzDd+h0zqyv61KUD7+Sg== -webpack-cli@^3.3.0: +webpack-cli@3.3.0, webpack-cli@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-3.3.0.tgz#55c8a74cae1e88117f9dda3a801c7272e93ca318" integrity sha512-t1M7G4z5FhHKJ92WRKwZ1rtvi7rHc0NZoZRbSkol0YKl4HvcC8+DsmGDmK7MmZxHSAetHagiOsjOB6MmzC2TUw== @@ -21888,7 +21952,7 @@ webpack-stats-plugin@^0.1.5: resolved "https://registry.yarnpkg.com/webpack-stats-plugin/-/webpack-stats-plugin-0.1.5.tgz#29e5f12ebfd53158d31d656a113ac1f7b86179d9" integrity sha1-KeXxLr/VMVjTHWVqETrB97hhedk= -webpack@^4.17.0, webpack@^4.29.0, webpack@^4.29.6: +webpack@4.29.6, webpack@^4.17.0, webpack@^4.29.0, webpack@^4.29.6: version "4.29.6" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.29.6.tgz#66bf0ec8beee4d469f8b598d3988ff9d8d90e955" integrity sha512-MwBwpiE1BQpMDkbnUUaW6K8RFZjljJHArC6tWQJoFm0oQtfoSebtg4Y7/QHnJ/SddtjYLHaKGX64CFjG5rehJw==