Otus 9

.github/workflows/main.yml

@@ -31,31 +31,31 @@ jobs:
         run: npm install
 
       # Запускаем тесты и линтер
-      - name: Run tests and linter
-        run: npm run lint && npm test
-
-      # Собираем приложение
-      - name: Build Application
-        run: npm run build
-
-      # Публикуем приложение на Github Pages
-      - name: Deploy to Github Pages
+      # - name: Run tests and linter
+      #   run: npm run lint && npm test
+
+#      # Собираем приложение
+#      - name: Build Application
+#        run: npm run build
+#
+#      # Публикуем приложение на Github Pages
+#      - name: Deploy to Github Pages
+#        uses: JamesIves/[email protected]
+#        with:
+#          branch: gh-pages
+#          folder: dist
+
+      # Собираем Storybook
+      - name: Build Storybook
+        run: npm run build-storybook
+
+      # Публикуем Storybook на Github Pages
+      - name: Deploy Storybook to Github Pages
         uses: JamesIves/[email protected]
         with:
           branch: gh-pages
-          folder: dist
-
-      #      # Собираем Storybook
-      #      - name: Build Storybook
-      #        run: npm run build-storybook
-      #
-      #      # Публикуем Storybook на Github Pages
-      #      - name: Deploy Storybook to Github Pages
-      #        uses: JamesIves/[email protected]
-      #        with:
-      #          branch: gh-pages
-      #          folder: storybook-static
-      #          commit-message: "Automatically publish Storybook"
+          folder: storybook-static
+          commit-message: "Automatically publish Storybook"
 
       # Останавливаем выполнение строго при неудачных тестах
       - name: Fail on failed tests

package.json

@@ -64,6 +64,7 @@
     "webpack-dev-server": "^4.15.0"
   },
   "dependencies": {
+    "classnames": "^2.5.1",
     "clsx": "^1.2.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

src/app/App.tsx

@@ -1,16 +1,23 @@
 import React from 'react';
-import logo from './logo.svg';
+import { Resizer } from 'src/shared/resizer';
 import './App.css';
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Текст писать тут
-        </p>
-      </header>
+      <React.Fragment>
+          <Resizer>
+              <div>
+                  <ul>
+                      <li>Neil Armstrong</li>
+                      <li>Alan Bean</li>
+                      <li>Peter Conrad</li>
+                      <li>Edgar Mitchell</li>
+                      <li>Alan Shepard</li>
+                  </ul>
+              </div>
+          </Resizer>
+      </React.Fragment>
     </div>
   );
 }

src/shared/resizer/Resizer.modules.sass

@@ -0,0 +1,21 @@
+.root
+    position: relative
+    border: 1px solid #894af0
+
+.wrapper
+    border: 1px solid #eff1f3
+    width: 100%
+    height: 100%
+    overflow: auto
+    box-sizing: border-box
+
+.resizer
+    position: absolute
+    right: 0
+    bottom: 0  
+    width: 20px
+    height: 20px
+    transform: translate(50%, 50%)
+    background-color: #1b48a8    
+    border: 1px solid #BCF788
+    border-radius: 100%

src/shared/resizer/Resizer.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Resizer } from './Resizer';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const Wrapper = () => (
+    <React.Fragment>
+        <Resizer>
+            <div>
+                <ul>
+                    <li>Neil Armstrong</li>
+                    <li>Alan Bean</li>
+                    <li>Peter Conrad</li>
+                    <li>Edgar Mitchell</li>
+                    <li>Alan Shepard</li>
+                </ul>
+            </div>
+        </Resizer>
+    </React.Fragment>
+);
+
+const meta: Meta<typeof Resizer> = {
+    title: 'Resizer',
+    component: Wrapper,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default = {};

src/shared/resizer/Resizer.tsx

@@ -0,0 +1,38 @@
+import React, { FC, useRef, useState } from 'react';
+import s from './Resizer.modules.sass';
+
+export interface ResizerProps {
+    children: React.ReactElement;
+    initialWidth?: number;
+    initialHeight?: number;  
+};
+
+const MINIMUM_SIZE = 64;
+
+export const Resizer: FC<ResizerProps> = ({ children, initialWidth=400, initialHeight=200 }) => {
+    const refRoot = useRef<HTMLDivElement>();
+    const [size, setSize] = useState({ width: initialWidth, height: initialHeight });
+    const onMouseDown = (e: React.MouseEvent) => {
+        e.stopPropagation();  
+
+        const mouseMoveHandler = (e: MouseEvent) => {
+            const rect = refRoot.current.getBoundingClientRect();
+            setSize({ width: Math.max(e.clientX - rect.x, MINIMUM_SIZE), height: Math.max(e.clientY - rect.y, MINIMUM_SIZE)});
+        };
+
+        const mouseUpHandler = () => {
+            document.removeEventListener('mouseup', mouseUpHandler);
+            document.removeEventListener('mousemove', mouseMoveHandler);
+        };
+
+        document.addEventListener('mousemove', mouseMoveHandler);
+        document.addEventListener('mouseup', mouseUpHandler);
+    };    
+
+    return (
+        <div ref={refRoot} className={s.root} style={{ width: size.width, height: size.height }}>
+            <div className={s.wrapper}>{children}</div>
+            <button type="button" className={s.resizer} onMouseDown={onMouseDown} />
+        </div>
+    );
+};

src/shared/resizer/index.ts

@@ -0,0 +1 @@
+export * from './Resizer';

webpack.config.js

@@ -32,7 +32,7 @@ module.exports = (_, args) => {
     output: {
       path: dist,
       publicPath:
-        args.mode === 'development' ? `http://${host}:${port}/` : undefined /* <- прописать данные своего github */,
+        args.mode === 'development' ? `http://${host}:${port}/` : "https://dan83g.github.io" /* <- прописать данные своего github */,
       filename: `js/[name].js`,
       chunkFilename: `js/[name].js`,
     },