@tremolo-ui/react 0.0.7 → 0.0.8

package/src/components/Piano/BlackKey.tsx

@@ -1,108 +1,114 @@
-import { css } from "@emotion/react"
-import React, { forwardRef, useImperativeHandle, useRef, useState } from "react"
+import clsx from 'clsx'
+import React, {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useImperativeHandle,
+  useState,
+} from 'react'
 
-import { KeyLabel } from "./KeyLabel"
-import { KeyMethods, KeyProps } from "./key"
+import { KeyMethods, KeyProps } from './key'
+import { KeyLabel, KeyLabelProps } from './KeyLabel'
 
-export const BlackKey = forwardRef<KeyMethods, KeyProps>(({
-  width = 40 * 0.65,
-  height = '60%',
-  bg = '#333',
-  activeBg = '#666',
-  style,
-  children,
-  __glissando,
-  __position,
-  __note,
-  __disabled,
-  __index,
-  __fill,
-  __width,
-  __playNote,
-  __stopNote,
-  __label,
-}: KeyProps, ref) => {
-  const [played, setPlayed] = useState(false)
+type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 
-  useImperativeHandle(ref, () => {
-    return {
-      play() {
-        if (__disabled) return
-        setPlayed(true)
-        if (__playNote) __playNote(__note!)
-      },
-      stop() {
-        setPlayed(false)
-        if (__stopNote) __stopNote(__note!)
-      },
-      played() {
-        return played
+export const BlackKey = forwardRef<KeyMethods, Props>(
+  (
+    {
+      width = 40 * 0.65,
+      height = '60%',
+      className,
+      style,
+      children,
+      __glissando,
+      __position,
+      __note,
+      __disabled,
+      __index,
+      __fill,
+      __width,
+      __playNote,
+      __stopNote,
+      __label,
+      ...props
+    }: Props,
+    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
+        },
       }
-    }
-  }, [])
+    }, [__disabled, __note, __playNote, __stopNote, 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
+    let keyLabelProps: KeyLabelProps = {}
+    if (children != undefined) {
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          if (child.type == KeyLabel) {
+            keyLabelProps = child.props as KeyLabelProps
+          } else {
+            throw new Error('only <KeyLabel>')
+          }
         } else {
-          throw new Error('only <KeyLabel>')
+          throw new Error('children is an invalid element.')
         }
-      } else {
-        throw new Error('children is an invalid element.')
-      }
-    })
-  }
+      })
+    }
 
-  return (
-    <div
-      className={`tremolo-piano-black-key`}
-      aria-disabled={__disabled}
-      css={css({
-        position: 'absolute',
-        backgroundColor: played ? activeBg : bg,
-        color: 'white',
-        left: __position,
-        width: __fill ? __width : (width ?? __width),
-        height: height,
-        border: '1px solid #555',
-        borderRadius: '0 0 8px 8px',
-        cursor: __disabled ? 'not-allowed' : 'pointer',
-        zIndex: 2,
-        ...style,
-      })}
-      onPointerDown={() => {
-        if (__disabled) return
-        setPlayed(true)
-        if (__playNote) __playNote(__note!)
-      }}
-      onPointerEnter={() => {
-        if (__disabled) return
-        if (__glissando) {
+    return (
+      <div
+        className={clsx(`tremolo-piano-black-key`, className)}
+        aria-disabled={__disabled}
+        data-active={played}
+        style={{
+          left: __position,
+          width: __fill ? __width : (width ?? __width),
+          height: height,
+          ...style,
+        }}
+        onPointerDown={() => {
+          if (__disabled) return
           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>
-  )
-})
+        }}
+        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!)
+        }}
+        {...props}
+      >
+        <KeyLabel
+          __note={__note}
+          __label={__label}
+          __index={__index}
+          {...keyLabelProps}
+        />
+      </div>
+    )
+  },
+)

package/src/components/Piano/KeyLabel.tsx

@@ -1,16 +1,14 @@
-import { css, CSSObject } from "@emotion/react"
-import clsx from "clsx"
-import { ReactNode } from "react"
+import clsx from 'clsx'
+import { ComponentPropsWithoutRef, CSSProperties, ReactNode } from 'react'
 
