@tremolo-ui/react 0.0.11 → 0.0.12

package/src/components/NumberInput/index.tsx

@@ -1,19 +1,16 @@
 import clsx from 'clsx'
-import { ComponentPropsWithoutRef, ReactNode, useMemo, useState } from 'react'
+import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
 
 import { InputEventOption } from '@tremolo-ui/functions'
-import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
+import { Units } from '@tremolo-ui/functions/NumberInput'
 
-import {
-  NumberInputProvider,
-  safeClamp,
-  useNumberInputContext,
-} from './context'
+import { NumberInputProvider } from './context'
+import { InternalInput } from './InternalInput'
 
 /*
 TODO
-- onBlurでは、parse + (clamp) + formatして返す
 - numberMode: focusが当たった時だけ、parse + type="number"にする
+- skew
 */
 
 /** @category NumberInput */
@@ -29,7 +26,6 @@ export interface NumberInputProps {
    */
   max?: number
   step?: number
-  defaultValue?: number | string
 
   /**
    * @example
@@ -50,6 +46,10 @@ export interface NumberInputProps {
    */
   digit?: number
 
+  readonly?: boolean
+
+  variant?: 'outline' | 'filled' | 'flushed' | 'unstyled'
+
   selectWithFocus?: 'all' | 'number' | 'none'
   blurOnEnter?: boolean
   keepWithinRange?: boolean
@@ -65,6 +65,8 @@ export interface NumberInputProps {
    */
   keyboard?: InputEventOption | null
 
+  activeColor?: string
+
   wrapperClassName?: string
 
   onChange?: (value: number, text: string) => void
@@ -82,166 +84,96 @@ export interface NumberInputProps {
   children?: ReactNode
 }
 
-function InternalInput({
-  min,
-  max,
-  step,
-  defaultValue,
-  units,
-  disabled,
-  digit,
-  selectWithFocus,
-  blurOnEnter,
-  keepWithinRange,
-  clampValueOnBlur,
-  wheel,
-  keyboard,
-  wrapperClassName,
-  className,
-  onChange,
-  onFocus,
-  onBlur,
-  children: _children,
-  ...props
-}: Omit<NumberInputProps, 'value'> &
-  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>) {
-  const [editing, setEditing] = useState(false)
-  const value = useNumberInputContext((s) => s.value)
-  const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
-  const change = useNumberInputContext((s) => s.change)
-
-  const error = useMemo(() => {
-    if (editing) return false
-    const v = valueAsNumber
-    return (min ?? -Infinity) > v || v > (max ?? Infinity)
-  }, [editing, max, min, valueAsNumber])
-
-  return (
-    <input
-      className={clsx('tremolo-number-input', className)}
-      value={value}
-      min={min}
-      max={max}
-      step={step}
-      type="text"
-      disabled={disabled}
-      tabIndex={-1}
-      data-error={error}
-      onChange={(event) => {
-        const v = event.currentTarget.value
-        change(v)
-        const valueAsNumber = parseValue(v, units, digit).rawValue
-        onChange?.(valueAsNumber, v)
-      }}
-      onFocus={(event) => {
-        setEditing(true)
-        const v = event.currentTarget.value
-        const parsed = parseValue(v, units, digit)
-        if (selectWithFocus == 'all') {
-          event.currentTarget.setSelectionRange(0, v.length)
-        } else if (selectWithFocus == 'number') {
-          event.currentTarget.setSelectionRange(
-            0,
-            parsed.formatValue.length - parsed.unit.length,
-          )
-        }
-        onFocus?.(parsed.rawValue, parsed.formatValue, event)
-      }}
-      onBlur={(event) => {
-        setEditing(false)
-        // update value
-        let v = parseValue(event.currentTarget.value, units, digit).rawValue
-        if (clampValueOnBlur) {
-          v = safeClamp(v, min, max)
-        }
-        const parsed = parseValue(String(v), units, digit)
-        change(parsed.formatValue)
-        if (clampValueOnBlur) {
-          onChange?.(parsed.rawValue, parsed.formatValue)
-        }
-        onBlur?.(parsed.rawValue, parsed.formatValue, event)
-      }}
-      onKeyDown={(event) => {
-        if (blurOnEnter && event.key == 'Enter') {
-          event.currentTarget.blur()
-        }
-      }}
-      {...props}
-    />
-  )
+/**
+ * @category NumberInput
+ */
+export interface NumberInputMethods {
+  focus: () => void
+  blur: () => void
 }
 
+type Props = NumberInputProps &
+  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>
+
 /**
  * Input with some useful functions for entering numerical values.
  * @category NumberInput
  */
-export function NumberInput({
-  value,
-  min,
-  max,
-  step = 1,
-  defaultValue,
-  units,
-  disabled = false,
-  digit,
-  selectWithFocus = 'none',
-  blurOnEnter = true,
-  keepWithinRange = true,
-  clampValueOnBlur = true,
-  wheel = ['raw', 1],
-  keyboard = ['raw', 1],
-  wrapperClassName,
-  className,
-  onChange,
-  onFocus,
-  onBlur,
-  children,
-  ...props
-}: NumberInputProps &
-  Omit<ComponentPropsWithoutRef<'input'>, keyof NumberInputProps | 'type'>) {
-  return (
-    <NumberInputProvider
-      value={String(value)}
-      min={min}
-      max={max}
-      step={step}
-      units={units}
-      digit={digit}
-      keepWithinRange={keepWithinRange}
-      onChange={onChange}
-    >
-      <div
-        className={clsx('tremolo-number-input-wrapper', wrapperClassName)}
-        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-        tabIndex={0}
-        data-stepper={!!children}
+export const NumberInput = forwardRef<NumberInputMethods, Props>(
+  (
+    {
+      value,
+      min,
+      max,
+      step = 1,
+      units,
+      readonly = false,
+      disabled = false,
+      digit,
+      variant = 'outline',
+      selectWithFocus = 'none',
+      blurOnEnter = true,
+      keepWithinRange = true,
+      clampValueOnBlur = true,
+      wheel = ['raw', 1],
+      keyboard = ['raw', 1],
+      activeColor,
+      wrapperClassName,
+      className,
+      onChange,
+      onFocus,
+      onBlur,
+      children,
+      ...props
+    }: Props,
+    ref,
+  ) => {
+    const colors: { [key: string]: string | undefined } = {
+      '--active-color': activeColor,
+    }
+    return (
+      <NumberInputProvider
+        value={String(value)}
+        min={min}
+        max={max}
+        step={step}
+        units={units}
+        digit={digit}
+        readonly={readonly}
+        keepWithinRange={keepWithinRange}
+        onChange={onChange}
       >
-        <InternalInput
-          min={min}
-          max={max}
-          step={step}
-          defaultValue={defaultValue}
-          units={units}
-          disabled={disabled}
-          digit={digit}
-          selectWithFocus={selectWithFocus}
-          blurOnEnter={blurOnEnter}
-          keepWithinRange={keepWithinRange}
-          clampValueOnBlur={clampValueOnBlur}
-          wheel={wheel}
-          keyboard={keyboard}
-          wrapperClassName={wrapperClassName}
-          className={className}
-          onChange={onChange}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          {...props}
-        />
-        {children}
-      </div>
-    </NumberInputProvider>
-  )
-}
+        <div
+          className={clsx('tremolo-number-input-wrapper', wrapperClassName)}
+          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+          tabIndex={0}
+          style={{
+            ...colors,
+          }}
+          data-stepper={!!children}
+          data-variant={variant}
+        >
+          <InternalInput
+            ref={ref}
+            readonly={readonly}
+            disabled={disabled}
+            selectWithFocus={selectWithFocus}
+            blurOnEnter={blurOnEnter}
+            clampValueOnBlur={clampValueOnBlur}
+            wheel={wheel}
+            keyboard={keyboard}
+            className={className}
+            onChange={onChange}
+            onFocus={onFocus}
+            onBlur={onBlur}
+            {...props}
+          />
+          {children}
+        </div>
+      </NumberInputProvider>
+    )
+  },
+)
 
 export * from './Stepper'
 export * from './IncrementStepper'

package/src/components/Piano/BlackKey.tsx

@@ -18,6 +18,10 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
     {
       width = defaultWhiteKeyWidth * 0.65,
       height = '60%',
+      bg,
+      color,
+      activeBg,
+      activeColor,
       className,
       style,
       children,
@@ -31,12 +35,20 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
       __onPlayNote,
       __onStopNote,
       __label,
+      onContextMenu = (e) => e.preventDefault(),
       ...props
     }: Props,
     ref,
   ) => {
     const [played, setPlayed] = useState(false)
 
+    const colors = {
+      '--bg': bg,
+      '--color': color,
+      '--active-bg': activeBg,
+      '--active-color': activeColor,
+    }
+
     useImperativeHandle(ref, () => {
       return {
         play() {
@@ -75,6 +87,7 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
         aria-disabled={__disabled}
         data-active={played}
         style={{
+          ...colors,
           left: __position,
           width: __fill ? __width : (width ?? __width),
           height: height,
@@ -104,6 +117,7 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
             if (__onStopNote) __onStopNote(__note!)
           }
         }}
+        onContextMenu={onContextMenu}
         {...props}
       >
         <KeyLabel

package/src/components/Piano/WhiteKey.tsx

@@ -20,6 +20,10 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
     {
       width = defaultWhiteKeyWidth,
       height = '100%',
+      bg,
+      color,
+      activeBg,
+      activeColor,
       className,
       style,
       children,
@@ -33,12 +37,20 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
       __onPlayNote,
       __onStopNote,
       __label,
+      onContextMenu = (e) => e.preventDefault(),
       ...props
     }: Props,
     ref,
   ) => {
     const [played, setPlayed] = useState(false)
 
+    const colors = {
+      '--bg': bg,
+      '--color': color,
+      '--active-bg': activeBg,
+      '--active-color': activeColor,
+    }
+
     useImperativeHandle(ref, () => {
       return {
         play() {
@@ -77,6 +89,7 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
         aria-disabled={__disabled}
         data-active={played}
         style={{
+          ...colors,
           left: __position,
           width: __fill ? __width : (width ?? __width),
           height: height,
@@ -106,6 +119,7 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
             if (__onStopNote) __onStopNote(__note!)
           }
         }}
+        onContextMenu={onContextMenu}
         {...props}
       >
         <KeyLabel

package/src/components/Piano/index.css

@@ -2,20 +2,28 @@
   display: inline-block;
   box-sizing: border-box;
   user-select: none;
+  touch-action: none;
   position: relative;
 }
 
 .tremolo-piano-white-key {
+  --bg: white;
+  --color: black;
+  --active-bg: #ccc;
+  --active-color: black;
+
   position: absolute;
-  background-color: white;
-  color: black;
+  background-color: var(--bg);
+  -webkit-tap-highlight-color: transparent;
+  color: var(--color);
   border: 1px solid #555;
   border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 1;
 
   &[data-active='true'] {
-    background-color: #ccc;
+    background-color: var(--active-bg);
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
@@ -24,16 +32,23 @@
 }
 
 .tremolo-piano-black-key {
+  --color: white;
+  --bg: #333;
+  --active-color: white;
+  --active-bg: #666;
+
   position: absolute;
-  background-color: #333;
-  color: white;
+  background-color: var(--bg);
+  -webkit-tap-highlight-color: transparent;
+  color: var(--color);
   border: 1px solid #555;
   border-radius: 0px 0px 8px 8px;
   cursor: pointer;
   z-index: 2;
 
   &[data-active='true'] {
-    background-color: #666;
+    background-color: var(--active-bg);
+    color: var(--active-color);
   }
 
   &[aria-disabled='true'] {
@@ -49,6 +64,7 @@
 }
 
 .tremolo-piano-key-label {
+  box-sizing: content-box;
   display: flex;
   justify-content: center;
   align-items: center;

package/src/components/Piano/index.tsx

@@ -11,19 +11,13 @@ import React, {
   useState,
 } from 'react'
 
-import {
-  isWhiteKey,
-  NoteName,
-  noteName,
-  noteNames,
-  parseNoteName,
-} from '@tremolo-ui/functions'
+import { isWhiteKey, NoteKey, noteKeys, noteKey } from '@tremolo-ui/functions'
 
 import { useEventListener } from '../../hooks/useEventListener'
 
 import { BlackKey } from './BlackKey'
 import { KeyMethods, KeyProps } from './key'
-import { KeyBoardShortcuts } from './keyboardShortcuts'
+import { KeyboardShortcuts } from './keyboardShortcuts'
 import { defaultWhiteKeyWidth, WhiteKey } from './WhiteKey'
 
 /**
@@ -43,7 +37,7 @@ export interface PianoProps {
 
   glissando?: boolean
   midiMax?: number
-  keyboardShortcuts?: KeyBoardShortcuts
+  keyboardShortcuts?: KeyboardShortcuts
   fill?: boolean
 
   style?: CSSProperties
@@ -59,7 +53,10 @@ export interface PianoProps {
   children?: ReactElement | ReactElement[]
 }
 
-/** @category Piano */
+/**
+ * Customizable piano component.
+ * @category Piano
+ */
 export function Piano({
   noteRange,
   glissando = true,
@@ -73,6 +70,8 @@ export function Piano({
   onStopNote,
   label,
   children,
+  onPointerUp,
+  onPointerDown,
   ...props
 }: PianoProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>) {
   // -- state and ref ---
@@ -111,7 +110,7 @@ export function Piano({
 
   // --- internal functions ---
   function notePosition(note: number) {
-    const pitchPositions: Record<NoteName, number> = {
+    const pitchPositions: Record<NoteKey, number> = {
       C: 0,
       'C#': 0.55,
       D: 1,
@@ -126,16 +125,12 @@ export function Piano({
       B: 6,
     }
 
-    const toNoteName = (n: number) => {
-      const { letter, accidental } = parseNoteName(noteName(n))
-      return (letter + accidental) as NoteName
-    }
-    const _noteName = toNoteName(note)
-    const firstNoteName = toNoteName(noteRange.first)
-    const pos = pitchPositions[_noteName] - pitchPositions[firstNoteName]
+    const targetNoteKey = noteKey(note)
+    const firstNoteKey = noteKey(noteRange.first)
+    const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey]
     const octave = Math.floor((note - noteRange.first) / 12)
     const octaveOffset =
-      noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0
+      noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0
     const length = whiteNoteWidth + 3
     return pos * length + (octave + octaveOffset) * 7 * length
   }
@@ -150,6 +145,9 @@ export function Piano({
         setWhiteNoteWidth(w / whiteNoteCount - 3)
       })
       resizeObserver.observe(parent)
+      return () => {
+        resizeObserver.unobserve(parent)
+      }
     } else {
       setWhiteNoteWidth(whiteKeyProps?.width || defaultWhiteKeyWidth)
     }
@@ -185,12 +183,12 @@ export function Piano({
         ...style,
       }}
       onPointerDown={(e) => {
-        if (props.onPointerDown) props.onPointerDown(e)
         setPressed(true)
+        onPointerDown?.(e)
       }}
       onPointerUp={(e) => {
-        if (props.onPointerUp) props.onPointerUp(e)
         setPressed(false)
+        onPointerUp?.(e)
       }}
       {...props}
     >

package/src/components/Piano/key.ts

@@ -7,6 +7,11 @@ export interface KeyProps {
   width?: number
   height?: number | `${number}%`
 
+  bg?: string
+  color?: string
+  activeBg?: string
+  activeColor?: string
+
   style?: CSSProperties
 
   /**

package/src/components/Piano/keyboardShortcuts.ts

@@ -1,5 +1,5 @@
 /** @category Piano */
-export type KeyBoardShortcuts = {
+export type KeyboardShortcuts = {
   keys: string[]
   // TODO
   flags?: {
@@ -8,7 +8,7 @@ export type KeyBoardShortcuts = {
 }
 
 /** @category Piano */
-export const Shortcuts = {
+export const SHORTCUTS = {
   HOME_ROW: {
     keys: [
       'a',

package/src/components/Slider/Scale.tsx

@@ -14,9 +14,6 @@ export interface ScaleProps {
   children?: ReactNode
 }
 
-type Props = ScaleProps &
-  Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>
-
 /** @category Slider */
 export function Scale({
   gap = 6,
@@ -25,7 +22,7 @@ export function Scale({
   className,
   style,
   ...props
-}: 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)

package/src/components/Slider/Thumb.tsx

@@ -15,6 +15,8 @@ export interface SliderThumbProps {
   width?: number | string
   height?: number | string
 
+  color?: string
+
   className?: string
   style?: CSSProperties
   children?: ReactNode
@@ -39,6 +41,7 @@ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
       size,
       width = defaultThumbSize,
       height = defaultThumbSize,
+      color,
       children,
       className,
       style,
@@ -82,6 +85,7 @@ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
             aria-disabled={disabled}
             aria-readonly={readonly}
             style={{
+              ...{ '--color': color },
               width: size ?? width,
               height: size ?? height,
               ...style,

package/src/components/Slider/Track.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx'
-import { CSSProperties, ReactElement } from 'react'
+import { ComponentPropsWithoutRef, CSSProperties, ReactElement } from 'react'
 
 import { styleHelper, xor } from '@tremolo-ui/functions'
 
@@ -40,7 +40,9 @@ export function SliderTrack({
   defaultStyle = true,
   __thumb,
   __percent = 0,
-}: SliderTrackProps) {
+  ...props
+}: SliderTrackProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof SliderTrackProps>) {
   const vertical = useSliderContext((s) => s.vertical)
   const reverse = useSliderContext((s) => s.reverse)
   const disabled = useSliderContext((s) => s.disabled)
@@ -70,6 +72,7 @@ export function SliderTrack({
               ...style,
             }
       }
+      {...props}
     >
       {children}
       {__thumb}

package/src/components/Slider/index.css

@@ -16,7 +16,9 @@
 }
 
 .tremolo-slider-thumb {
-  background: #4e76e6;
+  --color: var(--tremolo-theme-color);
+
+  background: var(--color);
   border-radius: 50%;
   outline: none;
 
@@ -25,7 +27,8 @@
   }
 
   &[aria-readonly='false']:focus {
-    box-shadow: 0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2);
+    box-shadow: 0px 0px 0px 3px
+      color-mix(in srgb, var(--color) 20%, transparent);
   }
 }