diff --git a/.eslintrc b/.eslintrc index 15656f6..28e7d82 100644 --- a/.eslintrc +++ b/.eslintrc @@ -11,7 +11,8 @@ "parser": "flow", "printWidth": 80, "tabWidth": 4, - "useTabs": false + "useTabs": false, + "jsxSingleQuote": true } ], "@typescript-eslint/quotes": [ @@ -23,9 +24,17 @@ } ], "@typescript-eslint/no-inferrable-types": 0, - - "indent": ["error", 4, {"SwitchCase": 1}] - + "indent": [ + "error", + 4, + { + "SwitchCase": 1 + } + ], + "jsx-quotes": [ + "error", + "prefer-single" + ] }, "parserOptions": { "sourceType": "module", diff --git a/.github/workflows/jekyll-gh-pages.yml b/.github/workflows/jekyll-gh-pages.yml index 6489fce..0c497c0 100644 --- a/.github/workflows/jekyll-gh-pages.yml +++ b/.github/workflows/jekyll-gh-pages.yml @@ -4,7 +4,7 @@ name: Deploy Jekyll with GitHub Pages dependencies preinstalled on: # Runs on pushes targeting the default branch push: - branches: ["master"] + branches: ["master", "second-dz-add-react-components-to-calculator"] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -22,9 +22,21 @@ concurrency: cancel-in-progress: false jobs: + + test: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + - name: Install + run: npm install + - name: Test and Coverage + run: npm run coverage + # Build job build: runs-on: ubuntu-latest + needs: test steps: - name: Checkout uses: actions/checkout@v3 @@ -33,7 +45,7 @@ jobs: - name: Build with Jekyll uses: actions/jekyll-build-pages@v1 with: - source: ./ + source: ./docs destination: ./_site - name: Upload artifact uses: actions/upload-pages-artifact@v1 @@ -49,3 +61,22 @@ jobs: - name: Deploy to GitHub Pages id: deployment uses: actions/deploy-pages@v2 + + badge: + runs-on: ubuntu-latest + needs: deploy + steps: + # Your original steps + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 + - name: Install + run: npm install + - name: Test and Coverage + run: npm run coverage + + # Add this + - name: Update Coverage Badge + # GitHub actions: default branch variable + # https://stackoverflow.com/questions/64781462/github-actions-default-branch-variable + # if: github.ref == format('refs/heads/{0}', github.event.repository.default_branch) + uses: we-cli/coverage-badge-action@main \ No newline at end of file diff --git a/.gitignore b/.gitignore index e87c762..db1fbc2 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ .vscode node_modules dist +/coverage/ +.idea \ No newline at end of file diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..521a9f7 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +legacy-peer-deps=true diff --git a/.storybook/main.js b/.storybook/main.js new file mode 100644 index 0000000..79d93fa --- /dev/null +++ b/.storybook/main.js @@ -0,0 +1,15 @@ +module.exports = { + "stories": [ + "../src/Components/*.stories.mdx", + "../src/Components/*.stories.@(js|jsx|ts|tsx)" + ], + "addons": [ + "@storybook/addon-links", + "@storybook/addon-essentials", + "@storybook/addon-interactions" + ], + "framework": "@storybook/react", + "core": { + "builder": "@storybook/builder-webpack5" + } +} \ No newline at end of file diff --git a/.storybook/preview.js b/.storybook/preview.js new file mode 100644 index 0000000..48afd56 --- /dev/null +++ b/.storybook/preview.js @@ -0,0 +1,9 @@ +export const parameters = { + actions: { argTypesRegex: "^on[A-Z].*" }, + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/, + }, + }, +} \ No newline at end of file diff --git a/Components_storybook_original/Button.stories.tsx b/Components_storybook_original/Button.stories.tsx new file mode 100644 index 0000000..f4e5a60 --- /dev/null +++ b/Components_storybook_original/Button.stories.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import { Button } from './Button'; + +// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export +export default { + title: 'Example/Button', + component: Button, + // More on argTypes: https://storybook.js.org/docs/react/api/argtypes + argTypes: { + backgroundColor: { control: 'color' }, + }, +// eslint-disable-next-line prettier/prettier +} as ComponentMeta; + +// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args +const Template: ComponentStory = (args) => + ); +}; diff --git a/Components_storybook_original/Calculator.stories.tsx b/Components_storybook_original/Calculator.stories.tsx new file mode 100644 index 0000000..3734be8 --- /dev/null +++ b/Components_storybook_original/Calculator.stories.tsx @@ -0,0 +1,39 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { Calculator } from './Calculator'; + + + +export default { + title: 'Calculator', + component: Calculator, + argTypes: { + backgroundColor: { control: 'color' }, + }, +// eslint-disable-next-line prettier/prettier +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const Primary = Template.bind({}); +Primary.args = { + primary: true, + label: 'Calculator', +}; + +// export const Secondary = Template.bind({}); +// Secondary.args = { +// label: 'Button', +// }; +// +// export const Large = Template.bind({}); +// Large.args = { +// size: 'large', +// label: 'Button', +// }; +// +// export const Small = Template.bind({}); +// Small.args = { +// size: 'small', +// label: 'Button', +// }; diff --git a/Components_storybook_original/Calculator.tsx b/Components_storybook_original/Calculator.tsx new file mode 100644 index 0000000..ce4a738 --- /dev/null +++ b/Components_storybook_original/Calculator.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +export const Calculator = () => { + + return ( +
+
{status}
+
+ первая строка цифр +
+
+ вторая строка цифр +
+
+ третья строка цифр +
+
+ ); +}; diff --git a/Components_storybook_original/Header.stories.tsx b/Components_storybook_original/Header.stories.tsx new file mode 100644 index 0000000..14767a6 --- /dev/null +++ b/Components_storybook_original/Header.stories.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; + +import { Header } from './Header'; + +export default { + title: 'Example/Header', + component: Header, + parameters: { + // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +// eslint-disable-next-line prettier/prettier +} as ComponentMeta; + +const Template: ComponentStory = (args) =>
; + +export const LoggedIn = Template.bind({}); +LoggedIn.args = { + user: { + name: 'Jane Doe', + }, +}; + +export const LoggedOut = Template.bind({}); +LoggedOut.args = {}; diff --git a/Components_storybook_original/Header.tsx b/Components_storybook_original/Header.tsx new file mode 100644 index 0000000..f204e36 --- /dev/null +++ b/Components_storybook_original/Header.tsx @@ -0,0 +1,75 @@ +import React from 'react'; + +import { Button } from './Button'; +import './header.css'; + +type User = { + name: string, +}; + +interface HeaderProps { + user?: User; + onLogin: () => void; + onLogout: () => void; + onCreateAccount: () => void; +} + +export const Header = ({ + user, + onLogin, + onLogout, + onCreateAccount, +}: HeaderProps) => ( +
+
+
+ + + + + + + +

Acme

+
+
+ {user ? ( + <> + + Welcome, {user.name}! + +
+
+
+); diff --git a/Components_storybook_original/Introduction.stories.mdx b/Components_storybook_original/Introduction.stories.mdx new file mode 100644 index 0000000..edc33ed --- /dev/null +++ b/Components_storybook_original/Introduction.stories.mdx @@ -0,0 +1,211 @@ +import { Meta } from '@storybook/addon-docs'; +import Code from './assets/code-brackets.svg'; +import Colors from './assets/colors.svg'; +import Comments from './assets/comments.svg'; +import Direction from './assets/direction.svg'; +import Flow from './assets/flow.svg'; +import Plugin from './assets/plugin.svg'; +import Repo from './assets/repo.svg'; +import StackAlt from './assets/stackalt.svg'; + + + + + +# Welcome to Storybook + +Storybook helps you build UI components in isolation from your app's business logic, data, and context. +That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA. + +Browse example stories now by navigating to them in the sidebar. +View their code in the `stories` directory to learn how they work. +We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages. + +
Configure
+ + + +
Learn
+ + + +
+ TipEdit the Markdown in{' '} + stories/Introduction.stories.mdx +
diff --git a/Components_storybook_original/Page.stories.tsx b/Components_storybook_original/Page.stories.tsx new file mode 100644 index 0000000..690cec4 --- /dev/null +++ b/Components_storybook_original/Page.stories.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react'; +import { within, userEvent } from '@storybook/testing-library'; +import { Page } from './Page'; + +export default { + title: 'Example/Page', + component: Page, + parameters: { + // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout + layout: 'fullscreen', + }, +// eslint-disable-next-line prettier/prettier +} as ComponentMeta; + +const Template: ComponentStory = (args) => ; + +export const LoggedOut = Template.bind({}); + +export const LoggedIn = Template.bind({}); + +// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing +LoggedIn.play = async ({ canvasElement }) => { + const canvas = within(canvasElement); + const loginButton = await canvas.getByRole('button', { name: /Log in/i }); + await userEvent.click(loginButton); +}; diff --git a/Components_storybook_original/Page.tsx b/Components_storybook_original/Page.tsx new file mode 100644 index 0000000..a73b938 --- /dev/null +++ b/Components_storybook_original/Page.tsx @@ -0,0 +1,94 @@ +import React from 'react'; + +import { Header } from './Header'; +import './page.css'; + +type User = { + name: string, +}; + +export const Page: React.VFC = () => { + const [user, setUser] = React.useState(); + + return ( +
+
setUser({ name: 'Jane Doe' })} + onLogout={() => setUser(undefined)} + onCreateAccount={() => setUser({ name: 'Jane Doe' })} + /> + +
+

Pages in Storybook

+

+ We recommend building UIs with a{' '} + + component-driven + {' '} + process starting with atomic components and ending with + pages. +

+

+ Render pages with mock data. This makes it easy to build and + review page states without needing to navigate to them in + your app. Here are some handy patterns for managing page + data in Storybook: +

+
    +
  • + Use a higher-level connected component. Storybook helps + you compose such data from the "args" of child component + stories +
    • +
  • + Assemble data in the page component from your services. + You can mock these services out using Storybook. +
    • +
+

+ Get a guided tutorial on component-driven development at{' '} + + Storybook tutorials + + . Read more in the{' '} + + docs + + . +

+
+ Tip Adjust the width of the + canvas with the{' '} + + + + + + Viewports addon in the toolbar +
+
+
+ ); +}; diff --git a/Components_storybook_original/assets/code-brackets.svg b/Components_storybook_original/assets/code-brackets.svg new file mode 100644 index 0000000..73de947 --- /dev/null +++ b/Components_storybook_original/assets/code-brackets.svg @@ -0,0 +1 @@ +illustration/code-brackets \ No newline at end of file diff --git a/Components_storybook_original/assets/colors.svg b/Components_storybook_original/assets/colors.svg new file mode 100644 index 0000000..17d58d5 --- /dev/null +++ b/Components_storybook_original/assets/colors.svg @@ -0,0 +1 @@ +illustration/colors \ No newline at end of file diff --git a/Components_storybook_original/assets/comments.svg b/Components_storybook_original/assets/comments.svg new file mode 100644 index 0000000..6493a13 --- /dev/null +++ b/Components_storybook_original/assets/comments.svg @@ -0,0 +1 @@ +illustration/comments \ No newline at end of file diff --git a/Components_storybook_original/assets/direction.svg b/Components_storybook_original/assets/direction.svg new file mode 100644 index 0000000..65676ac --- /dev/null +++ b/Components_storybook_original/assets/direction.svg @@ -0,0 +1 @@ +illustration/direction \ No newline at end of file diff --git a/Components_storybook_original/assets/flow.svg b/Components_storybook_original/assets/flow.svg new file mode 100644 index 0000000..8ac27db --- /dev/null +++ b/Components_storybook_original/assets/flow.svg @@ -0,0 +1 @@ +illustration/flow \ No newline at end of file diff --git a/Components_storybook_original/assets/plugin.svg b/Components_storybook_original/assets/plugin.svg new file mode 100644 index 0000000..29e5c69 --- /dev/null +++ b/Components_storybook_original/assets/plugin.svg @@ -0,0 +1 @@ +illustration/plugin \ No newline at end of file diff --git a/Components_storybook_original/assets/repo.svg b/Components_storybook_original/assets/repo.svg new file mode 100644 index 0000000..f386ee9 --- /dev/null +++ b/Components_storybook_original/assets/repo.svg @@ -0,0 +1 @@ +illustration/repo \ No newline at end of file diff --git a/Components_storybook_original/assets/stackalt.svg b/Components_storybook_original/assets/stackalt.svg new file mode 100644 index 0000000..9b7ad27 --- /dev/null +++ b/Components_storybook_original/assets/stackalt.svg @@ -0,0 +1 @@ +illustration/stackalt \ No newline at end of file diff --git a/Components_storybook_original/button.css b/Components_storybook_original/button.css new file mode 100644 index 0000000..dc91dc7 --- /dev/null +++ b/Components_storybook_original/button.css @@ -0,0 +1,30 @@ +.storybook-button { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 700; + border: 0; + border-radius: 3em; + cursor: pointer; + display: inline-block; + line-height: 1; +} +.storybook-button--primary { + color: white; + background-color: #1ea7fd; +} +.storybook-button--secondary { + color: #333; + background-color: transparent; + box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset; +} +.storybook-button--small { + font-size: 12px; + padding: 10px 16px; +} +.storybook-button--medium { + font-size: 14px; + padding: 11px 20px; +} +.storybook-button--large { + font-size: 16px; + padding: 12px 24px; +} diff --git a/Components_storybook_original/header.css b/Components_storybook_original/header.css new file mode 100644 index 0000000..830610e --- /dev/null +++ b/Components_storybook_original/header.css @@ -0,0 +1,32 @@ +.wrapper { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); + padding: 15px 20px; + display: flex; + align-items: center; + justify-content: space-between; +} + +svg { + display: inline-block; + vertical-align: top; +} + +h1 { + font-weight: 900; + font-size: 20px; + line-height: 1; + margin: 6px 0 6px 10px; + display: inline-block; + vertical-align: top; +} + +button + button { + margin-left: 10px; +} + +.welcome { + color: #333; + font-size: 14px; + margin-right: 10px; +} diff --git a/Components_storybook_original/page.css b/Components_storybook_original/page.css new file mode 100644 index 0000000..fbc32ae --- /dev/null +++ b/Components_storybook_original/page.css @@ -0,0 +1,69 @@ +section { + font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-size: 14px; + line-height: 24px; + padding: 48px 20px; + margin: 0 auto; + max-width: 600px; + color: #333; +} + +section h2 { + font-weight: 900; + font-size: 32px; + line-height: 1; + margin: 0 0 4px; + display: inline-block; + vertical-align: top; +} + +section p { + margin: 1em 0; +} + +section a { + text-decoration: none; + color: #1ea7fd; +} + +section ul { + padding-left: 30px; + margin: 1em 0; +} + +section li { + margin-bottom: 8px; +} + +section .tip { + display: inline-block; + border-radius: 1em; + font-size: 11px; + line-height: 12px; + font-weight: 700; + background: #e7fdd8; + color: #66bf3c; + padding: 4px 12px; + margin-right: 10px; + vertical-align: top; +} + +section .tip-wrapper { + font-size: 13px; + line-height: 20px; + margin-top: 40px; + margin-bottom: 40px; +} + +section .tip-wrapper svg { + display: inline-block; + height: 12px; + width: 12px; + margin-right: 4px; + vertical-align: top; + margin-top: 3px; +} + +section .tip-wrapper svg path { + fill: #1ea7fd; +} diff --git a/README.md b/README.md index 3e678b8..151a0af 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +[![cov](https://dmitryplus.github.io/otus_react_dz/badges/coverage.svg)](https://github.com/dmitryplus/otus_react_dz/actions) + + # OTUS: React.js Developer, домашние задания Плющенков Дмитрий ## Консольный калькулятор: diff --git a/babel.config.js b/babel.config.js index 03884ec..8dba3a2 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,6 +1,7 @@ module.exports = { presets: [ ['@babel/preset-env', { targets: { node: 'current' } }], + '@babel/preset-react', '@babel/preset-typescript' ] }; \ No newline at end of file diff --git a/coverage/clover.xml b/coverage/clover.xml new file mode 100644 index 0000000..b170ad3 --- /dev/null +++ b/coverage/clover.xml @@ -0,0 +1,149 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/coverage/coverage-summary.json b/coverage/coverage-summary.json new file mode 100644 index 0000000..d041c3f --- /dev/null +++ b/coverage/coverage-summary.json @@ -0,0 +1,9 @@ +{"total": {"lines":{"total":116,"covered":113,"skipped":0,"pct":97.41},"statements":{"total":119,"covered":116,"skipped":0,"pct":97.47},"functions":{"total":20,"covered":19,"skipped":0,"pct":95},"branches":{"total":67,"covered":64,"skipped":0,"pct":95.52},"branchesTrue":{"total":0,"covered":0,"skipped":0,"pct":100}} +,"/home/dmitry/sites/react_course/first_dz/src/MakeAction.ts": {"lines":{"total":18,"covered":18,"skipped":0,"pct":100},"functions":{"total":6,"covered":6,"skipped":0,"pct":100},"statements":{"total":19,"covered":19,"skipped":0,"pct":100},"branches":{"total":7,"covered":7,"skipped":0,"pct":100}} +,"/home/dmitry/sites/react_course/first_dz/src/Parser.ts": {"lines":{"total":77,"covered":74,"skipped":0,"pct":96.1},"functions":{"total":9,"covered":8,"skipped":0,"pct":88.88},"statements":{"total":79,"covered":76,"skipped":0,"pct":96.2},"branches":{"total":48,"covered":45,"skipped":0,"pct":93.75}} +,"/home/dmitry/sites/react_course/first_dz/src/Validator.ts": {"lines":{"total":11,"covered":11,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":11,"covered":11,"skipped":0,"pct":100},"branches":{"total":10,"covered":10,"skipped":0,"pct":100}} +,"/home/dmitry/sites/react_course/first_dz/src/MathOperators/Addition.ts": {"lines":{"total":2,"covered":2,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":2,"covered":2,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}} +,"/home/dmitry/sites/react_course/first_dz/src/MathOperators/Division.ts": {"lines":{"total":4,"covered":4,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":4,"covered":4,"skipped":0,"pct":100},"branches":{"total":2,"covered":2,"skipped":0,"pct":100}} +,"/home/dmitry/sites/react_course/first_dz/src/MathOperators/Multiplication.ts": {"lines":{"total":2,"covered":2,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":2,"covered":2,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}} +,"/home/dmitry/sites/react_course/first_dz/src/MathOperators/Subtraction.ts": {"lines":{"total":2,"covered":2,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":2,"covered":2,"skipped":0,"pct":100},"branches":{"total":0,"covered":0,"skipped":0,"pct":100}} +} diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..437c26d --- /dev/null +++ b/docs/index.html @@ -0,0 +1,17 @@ + + + + + + + + Тест react + + + +
+ +
+ + + \ No newline at end of file diff --git a/docs/index.js b/docs/index.js new file mode 100644 index 0000000..2010f22 --- /dev/null +++ b/docs/index.js @@ -0,0 +1,33555 @@ +/******/ (() => { // webpackBootstrap +/******/ "use strict"; +/******/ var __webpack_modules__ = ({ + +/***/ "./Components/Button.tsx": +/*!*******************************!*\ + !*** ./Components/Button.tsx ***! + \*******************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "Button": () => (/* binding */ Button) +/* harmony export */ }); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../node_modules/react/index.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); + +const Button = ({ + label +}) => { + if (label.length !== 1) { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null); + } + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("button", { + type: "button", + onClick: () => alert(label) + }, label); +}; + +/***/ }), + +/***/ "./Components/Calculator.tsx": +/*!***********************************!*\ + !*** ./Components/Calculator.tsx ***! + \***********************************/ +/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { + +__webpack_require__.r(__webpack_exports__); +/* harmony export */ __webpack_require__.d(__webpack_exports__, { +/* harmony export */ "Calculator": () => (/* binding */ Calculator) +/* harmony export */ }); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "../node_modules/react/index.js"); +/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__); +/* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./Button */ "./Components/Button.tsx"); + + +const Calculator = ({ + result +}) => { + return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { + className: "buttons-row" + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '7' + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '8' + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '9' + })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { + className: "buttons-row" + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '4' + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '5' + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '6' + })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { + className: "buttons-row" + }, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '1' + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '2' + }), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_Button__WEBPACK_IMPORTED_MODULE_1__.Button, { + label: '3' + })), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", { + "data-testid": "calculator-result" + }, result)); +}; + +/***/ }), + +/***/ "../node_modules/react-dom/cjs/react-dom.development.js": +/*!**************************************************************!*\ + !*** ../node_modules/react-dom/cjs/react-dom.development.js ***! + \**************************************************************/ +/***/ ((__unused_webpack_module, exports, __webpack_require__) => { + +/** + * @license React + * react-dom.development.js + * + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + + + +if (true) { + (function() { + + 'use strict'; + +/* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ +if ( + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ !== 'undefined' && + typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart === + 'function' +) { + __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStart(new Error()); +} + var React = __webpack_require__(/*! react */ "../node_modules/react/index.js"); +var Scheduler = __webpack_require__(/*! scheduler */ "../node_modules/scheduler/index.js"); + +var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED; + +var suppressWarning = false; +function setSuppressWarning(newSuppressWarning) { + { + suppressWarning = newSuppressWarning; + } +} // In DEV, calls to console.warn and console.error get replaced +// by calls to these methods by a Babel plugin. +// +// In PROD (or in packages without access to React internals), +// they are left as they are instead. + +function warn(format) { + { + if (!suppressWarning) { + for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + printWarning('warn', format, args); + } + } +} +function error(format) { + { + if (!suppressWarning) { + for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) { + args[_key2 - 1] = arguments[_key2]; + } + + printWarning('error', format, args); + } + } +} + +function printWarning(level, format, args) { + // When changing this logic, you might want to also + // update consoleWithStackDev.www.js as well. + { + var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame; + var stack = ReactDebugCurrentFrame.getStackAddendum(); + + if (stack !== '') { + format += '%s'; + args = args.concat([stack]); + } // eslint-disable-next-line react-internal/safe-string-coercion + + + var argsWithFormat = args.map(function (item) { + return String(item); + }); // Careful: RN currently depends on this prefix + + argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it + // breaks IE9: https://github.com/facebook/react/issues/13610 + // eslint-disable-next-line react-internal/no-production-logging + + Function.prototype.apply.call(console[level], console, argsWithFormat); + } +} + +var FunctionComponent = 0; +var ClassComponent = 1; +var IndeterminateComponent = 2; // Before we know whether it is function or class + +var HostRoot = 3; // Root of a host tree. Could be nested inside another node. + +var HostPortal = 4; // A subtree. Could be an entry point to a different renderer. + +var HostComponent = 5; +var HostText = 6; +var Fragment = 7; +var Mode = 8; +var ContextConsumer = 9; +var ContextProvider = 10; +var ForwardRef = 11; +var Profiler = 12; +var SuspenseComponent = 13; +var MemoComponent = 14; +var SimpleMemoComponent = 15; +var LazyComponent = 16; +var IncompleteClassComponent = 17; +var DehydratedFragment = 18; +var SuspenseListComponent = 19; +var ScopeComponent = 21; +var OffscreenComponent = 22; +var LegacyHiddenComponent = 23; +var CacheComponent = 24; +var TracingMarkerComponent = 25; + +// ----------------------------------------------------------------------------- + +var enableClientRenderFallbackOnTextMismatch = true; // TODO: Need to review this code one more time before landing +// the react-reconciler package. + +var enableNewReconciler = false; // Support legacy Primer support on internal FB www + +var enableLazyContextPropagation = false; // FB-only usage. The new API has different semantics. + +var enableLegacyHidden = false; // Enables unstable_avoidThisFallback feature in Fiber + +var enableSuspenseAvoidThisFallback = false; // Enables unstable_avoidThisFallback feature in Fizz +// React DOM Chopping Block +// +// Similar to main Chopping Block but only flags related to React DOM. These are +// grouped because we will likely batch all of them into a single major release. +// ----------------------------------------------------------------------------- +// Disable support for comment nodes as React DOM containers. Already disabled +// in open source, but www codebase still relies on it. Need to remove. + +var disableCommentsAsDOMContainers = true; // Disable javascript: URL strings in href for XSS protection. +// and client rendering, mostly to allow JSX attributes to apply to the custom +// element's object properties instead of only HTML attributes. +// https://github.com/facebook/react/issues/11347 + +var enableCustomElementPropertySupport = false; // Disables children for