@tremolo-ui/react 0.0.7 → 0.0.9

package/src/components/Piano/index.tsx

@@ -1,13 +1,30 @@
-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 clsx from 'clsx'
+import React, {
+  ComponentPropsWithoutRef,
+  createRef,
+  CSSProperties,
+  ReactElement,
+  ReactNode,
+  RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from '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 { KeyMethods, KeyProps } from './key'
 import { KeyBoardShortcuts } from './keyboardShortcuts'
+import { defaultWhiteKeyWidth, WhiteKey } from './WhiteKey'
 
 /**
  * Piano component
@@ -18,7 +35,7 @@ import { KeyBoardShortcuts } from './keyboardShortcuts'
 
 export interface PianoProps {
   // required
-  noteRange: { first: number, last: number }
+  noteRange: { first: number; last: number }
 
   // optional
   height?: number | string
@@ -28,7 +45,7 @@ export interface PianoProps {
   keyboardShortcuts?: KeyBoardShortcuts
   fill?: boolean
 
-  style?: CSSObject
+  style?: CSSProperties
 
   playNote?: (noteNumber: number) => void
   stopNote?: (noteNumber: number) => void
@@ -49,11 +66,13 @@ export function Piano({
   fill = false,
   height = fill ? '100%' : 160,
   style,
+  className,
   playNote,
   stopNote,
   label,
   children,
-}: PianoProps) {
+  ...props
+}: PianoProps & Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>) {
   // -- state and ref ---
   const [pressed, setPressed] = useState(false)
   const [whiteNoteWidth, setWhiteNoteWidth] = useState(-1)
@@ -66,19 +85,19 @@ export function Piano({
   // --- interpret props ---
   const noteRangeArray = Array.from(
     { length: noteRange.last - noteRange.first + 1 },
-    (_, i) => i + noteRange.first
+    (_, 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
+  let whiteKeyProps: KeyProps = {},
+    blackKeyProps: KeyProps = {}
   if (children != undefined) {
     React.Children.forEach(children, (child) => {
       if (React.isValidElement(child)) {
         if (child.type == WhiteKey) {
-          whiteKeyProps = child.props
+          whiteKeyProps = child.props as KeyProps
         } else if (child.type == BlackKey) {
-          blackKeyProps = child.props
+          blackKeyProps = child.props as KeyProps
         } else {
           throw new Error('only <WhiteKey> or <BlackKey>')
         }
@@ -113,7 +132,8 @@ export function Piano({
     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 octaveOffset =
+      noteNames.indexOf(firstNoteName) > noteNames.indexOf(_noteName) ? 1 : 0
     const length = whiteNoteWidth + 3
     return pos * length + (octave + octaveOffset) * 7 * length
   }
@@ -129,9 +149,9 @@ export function Piano({
       })
       resizeObserver.observe(parent)
     } else {
-      setWhiteNoteWidth(whiteKeyProps?.width || 40)
+      setWhiteNoteWidth(whiteKeyProps?.width || defaultWhiteKeyWidth)
     }
-  }, [])
+  }, [fill, whiteKeyProps?.width, whiteNoteCount])
 
   useEventListener(window, 'keydown', (e) => {
     if (e.repeat) return
@@ -156,58 +176,55 @@ export function Piano({
   return (
     <div
       ref={pianoRef}
-      className="tremolo-piano"
-      css={css({
-        display: 'inline-block',
-        boxSizing: 'border-box',
-        userSelect: 'none',
-        width: fill ? '100%' : undefined,
+      className={clsx('tremolo-piano', className)}
+      style={{
+        width: fill ? '100%' : (whiteNoteWidth + 3) * whiteNoteCount,
         height: height,
-        position: 'relative',
-        ...style
-      })}
-      onPointerDown={() => {
+        ...style,
+      }}
+      onPointerDown={(e) => {
+        if (props.onPointerDown) props.onPointerDown(e)
         setPressed(true)
       }}
-      onPointerUp={() => {
+      onPointerUp={(e) => {
+        if (props.onPointerUp) props.onPointerUp(e)
         setPressed(false)
       }}
+      {...props}
     >
       {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}
-            />
-          )
+        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>

package/src/components/Piano/key.ts

@@ -1,13 +1,10 @@
-import { CSSObject } from "@emotion/react"
-import { ReactElement, ReactNode } from "react"
+import { CSSProperties, ReactElement, ReactNode } from 'react'
 
 export interface KeyProps {
   width?: number
-  height?: number | string
+  height?: number | `${number}%`
 
-  bg?: string
-  activeBg?: string
-  style?: CSSObject
+  style?: CSSProperties
 
   /**
    * \<KeyLabel />
@@ -33,7 +30,7 @@ export interface KeyProps {
   /** @internal */
   __stopNote?: (noteNumber: number) => void
   /** @internal */
-  __label?: (note: number) => ReactNode
+  __label?: (note: number, index: number) => ReactNode
 }
 
 export interface KeyMethods {

package/src/components/Piano/keyboardShortcuts.ts

@@ -1,12 +1,31 @@
 export type KeyBoardShortcuts = {
-  keys: string[],
+  keys: string[]
+  // TODO
   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', ';']
-  }
+    keys: [
+      'a',
+      'w',
+      's',
+      'e',
+      'd',
+      'f',
+      't',
+      'g',
+      'y',
+      'h',
+      'u',
+      'j',
+      'k',
+      'o',
+      'l',
+      'p',
+      ';',
+    ],
+  },
 }