-interface Props {
+export interface KeyLabelProps {
   /**
    * override Piano.label
    */
   label?: (note: number, index: number) => ReactNode
 
-  className?: string
-  style?: CSSObject
-  wrapperStyle?: CSSObject
+  wrapperClassName?: string
+  wrapperStyle?: CSSProperties
 
   /** @internal */
   __note?: number
@@ -23,47 +21,27 @@ interface Props {
 export function KeyLabel({
   label,
   className,
-  style,
+  wrapperClassName,
   wrapperStyle,
   __note,
   __index,
   __label,
-}: Props) {
-  const content = label ? label(__note!, __index!) : __label && __label(__note!, __index!)
+  ...props
+}: KeyLabelProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyLabelProps>) {
+  const content = label
+    ? label(__note!, __index!)
+    : __label && __label(__note!, __index!)
 
   return (
-    (content != undefined || content != null) &&
-    <div
-      className='tremolo-piano-key-label-wrapper'
-      css={css({
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'end',
-        height: '100%',
-        ...wrapperStyle
-      })}
-    >
+    (content != undefined || content != null) && (
       <div
-        className={clsx('tremolo-piano-key-label', className)}
-        css={css({
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          fontSize: '0.6rem',
-          height: 10,
-          marginBottom: 10,
-          padding: 4,
-          borderRadius: 4,
-          borderStyle: 'solid',
-          borderWidth: 1,
-          borderColor: '#888',
-          aspectRatio: 1,
-          maxWidth: 'calc(100% - 16px)',
-          ...style
-        })}
+        className={clsx('tremolo-piano-key-label-wrapper', wrapperClassName)}
+        style={wrapperStyle}
       >
-        {content}
+        <div className={clsx('tremolo-piano-key-label', className)} {...props}>
+          {content}
+        </div>
       </div>
-    </div>
+    )
   )
 }

package/src/components/Piano/WhiteKey.tsx

@@ -1,31 +1,41 @@
-import { css } from "@emotion/react"
-import React, { forwardRef, useImperativeHandle } from "react"
-import { useState } from "react"
-import { KeyLabel } from "./KeyLabel"
-import { KeyMethods, KeyProps } from "./key"
+import clsx from 'clsx'
+import React, {
+  ComponentPropsWithoutRef,
+  forwardRef,
+  useImperativeHandle,
+  useState,
+} from 'react'
 
+import { KeyMethods, KeyProps } from './key'
+import { KeyLabel, KeyLabelProps } from './KeyLabel'
 
-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)
+type Props = KeyProps & Omit<ComponentPropsWithoutRef<'div'>, keyof KeyProps>
 
-  useImperativeHandle(ref, () => {
+export const WhiteKey = forwardRef<KeyMethods, Props>(
+  (
+    {
+      width = 40,
+      height = '100%',
+      className,
+      style,
+      children,
+      __glissando,
+      __position,
+      __note,
+      __disabled,
+      __index,
+      __fill,
+      __width,
+      __playNote,
+      __stopNote,
+      __label,
+      ...props
+    }: Props,
+    ref,
+  ) => {
+    const [played, setPlayed] = useState(false)
+
+    useImperativeHandle(ref, () => {
       return {
         play() {
           if (__disabled) return
@@ -38,72 +48,67 @@ export const WhiteKey = forwardRef<KeyMethods, KeyProps>(({
         },
         played() {
           return played
-        }
+        },
       }
-    }, [])
+    }, [__disabled, __note, __playNote, __stopNote, 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
+    let keyLabelProps: KeyLabelProps = {}
+    if (children != undefined) {
+      React.Children.forEach(children, (child) => {
+        if (React.isValidElement(child)) {
+          if (child.type == KeyLabel) {
+            keyLabelProps = child.props as KeyLabelProps
+          } else {
+            throw new Error('only <KeyLabel>')
+          }
         } else {
-          throw new Error('only <KeyLabel>')
+          throw new Error('children is an invalid element.')
         }
-      } 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) {
+    return (
+      <div
+        className={clsx(`tremolo-piano-white-key`, className)}
+        aria-disabled={__disabled}
+        data-active={played}
+        style={{
+          left: __position,
+          width: __fill ? __width : (width ?? __width),
+          height: height,
+          ...style,
+        }}
+        onPointerDown={() => {
+          if (__disabled) return
           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>
-  )
-})
+        }}
+        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!)
+        }}
+        {...props}
+      >
+        <KeyLabel
+          __note={__note}
+          __label={__label}
+          __index={__index}
+          {...keyLabelProps}
+        />
+      </div>
+    )
+  },
+)

package/src/components/Piano/index.css

@@ -0,0 +1,63 @@
+.tremolo-piano {
+  display: inline-block;
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+}
+
+.tremolo-piano-white-key {
+  position: absolute;
+  background-color: white;
+  color: black;
+  border: 1px solid #555;
+  border-radius: 0px 0px 8px 8px;
+  cursor: pointer;
+  z-index: 1;
+
+  &[data-active='true'] {
+    background-color: #ccc;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-piano-black-key {
+  position: absolute;
+  background-color: #333;
+  color: white;
+  border: 1px solid #555;
+  border-radius: 0px 0px 8px 8px;
+  cursor: pointer;
+  z-index: 2;
+
+  &[data-active='true'] {
+    background-color: #666;
+  }
+
+  &[aria-disabled='true'] {
+    cursor: not-allowed;
+  }
+}
+
+.tremolo-piano-key-label-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: end;
+  height: 100%;
+}
+
+.tremolo-piano-key-label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 0.6rem;
+  height: 10px;
+  margin-bottom: 10px;
+  padding: 4px;
+  border-radius: 4px;
+  border: 1px solid #888;
+  aspect-ratio: 1;
+  max-width: calc(100% - 16px);
+}