Skip to content

Commit a94313c

Browse files
arthwoodarthwood
committed
chore: make "discovery" work
1 parent a888edc commit a94313c

6 files changed

Lines changed: 160 additions & 252 deletions

File tree

‎apps/discovery/babel.config.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
module.exports = function (api) {
22
api.cache(true);
33
return {
4-
presets: ['babel-preset-expo'],
5-
plugins: ['react-native-reanimated/plugin']
4+
presets: ['babel-preset-expo']
65
};
76
};

‎apps/discovery/metro.config.js‎

Lines changed: 50 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,57 @@
1-
const path = require('path');
2-
// const fs = require('fs');
31
const { getDefaultConfig } = require('expo/metro-config');
42

5-
const workspaceRoot = path.resolve(__dirname, '../..');
6-
// const packagesRoot = path.resolve(__dirname, '../../packages');
7-
// const docToolsRoot = path.resolve(__dirname, '../../doc-tools');
3+
const path = require('path');
4+
const fs = require('fs');
5+
6+
const projectRoot = __dirname;
7+
const packagesRoot = path.resolve(projectRoot, '../../packages');
8+
const docToolsRoot = path.resolve(projectRoot, '../../doc-tools');
89

9-
// const packagesDirs = fs.readdirSync(packagesRoot);
10-
// const docToolsDirs = fs.readdirSync(docToolsRoot);
10+
const packagesDirs = fs.readdirSync(packagesRoot);
11+
const docToolsDirs = fs.readdirSync(docToolsRoot);
1112

12-
// const watchFolders = [
13-
// workspaceRoot,
14-
// ...packagesDirs.map((f) => path.join(packagesRoot, f)),
15-
// ...docToolsDirs.map((f) => path.join(docToolsRoot, f))
16-
// ];
13+
const config = getDefaultConfig(projectRoot);
1714

