@tremolo-ui/react 0.0.11 → 0.1.0-alpha.0

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/KeyLabel.tsx

@@ -1,6 +1,10 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
 
+import { usePianoContext } from './context'
+
+import { getNoteRangeArray } from '.'
+
 /** @category Piano */
 export interface KeyLabelProps {
   /**
@@ -14,8 +18,6 @@ export interface KeyLabelProps {
   /** @internal */
   __note?: number
   /** @internal */
-  __index?: number
-  /** @internal */
   __label?: (note: number, index: number) => ReactNode
 }
 
@@ -26,13 +28,15 @@ export function KeyLabel({
   wrapperClassName,
   wrapperStyle,
   __note,
-  __index,
   __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!)
+    ? label(__note!, index)
+    : __label && __label(__note!, index)
 
   return (
     (content != undefined || content != null) && (

package/src/components/Piano/context.tsx

@@ -0,0 +1,108 @@
+import { createContext, ReactNode, useContext, useEffect, useRef } from 'react'
+import { createStore, useStore } from 'zustand'
+
+import { isBlackKey, noteKey, NoteKey, noteKeys } from '@tremolo-ui/functions'
+
+import { defaultBlackKeyWidth, defaultWhiteKeyWidth } from './key'
+
+/** @category Piano */
+export type NoteRange = {
+  first: number
+  last: number
+}
+
+type State = {
+  noteRange: NoteRange
+  glissando: boolean
+  midiMax: number
+  fill: boolean
+  onPlayNote: (noteNumber: 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>) => {
+  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: (note: number) => {
+      const pitchPositions: Record<NoteKey, number> = {
+        C: 0,
+        'C#': 1,
+        D: 1,
+        'D#': 2,
+        E: 2,
+        F: 3,
+        'F#': 4,
+        G: 4,
+        'G#': 5,
+        A: 5,
+        'A#': 6,
+        B: 6,
+      }
+
+      const whiteNoteWidth = defaultWhiteKeyWidth
+      const blackNoteWidth = defaultBlackKeyWidth
+      const padding = 1
+
+      const targetNoteKey = noteKey(note)
+      const firstNoteKey = noteKey(noteRange.first)
+      const octave = Math.floor((note - noteRange.first) / 12)
+      const octaveOffset =
+        noteKeys.indexOf(firstNoteKey) > noteKeys.indexOf(targetNoteKey) ? 1 : 0
+      const w = whiteNoteWidth + padding
+      const pos = pitchPositions[targetNoteKey] - pitchPositions[firstNoteKey]
+      const blackKeyOffset = isBlackKey(note) ? blackNoteWidth / 2 : 0
+      return pos * w + (octave + octaveOffset) * 7 * w - blackKeyOffset
+    },
+  }))
+}
+
+const PianoContext = createContext<PianoStore | null>(null)
+
+type PianoProviderProps = React.PropsWithChildren<Partial<State>>
+
+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>
+  )
+}
+
+/** @category Piano */
+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

@@ -2,20 +2,29 @@
   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;
+
+  box-sizing: border-box;
   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 +33,24 @@
 }
 
 .tremolo-piano-black-key {
+  --color: white;
+  --bg: #333;
+  --active-color: white;
+  --active-bg: #666;
+
+  box-sizing: border-box;
   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 +66,7 @@
 }
 
 .tremolo-piano-key-label {
+  box-sizing: content-box;
   display: flex;
   justify-content: center;
   align-items: center;