diff --git a/package.json b/package.json index b8cebc4..0551629 100644 --- a/package.json +++ b/package.json @@ -8,9 +8,9 @@ "packageManager": "yarn@3.6.1", "scripts": { "build": "yarn workspaces foreach -A run prepare", - "test": "yarn workspace @circuit-ui test:unit", - "test:visual": "yarn workspace @circuit-ui test:visual", - "test:unit": "yarn workspace @circuit-ui test:unit", + "test": "yarn workspace @circuit-ui/core test:unit", + "test:visual": "yarn workspace @circuit-ui/core test:visual", + "test:unit": "yarn workspace @circuit-ui/core test:unit", "test:screenshots": "./scripts/capture-screenshots.sh", "typecheck": "yarn workspaces foreach -A run typecheck", "lint": "eslint \"packages/*/src/**/*.{js,ts,tsx}\"", diff --git a/packages/ui/jest.setup.js b/packages/ui/jest.setup.js index 3df04bb..fb0416b 100644 --- a/packages/ui/jest.setup.js +++ b/packages/ui/jest.setup.js @@ -63,6 +63,16 @@ jest.mock('react-native-svg', () => { }; }); +// --------------------------------------------------------------------------- +// Mock: react-native-worklets +// --------------------------------------------------------------------------- +// Keep PianoRoll tests on the JS thread in Jest. The real package ships ESM +// that Jest does not transform by default. +jest.mock('react-native-worklets', () => ({ + __esModule: true, + scheduleOnRN: (fn) => fn, +})); + // --------------------------------------------------------------------------- // Mock: react-native-reanimated // --------------------------------------------------------------------------- @@ -208,6 +218,23 @@ jest.mock('@shopify/react-native-skia', () => { return Component; }; + const createPath = () => { + const path = { + moveTo: () => path, + lineTo: () => path, + close: () => path, + cubicTo: () => path, + quadTo: () => path, + arcTo: () => path, + addRect: () => path, + addOval: () => path, + addCircle: () => path, + addRRect: () => path, + detach: () => path, + }; + return path; + }; + return { __esModule: true, Canvas: createSkiaComponent('Canvas'), @@ -240,18 +267,10 @@ jest.mock('@shopify/react-native-skia', () => { useImage: () => null, Skia: { Path: { - Make: () => ({ - moveTo: () => ({}), - lineTo: () => ({}), - close: () => ({}), - cubicTo: () => ({}), - quadTo: () => ({}), - arcTo: () => ({}), - addRect: () => ({}), - addOval: () => ({}), - addCircle: () => ({}), - addRRect: () => ({}), - }), + Make: createPath, + }, + PathBuilder: { + Make: createPath, }, Paint: () => ({}), Matrix: () => [], diff --git a/packages/ui/package.json b/packages/ui/package.json index 9f83318..6c7c716 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -256,6 +256,7 @@ "react-native-gesture-handler": "^2.20.2", "react-native-reanimated": "^3.17.4", "react-native-svg": "^15.11.2", + "react-native-worklets": "0.8.3", "react-test-renderer": "18.3.1", "release-it": "^17.10.0", "typescript": "^5.2.2" @@ -270,8 +271,8 @@ "react-native": "*", "react-native-gesture-handler": ">=2.0.0", "react-native-reanimated": ">=3.0.0", - "react-native-worklets": ">=0.8.0", - "react-native-svg": ">=15.0.0" + "react-native-svg": ">=15.0.0", + "react-native-worklets": ">=0.8.0" }, "react-native-builder-bob": { "source": "src", diff --git a/packages/ui/src/features/account/components/__tests__/__snapshots__/AccountViews.test.tsx.snap b/packages/ui/src/features/account/components/__tests__/__snapshots__/AccountViews.test.tsx.snap index df512f1..9138fd4 100644 --- a/packages/ui/src/features/account/components/__tests__/__snapshots__/AccountViews.test.tsx.snap +++ b/packages/ui/src/features/account/components/__tests__/__snapshots__/AccountViews.test.tsx.snap @@ -65,7 +65,7 @@ exports[`CreateAccountView matches snapshot 1`] = ` "borderRadius": 6, "borderWidth": 1, "flexDirection": "row", - "height": 36, + "height": 44, "paddingHorizontal": 16, }, { @@ -137,7 +137,7 @@ exports[`CreateAccountView matches snapshot 1`] = ` "borderRadius": 6, "borderWidth": 1, "flexDirection": "row", - "height": 36, + "height": 44, "paddingHorizontal": 16, }, { @@ -211,7 +211,7 @@ exports[`CreateAccountView matches snapshot 1`] = ` "borderRadius": 6, "borderWidth": 1, "flexDirection": "row", - "height": 36, + "height": 44, "paddingHorizontal": 16, }, { @@ -292,6 +292,7 @@ exports[`CreateAccountView matches snapshot 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, @@ -411,7 +412,7 @@ exports[`SignInView matches snapshot 1`] = ` "borderRadius": 6, "borderWidth": 1, "flexDirection": "row", - "height": 36, + "height": 44, "paddingHorizontal": 16, }, { @@ -485,7 +486,7 @@ exports[`SignInView matches snapshot 1`] = ` "borderRadius": 6, "borderWidth": 1, "flexDirection": "row", - "height": 36, + "height": 44, "paddingHorizontal": 16, }, { @@ -566,6 +567,7 @@ exports[`SignInView matches snapshot 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, @@ -655,6 +657,7 @@ exports[`SignInView matches snapshot 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, diff --git a/packages/ui/src/features/account/components/__tests__/__snapshots__/EditProfileView.test.tsx.snap b/packages/ui/src/features/account/components/__tests__/__snapshots__/EditProfileView.test.tsx.snap index 57e8fac..47e9c5d 100644 --- a/packages/ui/src/features/account/components/__tests__/__snapshots__/EditProfileView.test.tsx.snap +++ b/packages/ui/src/features/account/components/__tests__/__snapshots__/EditProfileView.test.tsx.snap @@ -510,6 +510,7 @@ exports[`EditProfileView matches snapshot (dark mode, visible) 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, @@ -758,6 +759,7 @@ exports[`EditProfileView matches snapshot (dark mode, visible) 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, @@ -857,6 +859,7 @@ exports[`EditProfileView matches snapshot (dark mode, visible) 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, @@ -1427,6 +1430,7 @@ exports[`EditProfileView matches snapshot (light mode, visible) 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, @@ -1675,6 +1679,7 @@ exports[`EditProfileView matches snapshot (light mode, visible) 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, @@ -1774,6 +1779,7 @@ exports[`EditProfileView matches snapshot (light mode, visible) 1`] = ` "alignItems": "center", "flexDirection": "row", "justifyContent": "center", + "minHeight": 44, }, { "paddingHorizontal": 16, diff --git a/packages/ui/src/features/playground/components/ClipEditor/__tests__/__snapshots__/ClipEditorView.test.tsx.snap b/packages/ui/src/features/playground/components/ClipEditor/__tests__/__snapshots__/ClipEditorView.test.tsx.snap index b8bbb69..b446bb2 100644 --- a/packages/ui/src/features/playground/components/ClipEditor/__tests__/__snapshots__/ClipEditorView.test.tsx.snap +++ b/packages/ui/src/features/playground/components/ClipEditor/__tests__/__snapshots__/ClipEditorView.test.tsx.snap @@ -351,14 +351,18 @@ exports[`ClipEditorView snapshots matches snapshot when playing 1`] = ` - - - + } + > + - - Note 11 - - - + Note 11 + + + - - Note 10 - - - + Note 10 + + + - - Note 9 - - - + Note 9 + + + - - Note 8 - - - + Note 8 + + + - - Note 7 - - - + Note 7 + + + - - Note 6 - - - + Note 6 + + + - - Note 5 - - - + Note 5 + + + - - Note 4 - - - + Note 4 + + + - - Note 3 - - - + Note 3 + + + - - Note 2 - - - + Note 2 + + + - - Note 1 - - - + Note 1 + + + - - Note 0 - - - - - - + Note 0 + + + + + } + > + - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - + - - - - - - - + > + + + - - - - 100 - % - - - + + + + + + 100 + % + + + - - + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "backgroundColor": "rgba(0,0,0,0.6)", + "borderRadius": 8, + "height": 36, + "justifyContent": "center", + "width": 36, + } + } + > + + + + - - - - + } + > + - - FX - - - + FX + + + - - Perc 2 - - - + Perc 2 + + + - - Perc 1 - - - + Perc 1 + + + - - Shaker - - - + Shaker + + + - - Cowbell - - - + Cowbell + + + - - Rim - - - + Rim + + + - - Ride - - - + Ride + + + - - Cymbal - - - + Cymbal + + + - - Tom High - - - + Tom High + + + - - Tom Mid - - - + Tom Mid + + + - - Tom Low - - - + Tom Low + + + - - Clap - - - + Clap + + + - - Open HH - - - + Open HH + + + - - Closed HH - - - + Closed HH + + + - - Snare - - - + Snare + + + - - Kick - - - - - - + Kick + + + + + } + > + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + - - - + - - - - - - - + > + + + - - - - 100 - % - - - + + + + + + 100 + % + + + - - + accessibilityValue={ + { + "max": undefined, + "min": undefined, + "now": undefined, + "text": undefined, + } + } + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "backgroundColor": "rgba(0,0,0,0.6)", + "borderRadius": 8, + "height": 36, + "justifyContent": "center", + "width": 36, + } + } + > + + + + - - - - + } + > + - - B6 - - - + B6 + + + - - A#6 - - - + A#6 + + + - - A6 - - - + A6 + + + - - G#6 - - - + G#6 + + + - - G6 - - - + G6 + + + - - F#6 - - - + F#6 + + + - - F6 - - - + F6 + + + - - E6 - - - + E6 + + + - - D#6 - - - + D#6 + + + - - D6 - - - + D6 + + + - - C#6 - - - + C#6 + + + - - C6 - - - + C6 + + + - - B5 - - - + B5 + + + - - A#5 - - - + A#5 + + + - - A5 - - - + A5 + + + - - G#5 - - - + G#5 + + + - - G5 - - - + G5 + + + - - F#5 - - - + F#5 + + + - - F5 - - - + F5 + + + - - E5 - - - + E5 + + + - - D#5 - - - + D#5 + + + - - D5 - - - + D5 + + + - - C#5 - - - + C#5 + + + - - C5 - - - - - - + C5 + + + + + } + > + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + - - - + - - - - - - - + > + + + - - - - 100 - % - - - + + + + + + 100 + % + + + - - + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "backgroundColor": "rgba(0,0,0,0.6)", + "borderRadius": 8, + "height": 36, + "justifyContent": "center", + "width": 36, + } + } + > + + + + - - - - - - - - Note 11 - - - - - Note 10 - - - - - Note 9 - - - - - Note 8 - - - - - Note 7 - - - - - Note 6 - - - - - Note 5 - - - - - Note 4 - - - - - Note 3 - - - + + + + - - Note 2 - - + } + > - - Note 1 - - - - - Note 0 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + Note 11 + + + + - - + Note 10 + + + + - + Note 9 + + + + - - + Note 8 + + + + - - + Note 7 + + + + - - - - + Note 6 + + + + - - + Note 5 + + + + - - - - + Note 4 + + + + - - + Note 3 + + + + - - - - + Note 2 + + + + - - + Note 1 + + + + - - + Note 0 + + + + + + - + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - + + - - - + - - - - - - - + > + + + - - - - 100 - % - - - + + + + + + 100 + % + + + - - + accessible={true} + collapsable={false} + focusable={true} + onBlur={[Function]} + onClick={[Function]} + onFocus={[Function]} + onResponderGrant={[Function]} + onResponderMove={[Function]} + onResponderRelease={[Function]} + onResponderTerminate={[Function]} + onResponderTerminationRequest={[Function]} + onStartShouldSetResponder={[Function]} + style={ + { + "alignItems": "center", + "backgroundColor": "rgba(0,0,0,0.6)", + "borderRadius": 8, + "height": 36, + "justifyContent": "center", + "width": 36, + } + } + > + + + + - - 15/01/2025, 21:00 + 15/01/2025, 12:00 - 15/01/2025, 21:00 + 15/01/2025, 12:00 - 15/01/2025, 21:00 + 15/01/2025, 12:00 - 15/01/2025, 21:00 + 15/01/2025, 12:00 - 15/01/2025, 21:00 + 15/01/2025, 12:00 - - + + + + - - + + + + - - + + + + - - + + + + - - + + + + - + - + - + - + - + - + - + - + - + - + - + + /> + + =2.0.0" react-native-reanimated: ">=3.0.0" react-native-svg: ">=15.0.0" + react-native-worklets: ">=0.8.0" + languageName: unknown + linkType: soft + +"@circuit-ui/tokens@workspace:*, @circuit-ui/tokens@workspace:packages/tokens": + version: 0.0.0-use.local + resolution: "@circuit-ui/tokens@workspace:packages/tokens" + dependencies: + del-cli: ^5.1.0 + react-native-builder-bob: ^0.37.0 + typescript: ^5.2.2 languageName: unknown linkType: soft @@ -12609,6 +12931,30 @@ __metadata: languageName: node linkType: hard +"react-native-worklets@npm:0.8.3": + version: 0.8.3 + resolution: "react-native-worklets@npm:0.8.3" + dependencies: + "@babel/plugin-transform-arrow-functions": ^7.27.1 + "@babel/plugin-transform-class-properties": ^7.27.1 + "@babel/plugin-transform-classes": ^7.28.4 + "@babel/plugin-transform-nullish-coalescing-operator": ^7.27.1 + "@babel/plugin-transform-optional-chaining": ^7.27.1 + "@babel/plugin-transform-shorthand-properties": ^7.27.1 + "@babel/plugin-transform-template-literals": ^7.27.1 + "@babel/plugin-transform-unicode-regex": ^7.27.1 + "@babel/preset-typescript": ^7.27.1 + convert-source-map: ^2.0.0 + semver: ^7.7.3 + peerDependencies: + "@babel/core": "*" + "@react-native/metro-config": "*" + react: "*" + react-native: 0.81 - 0.85 + checksum: a44e50fc0ec765612df3f6b6104444d28e94634f3642b689df2638c5c9187ddadd7069953bb9d9a68ca253422e6630db36ffcfee80eea5f71f73cc99539307fd + languageName: node + linkType: hard + "react-native@npm:0.76.7": version: 0.76.7 resolution: "react-native@npm:0.76.7" @@ -13408,6 +13754,15 @@ __metadata: languageName: node linkType: hard +"semver@npm:^7.7.3": + version: 7.8.5 + resolution: "semver@npm:7.8.5" + bin: + semver: bin/semver.js + checksum: 0c580f17e88e2b45806dc5cf3d824f719c946999d3554bf30307c2b68b3300ab3c8bfcd84d8f489b93b4cbb5362f5fc8de4d2858954f18d834253c4450fc9f6b + languageName: node + linkType: hard + "send@npm:^0.19.0, send@npm:~0.19.1": version: 0.19.2 resolution: "send@npm:0.19.2"