@estuary-solutions/rn-core-ui 0.0.5 → 0.1.0

package/src/Accordion/Accordion.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Pressable, View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  LinearTransition,
+} from 'react-native-reanimated';
+
+import { AccordionProps } from './types/AccordionTypes';
+
+const Accordion: React.FC<AccordionProps> = ({
+  header,
+  children,
+  expanded,
+  defaultExpanded = false,
+  onChange,
+  style,
+  disabled,
+}) => {
+  const isControlled = expanded !== undefined;
+  const [internalExpanded, setInternalExpanded] =
+    React.useState(defaultExpanded);
+
+  const isExpanded = isControlled ? expanded : internalExpanded;
+
+  const toggle = React.useCallback(() => {
+    const next = !isExpanded;
+    if (!isControlled) {
+      setInternalExpanded(next);
+    }
+    onChange?.(next);
+  }, [isExpanded, isControlled, onChange]);
+
+  return (
+    <View style={style}>
+      <Pressable disabled={disabled} onPress={toggle}>
+        {header}
+      </Pressable>
+
+      {isExpanded && (
+        <Animated.View
+          entering={FadeIn}
+          exiting={FadeOut}
+          layout={LinearTransition.springify()}>
+          {children}
+        </Animated.View>
+      )}
+    </View>
+  );
+};
+
+Accordion.displayName = 'Accordion';
+
+export default Accordion;

package/src/Accordion/AccordionContext.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export interface AccordionLayoutContextValue {
+  requestRelayout: () => void;
+}
+
+export const AccordionLayoutContext =
+  React.createContext<AccordionLayoutContextValue | null>(null);
+
+export const useAccordionLayout = () =>
+  React.useContext(AccordionLayoutContext);

package/src/Accordion/AccordionGroup.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+
+import {
+  AccordionGroupContextValue,
+  AccordionGroupProps,
+  AccordionId,
+} from './types/AccordionTypes';
+
+const AccordionGroupContext =
+  React.createContext<AccordionGroupContextValue | null>(null);
+
+const AccordionGroup: React.FC<AccordionGroupProps> = ({
+  children,
+  type = 'single',
+  defaultOpenIds = [],
+}) => {
+  const [openIds, setOpenIds] = React.useState(() => new Set(defaultOpenIds));
+
+  const toggle = React.useCallback(
+    (id: AccordionId) => {
+      setOpenIds(prev => {
+        const next = new Set(prev);
+
+        if (type === 'single') {
+          next.clear();
+          if (!prev.has(id)) {
+            next.add(id);
+          }
+        } else {
+          next.has(id) ? next.delete(id) : next.add(id);
+        }
+
+        return next;
+      });
+    },
+    [type],
+  );
+
+  return (
+    <AccordionGroupContext.Provider value={{ openIds, toggle }}>
+      {children}
+    </AccordionGroupContext.Provider>
+  );
+};
+
+export const useAccordionGroup = () => {
+  const ctx = React.useContext(AccordionGroupContext);
+  if (!ctx) {
+    throw new Error('Accordion must be used inside AccordionGroup');
+  }
+  return ctx;
+};
+
+export const useOptionalAccordionGroup = () => {
+  return React.useContext(AccordionGroupContext);
+};
+
+export default AccordionGroup;

package/src/Accordion/AccordionItem.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import Accordion from './Accordion';
+import { useAccordionGroup } from './AccordionGroup';
+import { AccordionItemProps } from './types/AccordionTypes';
+
+const AccordionItem: React.FC<AccordionItemProps> = ({
+  id,
+  header,
+  children,
+  style,
+  disabled,
+  onChange,
+}) => {
+  const { openIds, toggle } = useAccordionGroup();
+
+  const expanded = openIds.has(id);
+
+  return (
+    <Accordion
+      header={header}
+      expanded={expanded}
+      onChange={ex => {
+        toggle(id);
+        onChange && onChange(ex);
+      }}
+      style={style}
+      disabled={disabled}>
+      {children}
+    </Accordion>
+  );
+};
+
+export default AccordionItem;

package/src/Accordion/AccordionTree.tsx

@@ -0,0 +1,7 @@
+import AccordionTreeWithGroup from './AccordionTreeWithGroup';
+
+const AccordionTree = AccordionTreeWithGroup;
+
+AccordionTree.displayName = 'AccordionTree';
+
+export default AccordionTree;

