@space-uy/pulsar-ui 0.2.0

package/src/components/TextArea.tsx

@@ -0,0 +1,141 @@
+import {
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  TextInput,
+  StyleSheet,
+  type StyleProp,
+  type ViewStyle,
+  type TextInputProps,
+  type TextInputFocusEventData,
+  type NativeSyntheticEvent,
+  Platform,
+} from 'react-native';
+
+import InputContainer from './InputContainer';
+
+import useTheme from '../hooks/useTheme';
+
+import { convertHexToRgba } from '../utils/uiUtils';
+import Text from './Text';
+
+type Props = TextInputProps & {
+  style?: StyleProp<ViewStyle>;
+  error?: boolean;
+  label?: string;
+  hint?: string;
+  numberOfLines?: number;
+  maxLength?: number;
+  onChangeText?: (text: string) => void;
+};
+
+export type InputRef = { focus: () => void; blur: () => void };
+
+export const TextArea = forwardRef<InputRef, Props>(
+  (
+    {
+      style,
+      editable = true,
+      error,
+      label,
+      hint,
+      onBlur,
+      onFocus,
+      numberOfLines = 4,
+      maxLength = 1200,
+      onChangeText,
+      ...rest
+    },
+    ref
+  ) => {
+    const [focused, setFocused] = useState(false);
+    const { colors, theme } = useTheme();
+    const inputRef = useRef<TextInput>(null);
+
+    const value = useMemo(() => rest.value ?? '', [rest.value]);
+
+    useImperativeHandle(ref, () => ({
+      focus: () => inputRef.current?.focus(),
+      blur: () => inputRef.current?.blur(),
+    }));
+
+    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(true);
+      onFocus?.(e);
+    };
+
+    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setFocused(false);
+      onBlur?.(e);
+    };
+
+    const handleChangeText = (text: string) => {
+      if (maxLength && text.length > maxLength) return;
+      onChangeText?.(text);
+    };
+
+    return (
+      <InputContainer
+        style={style}
+        label={label}
+        hint={hint}
+        error={error}
+        onPress={() => inputRef.current?.focus()}
+        contentContainerStyle={styles.container}
+        focused={focused}
+        disabled={!editable}
+        height={numberOfLines * 22}
+      >
+        <TextInput
+          {...rest}
+          ref={inputRef}
+          style={[
+            styles.input,
+            {
+              fontFamily: theme.fonts.regular,
+              color: colors.foreground,
+              height: numberOfLines * 22,
+              // @ts-ignore
+              caretColor: colors.primary, // This to make the cursor color match the primary color on web
+            },
+            Platform.OS === 'web' && styles.webInput,
+          ]}
+          onFocus={handleFocus}
+          onBlur={handleBlur}
+          placeholderTextColor={convertHexToRgba(colors.foreground, 0.5)}
+          editable={editable}
+          numberOfLines={numberOfLines}
+          maxLength={maxLength}
+          textAlignVertical="top"
+          onChangeText={handleChangeText}
+          multiline
+          cursorColor={colors.primary}
+          selectionColor={convertHexToRgba(
+            colors.primary,
+            Platform.OS === 'android' ? 0.15 : 1
+          )}
+          selectionHandleColor={colors.primary}
+        />
+        <Text
+          variant="caption"
+          style={[styles.caption, { color: colors.foreground }]}
+        >
+          {`${value.length ?? 0} / ${maxLength}`}
+        </Text>
+      </InputContainer>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: { flexDirection: 'column' },
+  input: { flex: 1, fontSize: 14, width: '100%', marginVertical: 8 },
+  caption: { marginBottom: 6, alignSelf: 'flex-end' },
+  webInput: { outlineWidth: 0 } as ViewStyle, // To remove native focus outline on web
+});
+
+export default TextArea;

package/src/hooks/useTheme.tsx

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import themeStore from '../store/themeStore';
+
+const useUIKitTheme = () => {
+  const theme = themeStore((state) => state.theme);
+  const setTheme = themeStore((state) => state.setTheme);
+  const colorScheme = themeStore((state) => state.colorScheme);
+  const setColorScheme = themeStore((state) => state.setColorScheme);
+  const colors = themeStore((state) => state.colors);
+
+  return useMemo(
+    () => ({
+      theme,
+      setTheme,
+      colorScheme,
+      setColorScheme,
+      colors,
+    }),
+    [theme, setTheme, colorScheme, setColorScheme, colors]
+  );
+};
+
+export default useUIKitTheme;

