@tremolo-ui/react 0.4.0 → 0.6.0

package/src/components/Piano/key.tsx

@@ -1,205 +0,0 @@
-import clsx from 'clsx'
-import React, {
-  CSSProperties,
-  ComponentPropsWithoutRef,
-  forwardRef,
-  useImperativeHandle,
-  useState,
-  ReactElement,
-} from 'react'
-
-import { usePianoContext } from './context'
-import { KeyLabel, KeyLabelProps } from './KeyLabel'
-
-export interface KeyProps {
-  noteNumber: number
-
-  width?: number
-  height?: number | `${number}%`
-
-  bg?: string
-  color?: string
-  activeBg?: string
-  activeColor?: string
-
-  style?: CSSProperties
-
-  /**
-   * \<KeyLabel />
-   */
-  children?: ReactElement
-
-  /** @internal */
-  __width?: number
-}
-
-export interface KeyMethods {
-  play: (velocity?: number) => void
-  stop: () => void
-  played: () => boolean
-}
-
-type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
-type ImplProps = Props & { keyType: 'black' | 'white' }
-
-export const defaultWhiteKeyWidth = 40
-export const defaultBlackKeyWidth = 26
-
-const KeyImpl = forwardRef<KeyMethods, ImplProps>(
-  (
-    {
-      keyType,
-      noteNumber,
-      width,
-      height,
-      bg,
-      color,
-      activeBg,
-      activeColor,
-      className,
-      style,
-      children,
-      __width,
-      ...props
-    }: ImplProps,
-    ref,
-  ) => {
-    const [played, setPlayed] = useState(false)
-    const midiMax = usePianoContext((s) => s.midiMax)
-    const fill = usePianoContext((s) => s.fill)
-    // const glissando = usePianoContext(s => s.glissando)
-    const onPlayNote = usePianoContext((s) => s.onPlayNote)
-    const onStopNote = usePianoContext((s) => s.onStopNote)
-    const label = usePianoContext((s) => s.label)
-    const notePosition = usePianoContext((s) => s.notePosition)
-    const position = notePosition(noteNumber)
-
-    const disabled = noteNumber > midiMax
-    const colors = {
-      '--bg': bg,
-      '--color': color,
-      '--active-bg': activeBg,
-      '--active-color': activeColor,
-    }
-
-    useImperativeHandle(ref, () => {
-      return {
-        play(velocity) {
-          if (disabled) return
-          setPlayed(true)
-          if (onPlayNote) onPlayNote(noteNumber, velocity)
-        },
-        stop() {
-          setPlayed(false)
-          if (onStopNote) onStopNote(noteNumber)
-        },
-        played() {
-          return played
-        },
-      }
-    }, [disabled, noteNumber, onPlayNote, onStopNote, played])
-
-    let keyLabelProps: KeyLabelProps = {}
-    if (children != undefined) {
-      React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child)) {
-          if (child.type == KeyLabel) {
-            keyLabelProps = child.props as KeyLabelProps
-          } else {
-            throw new Error('only <KeyLabel>')
-          }
-        } else {
-          throw new Error('children is an invalid element.')
-        }
-      })
-    }
-
-    return (
-      <div
-        className={clsx(`tremolo-piano-${keyType}-key`, className)}
-        aria-disabled={disabled}
-        data-active={played}
-        style={{
-          ...colors,
-          left: position,
-          width: fill ? __width : width,
-          height: height,
-          ...style,
-        }}
-        // onPointerDown={() => {
-        //   if (disabled) return
-        //   setPlayed(true)
-        //   if (onPlayNote) onPlayNote(noteNumber)
-        // }}
-        // onPointerEnter={() => {
-        //   if (disabled) return
-        //   if (glissando) {
-        //     setPlayed(true)
-        //     if (onPlayNote) onPlayNote(noteNumber)
-        //   }
-        // }}
-        // onPointerUp={() => {
-        //   if (disabled) return
-        //   setPlayed(false)
-        //   if (onStopNote) onStopNote(noteNumber)
-        // }}
-        // onPointerLeave={() => {
-        //   if (disabled) return
-        //   if (glissando) {
-        //     setPlayed(false)
-        //     if (onStopNote) onStopNote(noteNumber)
-        //   }
-        // }}
-        {...props}
-      >
-        <KeyLabel label={label} __note={noteNumber} {...keyLabelProps} />
-      </div>
-    )
-  },
-)
-
-export const WhiteKey = forwardRef<KeyMethods, Props>(
-  (
-    {
-      width = defaultWhiteKeyWidth,
-      height = '100%',
-      onContextMenu = (e) => e.preventDefault(),
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    return (
-      <KeyImpl
-        ref={ref}
-        keyType="white"
-        width={width}
-        height={height}
-        onContextMenu={onContextMenu}
-        {...props}
-      />
-    )
-  },
-)
-
-export const BlackKey = forwardRef<KeyMethods, Props>(
-  (
-    {
-      width = defaultBlackKeyWidth,
-      height = '60%',
-      onContextMenu = (e) => e.preventDefault(),
-      ...props
-    }: Props,
-    ref,
-  ) => {
-    return (
-      <KeyImpl
-        ref={ref}
-        keyType="black"
-        width={width}
-        height={height}
-        onContextMenu={onContextMenu}
-        {...props}
-      />
-    )
-  },
-)

package/src/components/Piano/keyboardShortcuts.ts

@@ -1,31 +0,0 @@
-export type KeyboardShortcuts = {
-  keys: string[]
-  // TODO
-  flags?: {
-    naturalOnly?: boolean
-  }
-}
-
-export const SHORTCUTS = {
-  HOME_ROW: {
-    keys: [
-      'a',
-      'w',
-      's',
-      'e',
-      'd',
-      'f',
-      't',
-      'g',
-      'y',
-      'h',
-      'u',
-      'j',
-      'k',
-      'o',
-      'l',
-      'p',
-      ';',
-    ],
-  },
-}

package/src/components/PointsEditor/index.css

@@ -1,30 +0,0 @@
-.tremolo-points-editor {
-  position: relative;
-}
-
-.tremolo-points-editor-background {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-}
-
-.tremolo-points-editor-container {
-  position: absolute;
-  inset: 0;
-  z-index: 10;
-}
-
-.tremolo-points-editor-point {
-  --color: oklch(59.5% 0.17548 266.373);
-
-  position: absolute;
-  border-radius: 50%;
-  outline: none;
-  cursor: grab;
-  background-color: var(--color);
-  translate: -50% -50%;
-
-  &[data-dragging='true'] {
-    cursor: inherit;
-  }
-}

package/src/components/Slider/Scale.tsx

@@ -1,52 +0,0 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, ReactNode } from 'react'
-
-import { xor } from '@tremolo-ui/functions'
-
-import { useSliderContext } from './context'
-import { ScaleOption } from './ScaleOption'
-import { generateOptionsList, ScaleOptions } from './type'
-
-export interface ScaleProps {
-  gap?: number | string
-  options?: ScaleOptions
-  children?: ReactNode
-}
-
-export function Scale({
-  gap = 6,
-  options,
-  children,
-  className,
-  style,
-  ...props
-}: ScaleProps & Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>) {
-  const min = useSliderContext((s) => s.min)
-  const max = useSliderContext((s) => s.max)
-  const step = useSliderContext((s) => s.step)
-  const vertical = useSliderContext((s) => s.vertical)
-  const reverse = useSliderContext((s) => s.reverse)
-
-  const optionsList = options
-    ? generateOptionsList(options, min, max, step)
-    : []
-  if (xor(vertical, reverse)) optionsList.reverse()
-
-  return (
-    <div
-      className={clsx('tremolo-slider-scale', className)}
-      style={{
-        marginLeft: vertical ? gap : undefined,
-        marginTop: !vertical ? gap : undefined,
-        ...style,
-      }}
-      {...props}
-    >
-      {options
-        ? optionsList.map(({ value, type }, index) => {
-            return <ScaleOption key={index} value={value} type={type} />
-          })
-        : children}
-    </div>
-  )
-}

