zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[ADD] LibCC ChromaCase:

Browse Source 
- IconButton and MusicItem creation and documentation
- Update native base theme
This commit is contained in:
mathysPaul
2023-11-02 21:14:38 +01:00
parent e499bb2f9f
commit d2e1ba51c6
18 changed files with 781 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
front/components/UI/ButtonBase.tsx
+6 -6
View File
@@ -38,28 +38,28 @@ const ButtonBase: React.FC<ButtonProps> = ({
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: colors.primary[400],
backgroundColor: colors.primary[300],
},
onHover: {
scale: 1.02,
shadowOpacity: 0.37,
shadowRadius: 7.49,
elevation: 12,
backgroundColor: colors.primary[500],
backgroundColor: colors.primary[400],
},
onPressed: {
scale: 0.98,
shadowOpacity: 0.23,
shadowRadius: 2.62,
elevation: 4,
backgroundColor: colors.primary[600],
backgroundColor: colors.primary[500],
},
Disabled: {
scale: 1,
shadowOpacity: 0.3,
shadowRadius: 4.65,
elevation: 8,
backgroundColor: colors.primary[400],
backgroundColor: colors.primary[300],
},
});
@@ -115,7 +115,7 @@ const ButtonBase: React.FC<ButtonProps> = ({
<ActivityIndicator
style={styles.content}
size="small"
color={type === 'outlined' ? '#6075F9' : '#FFFFFF'}
color={type === 'outlined' ? colors.primary[300] : '#FFFFFF'}
/>
) : (
<View
@@ -127,7 +127,7 @@ const ButtonBase: React.FC<ButtonProps> = ({
{icon && (
<MyIcon
size={'18'}
color={type === 'outlined' ? '#6075F9' : colorScheme === 'dark' || type === 'filled' ? '#FFFFFF' : colors.black[500] }
color={type === 'outlined' ? colors.primary[300] : colorScheme === 'dark' || type === 'filled' ? '#FFFFFF' : colors.black[500] }
variant={iconVariant}
/>
)}
front/components/UI/CheckboxBase.tsx
+2 -2
View File
@@ -56,13 +56,13 @@ const CheckboxBase: React.FC<CheckboxProps> = ({ title, color, style, check, set
{check ? (
<TickSquare
size="24"
color={color ?? colors.primary[400]}
color={color ?? colors.primary[300]}
variant="Bold"
/>
) : (
<AddSquare
size="24"
color={color ?? colors.primary[400]}
color={color ?? colors.primary[300]}
variant="Outline"
/>
)}
front/components/UI/IconButton.tsx
+259
View File
@@ -0,0 +1,259 @@
// Import required dependencies and components.
import { Icon } from "iconsax-react-native";
import { useRef, useState, useMemo } from "react";
import { Animated, StyleProp, TouchableOpacity, ViewStyle } from "react-native";
// Default values for the component props.
const DEFAULT_SCALE_FACTOR: number = 1.25;
const DEFAULT_ANIMATION_DURATION: number = 250;
const DEFAULT_PADDING: number = 0;
// Define the type for the IconButton props.
type IconButtonProps = {
/**
* Indicates if the button starts in an active state.
* @default false
*/
isActive?: boolean;
/**
* Color of the icon.
*/
color: string;
/**
* Optional color of the icon when active.
*/
colorActive?: string;
/**
* Callback function triggered when the button is pressed.
*/
onPress?: () => void | Promise<void>;
/**
* Size of the icon.
* @default 24
*/
size?: number;
/**
* Icon to display.
*/
icon: Icon;
/**
* Optional icon to display when active.
*/
iconActive?: Icon;
/**
* Variant style of the icon.
* @default "Outline"
*/
variant?: "Outline" | "Bold" | "Bulk" | "Broken" | "TwoTone";
/**
* Variant style of the icon when active.
* @default "Outline"
*/
activeVariant?: "Outline" | "Bold" | "Bulk" | "Broken" | "TwoTone";
/**
* Custom style for the icon.
*/
style?: ViewStyle | ViewStyle[];
/**
* Custom style for the icon's container.
*/
containerStyle?: ViewStyle | ViewStyle[];
/**
* Scale factor when the icon animates on press.
* @default 1.25
*/
scaleFactor?: number;
/**
* Duration of the icon animation in milliseconds.
* @default 250
*/
animationDuration?: number;
/**
* Padding around the icon.
* @default 0
*/
padding?: number;
};
/**
* `IconButton` Component
*
* Render an interactive icon that can toggle between active and inactive states.
* Supports customization of colors, icons, animation speed, size, and more.
*
* Features:
* - Can render two different icons for active and inactive states.
* - Includes an animation that scales the icon when pressed.
* - Supports custom styling for both the icon and its container.
* - Accepts various icon variants for flexibility in design.
*
* Usage:
*
* ```jsx
* <IconButton
* color="#000"
* icon={SomeIcon}
* onPress={() => console.log('Icon pressed!')}
* />
* ```
*
* To use with active states:
*
* ```jsx
* <IconButton
* isActive={true}
* color="#000"
* colorActive="#ff0000"
* icon={SomeIcon}
* iconActive={SomeActiveIcon}
* onPress={() => console.log('Icon toggled!')}
* />
* ```
*
* Note: If `iconActive` is provided but `colorActive` is not,
* the `color` prop will be used for both active and inactive states.
*/
const IconButton: React.FC<IconButtonProps> = ({
isActive = false,
color,
colorActive,
onPress,
size = 24,
icon: Icon,
iconActive: IconActive,
variant = "Outline",
activeVariant = "Outline",
style,
containerStyle,
scaleFactor = DEFAULT_SCALE_FACTOR,
animationDuration = DEFAULT_ANIMATION_DURATION,
padding = DEFAULT_PADDING,
}) => {
// State to track active status.
const [isActiveState, setIsActiveState] = useState<boolean>(isActive);
// Animation values.
const scaleValue: Animated.Value = useRef(new Animated.Value(1)).current;
const animateValue: Animated.Value = useRef(new Animated.Value(isActive ? 0 : 1)).current;
// Check for active icon.
const hasActiveIcon: boolean = !!IconActive;
// Interpolation for icon colors between active and inactive states.
const colorValue: Animated.AnimatedInterpolation<string | number> = animateValue.interpolate({
inputRange: [0, 1],
outputRange: [color, colorActive || color],
});
// Combine styles for the icon container.
const combinedContainerStyle: StyleProp<ViewStyle> = useMemo<(ViewStyle | ViewStyle[] | undefined)[]>(
() => [
{
position: 'relative',
// Adjust width and height to account for specified padding. Since the icons
// are absolutely positioned inside the container, the container's size needs
// to include the padding to ensure the icons are properly centered and spaced.
width: size + (padding * 2),
height: size + (padding * 2),
justifyContent: 'center',
alignItems: 'center',
},
containerStyle
],
[padding, containerStyle]
);
/**
* Toggles the active state of the icon.
* Executes the onPress callback and triggers the animation.
*/
const toggleState = async () => {
// Execute onPress if provided.
if (onPress) {
await onPress();
}
// Toggle isActiveState.
setIsActiveState(!isActiveState);
// Animation sequences.
const animations: Animated.CompositeAnimation[] = [
Animated.sequence([
Animated.timing(scaleValue, {
toValue: scaleFactor,
duration: animationDuration,
useNativeDriver: true,
}),
Animated.timing(scaleValue, {
toValue: 1,
duration: animationDuration,
useNativeDriver: true,
}),
]),
];
if (hasActiveIcon || colorActive) {
animations.push(
Animated.timing(animateValue, {
toValue: isActiveState ? 1 : 0,
duration: animationDuration,
useNativeDriver: true,
})
);
}
// Start animations in parallel.
Animated.parallel(animations).start();
};
return (
<TouchableOpacity
activeOpacity={1}
onPress={toggleState}
style={combinedContainerStyle}
>
{hasActiveIcon && (
<Animated.View
style={[{
padding: padding,
color: colorValue,
opacity: animateValue.interpolate({
inputRange: [0, 1],
outputRange: [1, 0],
}),
position: 'absolute',
transform: [{ scale: scaleValue }],
}, style]}
>
<IconActive size={size} variant={activeVariant}/>
</Animated.View>
)}
<Animated.View
style={[{
padding: padding,
color: colorValue,
opacity: animateValue,
position: 'absolute',
transform: [{ scale: scaleValue }],
}, style]}
>
<Icon size={size} variant={variant} />
</Animated.View>
</TouchableOpacity>
);
};
export default IconButton;
front/components/UI/InteractiveBase.tsx
+2 -2
View File
@@ -219,7 +219,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
};
const animatedStyle = {
backgroundColor: isOutlined ? colors.coolGray[200] : backgroundColorValue,
backgroundColor: isOutlined ? colors.coolGray[100] : backgroundColorValue,
borderColor: isOutlined ? backgroundColorValue : 'transparent',
borderWidth: 2,
transform: [{ scale: scaleValue }],
@@ -229,7 +229,7 @@ const InteractiveBase: React.FC<InteractiveBaseProps> = ({
};
const disableStyle = {
backgroundColor: isOutlined ? colors.coolGray[200] : styleAnimate.Disabled.backgroundColor,
backgroundColor: isOutlined ? colors.coolGray[100] : styleAnimate.Disabled.backgroundColor,
borderColor: isOutlined ? styleAnimate.Disabled.backgroundColor : 'transparent',
borderWidth: 2,
scale: styleAnimate.Disabled.scale,
front/components/UI/LinkBase.tsx
+1 -1
View File
@@ -63,7 +63,7 @@ const LinkBase: React.FC<LinkBaseProps> = ({ text, onPress }) => {
<Animated.View style={[
styles.underline,
{
backgroundColor: theme.colors.primary[400],
backgroundColor: theme.colors.primary[300],
height: underlineHeight,
opacity: opacity
}
front/components/UI/LogoutButtonCC.tsx
+1 -1
View File
@@ -39,7 +39,7 @@ const LogoutButtonCC = ({collapse = false, isGuest = false, buttonType = 'menu',
<ButtonBase
style={style}
icon={LogoutCurve}
title={collapse ? translate('signOutBtn') : undefined}
title={!collapse ? translate('signOutBtn') : undefined}
type={buttonType}
onPress={async () => {isGuest ? setIsVisible(true) : dispatch(unsetAccessToken());}}
/>
front/components/UI/MusicItem.tsx
+184
View File
@@ -0,0 +1,184 @@
import React, { useMemo, memo } from 'react';
import { StyleSheet } from 'react-native';
import { Column, HStack, Row, Stack, Text, useBreakpointValue, useTheme } from 'native-base';
import { HeartAdd, HeartRemove, Play } from 'iconsax-react-native';
import { Image } from 'react-native';
import IconButton from './IconButton';
import Spacer from '../../components/UI/Spacer';
import { useTranslation } from 'react-i18next';
/**
* Props for the MusicItem component.
*/
interface MusicItemProps {
/** The artist's name. */
artist: string;
/** The song's title. */
song: string;
/** The URL for the song's cover image. */
image: string;
/** The level of the song difficulty . */
level: number;
/** The last score achieved for this song. */
lastScore: number;
/** The highest score achieved for this song. */
bestScore: number;
/** Indicates whether the song is liked/favorited by the user. */
liked: boolean;
/** Callback function triggered when the like button is pressed. */
onLike: () => void;
/** Callback function triggered when the song is played. */
onPlay?: () => void;
}
// Custom hook to handle the number formatting based on the current user's language.
function useNumberFormatter() {
const { i18n } = useTranslation();
// Memoizing the number formatter to avoid unnecessary recalculations.
// It will be recreated only when the language changes.
const formatter = useMemo(() => {
return new Intl.NumberFormat(i18n.language, {
notation: "compact",
compactDisplay: "short"
});
}, [i18n.language]);
return (num: number) => formatter.format(num);
}
/**
* `MusicItem` Component
*
* Display individual music tracks with artist information, cover image, song title, and associated stats.
* Designed for optimal performance and responsiveness across different screen sizes.
*
* Features:
* - Displays artist name, song title, and track cover image.
* - Indicates user interaction with a like/favorite feature.
* - Provides a play button for user interaction.
* - Adapts its layout and design responsively according to screen size.
* - Optimized performance to ensure smooth rendering even in long lists.
* - Automatic number formatting based on user's language preference.
*
* Usage:
*
* ```jsx
* <MusicItem
* artist="John Doe"
* song="A Beautiful Song"
* image="https://example.com/image.jpg"
* level={5}
* lastScore={3200}
* bestScore={5000}
* liked={true}
* onLike={() => {() => console.log('Music liked!')}}
* onPlay={() => {() => console.log('Play music!')}
* />
* ```
*
* Note:
* - The number formatting for `level`, `lastScore`, and `bestScore` adapts automatically based on the user's language preference using the i18n module.
* - Given its optimized performance characteristics, this component is suitable for rendering in lists with potentially hundreds of items.
*/
const MusicItem: React.FC<MusicItemProps> = memo((props) => {
// Accessing theme colors and breakpoint values for responsive design
const { colors } = useTheme();
const screenSize = useBreakpointValue({ base: 'small', md: 'md', xl: 'xl' });
const formatNumber = useNumberFormatter();
// Styles are memoized to optimize performance.
const styles = useMemo(() => StyleSheet.create({
container: {
backgroundColor: colors.coolGray[500],
paddingRight: screenSize === 'small' ? 8 : 16,
},
playButtonContainer: {
zIndex: 1,
position: 'absolute',
right: -8,
bottom: -6,
},
playButton: {
backgroundColor: colors.primary[300],
borderRadius: 999,
},
image: {
position: 'relative',
width: screenSize === 'xl' ? 80 : 60,
height: screenSize === 'xl' ? 80 : 60,
},
artistText: {
color: colors.text[700],
fontWeight: "bold",
},
songContainer: {
width: '100%',
},
stats: {
display: 'flex',
flex: 1,
maxWidth: screenSize === 'xl' ? 150 : 50,
height: '100%',
alignItems: 'center',
justifyContent: screenSize === 'xl' ? 'flex-end' : 'center',
}
}), [colors, screenSize]);
// Memoizing formatted numbers to avoid unnecessary computations.
const formattedLevel = useMemo(() => formatNumber(props.level), [props.level]);
const formattedLastScore = useMemo(() => formatNumber(props.lastScore), [props.lastScore]);
const formattedBestScore = useMemo(() => formatNumber(props.bestScore), [props.bestScore]);
return (
<HStack space={screenSize === 'xl' ? 2 : 1} style={styles.container}>
<Stack style={{ position: 'relative', overflow: 'hidden' }}>
<IconButton
containerStyle={styles.playButtonContainer}
style={styles.playButton}
padding={8}
onPress={props.onPlay}
color='#FFF'
icon={Play}
variant="Bold"
size={24}
/>
<Image source={{ uri: props.image }} style={styles.image} />
</Stack>
<Column style={{ flex: 4, width: '100%', justifyContent: 'center' }}>
<Text numberOfLines={1} style={styles.artistText}>
{props.artist}
</Text>
{screenSize === 'xl' && <Spacer height='xs' />}
<Row space={2} style={styles.songContainer}>
<Text numberOfLines={1}>{props.song}</Text>
<IconButton
colorActive={colors.text[700]}
color={colors.primary[300]}
icon={HeartAdd}
iconActive={HeartRemove}
activeVariant="Bold"
size={screenSize === 'xl' ? 24 : 18}
isActive={props.liked}
onPress={props.onLike}
/>
</Row>
</Column>
{[formattedLevel, formattedLastScore, formattedBestScore].map((value, index) => (
<Text key={index} style={styles.stats}>
{value}
</Text>
))}
</HStack>
);
});
export default MusicItem;
front/components/UI/README.md
+93
View File
@@ -0,0 +1,93 @@
## IconButton
The `IconButton` is a responsive component displaying an interactive icon. It can toggle between active and inactive states, with customizable animations and styles for each state.
### Features:
- Toggle between active and inactive icons.
- Scale animation on press.
- Full customization of icon colors, sizes, and variants.
- Customizable styles for both the icon and its container.
### Preview
```jsx
<IconButton
color="#000"
icon={SomeIcon}
onPress={() => console.log('Icon pressed!')}
/>
```
With active states:
```jsx
<IconButton
isActive={true}
color="#000"
colorActive="#ff0000"
icon={SomeIcon}
iconActive={SomeActiveIcon}
onPress={() => console.log('Icon toggled!')}
/>
```
### Props
| Prop | Type | Description | Default Value |
|-------------------|--------------|----------------------------------------------------|----------------|
| isActive | boolean | Indicates if the button starts in an active state. | false |
| color | string | Color of the icon. | - |
| colorActive | string | Optional active state color for the icon. | Value of color |
| icon | Component | Icon to display. | - |
| iconActive | Component | Optional icon to display when active. | - |
| variant | string | Icon's variant style. | "Outline" |
| activeVariant | string | Icon's variant style when active. | "Outline" |
| size | number | Size of the icon. | 24 |
| scaleFactor | number | Scale factor for animation. | 1.25 |
| animationDuration | number | Animation duration in milliseconds. | 250 |
| padding | number | Padding around the icon. | 0 |
| onPress | function | Callback triggered on button press. | - |
| style | object/style | Custom style for the icon. | - |
| containerStyle | object/style | Custom style for the icon's container. | - |
## MusicItem
The MusicItem is a responsive component designed to display individual music tracks with key details and interactive buttons, adapting its layout and design across various screen sizes.
### Features:
- Displays artist name, song title, and track cover image.
- Provides interactivity through a play button and a like button.
- Indicates song difficulty level, last score, and best score with automatic number formatting based on user's language preference.
- Optimized for performance, ensuring smooth rendering even in extensive lists.
### Preview
```jsx
<MusicItem
artist="John Doe"
song="A Beautiful Song"
image="https://example.com/image.jpg"
level={5}
lastScore={3200}
bestScore={5000}
liked={true}
onLike={() => console.log('Music liked!')}
onPlay={() => console.log('Play music!')}
/>
```
### Props
| Prop | Type | Description | Default Value |
|-----------|----------|-------------------------------------------------------|---------------|
| artist | string | Artist's name. | - |
| song | string | Song's title. | - |
| image | string | URL for the song's cover image. | - |
| level | number | Level of the song difficulty. | - |
| lastScore | number | Last score achieved for this song. | - |
| bestScore | number | Highest score achieved for this song. | - |
| liked | boolean | Whether the song is liked/favorited by the user. | false |
| onLike | function | Callback triggered when the like button is pressed. | - |
| onPlay | function | Callback triggered when the song is played. Optional. | - |
front/components/UI/ScaffoldCC.tsx
+2 -1
View File
@@ -24,7 +24,7 @@ const menu: {
}[] = [
{ type: "main", title: 'menuDiscovery', icon: Discover, link: 'HomeNew' },
{ type: "main", title: 'menuProfile', icon: User, link: 'User' },
{ type: "main", title: 'menuMusic', icon: Music, link: 'Home' },
{ type: "main", title: 'menuMusic', icon: Music, link: 'Music' },
{ type: "main", title: 'menuSearch', icon: SearchNormal1, link: 'Search' },
{ type: "main", title: 'menuLeaderBoard', icon: Cup, link: 'Score' },
{ type: "sub", title: 'menuSettings', icon: Setting2, link: 'Settings' },
@@ -56,6 +56,7 @@ const ScaffoldCC = ({children, routeName, withPadding = true}: ScaffoldCCProps)
logo={logo}
routeName={routeName}
menu={menu}
widthPadding={withPadding}
>
{children}
</ScaffoldMobileCC>
front/components/UI/ScaffoldDesktopCC.tsx
+2 -3
View File
@@ -93,14 +93,13 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
}}
>
<View style={!isSmallScreen ? { width: '100%' } : {}}>
<Row space={2} flex={1} style={{ justifyContent: 'center' }}>
<Row space={2} flex={1} style={{ justifyContent: isSmallScreen ? 'center' : 'flex-start' }}>
<Image
source={{ uri: props.logo }}
style={{
aspectRatio: 1,
width: 32,
height: 32,
alignItems: isSmallScreen ? 'center' : 'flex-start',
}}
/>
{!isSmallScreen &&
@@ -171,7 +170,7 @@ const ScaffoldDesktopCC = (props: ScaffoldDesktopCCProps) => {
/>
))}
<Spacer height='xs'/>
<LogoutButtonCC collapse={!isSmallScreen} isGuest={props.user.isGuest} style={!isSmallScreen ? { width: '100%' } : {}} buttonType={'menu'}/>
<LogoutButtonCC collapse={isSmallScreen} isGuest={props.user.isGuest} style={!isSmallScreen ? { width: '100%' } : {}} buttonType={'menu'}/>
</View>
</View>
<ScrollView
front/components/UI/ScaffoldMobileCC.tsx
+4 -3
View File
@@ -12,6 +12,7 @@ type ScaffoldMobileCCProps = {
user: User;
logo: string;
routeName: string;
widthPadding: number;
menu: {
type: "main" | "sub";
title: string;
@@ -32,14 +33,14 @@ const ScaffoldMobileCC = (props: ScaffoldMobileCCProps) => {
<ScrollView
style={{
flex: 1,
maxHeight: '100vh',
maxHeight: '100%',
flexDirection: 'column',
flexShrink: 0,
padding: 16
padding: props.widthPadding ? 8 : 0
}}
contentContainerStyle={{ flex: 1 }}
>
<View style={{ flex: 1, minHeight: 'fit-content' }}>
<View style={{ flex: 1 }}>
{props.children}
</View>
<Spacer/>