Merge pull request #58 from codeacme17/feat

feat(LFO): upload related files

Author: codeacme17

example/src/App.tsx

@@ -19,6 +19,7 @@ import { UncontrolledSlider } from './components/controls/UncontrolledSlider'
 import { EchoOsci } from './components/visualizaion/EchoOsci'
 import { EchoEnvelopADSR, EchoEnvelopAHDSR } from './components/controls/EchoEnvelop'
 import { EchoWaveform } from './components/visualizaion/EchoWaveform'
+import { EchoLFO } from './components/visualizaion/EchoLFO'
 
 function App() {
   const { theme, setTheme } = useTheme()
@@ -44,6 +45,8 @@ function App() {
 
       <EchoWaveform />
 
+      <EchoLFO />
+
       <EchoEnvelopADSR />
 
       <EchoEnvelopAHDSR />

example/src/components/visualizaion/EchoLFO.tsx

@@ -0,0 +1,9 @@
+import { LFO } from '@echo-ui'
+
+export const EchoLFO = () => {
+  return (
+    <section className="h-32">
+      <LFO />
+    </section>
+  )
+}

packages/components/visualization/LFO/LFO.tsx

@@ -0,0 +1,36 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import { useResizeObserver } from '../../../lib/hooks/useResizeObserver'
+import { cn } from '../../../lib/utils'
+import { LFOProps, LFORef } from './types'
+import { useStyle } from './styles'
+import { WIDTH, HEIGHT, LINE_WIDTH, LINE_COLOR } from './constants'
+
+export const LFO = forwardRef<LFORef, LFOProps>((props, ref) => {
+  const { lineWidth = LINE_WIDTH, lineColor = LINE_COLOR, ...restProps } = props
+
+  const LFORef = useRef<LFORef | null>(null)
+
+  useImperativeHandle(ref, () => LFORef.current as LFORef)
+
+  const dementions = useResizeObserver(LFORef, WIDTH, HEIGHT, () => {})
+
+  console.log(dementions)
+
+  const { base, svg } = useStyle()
+
+  return (
+    <div
+      ref={LFORef}
+      className={cn(base(), restProps.className)}
+      style={{
+        ...restProps.style,
+        padding: 0,
+        overflow: 'hidden',
+        pointerEvents: 'none',
+        userSelect: 'none',
+      }}
+    >
+      <svg className={cn(svg())} />
+    </div>
+  )
+})

packages/components/visualization/LFO/constants.ts

@@ -0,0 +1,5 @@
+export const WIDTH = 360
+export const HEIGHT = 100
+
+export const LINE_COLOR = 'var(--echo-primary)'
+export const LINE_WIDTH = 2

packages/components/visualization/LFO/index.ts

@@ -0,0 +1,11 @@
+import { LFO as _LFO } from './LFO'
+import { LFOProps, LFORef } from './types'
+
+type CompoundedComponent = React.ForwardRefExoticComponent<LFOProps & React.RefAttributes<LFORef>>
+
+const LFO = _LFO as CompoundedComponent
+LFO.displayName = 'EchoUI.LFO'
+
+export { LFO }
+export default LFO
+export type { LFOProps, LFORef } from './types'

packages/components/visualization/LFO/styles.ts

@@ -0,0 +1,18 @@
+import { tv } from 'tailwind-variants'
+
+export const useStyle = tv({
+  slots: {
+    base: `text-foreground
+    h-full
+    w-full
+    flex
+    justify-center
+    rounded-lg
+    bg-card`,
+
+    svg: `w-full
+    h-full
+    flex
+    items-center`,
+  },
+})

packages/components/visualization/LFO/types.ts

@@ -0,0 +1,9 @@
+export interface LFOProps extends React.HTMLAttributes<HTMLDivElement> {
+  frequency?: number
+  amplitude?: number
+  type?: 'sine' | 'square' | 'triangle'
+  lineColor?: string
+  lineWidth?: number
+}
+
+export interface LFORef extends HTMLDivElement {}

packages/components/visualization/index.ts

@@ -1,6 +1,7 @@
 export * from './VuMeter'
 export * from './Axis'
 export * from './Light'
+export * from './LFO'
 export * from './Spectrogram'
 export * from './Oscilloscope'
 export * from './Waveform'