@tremolo-ui/react 0.0.4 → 0.0.6

package/src/components/Piano/WhiteKey.tsx

@@ -0,0 +1,109 @@
+import { css } from "@emotion/react"
+import React, { forwardRef, useImperativeHandle } from "react"
+import { useState } from "react"
+import { KeyLabel } from "./KeyLabel"
+import { KeyMethods, KeyProps } from "./key"
+
+
+export const WhiteKey = forwardRef<KeyMethods, KeyProps>(({
+  width = 40,
+  height = '100%',
+  bg = 'white',
+  activeBg = '#ccc',
+  style,
+  children,
+  __glissando,
+  __position,
+  __note,
+  __disabled,
+  __index,
+  __fill,
+  __width,
+  __playNote,
+  __stopNote,
+  __label,
+}: KeyProps, ref) => {
+  const [played, setPlayed] = useState(false)
+
+  useImperativeHandle(ref, () => {
+      return {
+        play() {
+          if (__disabled) return
+          setPlayed(true)
+          if (__playNote) __playNote(__note!)
+        },
+        stop() {
+          setPlayed(false)
+          if (__stopNote) __stopNote(__note!)
+        },
+        played() {
+          return played
+        }
+      }
+    }, [])
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let keyLabelProps: any
+  if (children != undefined) {
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if (child.type == KeyLabel) {
+          keyLabelProps = child.props
+        } else {
+          throw new Error('only <KeyLabel>')
+        }
+      } else {
+        throw new Error('children is an invalid element.')
+      }
+    })
+  }
+
+  return (
+    <div
+      className={`tremolo-piano-white-key`}
+      aria-disabled={__disabled}
+      css={css({
+        position: 'absolute',
+        backgroundColor: played ? activeBg : bg,
+        color: 'black',
+        left: __position,
+        width: __fill ? __width : (width ?? __width),
+        height: height,
+        border: '1px solid #555',
+        borderRadius: '0 0 8px 8px',
+        cursor: __disabled ? 'not-allowed' : 'pointer',
+        zIndex: 1,
+        ...style,
+      })}
+      onPointerDown={() => {
+        if (__disabled) return
+        setPlayed(true)
+        if (__playNote) __playNote(__note!)
+      }}
+      onPointerEnter={() => {
+        if (__disabled) return
+        if (__glissando) {
+          setPlayed(true)
+          if (__playNote) __playNote(__note!)
+        }
+      }}
+      onPointerUp={() => {
+        if (__disabled) return
+        setPlayed(false)
+        if (__stopNote) __stopNote(__note!)
+      }}
+      onPointerLeave={() => {
+        if (__disabled) return
+        setPlayed(false)
+        if (__stopNote) __stopNote(__note!)
+      }}
+    >
+      <KeyLabel
+        __note={__note}
+        __label={__label}
+        __index={__index}
+        {...keyLabelProps}
+      />
+    </div>
+  )
+})

package/src/components/Piano/index.tsx

