refactor flow components

src/containers/flow/FlowGrid/components/FlowCell/components/CellShade/index.tsx

@@ -0,0 +1,41 @@
+import { FC, useMemo } from 'react';
+
+import classNames from 'classnames';
+import { transparentize } from 'color2k';
+
+import { DEFAULT_DOMINANT_COLOR } from '~/constants/node';
+import { normalizeBrightColor } from '~/utils/color';
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface Props extends DivProps {
+  color?: string;
+  size?: number;
+  angle?: number;
+}
+
+const CellShade: FC<Props> = ({ color, size = 50, angle = 7, ...rest }) => {
+  const background = useMemo(() => {
+    const normalized = normalizeBrightColor(color);
+
+    if (!color || color === DEFAULT_DOMINANT_COLOR || !normalized) {
+      return undefined;
+    }
+
+    return `linear-gradient(${angle}deg, ${normalized} ${size}px, ${transparentize(
+      normalized,
+      1,
+    )} ${size * 5}px)`;
+  }, [angle, color, size]);
+
+  return (
+    <div
+      {...rest}
+      className={classNames(rest.className, styles.shade)}
+      style={{ background }}
+    />
+  );
+};
+
+export { CellShade };

src/containers/flow/FlowGrid/components/FlowCell/components/CellShade/styles.module.scss

