@tremolo-ui/react 0.1.6 → 0.2.1

package/src/components/Piano/index.css

@@ -9,7 +9,7 @@
 .tremolo-piano-white-key {
   --bg: oklch(100% 0 0);
   --color: oklch(0% 0 0);
-  --active-bg: oklch(90% 0 0);
+  --active-bg: oklch(92% 0 0);
   --active-color: oklch(0% 0 0);
 
   box-sizing: border-box;
@@ -34,9 +34,9 @@
 
 .tremolo-piano-black-key {
   --color: oklch(100% 0 0);
-  --bg: oklch(32.109% 0.00004 271.152);
+  --bg: oklch(32% 0 0);
   --active-color: oklch(100% 0 0);
-  --active-bg: oklch(47.836% 0.00005 271.152);
+  --active-bg: oklch(44% 0 0);
 
   box-sizing: border-box;
   position: absolute;
@@ -82,16 +82,9 @@
 
 :where(.dark, [data-theme='dark']) {
   .tremolo-piano-white-key {
-    --bg: oklch(48.193% 0.00005 271.152);
-    --color: oklch(100% 0 0);
-    --active-bg: oklch(52.78% 0.00006 271.152);
-    --active-color: oklch(100% 0 0);
-  }
-
-  .tremolo-piano-black-key {
-    --color: oklch(100% 0 0);
-    --bg: oklch(32.109% 0 0);
-    --active-color: oklch(100% 0 0);
-    --active-bg: oklch(38.666% 0.00004 271.152);
+    --bg: oklch(80% 0 0);
+    --color: oklch(0% 0 0);
+    --active-bg: oklch(72% 0 0);
+    --active-color: oklch(0% 0 0);
   }
 }

package/src/components/Piano/index.tsx

@@ -23,8 +23,8 @@ import {
   noteKeys,
 } from '@tremolo-ui/functions'
 
-import { useDragWithElement } from '../../hooks/useDragWithElement'
 import { useEventListener } from '../../hooks/useEventListener'
+import { usePianoDrag } from '../../hooks/usePianoDrag'
 
 import { NoteRange, PianoProvider } from './context'
 import {
@@ -35,10 +35,10 @@ import {
   WhiteKey,
 } from './key'
 import { KeyboardShortcuts } from './keyboardShortcuts'
+import { KeyLabel } from './KeyLabel'
 
 /**
  * [noteRange.first, noteRange.first + 1 ..., noteRange.last]
- * @category Piano
  */
 export function getNoteRangeArray(noteRange: NoteRange) {
   return Array.from(
@@ -47,7 +47,6 @@ export function getNoteRangeArray(noteRange: NoteRange) {
   )
 }
 
-/** @category Piano */
 export interface PianoProps {
   noteRange: NoteRange
 
@@ -73,9 +72,6 @@ export interface PianoProps {
 
 const blackPerWhiteWidth = defaultBlackKeyWidth / defaultWhiteKeyWidth // 0.65
 
-/**
- * @category Piano
- */
 export interface PianoMethods {
   playNote: (note: number, velocity?: number) => void
   stopNote: (note: number) => void
@@ -84,11 +80,7 @@ export interface PianoMethods {
 type Props = PianoProps &
   Omit<ComponentPropsWithoutRef<'div'>, keyof PianoProps>
 
-/**
- * Customizable piano component.
- * @category Piano
- */
-export const Piano = forwardRef<PianoMethods, Props>(
+const Root = forwardRef<PianoMethods, Props>(
   (
     {
       noteRange,
@@ -243,10 +235,12 @@ export const Piano = forwardRef<PianoMethods, Props>(
       }
     }, [fill, _whiteNoteWidth, whiteNoteCount])
 
-    const [touchMoveRefCallback, pointerDownHandler] =
-      useDragWithElement<HTMLDivElement>({
+    // FIXME
+    const { refHandler: touchMoveRefCallback, pointerDownHandler } =
+      usePianoDrag<HTMLDivElement>({
         baseElementRef: pianoRef,
         onDrag: onDrag,
+        // onDragStart: onDrag,
         onDragEnd: onDragEnd,
       })
 
@@ -345,6 +339,11 @@ export const Piano = forwardRef<PianoMethods, Props>(
   },
 )
 
+/**
+ * Customizable piano component.
+ */
+export const Piano = { Root, WhiteKey, BlackKey, KeyLabel }
+
 export { type KeyboardShortcuts, SHORTCUTS } from './keyboardShortcuts'
-export { WhiteKey, BlackKey, type KeyProps, type KeyMethods } from './key'
-export { KeyLabel, type KeyLabelProps } from './KeyLabel'
+export { type KeyProps, type KeyMethods } from './key'
+export { type KeyLabelProps } from './KeyLabel'

package/src/components/Piano/key.tsx

@@ -11,9 +11,6 @@ import React, {
 import { usePianoContext } from './context'
 import { KeyLabel, KeyLabelProps } from './KeyLabel'
 
-/**
- * @category Piano
- */
 export interface KeyProps {
   noteNumber: number
 
@@ -36,9 +33,6 @@ export interface KeyProps {
   __width?: number
 }
 
-/**
- * @category Piano
- */
 export interface KeyMethods {
   play: (velocity?: number) => void
   stop: () => void
@@ -48,9 +42,7 @@ export interface KeyMethods {
 type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 type ImplProps = Props & { keyType: 'black' | 'white' }
 
-/** @category Piano */
 export const defaultWhiteKeyWidth = 40
-/** @category Piano */
 export const defaultBlackKeyWidth = 26
 
 const KeyImpl = forwardRef<KeyMethods, ImplProps>(
@@ -166,7 +158,6 @@ const KeyImpl = forwardRef<KeyMethods, ImplProps>(
   },
 )
 
-/** @category Piano */
 export const WhiteKey = forwardRef<KeyMethods, Props>(
   (
     {
@@ -190,7 +181,6 @@ export const WhiteKey = forwardRef<KeyMethods, Props>(
   },
 )
 
-/** @category Piano */
 export const BlackKey = forwardRef<KeyMethods, Props>(
   (
     {

package/src/components/Piano/keyboardShortcuts.ts

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

package/src/components/PointsEditor/Background.tsx

@@ -0,0 +1,17 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef } from 'react'
+
+export function Background({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'div'>) {
+  return (
+    <div
+      className={clsx('tremolo-points-editor-background', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/PointsEditor/Container.tsx

@@ -0,0 +1,26 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, useRef } from 'react'
+
+import { usePointsEditorContext } from './context'
+
+export function Container({
+  className,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<'div'>) {
+  const containerElementRef = useRef<HTMLDivElement>(null)
+  const setContainerElementRef = usePointsEditorContext(
+    (s) => s.setContainerElementRef,
+  )
+  setContainerElementRef(containerElementRef)
+
+  return (
+    <div
+      ref={containerElementRef}
+      className={clsx('tremolo-points-editor-container', className)}
+      {...props}
+    >
+      {children}
+    </div>
+  )
+}

package/src/components/PointsEditor/Point.tsx

@@ -0,0 +1,137 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef } from 'react'
+
+import { clamp } from '@tremolo-ui/functions'
+
+import { useDragWithElement } from '../../hooks/useDragWithElement'
+import {
+  addUserSelectNone,
+  removeUserSelectNone,
+  resetCursorStyle,
+  setCursorStyle,
+} from '../_util'
+
+import { usePointsEditorContext } from './context'
+
+export type PointBaseType = { x: number; y: number }
+
+export function clampPoint(
+  point: PointBaseType,
+  min?: Partial<PointBaseType>,
+  max?: Partial<PointBaseType>,
+) {
+  const { x, y } = point
+  const newX = clamp(x, min?.x ?? 0, max?.x ?? 1)
+  const newY = clamp(y, min?.y ?? 0, max?.y ?? 1)
+  return { x: newX, y: newY }
+}
+
+export interface PointProps<T extends PointBaseType> {
+  value: T
+  min?: Partial<PointBaseType>
+  max?: Partial<PointBaseType>
+
+  size?: number | string
+  width?: number | string
+  height?: number | string
+  color?: string
+
+  disabled?: boolean
+  readonly?: boolean
+
+  onChange?: (value: PointBaseType) => void
+  onDragStart?: (value: PointBaseType) => void
+  onDragEnd?: (value: PointBaseType) => void
+}
+
+export function Point<T extends PointBaseType>({
+  value,
+  min,
+  max,
+  size,
+  width = 16,
+  height = 16,
+  color,
+
+  disabled,
+  readonly,
+
+  onChange,
+  onDragStart,
+  onDragEnd,
+
+  className,
+  style,
+  onPointerDown,
+  ...props
+}: PointProps<T> & Omit<ComponentPropsWithoutRef<'div'>, keyof PointProps<T>>) {
+  const containerElementRef = usePointsEditorContext(
+    (s) => s.containerElementRef,
+  )
+  const externalStyles = usePointsEditorContext((s) => s.externalStyles)
+  const __disabled = usePointsEditorContext((s) => s.disabled)
+  const __readonly = usePointsEditorContext((s) => s.readonly)
+
+  // console.log(value.x, value.y)
+
+  // Piano: 値が更新されることで、イベントハンドラがリセットされる
+
+  const {
+    refHandler: touchMoveRefCallback,
+    pointerDownHandler,
+    dragging,
+  } = useDragWithElement<HTMLDivElement>({
+    baseElementRef: containerElementRef,
+    onDrag: (x, y) => {
+      if (readonly) return
+
+      onChange?.(clampPoint({ x, y }, min, max))
+    },
+    onDragStart: (x, y) => {
+      if (readonly) return
+      if (externalStyles.userSelectNone) addUserSelectNone()
+      if (externalStyles.cursor) setCursorStyle(externalStyles.cursor)
+
+      onDragStart?.(clampPoint({ x, y }, min, max))
+    },
+    onDragEnd: (x, y) => {
+      if (readonly) return
+      if (externalStyles.userSelectNone) removeUserSelectNone()
+      if (externalStyles.cursor) resetCursorStyle()
+
+      onDragEnd?.(clampPoint({ x, y }, min, max))
+    },
+  })
+
+  const colors: Record<string, string | undefined> = {
+    '--color': color,
+  }
+
+  return (
+    <div
+      ref={(div) => {
+        // wheelRefCallback(div)
+        touchMoveRefCallback(div)
+      }}
+      className={clsx('tremolo-points-editor-point', className)}
+      // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      tabIndex={0}
+      aria-disabled={disabled != undefined ? disabled : __disabled}
+      aria-readonly={readonly != undefined ? readonly : __readonly}
+      data-dragging={dragging}
+      style={{
+        ...colors,
+        width: size ?? width,
+        height: size ?? height,
+        left: `${value.x * 100}%`,
+        top: `${value.y * 100}%`,
+        ...style,
+      }}
+      onPointerDown={(event) => {
+        pointerDownHandler(event)
+        onPointerDown?.(event)
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/PointsEditor/context.tsx

@@ -0,0 +1,91 @@
+import {
+  createContext,
+  createRef,
+  RefObject,
+  useContext,
+  useEffect,
+  useRef,
+} from 'react'
+import { createStore, useStore } from 'zustand'
+
+import { Cursor } from '../_util'
+
+type State = {
+  containerElementRef: RefObject<HTMLDivElement | null>
+  disabled: boolean
+  readonly: boolean
+  externalStyles: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
+}
+
+type Action = {
+  setContainerElementRef: (
+    containerElementRef: RefObject<HTMLDivElement | null>,
+  ) => void
+}
+
+type PointsEditorStore = ReturnType<typeof createPointsEditorStore>
+
+const createPointsEditorStore = (initProps: Partial<State & Action>) => {
+  // const noteRange = initProps.noteRange || { first: 0, last: 127 }
+  const DEFAULT_PROPS: State = {
+    containerElementRef: createRef(),
+    disabled: false,
+    readonly: false,
+    externalStyles: {
+      userSelectNone: true,
+      cursor: 'grabbing',
+    },
+  }
+
+  return createStore<State & Action>()((set) => ({
+    ...DEFAULT_PROPS,
+    ...initProps,
+    setContainerElementRef: (containerElementRef) => {
+      set(() => ({
+        containerElementRef,
+      }))
+    },
+  }))
+}
+
+const PointsEditorContext = createContext<PointsEditorStore | null>(null)
+
+type PointsEditorProviderProps = React.PropsWithChildren<
+  Partial<State & Action>
+>
+
+export function PointsEditorProvider({
+  children,
+  ...props
+}: PointsEditorProviderProps) {
+  const storeRef = useRef<PointsEditorStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createPointsEditorStore(props)
+  }
+
+  useEffect(() => {
+    if (storeRef.current) {
+      storeRef.current.setState(props)
+    } else {
+      storeRef.current = createPointsEditorStore(props)
+    }
+  }, [props])
+
+  return (
+    <PointsEditorContext.Provider value={storeRef.current}>
+      {children}
+    </PointsEditorContext.Provider>
+  )
+}
+
+export function usePointsEditorContext<T>(
+  selector: (state: State & Action) => T,
+): T {
+  const store = useContext(PointsEditorContext)
+  if (!store)
+    throw new Error('Missing PointsEditorContext.Provider in the tree')
+  return useStore(store, selector)
+}

package/src/components/PointsEditor/index.css

@@ -0,0 +1,30 @@
+.tremolo-points-editor {
+  position: relative;
+}
+
+.tremolo-points-editor-background {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+}
+
+.tremolo-points-editor-container {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+}
+
+.tremolo-points-editor-point {
+  --color: oklch(59.5% 0.17548 266.373);
+
+  position: absolute;
+  border-radius: 50%;
+  outline: none;
+  cursor: grab;
+  background-color: var(--color);
+  translate: -50% -50%;
+
+  &[data-dragging='true'] {
+    cursor: inherit;
+  }
+}

package/src/components/PointsEditor/index.tsx

@@ -0,0 +1,129 @@
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
+
+import { InputEventOption } from '@tremolo-ui/functions'
+
+import { Cursor } from '../_util'
+
+import { Background } from './Background'
+import { Container } from './Container'
+import { PointsEditorProvider } from './context'
+import { Point, PointBaseType } from './Point'
+
+/*
+TODO:
+
+- 複数選択
+- modifier
+*/
+
+/*
+import { useState } from 'react'
+
+export default function App() {
+  const [points, setPoints] = useState(initialPoints)
+
+  return (
+    <PointsEditor.Root
+      onDoubleClick={({ x, y }, _e) => {
+        const newPoints = [...points, { x, y }]
+        setPoints(newPoints)
+      }}
+    >
+      {points.map((point) => (
+        <PointsEditor.Point key={`${point.x}, ${point.y}`} value={point} />
+      ))}
+    </PointsEditor.Root>
+  )
+}
+*/
+
+const defaultExternalStyles: PointsEditorProps['externalStyles'] = {
+  userSelectNone: true,
+  cursor: 'grabbing',
+}
+
+export interface PointsEditorProps {
+  width?: number | string
+  height?: number | string
+
+  // TODO
+  grid?: number | PointBaseType
+  // modifier?:
+
+  disabled?: boolean
+  readonly?: boolean
+
+  externalStyles?: {
+    userSelectNone?: boolean
+    cursor?: Cursor
+  }
+
+  // TODO
+  /**
+   * wheel control option
+   * If null, no event will be triggered
+   */
+  wheel?: InputEventOption | null
+  /**
+   * keyboard control option
+   * If null, no event will be triggered
+   */
+  keyboard?: InputEventOption | null
+}
+
+type Props = PointsEditorProps &
+  Omit<ComponentPropsWithoutRef<'div'>, keyof PointsEditorProps>
+
+const Root = forwardRef<HTMLDivElement, Props>(
+  (
+    {
+      width = 200,
+      height = 100,
+      disabled = false,
+      readonly = false,
+      externalStyles: _externalStyles,
+      style,
+      className,
+      children,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const externalStyles = { ...defaultExternalStyles, ..._externalStyles }
+
+    return (
+      <PointsEditorProvider
+        disabled={disabled}
+        readonly={readonly}
+        externalStyles={externalStyles}
+      >
+        <div
+          ref={forwardedRef}
+          className={clsx('tremolo-points-editor', className)}
+          style={{
+            width,
+            height,
+            ...style,
+          }}
+          {...props}
+        >
+          {children}
+        </div>
+      </PointsEditorProvider>
+    )
+  },
+)
+
+/**
+ * Multiple Point Controller
+ */
+export const PointsEditor = {
+  Root,
+  Background,
+  Container,
+  Point,
+}
+
+export { usePointsEditorContext } from './context'
+export { clampPoint, type PointBaseType, type PointProps } from './Point'

package/src/components/Slider/Scale.tsx

@@ -7,14 +7,12 @@ import { useSliderContext } from './context'
 import { ScaleOption } from './ScaleOption'
 import { generateOptionsList, ScaleOptions } from './type'
 
-/** @category Slider */
 export interface ScaleProps {
   gap?: number | string
   options?: ScaleOptions
   children?: ReactNode
 }
 
-/** @category Slider */
 export function Scale({
   gap = 6,
   options,

package/src/components/Slider/ScaleOption.tsx

@@ -6,7 +6,6 @@ import { toFixed, xor, normalizeValue } from '@tremolo-ui/functions'
 import { useSliderContext } from './context'
 import { ScaleType } from './type'
 
-/** @category Slider */
 export interface ScaleOptionProps {
   // required
   value: number
@@ -32,7 +31,6 @@ export interface ScaleOptionProps {
   }
 }
 
-/** @category Slider */
 export function ScaleOption({
   value,
   type = 'mark-number',

package/src/components/Slider/Thumb.tsx

@@ -9,7 +9,6 @@ import {
 
 import { useSliderContext } from './context'
 
-/** @category Slider */
 export interface SliderThumbProps {
   size?: number | string
   width?: number | string
@@ -25,17 +24,14 @@ 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>(
+export const Thumb = forwardRef<SliderThumbMethods, SliderThumbProps>(
   (
     {
       size,

package/src/components/Slider/Track.tsx

@@ -8,7 +8,6 @@ import { useSliderContext } from './context'
 export const defaultLength = 140
 export const defaultThickness = 10
 
-/** @category Slider */
 export interface SliderTrackProps {
   length?: number | string
   thickness?: number | string
@@ -28,8 +27,7 @@ export interface SliderTrackProps {
   __percent?: number
 }
 
-/** @category Slider */
-export function SliderTrack({
+export function Track({
   length = defaultLength,
   thickness = defaultThickness,
   active,

package/src/components/Slider/context.tsx

@@ -57,7 +57,6 @@ export function SliderProvider({ children, ...props }: SliderProviderProps) {
   )
 }
 
-/** @category Slider */
 export function useSliderContext<T>(selector: (state: State) => T): T {
   const store = useContext(SliderContext)
   if (!store) throw new Error('Missing SliderContext.Provider in the tree')