@tremolo-ui/react 0.0.3 → 0.0.4

package/src/components/Slider/index.tsx

@@ -0,0 +1,326 @@
+import { css, CSSObject, Global } from '@emotion/react'
+import {
+  Direction,
+  gradientDirection,
+  isHorizontal,
+  isReversed,
+  isVertical,
+  parseScaleOrderList,
+  ScaleOrderList,
+  ScaleType,
+} from '@tremolo-ui/functions/Slider'
+import { clamp, normalizeValue, rawValue, stepValue } from '@tremolo-ui/functions'
+import { WheelOption } from '@tremolo-ui/functions'
+import { styleHelper } from '@tremolo-ui/functions'
+import React, { ReactElement, useRef } from 'react'
+import clsx from 'clsx'
+
+import { useEventListener } from '../../hooks/useEventListener'
+import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
+import { UserActionPseudoProps } from '../../system/pseudo'
+
+import { SliderThumb } from './Thumb'
+import { SliderTrack } from './Track'
+import { ScaleOption } from './type'
+
+interface SliderProps {
+  // required
+  value: number
+  min: number
+  max: number
+
+  // optional
+  step?: number
+  skew?: number // | SkewFunction
+  length?: number | string
+  thickness?: number | string
+  direction?: Direction
+  scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[]
+  scaleOption?: ScaleOption
+  color?: string
+  bg?: string
+  bodyNoSelect?: boolean
+  enableWheel?: WheelOption
+  className?: string
+  style?: CSSObject
+  onChange?: (value: number) => void
+  children?: ReactElement | ReactElement[]
+  // ReactElement<typeof SliderThumb, typeof SliderTrack>[]
+}
+
+/**
+ * Customizable slider
+ */
+export function Slider({
+  value,
+  min,
+  max,
+  step = 1,
+  skew = 1,
+  length = 140,
+  thickness = 10,
+  direction = 'right',
+  scale,
+  scaleOption,
+  color = '#4e76e6',
+  bg = '#eee',
+  className,
+  style,
+  bodyNoSelect = true,
+  enableWheel,
+  onChange,
+  children,
+  ...pseudo
+}: SliderProps & UserActionPseudoProps) {
+  // -- state and ref ---
+  const trackElementRef = useRef<HTMLDivElement>(null)
+
+  // --- interpret props ---
+  const { _active, _focus, _hover } = pseudo
+  const percent = normalizeValue(value, min, max, skew) * 100
+  const percentRev = isReversed(direction) ? 100 - percent : percent
+
+  const scalesList = parseScaleOrderList(scale, min, max, step)
+  if (isReversed(direction)) scalesList.reverse()
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let trackProps: any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let thumbProps: any
+  if (children != undefined) {
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if (child.type == SliderThumb) {
+          thumbProps = child.props
+        } else if (child.type == SliderTrack) {
+          trackProps = child.props
+        } else {
+          throw new Error('only <SliderThumb> or <SliderTrack>')
+        }
+      } else {
+        throw new Error('children is an invalid element.')
+      }
+    })
+  }
+
+  const thumbDragged = useRef(false)
+  const handleValue = (
+    event: MouseEvent | React.PointerEvent<HTMLDivElement> | TouchEvent,
+  ) => {
+    if (!trackElementRef.current || !thumbDragged.current) return
+    const isTouch = event instanceof TouchEvent
+    if (isTouch && event.cancelable) event.preventDefault()
+    if (bodyNoSelect) document.body.classList.add('no-select')
+    const {
+      left: x1,
+      top: y1,
+      right: x2,
+      bottom: y2,
+    } = trackElementRef.current.getBoundingClientRect()
+    const mouseX = isTouch ? event.touches[0].clientX : event.clientX
+    const mouseY = isTouch ? event.touches[0].clientY : event.clientY
+    const n = isHorizontal(direction)
+      ? normalizeValue(mouseX, x1, x2)
+      : normalizeValue(mouseY, y1, y2)
+    const v = rawValue(isReversed(direction) ? 1 - n : n, min, max, skew)
+    const v2 = clamp(stepValue(v, step), min, max)
+    if (onChange) onChange(v2)
+  }
+
+  // --- hooks ---
+  const touchMoveRefCallback = useRefCallbackEvent(
+    'touchmove',
+    handleValue,
+    { passive: false },
+    [min, max, skew, step, direction, onChange],
+  )
+
+  const wheelRefCallback = useRefCallbackEvent(
+    'wheel',
+    (event) => {
+      if (!enableWheel) return
+      event.preventDefault()
+      let x = event.deltaY > 0 ? enableWheel[1] : -enableWheel[1]
+      if (isReversed(direction) || isHorizontal(direction)) x *= -1
+      let v
+      if (enableWheel[0] == 'normalized') {
+        const n = normalizeValue(value, min, max, skew)
+        v = rawValue(n + x, min, max, skew)
+      } else {
+        v = value + x
+      }
+      if (onChange) onChange(clamp(stepValue(v, step), min, max))
+    },
+    {
+      passive: false,
+    },
+    [enableWheel, value, min, max, skew, step],
+  )
+
+  useEventListener(window, 'mousemove', (event) => {
+    handleValue(event)
+  })
+
+  useEventListener(window, 'mouseup', () => {
+    thumbDragged.current = false
+    if (bodyNoSelect) document.body.classList.remove('no-select')
+  })
+
+  return (
+    <div
+      className={clsx('tremolo-slider', className)}
+      ref={(div) => {
+        wheelRefCallback(div)
+        touchMoveRefCallback(div)
+      }}
+      tabIndex={-1}
+      role="slider"
+      aria-valuenow={value}
+      aria-valuemax={max}
+      aria-valuemin={min}
+      aria-orientation={isHorizontal(direction) ? 'horizontal' : 'vertical'}
+      css={css({
+        display: 'inline-block',
+        boxSizing: 'border-box',
+        margin: '0.7rem',
+        padding: 0,
+        cursor: 'pointer',
+        ...style,
+      })}
+      onPointerDown={(event) => {
+        thumbDragged.current = true
+        handleValue(event)
+      }}
+    >
+      <Global
+        styles={{
+          '.no-select': {
+            userSelect: 'none',
+          },
+        }}
+      />
+      <div
+        css={css({
+          display: 'flex',
+          flexDirection: isHorizontal(direction) ? 'column' : 'row',
+        })}
+      >
+        {/* trackProps */}
+        <div
+          className="tremolo-slider-track-wrapper"
+          ref={trackElementRef}
+          css={css({ position: 'relative' })}
+        >
+          <SliderTrack
+            __css={{
+              background: `linear-gradient(to ${gradientDirection(direction)}, ${color} ${percent}%, ${bg} ${percent}%)`,
+              borderRadius: styleHelper(thickness, '/', 2),
+              borderStyle: 'solid',
+              borderColor: '#ccc',
+              borderWidth: 2,
+              width: isHorizontal(direction) ? length : thickness,
+              height: isHorizontal(direction) ? thickness : length,
+              zIndex: 1,
+            }}
+            {...trackProps}
+          />
+          <SliderThumb
+            color={color}
+            __css={{
+              top: isHorizontal(direction) ? '50%' : `${percentRev}%`,
+              left: isHorizontal(direction) ? `${percentRev}%` : '50%',
+            }}
+            {...thumbProps}
+          />
+        </div>
+        {scale && (
+          <div
+            className="tremolo-slider-scale-wrapper"
+            css={css({
+              position: 'relative',
+              width: isHorizontal(direction) ? length : undefined,
+              height: isVertical(direction) ? length : undefined,
+              marginLeft: isHorizontal(direction)
+                ? 2
+                : (scaleOption?.gap ??
+                  `calc((1.4rem - ${styleHelper(thickness)}) / 2)`),
+              marginTop: isVertical(direction)
+                ? 2
+                : (scaleOption?.gap ??
+                  `calc((1.4rem - ${styleHelper(thickness)}) / 2)`),
+              ...scaleOption?.style,
+              // zIndex: 10,
+            })}
+          >
+            {scalesList.map((item, index) => (
+              <div
+                key={index}
+                css={css({
+                  display: 'flex',
+                  flexDirection: isHorizontal(direction) ? 'column' : 'row',
+                  justifyContent: 'center',
+                  alignItems: 'center',
+                  position: 'absolute',
+                  left: isHorizontal(direction)
+                    ? `${
+                        isReversed(direction)
+                          ? 100 - normalizeValue(item.at, min, max, skew) * 100
+                          : normalizeValue(item.at, min, max, skew) * 100
+                      }%`
+                    : undefined,
+                  top: isVertical(direction)
+                    ? `${
+                        isReversed(direction)
+                          ? 100 - normalizeValue(item.at, min, max, skew) * 100
+                          : normalizeValue(item.at, min, max, skew) * 100
+                      }%`
+                    : undefined,
+                  translate: isHorizontal(direction) ? '-50% 0' : '0 -50%',
+                  zIndex: 10,
+                })}
+              >
+                {(item.type ?? scaleOption?.defaultType ?? 'mark-number') !=
+                  'number' && (
+                  <div
+                    className="tremolo-slider-scale-mark"
+                    css={css({
+                      width: isHorizontal(direction)
+                        ? (item.style?.thickness ?? 1)
+                        : (item.style?.length ?? '0.5rem'),
+                      height: isVertical(direction)
+                        ? (item.style?.thickness ?? 1)
+                        : (item.style?.length ?? '0.5rem'),
+                      backgroundColor:
+                        item.style?.markColor ??
+                        scaleOption?.markColor ??
+                        '#222',
+                      marginBottom: isHorizontal(direction) ? 2 : undefined,
+                      marginRight: isVertical(direction) ? 2 : undefined,
+                    })}
+                  ></div>
+                )}
+                {(item.type ?? scaleOption?.defaultType ?? 'mark-number') !=
+                  'mark' && (
+                  <div
+                    className="tremolo-slider-scale-number"
+                    css={css({
+                      color: item.style?.labelColor ?? scaleOption?.labelColor,
+                      width: scaleOption?.labelWidth,
+                      textAlign: 'right',
+                    })}
+                  >
+                    {item.text ?? item.at}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export * from './Thumb'
+export * from './Track'
+export * from './type'

package/src/components/Slider/type.ts

@@ -0,0 +1,16 @@
+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/hooks/useCallbackRef.ts

@@ -0,0 +1,20 @@
+import { useCallback, useInsertionEffect, useRef } from 'react'
+
+/**
+ * This hook is user-land implementation of the experimental `useEffectEvent` hook.
+ * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
+ */
+export function useCallbackRef<Args extends unknown[], Return>(
+  callback: ((...args: Args) => Return) | undefined,
+  deps: React.DependencyList = [],
+) {
+  const callbackRef = useRef<typeof callback>(() => {
+    throw new Error('Cannot call an event handler while rendering.')
+  })
+
+  useInsertionEffect(() => {
+    callbackRef.current = callback
+  })
+
+  return useCallback((...args: Args) => callbackRef.current?.(...args), deps)
+}

package/src/hooks/useEventListener.ts

@@ -0,0 +1,49 @@
+import { useEffect } from 'react'
+
+import { useCallbackRef } from './useCallbackRef'
+
+type Target = EventTarget | null | (() => EventTarget | null)
+type Options = boolean | AddEventListenerOptions
+
+export function useEventListener<K extends keyof DocumentEventMap>(
+  target: Target,
+  event: K,
+  handler?: (event: DocumentEventMap[K]) => void,
+  options?: Options,
+): VoidFunction
+export function useEventListener<K extends keyof WindowEventMap>(
+  target: Target,
+  event: K,
+  handler?: (event: WindowEventMap[K]) => void,
+  options?: Options,
+): VoidFunction
+export function useEventListener<K extends keyof GlobalEventHandlersEventMap>(
+  target: Target,
+  event: K,
+  handler?: (event: GlobalEventHandlersEventMap[K]) => void,
+  options?: Options,
+): VoidFunction
+export function useEventListener(
+  target: Target,
+  event: string,
+  handler: ((event: Event) => void) | undefined,
+  options?: Options,
+) {
+  const listener = useCallbackRef(handler)
+
+  useEffect(() => {
+    const node = typeof target === 'function' ? target() : (target ?? document)
+
+    if (!handler || !node) return
+
+    node.addEventListener(event, listener, options)
+    return () => {
+      node.removeEventListener(event, listener, options)
+    }
+  }, [event, target, options, listener, handler])
+
+  return () => {
+    const node = typeof target === 'function' ? target() : (target ?? document)
+    node?.removeEventListener(event, listener, options)
+  }
+}

package/src/hooks/useRefCallbackEvent.ts

@@ -0,0 +1,32 @@
+import { useMemo } from 'react'
+
+type Options = boolean | AddEventListenerOptions
+type CallbackFunc = (div: EventTarget | null) => void
+
+export function useRefCallbackEvent<K extends keyof DocumentEventMap>(
+  event: K,
+  handler: (event: DocumentEventMap[K]) => void,
+  options?: Options,
+  deps?: React.DependencyList,
+): CallbackFunc
+export function useRefCallbackEvent(
+  event: string,
+  handler: (event: Event) => void,
+  options?: Options,
+  deps: React.DependencyList = [],
+): CallbackFunc {
+  return useMemo(() => {
+    let cleanup: (() => void) | undefined
+    return (node: EventTarget | null) => {
+      if (!node) {
+        cleanup?.()
+        return
+      }
+      node.addEventListener(event, handler, options)
+
+      cleanup = () => {
+        node.removeEventListener(event, handler, options)
+      }
+    }
+  }, deps)
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './components/AnimationCanvas'
+export * from './components/Knob'
+export * from './components/NumberInput'
+export * from './components/Slider'

package/src/styles/variables.css

@@ -0,0 +1,4 @@
+:root {
+  --tremolo-theme-color: #4e76e6;
+  --tremolo-theme-color-rgb: 78, 118, 230;
+}

package/src/system/pseudo.ts

@@ -0,0 +1,55 @@
+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
+}>

package/dist/cjs/index.d.ts

@@ -1,140 +0,0 @@
-export * from '@tremolo-ui/functions/math';
-import { WheelOption } from '@tremolo-ui/functions/types';
-export * from '@tremolo-ui/functions/types';
-import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
-import { CSSObject } from '@emotion/react';
-import React$1, { MutableRefObject, ChangeEvent, ReactElement } from 'react';
-import { Units } from '@tremolo-ui/functions/components/NumberInput/type';
-import { ScaleOption as ScaleOption$1, Direction, ScaleType, ScaleOrderList } from '@tremolo-ui/functions/components/Slider/type';
-
-type DrawFunc = (context: CanvasRenderingContext2D, width: MutableRefObject<number>, height: MutableRefObject<number>, count: number) => void;
-interface AnimationCanvasProps {
-    width?: number;
-    height?: number;
-    relativeSize?: boolean;
-    /** only available relativeSize=true */
-    reduceFlickering?: boolean;
-    options?: CanvasRenderingContext2DSettings;
-    style?: CSSObject;
-    init?: DrawFunc;
-    draw: DrawFunc;
-}
-/**
- * A simple animatable canvas with requestAnimationFrame()
- */
-declare function AnimationCanvas({ width, height, style, relativeSize, reduceFlickering, options, init, draw, ...props }: AnimationCanvasProps & Omit<React.ClassAttributes<HTMLCanvasElement> & React.CanvasHTMLAttributes<HTMLCanvasElement>, 'ref' | 'width' | 'height' | 'style'>): _emotion_react_jsx_runtime.JSX.Element;
-
-declare const inputPseudoPropNames: readonly ["_enabled", "_disabled", "_readOnly", "_readWrite", "_placeholderShown", "_blank", "_valid", "_invalid", "_inRange", "_outOfRange"];
-type InputPseudos = (typeof inputPseudoPropNames)[number];
-type InputPseudoProps = Partial<{
-    [key in InputPseudos]: CSSObject;
-}>;
-declare const userActionPseudoPropNames: readonly ["_hover", "_active", "_focus"];
-type UserActionPseudos = (typeof userActionPseudoPropNames)[number];
-type UserActionPseudoProps = Partial<{
-    [key in UserActionPseudos]: CSSObject;
-}>;
-
-interface KnobProps {
-    value: number;
-    min: number;
-    max: number;
-    defaultValue?: number;
-    startValue?: number;
-    step?: number;
-    skew?: number;
-    size?: number | `${number}%`;
-    width?: number | `${number}%`;
-    height?: number | `${number}%`;
-    options?: {
-        active?: string;
-        inactive?: string;
-        bg?: string;
-        thumb?: string;
-        lineWeight?: number;
-        thumbWeight?: number;
-    };
-    cursor?: string;
-    style?: CSSObject;
-    bodyNoSelect?: boolean;
-    enableWheel?: WheelOption;
-    enableDoubleClickDefault?: boolean;
-    onChange?: (value: number) => void;
-}
-/**
- * simple rotary Knob.
- */
-declare function Knob({ value, min, max, defaultValue, startValue, step, skew, size, width, height, options, cursor, style, bodyNoSelect, enableWheel, enableDoubleClickDefault, onChange, _active, _focus, _hover, ...props }: KnobProps & UserActionPseudoProps & Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement>, 'onChange'>): _emotion_react_jsx_runtime.JSX.Element;
-
-interface NumberInputProps {
-    value: number | string;
-    min?: number;
-    max?: number;
-    step?: number;
-    disabled?: boolean;
-    placeholder?: string;
-    readOnly?: boolean;
-    tabIndex?: number;
-    /**
-     * @example
-     * units='Hz'
-     * units={[['Hz', 1], ['kHz', 1000]]}
-     * units={[['ms', 1], ['s', 1000]]}
-     */
-    units?: string | Units;
-    /**
-     * NOTE: If units is specified, it is forced to `false`
-     */
-    strict?: boolean;
-    /**
-     * @example
-     * with units-{[['Hz', 1], ['kHz', 1000]]}
-     * 3 ... 100Hz, 1.60Hz
-     */
-    digit?: number;
-    selectWithFocus?: 'all' | 'number' | 'none';
-    blurWithEnter?: boolean;
-    className?: string;
-    style?: CSSObject;
-    onChange?: (value: number, event: ChangeEvent<HTMLInputElement>) => void;
-    onFocus?: (value: number, event: React.FocusEvent<HTMLInputElement, Element>) => void;
-    onBlur?: (value: number, event: React.FocusEvent<HTMLInputElement, Element>) => void;
-}
-/**
- * Input with some useful functions for entering numerical values.
- */
-declare function NumberInput({ value, min, // TODO
-max, // TODO
-step, // TODO
-units, disabled, placeholder, readOnly, tabIndex, strict, digit, selectWithFocus, blurWithEnter, className, style, onChange, onFocus, onBlur, ...pseudo }: NumberInputProps & UserActionPseudoProps & InputPseudoProps): _emotion_react_jsx_runtime.JSX.Element;
-
-type ScaleOption = ScaleOption$1 & {
-    style?: CSSObject;
-};
-
-interface SliderProps {
-    value: number;
-    min: number;
-    max: number;
-    step?: number;
-    skew?: number;
-    length?: number | string;
-    thickness?: number | string;
-    direction?: Direction;
-    scale?: ['step', ScaleType] | [number, ScaleType] | ScaleOrderList[];
-    scaleOption?: ScaleOption;
-    color?: string;
-    bg?: string;
-    bodyNoSelect?: boolean;
-    enableWheel?: WheelOption;
-    className?: string;
-    style?: CSSObject;
-    onChange?: (value: number) => void;
-    children?: ReactElement | ReactElement[];
-}
-/**
- * Customizable slider
- */
-declare function Slider({ value, min, max, step, skew, length, thickness, direction, scale, scaleOption, color, bg, className, style, bodyNoSelect, enableWheel, onChange, children, ...pseudo }: SliderProps & UserActionPseudoProps): _emotion_react_jsx_runtime.JSX.Element;
-
-export { AnimationCanvas, Knob, NumberInput, Slider };