@navegarti/rn-design-system 0.2.0

package/src/components/OTPInput/index.tsx

@@ -0,0 +1,116 @@
+/** biome-ignore-all lint/suspicious/noExplicitAny: . */
+/** biome-ignore-all lint/suspicious/noArrayIndexKey: . */
+import { type ComponentProps, useEffect, useRef, useState } from 'react';
+import type { TextInputKeyPressEvent, TextInputProps } from 'react-native';
+
+import { Flex } from '../Flex';
+import { InputBox } from './styles';
+
+type OTPInputProps = {
+  length?: number;
+  defaultValue?: string;
+  onComplete: (code: string[]) => void;
+  hasError?: boolean;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  onlyNumbers?: boolean;
+  containerProps?: ComponentProps<typeof Flex>;
+} & Omit<TextInputProps, 'value' | 'onChangeText' | 'maxLength'>;
+
+export const OTPInput = ({
+  length = 6,
+  defaultValue = '',
+  onComplete,
+  hasError = false,
+  disabled = false,
+  autoFocus = false,
+  onlyNumbers = true,
+  containerProps,
+  ...props
+}: OTPInputProps) => {
+  const [otp, setOtp] = useState<string[]>(
+    Array(length)
+      .fill('')
+      .map((_, i) => defaultValue[i] || ''),
+  );
+  const [focusedIndex, setFocusedIndex] = useState<number | null>(
+    autoFocus ? 0 : null,
+  );
+  const inputRefs = useRef<any[]>([]);
+
+  const handleChangeText = (text: string, index: number) => {
+    if (disabled) return;
+
+    setOtp((prevOtp) => {
+      const newOtp = [...prevOtp];
+      newOtp[index] = text;
+
+      const newOtpLength = newOtp.join('').length;
+
+      if (newOtpLength === length) {
+        onComplete(newOtp);
+        inputRefs.current[index]?.blur();
+      }
+
+      return newOtp;
+    });
+
+    if (index < length - 1 && text) {
+      inputRefs.current[index + 1]?.focus();
+    }
+  };
+
+  const handleKeyPress = (e: TextInputKeyPressEvent, index: number) => {
+    if (e.nativeEvent.key === 'Backspace' && !otp[index] && index > 0) {
+      inputRefs.current[index - 1]?.focus();
+    }
+  };
+
+  const handleFocus = (index: number) => {
+    setFocusedIndex(index);
+  };
+
+  const handleBlur = () => {
+    setFocusedIndex(null);
+  };
+
+  useEffect(() => {
+    if (autoFocus && inputRefs.current[0]) {
+      inputRefs.current[0]?.focus();
+    }
+  }, [autoFocus]);
+
+  return (
+    <Flex
+      alignContent="center"
+      gap={8}
+      flexWrap="wrap"
+      flexDirection="row"
+      {...containerProps}
+    >
+      {Array.from({ length }).map((_, index) => (
+        <InputBox
+          key={index}
+          ref={(ref: any) => {
+            inputRefs.current[index] = ref;
+          }}
+          value={otp[index]}
+          onChangeText={(text) => handleChangeText(text, index)}
+          onKeyPress={(e) => handleKeyPress(e, index)}
+          onFocus={() => handleFocus(index)}
+          onBlur={handleBlur}
+          isFocused={focusedIndex === index}
+          hasError={hasError}
+          disabled={disabled}
+          hasValue={!!otp[index]}
+          keyboardType={onlyNumbers ? 'number-pad' : 'default'}
+          maxLength={1}
+          selectTextOnFocus
+          editable={!disabled}
+          cursorColor="#000"
+          {...props}
+        />
+      ))}
+    </Flex>
+  );
+};

package/src/components/OTPInput/styles.ts