package/src/Accordion/AccordionTreeInternal.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { View } from 'react-native';
+
+import AccordionItem from './AccordionItem';
+import Text from '../Texts/Text';
+import {
+  AccordionNode,
+  AccordionTreeItemProps,
+  AccordionTreeProps,
+  AccordionTreeInternalProps,
+  AccordionId,
+} from './types/AccordionTypes';
+import AccordionGroup, { useOptionalAccordionGroup } from './AccordionGroup';
+
+const makeTreeId = (path: string): AccordionId => `accordion-node-${path}`;
+
+const AccordionTreeInternal: React.FC<
+  AccordionTreeInternalProps &
+    Pick<
+      AccordionTreeProps,
+      | 'type'
+      | 'style'
+      | 'itemStyle'
+      | 'itemTextStyle'
+      | 'renderItem'
+      | 'renderRootItem'
+      | 'onItemChange'
+    >
+> = ({
+  data,
+  path,
+  level,
+  type,
+  style,
+  itemStyle,
+  itemTextStyle,
+  renderItem,
+  renderRootItem,
+  onItemChange,
+}) => {
+  const group = useOptionalAccordionGroup();
+
+  const renderContent = (
+    item: AccordionNode,
+    nodeId: AccordionId,
+    isExpanded: boolean,
+    level: number,
+  ) => {
+    const props: AccordionTreeItemProps = { item, nodeId, isExpanded, level };
+
+    if (item?.label) {
+      return item?.label;
+    }
+
+    if (renderRootItem) {
+      return renderRootItem(props);
+    }
+
+    if (renderItem) {
+      return renderItem(props);
+    }
+
+    return (
+      <View style={itemStyle}>
+        <Text style={itemTextStyle}>{item.title}</Text>
+      </View>
+    );
+  };
+
+  return (
+    <View style={style}>
+      {data.map((item, index) => {
+        const currentPath = `${path}-${index}`;
+
+        const nodeId = item?.id ?? makeTreeId(currentPath);
+
+        const isExpanded = group?.openIds.has(nodeId) ?? false;
+
+        return (
+          <AccordionItem
+            key={nodeId}
+            id={nodeId}
+            header={renderContent(item, nodeId, isExpanded, level)}
+            disabled={item.disabled}
+            onChange={expanded => {
+              onItemChange?.(item, {
+                id: nodeId,
+                path: currentPath,
+                expanded,
+              });
+            }}>
+            {item.children?.length ? (
+              <AccordionGroup type={type}>
+                <AccordionTreeInternal
+                  data={item.children}
+                  path={currentPath}
+                  level={level + 1}
+                  type={type}
+                  itemStyle={itemStyle}
+                  itemTextStyle={itemTextStyle}
+                  renderItem={renderItem}
+                  onItemChange={onItemChange}
+                />
+              </AccordionGroup>
+            ) : null}
+          </AccordionItem>
+        );
+      })}
+    </View>
+  );
+};
+
+export default AccordionTreeInternal;

package/src/Accordion/AccordionTreeWithGroup.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import {
+  AccordionId,
+  AccordionNode,
+  AccordionTreeItemProps,
+  AccordionTreeProps,
+} from './types/AccordionTypes';
+import AccordionGroup, { useOptionalAccordionGroup } from './AccordionGroup';
+import AccordionTreeInternal from './AccordionTreeInternal';
+
+const AccordionTreeWithGroup: React.FC<
+  AccordionTreeProps & {
+    renderItem?: (params: AccordionTreeItemProps) => React.ReactNode;
+    renderRootItem?: (params: AccordionTreeItemProps) => React.ReactNode;
+  }
+> = props => {
+  const group = useOptionalAccordionGroup();
+
+  const collectDefaultOpenIds = (nodes: AccordionNode[], basePath = '0') => {
+    const ids: AccordionId[] = [];
+    if (!nodes || !nodes.length) {
+      return ids;
+    }
+
+    nodes.forEach((item, index) => {
+      const currentPath = `${basePath}-${index}`;
+      const nodeId = item?.id ?? `accordion-node-${currentPath}`;
+
+      if (item?.defaultExpanded) {
+        ids.push(nodeId);
+      }
+
+      if (item?.children?.length) {
+        ids.push(...collectDefaultOpenIds(item?.children, currentPath));
+      }
+    });
+
+    return ids;
+  };
+
+  if (group) {
+    return <AccordionTreeInternal {...props} level={0} path="0" />;
+  }
+
+  const defaultOpenIds = collectDefaultOpenIds(props.data);
+
+  return (
+    <AccordionGroup type={props.type} defaultOpenIds={defaultOpenIds}>
+      <AccordionTreeInternal {...props} level={0} path="0" />
+    </AccordionGroup>
+  );
+};
+
+export default AccordionTreeWithGroup;

