@tremolo-ui/react 0.1.4 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tremolo-ui/react",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "React component library for audio app",
   "type": "module",
   "sideEffects": [
@@ -16,7 +16,7 @@
     "serve": "http-server ./storybook-static",
     "lint": "eslint --fix --ext .ts,.tsx .",
     "format": "prettier --write .",
-    "test": "echo 'No test yet.'",
+    "test": "jest",
     "build:package": "tsc && tsdown",
     "clean": "npm run clean:build && npm run clean:sb",
     "clean:build": "rimraf ./dist",
@@ -39,14 +39,14 @@
     "react": "^19",
     "react-dom": "^19",
     "storybook": "^8.6.7",
-    "tone": "^15.0.4"
+    "tone": "^15"
   },
   "peerDependencies": {
     "react": "^18 ||^19",
     "react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@tremolo-ui/functions": "^0.1.4",
+    "@tremolo-ui/functions": "^0.1.5",
     "clsx": "^2.1.1",
     "zustand": "^5.0.3"
   },
@@ -78,14 +78,19 @@
   "exports": {
     ".": {
       "require": {
-        "default": "./dist/index.cjs",
-        "types": "./dist/index.d.cts"
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       },
       "import": {
-        "default": "./dist/index.js",
-        "types": "./dist/index.d.ts"
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
       }
     },
-    "./index.css": "./dist/index.css"
+    "./styles/index.css": "./dist/index.css",
+    "./styles/global.css": "./src/styles/global.css",
+    "./styles/Knob.css": "./src/components/Knob/index.css",
+    "./styles/NumberInput.css": "./src/components/NumberInput/index.css",
+    "./styles/Piano.css": "./src/components/Piano/index.css",
+    "./styles/XYPad.css": "./src/components/XYPad/index.css"
   }
 }

package/src/components/AnimationCanvas/canvas.ts

@@ -28,3 +28,19 @@ export function isDrawingState(obj: unknown): obj is DrawingState {
   const d: string[] = [...drawingState]
   return typeof obj == 'string' && d.includes(obj)
 }
+
+export function setDprConfig(
+  canvas: HTMLCanvasElement,
+  context: CanvasRenderingContext2D,
+  width: number,
+  height: number,
+  dpr: number,
+) {
+  canvas.width = width * dpr
+  canvas.height = height * dpr
+  // Reset current transformation matrix to the identity matrix
+  context.setTransform(1, 0, 0, 1, 0, 0)
+  context.scale(dpr, dpr)
+  canvas.style.width = `${width}px`
+  canvas.style.height = `${height}px`
+}

package/src/components/AnimationCanvas/index.tsx

@@ -8,30 +8,12 @@ import {
   useRef,
 } from 'react'
 
