DAW#89 Before adding piano progressions

cypress/unit/app/ui/button/Button.cy.tsx

@@ -1,11 +1,11 @@
 import { Button } from 'packages/pfui';
-import { EButtonType } from 'packages/pfui/button/Button';
-import { EVariant } from 'packages/pfui/constants';
+import { EVariant, EButtonType, ESize } from 'packages/pfui/constants';
 
 describe('Button', () => {
   const VariantButton = ({ variant }: { variant: EVariant }) => (
     <Button
       data-cy="button"
+      size={ESize.Lg}
       type={EButtonType.Button}
       value="Button"
       variant={variant}
@@ -18,7 +18,7 @@ describe('Button', () => {
         {(Object.keys(EVariant) as Array<EVariant>).map((variant) => (
           <VariantButton key={`btn-variant-${variant}`} variant={variant} />
         ))}
-      </>
+      </>,
     );
     cy.get('button');
   });

package.json

@@ -29,39 +29,39 @@
     "@nextui-org/react": "^2.1.13",
     "@react-hook/window-size": "^3.1.1",
     "@spotify/basic-pitch": "^1.0.1",
-    "@tensorflow/tfjs": "^4.11.0",
-    "@types/node": "^20.8.6",
-    "@types/react": "18.2.28",
-    "@types/react-dom": "18.2.13",
+    "@tensorflow/tfjs": "^4.12.0",
+    "@types/node": "^20.8.9",
+    "@types/react": "18.2.33",
+    "@types/react-dom": "18.2.14",
     "abcjs": "^6.2.2",
     "audiokeys": "^0.1.1",
     "autoprefixer": "10.4.16",
     "classnames": "^2.3.2",
-    "eslint-config-next": "13.5.5",
+    "eslint-config-next": "^14.0.0",
     "formik": "^2.4.5",
     "framer-motion": "^10.16.4",
     "lodash": "^4.17.21",
-    "lucide-react": "^0.287.0",
-    "next": "13.5.5",
+    "lucide-react": "^0.289.0",
+    "next": "^14.0.0",
     "postcss": "8.4.31",
     "primereact": "^10.0.5",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-useportal": "^1.0.18",
     "reactflow": "^11.9.4",
     "swr": "^2.2.4",
-    "tailwindcss": "3.3.3",
+    "tailwindcss": "3.3.5",
     "tonal": "^5.0.0",
     "tone": "^14.7.77",
-    "wavesurfer.js": "^7.3.8",
-    "web-audio-beat-detector": "^8.1.54",
+    "wavesurfer.js": "^7.4.2",
+    "web-audio-beat-detector": "^8.1.55",
     "webmidi": "^3.1.6"
   },
   "devDependencies": {
-    "cypress": "^13.3.2",
-    "eslint": "^8.51.0",
+    "cypress": "^13.3.3",
+    "eslint": "^8.52.0",
     "eslint-plugin-cypress": "^2.15.1",
-    "prettier": "^2.6.2",
+    "prettier": "^3.0.3",
     "typescript": "^5.2.2",
     "web-audio-test-api": "^0.5.2"
   }

public/genres/house/DeepHouse.ts

@@ -1,4 +1,4 @@
-import { useRolandTr909 } from "@/core/instruments/hooks/_useRolandTr909";
+import { useRolandTr909 } from 'app/_core/instruments/hooks/_useRolandTr909';
 
 /**
  * @stylistics House, ChicagoHouse, Soul

src/app/dsp/page.tsx → src/app/(routes)/dsp/page.tsx

@@ -1,14 +1,17 @@
-"use client";
-import { DefaultPreset } from "@/api/project/presets/DefaultPreset";
-import styles from "@/common/styles";
-import { useWindowWidth } from "@react-hook/window-size";
-import React from "react";
-import ReactFlow from "reactflow";
-import "reactflow/dist/style.css";
+'use client';
+import React from 'react';
+import ReactFlow from 'reactflow';
+import { useWindowWidth } from '@react-hook/window-size';
+
+import 'reactflow/dist/style.css';
+import styles from 'app/_common/styles';
+import useProjectContext from '@/core/hooks/api/useProjectContext';
 
 export default function Dsp() {
   const windowWidth = useWindowWidth();
-  const { channels, tracks } = DefaultPreset;
+  const { projectContext: $d } = useProjectContext();
+  const channels = $d?.channels || [];
+  const tracks = $d?.tracks || [];
 
   const channelNodes = channels.map(({ id, label }, channelIndex) => {
     const channelNode = {
@@ -35,29 +38,28 @@ export default function Dsp() {
 
   // TODO routing table
   const initialEdges = [
-    { id: "edge-1", source: "track-bd", target: "ch-drums" },
-    { id: "edge-2", source: "track-sd", target: "ch-drums" },
-    { id: "edge-3", source: "track-oh", target: "ch-drums" },
-    { id: "edge-4", source: "track-hi-tom", target: "ch-drums" },
-    { id: "edge-5", source: "track-mi-tom", target: "ch-drums" },
-    { id: "edge-6", source: "track-lo-tom", target: "ch-drums" },
+    { id: 'edge-1', source: 'track-bd', target: 'ch-drums' },
+    { id: 'edge-2', source: 'track-sd', target: 'ch-drums' },
+    { id: 'edge-3', source: 'track-oh', target: 'ch-drums' },
+    { id: 'edge-4', source: 'track-hi-tom', target: 'ch-drums' },
+    { id: 'edge-5', source: 'track-mi-tom', target: 'ch-drums' },
+    { id: 'edge-6', source: 'track-lo-tom', target: 'ch-drums' },
     {
-      id: "edge-150",
-      className: "bg-red-500",
-      source: "ch-drums",
-      target: "master",
+      id: 'edge-150',
+      className: 'bg-red-500',
+      source: 'ch-drums',
+      target: 'master',
     },
   ];
 
-  console.log(channelNodes, trackNodes);
   return (
     <center>
       <section>
         <h1 className={styles.headings.h1}>Projekt</h1>
         <h2 className={styles.headings.h2}>General info</h2>
-        <p>Bpm: {DefaultPreset.bpm}</p>
+        <p>Bpm: {$d?.bpm}</p>
 
-        <div style={{ marginTop: "10vh", width: "100vw", height: "80vh" }}>
+        <div style={{ marginTop: '10vh', width: '100vw', height: '80vh' }}>
           <ReactFlow
             nodes={[...channelNodes, ...trackNodes]}
             edges={initialEdges}

src/app/page.tsx → src/app/(routes)/page.tsx

@@ -2,11 +2,11 @@
 import * as Tone from 'tone';
 import { useState } from 'react';
 import { Loader } from 'lucide-react';
-import { App } from '@/components';
+import { App } from 'app/_components';
 import { Button, Dialog } from '@/pfui';
 import t from '@/core/i18n';
-import { ESize, EVariant } from '../packages/pfui/constants';
-import { EButtonType } from 'packages/pfui/button/Button';
+
+import { EButtonType, ESize, EVariant } from '@/pfui/constants';
 
 export default function Home() {
   const [toneReady, setToneReady] = useState(false);

src/app/common/constants.tsx → src/app/_common/constants.tsx

@@ -1,11 +1,12 @@
 import _ from 'lodash/fp';
 import * as Tone from 'tone';
 
-import t from '@/core/i18n';
+import t from 'app/_core/i18n';
 
-import { ETrackType, type ITrack } from '@/common/types/track.types';
+import { ETrackType, type ITrack } from 'app/_common/types/track.types';
 import type { IChannel } from './types/channel.types';
 import { EInstrument } from './types/instrument.types';
+import { Note } from 'tone/build/esm/core/type/NoteUnits';
 
 // ---------- General
 /*** @constants */
@@ -46,6 +47,8 @@ export const ROMAN_NUMS = ['i', 'ii', 'iii', 'iv', 'v', 'vi', 'vii'];
 
 // ---------- Utils
 /*** @utils */
+export const getMaxNotes = (notes: Note[][]) =>
+  Math.max(notes.reduce((a, b) => (a > b.length ? a : b.length), 0));
 export const getMeasureTime = (n: number) => Tone.Time(`${n}m`);
 export const getMeasureSeconds = (n: number) => getMeasureTime(n).toSeconds();
 export const getNotationTime = (n: number) => Tone.Time(`${n}n`);
@@ -96,25 +99,43 @@ const DEFAULT_TRACK_INSTRUMENT_BASS: ITrack = {
       parts: [
         {
           label: 'p1-bass',
-          notes: [['D1'], ['D1'], ['D1'], ['D1'], ['F#1'], ['F#1'], [], []],
+          notes: [
+            ['D1'],
+            ['D1', 'G#1'],
+            ['G#1', 'G#2'],
+            ['G#1', 'E2'],
+            ['A1', 'A2'],
+            ['A1', 'C#2'],
+            ['A#1'],
+            ['A#1', 'A#2'],
+
+            ['A#1'],
+            ['A#1'],
+            ['G#1'],
+            ['G#1'],
+            ['D1'],
+            [],
+            [],
+            [],
+          ],
         },
       ],
     },
   },
 };
