@tremolo-ui/react 0.4.0 → 0.6.0

package/src/components/NumberInput/InternalInput.tsx

@@ -1,216 +0,0 @@
-import clsx from 'clsx'
-import {
-  ComponentPropsWithoutRef,
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-  useState,
-} from 'react'
-
-import {
-  clamp,
-  InputEventOption,
-  normalizeValue,
-  rawValue,
-  stepValue,
-} from '@tremolo-ui/functions'
-
-import { useWheel } from '../../hooks/useWheel'
-
-import { safeClamp, useNumberInputContext } from './context'
-import { parseValue } from './type'
-
-import { NumberInputMethods } from '.'
-
-interface InternalProps {
-  disabled: boolean
-  readonly: boolean
-  wheel: InputEventOption | null
-  keyboard: InputEventOption | null
-
-  selectWithFocus?: 'all' | 'number' | 'none'
-  blurOnEnter?: boolean
-  keepWithinRange?: boolean
-  clampValueOnBlur?: boolean
-
-  onChange?: (value: number, text: string) => void
-  onFocus?: (
-    value: number,
-    text: string,
-    event: React.FocusEvent<HTMLInputElement, Element>,
-  ) => void
-  onBlur?: (
-    value: number,
-    text: string,
-    event: React.FocusEvent<HTMLInputElement, Element>,
-  ) => void
-}
-
-type InternalPropsWithAttributes = InternalProps &
-  Omit<ComponentPropsWithoutRef<'input'>, keyof InternalProps>
-
-export const InternalInput = forwardRef<
-  NumberInputMethods,
-  InternalPropsWithAttributes
->(
-  (
-    {
-      disabled,
-      readonly,
-      selectWithFocus,
-      blurOnEnter,
-      clampValueOnBlur,
-      wheel,
-      keyboard,
-      className,
-      onChange,
-      onFocus,
-      onBlur,
-      onKeyDown,
-      children: _children,
-      ...props
-    }: InternalPropsWithAttributes,
-    ref,
-  ) => {
-    const elmRef = useRef<HTMLInputElement>(null)
-    const [editing, setEditing] = useState(false)
-    const value = useNumberInputContext((s) => s.value)
-    const valueAsNumber = useNumberInputContext((s) => s.valueAsNumber)
-    const min = useNumberInputContext((s) => s.min)
-    const max = useNumberInputContext((s) => s.max)
-    const step = useNumberInputContext((s) => s.step)
-    const units = useNumberInputContext((s) => s.units)
-    const digit = useNumberInputContext((s) => s.digit)
-    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])
-
-    const updateValueByEvent = useCallback(
-      (eventType: InputEventOption[0], x: number) => {
-        let newValue
-        if (eventType == 'normalized') {
-          if (!min || !max) {
-            throw new Error(
-              '[NumberInput] "min" and "max" are required when InputEventOption[0] is set to "normalized".',
-            )
-          }
-          const n = normalizeValue(valueAsNumber, min, max)
-          newValue = rawValue(n + x, min, max)
-          return clamp(stepValue(newValue, step), min, max)
-        } else {
-          newValue = valueAsNumber + x
-          return stepValue(newValue, step)
-        }
-      },
-      [max, min, step, valueAsNumber],
-    )
-
-    const handleKeyDown = useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (!keyboard || !onChange || readonly) return
-        const key = event.key
-        if (!['ArrowUp', 'ArrowDown'].includes(key)) return
-        event.preventDefault()
-        const x = key == 'ArrowUp' ? keyboard[1] : -keyboard[1]
-        const parsed = parseValue(String(updateValueByEvent(keyboard[0], x)))
-        // console.log('key control')
-        onChange?.(parsed.rawValue, parsed.formatValue)
-      },
-      [keyboard, readonly, onChange, updateValueByEvent],
-    )
-
-    const wheelRefCallback = useWheel<HTMLInputElement>((event) => {
-      if (!wheel || readonly) return
-      event.preventDefault()
-      if (!onChange || event.deltaY == 0) return
-      const x = Math.sign(event.deltaY) * -wheel[1]
-      const parsed = parseValue(String(updateValueByEvent(wheel[0], x)))
-      // console.log('wheel control')
-      onChange?.(parsed.rawValue, parsed.formatValue)
-    })
-
-    useImperativeHandle(ref, () => {
-      return {
-        focus() {
-          elmRef.current?.focus()
-        },
-        blur() {
-          elmRef.current?.blur()
-        },
-      }
-    }, [])
-
-    return (
-      <input
-        ref={(input) => {
-          elmRef.current = input
-          wheelRefCallback(input)
-        }}
-        className={clsx('tremolo-number-input', className)}
-        value={value}
-        min={min}
-        max={max}
-        step={step}
-        type="text"
-        aria-disabled={disabled}
-        aria-readonly={readonly}
-        tabIndex={-1}
-        data-error={error}
-        onChange={(event) => {
-          if (readonly) return
-          const v = event.currentTarget.value
-          const cursorPos = event.target.selectionStart
-          change(v)
-          const valueAsNumber = parseValue(v, units, digit).rawValue
-          onChange?.(valueAsNumber, v)
-          if (cursorPos) {
-            event.target.selectionStart = cursorPos
-            event.target.selectionEnd = cursorPos
-          }
-        }}
-        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()
-          }
-          handleKeyDown(event)
-          onKeyDown?.(event)
-        }}
-        {...props}
-      />
-    )
-  },
-)

