@tremolo-ui/react 0.0.8 → 0.0.10

package/src/components/Piano/BlackKey.tsx

@@ -8,13 +8,15 @@ import React, {
 
 import { KeyMethods, KeyProps } from './key'
 import { KeyLabel, KeyLabelProps } from './KeyLabel'
+import { defaultWhiteKeyWidth } from './WhiteKey'
 
 type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 
+/** @category Piano */
 export const BlackKey = forwardRef<KeyMethods, Props>(
   (
     {
-      width = 40 * 0.65,
+      width = defaultWhiteKeyWidth * 0.65,
       height = '60%',
       className,
       style,
@@ -26,8 +28,8 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
       __index,
       __fill,
       __width,
-      __playNote,
-      __stopNote,
+      __onPlayNote,
+      __onStopNote,
       __label,
       ...props
     }: Props,
@@ -40,17 +42,17 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
         play() {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         },
         stop() {
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         },
         played() {
           return played
         },
       }
-    }, [__disabled, __note, __playNote, __stopNote, played])
+    }, [__disabled, __note, __onPlayNote, __onStopNote, played])
 
     let keyLabelProps: KeyLabelProps = {}
     if (children != undefined) {
@@ -81,24 +83,26 @@ export const BlackKey = forwardRef<KeyMethods, Props>(
         onPointerDown={() => {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         }}
         onPointerEnter={() => {
           if (__disabled) return
           if (__glissando) {
             setPlayed(true)
-            if (__playNote) __playNote(__note!)
+            if (__onPlayNote) __onPlayNote(__note!)
           }
         }}
         onPointerUp={() => {
           if (__disabled) return
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         }}
         onPointerLeave={() => {
           if (__disabled) return
-          setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__glissando) {
+            setPlayed(false)
+            if (__onStopNote) __onStopNote(__note!)
+          }
         }}
         {...props}
       >

package/src/components/Piano/KeyLabel.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx'
 import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
 
+/** @category Piano */
 export interface KeyLabelProps {
   /**
    * override Piano.label
@@ -18,6 +19,7 @@ export interface KeyLabelProps {
   __label?: (note: number, index: number) => ReactNode
 }
 
+/** @category Piano */
 export function KeyLabel({
   label,
   className,

package/src/components/Piano/WhiteKey.tsx

@@ -11,10 +11,14 @@ import { KeyLabel, KeyLabelProps } from './KeyLabel'
 
 type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 
+/** @category Piano */
+export const defaultWhiteKeyWidth = 40
+
+/** @category Piano */
 export const WhiteKey = forwardRef<KeyMethods, Props>(
   (
     {
-      width = 40,
+      width = defaultWhiteKeyWidth,
       height = '100%',
       className,
       style,
@@ -26,8 +30,8 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
       __index,
       __fill,
       __width,
-      __playNote,
-      __stopNote,
+      __onPlayNote,
+      __onStopNote,
       __label,
       ...props
     }: Props,
@@ -40,17 +44,17 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
         play() {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         },
         stop() {
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         },
         played() {
           return played
         },
       }
-    }, [__disabled, __note, __playNote, __stopNote, played])
+    }, [__disabled, __note, __onPlayNote, __onStopNote, played])
 
     let keyLabelProps: KeyLabelProps = {}
     if (children != undefined) {
@@ -81,24 +85,26 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
         onPointerDown={() => {
           if (__disabled) return
           setPlayed(true)
-          if (__playNote) __playNote(__note!)
+          if (__onPlayNote) __onPlayNote(__note!)
         }}
         onPointerEnter={() => {
           if (__disabled) return
           if (__glissando) {
             setPlayed(true)
-            if (__playNote) __playNote(__note!)
+            if (__onPlayNote) __onPlayNote(__note!)
           }
         }}
         onPointerUp={() => {
           if (__disabled) return
           setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__onStopNote) __onStopNote(__note!)
         }}
         onPointerLeave={() => {
           if (__disabled) return
-          setPlayed(false)
-          if (__stopNote) __stopNote(__note!)
+          if (__glissando) {
+            setPlayed(false)
+            if (__onStopNote) __onStopNote(__note!)
+          }
         }}
         {...props}
       >

package/src/components/Piano/index.tsx

@@ -24,7 +24,7 @@ import { useEventListener } from '../../hooks/useEventListener'
 import { BlackKey } from './BlackKey'
 import { KeyMethods, KeyProps } from './key'
 import { KeyBoardShortcuts } from './keyboardShortcuts'
-import { WhiteKey } from './WhiteKey'
+import { defaultWhiteKeyWidth, WhiteKey } from './WhiteKey'
 
 /**
  * Piano component
@@ -33,6 +33,7 @@ import { WhiteKey } from './WhiteKey'
  * - add scale highlight
  */
 
+/** @category Piano */
 export interface PianoProps {
   // required
   noteRange: { first: number; last: number }
@@ -47,8 +48,8 @@ export interface PianoProps {
 
   style?: CSSProperties
 
-  playNote?: (noteNumber: number) => void
-  stopNote?: (noteNumber: number) => void
+  onPlayNote?: (noteNumber: number) => void
+  onStopNote?: (noteNumber: number) => void
 
   label?: (note: number, index: number) => ReactNode
 
@@ -58,6 +59,7 @@ export interface PianoProps {
   children?: ReactElement | ReactElement[]
 }
 
+/** @category Piano */
 export function Piano({
   noteRange,
   glissando = true,
@@ -67,8 +69,8 @@ export function Piano({
   height = fill ? '100%' : 160,
   style,
   className,
-  playNote,
-  stopNote,
+  onPlayNote,
+  onStopNote,
   label,
   children,
   ...props
@@ -149,11 +151,11 @@ export function Piano({
       })
       resizeObserver.observe(parent)
     } else {
-      setWhiteNoteWidth(whiteKeyProps?.width || 40)
+      setWhiteNoteWidth(whiteKeyProps?.width || defaultWhiteKeyWidth)
     }
   }, [fill, whiteKeyProps?.width, whiteNoteCount])
 
-  useEventListener(window, 'keydown', (e) => {
+  useEventListener(globalThis.window, 'keydown', (e) => {
     if (e.repeat) return
     if (!keyboardShortcuts) return
     const index = keyboardShortcuts.keys.indexOf(e.key)
@@ -164,7 +166,7 @@ export function Piano({
     }
   })
 
-  useEventListener(window, 'keyup', (e) => {
+  useEventListener(globalThis.window, 'keyup', (e) => {
     if (e.repeat) return
     if (!keyboardShortcuts) return
     const index = keyboardShortcuts.keys.indexOf(e.key)
@@ -178,7 +180,7 @@ export function Piano({
       ref={pianoRef}
       className={clsx('tremolo-piano', className)}
       style={{
-        width: fill ? '100%' : undefined,
+        width: fill ? '100%' : (whiteNoteWidth + 3) * whiteNoteCount,
         height: height,
         ...style,
       }}
@@ -204,8 +206,8 @@ export function Piano({
             __index={index}
             __fill={fill}
             __width={whiteNoteWidth}
-            __playNote={playNote}
-            __stopNote={stopNote}
+            __onPlayNote={onPlayNote}
+            __onStopNote={onStopNote}
             __label={label}
             {...whiteKeyProps}
           />
@@ -220,8 +222,8 @@ export function Piano({
             __index={index}
             __fill={fill}
             __width={whiteNoteWidth * 0.65}
-            __playNote={playNote}
-            __stopNote={stopNote}
+            __onPlayNote={onPlayNote}
+            __onStopNote={onStopNote}
             __label={label}
             {...blackKeyProps}
           />
@@ -236,4 +238,4 @@ export * from './keyboardShortcuts'
 
 export { WhiteKey } from './WhiteKey'
 export { BlackKey } from './BlackKey'
-export { KeyLabel } from './KeyLabel'
+export { KeyLabel, type KeyLabelProps } from './KeyLabel'

package/src/components/Piano/key.ts

@@ -1,5 +1,8 @@
 import { CSSProperties, ReactElement, ReactNode } from 'react'
 
+/**
+ * @category Piano
+ */
 export interface KeyProps {
   width?: number
   height?: number | `${number}%`
@@ -26,13 +29,16 @@ export interface KeyProps {
   /** @internal */
   __width?: number
   /** @internal */
-  __playNote?: (noteNumber: number) => void
+  __onPlayNote?: (noteNumber: number) => void
   /** @internal */
-  __stopNote?: (noteNumber: number) => void
+  __onStopNote?: (noteNumber: number) => void
   /** @internal */
   __label?: (note: number, index: number) => ReactNode
 }
 
+/**
+ * @category Piano
+ */
 export interface KeyMethods {
   play: () => void
   stop: () => void

package/src/components/Piano/keyboardShortcuts.ts

@@ -1,3 +1,4 @@
+/** @category Piano */
 export type KeyBoardShortcuts = {
   keys: string[]
   // TODO
@@ -6,6 +7,7 @@ export type KeyBoardShortcuts = {
   }
 }
 
+/** @category Piano */
 export const Shortcuts = {
   HOME_ROW: {
     keys: [

package/src/components/Slider/Scale.tsx

@@ -4,9 +4,10 @@ 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 { useSliderContext } from './context'
 import { ScaleOption } from './ScaleOption'
 
+/** @category Slider */
 export interface ScaleProps {
   gap?: number | string
   options?: ScaleOptions
@@ -16,6 +17,7 @@ export interface ScaleProps {
 type Props = ScaleProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleProps>
 
+/** @category Slider */
 export function Scale({
   gap = 6,
   options,
@@ -24,11 +26,11 @@ export function Scale({
   style,
   ...props
 }: Props) {
-  const min = useMin()
-  const max = useMax()
-  const step = useStep()
-  const vertical = useVertical()
-  const reverse = useReverse()
+  const min = useSliderContext((s) => s.min)
+  const max = useSliderContext((s) => s.max)
+  const step = useSliderContext((s) => s.step)
+  const vertical = useSliderContext((s) => s.vertical)
+  const reverse = useSliderContext((s) => s.reverse)
 
   const optionsList = options
     ? generateOptionsList(options, min, max, step)

package/src/components/Slider/ScaleOption.tsx

@@ -4,8 +4,9 @@ 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'
+import { useSliderContext } from './context'
 
+/** @category Slider */
 export interface ScaleOptionProps {
   // required
   value: number
@@ -31,6 +32,7 @@ export interface ScaleOptionProps {
   }
 }
 
+/** @category Slider */
 export function ScaleOption({
   value,
   type = 'mark-number',
@@ -46,11 +48,11 @@ export function ScaleOption({
   ...props
 }: ScaleOptionProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof ScaleOptionProps>) {
-  const min = useMin()
-  const max = useMax()
-  const skew = useSkew()
-  const vertical = useVertical()
-  const reverse = useReverse()
+  const min = useSliderContext((s) => s.min)
+  const max = useSliderContext((s) => s.max)
+  const skew = useSliderContext((s) => s.skew)
+  const vertical = useSliderContext((s) => s.vertical)
+  const reverse = useSliderContext((s) => s.reverse)
 
   const calcPercent = useCallback(
     (rawValue: number) => {

package/src/components/Slider/Thumb.tsx

@@ -7,8 +7,9 @@ import {
   useRef,
 } from 'react'
 
-import { useDisabled, useVertical } from './context'
+import { useSliderContext } from './context'
 
+/** @category Slider */
 export interface SliderThumbProps {
   size?: number | string
   width?: number | string
@@ -22,13 +23,16 @@ export interface SliderThumbProps {
   __percent?: number
 }
 
+/** @category Slider */
 export interface SliderThumbMethods {
   focus: () => void
   blur: () => void
 }
 
+/** @category Slider */
 export const defaultThumbSize = 22
 
+/** @category Slider */
 export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
   (
     {
@@ -43,8 +47,8 @@ export const SliderThumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
     ref,
   ) => {
     const wrapperRef = useRef<HTMLDivElement>(null)
-    const vertical = useVertical()
-    const disabled = useDisabled()
+    const vertical = useSliderContext((s) => s.vertical)
+    const disabled = useSliderContext((s) => s.disabled)
 
     useImperativeHandle(ref, () => {
       return {

package/src/components/Slider/Track.tsx

@@ -3,11 +3,14 @@ import { CSSProperties, ReactElement } from 'react'
 
 import { styleHelper, xor } from '@tremolo-ui/functions'
 
-import { useDisabled, useReverse, useVertical } from './context'
+import { useSliderContext } from './context'
 
+/** @category Slider */
 export const defaultLength = 140
+/** @category Slider */
 export const defaultThickness = 10
 
+/** @category Slider */
 export interface SliderTrackProps {
   length?: number | string
   thickness?: number | string
@@ -15,6 +18,8 @@ export interface SliderTrackProps {
   active?: string
   inactive?: string
 
+  defaultStyle?: boolean
+
   className?: string
   style?: CSSProperties
   children?: ReactElement
@@ -25,6 +30,7 @@ export interface SliderTrackProps {
   __percent?: number
 }
 
+/** @category Slider */
 export function SliderTrack({
   length = defaultLength,
   thickness = defaultThickness,
@@ -33,12 +39,13 @@ export function SliderTrack({
   children,
   className,
   style,
+  defaultStyle = true,
   __thumb,
-  __percent,
+  __percent = 0,
 }: SliderTrackProps) {
-  const vertical = useVertical()
-  const reverse = useReverse()
-  const disabled = useDisabled()
+  const vertical = useSliderContext((s) => s.vertical)
+  const reverse = useSliderContext((s) => s.reverse)
+  const disabled = useSliderContext((s) => s.disabled)
 
   const direction = vertical ? 'bottom' : 'right'
   const colors = {
@@ -50,16 +57,21 @@ export function SliderTrack({
     <div
       className={clsx('tremolo-slider-track', className)}
       aria-disabled={disabled}
-      style={{
-        ...colors,
-        background: xor(vertical, reverse)
-          ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)`
-          : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`,
-        borderRadius: styleHelper(thickness!, '/', 2),
-        width: !vertical ? length : thickness,
-        height: vertical ? length : thickness,
-        ...style,
-      }}
+      data-vertical={vertical}
+      style={
+        !defaultStyle
+          ? style
+          : {
+              ...colors,
+              background: xor(vertical, reverse)
+                ? `linear-gradient(to ${direction}, var(--inactive, #eee) ${__percent}%, var(--active, #7998ec) ${__percent}%)`
+                : `linear-gradient(to ${direction}, var(--active, #7998ec) ${__percent}%, var(--inactive, #eee) ${__percent}%)`,
+              borderRadius: styleHelper(thickness!, '/', 2),
+              width: !vertical ? length : thickness,
+              height: vertical ? length : thickness,
+              ...style,
+            }
+      }
     >
       {children}
       {__thumb}

package/src/components/Slider/context.tsx

@@ -1,14 +1,7 @@
-import { createContext, useState, useContext, ReactNode } from 'react'
+import { createContext, useContext, useEffect, useRef } from 'react'
+import { createStore, useStore } from 'zustand'
 
-const minContext = createContext(0)
-const maxContext = createContext(0)
-const stepContext = createContext(0)
-const skewContext = createContext(0)
-const verticalContext = createContext(false)
-const reverseContext = createContext(false)
-const disabledContext = createContext(false)
-
-interface Props {
+type State = {
   min: number
   max: number
   step: number
@@ -16,51 +9,72 @@ interface Props {
   vertical: boolean
   reverse: boolean
   disabled: boolean
-  children: ReactNode
 }
 
-export function SliderValuesProvider({
-  min: _min,
-  max: _max,
-  step: _step,
-  skew: _skew,
-  vertical: _vertical,
-  reverse: _reverse,
-  disabled: _disabled,
-  children,
-}: Props) {
-  const [min] = useState(_min)
-  const [max] = useState(_max)
-  const [step] = useState(_step)
-  const [skew] = useState(_skew)
-  const [vertical] = useState(_vertical)
-  const [reverse] = useState(_reverse)
-  const [disabled] = useState(_disabled)
+type Action = {
+  updateMin: (min: State['min']) => void
+  updateMax: (max: State['max']) => void
+  updateStep: (step: State['step']) => void
+  updateSkew: (skew: State['skew']) => void
+  updateVertical: (vertical: State['vertical']) => void
+  updateReverse: (reverse: State['reverse']) => void
+  updateDisabled: (disabled: State['disabled']) => void
+}
+
+type SliderStore = ReturnType<typeof createSliderStore>
+
+const createSliderStore = (initProps?: Partial<State>) => {
+  const DEFAULT_PROPS: State = {
+    min: 0,
+    max: 0,
+    step: 0,
+    skew: 0,
+    vertical: false,
+    reverse: false,
+    disabled: false,
+  }
+
+  return createStore<State & Action>()((set) => ({
+    ...DEFAULT_PROPS,
+    ...initProps,
+    updateMin: (min) => set(() => ({ min: min })),
+    updateMax: (max) => set(() => ({ max: max })),
+    updateStep: (step) => set(() => ({ step: step })),
+    updateSkew: (skew) => set(() => ({ skew: skew })),
+    updateVertical: (vertical) => set(() => ({ vertical: vertical })),
+    updateReverse: (reverse) => set(() => ({ reverse: reverse })),
+    updateDisabled: (disabled) => set(() => ({ disabled: disabled })),
+  }))
+}
+
+const SliderContext = createContext<SliderStore | null>(null)
+
+type SliderProviderProps = React.PropsWithChildren<Partial<State>>
+
+export function SliderProvider({ children, ...props }: SliderProviderProps) {
+  const storeRef = useRef<SliderStore>()
+  if (!storeRef.current) {
+    storeRef.current = createSliderStore(props)
+  }
+
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.setState(props)
+    } else {
+      storeRef.current = createSliderStore(props)
+    }
+  }, [props])
 
   return (
-    <minContext.Provider value={min}>
-      <maxContext.Provider value={max}>
-        <stepContext.Provider value={step}>
-          <skewContext.Provider value={skew}>
-            <verticalContext.Provider value={vertical}>
-              <reverseContext.Provider value={reverse}>
-                <disabledContext.Provider value={disabled}>
-                  {children}
-                </disabledContext.Provider>
-              </reverseContext.Provider>
-            </verticalContext.Provider>
-          </skewContext.Provider>
-        </stepContext.Provider>
-      </maxContext.Provider>
-    </minContext.Provider>
+    <SliderContext.Provider value={storeRef.current}>
+      {children}
+    </SliderContext.Provider>
   )
 }
 
-export const useMin = () => useContext(minContext)
-export const useMax = () => useContext(maxContext)
-export const useStep = () => useContext(stepContext)
-export const useSkew = () => useContext(skewContext)
-export const useVertical = () => useContext(verticalContext)
-// export const useSetVertical = () => useContext(setVerticalContext)
-export const useReverse = () => useContext(reverseContext)
-export const useDisabled = () => useContext(disabledContext)
+/** @category Slider */
+export function useSliderContext<T>(selector: (state: State & Action) => T): T {
+  const store = useContext(SliderContext)
+  if (!store) throw new Error('Missing SliderContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/Slider/index.css

@@ -35,6 +35,14 @@
 
   position: relative;
 
+  &[data-vertical='false'] {
+    min-width: 50px;
+  }
+
+  &[data-vertical='true'] {
+    min-height: 50px;
+  }
+
   &:hover {
     --active: #6387e9;
     --inactive: #e0e0e0;