Merge branch 'develop' of github.com:coderan-io/ui into feature/navigation

Author: EranNL

.github/workflows/ci.yml

@@ -0,0 +1,34 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+on: [push, pull_request]
+jobs:
+  test-coverage:
+    name: Test on Node.js Latest
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Use Node.js latest
+        uses: actions/setup-node@v2.1.3
+        with:
+          node-version: "15"
+      - name: Install dependencies
+        run: npm install
+      - name: Generate coverage report
+        run: npm run test-coverage
+      - name: Upload coverage report
+        uses: codecov/codecov-action@v1.0.15
+        with:
+          token: ${{ secrets.CODECOV }}
+  test-node-12:
+    name: Test on Node.js v12
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout codd
+        uses: actions/checkout@v2
+      - name: Use Node.js v12
+        uses: actions/setup-node@v2.1.3
+        with:
+          node-version: "12"

jest.config.json

@@ -1,5 +1,4 @@
 {
-    "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.[jt]sx?$",
     "setupFilesAfterEnv": ["./setupTests.ts"],
     "moduleNameMapper": {
         "@/(.*)": "<rootDir>/src/$1"

package-lock.json

@@ -40,7 +40,9 @@
         "webpack-dev-server": "^3.11.0"
     },
     "dependencies": {
+        "@popperjs/core": "^2.6.0",
         "clsx": "^1.1.1",
+        "framer-motion": "^3.1.1",
         "react": "^16.14.0"
     }
 }

package.json

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useRef, useState } from 'react';
+import Overlay from '@/components/Overlay/index';
+import { Placement, PositioningStrategy } from '@popperjs/core';
+import { Trigger, triggerPropTypes } from '@/components/Overlay/Trigger';
+import { AnimatePresence } from 'framer-motion';
+
+interface OverlayTriggerProps {
+    arrow?: boolean;
+    children: React.ReactElement;
+    overlay: React.ReactNode;
+    placement?: Placement;
+    positionStrategy?: PositioningStrategy;
+    className?: string;
+    trigger?: Trigger | string;
+    motion?: string;
+}
+
+const OverlayTrigger = ({
+    arrow,
+    children: triggerElement,
+    className,
+    overlay,
+    placement,
+    positionStrategy,
+    trigger = 'hover',
+    motion
+}: OverlayTriggerProps): React.ReactElement => {
+    const [shown, setShown] = useState<boolean>(false);
+    const triggerRef = useRef<HTMLElement>();
+
+    const attachEvents = (child: React.ReactElement, trigger: string) => {
+        switch (trigger) {
+            case Trigger.CLICK:
+                return {
+                    onClick: (event: React.MouseEvent) => {
+                        if (child.props.onClick) {
+                            child.props.onClick(event);
+                        }
+
+                        setShown(!shown);
+                    }
+                }
+            case Trigger.HOVER:
+            default:
+                return {
+                    onMouseEnter: (event: React.MouseEvent): void => {
+                        if (child.props.onMouseEnter) {
+                            child.props.onMouseEnter(event);
+                        }
+
+                        setShown(true)
+                    },
+                    onMouseLeave: (event: React.MouseEvent) => {
+                        if (child.props.onMouseLeave) {
+                            child.props.onMouseLeave(event);
+                        }
+
+                        setShown(false)
+                    }
+                }
+        }
+    }
+
+    const createChildren = () => shown && (
+        <Overlay
+            motion={motion}
+            arrow={arrow}
+            triggerRef={triggerRef}
+            placement={placement}
+            positionStrategy={positionStrategy}
+            className={className}
+        >
+            {overlay}
+        </Overlay>
+    )
+
+    return (
+        <>
+            {React.cloneElement(triggerElement, {
+                ref: triggerRef,
+                ...attachEvents(triggerElement, trigger)
+            })}
+            {motion
+                ? React.createElement(AnimatePresence, {}, createChildren())
+                : createChildren()}
+        </>
+    )
+}
+
+OverlayTrigger.displayName = 'OverlayTrigger';
+OverlayTrigger.propTypes = {
+    children: PropTypes.node.isRequired,
+    className: PropTypes.string,
+    overlay: PropTypes.element.isRequired,
+    placement: PropTypes.string,
+    trigger: triggerPropTypes
+}
+
+export default OverlayTrigger;