package/src/components/Slider/Scale.tsx

@@ -0,0 +1,55 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, ReactNode } from 'react'
+
+import { xor } from '@tremolo-ui/functions'
+import { generateOptionsList, ScaleOptions } from '@tremolo-ui/functions/Slider'
+
+import { useMax, useMin, useReverse, useStep, useVertical } from './context'
+import { ScaleOption } from './ScaleOption'
+
+export interface ScaleProps {
+  gap?: number | string
+  options?: ScaleOptions
+  children?: ReactNode
+}
+
+type Props = ScaleProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>
+
+export function Scale({
+  gap = 6,
+  options,
+  children,
+  className,
+  style,
+  ...props
+}: Props) {
+  const min = useMin()
+  const max = useMax()
+  const step = useStep()
+  const vertical = useVertical()
+  const reverse = useReverse()
+
+  const optionsList = options
+    ? generateOptionsList(options, min, max, step)
+    : []
+  if (xor(vertical, reverse)) optionsList.reverse()
+
+  return (
+    <div
+      className={clsx('tremolo-slider-scale', className)}
+      style={{
+        marginLeft: vertical ? gap : undefined,
+        marginTop: !vertical ? gap : undefined,
+        ...style,
+      }}
+      {...props}
+    >
+      {options
+        ? optionsList.map(({ value, type }, index) => {
+            return <ScaleOption key={index} value={value} type={type} />
+          })
+        : children}
+    </div>
+  )
+}

package/src/components/Slider/ScaleOption.tsx