package/src/index.tsx

@@ -0,0 +1,38 @@
+export { default as Button } from './components/Button';
+export { default as Tabs, type Tab } from './components/Tabs';
+export { default as Input } from './components/Input';
+export { default as Text } from './components/Text';
+export { default as Card } from './components/Card';
+export { default as Select, type SelectOption } from './components/Select';
+export { default as useUIKitTheme } from './hooks/useTheme';
+export type { Theme } from './store/themeStore';
+export { default as LoadingIndicator } from './components/LoadingIndicator';
+export { default as Checkbox } from './components/Checkbox';
+export { default as Chip } from './components/Chip';
+export { default as Icon, type IconName } from './components/Icon';
+export { default as IconButton } from './components/IconButton';
+export { default as Header } from './components/Header';
+export { default as Switch } from './components/Switch';
+export {
+  default as ButtonContainer,
+  ButtonVariant,
+  ButtonSize,
+} from './components/ButtonContainer';
+export { convertHexToRgba } from './utils/uiUtils';
+export { default as BottomSheet } from './components/BottomSheet';
+export { default as TextArea } from './components/TextArea';
+export { OtpInputContainer } from './components/OtpInputContainer';
+export { OtpInput } from './components/OtpInput';
+export { type OtpInputContainerRef } from './components/OtpInputContainer';
+export { default as CalendarPicker } from './components/CalendarPicker';
+export { default as Accordion, AccordionItem } from './components/Accordion';
+export { CopyToClipboard } from './components/CopyToClipboard';
+export {
+  default as Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  DialogAction,
+  DialogCancel,
+} from './components/Dialog';

package/src/store/themeStore.ts

@@ -0,0 +1,57 @@
+import { create } from 'zustand';
+import type { ColorSchemeName } from 'react-native';
+
+import { darkColors, lightColors, type ColorPalette } from '../theme/colors';
+
+type Theme = {
+  colors: { dark: ColorPalette; light: ColorPalette };
+  fonts: { light: string; regular: string; medium: string; bold: string };
+  roundness: number;
+  insets: { top: number; left: number; right: number; bottom: number };
+};
+
+const defaultTheme: Theme = {
+  colors: { dark: darkColors, light: lightColors },
+  fonts: {
+    light: 'Inter_300Light',
+    regular: 'Inter_400Regular',
+    medium: 'Inter_500Medium',
+    bold: 'Inter_700Bold',
+  },
+  roundness: 6,
+  insets: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+};
+
+type ThemeStore = {
+  theme: Theme;
+  colorScheme: ColorSchemeName;
+  colors: ColorPalette;
+  setTheme: (theme: Theme) => void;
+  setColorScheme: (colorScheme: ColorSchemeName) => void;
+};
+
+const themeStore = create<ThemeStore>((set, get) => ({
+  theme: defaultTheme,
+  colorScheme: 'light',
+  colors: lightColors,
+  setTheme: (theme: Theme) => {
+    const { colorScheme } = get();
+    const colors =
+      colorScheme === 'dark' ? theme.colors.dark : theme.colors.light;
+    set({ theme, colors });
+  },
+  setColorScheme: (colorScheme: ColorSchemeName) => {
+    const { theme } = get();
+    const colors =
+      colorScheme === 'dark' ? theme.colors.dark : theme.colors.light;
+    set({ colorScheme, colors });
+  },
+}));
+
+export type { Theme, ThemeStore };
+export default themeStore;

package/src/theme/colors.ts

@@ -0,0 +1,35 @@
+export type ColorPalette = {
+  primary: string;
+  foregroundOnPrimary: string;
+  background: string;
+  altBackground: string;
+  foreground: string;
+  altForeground: string;
+  destructive: string;
+  border: string;
+  foregroundOnDestructive: string;
+};
+
+export const darkColors: ColorPalette = {
+  primary: '#FAFAFA',
+  foregroundOnPrimary: '#09090B',
+  background: '#09090B',
+  altBackground: '#09090B',
+  foreground: '#FAFAFA',
+  altForeground: '#18181B',
+  border: '#27272A',
+  destructive: '#DC2626',
+  foregroundOnDestructive: '#FFFFFF',
+};
+
+export const lightColors: ColorPalette = {
+  primary: '#09090B',
+  foregroundOnPrimary: '#FFFFFF',
+  background: '#FFFFFF',
+  altBackground: '#FFFFFF',
+  foreground: '#09090B',
+  altForeground: '#FAFAFA',
+  border: '#E4E4E7',
+  destructive: '#DC2626',
+  foregroundOnDestructive: '#FFFFFF',
+};