@@ -0,0 +1,23 @@
+import styled from '@emotion/native';
+
+import { getInputBorderColor, getInputShadow } from './utils';
+
+export const InputBox = styled.TextInput<{
+  isFocused: boolean;
+  hasError?: boolean;
+  disabled?: boolean;
+  hasValue: boolean;
+}>(({ isFocused, hasError, disabled, hasValue }) => ({
+  width: 48,
+  height: 56,
+  borderWidth: isFocused || hasError ? 1.5 : 1,
+  borderColor: getInputBorderColor(!!hasError, isFocused, hasValue),
+  borderRadius: 8,
+  textAlign: 'center',
+  fontSize: 24,
+  fontWeight: '600',
+  color: disabled ? '#888' : '#000',
+  backgroundColor: disabled ? '#f2f2f2' : '#fff',
+
+  boxShadow: getInputShadow(!!hasError, isFocused),
+}));

package/src/components/OTPInput/utils.ts

@@ -0,0 +1,31 @@
+export const getInputBorderColor = (
+  hasError: boolean,
+  isFocused: boolean,
+  hasValue: boolean,
+) => {
+  if (hasError) {
+    return '#d13033';
+  }
+
+  if (isFocused) {
+    return 'rgb(0, 140, 255)';
+  }
+
+  if (hasValue) {
+    return '#666';
+  }
+
+  return '#ccc';
+};
+
+export const getInputShadow = (hasError: boolean, isFocused: boolean) => {
+  if (hasError) {
+    return '0px 0px 3px 0px rgba(255,0,0,0.5)';
+  }
+
+  if (isFocused) {
+    return '0px 0px 3px 0px rgba(0,4,255,0.5)';
+  }
+
+  return 'none';
+};

package/src/components/Padding/index.tsx

@@ -0,0 +1 @@
+export { Padding } from './styles';

package/src/components/Padding/styles.ts

@@ -0,0 +1,23 @@
+import styled from '@emotion/native';
+
+type PaddingTypes = {
+  insets: {
+    all?: number | 'auto';
+    block?: number | 'auto';
+    inline?: number | 'auto';
+    top?: number | 'auto';
+    right?: number | 'auto';
+    bottom?: number | 'auto';
+    left?: number | 'auto';
+  };
+};
+
+export const Padding = styled.View<PaddingTypes>(({ insets }) => ({
+  padding: insets.all,
+  paddingBlock: insets.block,
+  paddingInline: insets.inline,
+  paddingBottom: insets.bottom,
+  paddingLeft: insets.left,
+  paddingRight: insets.right,
+  paddingTop: insets.top,
+}));

package/src/components/Radio/components/radio-item.tsx

@@ -0,0 +1,53 @@
+import type { PropsWithChildren } from 'react';
+import { useContext } from 'react';
+import type { TouchableOpacityProps } from 'react-native';
+
+import { Text } from '../../Text';
+import { RadioContext } from '../context';
+import { RadioButton, RadioInner, RadioTouchable } from '../styles';
+
+type RadioItemProps = PropsWithChildren<{
+  value: string;
+}> &
+  Omit<TouchableOpacityProps, 'onPress'>;
+
+export const RadioItem = ({ value, children, ...props }: RadioItemProps) => {
+  const context = useContext(RadioContext);
+
+  if (!context) {
+    throw new Error('Radio.Item must be used within Radio.Group');
+  }
+
+  const { value: selectedValue, onChange, disabled, hasError } = context;
+  const isSelected = selectedValue === value;
+
+  const handlePress = () => {
+    if (!disabled) {
+      onChange(value);
+    }
+  };
+
+  return (
+    <RadioTouchable
+      onPress={handlePress}
+      disabled={disabled}
+      activeOpacity={0.8}
+      {...props}
+    >
+      <RadioButton
+        isSelected={isSelected}
+        hasError={!!hasError}
+        disabled={!!disabled}
+      >
+        <RadioInner isSelected={isSelected} disabled={!!disabled} />
+      </RadioButton>
+      <Text
+        size={14}
+        color={disabled ? '#888' : '#333'}
+        style={{ userSelect: 'none' }}
+      >
+        {children}
+      </Text>
+    </RadioTouchable>
+  );
+};

