@moises.ai/design-system 3.11.9 → 3.11.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moises.ai/design-system",
-  "version": "3.11.9",
+  "version": "3.11.10",
   "description": "Design System package based on @radix-ui/themes with custom defaults",
   "private": false,
   "type": "module",

package/src/components/PeakLevel/PeakLevel.jsx

@@ -0,0 +1,71 @@
+import { memo, useRef } from 'react'
+import styles from './PeakLevel.module.css'
+
+const PEAK_HOLD_THRESHOLD_HIGH = 0
+const PEAK_HOLD_THRESHOLD_MEDIUM = -1
+
+function linearToPeakDb(linear) {
+  if (!Array.isArray(linear)) return null
+  const peak = Math.max(linear[0] ?? 0, linear[1] ?? 0)
+  if (peak <= 0) return null
+  const db = 20 * Math.log10(peak)
+  if (db <= -96) return null
+  return db
+}
+
+function getLevel(db) {
+  if (db == null) return 'reset'
+  if (db >= PEAK_HOLD_THRESHOLD_HIGH) return 'high'
+  if (db >= PEAK_HOLD_THRESHOLD_MEDIUM) return 'medium'
+  return 'regular'
+}
+
+function formatPeakDb(db) {
+  if (db == null) return '--'
+  return db.toFixed(1)
+}
+
+export const PeakLevel = memo(function PeakLevel({
+  linear,
+  value,
+  onClick,
+}) {
+  const peakHoldRef = useRef(null)
+
+  let displayDb = value ?? null
+
+  if (linear !== undefined) {
+    const currentDb = linearToPeakDb(linear)
+
+    if (currentDb != null) {
+      if (peakHoldRef.current == null || currentDb > peakHoldRef.current) {
+        peakHoldRef.current = currentDb
+      }
+    }
+
+    if (linear[0] <= 0 && linear[1] <= 0) {
+      peakHoldRef.current = null
+    }
+
+    displayDb = peakHoldRef.current
+  }
+
+  const level = getLevel(displayDb)
+  const text = formatPeakDb(displayDb)
+
+  return (
+    <div
+      className={styles.container}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : undefined}
+      style={onClick ? { cursor: 'pointer' } : undefined}
+    >
+      <span className={`${styles.value} ${styles[level]}`}>
+        {text}
+      </span>
+    </div>
+  )
+})
+
+PeakLevel.displayName = 'PeakLevel'

package/src/components/PeakLevel/PeakLevel.module.css

@@ -0,0 +1,49 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  padding: 2px 0;
+  border-radius: 4px;
+  user-select: none;
+}
+
+.value {
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 16px;
+  letter-spacing: 0.04px;
+  white-space: nowrap;
+}
+
+.reset {
+  color: rgba(214, 235, 253, 0.19);
+}
+
+.regular {
+  color: #00dae8;
+}
+
+.medium {
+  color: #ffc53d;
+}
+
+.high {
+  color: #ec5d5e;
+}
+
+.container:hover .reset {
+  color: rgba(214, 235, 253, 0.19);
+}
+
+.container:hover .regular {
+  color: #75ebf5;
+}
+
+.container:hover .medium {
+  color: #ffe7b3;
+}
+
+.container:hover .high {
+  color: #ff9592;
+}

package/src/components/PeakLevel/PeakLevel.stories.jsx

