@bitrise/bitkit 10.35.2-alpha-chakra.1 → 10.36.0

package/src/Old/Placement/PlacementPopper.tsx

@@ -0,0 +1,173 @@
+/* eslint-disable react/default-props-match-prop-types */
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { Placement as TypePlacement, VirtualElement } from '@popperjs/core';
+import { Popper, PopperProps } from 'react-popper';
+import classnames from 'classnames';
+import { useEventListener } from '../hooks';
+import Base, { Props as BaseProps } from '../Base/Base';
+import { PlacementArrowPropsContext } from './PlacementArrowPropsContext';
+import { PlacementManagerContext } from './PlacementManagerContext';
+import './Placement.css';
+
+const { useEffect, useRef, useState } = React;
+
+export interface Props extends BaseProps {
+  animatePosition?: boolean;
+  children: (props: { update: () => void; width?: number }) => React.ReactNode;
+  closeElement?: null | HTMLElement;
+  disableReposition?: boolean;
+  flip?: boolean;
+  isInsideModal?: boolean;
+  onClose?: (event: MouseEvent) => void;
+  placement?: TypePlacement;
+  referenceElement?: any;
+  visible?: boolean;
+  timeout?: number;
+}
+
+const PlacementPopper: React.FunctionComponent<Props> = (props: Props) => {
+  const {
+    animatePosition,
+    backgroundColor,
+    children,
+    closeElement,
+    disableReposition,
+    flip,
+    isInsideModal,
+    onClose,
+    placement: desiredPlacement,
+    referenceElement,
+    sameWidth,
+    visible,
+    ...rest
+  } = props;
+
+  const ref = useRef<HTMLElement | null>();
+  const [render, setRender] = useState(visible);
+
+  const [reference, setReference] = useState<Element | VirtualElement | undefined>(undefined);
+
+  useEffect(() => {
+    if (visible) {
+      setRender(true);
+    }
+  }, [visible]);
+
+  useEventListener(
+    closeElement || document,
+    'click',
+    (event) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      /* @ts-ignore */
+      const isReferenceInPath = [...event.composedPath()].includes(reference);
+      if (onClose && ref.current && !ref.current.contains(event.target as Node) && !isReferenceInPath) {
+        onClose(event as MouseEvent);
+      }
+    },
+    [onClose, reference],
+  );
+
+  useEventListener(
+    ref.current || null,
+    'transitionend',
+    () => {
+      if (!visible) {
+        setRender(false);
+      }
+    },
+    [visible],
+  );
+
+  if (!render) {
+    return null;
+  }
+
+  const modifiers: any[] = [
+    {
+      name: 'offset',
+      options: {
+        offset: [0, 12],
+      },
+    },
+  ];
+
+  if (sameWidth) {
+    modifiers.push({
+      enabled: true,
+      name: 'sameWidth',
+      phase: 'beforeWrite',
+      requires: ['computeStyles'],
+      fn: ({ state }: any) => {
+        // eslint-disable-next-line no-param-reassign
+        state.styles.popper.width = `${state.rects.reference.width}px`;
+      },
+      effect: ({ state }: any) => {
+        // eslint-disable-next-line no-param-reassign
+        state.elements.popper.style.width = `${state.elements.reference.getBoundingClientRect().width || 0}px`;
+      },
+    });
+  }
+
+  const popperProps: PopperProps<any> = {
+    children: () => null,
+    placement: desiredPlacement,
+    modifiers,
+  };
+
+  if (referenceElement) {
+    popperProps.referenceElement = referenceElement;
+  }
+
+  return createPortal(
+    // eslint-disable-next-line no-return-assign
+    <Popper
+      {...popperProps}
+      // eslint-disable-next-line no-return-assign
+      innerRef={(el) => (ref.current = el || null)}
+      onFirstUpdate={(state) => {
+        setReference(state.elements?.reference);
+      }}
+    >
+      {/* eslint-disable-next-line @typescript-eslint/no-shadow */}
+      {({ arrowProps, placement, ref, update, style }) => {
+        return (
+          // eslint-disable-next-line react/jsx-no-constructed-context-values
+          <PlacementArrowPropsContext.Provider value={{ ...arrowProps, backgroundColor }}>
+            <div
+              className={classnames('Placement', `Placement--${placement}`, {
+                'Placement--above-modal': isInsideModal,
+                'Placement--animate': animatePosition,
+              })}
+              ref={ref}
+              style={style}
+            >
+              {visible && (
+                <div className="Placement__content">
+                  <Base {...rest} backgroundColor={backgroundColor} className="Placement__shadow">
+                    <PlacementManagerContext.Consumer>
+                      {({ referenceNode }) =>
+                        children({
+                          update,
+                          width: (referenceNode && referenceNode.clientWidth) || undefined,
+                        })
+                      }
+                    </PlacementManagerContext.Consumer>
+                  </Base>
+                </div>
+              )}
+            </div>
+          </PlacementArrowPropsContext.Provider>
+        );
+      }}
+    </Popper>,
+    document.body,
+  );
+};
+
+PlacementPopper.defaultProps = {
+  backgroundColor: 'neutral.100',
+  borderRadius: 'x2',
+};
+
+export default PlacementPopper;