package/src/components/Radio/context.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+export type RadioContextType = {
+  value: string;
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  hasError?: boolean;
+};
+
+export const RadioContext = createContext<RadioContextType | null>(null);

package/src/components/Radio/index.tsx

@@ -0,0 +1,32 @@
+import type { PropsWithChildren } from 'react';
+
+import { Flex } from '../Flex';
+import { RadioItem } from './components/radio-item';
+import { RadioContext } from './context';
+
+type RadioGroupProps = PropsWithChildren<{
+  value: string;
+  onValueChange: (value: string) => void;
+  disabled?: boolean;
+  hasError?: boolean;
+}>;
+
+const RadioGroup = ({
+  value,
+  onValueChange,
+  disabled = false,
+  hasError = false,
+  children,
+}: RadioGroupProps) => {
+  return (
+    <RadioContext.Provider
+      value={{ value, onChange: onValueChange, disabled, hasError }}
+    >
+      <Flex gap={12}>{children}</Flex>
+    </RadioContext.Provider>
+  );
+};
+
+export const Radio = Object.assign(RadioGroup, {
+  Item: RadioItem,
+});

package/src/components/Radio/styles.ts

@@ -0,0 +1,38 @@
+import styled from '@emotion/native';
+
+import { getRadioBorderColor } from './utils';
+
+export const RadioButton = styled.View<{
+  isSelected: boolean;
+  hasError: boolean;
+  disabled: boolean;
+}>(({ isSelected, hasError, disabled }) => ({
+  width: 20,
+  height: 20,
+  borderRadius: 999,
+  borderWidth: 2,
+  borderColor: getRadioBorderColor(hasError, isSelected, disabled),
+  backgroundColor: disabled ? '#f2f2f2' : '#fff',
+  justifyContent: 'center',
+  alignItems: 'center',
+}));
+
+export const RadioInner = styled.View<{
+  isSelected: boolean;
+  disabled: boolean;
+}>(({ isSelected, disabled }) => ({
+  width: 10,
+  height: 10,
+  borderRadius: 99,
+  backgroundColor: isSelected
+    ? disabled
+      ? '#888'
+      : 'rgb(0, 140, 255)'
+    : 'transparent',
+}));
+
+export const RadioTouchable = styled.TouchableOpacity({
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 8,
+});

package/src/components/Radio/utils.ts

@@ -0,0 +1,19 @@
+export const getRadioBorderColor = (
+  hasError: boolean,
+  isSelected: boolean,
+  disabled: boolean,
+) => {
+  if (disabled) {
+    return '#ccc';
+  }
+
+  if (hasError) {
+    return '#d13033';
+  }
+
+  if (isSelected) {
+    return 'rgb(0, 140, 255)';
+  }
+
+  return '#ccc';
+};

package/src/components/Select/components/error-icon.tsx

@@ -0,0 +1,3 @@
+import { ErrorExclamation } from '../styles';
+
+export const ErrorIcon = () => <ErrorExclamation>!</ErrorExclamation>;

package/src/components/Select/components/select-error.tsx

@@ -0,0 +1,14 @@
+import type { TextProps } from 'react-native';
+
+import { useSelectContext } from '../context';
+import { SelectErrorText } from '../styles';
+
+export const SelectError = (props: TextProps) => {
+  const { hasError } = useSelectContext();
+
+  if (!hasError) {
+    return null;
+  }
+
+  return <SelectErrorText {...props} />;
+};

package/src/components/Select/components/select-field.tsx