18-
module.exports = (async () => {
19-
const {
20-
resolver: { assetExts, sourceExts },
21-
transformer,
22-
...other
23-
} = await getDefaultConfig(workspaceRoot);
24-
return {
25-
...other,
26-
resetCache: true,
27-
// projectRoot: workspaceRoot,
28-
// watchFolders,
29-
transformer: {
30-
...transformer,
31-
minifierConfig: {
32-
keep_classnames: true,
33-
// Need this for source mapping in @doc/pages to work.
34-
keep_fnames: true,
35-
mangle: {
36-
keep_classnames: true,
37-
// Need this for source mapping in @doc/pages to work.
38-
keep_fnames: true
39-
},
40-
output: {
41-
ascii_only: true,
42-
quote_style: 3,
43-
wrap_iife: true
44-
},
45-
sourceMap: {
46-
includeSources: false
47-
},
48-
toplevel: false,
49-
compress: {
50-
// reduce_funcs inlines single-use functions, which cause perf regressions.
51-
reduce_funcs: false
52-
}
53-
},
54-
babelTransformerPath: require.resolve('react-native-svg-transformer')
15+
config.transformer = {
16+
...config.transformer,
17+
minifierConfig: {
18+
keep_classnames: true,
19+
// Need this for source mapping in @doc/pages to work.
20+
keep_fnames: true,
21+
mangle: {
22+
keep_classnames: true,
23+
// Need this for source mapping in @doc/pages to work.
24+
keep_fnames: true
5525
},
56-
resolver: {
57-
assetExts: assetExts.filter((ext) => ext !== 'svg'),
58-
sourceExts: [...sourceExts, 'svg'],
59-
// extraNodeModules: new Proxy(
60-
// {},
61-
// {
62-
// get: (target, name) => path.join(__dirname, `node_modules/${name}`)
63-
// }
64-
// )
26+
output: {
27+
ascii_only: true,
28+
quote_style: 3,
29+
wrap_iife: true
30+
},
31+
sourceMap: {
32+
includeSources: false
33+
},
34+
toplevel: false,
35+
compress: {
36+
// reduce_funcs inlines single-use functions, which cause perf regressions.
37+
reduce_funcs: false
6538
}
66-
};
67-
})();
39+
},
40+
babelTransformerPath: require.resolve('react-native-svg-transformer')
41+
};
42+
config.resolver = {
43+
...config.resolver,
44+
assetExts: config.resolver.assetExts.filter((ext) => ext !== 'svg'),
45+
sourceExts: [...config.resolver.sourceExts, 'svg'],
46+
nodeModulesPaths: [
47+
...config.resolver.nodeModulesPaths,
48+
...packagesDirs.map((d) =>
49+
path.resolve(packagesRoot, d, 'node_modules')
50+
),
51+
...docToolsDirs.map((d) =>
52+
path.resolve(docToolsRoot, d, 'node_modules')
53+
)
54+
]
55+
};
56+
57+
module.exports = config;

‎apps/discovery/package.json‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@jsamr/react-native-li": "^2.3.1",
2727
"@mobily/stacks": "^2.2.2",
2828
"@react-native-community/masked-view": "0.1.11",
29-
"@react-native-community/slider": "^5.0.1",
30-
"@react-native-picker/picker": "^2.11.4",
29+
"@react-native-community/slider": "5.0.1",
30+
"@react-native-picker/picker": "2.11.1",
3131
"@react-navigation/bottom-tabs": "^7.4.9",
3232
"@react-navigation/drawer": "^7.5.10",
3333
"@react-navigation/native": "^7.1.18",
@@ -44,15 +44,15 @@
4444
"expo-splash-screen": "~31.0.10",
4545
"expo-status-bar": "~3.0.8",
4646
"expo-web-browser": "~15.0.8",
47+
"highlight.js": "^11.11.1",
4748
"lowlight": "^3.3.0",
4849
"react": "19.1.0",
4950
"react-dom": "19.1.0",
5051
"react-native": "0.81.5",
5152
"react-native-gesture-handler": "~2.28.0",
52-
"react-native-hsv-color-picker": "github:Kasun-thilina/react-native-hsv-color-picker#master",
5353
"react-native-pager-view": "^6.9.1",
5454
"react-native-paper": "^5.14.5",
55-
"react-native-reanimated": "^4.1.3",
55+
"react-native-reanimated": "~4.1.1",
5656
"react-native-render-html": "workspace:*",
5757
"react-native-safe-area-context": "^5.6.1",
5858
"react-native-screens": "~4.16.0",
@@ -63,6 +63,7 @@
6363
"react-native-webview": "~13.15.0",
6464
"react-native-worklets": "^0.5.1",
6565
"react-syntax-highlighter": "^15.6.6",
66+
"reanimated-color-picker": "^4.1.1",
6667
"scheduler": "^0.27.0",
6768
"urijs": "^1.19.11",
6869
"use-context-selector": "^2.0.0",
@@ -82,7 +83,5 @@
8283
"typescript": "^5.4.5"
8384
},
8485
"private": true,
85-
"installConfig": {
86-
"hoistingLimits": "workspaces"
87-
}
86+
"version": "1.0.0"
8887
}

‎apps/discovery/src/components/UIColorPickerControlAtom.tsx‎

Lines changed: 18 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import Color from 'color';
2-
import React, { ComponentType, useCallback, useEffect, useState } from 'react';
3-
import { Dimensions, View } from 'react-native';
4-
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
5-
const HsvColorPicker = require('react-native-hsv-color-picker')
6-
.default as HsvColorPicker;
1+
import React, { useCallback } from 'react';
2+
import ColorPicker, {
3+
ColorPickerProps,
4+
HueSlider,
5+
Preview
6+
} from 'reanimated-color-picker';
77
import { SelectorProps, PropsWithStyle } from './nucleons/types';
88