package/src/Accordion/types/AccordionTypes.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { TextStyle, ViewStyle } from 'react-native';
+
+export type AccordionId = string | number;
+
+export type AccordionGroupType = 'single' | 'multiple';
+
+export interface AccordionProps {
+  header: React.ReactNode;
+  children: React.ReactNode;
+  expanded?: boolean;
+  defaultExpanded?: boolean;
+  onChange?: (expanded: boolean) => void;
+  style?: ViewStyle;
+  disabled?: boolean;
+}
+
+export interface AccordionNode {
+  id?: AccordionId;
+  title?: string;
+  label?: React.ReactNode;
+  disabled?: boolean;
+  defaultExpanded?: boolean;
+  children?: AccordionNode[];
+}
+
+export interface AccordionTreeProps extends AccordionTreeRenderProps {
+  type?: AccordionGroupType;
+  data: AccordionNode[];
+  style?: ViewStyle;
+  itemStyle?: ViewStyle;
+  itemTextStyle?: TextStyle;
+  onItemChange?: (
+    item: AccordionNode,
+    info: {
+      id: AccordionId;
+      path: string;
+      expanded: boolean;
+    },
+  ) => void;
+}
+
+export interface AccordionGroupContextValue {
+  openIds: Set<AccordionId>;
+  toggle: (id: AccordionId) => void;
+}
+
+export interface AccordionGroupProps {
+  children: React.ReactNode;
+  type?: AccordionGroupType;
+  defaultOpenIds?: AccordionId[];
+}
+
+export interface AccordionItemProps {
+  id: AccordionId;
+  header: React.ReactNode;
+  children: React.ReactNode;
+  onChange?: (expanded: boolean) => void;
+  style?: ViewStyle;
+  disabled?: boolean;
+}
+
+export interface AccordionTreeItemProps {
+  item: AccordionNode;
+  nodeId: AccordionId;
+  isExpanded: boolean;
+  level: number;
+}
+
+export interface AccordionTreeInternalProps {
+  data: AccordionNode[];
+  path: string;
+  level: number;
+}
+
+export interface AccordionTreeRenderProps {
+  renderItem?: (params: AccordionTreeItemProps) => React.ReactNode;
+  renderRootItem?: (params: AccordionTreeItemProps) => React.ReactNode;
+}

package/src/Avatars/Avatar.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import {
+  Image,
+  ImageSourcePropType,
+  ImageStyle,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import Icon from '../icons/Icon';
+import Text from '../Texts/Text';
+import { useTheme } from '../theme/useTheme';
+
+/** Variant catalogue shared with the Figma kit contract (figma/kit.json). */
+export const AVATAR_VARIANTS = ['circular', 'rounded', 'square'] as const;
+export type AvatarVariant = (typeof AVATAR_VARIANTS)[number];
+
+/** Props handed to `renderImage`; spread them onto any image component. */
+export interface AvatarImageProps {
+  source: ImageSourcePropType;
+  style: StyleProp<ImageStyle>;
+  resizeMode: 'cover';
+  onError: () => void;
+  accessibilityLabel?: string;
+}
+
+export interface AvatarProps {
+  source?: ImageSourcePropType;
+  size?: number;
+  variant?: AvatarVariant;
+  children?: React.ReactNode;
+  alt?: string;
+  style?: StyleProp<ViewStyle>;
+  imageStyle?: StyleProp<ImageStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  /** Fallback background; defaults to `color.brand.default`. */
+  backgroundColor?: string;
+  /** Fallback icon colour; defaults to `color.brand.onDefault`. */
+  iconColor?: string;
+  isFirstAlt?: boolean;
+  /**
+   * Replace the default react-native `Image` with another component
+   * (for example a cached image library). Receives ready-to-spread props.
+   */
+  renderImage?: (props: AvatarImageProps) => React.ReactNode;
+}
+
+const getAltLetter = (alt?: string, isFirstAlt = true) => {
+  if (!alt) {
+    return undefined;
+  }
+
+  const parts = alt.trim().split(/\s+/).filter(Boolean);
+
+  if (!parts.length) {
+    return undefined;
+  }
+
+  const word = isFirstAlt ? parts[0] : parts[parts.length - 1];
+  return word.charAt(0).toUpperCase();
+};
+
+const renderDefaultImage = (props: AvatarImageProps) => <Image {...props} />;
+
+const Avatar: React.FC<AvatarProps> = ({
+  source,
+  size = 40,
+  variant = 'circular',
+  children,
+  alt,
+  style,
+  imageStyle,
+  textStyle,
+  backgroundColor,
+  iconColor,
+  isFirstAlt = true,
+  renderImage = renderDefaultImage,
+}) => {
+  const theme = useTheme();
+  const [hasError, setHasError] = React.useState(false);
+
+  const altLetter = getAltLetter(alt, isFirstAlt);
+  const borderRadius =
+    variant === 'square'
+      ? 0
+      : variant === 'rounded'
+      ? theme.radius.md
+      : size / 2;
+  const showImage = source !== undefined && !hasError;
+  const fallbackBackground = backgroundColor ?? theme.color.brand.default;
+  const fallbackForeground = iconColor ?? theme.color.brand.onDefault;
+
+  const renderContent = () => {
+    if (showImage) {
+      return renderImage({
+        source,
+        style: [StyleSheet.absoluteFill, { borderRadius }, imageStyle],
+        resizeMode: 'cover',
+        onError: () => setHasError(true),
+        accessibilityLabel: alt,
+      });
+    }
+    if (children) {
+      return children;
+    }
+    if (altLetter) {
+      return (
+        <Text
+          variant="bodyLg"
+          semiBold
+          color={fallbackForeground}
+          style={textStyle}>
+          {altLetter}
+        </Text>
+      );
+    }
+    return <Icon name="user" color={fallbackForeground} size={size / 2} />;
+  };
+
+  return (
+    <View
+      style={[
+        styles.root,
+        {
+          width: size,
+          height: size,
+          borderRadius,
+          backgroundColor: showImage ? undefined : fallbackBackground,
+        },
+        style,
+      ]}>
+      {renderContent()}
+    </View>
+  );
+};
+
+Avatar.displayName = 'Avatar';
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'hidden',
+  },
+});
+
+export default Avatar;