Fix/jsi and ts bugs (#244)

* feat: added host functions caching

* refactor: removed unused components and moved common files to common example folders and format

* fix: fixed metronome, removed unused files and moved common files

* fix: back to previous version of hihat

* fix: fixed start/stop mechanism bug

---------

Co-authored-by: Maciej Makowski <maciej.makowski@swmansion.com>

Author: maciejmakowski2003

apps/common-app/src/components/Step.tsx

@@ -1,6 +1,4 @@
 export { default as Icon } from './Icon';
-export { default as Step } from './Step';
-export { default as Steps } from './Steps';
 export { default as Button } from './Button';
 export { default as Slider } from './Slider';
 export { default as Spacer } from './Spacer';

apps/common-app/src/components/Steps.tsx

@@ -6,16 +6,19 @@ import { LayoutChangeEvent, StyleSheet, View } from 'react-native';
 
 import { colors } from '../../styles';
 import { Select, Slider, Spacer, Container } from '../../components';
-import { Kick, Clap, HiHat } from '../SharedUtils';
+import Kick from '../../utils/soundEngines/Kick';
+import Clap from '../../utils/soundEngines/Clap';
+import HiHat from '../../utils/soundEngines/HiHat';
 
-import { InstrumentName, Pattern, type XYWHRect } from './types';
+import { InstrumentName, Pattern, type XYWHRect } from '../../types';
 import { size, initialBpm } from './constants';
 import NotesHighlight from './NotesHighlight';
 import PatternShape from './PatternShape';
 import useGestures from './useGestures';
 import PlayButton from './PlayButton';
-import usePlayer from './usePlayer';
+import usePlayer from '../../utils/usePlayer';
 import presets from './presets';
+import { numBeats } from './constants';
 import Grid from './Grid';
 
 const defaultPreset = 'Empty';
@@ -54,6 +57,7 @@ const DrumMachine: React.FC = () => {
     bpm,
     patterns,
     notesPerBeat: 2,
+    numBeats,
     setup: setupPlayer,
   });
 

apps/common-app/src/components/index.ts

@@ -5,7 +5,7 @@ import { Line, Circle, Paint, vec } from '@shopify/react-native-skia';
 import { colors } from '../../styles';
 import { numBeats, cPoint, maxSize, buttonRadius } from './constants';
 import { getAngle, getPointCX, getPointCY } from './utils';
-import type { Instrument } from './types';
+import type { Instrument } from '../../types';
 import instruments from './instruments';
 
 const points = Array(numBeats).fill(0);

apps/common-app/src/examples/DrumMachine/DrumMachine.tsx

@@ -2,7 +2,7 @@ import React, { memo } from 'react';
 import { Circle, Paint } from '@shopify/react-native-skia';
 import { SharedValue, useDerivedValue } from 'react-native-reanimated';
 
-import { Instrument, PlayingInstruments } from './types';
+import { Instrument, PlayingInstruments } from '../../types';
 import { cPoint, buttonRadius } from './constants';
 import { getPointCX, getPointCY } from './utils';
 import instruments from './instruments';

apps/common-app/src/examples/DrumMachine/Grid.tsx

@@ -3,7 +3,7 @@ import { Circle, Paint, Path, vec, Skia } from '@shopify/react-native-skia';
 
 import { getAngle, getPointCX, getPointCY } from './utils';
 import instruments from './instruments';
-import type { Pattern } from './types';
+import type { Pattern } from '../../types';
 import { buttonRadius, cPoint } from './constants';
 
 interface PatternShapeProps {

apps/common-app/src/examples/DrumMachine/NotesHighlight.tsx

@@ -8,7 +8,7 @@ import { Pressable, StyleSheet } from 'react-native';
 
 import { Icon } from '../../components';
 import { colors } from '../../styles';
-import type { PlayingInstruments, XYWHRect } from './types';
+import type { PlayingInstruments, XYWHRect } from '../../types';
 import { size } from './constants';
 
 interface PlayButtonProps {

apps/common-app/src/examples/DrumMachine/PatternShape.tsx

@@ -1,5 +1,5 @@
 import { Dimensions } from 'react-native';
-import type { InstrumentName, XYPoint } from './types';
+import type { InstrumentName, XYPoint } from '../../types';
 
 export const screenSize = Dimensions.get('screen');
 export const size = Math.min(screenSize.width, screenSize.height);

apps/common-app/src/examples/DrumMachine/PlayButton.tsx

@@ -1,5 +1,5 @@
 import { maxSize } from './constants';
-import type { Instrument } from './types';
+import type { Instrument } from '../../types';
 
 export const HiHat: Instrument = {
   name: 'hi-hat',