9-
type HsvColorPicker = ComponentType<Record<string, any>>;
10-
119
export type UIColorPickerControlAtomProps = Pick<
1210
SelectorProps<string>,
1311
'onSelectedValueChange'
@@ -21,72 +19,20 @@ export default function UIColorPickerControlAtom({
2119
initialValue,
2220
style
2321
}: UIColorPickerControlAtomProps) {
24-
const native = Gesture.Native()
25-
.disallowInterruption(true)
26-
.shouldActivateOnStart(true)
27-
.shouldCancelWhenOutside(false);
28-
29-
const getInitialSaturation = useCallback(() => {
30-
const col = Color(initialValue);
31-
return {
32-
hue: col.hue(),
33-
saturation: col.saturationv(),
34-
value: col.value()
35-
};
36-
}, [initialValue]);
37-
const [{ hue, saturation, value }, setHsv] = useState(getInitialSaturation);
38-
const selectedColor = Color({
39-
h: hue,
40-
s: saturation * 100,
41-
v: value * 100
42-
}).string();
43-
useEffect(
44-
function onHSVUpdate() {
45-
onSelectedValueChange?.call(null, selectedColor);
22+
const onSelectColor = useCallback<
23+
NonNullable<ColorPickerProps['onComplete']>
24+
>(
25+
({ hex }) => {
26+
'worklet';
27+
onSelectedValueChange(hex);
4628
},
47-
[onSelectedValueChange, selectedColor]
29+
[onSelectedValueChange]
4830
);
49-
const onSaturationAndValueChange = useCallback(
50-
function onSaturationAndValueChange({
51-
saturation: s,
52-
value: v
53-
}: {
54-
saturation: number;
55-
value: number;
56-
}) {
57-
setHsv((state) => ({ ...state, saturation: s, value: v }));
58-
},
59-
[]
60-
);
61-
const onHueChange = useCallback(function onHueChange({
62-
hue: h
63-
}: {
64-
hue: number;
65-
}) {
66-
setHsv((state) => ({ ...state, hue: h }));
67-
}, []);
31+
6832
return (
69-
<View style={[style, { alignItems: 'center' }]}>
70-
<GestureDetector gesture={native}>
71-
<HsvColorPicker
72-
huePickerHue={hue}
73-
satValPickerHue={hue}
74-
satValPickerSaturation={saturation}
75-
satValPickerValue={value}
76-
onHuePickerDragMove={onHueChange}
77-
onHuePickerPress={onHueChange}
78-
onSatValPickerPress={onSaturationAndValueChange}
79-
onSatValPickerDragMove={onSaturationAndValueChange}
80-
/>
81-
</GestureDetector>
82-
<View
83-
style={{
84-
width: '100%',
85-
alignSelf: 'center',
86-
height: Dimensions.get('screen').height,
87-
backgroundColor: selectedColor
88-
}}
89-
/>
90-
</View>
33+
<ColorPicker value={initialValue} onComplete={onSelectColor} style={style}>
34+
<Preview />
35+
<HueSlider />
36+
</ColorPicker>
9137
);
9238
}

‎apps/discovery/src/highlight/Highlighter.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,12 @@ import {
1616
import StylesheetsProvider, { HighlightJsStyles } from './StylesheetsProvider';
1717
import highlighterStylesheetsContext from './highlighterStylesheetsContext';
1818
import generateLines, { SimpleNode } from './generateLines';
19-
// import * as html from 'highlight.js/lib/languages/html';
20-
// registerLanguage('html', html);
19+
import bash from 'highlight.js/lib/languages/bash';
20+
import xml from 'highlight.js/lib/languages/xml';
2121

22-
const { highlight } = createLowlight();
22+
const { highlight, register, registerAlias } = createLowlight();
23+
register({ bash, xml });
24+
registerAlias({ xml: ['html', 'jsx'] });
2325

2426
export interface HighlighterProps extends ViewProps {
2527
content: string;

0 commit comments

Comments
 (0)