-
 // -------- Audio
 /*** @Track */
 const DEFAULT_TRACK_AUDIO: ITrack = {
-  id: 'track-audio-halloween',
+  id: 'audio-halloween',
   name: 'Halloween',
   routing: {
     input: {
-      parts: [],
-      id: 'track-audio-input',
-      label: 'Audio',
+      parts: [{ label: 'p1-audio', times: [0] }],
+      id: EInstrument.Player,
+      label: 'in-audio',
       options: {
-        url: '/halloween.mp3',
+        url: './halloween.mp3',
+        volume: -25,
       },
     },
     output: 'master',
@@ -154,7 +175,7 @@ const DEFAULT_TRACK_SD: ITrack = {
   name: 'Snare',
   routing: {
     input: {
-      id: 'Player',
+      id: EInstrument.Player,
       label: 'SnarePlayer',
       options: {
         url: './samples/WaveAlchemy/wa_808_tape/wa_808tape_snare_16_clean.wav',
@@ -301,41 +322,45 @@ const DEFAULT_TRACK_SAMPLER: ITrack = {
           label: 'p1-sampler',
           notes: [
             ['C3', 'E3'],
-            ['E3'],
             [],
+            [],
+            ['C3'],
+
+            ['D3', 'E3'],
+            [],
+            ['C3'],
+            [],
+
             ['C3', 'E3'],
-            ['D3'],
-            ['E3'],
-            ['C3', 'E3'],
-            ['E3'],
-            ['C3', 'E3'],
-            ['C3', 'E3'],
+            ['C3'],
+            [],
             [],
-            ['E3'],
+
             ['D3', 'E3'],
             [],
             [],
-            ['E3'],
+            [],
           ],
         },
         {
           label: 'p2-sampler',
           notes: [
             ['C3', 'E3'],
-            ['E3'],
+            [],
             [],
             ['C3', 'E3'],
+
             ['D3'],
             [],
+            ['C3'],
+            [],
+
             ['C3', 'E3'],
-            ['E3'],
-            ['C3', 'E3'],
-            ['C3', 'E3'],
+            ['C3'],
             [],
-            ['E3'],
-            ['D3', 'E3'],
             [],
-            ['E3'],
+
+            ['D3'],
             [],
             [],
             [],
@@ -394,8 +419,8 @@ export {
   //
   DEFAULT_STATES,
   //
+  DEFAULT_TRACK_AUDIO,
   DEFAULT_TRACK_SAMPLER,
-  // DEFAULT_TRACK_AUDIO,
   DEFAULT_TRACK_INSTRUMENT_BASS,
   // DEFAULT_TRACK_PLAYERS,
   // DEFAULT_TRACK_BD,

src/app/common/styles.ts → src/app/_common/styles.ts

@@ -12,7 +12,8 @@ const styles = {
   },
   icon: 'w-[16px] h-[16px] mr-1',
   main: 'relative h-full flex flex-1 justify-between',
-  // Custom components
+
+  /*** @components */
   arranger: { main: 'relative' },
   avatar: {
     main: 'flex items-center justify-center bg-[#222] text-white cursor-pointer w-12 h-12 hover:rotate-180',
@@ -27,25 +28,26 @@ const styles = {
     folderStyle: 'fill-blue-200',
     liStyle: 'flex',
   },
-  navbar: {
-    ui: 'p-4 flex flex-row w-full bg-black text-white items-center justify-between',
-    uiInner: 'flex px-4 py-2',
-    icon: 'w-8 h-8 mr-2',
-  },
+  locator: 'bg-black w-[1px] absolute top-0 bottom-0',
   mixer: {
     main: 'bg-[#3e4140] flex w-full text-white pl-[184px]',
     inner: 'flex w-full items-center',
     meter: 'w-full bg-[#333]',
     track: {
-      main: 'pt-6 bg-[#3e4140] border border-r-[#555] border-r-[2px] justify-center text-xs items-center content-end',
-      channel: 'justify-end relative bg-green-700',
+      main: 'pt-6 bg-[#3e4140] border border-r-[#555] border-r-[2px] justify-center text-xs items-center content-end relative',
+      channel: 'justify-end bg-green-700',
       inner: 'flex px-4 items-center gap-1 py-2 border-b border-b-[#555]',
       master:
         'bg-[#3e4140] border border-r-[#555] border-r-[2px] h-full flex flex-col justify-end',
       active: 'font-bold',
       inactive: '',
     },
   },
+  navbar: {
+    ui: 'p-4 flex flex-row w-full bg-black text-white items-center justify-between',
+    uiInner: 'flex px-4 py-2',
+    icon: 'w-8 h-8 mr-2',
+  },
   notes: {
     main: 'flex flex-1 justify-center items-center mr-1 text-black text-center cursor-pointer text-[0.5rem]',
     bg: 'bg-transparent',

src/app/common/types/project.types.ts → src/app/_common/types/project.types.ts

@@ -1,15 +1,21 @@
-import type { Subdivision } from "tone/build/esm/core/type/Units";
-import type { UniqueIdentifier } from "@dnd-kit/core";
-import type { ITrack } from "app/common/types/track.types";
-import type { IChannel } from "./channel.types";
+import type { Subdivision } from 'tone/build/esm/core/type/Units';
+import type { UniqueIdentifier } from '@dnd-kit/core';
+import type { ITrack } from 'app/_common/types/track.types';
+import type { IChannel } from './channel.types';
+import { Dispatch, SetStateAction } from 'react';
 
 export enum ETransportState {
-  Paused = "paused",
-  Started = "started",
-  Stopped = "stopped",
+  Paused = 'paused',
+  Started = 'started',
+  Stopped = 'stopped',
 }
 export enum EPortal {
-  Instruments = "portal-instruments",
+  Instruments = 'portal-instruments',
+}
+
+export interface IStartDialog {
+  toneReady: boolean;
+  setToneReady: Dispatch<SetStateAction<boolean>>;
 }
 export interface IProjectContext {
   activeTrackId: UniqueIdentifier;