@@ -0,0 +1,222 @@
+import React, { createRef, ReactElement, ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react'
+import { css, CSSObject } from '@emotion/react'
+import { isWhiteKey, NoteName, noteName, noteNames, parseNoteName } from '@tremolo-ui/functions'
+
+import { useEventListener } from '../../hooks/useEventListener'
+
+import { KeyMethods } from './key'
+import { WhiteKey } from './WhiteKey'
+import { BlackKey } from './BlackKey'
+import { KeyBoardShortcuts } from './keyboardShortcuts'
+
+/**
+ * Piano component
+ *
+ * TODO:
+ * - add scale highlight
+ */
+
+export interface PianoProps {
+  // required
+  noteRange: { first: number, last: number }
+
+  // optional
+  height?: number | string
+
+  glissando?: boolean
+  midiMax?: number
+  keyboardShortcuts?: KeyBoardShortcuts
+  fill?: boolean
+
+  style?: CSSObject
+
+  playNote?: (noteNumber: number) => void
+  stopNote?: (noteNumber: number) => void
+
+  label?: (note: number, index: number) => ReactNode
+
+  /**
+   * \<WhiteKey /> | \<BlackKey />
+   */
+  children?: ReactElement | ReactElement[]
+}
+
+export function Piano({
+  noteRange,
+  glissando = true,
+  midiMax = 127,
+  keyboardShortcuts,
+  fill = false,
+  height = fill ? '100%' : 160,
+  style,
+  playNote,
+  stopNote,
+  label,
+  children,
+}: PianoProps) {
+  // -- state and ref ---
+  const [pressed, setPressed] = useState(false)
+  const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1)
+  const keyRefs = useRef<RefObject<KeyMethods>[]>([])
+  for (let i = 0; i < noteRange.last - noteRange.first + 1; i++) {
+    keyRefs.current[i] = createRef<KeyMethods>()
+  }
+  const pianoRef = useRef<HTMLDivElement>(null)
+
+  // --- interpret props ---
+  const noteRangeArray = Array.from(
+    { length: noteRange.last - noteRange.first + 1 },
+    (_, i) => i + noteRange.first
+  )
+  const whiteNoteCount = noteRangeArray.filter((v) => isWhiteKey(v)).length
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let whiteKeyProps: any, blackKeyProps: any
+  if (children != undefined) {
+    React.Children.forEach(children, (child) => {
+      if (React.isValidElement(child)) {
+        if (child.type == WhiteKey) {
+          whiteKeyProps = child.props
+        } else if (child.type == BlackKey) {
+          blackKeyProps = child.props
+        } else {
+          throw new Error('only <WhiteKey> or <BlackKey>')
+        }
+      } else {
+        throw new Error('children is an invalid element.')
+      }
+    })
+  }
+
+  // --- internal functions ---
+  function notePosition(note: number) {
+    const pitchPositions: Record<NoteName, number> = {
+      C: 0,
+      'C#': 0.55,
+      D: 1,
+      'D#': 1.8,
+      E: 2,
+      F: 3,
+      'F#': 3.5,
+      G: 4,
+      'G#': 4.7,
+      A: 5,
+      'A#': 5.85,
+      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 octave = Math.floor((note - noteRange.first) / 12)
+    const octaveOffset = noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0
+    const length = whiteNoteWidth + 3
+    return pos * length + (octave + octaveOffset) * 7 * length
+  }
+
+  // --- hooks ---
+  useEffect(() => {
+    if (fill && pianoRef.current) {
+      const parent = pianoRef.current.parentElement
+      if (!parent) throw new Error("doesn't have a parent element.")
+      const resizeObserver = new ResizeObserver(() => {
+        const w = pianoRef.current!.clientWidth
+        setWhiteNoteWidth(w / whiteNoteCount - 3)
+      })
+      resizeObserver.observe(parent)
+    } else {
+      setWhiteNoteWidth(whiteKeyProps?.width || 40)
+    }
+  }, [])
+
+  useEventListener(window, 'keydown', (e) => {
+    if (e.repeat) return
+    if (!keyboardShortcuts) return
+    const index = keyboardShortcuts.keys.indexOf(e.key)
+    if (index != -1) {
+      if (!keyRefs.current[index]?.current?.played()) {
+        keyRefs.current[index]?.current?.play()
+      }
+    }
+  })
+
+  useEventListener(window, 'keyup', (e) => {
+    if (e.repeat) return
+    if (!keyboardShortcuts) return
+    const index = keyboardShortcuts.keys.indexOf(e.key)
+    if (index != -1) {
+      keyRefs.current[index]?.current?.stop()
+    }
+  })
+
+  return (
+    <div
+      ref={pianoRef}
+      className="tremolo-piano"
+      css={css({
+        display: 'inline-block',
+        boxSizing: 'border-box',
+        userSelect: 'none',
+        width: fill ? '100%' : undefined,
+        height: height,
+        position: 'relative',
+        ...style
+      })}
+      onPointerDown={() => {
+        setPressed(true)
+      }}
+      onPointerUp={() => {
+        setPressed(false)
+      }}
+    >
+      {noteRangeArray.map((note, index) => {
+        return (
+          isWhiteKey(note) ? (
+            <WhiteKey
+              key={note}
+              ref={keyRefs.current[index]}
+              __glissando={glissando && pressed}
+              __position={notePosition(note)}
+              __note={note}
+              __disabled={note > midiMax}
+              __index={index}
+              __fill={fill}
+              __width={whiteNoteWidth}
+              __playNote={playNote}
+              __stopNote={stopNote}
+              __label={label}
+              {...whiteKeyProps}
+            />
+          ) : (
+            <BlackKey
+              key={note}
+              ref={keyRefs.current[index]}
+              __glissando={glissando && pressed}
+              __position={notePosition(note)}
+              __note={note}
+              __disabled={note > midiMax}
+              __index={index}
+              __fill={fill}
+              __width={whiteNoteWidth * 0.65}
+              __playNote={playNote}
+              __stopNote={stopNote}
+              __label={label}
+              {...blackKeyProps}
+            />
+          )
+        )
+      })}
+    </div>
+  )
+}
+
+export * from './key'
+export { WhiteKey } from './WhiteKey'
+export { BlackKey } from './BlackKey'
+export { KeyLabel } from './KeyLabel'
+
+export * from './keyboardShortcuts'

package/src/components/Piano/key.ts

@@ -0,0 +1,43 @@
+import { CSSObject } from "@emotion/react"
+import { ReactElement, ReactNode } from "react"
+
+export interface KeyProps {
+  width?: number
+  height?: number | string
+
+  bg?: string
+  activeBg?: string
+  style?: CSSObject
+
+  /**
+   * \<KeyLabel />
+   */
+  children?: ReactElement
+
+  /** @internal */
+  __glissando?: boolean
+  /** @internal */
+  __position?: number
+  /** @internal */
+  __note?: number
+  /** @internal */
+  __disabled?: boolean
+  /** @internal */
+  __index?: number
+  /** @internal */
+  __fill?: boolean
+  /** @internal */
+  __width?: number
+  /** @internal */
+  __playNote?: (noteNumber: number) => void
+  /** @internal */
+  __stopNote?: (noteNumber: number) => void
+  /** @internal */
+  __label?: (note: number) => ReactNode
+}
+
+export interface KeyMethods {
+  play: () => void
+  stop: () => void
+  played: () => boolean
+}

package/src/components/Piano/keyboardShortcuts.ts

@@ -0,0 +1,12 @@
+export type KeyBoardShortcuts = {
+  keys: string[],
+  flags?: {
+    naturalOnly?: boolean
+  },
+}
+
+export const Shortcuts = {
+  HOME_ROW: {
+    keys: ['a', 'w', 's', 'e', 'd', 'f', 't', 'g', 'y', 'h', 'u', 'j', 'k', 'o', 'l', 'p', ';']
+  }
+}

package/src/components/Slider/Thumb.tsx

@@ -1,28 +1,67 @@
 import { CSSObject, css } from '@emotion/react'
-import { ReactNode } from 'react'
+import { forwardRef, ReactNode, useImperativeHandle, useRef } from 'react'
+import clsx from 'clsx'
 
 interface SliderThumbProps {
+  size?: number | string
+  width?: number | string
+  height?: number | string
   color?: string
+  hoverColor?: string
+  disabledColor?: string
+  disabledHoverColor?: string
+  zIndex?: number
+
+  className?: string
   style?: CSSObject
-  __css?: CSSObject
   children?: ReactNode
+
+  /** @internal */
+  __disabled?: boolean
+  /** @internal */
+  __css?: CSSObject
 }
 
-export function SliderThumb({
-  color,
+export interface SliderThumbMethods {
+  focus: () => void
+  blur: () => void
+}
+
+ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(({
+  size,
+  width = 22,
+  height = 22,
+  color = '#4e76e6',
+  hoverColor = color,
+  disabledColor = '#5d6478',
+  disabledHoverColor = disabledColor,
+  zIndex = 100,
   children,
+  className,
   style,
+  __disabled,
   __css,
-}: SliderThumbProps) {
+}: SliderThumbProps, ref) => {
+  const wrapperRef = useRef<HTMLDivElement>(null)
+
+  useImperativeHandle(ref, () => {
+    return {
+      focus() {
+        wrapperRef.current?.focus()
+      },
+      blur() {
+        wrapperRef.current?.blur()
+      },
+    }
+  }, [])
+
   return (
     <div
       className="tremolo-slider-thumb-wrapper"
       css={css({
-        width: 'fit-content',
-        height: 'fit-content',
         position: 'absolute',
         translate: '-50% -50%',
-        zIndex: 100,
+        zIndex: zIndex,
         ...__css,
       })}
     >
@@ -31,18 +70,20 @@ export function SliderThumb({
       ) : (
         // default slider thumb
         <div
-          className="tremolo-slider-thumb"
+          ref={wrapperRef}
+          className={clsx('tremolo-slider-thumb', className)}
           // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
           tabIndex={0}
           css={css({
-            background: color,
-            width: '1.4rem',
-            height: '1.4rem',
+            background: __disabled ? disabledColor : color,
+            width: size ?? width,
+            height: size ?? height,
             borderRadius: '50%',
+            outline: 'none',
             '&:hover': {
-              background: `color-mix(in srgb, ${color} 95%, black)`
+              background: __disabled ? disabledHoverColor : hoverColor
             },
-            '&:active': {
+            '&:focus': !__disabled && {
               boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
             },
             ...style,
@@ -51,4 +92,4 @@ export function SliderThumb({
       )}
     </div>
   )
-}
+})

package/src/components/Slider/Track.tsx

@@ -1,20 +1,79 @@
 import { css, CSSObject } from '@emotion/react'
 import { ReactElement } from 'react'
+import clsx from 'clsx'
+import { styleHelper } from '@tremolo-ui/functions'
+import { isHorizontal } from '@tremolo-ui/functions/Slider'
+
+import { Direction, gradientDirection } from './type'
 
 interface SliderTrackProps {
+  length?: number | string
+  thickness?: number | string
+
+  activeBg?: string
+  inactiveBg?: string
+  activeHoverBg?: string
+  inactiveHoverBg?: string
+
+  disabledActiveBg?: string
+  disabledInactiveBg?: string
+  disabledActiveHoverBg?: string
+  disabledInactiveHoverBg?: string
+
+  className?: string
   style?: CSSObject
   children?: ReactElement
-  __css?: CSSObject
+
+  /** inherit */
+  __thumb?: ReactElement
+  /** inherit */
+  __direction?: Direction
+  /** inherit */
+  __disabled?: boolean
+  /** internal */
+  __percent?: number
 }
 
 export function SliderTrack({
+  length = 140,
+  thickness = 10,
+  activeBg = '#7998ec',
+  inactiveBg = '#eee',
+  activeHoverBg = '#6387e9',
+  inactiveHoverBg = '#e0e0e0',
+  disabledActiveBg = '#858890',
+  disabledInactiveBg = '#ddd',
+  disabledActiveHoverBg = disabledActiveBg,
+  disabledInactiveHoverBg = disabledInactiveBg,
   children,
+  className,
   style,
-  __css,
+  __thumb,
+  __direction,
+  __disabled,
+  __percent,
 }: SliderTrackProps) {
+  const active = __disabled ? disabledActiveBg : activeBg
+  const inactive = __disabled ? disabledInactiveBg : inactiveBg
+  const activeHover = __disabled ? disabledActiveHoverBg : activeHoverBg
+  const inactiveHover = __disabled ? disabledInactiveHoverBg : inactiveHoverBg
   return (
-    <div className="tremolo-slider-track" css={css({ ...__css, ...style })}>
+    <div
+      className={clsx('tremolo-slider-track', className)}
+      css={css({
+        position: 'relative',
+        background: `linear-gradient(to ${gradientDirection(__direction!)}, ${active} ${__percent}%, ${inactive} ${__percent}%)`,
+        borderRadius: styleHelper(thickness!, '/', 2),
+        width: isHorizontal(__direction!) ? length : thickness,
+        height: isHorizontal(__direction!) ? thickness : length,
+        ':hover': {
+          background: `linear-gradient(to ${gradientDirection(__direction!)}, ${activeHover} ${__percent}%, ${inactiveHover} ${__percent}%)`
+        },
+        ...style
+      })}
+    >
       {children}
+      {__thumb}
     </div>
   )
 }