package/src/components/Slider/ScaleOption.tsx

@@ -1,103 +0,0 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
-
-import { toFixed, xor, normalizeValue } from '@tremolo-ui/functions'
-
-import { useSliderContext } from './context'
-import { ScaleType } from './type'
-
-export interface ScaleOptionProps {
-  // required
-  value: number
-
-  // optional
-  type?: ScaleType
-  /** Display text instead of value. */
-  label?: string
-  /** mark thickness */
-  thickness?: number | string
-  /** mark length */
-  length?: number | string
-  /** Gap between mark and label. */
-  gap?: number | string
-  labelWidth?: number | string
-  classes?: {
-    mark?: string
-    label?: string
-  }
-  styles?: {
-    mark?: CSSProperties
-    label?: CSSProperties
-  }
-}
-
-export function ScaleOption({
-  value,
-  type = 'mark-number',
-  label,
-  thickness = 1,
-  length = '0.5rem',
-  gap = 2,
-  labelWidth,
-  classes,
-  styles,
-  className,
-  style,
-  ...props
-}: ScaleOptionProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>) {
-  const min = useSliderContext((s) => s.min)
-  const max = useSliderContext((s) => s.max)
-  const skew = useSliderContext((s) => s.skew)
-  const vertical = useSliderContext((s) => s.vertical)
-  const reverse = useSliderContext((s) => s.reverse)
-
-  const calcPercent = useCallback(
-    (rawValue: number) => {
-      return toFixed(
-        xor(vertical, reverse)
-          ? 100 - normalizeValue(rawValue, min, max, skew) * 100
-          : normalizeValue(rawValue, min, max, skew) * 100,
-      )
-    },
-    [vertical, reverse, max, min, skew],
-  )
-
-  return (
-    <div
-      className={clsx('tremolo-slider-scale-option', className)}
-      style={{
-        left: !vertical ? `${calcPercent(value)}%` : undefined,
-        top: vertical ? `${calcPercent(value)}%` : undefined,
-        ...style,
-      }}
-      data-vertical={vertical}
-      {...props}
-    >
-      {type != 'number' && (
-        <div
-          className={clsx('tremolo-slider-scale-option-mark', classes?.mark)}
-          style={{
-            width: !vertical ? thickness : length,
-            height: vertical ? thickness : length,
-            marginBottom: !vertical ? gap : undefined,
-            marginRight: vertical ? gap : undefined,
-            ...styles?.mark,
-          }}
-          data-vertical={vertical}
-        ></div>
-      )}
-      {type != 'mark' && (
-        <div
-          className={clsx('tremolo-slider-scale-option-label', classes?.label)}
-          style={{
-            width: labelWidth,
-            ...styles?.label,
-          }}
-        >
-          {label || value}
-        </div>
-      )}
-    </div>
-  )
-}