@@ -0,0 +1,72 @@
+import type { PickerSelectProps } from 'react-native-picker-select';
+import RNPickerSelect from 'react-native-picker-select';
+
+import { useSelectContext } from '../context';
+import { ErrorIcon } from './error-icon';
+
+type FormSelectProps = PickerSelectProps;
+
+export const SelectField = ({
+  placeholder,
+  style,
+  disabled,
+  ...props
+}: FormSelectProps) => {
+  const { hasError } = useSelectContext();
+
+  const {
+    viewContainer,
+    inputIOSContainer,
+    inputIOS,
+    inputAndroid,
+    placeholder: stylePlaceholder,
+    ...rest
+  } = style || {};
+
+  return (
+    <RNPickerSelect
+      placeholder={{
+        label: placeholder ?? 'Selecione...',
+        value: '',
+      }}
+      Icon={hasError ? ErrorIcon : undefined}
+      style={{
+        viewContainer: {
+          backgroundColor: disabled ? '#f2f2f2' : '#fff',
+          borderWidth: hasError ? 1.5 : 1,
+          borderColor: hasError ? '#d13033' : '#cccccc',
+          borderRadius: 4,
+          boxShadow: hasError
+            ? '0px 0px 3px 0px rgba(255,0,0,0.5)'
+            : '2px 2px 0 2px rgba(0, 0, 0, 0.06) inset',
+          paddingLeft: 8,
+          ...viewContainer,
+        },
+        inputIOSContainer: {
+          zIndex: 99,
+          ...inputIOSContainer,
+        },
+        inputIOS: {
+          fontFamily: 'System',
+          minHeight: 42,
+          fontSize: 16,
+          color: '#000',
+          ...inputIOS,
+        },
+        inputAndroid: {
+          fontFamily: 'System',
+          minHeight: 42,
+          fontSize: 16,
+          ...inputAndroid,
+        },
+        placeholder: {
+          color: '#666666',
+          ...stylePlaceholder,
+        },
+        ...rest,
+      }}
+      disabled={disabled}
+      {...props}
+    />
+  );
+};

package/src/components/Select/context.tsx

@@ -0,0 +1,17 @@
+import { createContext, useContext } from 'react';
+
+type SelectContextType = {
+  hasError?: boolean;
+};
+
+export const SelectContext = createContext<SelectContextType | null>(null);
+
+export const useSelectContext = () => {
+  const context = useContext(SelectContext);
+
+  if (!context) {
+    throw new Error('Select components must be used within a Select.Root');
+  }
+
+  return context;
+};

package/src/components/Select/index.tsx

@@ -0,0 +1,24 @@
+import type { PropsWithChildren } from 'react';
+import { View } from 'react-native';
+
+import { SelectError } from './components/select-error';
+import { SelectField } from './components/select-field';
+import { SelectContext } from './context';
+
+type SelectRootProps = PropsWithChildren & {
+  hasError?: boolean;
+};
+
+const SelectRoot = ({ children, hasError }: SelectRootProps) => {
+  return (
+    <SelectContext.Provider value={{ hasError }}>
+      <View>{children}</View>
+    </SelectContext.Provider>
+  );
+};
+
+export const Select = {
+  Root: SelectRoot,
+  Field: SelectField,
+  Error: SelectError,
+};

package/src/components/Select/styles.ts

@@ -0,0 +1,15 @@
+import styled from '@emotion/native';
+
+import { Text } from '../Text';
+
+export const SelectErrorText = styled(Text)({
+  color: '#d13033',
+  marginTop: 4,
+});
+
+export const ErrorExclamation = styled(SelectErrorText)({
+  fontWeight: 'bold',
+  fontSize: 16,
+  marginRight: 48,
+  marginTop: 16,
+});

package/src/components/Skeleton/index.tsx