package/src/theme/meassures.ts

@@ -0,0 +1,7 @@
+export default {
+  button: {
+    small: 24,
+    medium: 32,
+    large: 40,
+  },
+};

package/src/utils/stringUtils.ts

@@ -0,0 +1,16 @@
+/**
+ * Converts a date string in "yyyy-MM-dd" format to an ISO string
+ * @param dateString - Date string in "yyyy-MM-dd" format
+ * @returns ISO string representation of the date with time set to midnight
+ */
+export const convertDateToISOString = (dateString: string) => {
+  const dateArray = dateString.split('-').map(Number);
+  return new Date(
+    dateArray[0]!,
+    (dateArray[1]! - 1)!,
+    dateArray[2]!,
+    0,
+    0,
+    0
+  ).toISOString();
+};

package/src/utils/uiUtils.ts

@@ -0,0 +1,70 @@
+/**
+ * Converts a hex color code to an rgba color string with the specified opacity
+ * @param hex - The hex color code (e.g. '#FF0000')
+ * @param opacity - The opacity value between 0 and 1
+ * @returns An rgba color string (e.g. 'rgba(255,0,0,0.5)')
+ */
+export const convertHexToRgba = (hex: string, opacity: number): string => {
+  const tempHex = hex.replace('#', '');
+  const red = parseInt(tempHex.substring(0, 2), 16);
+  const green = parseInt(tempHex.substring(2, 4), 16);
+  const blue = parseInt(tempHex.substring(4, 6), 16);
+
+  return `rgba(${red},${green},${blue},${opacity})`;
+};
+
+/**
+ * Calculates the contrast ratio between two colors according to WCAG guidelines
+ * @param color1 - The first color in hex format (e.g. '#FF0000')
+ * @param color2 - The second color in hex format (e.g. '#FFFFFF')
+ * @returns The contrast ratio as a number (higher values indicate better contrast)
+ */
+export const getColorContrastRatio = (
+  color1: string,
+  color2: string
+): number => {
+  // Convert hex colors to RGB
+  const getRGB = (color: string): [number, number, number] => {
+    const hex = color.replace('#', '');
+    const r = parseInt(hex.substring(0, 2), 16);
+    const g = parseInt(hex.substring(2, 4), 16);
+    const b = parseInt(hex.substring(4, 6), 16);
+    return [r, g, b];
+  };
+
+  // Calculate relative luminance
+  const getRelativeLuminance = (r: number, g: number, b: number): number => {
+    const mappedValues = [r, g, b].map((c) => {
+      const s = c / 255;
+      return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
+    });
+    const [rs, gs, bs] = mappedValues as [number, number, number];
+    return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+  };
+
+  const [r1, g1, b1] = getRGB(color1);
+  const [r2, g2, b2] = getRGB(color2);
+
+  const l1 = getRelativeLuminance(r1, g1, b1);
+  const l2 = getRelativeLuminance(r2, g2, b2);
+
+  const lighter = Math.max(l1, l2);
+  const darker = Math.min(l1, l2);
+
+  return (lighter + 0.05) / (darker + 0.05);
+};
+
+/**
+ * Determines whether black or white text would be more readable on a given background color
+ * @param backgroundColor - The background color in hex format (e.g. '#FF0000')
+ * @returns Either 'black' or 'white' depending on which provides better contrast
+ */
+export const getAccessibleTextColor = (
+  backgroundColor: string
+): 'black' | 'white' => {
+  const blackContrast = getColorContrastRatio(backgroundColor, '#000000');
+  const whiteContrast = getColorContrastRatio(backgroundColor, '#FFFFFF');
+
+  // Return the color with higher contrast ratio
+  return blackContrast > whiteContrast ? 'black' : 'white';
+};