@tremolo-ui/react 0.0.6 → 0.0.8

package/src/components/XYPad/Area.tsx

@@ -0,0 +1,40 @@
+import clsx from 'clsx'
+import { CSSProperties, ReactElement } from 'react'
+
+export interface AreaProps {
+  width?: number | string
+  height?: number | string
+  bg?: string
+  className?: string
+  style?: CSSProperties
+  children?: ReactElement
+
+  /** inherit */
+  __thumb?: ReactElement
+}
+
+export function XYPadArea({
+  width = 120,
+  height = 120,
+  bg = '#eee',
+  children,
+  className,
+  style,
+  __thumb,
+}: AreaProps) {
+  return (
+    <div
+      className={clsx('tremolo-xy-pad-area', className)}
+      style={{
+        position: 'relative',
+        width: width,
+        height: height,
+        background: bg,
+        ...style,
+      }}
+    >
+      {children}
+      {__thumb}
+    </div>
+  )
+}

package/src/components/XYPad/Thumb.tsx

@@ -0,0 +1,92 @@
+import clsx from 'clsx'
+import {
+  ComponentPropsWithoutRef,
+  CSSProperties,
+  forwardRef,
+  ReactNode,
+  useImperativeHandle,
+  useRef,
+} from 'react'
+
+export interface ThumbProps {
+  size?: number | string
+  width?: number | string
+  height?: number | string
+
+  wrapperClassName?: string
+  wrapperStyle?: CSSProperties
+
+  children?: ReactNode
+
+  /** @internal */
+  __disabled?: boolean
+  /** @internal */
+  __css?: CSSProperties
+}
+
+export interface XYPadThumbMethods {
+  focus: () => void
+  blur: () => void
+}
+
+type Props = ThumbProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof ThumbProps>
+
+export const XYPadThumb = forwardRef<XYPadThumbMethods, Props>(
+  (
+    {
+      size,
+      width = 22,
+      height = 22,
+      children,
+      wrapperClassName,
+      wrapperStyle,
+      className,
+      style,
+      __disabled,
+      __css,
+    }: Props,
+    ref,
+  ) => {
+    const wrapperRef = useRef<HTMLDivElement>(null)
+
+    useImperativeHandle(ref, () => {
+      return {
+        focus() {
+          wrapperRef.current?.focus()
+        },
+        blur() {
+          wrapperRef.current?.blur()
+        },
+      }
+    }, [])
+
+    return (
+      <div
+        className={clsx('tremolo-xy-pad-thumb-wrapper', wrapperClassName)}
+        style={{
+          ...__css,
+          ...wrapperStyle,
+        }}
+      >
+        {children ? (
+          children
+        ) : (
+          // default thumb
+          <div
+            ref={wrapperRef}
+            className={clsx('tremolo-xy-pad-thumb', className)}
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={0}
+            aria-disabled={__disabled}
+            style={{
+              width: size ?? width,
+              height: size ?? height,
+              ...style,
+            }}
+          ></div>
+        )}
+      </div>
+    )
+  },
+)

package/src/components/XYPad/index.css

