codingpixel-expo-app 0.1.0

package/templates/base/src/core/utils/endpoints.ts

@@ -0,0 +1,29 @@
+const SOCKET_URL = "";
+
+const BASE_URL = `${SOCKET_URL}api/`;
+
+// placeholder — update when backend API is finalized
+const ENDPOINTS = {
+  LOGIN: "auth/login",
+  // Dashboard
+  DASHBOARD: "coach/dashboard",
+  // Teams
+  TEAMS: "coach/teams",
+  TEAM_DETAILS: (teamId: string) => `coach/teams/${teamId}`,
+  // Schedule
+  SCHEDULE: "coach/schedule",
+  // Messages
+  MESSAGES: "coach/messages",
+  MESSAGE_DETAILS: (messageId: string) => `coach/messages/${messageId}`,
+  DIRECT_CHAT: (chatId: string) => `chat/direct/${chatId}`,
+  TEAM_CHAT: (teamId: string) => `chat/team/${teamId}`,
+  // Payments
+  PAYMENTS: "coach/payments",
+  PAYMENTS_SUMMARY: "coach/payments/summary",
+  PAYMENT_PLAN: (planId: string) => `coach/payment-plans/${planId}`,
+  // Profile
+  PROFILE: "coach/profile",
+  CHANGE_PASSWORD: "coach/change-password",
+};
+
+export { BASE_URL, ENDPOINTS, SOCKET_URL };

package/templates/base/src/core/utils/types.ts

@@ -0,0 +1,47 @@
+export interface InsetsProps {
+  top?: number;
+  bottom?: number;
+  left?: number;
+  right?: number;
+}
+
+export type TeamNextEvent = {
+  id: string;
+  monthLabel: string;
+  dayLabel: string;
+  title: string;
+  timeAndLocationLabel: string;
+  kind: ScheduleEventKind;
+};
+
+export type TeamStatus = "active" | "inactive";
+export type ScheduleEventKind = "game" | "practice";
+
+export type Team = {
+  id: string;
+  name: string;
+  seasonLabel: string;
+  status: TeamStatus;
+  logoUri?: string;
+  playerCount: number;
+  coachCount: number;
+  eventCount: number;
+  nextEvent: TeamNextEvent | null;
+};
+
+export type ScheduleRow = {
+  id: string;
+  monthLabel: string;
+  dayLabel: string;
+  title: string;
+  timeAndLocationLabel: string;
+  kind: ScheduleEventKind;
+};
+
+export type PlayerTransaction = {
+  id: string;
+  invoiceNumber: string;
+  date: string;
+  amount: string;
+  status: "paid" | "unpaid";
+};

package/templates/base/src/core/utils/validation.ts

@@ -0,0 +1,10 @@
+// Deviation #6 (docs/MIRROR_NOTES.md): only loginValidationSchema per SPEC §6.
+import * as Yup from "yup";
+
+export const loginValidationSchema = Yup.object().shape({
+  email: Yup.string().email("Invalid email").required("Email is required"),
+  password: Yup.string()
+    .min(8, "Password must be at least 8 characters")
+    .required("Password is required"),
+  rememberMe: Yup.boolean(),
+});

package/templates/base/src/ui/appComponents/AppRefreshControl/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { ColorValue, RefreshControl } from 'react-native';
+
+interface AppRefreshControlProps {
+  refreshing: boolean;
+  onRefresh: () => void;
+  colors?: ColorValue[];
+  progressBackgroundColor?: string;
+  tintColor?: string;
+  progressViewOffset?: number;
+  size?: number;
+  enabled?: boolean;
+}
+
+const AppRefreshControl = ({
+  refreshing,
+  onRefresh,
+  colors,
+  progressBackgroundColor,
+  tintColor,
+  progressViewOffset,
+  size,
+  enabled,
+}: AppRefreshControlProps) => {
+  return (
+    <RefreshControl
+      refreshing={refreshing}
+      onRefresh={onRefresh}
+      colors={colors}
+      progressBackgroundColor={progressBackgroundColor}
+      tintColor={tintColor}
+      progressViewOffset={progressViewOffset}
+      size={size}
+      enabled={enabled}
+    />
+  );
+};
+
+export default AppRefreshControl;

package/templates/base/src/ui/appComponents/appButton/index.tsx

