onchain-lexical-ui 0.0.1

package/src/ColorPicker.tsx

@@ -0,0 +1,369 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import {calculateZoomLevel} from '@lexical/utils';
+import {useEffect, useMemo, useRef, useState} from 'react';
+import * as React from 'react';
+
+import Styles from './ColorPicker.module.less';
+import TextInput from './TextInput';
+
+let skipAddingToHistoryStack = false;
+
+interface ColorPickerProps {
+  color: string;
+  onChange?: (value: string, skipHistoryStack: boolean) => void;
+}
+
+export function parseAllowedColor(input: string) {
+  return /^rgb\(\d+, \d+, \d+\)$/.test(input) ? input : '';
+}
+
+const basicColors = [
+  '#d0021b',
+  '#f5a623',
+  '#f8e71c',
+  '#8b572a',
+  '#7ed321',
+  '#417505',
+  '#bd10e0',
+  '#9013fe',
+  '#4a90e2',
+  '#50e3c2',
+  '#b8e986',
+  '#000000',
+  '#4a4a4a',
+  '#9b9b9b',
+  '#ffffff',
+];
+
+const WIDTH = 214;
+const HEIGHT = 150;
+
+export default function ColorPicker({
+  color,
+  onChange,
+}: Readonly<ColorPickerProps>): JSX.Element {
+  const [selfColor, setSelfColor] = useState(transformColor('hex', color));
+  const [inputColor, setInputColor] = useState(color);
+  const innerDivRef = useRef(null);
+
+  const saturationPosition = useMemo(
+    () => ({
+      x: (selfColor.hsv.s / 100) * WIDTH,
+      y: ((100 - selfColor.hsv.v) / 100) * HEIGHT,
+    }),
+    [selfColor.hsv.s, selfColor.hsv.v],
+  );
+
+  const huePosition = useMemo(
+    () => ({
+      x: (selfColor.hsv.h / 360) * WIDTH,
+    }),
+    [selfColor.hsv],
+  );
+
+  const onSetHex = (hex: string) => {
+    setInputColor(hex);
+    if (/^#[0-9A-Fa-f]{6}$/i.test(hex)) {
+      const newColor = transformColor('hex', hex);
+      setSelfColor(newColor);
+    }
+  };
+
+  const onMoveSaturation = ({x, y}: Position) => {
+    const newHsv = {
+      ...selfColor.hsv,
+      s: (x / WIDTH) * 100,
+      v: 100 - (y / HEIGHT) * 100,
+    };
+    const newColor = transformColor('hsv', newHsv);
+    setSelfColor(newColor);
+    setInputColor(newColor.hex);
+  };
+
+  const onMoveHue = ({x}: Position) => {
+    const newHsv = {...selfColor.hsv, h: (x / WIDTH) * 360};
+    const newColor = transformColor('hsv', newHsv);
+
+    setSelfColor(newColor);
+    setInputColor(newColor.hex);
+  };
+
+  useEffect(() => {
+    // Check if the dropdown is actually active
+    if (innerDivRef.current !== null && onChange) {
+      onChange(selfColor.hex, skipAddingToHistoryStack);
+      setInputColor(selfColor.hex);
+    }
+  }, [selfColor, onChange]);
+
+  useEffect(() => {
+    if (color === undefined) {
+      return;
+    }
+    const newColor = transformColor('hex', color);
+    setSelfColor(newColor);
+    setInputColor(newColor.hex);
+  }, [color]);
+
+  return (
+    <div
+      className={Styles['color-picker-wrapper']}
+      style={{width: WIDTH}}
+      ref={innerDivRef}>
+      <TextInput label="Hex" onChange={onSetHex} value={inputColor} />
+      <div className="color-picker-basic-color">
+        {basicColors.map((basicColor) => (
+          <button
+            className={basicColor === selfColor.hex ? ' active' : ''}
+            key={basicColor}
+            style={{backgroundColor: basicColor}}
+            onClick={() => {
+              setInputColor(basicColor);
+              setSelfColor(transformColor('hex', basicColor));
+            }}
+          />
+        ))}
+      </div>
+      <MoveWrapper
+        className="color-picker-saturation"
+        style={{backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`}}
+        onChange={onMoveSaturation}>
+        <div
+          className="color-picker-saturation_cursor"
+          style={{
+            backgroundColor: selfColor.hex,
+            left: saturationPosition.x,
+            top: saturationPosition.y,
+          }}
+        />
+      </MoveWrapper>
+      <MoveWrapper className="color-picker-hue" onChange={onMoveHue}>
+        <div
+          className="color-picker-hue_cursor"
+          style={{
+            backgroundColor: `hsl(${selfColor.hsv.h}, 100%, 50%)`,
+            left: huePosition.x,
+          }}
+        />
+      </MoveWrapper>
+      <div
+        className="color-picker-color"
+        style={{backgroundColor: selfColor.hex}}
+      />
+    </div>
+  );
+}
+
+export interface Position {
+  x: number;
+  y: number;
+}
+
+interface MoveWrapperProps {
+  className?: string;
+  style?: React.CSSProperties;
+  onChange: (position: Position) => void;
+  children: JSX.Element;
+}
+
+function MoveWrapper({className, style, onChange, children}: MoveWrapperProps) {
+  const divRef = useRef<HTMLDivElement>(null);
+  const draggedRef = useRef(false);
+
+  const move = (e: React.MouseEvent | MouseEvent): void => {
+    if (divRef.current) {
+      const {current: div} = divRef;
+      const {width, height, left, top} = div.getBoundingClientRect();
+      const zoom = calculateZoomLevel(div);
+      const x = clamp(e.clientX / zoom - left, width, 0);
+      const y = clamp(e.clientY / zoom - top, height, 0);
+
+      onChange({x, y});
+    }
+  };
+
+  const onMouseDown = (e: React.MouseEvent): void => {
+    if (e.button !== 0) {
+      return;
+    }
+
+    move(e);
+
+    const onMouseMove = (_e: MouseEvent): void => {
+      draggedRef.current = true;
+      skipAddingToHistoryStack = true;
+      move(_e);
+    };
+
+    const onMouseUp = (_e: MouseEvent): void => {
+      if (draggedRef.current) {
+        skipAddingToHistoryStack = false;
+      }
+
+      document.removeEventListener('mousemove', onMouseMove, false);
+      document.removeEventListener('mouseup', onMouseUp, false);
+
+      move(_e);
+      draggedRef.current = false;
+    };
+
+    document.addEventListener('mousemove', onMouseMove, false);
+    document.addEventListener('mouseup', onMouseUp, false);
+  };
+
+  return (
+    <div
+      ref={divRef}
+      className={className}
+      style={style}
+      onMouseDown={onMouseDown}>
+      {children}
+    </div>
+  );
+}
+
+function clamp(value: number, max: number, min: number) {
+  return value > max ? max : value < min ? min : value;
+}
+
+interface RGB {
+  b: number;
+  g: number;
+  r: number;
+}
+interface HSV {
+  h: number;
+  s: number;
+  v: number;
+}
+interface Color {
+  hex: string;
+  hsv: HSV;
+  rgb: RGB;
+}
+
+export function toHex(value: string): string {
+  if (!value.startsWith('#')) {
+    const ctx = document.createElement('canvas').getContext('2d');
+
+    if (!ctx) {
+      throw new Error('2d context not supported or canvas already initialized');
+    }
+
+    ctx.fillStyle = value;
+
+    return ctx.fillStyle;
+  } else if (value.length === 4 || value.length === 5) {
+    value = value
+      .split('')
+      .map((v, i) => (i ? v + v : '#'))
+      .join('');
+
+    return value;
+  } else if (value.length === 7 || value.length === 9) {
+    return value;
+  }
+
+  return '#000000';
+}
+
+function hex2rgb(hex: string): RGB {
+  const rbgArr = (
+    hex
+      .replace(
+        /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
+        (m, r, g, b) => '#' + r + r + g + g + b + b,
+      )
+      .substring(1)
+      .match(/.{2}/g) || []
+  ).map((x) => parseInt(x, 16));
+
+  return {
+    b: rbgArr[2],
+    g: rbgArr[1],
+    r: rbgArr[0],
+  };
+}
+
+function rgb2hsv({r, g, b}: RGB): HSV {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+
+  const max = Math.max(r, g, b);
+  const d = max - Math.min(r, g, b);
+
+  const h = d
+    ? (max === r
+        ? (g - b) / d + (g < b ? 6 : 0)
+        : max === g
+        ? 2 + (b - r) / d
+        : 4 + (r - g) / d) * 60
+    : 0;
+  const s = max ? (d / max) * 100 : 0;
+  const v = max * 100;
+
+  return {h, s, v};
+}
+
+function hsv2rgb({h, s, v}: HSV): RGB {
+  s /= 100;
+  v /= 100;
+
+  const i = ~~(h / 60);
+  const f = h / 60 - i;
+  const p = v * (1 - s);
+  const q = v * (1 - s * f);
+  const t = v * (1 - s * (1 - f));
+  const index = i % 6;
+
+  const r = Math.round([v, q, p, p, t, v][index] * 255);
+  const g = Math.round([t, v, v, q, p, p][index] * 255);
+  const b = Math.round([p, p, t, v, v, q][index] * 255);
+
+  return {b, g, r};
+}
+
+function rgb2hex({b, g, r}: RGB): string {
+  return '#' + [r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('');
+}
+
+function transformColor<M extends keyof Color, C extends Color[M]>(
+  format: M,
+  color: C,
+): Color {
+  let hex: Color['hex'] = toHex('#121212');
+  let rgb: Color['rgb'] = hex2rgb(hex);
+  let hsv: Color['hsv'] = rgb2hsv(rgb);
+
+  if (format === 'hex') {
+    const value = color as Color['hex'];
+
+    hex = toHex(value);
+    rgb = hex2rgb(hex);
+    hsv = rgb2hsv(rgb);
+  } else if (format === 'rgb') {
+    const value = color as Color['rgb'];
+
+    rgb = value;
+    hex = rgb2hex(rgb);
+    hsv = rgb2hsv(rgb);
+  } else if (format === 'hsv') {
+    const value = color as Color['hsv'];
+
+    hsv = value;
+    rgb = hsv2rgb(hsv);
+    hex = rgb2hex(rgb);
+  }
+
+  return {hex, hsv, rgb};
+}

package/src/ContentEditable.module.less

@@ -0,0 +1,78 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ *
+ */
+.ContentEditable__root {
+  border: 0;
+  font-size: 15px;
+  display: block;
+  position: relative;
+  outline: 0;
+  // padding: 8px 46px 40px;
+  min-height: 150px;
+  & > [instance='true'] {
+    position: relative;
+    background-color: #f9f9f9;
+    border-left: 26px solid #e6e6e6;
+    padding: 0 10px;
+    margin-bottom: 6px;
+    > [number='true'] {
+      left: 10px;
+    }
+    > [bar='true'] {
+      & [data-bar='right'] {
+        right: 10px;
+      }
+    }
+    & [instance='true'] {
+      border-top: 6px solid transparent;
+      &::before {
+        content: '';
+        display: block;
+        background-color: #fff;
+        height: 6px;
+        position: absolute;
+        top: -6px;
+        left: -36px;
+        right: -10px;
+
+      }
+      > [bar='true'] {
+        & [data-bar='left'] {
+          left: -10px;
+        }
+      }
+    }
+  }
+}
+/* @media (max-width: 1025px) {
+  .ContentEditable__root {
+    padding-left: 8px;
+    padding-right: 8px;
+  }
+} */
+
+.ContentEditable__placeholder {
+  font-size: 15px;
+  color: #999;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  top: 8px;
+  left: 46px;
+  right: 28px;
+  user-select: none;
+  white-space: nowrap;
+  display: inline-block;
+  pointer-events: none;
+}
+@media (max-width: 1025px) {
+  .ContentEditable__placeholder {
+    left: 8px;
+    right: 8px;
+  }
+}

package/src/ContentEditable.tsx

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import {ContentEditable} from '@lexical/react/LexicalContentEditable';
+import * as React from 'react';
+
+import Styles from './ContentEditable.module.less';
+
+type Props = {
+  className?: string;
+  placeholderClassName?: string;
+  placeholder: string;
+};
+
+export default function LexicalContentEditable({
+  className,
+  placeholder,
+  placeholderClassName,
+}: Props): JSX.Element {
+  return (
+    <ContentEditable
+      className={className ?? Styles.ContentEditable__root}
+      aria-placeholder={placeholder}
+      placeholder={
+        <div
+          className={
+            placeholderClassName ?? Styles.ContentEditable__placeholder
+          }>
+          {placeholder}
+        </div>
+      }
+    />
+  );
+}

package/src/Dialog.module.less

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+.DialogActions {
+  display: flex;
+  flex-direction: row;
+  justify-content: right;
+  margin-top: 20px;
+}
+
+.DialogButtonsList {
+  display: flex;
+  flex-direction: column;
+  justify-content: right;
+  button {
+    margin-bottom: 20px;
+  }
+}

package/src/Dialog.tsx

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import type {JSX} from 'react';
+
+import * as React from 'react';
+import {ReactNode} from 'react';
+
+import Styles from './Dialog.module.less';
+
+type Props = Readonly<{
+  'data-test-id'?: string;
+  children: ReactNode;
+}>;
+
+export function DialogButtonsList({children}: Props): JSX.Element {
+  return <div className={Styles.DialogButtonsList}>{children}</div>;
+}
+
+export function DialogActions({
+  'data-test-id': dataTestId,
+  children,
+}: Props): JSX.Element {
+  return (
+    <div className={Styles.DialogActions} data-test-id={dataTestId}>
+      {children}
+    </div>
+  );
+}

package/src/DropDown.module.less

@@ -0,0 +1,95 @@
+.dropdown {
+  z-index: 100;
+  display: block;
+  position: fixed;
+  box-shadow:
+    0 12px 28px 0 rgba(0, 0, 0, 0.2),
+    0 2px 4px 0 rgba(0, 0, 0, 0.1),
+    inset 0 0 0 1px rgba(255, 255, 255, 0.5);
+  // border-radius: 8px;
+  min-height: 40px;
+  background-color: #fff;
+  z-index: 1000;
+  :global {
+    .item {
+      margin: 0 8px 0 8px;
+      padding: 8px;
+      color: #050505;
+      cursor: pointer;
+      line-height: 16px;
+      font-size: 15px;
+      display: flex;
+      align-content: center;
+      flex-direction: row;
+      flex-shrink: 0;
+      justify-content: space-between;
+      background-color: #fff;
+      // border-radius: 8px;
+      border: 0;
+      max-width: 250px;
+      min-width: 100px;
+      &:first-child {
+        margin-top: 8px;
+      }
+
+      &:last-child {
+        margin-bottom: 8px;
+      }
+
+      &:hover {
+        background-color: #eee;
+      }
+
+      &.wide {
+        align-items: center;
+        width: 248px;
+
+        .icon-text-container {
+          display: flex;
+
+          .text {
+            min-width: 120px;
+          }
+        }
+      }
+
+      .shortcut {
+        color: #939393;
+        align-self: flex-end;
+      }
+
+      .active {
+        display: flex;
+        width: 20px;
+        height: 20px;
+        background-size: contain;
+      }
+
+      .text {
+        display: flex;
+        line-height: 20px;
+        flex-grow: 1;
+        min-width: 150px;
+      }
+
+      .icon {
+        display: flex;
+        width: 20px;
+        height: 20px;
+        user-select: none;
+        margin-right: 12px;
+        line-height: 16px;
+        background-size: contain;
+        background-position: center;
+        background-repeat: no-repeat;
+      }
+    }
+
+    .divider {
+      width: auto;
+      background-color: #eee;
+      margin: 4px 8px;
+      height: 1px;
+    }
+  }
+}