@@ -0,0 +1,24 @@
+.tremolo-xy-pad {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.tremolo-xy-pad-thumb-wrapper {
+  position: absolute;
+  translate: -50% -50%;
+  z-index: 100;
+}
+
+.tremolo-xy-pad-thumb {
+  border-radius: 50%;
+  outline: none;
+  background-color: #4e76e6;
+
+  &[aria-disabled='true'] {
+    background-color: #5d6478;
+  }
+
+  &:focus {
+    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+  }
+}

package/src/components/XYPad/index.tsx

@@ -0,0 +1,317 @@
+import clsx from 'clsx'
+import React, {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  ReactElement,
+  useCallback,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react'
+
+import {
+  clamp,
+  normalizeValue,
+  rawValue,
+  stepValue,
+  toFixed,
+  InputEventOption,
+  styleHelper,
+} from '@tremolo-ui/functions'
+
+import { useEventListener } from '../../hooks/useEventListener'
+import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { addNoSelect, removeNoSelect } from '../_util'
+
+import { XYPadArea, AreaProps } from './Area'
+import { XYPadThumb, XYPadThumbMethods, ThumbProps } from './Thumb'
+
+export interface ValueOptions {
+  // required
+  value: number
+  min: number
+  max: number
+
+  // optional
+  step?: number
+  skew?: number
+  reverse?: boolean
+  /**
+   * wheel control option
+   */
+  wheel?: InputEventOption | null
+  /**
+   * keyboard control option
+   */
+  keyboard?: InputEventOption | null
+}
+
+export interface XYPadProps {
+  x: ValueOptions
+  y: ValueOptions
+
+  bodyNoSelect?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  onChange?: (valueX: number, valueY: number) => void
+  /** \<XYPadThumb /> | \<XYPadArea /> */
+  children?: ReactElement | ReactElement[]
+}
+
+export interface XYPadMethods {
+  focus: () => void
+  blur: () => void
+}
+
+const defaultValueOptions = {
+  skew: 1,
+  step: 1,
+  reverse: false,
+  wheel: ['raw', 1] as InputEventOption,
+  keyboard: ['raw', 1] as InputEventOption,
+}
+
+type Props = XYPadProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof XYPadProps>
+
+/**
+ * Simple XYPad
+ */
+export const XYPad = forwardRef<XYPadMethods, Props>(
+  (
+    {
+      x: _x,
+      y: _y,
+      className,
+      style,
+      bodyNoSelect = true,
+      disabled = false,
+      readonly = false,
+      onChange,
+      children,
+      ...props
+    }: Props,
+    ref,
+  ) => {
+    const x = useMemo(() => {
+      return { ...defaultValueOptions, ..._x }
+    }, [_x])
+    const y = useMemo(() => {
+      return { ...defaultValueOptions, ..._y }
+    }, [_y])
+
+    // -- state and ref ---
+    const areaElementRef = useRef<HTMLDivElement>(null)
+    const thumbRef = useRef<XYPadThumbMethods>(null)
+    const thumbDragged = useRef(false)
+
+    // --- interpret props ---
+    const nx = normalizeValue(x.value, x.min, x.max, x.skew)
+    const ny = normalizeValue(y.value, y.min, y.max, y.skew)
+    const percentX = toFixed((x.reverse ? 1 - nx : nx) * 100)
+    const percentY = toFixed((y.reverse ? 1 - ny : ny) * 100)
+
+    let areaProps: AreaProps = {},
+      thumbProps: ThumbProps = {}
+    if (children != undefined) {
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          if (child.type == XYPadThumb) {
+            thumbProps = child.props as ThumbProps
+          } else if (child.type == XYPadArea) {
+            areaProps = child.props as AreaProps
+          } else {
+            throw new Error('only <XYPadThumb> or <XYPadArea>')
+          }
+        } else {
+          throw new Error('children is an invalid element.')
+        }
+      })
+    }
+
+    // --- internal functions ---
+    const handleValue = (
+      event: MouseEvent | React.PointerEvent<HTMLDivElement> | TouchEvent,
+    ) => {
+      if (
+        !areaElementRef.current ||
+        !thumbDragged.current ||
+        !onChange ||
+        readonly
+      )
+        return
+      const isTouch = event instanceof TouchEvent
+      if (isTouch && event.cancelable) event.preventDefault()
+      if (bodyNoSelect) addNoSelect()
+      const {
+        left: x1,
+        top: y1,
+        right: x2,
+        bottom: y2,
+      } = areaElementRef.current.getBoundingClientRect()
+      const mouseX = isTouch ? event.touches[0].clientX : event.clientX
+      const mouseY = isTouch ? event.touches[0].clientY : event.clientY
+      const nx = normalizeValue(mouseX, x1, x2)
+      const ny = normalizeValue(mouseY, y1, y2)
+      const vx = rawValue(x.reverse ? 1 - nx : nx, x.min, x.max, x.skew)
+      const vy = rawValue(y.reverse ? 1 - ny : ny, y.min, y.max, y.skew)
+      const newX = clamp(stepValue(vx, x.step), x.min, x.max)
+      const newY = clamp(stepValue(vy, y.step), y.min, y.max)
+      onChange(newX, newY)
+    }
+
+    const handleKeyDown = useCallback(
+      (event: React.KeyboardEvent<HTMLDivElement>) => {
+        if (!onChange || readonly) return
+        const key = event.key
+        if (['ArrowRight', 'ArrowLeft', 'ArrowUp', 'ArrowDown'].includes(key)) {
+          const isHorizontal = key == 'ArrowRight' || key == 'ArrowLeft'
+          const target = isHorizontal ? x : y
+          if (!target.keyboard) return
+          event.preventDefault()
+          let delta = target.keyboard[1]
+          if (key == 'ArrowLeft' || key == 'ArrowUp') delta *= -1
+          if (target.reverse) delta *= -1
+          let v
+          if (target.keyboard[0] == 'normalized') {
+            const n = normalizeValue(
+              target.value,
+              target.min,
+              target.max,
+              target.skew,
+            )
+            v = rawValue(n + delta, target.min, target.max, target.skew)
+          } else {
+            v = target.value + delta
+          }
+          const newValue = clamp(
+            stepValue(v, target.step),
+            target.min,
+            target.max,
+          )
+          if (isHorizontal) {
+            onChange(newValue, y.value)
+          } else {
+            onChange(x.value, newValue)
+          }
+        }
+      },
+      [x, y, onChange, readonly],
+    )
+
+    // --- hooks ---
+    const touchMoveRefCallback = useRefCallbackEvent(
+      'touchmove',
+      handleValue,
+      { passive: false },
+      [x, onChange, readonly],
+    )
+
+    const wheelRefCallback = useRefCallbackEvent(
+      'wheel',
+      (event) => {
+        if (!onChange || readonly) return
+        const target = event.shiftKey ? x : y
+        if (!target.wheel) return
+        event.preventDefault()
+        let delta = target.wheel[1]
+        if (event.deltaY < 0) delta *= -1
+        if (target.reverse) delta *= -1
+        let v
+        if (target.wheel[0] == 'normalized') {
+          const n = normalizeValue(
+            target.value,
+            target.min,
+            target.max,
+            target.skew,
+          )
+          v = rawValue(n + delta, target.min, target.max, target.skew)
+        } else {
+          v = target.value + delta
+        }
+        const newValue = clamp(
+          stepValue(v, target.step),
+          target.min,
+          target.max,
+        )
+        if (event.shiftKey) {
+          onChange(newValue, y.value)
+        } else {
+          onChange(x.value, newValue)
+        }
+      },
+      {
+        passive: false,
+      },
+      [x, y],
+    )
+
+    useEventListener(window, 'mousemove', (event) => {
+      handleValue(event)
+    })
+
+    useEventListener(window, 'mouseup', () => {
+      thumbDragged.current = false
+      if (bodyNoSelect) removeNoSelect()
+    })
+
+    useImperativeHandle(ref, () => {
+      return {
+        focus() {
+          thumbRef.current?.focus()
+        },
+        blur() {
+          thumbRef.current?.blur()
+        },
+      }
+    }, [])
+
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      <div
+        className={clsx('tremolo-xy-pad', className)}
+        ref={(div) => {
+          wheelRefCallback(div)
+          touchMoveRefCallback(div)
+        }}
+        tabIndex={-1}
+        aria-disabled={disabled}
+        aria-readonly={readonly}
+        style={{
+          margin: `calc(${styleHelper(thumbProps?.size ?? 22)} / 2)`, // half thumb size
+          cursor: readonly ? 'not-allowed' : 'pointer',
+          WebkitTapHighlightColor: 'transparent',
+          ...style,
+        }}
+        onPointerDown={(event) => {
+          thumbDragged.current = true
+          handleValue(event)
+        }}
+        onKeyDown={handleKeyDown}
+        onFocus={thumbRef.current?.focus}
+        onBlur={thumbRef.current?.blur}
+        {...props}
+      >
+        <div className="tremolo-xy-pad-area-wrapper" ref={areaElementRef}>
+          <XYPadArea
+            __thumb={
+              <XYPadThumb
+                ref={thumbRef}
+                __disabled={disabled}
+                __css={{
+                  top: `${percentY}%`,
+                  left: `${percentX}%`,
+                }}
+                {...thumbProps}
+              />
+            }
+            {...areaProps}
+          />
+        </div>
+      </div>
+    )
+  },
+)
+
+export * from './Thumb'
+export * from './Area'