@@ -0,0 +1,17 @@
+@import 'src/styles/variables';
+
+.shade {
+  background: linear-gradient(7deg, $content_bg 30px, transparent 250px);
+  pointer-events: none;
+  touch-action: none;
+
+  &.black::after {
+    content: ' ';
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    width: 10px;
+    height: 10px;
+    background-color: blue;
+  }
+}

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellImage/index.tsx

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+import Image from 'next/image';
+
+import { IMGProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface Props extends IMGProps {
+  height?: number;
+}
+
+const FlowCellImage: FC<Props> = ({
+  className,
+  children,
+  src,
+  alt,
+  ...rest
+}) => (
+  <div className={classNames(styles.wrapper, className)}>
+    <Image
+      {...rest}
+      src={src!}
+      alt={alt}
+      placeholder="empty"
+      layout="fill"
+      objectFit="cover"
+      loading="lazy"
+    />
+    {children}
+  </div>
+);
+
+export { FlowCellImage };

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellImage/styles.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/index.tsx

@@ -0,0 +1,77 @@
+import { FC } from 'react';
+
+import classNames from 'classnames';
+
+import { Group } from '~/components/common/Group';
+import { Icon } from '~/components/common/Icon';
+import { Toggle } from '~/components/input/Toggle';
+import { FlowDisplayVariant } from '~/types';
+
+import styles from './styles.module.scss';
+
+interface Props {
+  onClose: () => void;
+  currentView: FlowDisplayVariant;
+  descriptionEnabled: boolean;
+  hasDescription: boolean;
+  toggleViewDescription: () => void;
+  setViewSingle: () => void;
+  setViewHorizontal: () => void;
+  setViewVertical: () => void;
+  setViewQuadro: () => void;
+}
+
+const FlowCellMenu: FC<Props> = ({
+  onClose,
+  hasDescription,
+  toggleViewDescription,
+  descriptionEnabled,
+  setViewSingle,
+  setViewHorizontal,
+  setViewVertical,
+  setViewQuadro,
+}) => {
+  return (
+    <div className={classNames(styles.dropdown)}>
+      {onClose && (
+        <button className={styles.close} onClick={onClose} type="button">
+          <Icon icon="close" size={24} />
+        </button>
+      )}
+
+      <div className={styles.menu}>
+        <div className={styles.display}>
+          <Icon icon="cell-single" onMouseDown={setViewSingle} size={48} />
+          <Icon
+            icon={descriptionEnabled ? 'cell-double-h-text' : 'cell-double-h'}
+            onMouseDown={setViewHorizontal}
+            size={48}
+          />
+          <Icon
+            icon={descriptionEnabled ? 'cell-double-v-text' : 'cell-double-v'}
+            onMouseDown={setViewVertical}
+            size={48}
+          />
+          <Icon
+            icon={descriptionEnabled ? 'cell-quadro-text' : 'cell-quadro'}
+            onMouseDown={setViewQuadro}
+            size={48}
+          />
+        </div>
+
+        {hasDescription && (
+          <Group
+            className={styles.description}
+            horizontal
+            onClick={toggleViewDescription}
+          >
+            <Toggle color="white" value={descriptionEnabled} />
+            <span>Текст</span>
+          </Group>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export { FlowCellMenu };

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellMenu/styles.module.scss

@@ -0,0 +1,64 @@
+@import 'src/styles/variables';
+
+.dropdown {
+  @include outer_shadow;
+  @include blur($content_bg_info);
+
+  width: 100%;
+  height: 100%;
+  border-radius: $radius;
+  padding: $gap;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.menu {
+  display: grid;
+  grid-auto-flow: row;
+  fill: white;
+  grid-row-gap: $gap;
+
+  svg {
+    fill: white;
+    stroke: white;
+    cursor: pointer;
+  }
+}
+
+.sep {
+  @include outer_shadow;
+  height: 1px;
+}
+
+.display {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-row-gap: $gap;
+  grid-column-gap: $gap;
+}
+
+.description {
+  margin-top: $gap;
+  font: $font_12_semibold;
+  text-transform: uppercase;
+  display: flex;
+  flex-direction: row;
+  padding: 0 4px;
+
+  span {
+    flex: 1;
+    text-align: right;
+  }
+}
+
+.close {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/index.tsx

@@ -0,0 +1,23 @@
+import { FC, ReactElement } from 'react';
+
+import classNames from 'classnames';
+
+import { Markdown } from '~/components/common/Markdown';
+import { formatText } from '~/utils/dom';
+import { DivProps } from '~/utils/types';
+
+import styles from './styles.module.scss';
+
+interface Props extends DivProps {
+  children: string;
+  heading: string | ReactElement;
+}
+
+const FlowCellText: FC<Props> = ({ children, heading, ...rest }) => (
+  <div {...rest} className={classNames(styles.text, rest.className)}>
+    {heading && <div className={styles.heading}>{heading}</div>}
+    <Markdown className={styles.description}>{formatText(children)}</Markdown>
+  </div>
+);
+
+export { FlowCellText };

src/containers/flow/FlowGrid/components/FlowCell/components/FlowCellText/styles.module.scss

@@ -0,0 +1,10 @@
+@import "src/styles/variables";
+
+.text {
+  padding: $gap;
+  line-height: 1.3em;
+}
+
+.heading {
+  margin-bottom: 0.4em;
+}

src/containers/flow/FlowGrid/components/FlowCell/index.tsx

@@ -0,0 +1,146 @@
+import { FC, useMemo } from 'react';
+
+import classNames from 'classnames';
+
+import { Anchor } from '~/components/common/Anchor';
+import { MenuDots } from '~/components/menu/MenuDots';
+import { useClickOutsideFocus } from '~/hooks/dom/useClickOutsideFocus';
+import { useWindowSize } from '~/hooks/dom/useWindowSize';
+import { useFlowCellControls } from '~/hooks/flow/useFlowCellControls';
+import { FlowDisplay, INode } from '~/types';
+
+import { CellShade } from './components/CellShade';
+import { FlowCellImage } from './components/FlowCellImage';
+import { FlowCellMenu } from './components/FlowCellMenu';
+import { FlowCellText } from './components/FlowCellText';
+import styles from './styles.module.scss';
+
+interface Props {
+  id: INode['id'];
+  to: string;
+  title: string;
+  image?: string;
+  color?: string;
+
+  text?: string;
+  flow: FlowDisplay;
+  canEdit?: boolean;
+  onChangeCellView: (id: INode['id'], flow: FlowDisplay) => void;
+}
+
+const FlowCell: FC<Props> = ({
+  id,
+  color,
+  to,
+  image,
+  flow,
+  text,
+  title,
+  canEdit = false,
+  onChangeCellView,
+}) => {
+  const { isTablet } = useWindowSize();
+
+  const withText =
+    ((!!flow.display && flow.display !== 'single') || !image) &&
+    flow.show_description &&
+    !!text;
+  const {
+    hasDescription,
+    setViewHorizontal,
+    setViewVertical,
+    setViewQuadro,
+    setViewSingle,
+    toggleViewDescription,
+  } = useFlowCellControls(id, text, flow, onChangeCellView);
+  const {
+    isActive: isMenuActive,
+    activate,
+    ref,
+    deactivate,
+  } = useClickOutsideFocus();
+
+  const shadeSize = useMemo(() => {
+    const min = isTablet ? 10 : 15;
+    const max = isTablet ? 20 : 40;
+
+    return withText ? min : max;
+  }, [withText, isTablet]);
+
+  const shadeAngle = useMemo(() => {
+    if (flow.display === 'vertical') {
+      return 9;
+    }
+
+    if (flow.display === 'horizontal') {
+      return 15;
+    }
+
+    return 7;
+  }, [flow.display]);
+
+  return (
+    <div
+      className={classNames(styles.cell, styles[flow.display || 'single'])}
+      ref={ref as any}
+    >
+      {canEdit && !isMenuActive && (
+        <div className={styles.menu}>
+          <MenuDots onClick={activate} />
+        </div>
+      )}
+
+      {canEdit && isMenuActive && (
+        <div className={styles.display_modal}>
+          <FlowCellMenu
+            onClose={deactivate}
+            currentView={flow.display}
+            descriptionEnabled={flow.show_description}
+            hasDescription={hasDescription}
+            setViewHorizontal={setViewHorizontal}
+            setViewQuadro={setViewQuadro}
+            setViewSingle={setViewSingle}
+            setViewVertical={setViewVertical}
+            toggleViewDescription={toggleViewDescription}
+          />
+        </div>
+      )}
+
+      <Anchor className={styles.link} href={to}>
+        {withText && (
+          <FlowCellText
+            className={styles.text}
+            heading={<h4 className={styles.title}>{title}</h4>}
+          >
+            {text!}
+          </FlowCellText>
+        )}
+
+        {image && (
+          <FlowCellImage
+            src={image}
+            className={styles.thumb}
+            style={{ backgroundColor: color }}
+          />
+        )}
+
+        {!!title && (
+          <CellShade
+            color={color}
+            className={styles.shade}
+            size={shadeSize}
+            angle={shadeAngle}
+          />
+        )}
+
+        {!withText && (
+          <div className={styles.title_wrapper}>
+            <h4 className={styles.title}>{title}</h4>
+          </div>
+        )}
+      </Anchor>
+    </div>
+  );
+};
+
+export { FlowCell };

src/containers/flow/FlowGrid/components/FlowCell/styles.module.scss

@@ -0,0 +1,118 @@
+@import 'src/styles/variables';
+
+.cell {
+  @include inner_shadow;
+
+  position: relative;
+  overflow: hidden;
+  border-radius: $radius;
+  width: 100%;
+  height: 100%;
+  background: $content_bg;
+}
+
+.thumb {
+  @include outer_shadow;
+
+  border-radius: $radius;
+  overflow: hidden;
+  position: relative;
+  z-index: 0;
+}
+
+.shade {
+  @include outer_shadow;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+}
+
+.text {
+  position: absolute;
+  bottom: 5px;
+  left: 5px;
+  z-index: 1;
+  overflow: hidden;
+  border-radius: $radius;
+  max-height: calc(100% - 10px);
+  max-width: calc(100% - 10px);
+  box-sizing: border-box;
+  font: $font_16_regular;
+
+  @include tablet {
+    font: $font_14_regular;
+    left: 5px;
+    bottom: 5px;
+  }
+
+  & :global(.grey) {
+    color: inherit;
+    opacity: 0.5;
+  }
+
+  .quadro &,
+  .horizontal & {
+    max-width: calc(50% - 15px);
+  }
+
+  .quadro &,
+  .vertical & {
+    max-height: calc(50% - 15px);
+  }
+}
+
+.title_wrapper {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 10;
+  padding: $gap;
+  position: absolute;
+}
+
+.title {
+  font: $font_cell_title;
+  text-transform: uppercase;
+  word-break: break-word;
+
+  @include tablet {
+    font: $font_18_semibold;
+  }
+}
+
+.menu {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 6;
+}
+
+.link {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: row;
+  color: inherit;
+  text-decoration: inherit;
+  font: inherit;
+  line-height: inherit;
+
+  &.vertical {
+    flex-direction: column-reverse;
+  }
+}
+
+.display_modal {
+  @include appear;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 11;
+}