@@ -0,0 +1,122 @@
+import AppText from "@appComponents/appText";
+import { Colors } from "@theme/colors";
+import { Fonts } from "@theme/fonts";
+import { RF } from "@theme/responsive";
+import { InsetsProps } from "@utils/types";
+import React from "react";
+import AppColumnView from "../appColumnView";
+import AppPressable from "../appPressable";
+import AppRowView from "../appRowView";
+import { useSafeArea } from "../appSafeAreaInsets";
+import CustomActivityIndicator from "../customActivityIndicator";
+
+interface AppButtonProps extends Partial<
+  React.ComponentProps<typeof AppPressable>
+> {
+  title: string;
+  titleColor?: string;
+  titleSize?: number;
+  titleFontFamily?: string;
+  bgColor?: string;
+  customStyle?: any;
+  customContainerStyle?: any;
+  disabled?: boolean;
+  sticky?: boolean;
+  leftIcon?: React.ReactNode;
+  leftIconHeight?: number;
+  leftIconWidth?: number;
+  fill?: boolean;
+  iconColor?: string;
+  leftIconStyle?: any;
+  borderColor?: string;
+  isloading?: boolean;
+  titleStyle?: any;
+  noPaddingBottom?: boolean;
+  textCenter?: boolean;
+  secondary?: boolean;
+  emptyBtn?: boolean;
+  emptyBtnBorderColor?: string;
+  noRightIcon?: boolean;
+  rightIcon?: React.ReactNode;
+}
+
+const AppButton: React.FC<AppButtonProps> = ({
+  title,
+  onPress,
+  titleColor = Colors.WHITE,
+  titleFontFamily = Fonts.SEMI_BOLD,
+  titleSize = 16,
+  bgColor,
+  customStyle,
+  customContainerStyle,
+  disabled = false,
+  sticky,
+  fill,
+  leftIcon,
+  iconColor,
+  leftIconHeight = 20,
+  leftIconWidth = 20,
+  borderColor = Colors.BORDER,
+  isloading = false,
+  titleStyle,
+  noPaddingBottom,
+  textCenter,
+  noRightIcon = false,
+  rightIcon,
+  ...pressableProps
+}) => {
+  const insets = useSafeArea() as InsetsProps;
+
+  const buttonBgColor = bgColor ?? (disabled ? Colors.GRAY_1 : undefined);
+  const buttonBorderColor = borderColor || Colors.BORDER;
+
+  return (
+    <AppColumnView
+      flex={fill ? 1 : undefined}
+      style={customContainerStyle}
+      {...(sticky && {
+        position: "absolute",
+        bottom: noPaddingBottom ? 0 : insets.bottom,
+        left: 0,
+        right: 0,
+      })}
+    >
+      <AppPressable
+        onPress={onPress}
+        disabled={disabled || isloading}
+        alignItems="center"
+        justifyContent="center"
+        borderRadius={8}
+        backgroundColor={buttonBgColor}
+        borderWidth={borderColor ? RF(1) : 0}
+        borderColor={buttonBorderColor}
+        paddingVertical={16}
+        paddingHorizontal={24}
+        flexDirection="row"
+        style={customStyle}
+        {...pressableProps}
+      >
+        <AppRowView gap={8} paddingVertical={4} alignItems="center">
+          {leftIcon && <>{leftIcon}</>}
+
+          <AppText
+            fontFamily={titleFontFamily}
+            color={disabled ? Colors.GRAY_3 : titleColor}
+            size={titleSize}
+            center={textCenter}
+            style={titleStyle}
+          >
+            {title}
+          </AppText>
+          {isloading && (
+            <AppColumnView marginLeft={RF(8)}>
+              <CustomActivityIndicator size="small" color={Colors.WHITE} />
+            </AppColumnView>
+          )}
+        </AppRowView>
+      </AppPressable>
+    </AppColumnView>
+  );
+};
+
+export default AppButton;

package/templates/base/src/ui/appComponents/appColumnView/index.tsx