package/src/components/NumberInput/index.css

@@ -1,185 +0,0 @@
-.tremolo-number-input-wrapper {
-  --border-radius: 4px;
-  --stepper-width: 20px;
-  --active-color: oklch(59.5% 0.17548 266.373);
-  --border-color: oklch(81% 0 0);
-
-  display: inline-flex;
-  flex-direction: row;
-  position: relative;
-  width: 140px;
-  height: min-content;
-  border-style: solid;
-  border-color: var(--border-color);
-  border-width: 0px;
-  outline: none;
-  transition: all 0.1s;
-
-  &:not(:focus-within):has(> .tremolo-number-input[data-error='true']) {
-    border-color: oklch(64.245% 0.21266 25.499);
-  }
-
-  &[data-variant='outline'] {
-    border-width: 1px;
-    border-radius: var(--border-radius);
-
-    &:hover {
-      --border-color: oklch(65.335% 0 0);
-    }
-
-    &:focus-within {
-      --border-color: var(--active-color);
-      box-shadow: 0px 0px 0px 2px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
-  }
-
-  &[data-variant='filled'] {
-    --bg: oklch(95.88% 0 0);
-    border-width: 1px;
-    border-radius: var(--border-radius);
-    border-color: transparent;
-    background-color: var(--bg);
-
-    &:hover {
-      --bg: oklch(93.166% 0 0);
-    }
-
-    &:focus-within {
-      background-color: inherit;
-      --border-color: var(--active-color);
-      box-shadow: 0px 0px 0px 2px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
-  }
-
-  &[data-variant='flushed'] {
-    border-bottom-width: 1px;
-
-    &:hover {
-      --border-color: oklch(65.335% 0 0);
-    }
-
-    &:focus-within {
-      --border-color: var(--active-color);
-      box-shadow: 0px 2px 0px 0px
-        color-mix(in srgb, var(--active-color) 10%, transparent);
-    }
-  }
-
-  &[data-stepper='false'] {
-    --stepper-width: 0px;
-  }
-}
-
-.tremolo-number-input {
-  display: block;
-  color: inherit;
-  width: calc(100% - 20px - var(--stepper-width));
-  background-color: inherit;
-  font: inherit;
-  padding: 6px 10px;
-
-  margin: 0;
-  border: none;
-  outline: none;
-  appearance: none;
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-number-input-stepper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: var(--stepper-width);
-  transition: all 0.1s linear;
-
-  &[data-dynamic='true'] {
-    opacity: 0;
-    transform: translateX(40%);
-  }
-}
-
-:is(
-    .tremolo-number-input-wrapper:hover,
-    .tremolo-number-input-wrapper:focus-within
-  )
-  .tremolo-number-input-stepper {
-  opacity: 1;
-  transform: translateX(0);
-}
-
-.tremolo-number-input-increment-stepper {
-  border-inline-start-width: 1px;
-  border-inline-start-style: solid;
-  border-inline-start-color: oklch(84.522% 0 0);
-  font-size: calc(0.75rem);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 1 0%;
-  max-height: 50%;
-  user-select: none;
-  cursor: pointer;
-  border-top-right-radius: var(--border-radius);
-
-  &[aria-disabled='false']:active {
-    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-number-input-decrement-stepper {
-  border-inline-start-width: 1px;
-  border-inline-start-style: solid;
-  border-inline-start-color: oklch(84.522% 0 0);
-  border-top: 1px solid oklch(84.522% 0 0);
-  font-size: calc(0.75rem);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex: 1 1 0%;
-  max-height: 50%;
-  user-select: none;
-  cursor: pointer;
-  border-bottom-right-radius: var(--border-radius);
-
-  &[aria-disabled='false']:active {
-    background-color: oklch(37.798% 0.03812 254.612 / 0.055);
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-
-  &[aria-readonly='true'] {
-    cursor: not-allowed;
-  }
-}
-
-:where(.dark, [data-theme='dark']) {
-  .tremolo-number-input-wrapper {
-    --border-color: oklch(52% 0 0);
-
-    &[data-variant='filled'] {
-      --bg: oklch(43.5% 0 0);
-
-      &:hover {
-        --bg: oklch(46.6% 0 0);
-      }
-    }
-  }
-}

package/src/components/NumberInput/type.ts

@@ -1,58 +0,0 @@
-/**
- * [unit, scale][]
- * @example
- * [['Hz', 1], ['kHz', 1000]]
- */
-export type Units = [string, number][]
-
-export function selectUnit(units: Units, value: number): [string, number] {
-  let i = 0
-  for (; i < units.length; i++) {
-    if (Math.abs(units[i][1]) > Math.abs(value)) break
-  }
-  return units[Math.max(0, i - 1)]
-}
-
-export function parseValue(
-  inputString: string,
-  units?: string | Units,
-  digit?: number,
-): {
-  rawValue: number
-  formatValue: string
-  unit: string
-} {
-  const str = inputString.trim()
-  if (!units || typeof units == 'string') {
-    const m = str.match(/-?\d+(\.\d+)?/)
-    let v = Number(m?.[0] ?? '0')
-    v = isNaN(v) ? 0 : v
-    return {
-      rawValue: v,
-      formatValue: (digit != undefined ? v.toFixed(digit) : v) + (units ?? ''),
-      unit: units ?? '',
-    }
-  }
-
-  const unitList = units.map(([u, _s]) => u)
-  const scaleList = units.map(([_u, s]) => s)
-  let rawValue = 0
-  let unit = unitList[0]
-  let formatValue =
-    (digit != undefined ? rawValue.toFixed(digit) : rawValue) + unit
-  const m = str.match(/^(-?\d+(\.\d+)?)\s*(\w*)$/)
-  if (m) {
-    rawValue = Number(m[1]) || 0
-    const uIndex = unitList.indexOf(m[3])
-    rawValue *= uIndex != -1 ? scaleList[uIndex] : 1
-    const [u, scale] = selectUnit(units, rawValue)
-    const v = rawValue / scale
-    formatValue = (digit != undefined ? v.toFixed(digit) : v) + u
-    unit = u
-  }
-  return {
-    rawValue: rawValue,
-    formatValue: formatValue,
-    unit: unit,
-  }
-}

package/src/components/Piano/KeyLabel.tsx

@@ -1,51 +0,0 @@
-import clsx from 'clsx'
-import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
-
-import { usePianoContext } from './context'
-
-import { getNoteRangeArray } from '.'
-
-export interface KeyLabelProps {
-  /**
-   * override Piano.label
-   */
-  label?: (note: number, index: number) => ReactNode
-
-  wrapperClassName?: string
-  wrapperStyle?: CSSProperties
-
-  /** @internal */
-  __note?: number
-  /** @internal */
-  __label?: (note: number, index: number) => ReactNode
-}
-
-export function KeyLabel({
-  label,
-  className,
-  wrapperClassName,
-  wrapperStyle,
-  __note,
-  __label,
-  ...props
-}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>) {
-  const noteRange = usePianoContext((s) => s.noteRange)
-  const noteRangeArray = getNoteRangeArray(noteRange)
-  const index = noteRangeArray.indexOf(__note!)
-  const content = label
-    ? label(__note!, index)
-    : __label && __label(__note!, index)
-
-  return (
-    (content != undefined || content != null) && (
-      <div
-        className={clsx('tremolo-piano-key-label-wrapper', wrapperClassName)}
-        style={wrapperStyle}
-      >
-        <div className={clsx('tremolo-piano-key-label', className)} {...props}>
-          {content}
-        </div>
-      </div>
-    )
-  )
-}

package/src/components/Piano/context.tsx

@@ -1,73 +0,0 @@
-import { createContext, ReactNode, useContext, useEffect, useRef } from 'react'
-import { createStore, useStore } from 'zustand'
-
-export type NoteRange = {
-  first: number
-  last: number
-}
-
-type State = {
-  noteRange: NoteRange
-  glissando: boolean
-  midiMax: number
-  fill: boolean
-  onPlayNote: (noteNumber: number, velocity?: number) => void
-  onStopNote: (noteNumber: number) => void
-  label: (note: number, index: number) => ReactNode
-}
-
-type Action = {
-  notePosition: (note: number) => number
-}
-
-type PianoStore = ReturnType<typeof createPianoStore>
-
-const createPianoStore = (initProps: Partial<State> & Action) => {
-  // const noteRange = initProps.noteRange || { first: 0, last: 127 }
-  const DEFAULT_PROPS: State = {
-    noteRange: { first: 0, last: 127 },
-    glissando: true,
-    midiMax: 127,
-    fill: false,
-    label: () => undefined,
-    onPlayNote: () => {},
-    onStopNote: () => {},
-  }
-
-  return createStore<State & Action>()(() => ({
-    ...DEFAULT_PROPS,
-    ...initProps,
-    notePosition: initProps.notePosition,
-  }))
-}
-
-const PianoContext = createContext<PianoStore | null>(null)
-
-type PianoProviderProps = React.PropsWithChildren<Partial<State> & Action>
-
-export function PianoProvider({ children, ...props }: PianoProviderProps) {
-  const storeRef = useRef<PianoStore>(null)
-  if (!storeRef.current) {
-    storeRef.current = createPianoStore(props)
-  }
-
-  useEffect(() => {
-    if (storeRef.current) {
-      storeRef.current.setState(props)
-    } else {
-      storeRef.current = createPianoStore(props)
-    }
-  }, [props])
-
-  return (
-    <PianoContext.Provider value={storeRef.current}>
-      {children}
-    </PianoContext.Provider>
-  )
-}
-
-export function usePianoContext<T>(selector: (state: State & Action) => T): T {
-  const store = useContext(PianoContext)
-  if (!store) throw new Error('Missing PianoContext.Provider in the tree')
-  return useStore(store, selector)
-}

package/src/components/Piano/index.css

@@ -1,90 +0,0 @@
-.tremolo-piano {
-  display: inline-block;
-  box-sizing: border-box;
-  user-select: none;
-  touch-action: none;
-  position: relative;
-}
-
-.tremolo-piano-white-key {
-  --bg: oklch(100% 0 0);
-  --color: oklch(0% 0 0);
-  --active-bg: oklch(92% 0 0);
-  --active-color: oklch(0% 0 0);
-
-  box-sizing: border-box;
-  position: absolute;
-  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: var(--active-bg);
-    color: var(--active-color);
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-piano-black-key {
-  --color: oklch(100% 0 0);
-  --bg: oklch(32% 0 0);
-  --active-color: oklch(100% 0 0);
-  --active-bg: oklch(44% 0 0);
-
-  box-sizing: border-box;
-  position: absolute;
-  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: var(--active-bg);
-    color: var(--active-color);
-  }
-
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-  }
-}
-
-.tremolo-piano-key-label-wrapper {
-  display: flex;
-  justify-content: center;
-  align-items: end;
-  height: 100%;
-}
-
-.tremolo-piano-key-label {
-  box-sizing: content-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 0.6rem;
-  height: 10px;
-  margin-bottom: 10px;
-  padding: 4px;
-  border-radius: 4px;
-  border: 1px solid #888;
-  aspect-ratio: 1;
-  max-width: calc(100% - 16px);
-}
-
-:where(.dark, [data-theme='dark']) {
-  .tremolo-piano-white-key {
-    --bg: oklch(80% 0 0);
-    --color: oklch(0% 0 0);
-    --active-bg: oklch(72% 0 0);
-    --active-color: oklch(0% 0 0);
-  }
-}