@mr.dj2u/library-registry 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/README.md +42 -0
- package/THIRD_PARTY_NOTICES.md +90 -0
- package/assets/create-expo-app/sdk-56/assets/images/expo-badge-white.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/expo-badge.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/expo-logo.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/logo-glow.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/react-logo.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/react-logo@2x.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/react-logo@3x.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/tabIcons/explore.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/tabIcons/explore@2x.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/tabIcons/explore@3x.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/tabIcons/home.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/tabIcons/home@2x.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/tabIcons/home@3x.png +0 -0
- package/assets/create-expo-app/sdk-56/assets/images/tutorial-web.png +0 -0
- package/assets/create-expo-app/sdk-56/src/app/_layout.tsx +15 -0
- package/assets/create-expo-app/sdk-56/src/app/explore.tsx +180 -0
- package/assets/create-expo-app/sdk-56/src/app/index.tsx +98 -0
- package/assets/create-expo-app/sdk-56/src/components/animated-icon.module.css +6 -0
- package/assets/create-expo-app/sdk-56/src/components/animated-icon.tsx +132 -0
- package/assets/create-expo-app/sdk-56/src/components/animated-icon.web.tsx +108 -0
- package/assets/create-expo-app/sdk-56/src/components/app-tabs.tsx +32 -0
- package/assets/create-expo-app/sdk-56/src/components/app-tabs.web.tsx +115 -0
- package/assets/create-expo-app/sdk-56/src/components/external-link.tsx +25 -0
- package/assets/create-expo-app/sdk-56/src/components/hint-row.tsx +35 -0
- package/assets/create-expo-app/sdk-56/src/components/themed-text.tsx +73 -0
- package/assets/create-expo-app/sdk-56/src/components/themed-view.tsx +16 -0
- package/assets/create-expo-app/sdk-56/src/components/ui/collapsible.tsx +65 -0
- package/assets/create-expo-app/sdk-56/src/components/web-badge.tsx +43 -0
- package/assets/create-expo-app/sdk-56/src/constants/theme.ts +65 -0
- package/assets/create-expo-app/sdk-56/src/global.css +9 -0
- package/assets/create-expo-app/sdk-56/src/hooks/use-color-scheme.ts +1 -0
- package/assets/create-expo-app/sdk-56/src/hooks/use-color-scheme.web.ts +21 -0
- package/assets/create-expo-app/sdk-56/src/hooks/use-theme.ts +14 -0
- package/assets/create-expo-stack/2.21.3/base/components/BackButton.tsx +23 -0
- package/assets/create-expo-stack/2.21.3/base/components/Button.tsx +42 -0
- package/assets/create-expo-stack/2.21.3/base/components/Container.tsx +14 -0
- package/assets/create-expo-stack/2.21.3/base/components/EditScreenInfo.tsx +36 -0
- package/assets/create-expo-stack/2.21.3/base/components/HeaderButton.tsx +31 -0
- package/assets/create-expo-stack/2.21.3/base/components/ScreenContent.tsx +40 -0
- package/assets/create-expo-stack/2.21.3/base/components/TabBarIcon.tsx +15 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/ActivityIndicator.tsx +10 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Avatar.tsx +32 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Button.tsx +141 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/DatePicker/DatePicker.android.tsx +77 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/DatePicker/DatePicker.tsx +23 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/DatePicker/index.ts +1 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/Icon.ios.tsx +55 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/Icon.tsx +58 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/index.ts +16 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Icon/types.ts +19 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Picker.tsx +42 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/ProgressIndicator.tsx +68 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Slider.tsx +28 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Text.tsx +55 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/ThemeToggle.tsx +33 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/Toggle.tsx +20 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/lib/cn.ts +6 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/lib/useColorScheme.tsx +21 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/lib/useHeaderSearchBar.tsx +33 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/theme/colors.ts +123 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/theme/index.ts +32 -0
- package/assets/create-expo-stack/2.21.3-mrdj.2/src/theme/with-opacity.ts +155 -0
- package/assets/mds/routes/drawer-tabs/data.tsx +1 -0
- package/assets/mds/routes/drawer-tabs/index.tsx +1 -0
- package/assets/mds/routes/drawer-tabs/nativewindui.tsx +1 -0
- package/assets/mds/routes/drawer-tabs/sdk-56.tsx +1 -0
- package/assets/mds/routes/drawer-tabs/stylist.tsx +1 -0
- package/assets/mds/scripts/stylist-sync-android.mjs +39 -0
- package/assets/mds/src/app/exposition/data.tsx +1 -0
- package/assets/mds/src/app/exposition/index.tsx +1 -0
- package/assets/mds/src/app/exposition/nativewindui.tsx +1 -0
- package/assets/mds/src/app/exposition/sdk-56.tsx +1 -0
- package/assets/mds/src/app/exposition/stylist-sync+api.ts +241 -0
- package/assets/mds/src/app/exposition/stylist.tsx +1 -0
- package/assets/mds/src/app/onboarding/account-setup.tsx +1 -0
- package/assets/mds/src/app/onboarding/agreement.tsx +1 -0
- package/assets/mds/src/app/onboarding/terms.tsx +1 -0
- package/assets/mds/src/app/onboarding.tsx +1 -0
- package/assets/mds/src/app/settings.tsx +1 -0
- package/assets/mds/src/components/exposition/index.ts +8 -0
- package/assets/mds/src/components/exposition/notice.tsx +3 -0
- package/assets/mds/src/components/exposition/package-card.tsx +76 -0
- package/assets/mds/src/components/swmansion/animated-pressable.tsx +54 -0
- package/assets/mds/src/components/swmansion/gesture-card.tsx +54 -0
- package/assets/mds/src/components/swmansion/keyboard-form.tsx +73 -0
- package/assets/mds/src/components/swmansion/screens-card.tsx +40 -0
- package/assets/mds/src/components/swmansion/software-mansion-logo.tsx +15 -0
- package/assets/mds/src/components/swmansion/svg-mark.tsx +16 -0
- package/assets/mds/src/data/mock-app.ts +21 -0
- package/assets/mds/src/features/exposition/data-screen.tsx +152 -0
- package/assets/mds/src/features/exposition/embedded-fonts.ts +72 -0
- package/assets/mds/src/features/exposition/expo-sdk-56-screen.tsx +709 -0
- package/assets/mds/src/features/exposition/exposition-screen.tsx +191 -0
- package/assets/mds/src/features/exposition/nativewindui-screen.tsx +125 -0
- package/assets/mds/src/features/exposition/stylist-screen.tsx +3456 -0
- package/assets/mds/src/features/onboarding/account-setup-screen.tsx +54 -0
- package/assets/mds/src/features/onboarding/agreement-screen.tsx +6 -0
- package/assets/mds/src/features/onboarding/components/legal-document-view.tsx +103 -0
- package/assets/mds/src/features/onboarding/legal-documents.ts +80 -0
- package/assets/mds/src/features/onboarding/onboarding-screen.tsx +167 -0
- package/assets/mds/src/features/onboarding/terms-screen.tsx +6 -0
- package/assets/mds/src/features/settings/settings-screen.tsx +57 -0
- package/assets/mds/src/services/local-data.native.ts +103 -0
- package/assets/mds/src/services/local-data.ts +38 -0
- package/assets/mds/src/theme/font-assets.ts +3 -0
- package/assets/mds/src/theme/provider.tsx +59 -0
- package/assets/mds/src/theme/tokens.ts +180 -0
- package/dist/catalog.d.ts +3 -0
- package/dist/catalog.d.ts.map +1 -0
- package/dist/catalog.js +1110 -0
- package/dist/catalog.js.map +1 -0
- package/dist/index.d.ts +5 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +4 -0
- package/dist/index.js.map +1 -0
- package/dist/registry.d.ts +7 -0
- package/dist/registry.d.ts.map +1 -0
- package/dist/registry.js +479 -0
- package/dist/registry.js.map +1 -0
- package/dist/types.d.ts +169 -0
- package/dist/types.d.ts.map +1 -0
- package/dist/types.js +2 -0
- package/dist/types.js.map +1 -0
- package/dist/validation.d.ts +6 -0
- package/dist/validation.d.ts.map +1 -0
- package/dist/validation.js +209 -0
- package/dist/validation.js.map +1 -0
- package/package.json +51 -0
package/assets/create-expo-stack/2.21.3-mrdj.2/src/components/nativewindui/ProgressIndicator.tsx
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { View, type ViewProps } from 'react-native';
|
|
2
|
+
import Animated, {
|
|
3
|
+
Extrapolation,
|
|
4
|
+
interpolate,
|
|
5
|
+
useAnimatedStyle,
|
|
6
|
+
useDerivedValue,
|
|
7
|
+
withSpring,
|
|
8
|
+
} from 'react-native-reanimated';
|
|
9
|
+
|
|
10
|
+
import { cn } from '@/lib/cn';
|
|
11
|
+
|
|
12
|
+
const DEFAULT_MAX = 100;
|
|
13
|
+
|
|
14
|
+
function ProgressIndicator({
|
|
15
|
+
value: valueProp,
|
|
16
|
+
max: maxProp,
|
|
17
|
+
getValueLabel = defaultGetValueLabel,
|
|
18
|
+
className,
|
|
19
|
+
children,
|
|
20
|
+
...props
|
|
21
|
+
}: ViewProps & {
|
|
22
|
+
value?: number;
|
|
23
|
+
max?: number;
|
|
24
|
+
getValueLabel?: (value: number, max: number) => string;
|
|
25
|
+
}) {
|
|
26
|
+
const max = maxProp ?? DEFAULT_MAX;
|
|
27
|
+
const value = isValidValueNumber(valueProp, max) ? valueProp : 0;
|
|
28
|
+
const progress = useDerivedValue(() => value ?? 0);
|
|
29
|
+
|
|
30
|
+
const indicator = useAnimatedStyle(() => {
|
|
31
|
+
return {
|
|
32
|
+
width: withSpring(
|
|
33
|
+
`${interpolate(progress.value, [0, max], [1, 100], Extrapolation.CLAMP)}%`,
|
|
34
|
+
{ overshootClamping: true }
|
|
35
|
+
),
|
|
36
|
+
};
|
|
37
|
+
});
|
|
38
|
+
|
|
39
|
+
return (
|
|
40
|
+
<View
|
|
41
|
+
role="progressbar"
|
|
42
|
+
aria-valuemax={max}
|
|
43
|
+
aria-valuemin={0}
|
|
44
|
+
aria-valuenow={value}
|
|
45
|
+
aria-valuetext={getValueLabel(value, max)}
|
|
46
|
+
accessibilityValue={{
|
|
47
|
+
min: 0,
|
|
48
|
+
max,
|
|
49
|
+
now: value,
|
|
50
|
+
text: getValueLabel(value, max),
|
|
51
|
+
}}
|
|
52
|
+
className={cn('relative h-1 w-full overflow-hidden rounded-full', className)}
|
|
53
|
+
{...props}>
|
|
54
|
+
<View className="absolute bottom-0 left-0 right-0 top-0 bg-muted opacity-20" />
|
|
55
|
+
<Animated.View role="presentation" style={indicator} className={cn('h-full bg-primary')} />
|
|
56
|
+
</View>
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export { ProgressIndicator };
|
|
61
|
+
|
|
62
|
+
function defaultGetValueLabel(value: number, max: number) {
|
|
63
|
+
return `${Math.round((value / max) * 100)}%`;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
function isValidValueNumber(value: any, max: number): value is number {
|
|
67
|
+
return typeof value === 'number' && !isNaN(value) && value <= max && value >= 0;
|
|
68
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import RNSlider from '@react-native-community/slider';
|
|
2
|
+
import { Platform } from 'react-native';
|
|
3
|
+
|
|
4
|
+
import { useColorScheme } from '@/lib/useColorScheme';
|
|
5
|
+
import { COLORS } from '@/theme/colors';
|
|
6
|
+
|
|
7
|
+
function Slider({
|
|
8
|
+
thumbTintColor,
|
|
9
|
+
minimumTrackTintColor,
|
|
10
|
+
maximumTrackTintColor,
|
|
11
|
+
...props
|
|
12
|
+
}: React.ComponentProps<typeof RNSlider>) {
|
|
13
|
+
const { colors } = useColorScheme();
|
|
14
|
+
return (
|
|
15
|
+
<RNSlider
|
|
16
|
+
thumbTintColor={(thumbTintColor ?? Platform.OS === 'ios') ? COLORS.white : colors.primary}
|
|
17
|
+
minimumTrackTintColor={minimumTrackTintColor ?? colors.primary}
|
|
18
|
+
maximumTrackTintColor={
|
|
19
|
+
(maximumTrackTintColor ?? Platform.OS === 'android') ? colors.primary : undefined
|
|
20
|
+
}
|
|
21
|
+
minimumValue={0}
|
|
22
|
+
maximumValue={1}
|
|
23
|
+
{...props}
|
|
24
|
+
/>
|
|
25
|
+
);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { Slider };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
import { VariantProps, cva } from 'class-variance-authority';
|
|
2
|
+
import { cssInterop } from 'nativewind';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { UITextView } from 'react-native-uitextview';
|
|
5
|
+
|
|
6
|
+
import { cn } from '@/lib/cn';
|
|
7
|
+
|
|
8
|
+
cssInterop(UITextView, { className: 'style' });
|
|
9
|
+
|
|
10
|
+
const textVariants = cva('text-foreground', {
|
|
11
|
+
variants: {
|
|
12
|
+
variant: {
|
|
13
|
+
largeTitle: 'text-4xl',
|
|
14
|
+
title1: 'text-2xl',
|
|
15
|
+
title2: 'text-[22px] leading-7',
|
|
16
|
+
title3: 'text-xl',
|
|
17
|
+
heading: 'text-[17px] leading-6 font-semibold',
|
|
18
|
+
body: 'text-[17px] leading-6',
|
|
19
|
+
callout: 'text-base',
|
|
20
|
+
subhead: 'text-[15px] leading-6',
|
|
21
|
+
footnote: 'text-[13px] leading-5',
|
|
22
|
+
caption1: 'text-xs',
|
|
23
|
+
caption2: 'text-[11px] leading-4',
|
|
24
|
+
},
|
|
25
|
+
color: {
|
|
26
|
+
primary: '',
|
|
27
|
+
secondary: 'text-secondary-foreground/90',
|
|
28
|
+
tertiary: 'text-muted-foreground/90',
|
|
29
|
+
quarternary: 'text-muted-foreground/50',
|
|
30
|
+
},
|
|
31
|
+
},
|
|
32
|
+
defaultVariants: {
|
|
33
|
+
variant: 'body',
|
|
34
|
+
color: 'primary',
|
|
35
|
+
},
|
|
36
|
+
});
|
|
37
|
+
|
|
38
|
+
const TextClassContext = React.createContext<string | undefined>(undefined);
|
|
39
|
+
|
|
40
|
+
function Text({
|
|
41
|
+
className,
|
|
42
|
+
variant,
|
|
43
|
+
color,
|
|
44
|
+
...props
|
|
45
|
+
}: React.ComponentProps<typeof UITextView> & VariantProps<typeof textVariants>) {
|
|
46
|
+
const textClassName = React.useContext(TextClassContext);
|
|
47
|
+
return (
|
|
48
|
+
<UITextView
|
|
49
|
+
className={cn(textVariants({ variant, color }), textClassName, className)}
|
|
50
|
+
{...props}
|
|
51
|
+
/>
|
|
52
|
+
);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
export { Text, TextClassContext, textVariants };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { Pressable, View } from 'react-native';
|
|
2
|
+
import Animated, { LayoutAnimationConfig, ZoomInRotate } from 'react-native-reanimated';
|
|
3
|
+
|
|
4
|
+
import { Icon } from '@/components/nativewindui/Icon';
|
|
5
|
+
import { cn } from '@/lib/cn';
|
|
6
|
+
import { useColorScheme } from '@/lib/useColorScheme';
|
|
7
|
+
import { COLORS } from '@/theme/colors';
|
|
8
|
+
|
|
9
|
+
export function ThemeToggle() {
|
|
10
|
+
const { colorScheme, toggleColorScheme } = useColorScheme();
|
|
11
|
+
return (
|
|
12
|
+
<LayoutAnimationConfig skipEntering>
|
|
13
|
+
<Animated.View
|
|
14
|
+
className="items-center justify-center"
|
|
15
|
+
key={`toggle-${colorScheme}`}
|
|
16
|
+
entering={ZoomInRotate}>
|
|
17
|
+
<Pressable onPress={toggleColorScheme} className="opacity-80">
|
|
18
|
+
{colorScheme === 'dark'
|
|
19
|
+
? ({ pressed }) => (
|
|
20
|
+
<View className={cn('px-0.5', pressed && 'opacity-50')}>
|
|
21
|
+
<Icon name="moon.stars" color={COLORS.white} />
|
|
22
|
+
</View>
|
|
23
|
+
)
|
|
24
|
+
: ({ pressed }) => (
|
|
25
|
+
<View className={cn('px-0.5', pressed && 'opacity-50')}>
|
|
26
|
+
<Icon name="sun.min" color={COLORS.black} />
|
|
27
|
+
</View>
|
|
28
|
+
)}
|
|
29
|
+
</Pressable>
|
|
30
|
+
</Animated.View>
|
|
31
|
+
</LayoutAnimationConfig>
|
|
32
|
+
);
|
|
33
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { Switch } from 'react-native';
|
|
2
|
+
|
|
3
|
+
import { useColorScheme } from '@/lib/useColorScheme';
|
|
4
|
+
import { COLORS } from '@/theme/colors';
|
|
5
|
+
|
|
6
|
+
function Toggle(props: React.ComponentProps<typeof Switch>) {
|
|
7
|
+
const { colors } = useColorScheme();
|
|
8
|
+
return (
|
|
9
|
+
<Switch
|
|
10
|
+
trackColor={{
|
|
11
|
+
true: colors.primary,
|
|
12
|
+
false: colors.grey,
|
|
13
|
+
}}
|
|
14
|
+
thumbColor={COLORS.white}
|
|
15
|
+
{...props}
|
|
16
|
+
/>
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { Toggle };
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useColorScheme as useNativewindColorScheme } from 'nativewind';
|
|
2
|
+
|
|
3
|
+
import { COLORS } from '@/theme/colors';
|
|
4
|
+
|
|
5
|
+
function useColorScheme() {
|
|
6
|
+
const { colorScheme, setColorScheme } = useNativewindColorScheme();
|
|
7
|
+
|
|
8
|
+
function toggleColorScheme() {
|
|
9
|
+
return setColorScheme(colorScheme === 'light' ? 'dark' : 'light');
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
return {
|
|
13
|
+
colorScheme: colorScheme ?? 'light',
|
|
14
|
+
isDarkColorScheme: colorScheme === 'dark',
|
|
15
|
+
setColorScheme,
|
|
16
|
+
toggleColorScheme,
|
|
17
|
+
colors: COLORS[colorScheme ?? 'light'],
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export { useColorScheme };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useNavigation } from 'expo-router/react-navigation';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import type { SearchBarProps } from 'react-native-screens';
|
|
4
|
+
|
|
5
|
+
import { useColorScheme } from './useColorScheme';
|
|
6
|
+
|
|
7
|
+
function useHeaderSearchBar(props: SearchBarProps = {}) {
|
|
8
|
+
const { colorScheme, colors } = useColorScheme();
|
|
9
|
+
const navigation = useNavigation();
|
|
10
|
+
const [search, setSearch] = React.useState('');
|
|
11
|
+
|
|
12
|
+
React.useLayoutEffect(() => {
|
|
13
|
+
navigation.setOptions({
|
|
14
|
+
headerSearchBarOptions: {
|
|
15
|
+
placeholder: 'Search...',
|
|
16
|
+
textColor: colors.foreground,
|
|
17
|
+
tintColor: colors.primary,
|
|
18
|
+
headerIconColor: colors.foreground,
|
|
19
|
+
hintTextColor: colors.grey,
|
|
20
|
+
hideWhenScrolling: false,
|
|
21
|
+
onChangeText(event) {
|
|
22
|
+
setSearch(event.nativeEvent.text);
|
|
23
|
+
},
|
|
24
|
+
...props,
|
|
25
|
+
} satisfies SearchBarProps,
|
|
26
|
+
});
|
|
27
|
+
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
28
|
+
}, [navigation, colorScheme]);
|
|
29
|
+
|
|
30
|
+
return search;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
export { useHeaderSearchBar };
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
import { Platform } from 'react-native';
|
|
2
|
+
|
|
3
|
+
const IOS_SYSTEM_COLORS = {
|
|
4
|
+
white: 'rgb(255, 255, 255)',
|
|
5
|
+
black: 'rgb(0, 0, 0)',
|
|
6
|
+
light: {
|
|
7
|
+
grey6: 'rgb(242, 242, 247)',
|
|
8
|
+
grey5: 'rgb(230, 230, 235)',
|
|
9
|
+
grey4: 'rgb(210, 210, 215)',
|
|
10
|
+
grey3: 'rgb(199, 199, 204)',
|
|
11
|
+
grey2: 'rgb(175, 176, 180)',
|
|
12
|
+
grey: 'rgb(142, 142, 147)',
|
|
13
|
+
background: 'rgb(242, 242, 247)',
|
|
14
|
+
foreground: 'rgb(0, 0, 0)',
|
|
15
|
+
root: 'rgb(255, 255, 255)',
|
|
16
|
+
card: 'rgb(255, 255, 255)',
|
|
17
|
+
cardForeground: 'rgb(8, 28, 30)',
|
|
18
|
+
popover: 'rgb(230, 230, 235)',
|
|
19
|
+
popoverForeground: 'rgb(0, 0, 0)',
|
|
20
|
+
destructive: 'rgb(255, 56, 43)',
|
|
21
|
+
primary: 'rgb(0, 123, 254)',
|
|
22
|
+
primaryForeground: 'rgb(255, 255, 255)',
|
|
23
|
+
secondary: 'rgb(45, 175, 231)',
|
|
24
|
+
secondaryForeground: 'rgb(255, 255, 255)',
|
|
25
|
+
muted: 'rgb(175, 176, 180)',
|
|
26
|
+
mutedForeground: 'rgb(142, 142, 147)',
|
|
27
|
+
accent: 'rgb(255, 40, 84)',
|
|
28
|
+
accentForeground: 'rgb(255, 255, 255)',
|
|
29
|
+
border: 'rgb(230, 230, 235)',
|
|
30
|
+
input: 'rgb(210, 210, 215)',
|
|
31
|
+
ring: 'rgb(230, 230, 235)',
|
|
32
|
+
},
|
|
33
|
+
dark: {
|
|
34
|
+
grey6: 'rgb(21, 21, 24)',
|
|
35
|
+
grey5: 'rgb(40, 40, 42)',
|
|
36
|
+
grey4: 'rgb(55, 55, 57)',
|
|
37
|
+
grey3: 'rgb(70, 70, 73)',
|
|
38
|
+
grey2: 'rgb(99, 99, 102)',
|
|
39
|
+
grey: 'rgb(142, 142, 147)',
|
|
40
|
+
background: 'rgb(0, 0, 0)',
|
|
41
|
+
foreground: 'rgb(255, 255, 255)',
|
|
42
|
+
root: 'rgb(0, 0, 0)',
|
|
43
|
+
card: 'rgb(28, 28, 30)',
|
|
44
|
+
cardForeground: 'rgb(255, 255, 255)',
|
|
45
|
+
popover: 'rgb(40, 40, 42)',
|
|
46
|
+
popoverForeground: 'rgb(255, 255, 255)',
|
|
47
|
+
destructive: 'rgb(254, 67, 54)',
|
|
48
|
+
primary: 'rgb(3, 133, 255)',
|
|
49
|
+
primaryForeground: 'rgb(255, 255, 255)',
|
|
50
|
+
secondary: 'rgb(100, 211, 254)',
|
|
51
|
+
secondaryForeground: 'rgb(255, 255, 255)',
|
|
52
|
+
muted: 'rgb(70, 70, 73)',
|
|
53
|
+
mutedForeground: 'rgb(142, 142, 147)',
|
|
54
|
+
accent: 'rgb(255, 52, 95)',
|
|
55
|
+
accentForeground: 'rgb(255, 255, 255)',
|
|
56
|
+
border: 'rgb(40, 40, 42)',
|
|
57
|
+
input: 'rgb(55, 55, 57)',
|
|
58
|
+
ring: 'rgb(40, 40, 42)',
|
|
59
|
+
},
|
|
60
|
+
} as const;
|
|
61
|
+
|
|
62
|
+
const ANDROID_COLORS = {
|
|
63
|
+
white: 'rgb(255, 255, 255)',
|
|
64
|
+
black: 'rgb(0, 0, 0)',
|
|
65
|
+
light: {
|
|
66
|
+
grey6: 'rgb(249, 249, 255)',
|
|
67
|
+
grey5: 'rgb(215, 217, 228)',
|
|
68
|
+
grey4: 'rgb(193, 198, 215)',
|
|
69
|
+
grey3: 'rgb(113, 119, 134)',
|
|
70
|
+
grey2: 'rgb(65, 71, 84)',
|
|
71
|
+
grey: 'rgb(24, 28, 35)',
|
|
72
|
+
background: 'rgb(249, 249, 255)',
|
|
73
|
+
foreground: 'rgb(0, 0, 0)',
|
|
74
|
+
root: 'rgb(255, 255, 255)',
|
|
75
|
+
card: 'rgb(255, 255, 255)',
|
|
76
|
+
cardForeground: 'rgb(24, 28, 35)',
|
|
77
|
+
popover: 'rgb(215, 217, 228)',
|
|
78
|
+
popoverForeground: 'rgb(0, 0, 0)',
|
|
79
|
+
destructive: 'rgb(186, 26, 26)',
|
|
80
|
+
primary: 'rgb(0, 112, 233)',
|
|
81
|
+
primaryForeground: 'rgb(255, 255, 255)',
|
|
82
|
+
secondary: 'rgb(176, 201, 255)',
|
|
83
|
+
secondaryForeground: 'rgb(20, 55, 108)',
|
|
84
|
+
muted: 'rgb(193, 198, 215)',
|
|
85
|
+
mutedForeground: 'rgb(65, 71, 84)',
|
|
86
|
+
accent: 'rgb(169, 73, 204)',
|
|
87
|
+
accentForeground: 'rgb(255, 255, 255)',
|
|
88
|
+
border: 'rgb(215, 217, 228)',
|
|
89
|
+
input: 'rgb(210, 210, 215)',
|
|
90
|
+
ring: 'rgb(215, 217, 228)',
|
|
91
|
+
},
|
|
92
|
+
dark: {
|
|
93
|
+
grey6: 'rgb(16, 19, 27)',
|
|
94
|
+
grey5: 'rgb(39, 42, 50)',
|
|
95
|
+
grey4: 'rgb(49, 53, 61)',
|
|
96
|
+
grey3: 'rgb(54, 57, 66)',
|
|
97
|
+
grey2: 'rgb(139, 144, 160)',
|
|
98
|
+
grey: 'rgb(193, 198, 215)',
|
|
99
|
+
background: 'rgb(0, 0, 0)',
|
|
100
|
+
foreground: 'rgb(255, 255, 255)',
|
|
101
|
+
root: 'rgb(0, 0, 0)',
|
|
102
|
+
card: 'rgb(16, 19, 27)',
|
|
103
|
+
cardForeground: 'rgb(224, 226, 237)',
|
|
104
|
+
popover: 'rgb(39, 42, 50)',
|
|
105
|
+
popoverForeground: 'rgb(224, 226, 237)',
|
|
106
|
+
destructive: 'rgb(147, 0, 10)',
|
|
107
|
+
primary: 'rgb(3, 133, 255)',
|
|
108
|
+
primaryForeground: 'rgb(255, 255, 255)',
|
|
109
|
+
secondary: 'rgb(28, 60, 114)',
|
|
110
|
+
secondaryForeground: 'rgb(189, 209, 255)',
|
|
111
|
+
muted: 'rgb(216, 226, 255)',
|
|
112
|
+
mutedForeground: 'rgb(139, 144, 160)',
|
|
113
|
+
accent: 'rgb(83, 0, 111)',
|
|
114
|
+
accentForeground: 'rgb(238, 177, 255)',
|
|
115
|
+
border: 'rgb(39, 42, 50)',
|
|
116
|
+
input: 'rgb(55, 55, 57)',
|
|
117
|
+
ring: 'rgb(39, 42, 50)',
|
|
118
|
+
},
|
|
119
|
+
} as const;
|
|
120
|
+
|
|
121
|
+
const COLORS = Platform.OS === 'ios' ? IOS_SYSTEM_COLORS : ANDROID_COLORS;
|
|
122
|
+
|
|
123
|
+
export { COLORS };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { Theme, DefaultTheme, DarkTheme } from 'expo-router/react-navigation';
|
|
2
|
+
|
|
3
|
+
import { COLORS } from './colors';
|
|
4
|
+
|
|
5
|
+
const NAV_THEME: { light: Theme; dark: Theme } = {
|
|
6
|
+
light: {
|
|
7
|
+
dark: false,
|
|
8
|
+
colors: {
|
|
9
|
+
background: COLORS.light.background,
|
|
10
|
+
border: COLORS.light.grey5,
|
|
11
|
+
card: COLORS.light.card,
|
|
12
|
+
notification: COLORS.light.destructive,
|
|
13
|
+
primary: COLORS.light.primary,
|
|
14
|
+
text: COLORS.black,
|
|
15
|
+
},
|
|
16
|
+
fonts: DefaultTheme.fonts,
|
|
17
|
+
},
|
|
18
|
+
dark: {
|
|
19
|
+
dark: true,
|
|
20
|
+
colors: {
|
|
21
|
+
background: COLORS.dark.background,
|
|
22
|
+
border: COLORS.dark.grey5,
|
|
23
|
+
card: COLORS.dark.grey6,
|
|
24
|
+
notification: COLORS.dark.destructive,
|
|
25
|
+
primary: COLORS.dark.primary,
|
|
26
|
+
text: COLORS.white,
|
|
27
|
+
},
|
|
28
|
+
fonts: DarkTheme.fonts,
|
|
29
|
+
},
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { NAV_THEME };
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
export function withOpacity(color: string, opacity: number): string {
|
|
2
|
+
if (opacity < 0 || opacity > 1) {
|
|
3
|
+
throw new Error('Opacity should be between 0 and 1.');
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
// Detect the color format and delegate to the appropriate function
|
|
7
|
+
if (isNamedColor(color)) {
|
|
8
|
+
return withOpacityNamedColor(color, opacity);
|
|
9
|
+
} else if (color.startsWith('#')) {
|
|
10
|
+
return withOpacityHex(color, opacity);
|
|
11
|
+
} else if (color.startsWith('rgba')) {
|
|
12
|
+
return withOpacityRgba(color, opacity);
|
|
13
|
+
} else if (color.startsWith('rgb')) {
|
|
14
|
+
return withOpacityRgb(color, opacity);
|
|
15
|
+
} else if (color.startsWith('hsla')) {
|
|
16
|
+
return withOpacityHsla(color, opacity);
|
|
17
|
+
} else if (color.startsWith('hsl')) {
|
|
18
|
+
return withOpacityHsl(color, opacity);
|
|
19
|
+
} else {
|
|
20
|
+
throw new Error('Unsupported color format');
|
|
21
|
+
}
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
// Helper function for HEX colors
|
|
25
|
+
function withOpacityHex(hex: string, opacity: number): string {
|
|
26
|
+
const hexCode = hex.replace('#', '');
|
|
27
|
+
const expandedHex =
|
|
28
|
+
hexCode.length === 3
|
|
29
|
+
? hexCode
|
|
30
|
+
.split('')
|
|
31
|
+
.map((x) => x + x)
|
|
32
|
+
.join('')
|
|
33
|
+
: hexCode;
|
|
34
|
+
|
|
35
|
+
const r = parseInt(expandedHex.substr(0, 2), 16);
|
|
36
|
+
const g = parseInt(expandedHex.substr(2, 2), 16);
|
|
37
|
+
const b = parseInt(expandedHex.substr(4, 2), 16);
|
|
38
|
+
|
|
39
|
+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// Helper function for RGB colors
|
|
43
|
+
function withOpacityRgb(rgb: string, opacity: number): string {
|
|
44
|
+
const match = rgb.match(/^rgb\((\d+), (\d+), (\d+)\)$/);
|
|
45
|
+
if (!match) {
|
|
46
|
+
throw new Error('Invalid RGB color format');
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
const r = parseInt(match[1], 10);
|
|
50
|
+
const g = parseInt(match[2], 10);
|
|
51
|
+
const b = parseInt(match[3], 10);
|
|
52
|
+
|
|
53
|
+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
// Helper function for RGBA colors
|
|
57
|
+
function withOpacityRgba(rgba: string, opacity: number): string {
|
|
58
|
+
const match = rgba.match(/^rgba\((\d+), (\d+), (\d+), ([0-1]?(?:\.\d+)?)\)$/);
|
|
59
|
+
if (!match) {
|
|
60
|
+
throw new Error('Invalid RGBA color format');
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
const r = parseInt(match[1], 10);
|
|
64
|
+
const g = parseInt(match[2], 10);
|
|
65
|
+
const b = parseInt(match[3], 10);
|
|
66
|
+
|
|
67
|
+
return `rgba(${r}, ${g}, ${b}, ${opacity})`;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
// Helper function for HSL colors with opacity
|
|
71
|
+
function withOpacityHsl(hsl: string, opacity: number): string {
|
|
72
|
+
// Updated regex to handle space-separated HSL format with optional decimals
|
|
73
|
+
const match = hsl.match(/^hsl\((\d+(\.\d+)?)(?:\s+)(\d+(\.\d+)?)%\s+(\d+(\.\d+)?)%\)$/);
|
|
74
|
+
|
|
75
|
+
if (!match) {
|
|
76
|
+
throw new Error('Invalid HSL color format');
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
const h = match[1]; // Hue (can be an integer or decimal)
|
|
80
|
+
const s = match[3]; // Saturation (can be an integer or decimal)
|
|
81
|
+
const l = match[5]; // Lightness (can be an integer or decimal)
|
|
82
|
+
|
|
83
|
+
return `hsla(${h}, ${s}%, ${l}%, ${opacity})`;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Helper function for HSLA colors
|
|
87
|
+
function withOpacityHsla(hsla: string, opacity: number): string {
|
|
88
|
+
const match = hsla.match(/^hsla\((\d+), (\d+)%?, (\d+)%?, ([0-1]?(?:\.\d+)?)\)$/);
|
|
89
|
+
if (!match) {
|
|
90
|
+
throw new Error('Invalid HSLA color format');
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
const h = match[1];
|
|
94
|
+
const s = match[2];
|
|
95
|
+
const l = match[3];
|
|
96
|
+
|
|
97
|
+
return `hsla(${h}, ${s}%, ${l}%, ${opacity})`;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Helper function for named colors (basic implementation)
|
|
101
|
+
function isNamedColor(color: string): boolean {
|
|
102
|
+
const namedColors = new Set([
|
|
103
|
+
'red',
|
|
104
|
+
'green',
|
|
105
|
+
'blue',
|
|
106
|
+
'yellow',
|
|
107
|
+
'black',
|
|
108
|
+
'white',
|
|
109
|
+
'gray',
|
|
110
|
+
'orange',
|
|
111
|
+
'purple',
|
|
112
|
+
'brown',
|
|
113
|
+
'pink',
|
|
114
|
+
'cyan',
|
|
115
|
+
'magenta',
|
|
116
|
+
'lime',
|
|
117
|
+
'teal',
|
|
118
|
+
'indigo',
|
|
119
|
+
'violet',
|
|
120
|
+
'gold',
|
|
121
|
+
'silver',
|
|
122
|
+
]);
|
|
123
|
+
return namedColors.has(color.toLowerCase());
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
// Helper function for named color opacity
|
|
127
|
+
function withOpacityNamedColor(color: string, opacity: number): string {
|
|
128
|
+
return `rgba(${namedColorToRgb(color)}, ${opacity})`;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
// Converts a named color to RGB (simplified, basic colors only)
|
|
132
|
+
function namedColorToRgb(color: string): string {
|
|
133
|
+
const colors: { [key: string]: string } = {
|
|
134
|
+
red: '255, 0, 0',
|
|
135
|
+
green: '0, 255, 0',
|
|
136
|
+
blue: '0, 0, 255',
|
|
137
|
+
yellow: '255, 255, 0',
|
|
138
|
+
black: '0, 0, 0',
|
|
139
|
+
white: '255, 255, 255',
|
|
140
|
+
gray: '128, 128, 128',
|
|
141
|
+
orange: '255, 165, 0',
|
|
142
|
+
purple: '128, 0, 128',
|
|
143
|
+
brown: '165, 42, 42',
|
|
144
|
+
pink: '255, 192, 203',
|
|
145
|
+
cyan: '0, 255, 255',
|
|
146
|
+
magenta: '255, 0, 255',
|
|
147
|
+
lime: '0, 255, 0',
|
|
148
|
+
teal: '0, 128, 128',
|
|
149
|
+
indigo: '75, 0, 130',
|
|
150
|
+
violet: '238, 130, 238',
|
|
151
|
+
gold: '255, 215, 0',
|
|
152
|
+
silver: '192, 192, 192',
|
|
153
|
+
};
|
|
154
|
+
return colors[color.toLowerCase()] || '0, 0, 0'; // default to black if color is unknown
|
|
155
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/data-screen';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/exposition-screen';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/nativewindui-screen';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/expo-sdk-56-screen';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/stylist-screen';
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
import { existsSync } from 'node:fs';
|
|
3
|
+
import { readFile } from 'node:fs/promises';
|
|
4
|
+
import { createRequire } from 'node:module';
|
|
5
|
+
import path from 'node:path';
|
|
6
|
+
import { fileURLToPath } from 'node:url';
|
|
7
|
+
|
|
8
|
+
const projectRoot = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..');
|
|
9
|
+
const moduleCandidates = [
|
|
10
|
+
path.resolve(projectRoot, '..', '..', 'packages', 'cli', 'dist', 'stylist-theme.js'),
|
|
11
|
+
path.resolve(projectRoot, '..', 'packages', 'cli', 'dist', 'stylist-theme.js'),
|
|
12
|
+
path.resolve(projectRoot, 'packages', 'cli', 'dist', 'stylist-theme.js'),
|
|
13
|
+
path.resolve(projectRoot, 'node_modules', '@mr.dj2u', 'cli', 'dist', 'stylist-theme.js'),
|
|
14
|
+
];
|
|
15
|
+
|
|
16
|
+
try {
|
|
17
|
+
const modulePath = moduleCandidates.find((candidate) => existsSync(candidate));
|
|
18
|
+
if (!modulePath) {
|
|
19
|
+
console.error('Could not find @mr.dj2u/cli stylist sync module. Run npm install, then retry.');
|
|
20
|
+
process.exit(1);
|
|
21
|
+
}
|
|
22
|
+
const require = createRequire(import.meta.url);
|
|
23
|
+
const inputFile = process.env.MDS_STYLIST_INPUT_FILE
|
|
24
|
+
? path.resolve(projectRoot, process.env.MDS_STYLIST_INPUT_FILE)
|
|
25
|
+
: path.join(projectRoot, 'project', 'theme.json');
|
|
26
|
+
const styleLibrary = process.env.MDS_STYLIST_STYLE_LIBRARY || 'auto';
|
|
27
|
+
const writePolicy =
|
|
28
|
+
process.env.MDS_STYLIST_WRITE_POLICY === 'overwrite' ? 'overwrite' : 'managed';
|
|
29
|
+
const theme = JSON.parse(await readFile(inputFile, 'utf8'));
|
|
30
|
+
const loaded = require(modulePath);
|
|
31
|
+
const result = await loaded.syncStylistTheme(projectRoot, theme, {
|
|
32
|
+
styleLibrary,
|
|
33
|
+
writePolicy,
|
|
34
|
+
});
|
|
35
|
+
console.log(JSON.stringify(result, null, 2));
|
|
36
|
+
} catch (error) {
|
|
37
|
+
console.error(error instanceof Error ? error.message : String(error));
|
|
38
|
+
process.exit(1);
|
|
39
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/data-screen';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/exposition-screen';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/nativewindui-screen';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@/features/exposition/expo-sdk-56-screen';
|