package/src/hooks/useCallbackRef.ts

@@ -16,5 +16,6 @@ export function useCallbackRef<Args extends unknown[], Return>(
     callbackRef.current = callback
   })
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   return useCallback((...args: Args) => callbackRef.current?.(...args), deps)
 }

package/src/hooks/useRefCallbackEvent.ts

@@ -28,5 +28,6 @@ export function useRefCallbackEvent(
         node.removeEventListener(event, handler, options)
       }
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, deps)
 }

package/src/index.ts

@@ -1,4 +1,16 @@
+import './styles/index.css'
+import './components/Knob/index.css'
+import './components/NumberInput/index.css'
+import './components/Piano/index.css'
+import './components/Slider/index.css'
+import './components/XYPad/index.css'
+
 export * from './components/AnimationCanvas'
+export * from './components/AnimationKnob'
+export * from './components/DragObserver'
 export * from './components/Knob'
 export * from './components/NumberInput'
+export * from './components/Piano'
 export * from './components/Slider'
+export * from './components/WheelObserver'
+export * from './components/XYPad'

package/dist/cjs/types/components/Slider/type.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import type { ScaleOption as Opt } from '@tremolo-ui/functions/Slider';
-export type ScaleOption = Opt & {
-    style?: CSSObject;
-};
-export { type Direction, type Horizontal, type ScaleOrderList, type ScaleType, type Vertical, gradientDirection } from '@tremolo-ui/functions/Slider';
-//# sourceMappingURL=type.d.ts.map