-import { DrawingContext, drawingState, DrawingStateValue } from './canvas'
-
-/*
-TODO
-AbsoluteSizingProps, RelativeSizingPropsの型付けを強くする
-AbsoluteSizingPropsの場合、width, heightは必須
-RelativeSizingPropsのの場合、relativeSizeは必須、reduceFlickeringはオプショナル
-*/
-
-function setDprConfig(
-  canvas: HTMLCanvasElement,
-  context: CanvasRenderingContext2D,
-  width: number,
-  height: number,
-  dpr: number,
-) {
-  canvas.width = width * dpr
-  canvas.height = height * dpr
-  // Reset current transformation matrix to the identity matrix
-  context.setTransform(1, 0, 0, 1, 0, 0)
-  context.scale(dpr, dpr)
-  canvas.style.width = `${width}px`
-  canvas.style.height = `${height}px`
-}
+import {
+  DrawingContext,
+  drawingState,
+  DrawingStateValue,
+  setDprConfig,
+} from './canvas'
 
 /** @category AnimationCanvas */
 export type InitFunction = (
@@ -46,8 +28,6 @@ export type InitFunction = (
 
 /** @category AnimationCanvas */
 export type DrawFunction = (
-  // TODO: saving scale and translate
-  // context: Omit<CanvasRenderingContext2D, 'save' | 'restore' | 'scale'>,
   context: CanvasRenderingContext2D,
   option: {
     /** current canvas width */
@@ -67,12 +47,13 @@ export type DrawFunction = (
 
 /** @category AnimationCanvas */
 export interface CommonProps {
+  draw: DrawFunction
+  init?: InitFunction
+  animate?: boolean
   /**
    * @see https://developer.mozilla.org/docs/Web/API/HTMLCanvasElement/getContext#contextattributes
    */
   options?: CanvasRenderingContext2DSettings
-  init?: InitFunction
-  draw: DrawFunction
 }
 
 /** @category AnimationCanvas */
@@ -108,12 +89,13 @@ export function AnimationCanvas(
 ): ReactElement
 export function AnimationCanvas({
   // common
-  options,
-  init,
   draw,
+  init,
+  animate = true,
+  options,
   // absolute
-  width = 100,
-  height = 100,
+  width: _width = 100,
+  height: _height = 100,
   // relative
   relativeSize,
   reduceFlickering = true,
@@ -145,9 +127,11 @@ export function AnimationCanvas({
       const deltaTime = now - deltaMemoRef.current
       const elapsedTime = now - startTimeRef.current
       deltaMemoRef.current = now
-      reqIdRef.current = requestAnimationFrame(() =>
-        loop(context, width, height, count + 1),
-      )
+      if (animate) {
+        reqIdRef.current = requestAnimationFrame(() =>
+          loop(context, width, height, count + 1),
+        )
+      }
       draw(context, {
         width: width.current,
         height: height.current,
@@ -157,7 +141,7 @@ export function AnimationCanvas({
         fps: 1000 / deltaTime,
       })
     },
-    [draw],
+    [draw, animate],
   )
 
   useEffect(() => {
@@ -167,6 +151,18 @@ export function AnimationCanvas({
     if (!context) throw new Error('Cannot get canvas context.')
     const dpr = globalThis.devicePixelRatio
 
+    const firstRendering = (width: number, height: number) => {
+      setDprConfig(canvas, context, width, height, dpr)
+      widthRef.current = width
+      heightRef.current = height
+
+      if (init) init(context, { width, height })
+      const now = performance.now()
+      deltaMemoRef.current = now
+      startTimeRef.current = now
+      loop(context, widthRef, heightRef, -1)
+    }
+
     if (relativeSize) {
       const parent = canvas.parentElement
       if (!parent) throw new Error("Canvas doesn't have a parent element.")
@@ -175,16 +171,14 @@ export function AnimationCanvas({
 
       const ro = new ResizeObserver((entries) => {
         for (const entry of entries) {
-          // Prevents loss of some context when the canvas is resized
-          const contextMemo = {} as DrawingContext
-          for (const prop of drawingState) {
-            ;(contextMemo[prop] as DrawingStateValue) = context[prop]
-          }
-
           const w = entry.contentRect.width
           const h = entry.contentRect.height
-
+          const contextMemo = {} as DrawingContext
           if (reduceFlickering && memoCanvas && memoContext) {
+            // Prevents loss of some context when the canvas is resized
+            for (const prop of drawingState) {
+              ;(contextMemo[prop] as DrawingStateValue) = context[prop]
+            }
             memoCanvas.width = w * dpr
             memoCanvas.height = h * dpr
             memoContext.scale(1 / dpr, 1 / dpr)
@@ -197,10 +191,6 @@ export function AnimationCanvas({
           widthRef.current = w
           heightRef.current = h
 
-          for (const prop of drawingState) {
-            ;(context[prop] as DrawingStateValue) = contextMemo[prop]
-          }
-
           if (
             reduceFlickering &&
             memoContext &&
@@ -208,52 +198,45 @@ export function AnimationCanvas({
             memoCanvas.width > 0 &&
             memoCanvas.height > 0
           ) {
+            for (const prop of drawingState) {
+              ;(context[prop] as DrawingStateValue) = contextMemo[prop]
+            }
+
             context.drawImage(memoContext.canvas, 0, 0)
           }
+
+          if (!animate) {
+            // re rendering
+            loop(context, widthRef, heightRef, -1)
+          }
         }
       })
       ro.observe(parent)
 
-      const w = parent.clientWidth
-      const h = parent.clientHeight
-      setDprConfig(canvas, context, w, h, dpr)
-
-      if (init)
-        init(context, { width: widthRef.current, height: heightRef.current })
-      const now = performance.now()
-      deltaMemoRef.current = now
-      startTimeRef.current = now
-      loop(context, widthRef, heightRef, -1)
+      const width = parent.clientWidth
+      const height = parent.clientHeight
+      firstRendering(width, height)
 
       return () => {
         if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
         ro.disconnect()
       }
     } else {
-      const rect = canvas.getBoundingClientRect()
-      setDprConfig(canvas, context, rect.width, rect.height, dpr)
-      widthRef.current = rect.width
-      heightRef.current = rect.height
-
-      if (init)
-        init(context, { width: widthRef.current, height: heightRef.current })
-      const now = performance.now()
-      deltaMemoRef.current = now
-      startTimeRef.current = now
-      loop(context, widthRef, heightRef, -1)
+      const { width, height } = canvas.getBoundingClientRect()
+      firstRendering(width, height)
 
       return () => {
         if (reqIdRef.current) cancelAnimationFrame(reqIdRef.current)
       }
     }
-  }, [loop, init, options, reduceFlickering, relativeSize])
+  }, [loop, init, options, reduceFlickering, relativeSize, animate])
 
   return (
     <>
       <canvas
         className={clsx('tremolo-animation-canvas', className)}
-        width={relativeSize ? 0 : width}
-        height={relativeSize ? 0 : height}
+        width={relativeSize ? 0 : _width}
+        height={relativeSize ? 0 : _height}
         ref={canvasRef}
         onContextMenu={onContextMenu}
         {...props}

package/src/components/NumberInput/InternalInput.tsx

@@ -16,11 +16,11 @@ import {
   rawValue,
   stepValue,
 } from '@tremolo-ui/functions'
-import { parseValue } from '@tremolo-ui/functions/NumberInput'
 
 import { useRefCallbackEvent } from '../../hooks/useRefCallbackEvent'
 
 import { safeClamp, useNumberInputContext } from './context'
+import { parseValue } from './type'
 
 import { NumberInputMethods } from '.'
 

package/src/components/NumberInput/context.tsx

@@ -2,7 +2,8 @@ import { createContext, useContext, useEffect, useRef } from 'react'
 import { createStore, useStore } from 'zustand'
 
 import { clamp } from '@tremolo-ui/functions'
-import { parseValue, Units } from '@tremolo-ui/functions/NumberInput'
+
+import { parseValue, Units } from './type'
 
 type State = {
   value: string

package/src/components/NumberInput/index.css

@@ -72,6 +72,7 @@
 
 .tremolo-number-input {
   display: block;
+  color: inherit;
   width: calc(100% - 20px - var(--stepper-width));
   background-color: inherit;
   font: inherit;

package/src/components/NumberInput/index.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx'
 import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
 
 import { InputEventOption } from '@tremolo-ui/functions'
-import { Units } from '@tremolo-ui/functions/NumberInput'
 
 import { NumberInputProvider } from './context'
 import { InternalInput } from './InternalInput'
+import { Units } from './type'
 
 /*
 TODO
@@ -178,3 +178,4 @@ export const NumberInput = forwardRef<NumberInputMethods, Props>(
 export * from './Stepper'
 export * from './IncrementStepper'
 export * from './DecrementStepper'
+export { type Units } from './type'

package/src/components/NumberInput/type.ts

@@ -0,0 +1,58 @@
+/**
+ * [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/index.tsx

@@ -309,7 +309,6 @@ export function Piano({
   )
 }
 
-export * from './keyboardShortcuts'
-
+export { type KeyboardShortcuts, SHORTCUTS } from './keyboardShortcuts'
 export { WhiteKey, BlackKey, type KeyProps, type KeyMethods } from './key'
 export { KeyLabel, type KeyLabelProps } from './KeyLabel'

package/src/components/Slider/Scale.tsx

@@ -2,10 +2,10 @@ import clsx from 'clsx'
 import { ComponentPropsWithoutRef, ReactNode } from 'react'
 
 import { xor } from '@tremolo-ui/functions'
-import { generateOptionsList, ScaleOptions } from '@tremolo-ui/functions/Slider'
 
 import { useSliderContext } from './context'
 import { ScaleOption } from './ScaleOption'
+import { generateOptionsList, ScaleOptions } from './type'
 
 /** @category Slider */
 export interface ScaleProps {

package/src/components/Slider/ScaleOption.tsx

@@ -2,9 +2,9 @@ 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 { useSliderContext } from './context'
+import { ScaleType } from './type'
 
 /** @category Slider */
 export interface ScaleOptionProps {

package/src/components/Slider/index.tsx

@@ -341,3 +341,4 @@ export {
 export { SliderTrack, type SliderTrackProps } from './Track'
 export { Scale, type ScaleProps } from './Scale'
 export { ScaleOption, type ScaleOptionProps } from './ScaleOption'
+export { type ScaleOptions, type ScaleType } from './type'

package/src/components/Slider/type.ts

@@ -0,0 +1,26 @@
+import { decimalPart, toFixed } from '@tremolo-ui/functions'
+
+export type ScaleType = 'mark' | 'mark-number' | 'number'
+export type ScaleOptions = ['step', ScaleType] | [number, ScaleType]
+
+export function generateOptionsList(
+  options: ScaleOptions,
+  min: number,
+  max: number,
+  step: number,
+) {
+  const optionsList: {
+    value: number
+    type: ScaleType
+  }[] = []
+  const per = options[0] == 'step' ? step : options[0]
+  const count = Math.floor(max / per) - Math.ceil(min / per) + 1
+  for (let i = 0; i < count; i++) {
+    const value = toFixed(
+      per * (Math.ceil(min / per) + i),
+      decimalPart(per)?.length,
+    )
+    optionsList.push({ value: value, type: options[1] })
+  }
+  return optionsList
+}

package/src/index.ts

@@ -1,4 +1,5 @@
-import './styles/index.css'
+// For bundled CSS (@tremolo-ui/react/styles/index.css)
+import './styles/global.css'
 import './components/Knob/index.css'
 import './components/NumberInput/index.css'
 import './components/Piano/index.css'