Dz lesson 18 patterns

.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",

.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", "dz-lesson-16"]
 
   # 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

.gitignore

@@ -2,3 +2,5 @@
 .vscode
 node_modules
 dist
+/coverage/
+.idea

.npmrc

@@ -0,0 +1 @@
+legacy-peer-deps=true

.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"
+  }
+}

.storybook/preview.js

@@ -0,0 +1,9 @@
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

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<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/react/writing-stories/args
+Primary.args = {
+    primary: true,
+    label: 'Button',
+};
+
+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',
+};

Components_storybook_original/Button.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import './button.css';
+
+interface ButtonProps {
+    /**
+     * Is this the principal call to action on the page?
+     */
+    primary?: boolean;
+    /**
+     * What background color to use
+     */
+    backgroundColor?: string;
+    /**
+     * How large should the button be?
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Button contents
+     */
+    label: string;
+    /**
+     * Optional click handler
+     */
+    onClick?: () => void;
+}
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Button = ({
+    primary = false,
+    size = 'medium',
+    backgroundColor,
+    label,
+    ...props
+}: ButtonProps) => {
+    const mode = primary
+        ? 'storybook-button--primary'
+        : 'storybook-button--secondary';
+    return (
+        <button
+            type="button"
+            className={[
+                'storybook-button',
+                `storybook-button--${size}`,
+                mode,
+            ].join(' ')}
+            style={{ backgroundColor }}
+            {...props}
+        >
+            {label}
+        </button>
+    );
+};

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<typeof Calculator>;
+
+const Template: ComponentStory<typeof Calculator> = (args) => <Calculator/>;
+
+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',
+// };

Components_storybook_original/Calculator.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export const Calculator = () => {
+
+    return (
+        <div>
+            <div className="status">{status}</div>
+            <div className="board-row">
+                первая строка цифр
+            </div>
+            <div className="board-row">
+                вторая строка цифр
+            </div>
+            <div className="board-row">
+                третья строка цифр
+            </div>
+        </div>
+    );
+};

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<typeof Header>;
+
+const Template: ComponentStory<typeof Header> = (args) => <Header {...args} />;
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+    user: {
+        name: 'Jane Doe',
+    },
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

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) => (
+    <header>
+        <div className="wrapper">
+            <div>
+                <svg
+                    width="32"
+                    height="32"
+                    viewBox="0 0 32 32"
+                    xmlns="http://www.w3.org/2000/svg"
+                >
+                    <g fill="none" fillRule="evenodd">
+                        <path
+                            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+                            fill="#FFF"
+                        />
+                        <path
+                            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+                            fill="#555AB9"
+                        />
+                        <path
+                            d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+                            fill="#91BAF8"
+                        />
+                    </g>
+                </svg>
+                <h1>Acme</h1>
+            </div>
+            <div>
+                {user ? (
+                    <>
+                        <span className="welcome">
+                            Welcome, <b>{user.name}</b>!
+                        </span>
+                        <Button
+                            size="small"
+                            onClick={onLogout}
+                            label="Log out"
+                        />
+                    </>
+                ) : (
+                    <>
+                        <Button size="small" onClick={onLogin} label="Log in" />
+                        <Button
+                            primary
+                            size="small"
+                            onClick={onCreateAccount}
+                            label="Sign up"
+                        />
+                    </>
+                )}
+            </div>
+        </div>
+    </header>
+);