@@ -0,0 +1,103 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, CSSProperties, useCallback } from 'react'
+
+import { toFixed, xor, normalizeValue } from '@tremolo-ui/functions'
+import { ScaleType } from '@tremolo-ui/functions/Slider'
+
+import { useMax, useMin, useReverse, useSkew, useVertical } from './context'
+
+export interface ScaleOptionProps {
+  // required
+  value: number
+
+  // optional
+  type?: ScaleType
+  /** Display text instead of value. */
+  label?: string
+  /** mark thickness */
+  thickness?: number | string
+  /** mark length */
+  length?: number | string
+  /** Gap between mark and label. */
+  gap?: number | string
+  labelWidth?: number | string
+  classes?: {
+    mark?: string
+    label?: string
+  }
+  styles?: {
+    mark?: CSSProperties
+    label?: CSSProperties
+  }
+}
+
+export function ScaleOption({
+  value,
+  type = 'mark-number',
+  label,
+  thickness = 1,
+  length = '0.5rem',
+  gap = 2,
+  labelWidth,
+  classes,
+  styles,
+  className,
+  style,
+  ...props
+}: ScaleOptionProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>) {
+  const min = useMin()
+  const max = useMax()
+  const skew = useSkew()
+  const vertical = useVertical()
+  const reverse = useReverse()
+
+  const calcPercent = useCallback(
+    (rawValue: number) => {
+      return toFixed(
+        xor(vertical, reverse)
+          ? 100 - normalizeValue(rawValue, min, max, skew) * 100
+          : normalizeValue(rawValue, min, max, skew) * 100,
+      )
+    },
+    [vertical, reverse, max, min, skew],
+  )
+
+  return (
+    <div
+      className={clsx('tremolo-slider-scale-option', className)}
+      style={{
+        left: !vertical ? `${calcPercent(value)}%` : undefined,
+        top: vertical ? `${calcPercent(value)}%` : undefined,
+        ...style,
+      }}
+      data-vertical={vertical}
+      {...props}
+    >
+      {type != 'number' && (
+        <div
+          className={clsx('tremolo-slider-scale-option-mark', classes?.mark)}
+          style={{
+            width: !vertical ? thickness : length,
+            height: vertical ? thickness : length,
+            marginBottom: !vertical ? gap : undefined,
+            marginRight: vertical ? gap : undefined,
+            ...styles?.mark,
+          }}
+          data-vertical={vertical}
+        ></div>
+      )}
+      {type != 'mark' && (
+        <div
+          className={clsx('tremolo-slider-scale-option-label', classes?.label)}
+          style={{
+            width: labelWidth,
+            ...styles?.label,
+          }}
+        >
+          {label || value}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/Slider/Thumb.tsx

@@ -1,25 +1,25 @@
-import { CSSObject, css } from '@emotion/react'
-import { forwardRef, ReactNode, useImperativeHandle, useRef } from 'react'
 import clsx from 'clsx'
+import {
+  CSSProperties,
+  forwardRef,
+  ReactNode,
+  useImperativeHandle,
+  useRef,
+} from 'react'
 
-interface SliderThumbProps {
+import { useDisabled, useVertical } from './context'
+
+export 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
+  style?: CSSProperties
   children?: ReactNode
 
   /** @internal */
-  __disabled?: boolean
-  /** @internal */
-  __css?: CSSObject
+  __percent?: number
 }
 
 export interface SliderThumbMethods {
@@ -27,69 +27,62 @@ export interface SliderThumbMethods {
   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, ref) => {
-  const wrapperRef = useRef<HTMLDivElement>(null)
+export const defaultThumbSize = 22
+
+export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
+  (
+    {
+      size,
+      width = defaultThumbSize,
+      height = defaultThumbSize,
+      children,
+      className,
+      style,
+      __percent,
+    }: SliderThumbProps,
+    ref,
+  ) => {
+    const wrapperRef = useRef<HTMLDivElement>(null)
+    const vertical = useVertical()
+    const disabled = useDisabled()
 
-  useImperativeHandle(ref, () => {
-    return {
-      focus() {
-        wrapperRef.current?.focus()
-      },
-      blur() {
-        wrapperRef.current?.blur()
-      },
-    }
-  }, [])
+    useImperativeHandle(ref, () => {
+      return {
+        focus() {
+          wrapperRef.current?.focus()
+        },
+        blur() {
+          wrapperRef.current?.blur()
+        },
+      }
+    }, [])
 
-  return (
-    <div
-      className="tremolo-slider-thumb-wrapper"
-      css={css({
-        position: 'absolute',
-        translate: '-50% -50%',
-        zIndex: zIndex,
-        ...__css,
-      })}
-    >
-      {children ? (
-        children
-      ) : (
-        // default slider thumb
-        <div
-          ref={wrapperRef}
-          className={clsx('tremolo-slider-thumb', className)}
-          // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
-          tabIndex={0}
-          css={css({
-            background: __disabled ? disabledColor : color,
-            width: size ?? width,
-            height: size ?? height,
-            borderRadius: '50%',
-            outline: 'none',
-            '&:hover': {
-              background: __disabled ? disabledHoverColor : hoverColor
-            },
-            '&:focus': !__disabled && {
-              boxShadow: '0px 0px 0px 3px rgba(var(--tremolo-theme-color-rgb), 0.2)',
-            },
-            ...style,
-          })}
-        ></div>
-      )}
-    </div>
-  )
-})
+    return (
+      <div
+        className="tremolo-slider-thumb-wrapper"
+        style={{
+          top: vertical ? `${__percent}%` : '50%',
+          left: !vertical ? `${__percent}%` : '50%',
+        }}
+      >
+        {children ? (
+          children
+        ) : (
+          // default slider thumb
+          <div
+            ref={wrapperRef}
+            className={clsx('tremolo-slider-thumb', className)}
+            // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+            tabIndex={0}
+            aria-disabled={disabled}
+            style={{
+              width: size ?? width,
+              height: size ?? height,
+              ...style,
+            }}
+          ></div>
+        )}
+      </div>
+    )
+  },
+)