package/dist/cjs/types/components/Slider/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,MAAM,8BAA8B,CAAA;AAEtE,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,OAAO,EACL,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,iBAAiB,EAClB,MAAM,8BAA8B,CAAA"}

package/dist/cjs/types/system/pseudo.d.ts

@@ -1,14 +0,0 @@
-import { CSSObject } from '@emotion/react';
-export declare const inputPseudoSelectors: readonly ["&:enabled", "&:disabled", "&:read-only", "&:read-write", "&:placeholder-shown", "&:blank", "&:valid", "&:invalid", "&:in-range", "&:out-of-range"];
-export declare const inputPseudoPropNames: readonly ["_enabled", "_disabled", "_readOnly", "_readWrite", "_placeholderShown", "_blank", "_valid", "_invalid", "_inRange", "_outOfRange"];
-export type InputPseudos = (typeof inputPseudoPropNames)[number];
-export type InputPseudoProps = Partial<{
-    [key in InputPseudos]: CSSObject;
-}>;
-export declare const userActionPseudoSelectors: readonly ["&:hover", "&:active", "&:focus"];
-export declare const userActionPseudoPropNames: readonly ["_hover", "_active", "_focus"];
-export type UserActionPseudos = (typeof userActionPseudoPropNames)[number];
-export type UserActionPseudoProps = Partial<{
-    [key in UserActionPseudos]: CSSObject;
-}>;
-//# sourceMappingURL=pseudo.d.ts.map

package/dist/cjs/types/system/pseudo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../../src/system/pseudo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAQ1C,eAAO,MAAM,oBAAoB,+JAWvB,CAAA;AAEV,eAAO,MAAM,oBAAoB,+IAWvB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChE,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;KACpC,GAAG,IAAI,YAAY,GAAG,SAAS;CACjC,CAAC,CAAA;AAEF,eAAO,MAAM,yBAAyB,6CAI5B,CAAA;AAEV,eAAO,MAAM,yBAAyB,0CAI5B,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC;KACzC,GAAG,IAAI,iBAAiB,GAAG,SAAS;CACtC,CAAC,CAAA"}

package/dist/esm/types/components/Slider/type.d.ts

@@ -1,7 +0,0 @@
-import { CSSObject } from '@emotion/react';
-import type { ScaleOption as Opt } from '@tremolo-ui/functions/Slider';
-export type ScaleOption = Opt & {
-    style?: CSSObject;
-};
-export { type Direction, type Horizontal, type ScaleOrderList, type ScaleType, type Vertical, gradientDirection } from '@tremolo-ui/functions/Slider';
-//# sourceMappingURL=type.d.ts.map

package/dist/esm/types/components/Slider/type.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type.d.ts","sourceRoot":"","sources":["../../../../../src/components/Slider/type.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE1C,OAAO,KAAK,EAAE,WAAW,IAAI,GAAG,EAAE,MAAM,8BAA8B,CAAA;AAEtE,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAA;CAClB,CAAA;AAED,OAAO,EACL,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,cAAc,EACnB,KAAK,SAAS,EACd,KAAK,QAAQ,EACb,iBAAiB,EAClB,MAAM,8BAA8B,CAAA"}