package/src/Old/Placement/PlacementReference.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { Reference, ReferenceProps } from 'react-popper';
+import { PlacementManagerContext } from './PlacementManagerContext';
+
+export type Props = ReferenceProps;
+
+/**
+ * The reference component handles setting the target element ref with the
+ * PlacementManager.
+ */
+const PlacementReference: React.FunctionComponent<Props> = (props: Props) => {
+  return (
+    <PlacementManagerContext.Consumer>
+      {({ setReferenceNode }) => <Reference {...props} innerRef={setReferenceNode} />}
+    </PlacementManagerContext.Consumer>
+  );
+};
+
+export default PlacementReference;

package/src/Old/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useEventListener } from './useEventListener';
+export { default as useSyncedStateAndProps } from './useSyncedStateAndProps';

package/src/Old/hooks/useEventListener.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+
+type HTMLElementOrDocumentOrWindow = HTMLElement | Document | Window;
+interface HTMLElementOrDocumentOrWindowEventMap extends HTMLElementEventMap, DocumentEventMap, WindowEventMap {}
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+function useEventListener<E extends Window, K extends keyof WindowEventMap>(
+  el: E | null | undefined,
+  type: K,
+  handler: (evnt: WindowEventMap[K]) => void,
+  watch?: any[],
+): void;
+function useEventListener<E extends Document, K extends keyof DocumentEventMap>(
+  el: E | null | undefined,
+  type: K,
+  handler: (evt: DocumentEventMap[K]) => void,
+  watch?: any[],
+): void;
+function useEventListener<E extends HTMLElement, K extends keyof HTMLElementEventMap>(
+  el: E | null | undefined,
+  type: K,
+  handler: (evt: HTMLElementEventMap[K]) => void,
+  watch?: any[],
+): void;
+function useEventListener<K extends keyof HTMLElementOrDocumentOrWindowEventMap>(
+  el: HTMLElementOrDocumentOrWindow,
+  type: string,
+  handler: (evt: HTMLElementOrDocumentOrWindowEventMap[K]) => void,
+  watch?: any[],
+): void;
+function useEventListener(el: any, type: string, handler: any, watch?: any[]) {
+  useEffect(() => {
+    if (el) {
+      el.addEventListener(type, handler);
+    }
+
+    return () => {
+      if (el) {
+        el.removeEventListener(type, handler);
+      }
+    };
+  }, watch || []);
+}
+
+export default useEventListener;

package/src/Old/hooks/useSyncedStateAndProps.ts

@@ -0,0 +1,14 @@
+import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export default (prop: any) => {
+  const [state, setState] = useState(prop);
+
+  useEffect(() => {
+    if (state !== prop) {
+      setState(prop);
+    }
+  }, [prop]);
+
+  return [state, setState];
+};

package/src/Old/variables.css