@@ -0,0 +1,60 @@
+import { type PropsWithChildren, useEffect, useRef } from 'react';
+import { Animated, type DimensionValue } from 'react-native';
+
+type SkeletonProps = {
+  width: DimensionValue;
+  height: DimensionValue;
+  radius?: number;
+  isLoading?: boolean;
+} & PropsWithChildren;
+
+export const Skeleton = ({
+  width,
+  height,
+  radius = 4,
+  isLoading = true,
+  children,
+}: SkeletonProps) => {
+  const opacity = useRef(new Animated.Value(0.3));
+
+  useEffect(() => {
+    const animation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(opacity.current, {
+          toValue: 1,
+          useNativeDriver: true,
+          duration: 500,
+        }),
+        Animated.timing(opacity.current, {
+          toValue: 0.3,
+          useNativeDriver: true,
+          duration: 800,
+        }),
+      ]),
+    );
+
+    if (isLoading) {
+      animation.start();
+    } else {
+      animation.stop();
+    }
+
+    return () => {
+      animation.stop();
+    };
+  }, [isLoading]);
+
+  if (!isLoading) return children;
+
+  return (
+    <Animated.View
+      style={{
+        opacity: opacity.current,
+        width,
+        height,
+        backgroundColor: '#d3d3d3',
+        borderRadius: radius,
+      }}
+    ></Animated.View>
+  );
+};

package/src/components/Switch/index.tsx

@@ -0,0 +1,61 @@
+import type { PropsWithChildren } from 'react';
+import { useEffect, useRef } from 'react';
+import { Animated, type TouchableOpacityProps } from 'react-native';
+
+import { Text } from '../Text';
+import { SwitchContainer, SwitchThumb, SwitchTrack } from './styles';
+
+type SwitchProps = PropsWithChildren<{
+  value: boolean;
+  onValueChange: (value: boolean) => void;
+  disabled?: boolean;
+  hasError?: boolean;
+}> &
+  Omit<TouchableOpacityProps, 'onPress'>;
+
+export const Switch = ({
+  value,
+  onValueChange,
+  disabled = false,
+  hasError = false,
+  children,
+  ...props
+}: SwitchProps) => {
+  const translateX = useRef(new Animated.Value(value ? 20 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(translateX, {
+      toValue: value ? 20 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [value, translateX]);
+
+  const handlePress = () => {
+    if (!disabled) {
+      onValueChange(!value);
+    }
+  };
+
+  return (
+    <SwitchContainer
+      onPress={handlePress}
+      disabled={disabled}
+      activeOpacity={0.8}
+      {...props}
+    >
+      <SwitchTrack value={value} disabled={disabled} hasError={hasError}>
+        <SwitchThumb style={{ transform: [{ translateX }] }} />
+      </SwitchTrack>
+      {children && (
+        <Text
+          size={14}
+          color={disabled ? '#888' : '#333'}
+          style={{ userSelect: 'none' }}
+        >
+          {children}
+        </Text>
+      )}
+    </SwitchContainer>
+  );
+};

package/src/components/Switch/styles.ts

@@ -0,0 +1,32 @@
+import styled from '@emotion/native';
+import { Animated } from 'react-native';
+
+import { getSwitchBackgroundColor } from './utils';
+
+export const SwitchContainer = styled.TouchableOpacity({
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: 12,
+});
+
+export const SwitchTrack = styled.View<{
+  value: boolean;
+  disabled: boolean;
+  hasError: boolean;
+}>(({ value, disabled, hasError }) => ({
+  width: 51,
+  height: 31,
+  borderRadius: 999,
+  backgroundColor: getSwitchBackgroundColor(value, disabled, hasError),
+  justifyContent: 'center',
+  padding: 2,
+}));
+
+export const SwitchThumb = styled(Animated.View)({
+  width: 27,
+  height: 27,
+  borderRadius: 999,
+  backgroundColor: '#fff',
+  boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.2)',
+  elevation: 2,
+});

package/src/components/Switch/utils.ts

@@ -0,0 +1,15 @@
+export const getSwitchBackgroundColor = (
+  value: boolean,
+  disabled: boolean,
+  hasError: boolean,
+) => {
+  if (disabled) {
+    return value ? '#b3d9ff' : '#e0e0e0';
+  }
+
+  if (hasError) {
+    return '#d13033';
+  }
+
+  return value ? 'rgb(0, 140, 255)' : '#ccc';
+};

package/src/components/Text/index.tsx

@@ -0,0 +1,2 @@
+export type { TextComponentProps, TextStyleProps } from './styles';
+export { Text } from './styles';