package/dist/esm/types/system/pseudo.d.ts

@@ -1,14 +0,0 @@
-import { CSSObject } from '@emotion/react';
-export declare const inputPseudoSelectors: readonly ["&:enabled", "&:disabled", "&:read-only", "&:read-write", "&:placeholder-shown", "&:blank", "&:valid", "&:invalid", "&:in-range", "&:out-of-range"];
-export declare const inputPseudoPropNames: readonly ["_enabled", "_disabled", "_readOnly", "_readWrite", "_placeholderShown", "_blank", "_valid", "_invalid", "_inRange", "_outOfRange"];
-export type InputPseudos = (typeof inputPseudoPropNames)[number];
-export type InputPseudoProps = Partial<{
-    [key in InputPseudos]: CSSObject;
-}>;
-export declare const userActionPseudoSelectors: readonly ["&:hover", "&:active", "&:focus"];
-export declare const userActionPseudoPropNames: readonly ["_hover", "_active", "_focus"];
-export type UserActionPseudos = (typeof userActionPseudoPropNames)[number];
-export type UserActionPseudoProps = Partial<{
-    [key in UserActionPseudos]: CSSObject;
-}>;
-//# sourceMappingURL=pseudo.d.ts.map

package/dist/esm/types/system/pseudo.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pseudo.d.ts","sourceRoot":"","sources":["../../../../src/system/pseudo.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAQ1C,eAAO,MAAM,oBAAoB,+JAWvB,CAAA;AAEV,eAAO,MAAM,oBAAoB,+IAWvB,CAAA;AAEV,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,oBAAoB,CAAC,CAAC,MAAM,CAAC,CAAA;AAChE,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC;KACpC,GAAG,IAAI,YAAY,GAAG,SAAS;CACjC,CAAC,CAAA;AAEF,eAAO,MAAM,yBAAyB,6CAI5B,CAAA;AAEV,eAAO,MAAM,yBAAyB,0CAI5B,CAAA;AAEV,MAAM,MAAM,iBAAiB,GAAG,CAAC,OAAO,yBAAyB,CAAC,CAAC,MAAM,CAAC,CAAA;AAC1E,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC;KACzC,GAAG,IAAI,iBAAiB,GAAG,SAAS;CACtC,CAAC,CAAA"}

package/src/components/Slider/type.ts

@@ -1,16 +0,0 @@
-import { CSSObject } from '@emotion/react'
-
-import type { ScaleOption as Opt } from '@tremolo-ui/functions/Slider'
-
-export type ScaleOption = Opt & {
-  style?: CSSObject
-}
-
-export {
-  type Direction,
-  type Horizontal,
-  type ScaleOrderList,
-  type ScaleType,
-  type Vertical,
-  gradientDirection
-} from '@tremolo-ui/functions/Slider'

package/src/system/pseudo.ts

@@ -1,55 +0,0 @@
-import { CSSObject } from '@emotion/react'
-
-function _toPropName(str: string) {
-  return str.replace(/-\w/, (s) => s.toUpperCase()).replace(/^::?/, '_')
-}
-
-// ref. https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-classes
-
-export const inputPseudoSelectors = [
-  '&:enabled',
-  '&:disabled',
-  '&:read-only',
-  '&:read-write',
-  '&:placeholder-shown',
-  '&:blank',
-  '&:valid',
-  '&:invalid',
-  '&:in-range',
-  '&:out-of-range',
-] as const
-
-export const inputPseudoPropNames = [
-  '_enabled',
-  '_disabled',
-  '_readOnly',
-  '_readWrite',
-  '_placeholderShown',
-  '_blank',
-  '_valid',
-  '_invalid',
-  '_inRange',
-  '_outOfRange',
-] as const
-
-export type InputPseudos = (typeof inputPseudoPropNames)[number]
-export type InputPseudoProps = Partial<{
-  [key in InputPseudos]: CSSObject
-}>
-
-export const userActionPseudoSelectors = [
-  '&:hover',
-  '&:active',
-  '&:focus',
-] as const
-
-export const userActionPseudoPropNames = [
-  '_hover',
-  '_active',
-  '_focus',
-] as const
-
-export type UserActionPseudos = (typeof userActionPseudoPropNames)[number]
-export type UserActionPseudoProps = Partial<{
-  [key in UserActionPseudos]: CSSObject
-}>