src/components/Overlay/OverlayTrigger.tsx

@@ -0,0 +1,8 @@
+import Proptypes from 'prop-types';
+
+export enum Trigger {
+    CLICK = 'click',
+    HOVER = 'hover'
+}
+
+export const triggerPropTypes = Proptypes.oneOf(['click', 'hover'])

src/components/Overlay/Trigger.ts

@@ -0,0 +1,139 @@
+import { mount } from 'enzyme';
+import React from 'react';
+import OverlayTrigger from '@/components/Overlay/OverlayTrigger';
+import { motion } from 'framer-motion';
+
+describe('Overlay test', () => {
+    it('should render overlay when hovered', async () => {
+        const tooltip = mount(
+            <div>
+                <OverlayTrigger
+                    overlay="test"
+                >
+                    <button>test</button>
+                </OverlayTrigger>
+            </div>
+        );
+
+        tooltip.find('button').simulate('mouseenter');
+
+        expect(tooltip.find('.content').text()).toBe('test');
+
+        tooltip.find('button').simulate('mouseleave');
+
+        expect(tooltip.find('.content').length).toBe(0);
+    });
+
+    it('should call props along hover triggers', async () => {
+        const mockFnEnter = jest.fn();
+        const mockFnLeave = jest.fn();
+
+        const tooltip = mount(
+            <div>
+                <OverlayTrigger
+                    overlay="test"
+                >
+                    <button onMouseEnter={mockFnEnter} onMouseLeave={mockFnLeave}>test</button>
+                </OverlayTrigger>
+            </div>
+        );
+
+        tooltip.find('button').simulate('mouseenter');
+        tooltip.find('button').simulate('mouseleave');
+
+        expect(mockFnEnter).toHaveBeenCalled();
+        expect(mockFnLeave).toHaveBeenCalled();
+    });
+
+    it('should render overlay when clicked', async () => {
+        const mockFn = jest.fn();
+
+        const tooltip = mount(
+            <div>
+                <OverlayTrigger
+                    trigger="click"
+                    overlay="test"
+                >
+                    <button onClick={mockFn}>test</button>
+                </OverlayTrigger>
+            </div>
+        );
+
+        tooltip.find('button').simulate('click');
+
+        expect(tooltip.find('.content').text()).toBe('test');
+        expect(mockFn).toHaveBeenCalled();
+    });
+
+    it('should render overlay with arrow', async () => {
+        const tooltip = mount(
+            <div>
+                <OverlayTrigger
+                    trigger="click"
+                    overlay="test"
+                    arrow
+                >
+                    <button>test</button>
+                </OverlayTrigger>
+            </div>
+        );
+
+        tooltip.find('button').simulate('click');
+
+        expect(tooltip.find('.arrow')).toBeDefined();
+    });
+
+    it('should render overlay without arrow', async () => {
+        const tooltip = mount(
+            <div>
+                <OverlayTrigger
+                    trigger="click"
+                    overlay="test"
+                    arrow={false}
+                >
+                    <button>test</button>
+                </OverlayTrigger>
+            </div>
+        );
+
+        tooltip.find('button').simulate('click');
+
+        expect(tooltip.find('.arrow').length).toBe(0);
+    });
+
+    it('should should use motion when defined', async () => {
+        const tooltip = mount(
+            <div>
+                <OverlayTrigger
+                    trigger="click"
+                    overlay="test"
+                    motion="fade"
+                >
+                    <button>test</button>
+                </OverlayTrigger>
+            </div>
+        );
+
+        tooltip.find('button').simulate('click');
+
+        expect(tooltip.find(motion.div)).toBeDefined();
+    });
+
+    it('should should ignore undefined motion', async () => {
+        const tooltip = mount(
+            <div>
+                <OverlayTrigger
+                    trigger="click"
+                    overlay="test"
+                    motion="bounce"
+                >
+                    <button>test</button>
+                </OverlayTrigger>
+            </div>
+        );
+
+        tooltip.find('button').simulate('click');
+
+        expect(tooltip.find(motion.div).length).toBe(0);
+    });
+});