package/src/components/Slider/index.css

@@ -1,112 +0,0 @@
-.tremolo-slider {
-  display: inline-block;
-  cursor: pointer;
-  outline: 0;
-  -webkit-tap-highlight-color: transparent;
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-slider-thumb-wrapper {
-  position: absolute;
-  translate: -50% -50%;
-  z-index: 100;
-}
-
-.tremolo-slider-thumb {
-  --color: oklch(59.5% 0.17548 266.373);
-
-  background: var(--color);
-  border-radius: 50%;
-  outline: none;
-
-  &[aria-disabled='true'] {
-    background: oklch(50.462% 0.03307 270.021);
-  }
-
-  &[aria-readonly='false']:focus {
-    box-shadow: 0px 0px 0px 3px
-      color-mix(in srgb, var(--color) 20%, transparent);
-  }
-}
-
-.tremolo-slider-track {
-  --active: oklch(69.212% 0.12903 267.633);
-  --inactive: oklch(95% 0 0);
-
-  position: relative;
-
-  &[data-vertical='false'] {
-    min-width: 50px;
-  }
-
-  &[data-vertical='true'] {
-    min-height: 50px;
-  }
-
-  &:hover {
-    --active: oklch(64.276% 0.15244 266.932);
-    --inactive: #e0e0e0;
-  }
-
-  &[aria-disabled='true'] {
-    --active: oklch(75.327% 0.01237 264.547);
-    --inactive: oklch(89.755% 0.0001 271.152);
-  }
-}
-
-.tremolo-slider-scale {
-  display: block;
-  position: relative;
-}
-
-.tremolo-slider-scale-option {
-  display: flex;
-  color: oklch(25.197% 0.00003 271.152);
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  translate: -50% 0;
-  z-index: 10;
-
-  &[data-vertical='true'] {
-    flex-direction: row;
-    translate: 0 -50%;
-  }
-}
-
-.tremolo-slider-scale-option-mark {
-  background-color: currentColor;
-}
-
-.tremolo-slider-scale-option-label {
-  text-align: right;
-}
-
-:where(.dark, [data-theme='dark']) {
-  .tremolo-slider-thumb {
-    --color: oklch(64.5% 0.17548 266.373);
-
-    &:hover {
-      --color: oklch(67.5% 0.17548 266.373);
-    }
-  }
-
-  .tremolo-slider-track {
-    --active: oklch(59.5% 0.17548 266.373);
-    --inactive: oklch(41.7% 0 0);
-
-    &:hover {
-      --active: oklch(62.5% 0.17548 266.373);
-      --inactive: oklch(44.7% 0 0);
-    }
-
-    &[aria-disabled='true'] {
-      --active: oklch(75.327% 0.01237 264.547);
-      --inactive: oklch(89.755% 0.0001 271.152);
-    }
-  }
-}

package/src/components/XYPad/index.css

@@ -1,48 +0,0 @@
-.tremolo-xy-pad {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.tremolo-xy-pad-area {
-  --color: oklch(95% 0 0);
-
-  position: relative;
-  background-color: var(--color);
-}
-
-.tremolo-xy-pad-thumb-wrapper {
-  position: absolute;
-  translate: -50% -50%;
-  z-index: 100;
-}
-
-.tremolo-xy-pad-thumb {
-  --color: oklch(59.5% 0.17548 266.373);
-
-  border-radius: 50%;
-  outline: none;
-  background-color: var(--color);
-
-  &[aria-disabled='true'] {
-    background-color: oklch(50.462% 0.03307 270.021);
-  }
-
-  &[aria-readonly='false']:focus {
-    box-shadow: 0px 0px 0px 3px
-      color-mix(in srgb, var(--color) 20%, transparent);
-  }
-}
-
-:where(.dark, [data-theme='dark']) {
-  .tremolo-xy-pad-area {
-    --color: oklch(41.7% 0 0);
-  }
-
-  .tremolo-xy-pad-thumb {
-    --color: oklch(64.5% 0.17548 266.373);
-
-    &:hover {
-      --color: oklch(67.5% 0.17548 266.373);
-    }
-  }
-}

package/src/components/_util/index.ts

@@ -1,28 +0,0 @@
-export function addUserSelectNone() {
-  window.document.body.classList.add('tremolo-user-select-none')
-}
-
-export function removeUserSelectNone() {
-  window.document.body.classList.remove('tremolo-user-select-none')
-}
-
-const cursorStyles = {
-  grabbing: 'tremolo-cursor-grabbing',
-  grab: 'tremolo-cursor-grab',
-  pointer: 'tremolo-cursor-pointer',
-  move: 'tremolo-cursor-move',
-  none: 'tremolo-cursor-none',
-}
-
-export type Cursor = keyof typeof cursorStyles
-
-export function setCursorStyle(type: Cursor) {
-  resetCursorStyle()
-  window.document.body.classList.add(cursorStyles[type])
-}
-
-export function resetCursorStyle() {
-  Object.values(cursorStyles).forEach((s) => {
-    window.document.body.classList.remove(s)
-  })
-}

package/src/components/_util/type.ts

@@ -1 +0,0 @@
-export type Override<T, U> = T & Omit<U, keyof T>

package/src/hooks/useDragWithElement.ts

@@ -1,100 +0,0 @@
-import { RefObject, useCallback, useEffect, useRef, useState } from 'react'
-
-import { createDrag } from '@tremolo-ui/dom'
-import { normalizeValue } from '@tremolo-ui/functions'
-
-import { useCallbackRef } from './useCallbackRef'
-
-interface UseDragWithElement<T extends Element> {
-  baseElementRef: RefObject<T | null>
-  /**
-   * Report the position on pointer down, before any movement.
-   *
-   * Enable it where the pointer position *is* the value, so that a plain click
-   * jumps to it. Leave it off where the element being dragged is an object in
-   * its own right, so that grabbing its edge does not shift it under the cursor.
-   *
-   * @default false
-   */
-  updateOnPointerDown?: boolean
-  /** CSS cursor to show while dragging. Applied to the element itself. */
-  cursor?: string
-  onDrag: (normalizedX: number, normalizedY: number) => void
-  onDragStart?: (normalizedX: number, normalizedY: number) => void
-  onDragEnd?: (normalizedX: number, normalizedY: number) => void
-}
-
-/**
- * Track a pointer drag, reporting the position normalized against
- * the bounding rect of `baseElementRef`.
- *
- * @returns a ref callback for the element that starts the drag, and whether a drag is in progress
- */
-export function useDragWithElement<T extends Element>({
-  baseElementRef,
-  updateOnPointerDown = false,
-  cursor,
-  onDrag,
-  onDragStart,
-  onDragEnd,
-}: UseDragWithElement<T>) {
-  const [dragging, setDragging] = useState(false)
-  const normalizedX = useRef(0)
-  const normalizedY = useRef(0)
-
-  const dragHandler = useCallbackRef(onDrag)
-  const dragStartHandler = useCallbackRef(onDragStart)
-  const dragEndHandler = useCallbackRef(onDragEnd)
-
-  const update = useCallback(
-    (clientX: number, clientY: number) => {
-      const base = baseElementRef.current
-      if (!base) return false
-      const { left, top, right, bottom } = base.getBoundingClientRect()
-      normalizedX.current = normalizeValue(clientX, left, right)
-      normalizedY.current = normalizeValue(clientY, top, bottom)
-      return true
-    },
-    [baseElementRef],
-  )
-
-  // See useDrag for why the node is held in state.
-  const [node, setNode] = useState<Element | null>(null)
-
-  useEffect(() => {
-    if (!node) return
-
-    const instance = createDrag(node, {
-      cursor,
-      onDragStart: ({ clientX, clientY }) => {
-        setDragging(true)
-        const updated = update(clientX, clientY)
-        if (updated && updateOnPointerDown) {
-          dragHandler(normalizedX.current, normalizedY.current)
-        }
-        dragStartHandler(normalizedX.current, normalizedY.current)
-      },
-      onDrag: ({ clientX, clientY }) => {
-        if (update(clientX, clientY)) {
-          dragHandler(normalizedX.current, normalizedY.current)
-        }
-      },
-      onDragEnd: () => {
-        setDragging(false)
-        dragEndHandler(normalizedX.current, normalizedY.current)
-      },
-    })
-
-    return () => instance.destroy()
-  }, [
-    node,
-    update,
-    updateOnPointerDown,
-    cursor,
-    dragHandler,
-    dragStartHandler,
-    dragEndHandler,
-  ])
-
-  return { refCallback: setNode, dragging }
-}