@@ -0,0 +1,192 @@
+import { useState, useEffect, useRef } from 'react'
+import { PeakLevel } from './PeakLevel'
+import { InputLevelMeter } from '../InputLevelMeter/InputLevelMeter'
+import { useSimulatedInputLevel } from '../InputLevelMeter/useSimulatedInputLevel'
+
+export default {
+  title: 'Components/PeakLevel',
+  component: PeakLevel,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '16px', background: '#1d1d1d' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export const Reset = {
+  render: () => <PeakLevel value={null} />,
+}
+
+export const RegularLevel = {
+  render: () => <PeakLevel value={-2} />,
+}
+
+export const MediumLevel = {
+  render: () => <PeakLevel value={-0.2} />,
+}
+
+export const HighLevel = {
+  render: () => <PeakLevel value={1.3} />,
+}
+
+export const AllLevels = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '16px', alignItems: 'center' }}>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={null} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Reset
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={-12} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Regular
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={-0.5} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          Medium
+        </span>
+      </div>
+      <div style={{ textAlign: 'center' }}>
+        <PeakLevel value={1.3} />
+        <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', display: 'block', marginTop: '4px' }}>
+          High
+        </span>
+      </div>
+    </div>
+  ),
+}
+
+export const WithLinearInput = {
+  render: () => {
+    function LivePeak() {
+      const linear = useSimulatedInputLevel()
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div style={{ width: '200px' }}>
+            <InputLevelMeter linear={linear} />
+          </div>
+          <PeakLevel linear={linear} />
+        </div>
+      )
+    }
+    return <LivePeak />
+  },
+}
+
+export const WithClickToReset = {
+  render: () => {
+    function ResettablePeak() {
+      const linear = useSimulatedInputLevel()
+      const [peakDb, setPeakDb] = useState(null)
+      const peakRef = useRef(null)
+
+      useEffect(() => {
+        const peak = Math.max(linear[0] ?? 0, linear[1] ?? 0)
+        if (peak > 0) {
+          const db = 20 * Math.log10(peak)
+          if (db > -96) {
+            if (peakRef.current == null || db > peakRef.current) {
+              peakRef.current = db
+              setPeakDb(db)
+            }
+          }
+        }
+      }, [linear])
+
+      const handleReset = () => {
+        peakRef.current = null
+        setPeakDb(null)
+      }
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+            <div style={{ width: '200px' }}>
+              <InputLevelMeter linear={linear} />
+            </div>
+            <PeakLevel value={peakDb} onClick={handleReset} />
+          </div>
+          <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '10px', fontFamily: 'monospace' }}>
+            Click the peak value to reset
+          </span>
+        </div>
+      )
+    }
+    return <ResettablePeak />
+  },
+}
+
+export const WithVolumeFader = {
+  render: () => {
+    function FaderWithPeak() {
+      const linear = useSimulatedInputLevel()
+      const [volume, setVolume] = useState(1)
+
+      return (
+        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+          <div style={{ width: '200px' }}>
+            <InputLevelMeter
+              linear={linear}
+              volume={volume}
+              onVolumeChange={([v]) => setVolume(v)}
+            />
+          </div>
+          <PeakLevel linear={linear} />
+        </div>
+      )
+    }
+    return <FaderWithPeak />
+  },
+}
+
+export const BoundaryValues = {
+  render: () => (
+    <div style={{ display: 'flex', gap: '12px', alignItems: 'center' }}>
+      {[-96, -60, -24, -6, -1, -0.1, 0, 0.1, 1, 3, 6].map((db) => (
+        <div key={db} style={{ textAlign: 'center' }}>
+          <PeakLevel value={db} />
+          <span style={{ color: 'rgba(255,255,255,0.3)', fontSize: '9px', fontFamily: 'monospace', display: 'block', marginTop: '4px' }}>
+            {db} dB
+          </span>
+        </div>
+      ))}
+    </div>
+  ),
+}
+
+export const MultipleChannels = {
+  render: () => {
+    function MultiChannel() {
+      const linear = useSimulatedInputLevel()
+      const labels = ['Master', 'Vocals', 'Guitar', 'Drums']
+      const multipliers = [1, 0.7, 0.4, 0.15]
+
+      return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+          {labels.map((label, i) => (
+            <div key={label} style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <span style={{ color: 'rgba(255,255,255,0.4)', fontSize: '10px', fontFamily: 'monospace', width: '48px' }}>
+                {label}
+              </span>
+              <div style={{ width: '160px' }}>
+                <InputLevelMeter linear={linear.map((l) => l * multipliers[i])} />
+              </div>
+              <PeakLevel linear={linear.map((l) => l * multipliers[i])} />
+            </div>
+          ))}
+        </div>
+      )
+    }
+    return <MultiChannel />
+  },
+}

package/src/icons/TrackPreviousIcon.jsx

@@ -0,0 +1,18 @@
+export function TrackPreviousIcon({ width = 32, height = 32 }) {
+  return (
+    <svg
+      width={width}
+      height={height}
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M21.1797 9.6884C21.4546 9.86496 21.625 10.1751 21.625 10.5188L21.625 21.4812C21.625 21.8248 21.4546 22.135 21.1797 22.3116C20.9021 22.4898 20.5259 22.5208 20.2018 22.3202L11.8333 17.4237L11.8333 20.7917C11.8333 21.367 11.367 21.8333 10.7917 21.8333C10.2164 21.8333 9.75 21.367 9.75 20.7917V11.2083C9.75 10.633 10.2164 10.1667 10.7917 10.1667C11.367 10.1667 11.8333 10.633 11.8333 11.2083L11.8333 14.5762L20.2018 9.67975C20.5259 9.47916 20.9021 9.51013 21.1797 9.6884Z"
+        fill="currentColor"
+      />
+    </svg>
+  )
+}
+
+TrackPreviousIcon.displayName = 'TrackPreviousIcon'

package/src/icons.jsx

@@ -350,3 +350,4 @@ export { Play1Icon } from './icons/Play1Icon'
 export { ChevronRightFilledIcon } from './icons/ChevronRightFilledIcon'
 export { ChevronDownFilledIcon } from './icons/ChevronDownFilledIcon'
 export { Share2Icon } from './icons/Share2Icon'
+export { TrackPreviousIcon } from './icons/TrackPreviousIcon'

package/src/index.jsx

@@ -111,6 +111,7 @@ export { MoreButton } from './components/MoreButton/MoreButton'
 export { MultiSelect } from './components/MultiSelect/MultiSelect'
 export { MultiSelectCards } from './components/MultiSelectCards/MultiSelectCards'
 export { PanControl } from './components/PanControl/PanControl'
+export { PeakLevel } from './components/PeakLevel/PeakLevel'
 export { ProductsBrandPattern } from './components/ProductsBrandPattern/ProductsBrandPattern'
 export { ProductsList } from './components/ProductsList/ProductsList'
 export { ProfileMenu } from './components/ProfileMenu/ProfileMenu'