@medway-ui/native 1.1.2 → 1.3.0

package/src/components/MemberRow.tsx

@@ -0,0 +1,157 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/Avatar";
+import { RadioGroupItem } from "@/components/RadioGroup";
+import { cn } from "@/lib/utils";
+
+const rankIndicatorVariants = cva("size-[22px] rounded-full", {
+  variants: {
+    rank: {
+      1: "bg-yellow-background-fill",
+      2: "bg-gray-background-fill",
+      3: "bg-warning-background-fill",
+    },
+  },
+  defaultVariants: {
+    rank: 1,
+  },
+});
+
+const memberRowVariants = cva("w-full flex-row items-center p-2", {
+  variants: {
+    variant: {
+      ranked: "",
+      selectable: "px-4 py-4",
+    },
+    highlighted: {
+      true: "rounded-md bg-secondary-background-soft",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    variant: "ranked",
+    highlighted: false,
+  },
+});
+
+interface MemberRowRankedProps extends ViewProps {
+  variant?: "ranked";
+  rank: 1 | 2 | 3;
+  rankLabel: string;
+  name: string;
+  subtitle?: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  avatarFallback?: string;
+  highlighted?: boolean;
+  leading?: ReactNode;
+  value?: never;
+}
+
+interface MemberRowSelectableProps extends ViewProps {
+  variant: "selectable";
+  value: string;
+  name: string;
+  avatarSrc?: string;
+  avatarAlt?: string;
+  avatarFallback?: string;
+  highlighted?: boolean;
+  rank?: never;
+  rankLabel?: never;
+  subtitle?: never;
+  leading?: never;
+}
+
+type MemberRowProps = MemberRowRankedProps | MemberRowSelectableProps;
+
+function getInitials(name: string): string {
+  return name
+    .trim()
+    .split(/\s+/)
+    .slice(0, 2)
+    .map((word) => word[0] ?? "")
+    .join("")
+    .toUpperCase();
+}
+
+function MemberRow({
+  className,
+  variant = "ranked",
+  rank = 1,
+  rankLabel,
+  name,
+  subtitle,
+  avatarSrc,
+  avatarAlt,
+  avatarFallback,
+  value,
+  highlighted = false,
+  leading,
+  ...props
+}: MemberRowProps) {
+  const initials = avatarFallback ?? getInitials(name);
+
+  if (variant === "selectable") {
+    const selectionValue = (props as MemberRowSelectableProps).value;
+
+    return (
+      <View
+        className={cn(memberRowVariants({ variant, highlighted }), className)}
+        {...props}
+      >
+        <View className="min-w-0 flex-1 flex-row items-center gap-4">
+          <RadioGroupItem value={selectionValue} size="md" />
+          <View className="min-w-0 flex-1 flex-row items-center gap-2">
+            <Avatar size="sm" alt={avatarAlt ?? name}>
+              {avatarSrc ? <AvatarImage src={avatarSrc} /> : null}
+              <AvatarFallback>{initials}</AvatarFallback>
+            </Avatar>
+            <Text className="text-md font-semibold text-primary-foreground">
+              {name}
+            </Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View
+      className={cn(memberRowVariants({ variant, highlighted }), className)}
+      {...props}
+    >
+      <View className="min-w-0 flex-1 flex-row items-center gap-2">
+        {leading}
+        <View className={cn(rankIndicatorVariants({ rank }))} />
+        <View className="flex-row items-center gap-2">
+          {rankLabel ? (
+            <Text className="w-7 text-md font-semibold text-primary-foreground">
+              {rankLabel}
+            </Text>
+          ) : null}
+          <Avatar size="sm" alt={avatarAlt ?? name}>
+            {avatarSrc ? <AvatarImage src={avatarSrc} /> : null}
+            <AvatarFallback>{initials}</AvatarFallback>
+          </Avatar>
+          <View>
+            <Text className="text-md font-semibold text-primary-foreground">
+              {name}
+            </Text>
+            {subtitle ? (
+              <Text className="text-xs font-medium text-primary-foreground">
+                {subtitle}
+              </Text>
+            ) : null}
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+}
+
+export { MemberRow, memberRowVariants, rankIndicatorVariants };
+export type { MemberRowProps };

package/src/components/PageHeader.tsx

@@ -1,5 +1,7 @@
 import { type ReactNode } from "react";
-import { Text, View, type ViewProps } from "react-native";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
 
 import { cn } from "@/lib/utils";
 

package/src/components/PostForm.tsx

@@ -0,0 +1,250 @@
+import { type ReactElement, type ReactNode } from "react";
+import { Pressable, TextInput, View, type PressableProps, type TextInputProps, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { Button } from "@/components/Button";
+import { Checkbox } from "@/components/Checkbox";
+import { Input, InputText, inputVariants } from "@/components/Input";
+import { cn } from "@/lib/utils";
+
+interface PostFormProps extends ViewProps {
+  children?: ReactNode;
+}
+
+interface PostFormHeaderProps extends ViewProps {
+  title: string;
+  submitLabel?: string;
+  onSubmitPress?: () => void;
+  submitLoading?: boolean;
+  submitDisabled?: boolean;
+}
+
+interface PostFormMediaPickerProps extends PressableProps {
+  icon?: ReactNode;
+  accessibilityLabel?: string;
+}
+
+interface PostFormDescriptionProps
+  extends Omit<TextInputProps, "value" | "defaultValue"> {
+  value?: string;
+  defaultValue?: string;
+  onChangeText?: (value: string) => void;
+  maxLength?: number;
+  placeholder?: string;
+}
+
+interface PostFormDateTimeFieldProps extends ViewProps {
+  label?: string;
+  value?: string;
+  placeholder?: string;
+  iconRight?: ReactElement<{ size?: number; strokeWidth?: number }>;
+  onPress?: () => void;
+}
+
+interface PostFormCheckboxOptionProps extends ViewProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  title: string;
+  description?: string;
+  disabled?: boolean;
+}
+
+function PostForm({ className, children, ...props }: PostFormProps) {
+  return (
+    <View className={cn("gap-6", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+function PostFormHeader({
+  className,
+  title,
+  submitLabel = "Publicar",
+  onSubmitPress,
+  submitLoading,
+  submitDisabled,
+  ...props
+}: PostFormHeaderProps) {
+  return (
+    <View
+      className={cn("flex-row items-center justify-between", className)}
+      {...props}
+    >
+      <Text className="text-title-xs font-semibold text-primary-foreground">
+        {title}
+      </Text>
+      {onSubmitPress ? (
+        <Button
+          variant="regular"
+          size="md"
+          onPress={onSubmitPress}
+          loading={submitLoading}
+          disabled={submitDisabled}
+        >
+          {submitLabel}
+        </Button>
+      ) : null}
+    </View>
+  );
+}
+
+function PostFormMediaPicker({
+  className,
+  icon,
+  accessibilityLabel = "Adicionar mídia",
+  ...props
+}: PostFormMediaPickerProps) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      className={cn(
+        "h-[162px] w-[138px] self-center items-center justify-center rounded-md border border-gray-stroke-muted bg-gray-stroke-muted",
+        className
+      )}
+      {...props}
+    >
+      <View className="items-center justify-center rounded-full bg-gray-background-soft p-2.5">
+        {icon}
+      </View>
+    </Pressable>
+  );
+}
+
+function PostFormDescription({
+  className,
+  value,
+  defaultValue,
+  onChangeText,
+  maxLength = 120,
+  placeholder = "Descrição (opcional)",
+  editable = true,
+  ...props
+}: PostFormDescriptionProps) {
+  const currentLength = (value ?? defaultValue ?? "").length;
+
+  return (
+    <View className={cn("gap-1", className)}>
+      <TextInput
+        multiline
+        textAlignVertical="top"
+        maxLength={maxLength}
+        value={value}
+        defaultValue={defaultValue}
+        onChangeText={onChangeText}
+        placeholder={placeholder}
+        editable={editable}
+        className={cn(
+          inputVariants({
+            size: "lg",
+            invalid: false,
+            focused: false,
+            disabled: !editable,
+          }),
+          "min-h-12 py-3 font-medium"
+        )}
+        accessibilityLabel={placeholder}
+        {...props}
+        style={[{ fontFamily: "MontserratMedium" }, props.style]}
+      />
+      <InputText className="text-right text-xs font-medium text-gray-foreground">
+        {currentLength} / {maxLength}
+      </InputText>
+    </View>
+  );
+}
+
+function PostFormDateTimeField({
+  className,
+  label,
+  value,
+  placeholder,
+  iconRight,
+  onPress,
+  ...props
+}: PostFormDateTimeFieldProps) {
+  return (
+    <View className={cn("gap-2", className)} {...props}>
+      {label ? (
+        <Text className="text-sm font-medium text-gray-foreground">{label}</Text>
+      ) : null}
+      <Pressable accessibilityRole="button" onPress={onPress} disabled={!onPress}>
+        <View pointerEvents="none">
+          <Input
+            size="lg"
+            value={value}
+            placeholder={placeholder}
+            iconRight={iconRight}
+            editable={false}
+          />
+        </View>
+      </Pressable>
+    </View>
+  );
+}
+
+function PostFormCheckboxOption({
+  className,
+  checked,
+  defaultChecked,
+  onCheckedChange,
+  title,
+  description,
+  disabled,
+  ...props
+}: PostFormCheckboxOptionProps) {
+  const isChecked = checked ?? defaultChecked ?? false;
+
+  const toggle = () => {
+    if (disabled) return;
+    onCheckedChange?.(!isChecked);
+  };
+
+  return (
+    <View
+      className={cn("flex-row items-start gap-3", disabled ? "opacity-50" : "", className)}
+      {...props}
+    >
+      <Checkbox
+        size="lg"
+        checked={checked}
+        defaultChecked={defaultChecked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+      />
+      <Pressable
+        accessibilityRole="button"
+        disabled={disabled}
+        onPress={toggle}
+        className="min-w-0 flex-1 gap-1 pb-2"
+      >
+        <Text className="text-md font-semibold text-gray-foreground">{title}</Text>
+        {description ? (
+          <Text className="text-xs font-medium text-gray-foreground">
+            {description}
+          </Text>
+        ) : null}
+      </Pressable>
+    </View>
+  );
+}
+
+export {
+  PostForm,
+  PostFormCheckboxOption,
+  PostFormDateTimeField,
+  PostFormDescription,
+  PostFormHeader,
+  PostFormMediaPicker,
+};
+export type {
+  PostFormCheckboxOptionProps,
+  PostFormDateTimeFieldProps,
+  PostFormDescriptionProps,
+  PostFormHeaderProps,
+  PostFormMediaPickerProps,
+  PostFormProps,
+};

package/src/components/PrizeCollection.tsx

@@ -0,0 +1,190 @@
+import { type ReactNode } from "react";
+import { Image, View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { cn } from "@/lib/utils";
+
+interface PrizeCollectionProps extends ViewProps {
+  title?: string;
+  statsTitle?: string;
+  children?: ReactNode;
+  footer?: ReactNode;
+}
+
+interface PrizeCollectionStatsProps extends ViewProps {
+  children?: ReactNode;
+}
+
+interface PrizeCollectionStatsItemProps extends ViewProps {
+  count: number | string;
+  rank: 1 | 2 | 3;
+}
+
+interface PrizeShelfProps extends ViewProps {
+  title?: string;
+  children?: ReactNode;
+}
+
+interface PrizeItemProps extends ViewProps {
+  imageSrc?: string;
+  image?: ReactNode;
+  dateLabel?: string;
+  isNew?: boolean;
+  locked?: boolean;
+}
+
+const rankColors: Record<1 | 2 | 3, string> = {
+  1: "bg-yellow-background-fill",
+  2: "bg-gray-background-fill",
+  3: "bg-warning-background-fill",
+};
+
+function PrizeCollection({
+  className,
+  title = "Sua coleção",
+  statsTitle = "Contagem de pódios",
+  children,
+  footer,
+  ...props
+}: PrizeCollectionProps) {
+  return (
+    <View className={cn("gap-3", className)} {...props}>
+      <Text className="text-title-xs font-semibold text-primary-foreground">
+        {title}
+      </Text>
+      <View className="gap-8">
+        <View className="gap-3 rounded-lg border border-gray-stroke-muted bg-surface-section p-4">
+          <Text className="text-center text-lg font-medium text-primary-foreground">
+            {statsTitle}
+          </Text>
+          {children}
+        </View>
+        {footer}
+      </View>
+    </View>
+  );
+}
+
+function PrizeCollectionStats({
+  className,
+  children,
+  ...props
+}: PrizeCollectionStatsProps) {
+  return (
+    <View
+      className={cn("flex-row items-center justify-center gap-4", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+function PrizeCollectionStatsItem({
+  className,
+  count,
+  rank,
+  ...props
+}: PrizeCollectionStatsItemProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center gap-2 rounded-pill bg-gray-background-soft-emphasis py-1 pl-4 pr-1",
+        className
+      )}
+      {...props}
+    >
+      <Text className="text-title-xs font-semibold text-primary-foreground">
+        {count}
+      </Text>
+      <View className={cn("size-8 rounded-full", rankColors[rank])} />
+    </View>
+  );
+}
+
+function PrizeShelf({
+  className,
+  title = "Prateleira de Prêmios",
+  children,
+  ...props
+}: PrizeShelfProps) {
+  return (
+    <View className={cn("gap-4", className)} {...props}>
+      <Text className="text-lg font-medium text-primary-foreground">
+        {title}
+      </Text>
+      <View className="gap-2">{children}</View>
+    </View>
+  );
+}
+
+function PrizeRow({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("flex-row items-start justify-between", className)}
+      {...props}
+    />
+  );
+}
+
+function PrizeItem({
+  className,
+  imageSrc,
+  image,
+  dateLabel,
+  isNew = false,
+  locked = false,
+  ...props
+}: PrizeItemProps) {
+  return (
+    <View
+      className={cn(
+        "relative w-[116px] items-center gap-1 rounded-lg px-4 py-2 shadow-sm",
+        locked ? "opacity-50" : "bg-surface-card",
+        className
+      )}
+      {...props}
+    >
+      {isNew ? (
+        <View className="absolute -right-1 -top-1 rounded-md bg-green-background-fill px-2 py-1">
+          <Text className="text-xs font-semibold text-green-foreground-onfill">
+            Novo
+          </Text>
+        </View>
+      ) : null}
+      {image ??
+        (imageSrc ? (
+          <Image
+            source={{ uri: imageSrc }}
+            className="h-[112px] w-[96px]"
+            resizeMode="contain"
+            accessibilityLabel={dateLabel ?? "Prêmio"}
+          />
+        ) : (
+          <View className="h-[112px] w-[96px] rounded-lg bg-gray-background-soft" />
+        ))}
+      {dateLabel ? (
+        <Text className="text-xs font-semibold text-gray-stroke-emphasis">
+          {dateLabel}
+        </Text>
+      ) : null}
+    </View>
+  );
+}
+
+export {
+  PrizeCollection,
+  PrizeCollectionStats,
+  PrizeCollectionStatsItem,
+  PrizeShelf,
+  PrizeRow,
+  PrizeItem,
+};
+export type {
+  PrizeCollectionProps,
+  PrizeCollectionStatsItemProps,
+  PrizeCollectionStatsProps,
+  PrizeItemProps,
+  PrizeShelfProps,
+};

package/src/components/RadioGroup.tsx

@@ -1,6 +1,7 @@
-import { View } from "react-native";
+import { View, type ViewProps } from "react-native";
 import * as RadioGroupPrimitive from "@rn-primitives/radio-group";
 import { cva, type VariantProps } from "class-variance-authority";
+import { type ReactNode } from "react";
 import { cn } from "@/lib/utils";
 
 interface RadioGroupItemProps
@@ -58,5 +59,33 @@ function RadioGroupItem({ className, size = "md", variant, ...props }: RadioGrou
   );
 }
 
-export { RadioGroup, RadioGroupItem, radioGroupVariants };
-export type { RadioGroupItemProps };
+interface RadioGroupListProps extends RadioGroupPrimitive.RootProps {
+  className?: string;
+  children?: ReactNode;
+}
+
+function RadioGroupList({ className, children, ...props }: RadioGroupListProps) {
+  return (
+    <RadioGroupPrimitive.Root className={cn("gap-0", className)} {...props}>
+      {children}
+    </RadioGroupPrimitive.Root>
+  );
+}
+
+function RadioGroupListItem({ className, ...props }: ViewProps) {
+  return (
+    <View
+      className={cn("border-b border-gray-stroke-muted py-2", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  RadioGroup,
+  RadioGroupItem,
+  RadioGroupList,
+  RadioGroupListItem,
+  radioGroupVariants,
+};
+export type { RadioGroupItemProps, RadioGroupListProps };

package/src/components/SectionHeader.tsx

@@ -0,0 +1,45 @@
+import { type ReactNode } from "react";
+import { View, type ViewProps } from "react-native";
+
+import { Text } from "@/components/Text";
+
+import { cn } from "@/lib/utils";
+
+interface SectionHeaderProps extends ViewProps {
+  title: string;
+  subtitle?: string | number;
+  /** Right-side actions (buttons, menus, etc.). */
+  trailing?: ReactNode;
+}
+
+function SectionHeader({
+  className,
+  title,
+  subtitle,
+  trailing,
+  ...props
+}: SectionHeaderProps) {
+  return (
+    <View
+      className={cn("flex-row items-center justify-between px-1", className)}
+      {...props}
+    >
+      <View className="min-w-0 flex-1 gap-0">
+        <Text className="text-title-xs font-semibold text-primary-foreground">
+          {title}
+        </Text>
+        {subtitle != null ? (
+          <Text className="text-sm font-medium leading-sm text-primary-foreground">
+            {subtitle}
+          </Text>
+        ) : null}
+      </View>
+      {trailing ? (
+        <View className="flex-row items-center gap-4">{trailing}</View>
+      ) : null}
+    </View>
+  );
+}
+
+export { SectionHeader };
+export type { SectionHeaderProps };