@@ -0,0 +1,210 @@
+:root {
+  --size--x1: 0.25rem;
+  --size--x2: 0.5rem;
+  --size--x3: 0.75rem;
+  --size--x4: 1rem;
+  --size--x5: 1.25rem;
+  --size--x6: 1.5rem;
+  --size--x8: 2rem;
+  --size--x10: 2.5rem;
+  --size--x12: 3rem;
+  --size--x16: 4rem;
+
+  --rgb-white: 255, 255, 255;
+  --rgb-black: 34, 34, 34;
+
+  --rgb-gray--1: 248, 248, 248;
+  --rgb-gray--2: 236, 236, 236;
+  --rgb-gray--3: 221, 221, 221;
+  --rgb-gray--4: 204, 204, 204;
+  --rgb-gray--5: 172, 172, 172;
+  --rgb-gray--6: 119, 119, 119;
+  --rgb-gray--7: 97, 97, 97;
+  --rgb-gray--8: 68, 68, 68;
+
+  --rgb-aqua--1: 230, 250, 249;
+  --rgb-aqua--2: 134, 233, 226;
+  --rgb-aqua--3: 13, 211, 197;
+  --rgb-aqua--4: 14, 199, 186;
+  --rgb-aqua--5: 0, 150, 140;
+
+  --rgb-grape--1: 248, 240, 255;
+  --rgb-grape--2: 184, 138, 219;
+  --rgb-grape--3: 118, 15, 195;
+  --rgb-grape--4: 73, 47, 92;
+  --rgb-grape--5: 53, 29, 72;
+
+  --rgb-eggplant: 104, 61, 135;
+
+  --rgb-red--1: 255, 232, 238;
+  --rgb-red--2: 255, 143, 171;
+  --rgb-red--3: 255, 33, 88;
+  --rgb-red--4: 238, 0, 59;
+  --rgb-red--5: 192, 32, 72;
+
+  --rgb-orange--1: 255, 236, 229;
+  --rgb-orange--2: 255, 161, 127;
+  --rgb-orange--3: 255, 68, 0;
+  --rgb-orange--4: 231, 62, 0;
+  --rgb-orange--5: 211, 61, 7;
+
+  --rgb-yellow--1: 255, 249, 229;
+  --rgb-yellow--2: 255, 226, 127;
+  --rgb-yellow--3: 255, 197, 0;
+  --rgb-yellow--4: 236, 182, 0;
+  --rgb-yellow--5: 121, 94, 0;
+
+  --rgb-green--1: 231, 249, 243;
+  --rgb-green--2: 135, 225, 195;
+  --rgb-green--3: 15, 195, 137;
+  --rgb-green--4: 15, 179, 125;
+  --rgb-green--5: 17, 125, 89;
+
+  --rgb-blue--1: 230, 242, 250;
+  --rgb-blue--2: 134, 193, 230;
+  --rgb-blue--3: 13, 131, 205;
+  --rgb-blue--4: 12, 112, 174;
+  --rgb-blue--5: 9, 92, 144;
+
+  --rgb-darkblue--1: 230, 236, 247;
+  --rgb-darkblue--2: 130, 164, 215;
+  --rgb-darkblue--3: 5, 74, 176;
+  --rgb-darkblue--4: 4, 62, 148;
+  --rgb-darkblue--5: 3, 49, 117;
+
+  --rgb-violet--1: 244, 231, 249;
+  --rgb-violet--2: 203, 138, 223;
+  --rgb-violet--3: 153, 15, 195;
+  --rgb-violet--4: 133, 18, 168;
+  --rgb-violet--5: 116, 20, 146;
+
+  --color-overlay--black: rgba(34, 34, 34, 0.8);
+  --color-overlay--grape: rgba(53, 29, 72, 0.8);
+
+  --color-white: var(--colors-neutral-100, #fff);
+  --color-black: var(--colors-neutral-10, #201b22);
+
+  --color-gray--1: var(--colors-neutral-95, #f6f4f6);
+  --color-gray--2: var(--colors-neutral-93, #efebef);
+  --color-gray--3: var(--colors-neutral-90, #dfdae1);
+  --color-gray--4: var(--colors-neutral-80, #c9c1cd);
+  --color-gray--5: var(--colors-neutral-70, #afa4b4);
+  --color-gray--6: var(--colors-neutral-50, #7d7184);
+  --color-gray--7: var(--colors-neutral-40, #6b6071);
+  --color-gray--8: var(--colors-neutral-30, #49404f);
+
+  --color-aqua--1: var(--colors-turquoise-95, #e9fbf9);
+  --color-aqua--2: var(--colors-turquoise-80, #8ae0d7);
+  --color-aqua--3: var(--colors-turquoise-70, #55cec3);
+  --color-aqua--4: var(--colors-turquoise-60, #11bba9);
+  --color-aqua--5: var(--colors-turquoise-50, #009e8e);
+
+  --color-grape--1: var(--colors-purple-95, #f9f2fd);
+  --color-grape--2: var(--colors-purple-70, #c289e6);
+  --color-grape--3: var(--colors-purple-50, #9247c2);
+  --color-grape--4: var(--colors-purple-30, #5c2a7e);
+  --color-grape--5: var(--colors-purple-10, #2b0e3f);
+
+  --color-eggplant: var(--colors-purple-40, #7b3ba5);
+
+  --color-red--1: var(--colors-red-93, #ffe5eb);
+  --color-red--2: var(--colors-red-70, #ff8091);
+  --color-red--3: var(--colors-red-50, #d72d40);
+  --color-red--4: var(--colors-red-40, #a91e2e);
+  --color-red--5: var(--colors-red-30, #78111c);
+
+  --color-orange--1: #FFECE5;
+  --color-orange--2: #FFA17F;
+  --color-orange--3: #FF4400;
+  --color-orange--4: #E73E00;
+  --color-orange--5: #D33D07;
+
+  --color-yellow--1: var(--colors-yellow-95, #fff6d1);
+  --color-yellow--2: var(--colors-yellow-90, #fbe074);
+  --color-yellow--3: var(--colors-yellow-80, #f9cc15);
+  --color-yellow--4: var(--colors-yellow-70, #ebba00);
+  --color-yellow--5: var(--colors-yellow-40, #875b00);
+
+  --color-green--1: var(--colors-green-95, #eef9f1);
+  --color-green--2: var(--colors-green-80, #a1deb2);
+  --color-green--3: var(--colors-green-60, #4eb76c);
+  --color-green--4: var(--colors-green-50, #2a9d4c);
+  --color-green--5: var(--colors-green-40, #167231);
+
+  --color-blue--1: var(--colors-blue-93, #def2fc);
+  --color-blue--2: var(--colors-blue-70, #71b8ef);
+  --color-blue--3: var(--colors-blue-50, #2582d0);
+  --color-blue--4: var(--colors-blue-40, #1066ac);
+  --color-blue--5: var(--colors-blue-30, #044781);
+
+  --color-darkblue--1: var(--colors-blue-93, #def2fc);
+  --color-darkblue--2: var(--colors-blue-60, #4f9bde);
+  --color-darkblue--3: var(--colors-blue-30, #044781);
+  --color-darkblue--4: var(--colors-blue-20, #00315c);
+  --color-darkblue--5: var(--colors-blue-10, #002442);
+
+  --color-violet--1: var(--colors-purple-95, #f9f2fd);
+  --color-violet--2: var(--colors-purple-70, #c289e6);
+  --color-violet--3: var(--colors-purple-40, #7b3ba5);
+  --color-violet--4: var(--colors-purple-30, #5c2a7e);
+  --color-violet--5: var(--colors-purple-20, #421560);
+
+  --rgb-white: 255, 255, 255;
+
+  --rgb-grape--2: 184, 138, 219;
+  
+  --rgb-red--2: 255, 143, 171;
+
+  --rgb-yellow--2: 255, 226, 127;
+  
+  --rgb-green--2: 135, 225, 195;
+  
+  --rgb-blue--2: 134, 193, 230;
+  
+  --color-overlay--black: rgba(34, 34, 34, 0.8);
+
+  --font-family: 'TT Norms Pro', sans-serif;
+  --font-family-monospace: 'Source Code Pro', monospace;
+
+  --font-size--1: 0.6875rem; /* 11px */
+  --font-size--2: 0.875rem; /* 14px */
+  --font-size--3: 1rem; /* 16px */
+  --font-size--4: 1.1875rem; /* 19px */
+  --font-size--5: 1.5rem; /* 24px */
+  --font-size--6: 1.875rem; /* 30px */
+  --font-size--7: 2.25rem; /* 36 px */
+  --font-size--8: 3rem; /* 48px */
+
+  --font-weight--bold: 700;
+
+  --font-weight-monospace--bold: 600;
+
+  --line-height--1: 1rem; /* 16px */
+  --line-height--2: 1.25rem; /* 20px */
+  --line-height--3: 1.5rem; /* 24px */
+  --line-height--4: 1.75rem; /* 28px */
+  --line-height--5: 2.25rem; /* 36px */
+  --line-height--6: 2.5rem; /* 40px */
+  --line-height--7: 3rem; /* 48px */
+  --line-height--8: 3.75rem; /* 60px */
+
+  --letter-spacing--x1: 0.00625rem;
+  --letter-spacing--x2: 0.009375rem;
+  --letter-spacing--x3: 0.0175rem;
+  --letter-spacing--x4: 0.0375rem;
+  --letter-spacing--x5: 0.05rem;
+
+  --transition-duration--fast: 100ms;
+  --transition-duration--base: 200ms;
+  --transition-duration--slow: 400ms;
+  --transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+
+  --shadow-elevation--x1: 0 0.125rem 0.25rem 0 rgba(0, 0, 0, 0.08);
+  --shadow-elevation--x2: 0 0.125rem 0.75rem 0 rgba(0, 0, 0, 0.06);
+  --shadow-elevation--x3: 0 0.125rem 1.5rem 0 rgba(0, 0, 0, 0.08);
+
+  --z-index-Header: 1;
+  --z-index-Sidebar: 1;
+  --z-index-Placement--below-modal: 2;
+  --z-index-Placement--above-modal: 4;
+}