@@ -0,0 +1,320 @@
+import { RF } from '@theme/responsive';
+import React from 'react';
+import {
+  DimensionValue,
+  StyleProp,
+  View,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
+
+export type ColumnProps = ViewProps & {
+  children?: React.ReactNode;
+
+  padding?: number;
+  paddingHorizontal?: number;
+  paddingVertical?: number;
+  paddingTop?: number;
+  paddingBottom?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  paddingStart?: number;
+  paddingEnd?: number;
+
+  margin?: number;
+  marginHorizontal?: number;
+  marginVertical?: number;
+  marginTop?: number;
+  marginBottom?: number;
+  marginLeft?: number;
+  marginRight?: number;
+  marginStart?: number;
+  marginEnd?: number;
+
+  flex?: number;
+  flexGrow?: number;
+  flexShrink?: number;
+  flexBasis?: number | DimensionValue;
+  flexWrap?: ViewStyle['flexWrap'];
+  alignItems?: ViewStyle['alignItems'];
+  justifyContent?: ViewStyle['justifyContent'];
+  alignSelf?: ViewStyle['alignSelf'];
+  alignContent?: ViewStyle['alignContent'];
+
+  gap?: number;
+  rowGap?: number;
+
+  width?: number | DimensionValue;
+  height?: number | DimensionValue;
+  minWidth?: number | DimensionValue;
+  maxWidth?: number | DimensionValue;
+  minHeight?: number | DimensionValue;
+  maxHeight?: number | DimensionValue;
+  aspectRatio?: number;
+
+  position?: ViewStyle['position'];
+  top?: number | DimensionValue;
+  bottom?: number | DimensionValue;
+  left?: number | DimensionValue;
+  right?: number | DimensionValue;
+  start?: number | DimensionValue;
+  end?: number | DimensionValue;
+  zIndex?: number;
+
+  backgroundColor?: string;
+  opacity?: number;
+  overflow?: ViewStyle['overflow'];
+  display?: ViewStyle['display'];
+  direction?: ViewStyle['direction'];
+
+  borderRadius?: number;
+  borderTopLeftRadius?: number;
+  borderTopRightRadius?: number;
+  borderBottomLeftRadius?: number;
+  borderBottomRightRadius?: number;
+  borderStartRadius?: number;
+  borderEndRadius?: number;
+
+  borderWidth?: number;
+  borderTopWidth?: number;
+  borderBottomWidth?: number;
+  borderLeftWidth?: number;
+  borderRightWidth?: number;
+  borderStartWidth?: number;
+  borderEndWidth?: number;
+
+  borderColor?: string;
+  borderTopColor?: string;
+  borderBottomColor?: string;
+  borderLeftColor?: string;
+  borderRightColor?: string;
+  borderStartColor?: string;
+  borderEndColor?: string;
+  borderStyle?: ViewStyle['borderStyle'];
+
+  shadowColor?: string;
+  shadowOffset?: { width: number; height: number };
+  shadowOpacity?: number;
+  shadowRadius?: number;
+  elevation?: number;
+
+  transform?: ViewStyle['transform'];
+  backfaceVisibility?: ViewStyle['backfaceVisibility'];
+};
+
+const AppColumnView: React.FC<ColumnProps> = ({
+  children,
+  style,
+  padding,
+  paddingHorizontal,
+  paddingVertical,
+  paddingTop,
+  paddingBottom,
+  paddingLeft,
+  paddingRight,
+  paddingStart,
+  paddingEnd,
+  margin,
+  marginHorizontal,
+  marginVertical,
+  marginTop,
+  marginBottom,
+  marginLeft,
+  marginRight,
+  marginStart,
+  marginEnd,
+  flex,
+  flexGrow,
+  flexShrink,
+  flexBasis,
+  flexWrap,
+  alignItems,
+  justifyContent,
+  alignSelf,
+  alignContent,
+  rowGap,
+  gap,
+
+  width,
+  height,
+  minWidth,
+  maxWidth,
+  minHeight,
+  maxHeight,
+  aspectRatio,
+  position,
+  top,
+  bottom,
+  left,
+  right,
+  start,
+  end,
+  zIndex,
+  backgroundColor,
+  opacity,
+  overflow,
+  display,
+  direction,
+  borderRadius,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderStartRadius,
+  borderEndRadius,
+  borderWidth,
+  borderTopWidth,
+  borderBottomWidth,
+  borderLeftWidth,
+  borderRightWidth,
+  borderStartWidth,
+  borderEndWidth,
+  borderColor,
+  borderTopColor,
+  borderBottomColor,
+  borderLeftColor,
+  borderRightColor,
+  borderStartColor,
+  borderEndColor,
+  borderStyle,
+  shadowColor,
+  shadowOffset,
+  shadowOpacity,
+  shadowRadius,
+  elevation,
+  transform,
+  backfaceVisibility,
+  ...rest
+}) => {
+  const toDim = (v?: number | DimensionValue) =>
+    v === undefined
+      ? undefined
+      : typeof v === 'number'
+      ? (RF(v) as unknown as DimensionValue)
+      : v;
+
+  const customStyle: ViewStyle = {
+    flexDirection: 'column',
+
+    padding: padding !== undefined ? RF(padding) : undefined,
+    paddingHorizontal:
+      paddingHorizontal !== undefined ? RF(paddingHorizontal) : undefined,
+    paddingVertical:
+      paddingVertical !== undefined ? RF(paddingVertical) : undefined,
+    paddingTop: paddingTop !== undefined ? RF(paddingTop) : undefined,
+    paddingBottom: paddingBottom !== undefined ? RF(paddingBottom) : undefined,
+    paddingLeft: paddingLeft !== undefined ? RF(paddingLeft) : undefined,
+    paddingRight: paddingRight !== undefined ? RF(paddingRight) : undefined,
+    paddingStart: paddingStart !== undefined ? RF(paddingStart) : undefined,
+    paddingEnd: paddingEnd !== undefined ? RF(paddingEnd) : undefined,
+
+    margin: margin !== undefined ? RF(margin) : undefined,
+    marginHorizontal:
+      marginHorizontal !== undefined ? RF(marginHorizontal) : undefined,
+    marginVertical:
+      marginVertical !== undefined ? RF(marginVertical) : undefined,
+    marginTop: marginTop !== undefined ? RF(marginTop) : undefined,
+    marginBottom: marginBottom !== undefined ? RF(marginBottom) : undefined,
+    marginLeft: marginLeft !== undefined ? RF(marginLeft) : undefined,
+    marginRight: marginRight !== undefined ? RF(marginRight) : undefined,
+    marginStart: marginStart !== undefined ? RF(marginStart) : undefined,
+    marginEnd: marginEnd !== undefined ? RF(marginEnd) : undefined,
+
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis: flexBasis as any,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignSelf,
+    alignContent,
+
+    rowGap: rowGap !== undefined ? RF(rowGap) : undefined,
+    gap: gap !== undefined ? RF(gap) : undefined,
+
+    width: toDim(width),
+    height: toDim(height),
+    minWidth: toDim(minWidth),
+    maxWidth: toDim(maxWidth),
+    minHeight: toDim(minHeight),
+    maxHeight: toDim(maxHeight),
+    aspectRatio,
+
+    position,
+    top: toDim(top),
+    bottom: toDim(bottom),
+    left: toDim(left),
+    right: toDim(right),
+    start: toDim(start),
+    end: toDim(end),
+    zIndex,
+
+    backgroundColor,
+    opacity,
+    overflow,
+    display,
+    direction,
+
+    borderRadius: borderRadius !== undefined ? RF(borderRadius) : undefined,
+    borderTopLeftRadius:
+      borderTopLeftRadius !== undefined ? RF(borderTopLeftRadius) : undefined,
+    borderTopRightRadius:
+      borderTopRightRadius !== undefined ? RF(borderTopRightRadius) : undefined,
+    borderBottomLeftRadius:
+      borderBottomLeftRadius !== undefined
+        ? RF(borderBottomLeftRadius)
+        : undefined,
+    borderBottomRightRadius:
+      borderBottomRightRadius !== undefined
+        ? RF(borderBottomRightRadius)
+        : undefined,
+
+    borderWidth: borderWidth !== undefined ? RF(borderWidth) : undefined,
+    borderTopWidth:
+      borderTopWidth !== undefined ? RF(borderTopWidth) : undefined,
+    borderBottomWidth:
+      borderBottomWidth !== undefined ? RF(borderBottomWidth) : undefined,
+    borderLeftWidth:
+      borderLeftWidth !== undefined ? RF(borderLeftWidth) : undefined,
+    borderRightWidth:
+      borderRightWidth !== undefined ? RF(borderRightWidth) : undefined,
+    borderStartWidth:
+      borderStartWidth !== undefined ? RF(borderStartWidth) : undefined,
+    borderEndWidth:
+      borderEndWidth !== undefined ? RF(borderEndWidth) : undefined,
+
+    borderColor,
+    borderTopColor,
+    borderBottomColor,
+    borderLeftColor,
+    borderRightColor,
+    borderStartColor,
+    borderEndColor,
+    borderStyle,
+
+    shadowColor,
+    shadowOffset,
+    shadowOpacity,
+    shadowRadius,
+    elevation,
+
+    transform,
+    backfaceVisibility,
+  };
+
+  return (
+    <View
+      style={[
+        { flexDirection: 'row' },
+        customStyle,
+        style as StyleProp<ViewStyle>,
+      ]}
+      {...rest}
+    >
+      {children}
+    </View>
+  );
+};
+
+export default AppColumnView;