react-native-exp-fig 0.1.26 → 0.1.28

package/lib/typescript/src/components/selects/select-date-and-hours/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+declare const _default: React.ComponentType<import("react-native").TouchableOpacityProps & {
+    value: any;
+    icon: "CAMERA_PLUS" | "STEERING_WHEEL" | "CHECK_BOX_FILL" | "CHECK_BOX" | "CHECK_BOX_OUTLINE" | "MOON_STARS" | "CALL_BELL" | "STEERING_WHEEL_FILL" | "TROPHY" | "SHOPPING_CART" | "CREDIT_CARD" | "FILE_TEXT" | "TRUCK" | "PACKAGE_CHECK" | "PLUS" | "EYE_SLASH" | "EYE" | "CALENDAR" | "TIMER" | "GEAR" | "CURRENCY" | "GAUGE" | "GAS_PUMP" | "ARROW_LEFT" | "BLUETOOTH" | "BLUETOOTH_CONNECTED" | "LIST" | "WIFI_X" | "WIFI_HIGH" | "NOTE_PINCEL" | "CHECK_CIRCLE" | "ARROW_DROP_DOWN" | "CLOSED" | "LOADING" | "ACTIVITY" | "HISTORY" | "BELL" | "FILES" | "LIFEBUOY" | "RECUSED" | "EXCLAMATION_CIRCLE" | "X_CIRCLE" | "ELLIPSE" | "PENCIL" | "CAR" | "TRUCK_ACTIVITY" | "COFFEE" | "AGENT" | "CHECK_OUTLINE" | "BED" | "REFRESH_CCW_DOT" | "HOURGLASS" | "HOUSE" | "ISLAND" | "EXCLAMATION_TRIANGLE";
+    disabled?: boolean | undefined;
+    textColor?: string | undefined;
+    onPressConfirm: (value: any) => void;
+} & React.RefAttributes<any>>;
+export default _default;

package/lib/typescript/src/components/selects/select-date-and-hours/interface.d.ts

@@ -0,0 +1,21 @@
+/**
+ * IMPORTS
+ */
+import type { TouchableOpacityProps } from "react-native";
+import type { SVG_NAME } from "../../../common/icons-svg/constants";
+declare type IActivityFieldsProps<T> = TouchableOpacityProps & {
+    /** Valor exibido e retornado no onPressConfirm */
+    value: T | null;
+    /** Ícone à esquerda (padrão: 'CALENDAR') */
+    icon: keyof typeof SVG_NAME;
+    /** Desabilita interação */
+    disabled?: boolean;
+    /** Cor do texto (opcional) */
+    textColor?: string;
+    /** Clique confirma e devolve o value */
+    onPressConfirm: (value: T) => void;
+};
+/**
+ * EXPORTS
+ */
+export type { IActivityFieldsProps };

package/lib/typescript/src/components/selects/select-date-and-hours/styles.d.ts

@@ -0,0 +1,24 @@
+/**
+ * IMPORTS
+ */
+declare const styles: {
+    field: {
+        width: "100%";
+        height: number;
+        borderRadius: number;
+        borderWidth: number;
+        paddingHorizontal: number;
+        justifyContent: "center";
+        marginTop: number;
+        marginBottom: number;
+    };
+    row: {
+        flexDirection: "row";
+        alignItems: "center";
+        justifyContent: "space-around";
+    };
+};
+/**
+ * EXPORTS
+ */
+export { styles };

package/lib/typescript/src/components/selects/select-option/index.d.ts

@@ -2,12 +2,9 @@
  * IMPORTS
  */
 import React from "react";
-import { ISelectDropDownProps } from "./interface";
+import type { ISelectDropDownProps } from "./interface";
 /**
  * Componente SelectOption para a interação da  ui.
  */
-declare const SelectOption: React.FC<ISelectDropDownProps>;
-/**
- * EXPORTS
- */
-export { SelectOption };
+declare const _default: React.ComponentType<ISelectDropDownProps & React.RefAttributes<any>>;
+export default _default;

package/lib/typescript/src/index.d.ts

@@ -8,7 +8,7 @@ export { Typography } from "./components/typography";
 export { Input } from "./components/input";
 export { CapturePhoto } from "./components/capture-photo";
 export { CardHours } from "./components/card-hours";
-export { SelectOption } from "./components/selects/select-option";
+export { default as SelectOption } from "./components/selects/select-option";
 export { Header } from "./components/header-profile";
 export { ScheduledJourneyIndicators } from "./components/scheduled-journey-indicators";
 export { CardScheduledJourney } from "./components/card-scheduled-journey";
@@ -31,9 +31,14 @@ export { HistoryDetails } from "./components/history-details";
 export { ActivitiesDaily } from "./components/activities-daily";
 export { ActivitiesProgress } from "./components/activities-progress";
 export { ProfileMenuOption } from "./components/profile-menu-option";
-export { ModalActivities } from "./components/modal-activities";
+export { ModalActivities } from "./components/modals/modal-activities";
 export { HistoryActivitiesCard } from "./components/history-activities-card";
-export { ModalChangeActivity } from "./components/modal-change-activity";
+export { ModalChangeActivity } from "./components/modals/modal-change-activity";
+export { default as ModalActivityReason } from "./components/modals/modal-activity-reason";
+export { default as InputTextCounter } from "./components/input-text-counter";
+export { default as ModalCreteActivitie } from "./components/modal-create-activitie";
+export { default as ModalJourneyRectification } from "./components/modal-journey-rectification";
+export { default as ActivityTimeline } from "./components/activity-timeline";
 export { multiply } from "./utils/mutiply";
 export { formatDate, getLastSevenDays, formHoursMinute } from "./utils/format-data";
 export { theme } from "./styles/theme/theme";

package/lib/typescript/src/stories/activity-timeline/activity-timeline.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ActivityTimeline from "../../components/activity-timeline";
+declare const meta: Meta<typeof ActivityTimeline>;
+export default meta;
+declare type Story = StoryObj<typeof meta>;
+export declare const Padrao: Story;
+export declare const SemBadge: Story;
+export declare const ListaVazia: Story;

package/lib/typescript/src/stories/input-text-counter/input-text-counter.stories.d.ts

@@ -0,0 +1,17 @@
+import InputTextCounter from "../../components/input-text-counter";
+import type { Meta, StoryObj } from "@storybook/react";
+/**
+ * META
+ */
+declare const meta: Meta<typeof InputTextCounter>;
+export default meta;
+declare type Story = StoryObj<typeof meta>;
+/**
+ * STORIES
+ */
+export declare const InputDefault: Story;
+export declare const ComValorInicial: Story;
+export declare const PertoDoLimite: Story;
+export declare const Desabilitado: Story;
+export declare const ControladoInterativo: Story;
+export declare const PlaceholderOrientativo: Story;

package/lib/typescript/src/stories/modal-activities/modal-activities.stories.d.ts

@@ -1,5 +1,5 @@
 import { StoryObj, Meta } from "@storybook/react";
-import { ModalActivities } from "../../components/modal-activities";
+import { ModalActivities } from "../../components/modals/modal-activities";
 declare const meta: Meta<typeof ModalActivities>;
 export default meta;
 declare type Story = StoryObj<typeof meta>;

package/lib/typescript/src/stories/modal-activity-reason/modal-activity-reason.stories.d.ts

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ModalActivityReason from "../../components/modals/modal-activity-reason";
+/**
+ * META
+ */
+declare const meta: Meta<typeof ModalActivityReason>;
+export default meta;
+declare type Story = StoryObj<typeof meta>;
+/**
+ * STORIES
+ */
+export declare const AbertoBasico: Story;
+export declare const Fechado: Story;
+export declare const TituloPersonalizado: Story;
+export declare const ControladoInterativo: Story;

package/lib/typescript/src/stories/modal-change-activity/modal-change-activity.stories.d.ts

@@ -2,7 +2,7 @@
  * IMPORTS
  */
 import type { Meta, StoryObj } from "@storybook/react";
-import { ModalChangeActivity } from "../../components/modal-change-activity";
+import { ModalChangeActivity } from "../../components/modals/modal-change-activity";
 declare const meta: Meta<typeof ModalChangeActivity>;
 export default meta;
 declare type Story = StoryObj<typeof meta>;

package/lib/typescript/src/stories/modal-create-activitie/modal-create-activitie.stories.d.ts

@@ -0,0 +1,12 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ModalCreteActivitie from "../../components/modal-create-activitie";
+declare const meta: Meta<typeof ModalCreteActivitie>;
+export default meta;
+declare type Story = StoryObj<typeof ModalCreteActivitie>;
+/**
+ * Apenas controla via Controls (visible true/false no painel do Storybook).
+ * Evita Template com "args: any" e mantém tipagem estrita.
+ */
+export declare const Playground: Story;
+export declare const Fechado: Story;
+export declare const Aberto: Story;

package/lib/typescript/src/stories/modal-journey-rectification/modal-journey-rectification.stories.d.ts

@@ -0,0 +1,34 @@
+/**
+ * IMPORTS (Storybook)
+ */
+import type { Meta, StoryObj } from "@storybook/react";
+/**
+ * IMPORTS (Componente)
+ * Ajuste o caminho conforme sua estrutura (ex.: "../index" ou "./index").
+ */
+import ModalJourneyRectification from "../../components/modal-create-activitie";
+/**
+ * META
+ */
+declare const meta: Meta<typeof ModalJourneyRectification>;
+export default meta;
+/**
+ * STORIES
+ */
+declare type Story = StoryObj<typeof ModalJourneyRectification>;
+/**
+ * Estado padrão (fechado).
+ */
+export declare const Default: Story;
+/**
+ * Modal visível para inspeção visual.
+ */
+export declare const Opened: Story;
+/**
+ * Título customizado (ex.: para variações de copy).
+ */
+export declare const WithCustomTitle: Story;
+/**
+ * Playground — ajuste livre via Controls.
+ */
+export declare const Playground: Story;

package/lib/typescript/src/stories/select-option/select-option.stories.d.ts

@@ -1,5 +1,5 @@
 import type { StoryObj, Meta } from "@storybook/react";
-import { SelectOption } from "../../components/selects/select-option";
+import SelectOption from "../../components/selects/select-option";
 declare const meta: Meta<typeof SelectOption>;
 export default meta;
 declare type Story = StoryObj<typeof meta>;

package/lib/typescript/src/styles/global/theme-provider.d.ts

@@ -150,4 +150,20 @@ export declare const useTheme: () => {
         medium: number;
         strong: number;
     };
+    lineHeight: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
 };

package/lib/typescript/src/styles/theme/theme.d.ts

@@ -152,4 +152,20 @@ export declare const theme: {
         medium: number;
         strong: number;
     };
+    lineHeight: {
+        "2xs": number;
+        xs: number;
+        sm: number;
+        md: number;
+        lg: number;
+        xl: number;
+        "2xl": number;
+        "3xl": number;
+        "4xl": number;
+        "5xl": number;
+        "6xl": number;
+        "7xl": number;
+        "8xl": number;
+        "9xl": number;
+    };
 };

package/lib/typescript/src/utils/options-activity/index.d.ts

@@ -0,0 +1,20 @@
+/**
+ * IMPORTS
+ */
+declare const OPTIONS: readonly [{
+    readonly label: "Disp com veículo parado";
+    readonly value: "option1";
+}, {
+    readonly label: "Operação com veículo";
+    readonly value: "option2";
+}, {
+    readonly label: "Em carga";
+    readonly value: "option3";
+}, {
+    readonly label: "Em descarga";
+    readonly value: "option4";
+}];
+/**
+ * EXPORTS
+ */
+export { OPTIONS };

package/lib/typescript/src/utils/text-limit/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * IMPORTS
+ */
+interface ILimitProps {
+    text: string;
+    limit: number;
+}
+declare const handleLimitTextdisplayByAmount: ({ text, limit }: ILimitProps) => string;
+declare const handleLimitTextDate: ({ text, limit }: ILimitProps) => string;
+/**
+ * EXPORTS
+ */
+export { handleLimitTextdisplayByAmount, handleLimitTextDate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-exp-fig",
-  "version": "0.1.26",
+  "version": "0.1.28",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app da Expresso Figueiredo.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/activity-timeline/components/activite-row/index.tsx

@@ -0,0 +1,133 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useCallback } from "react";
+import { TouchableOpacity, View } from "react-native";
+
+// components
+import { Typography } from "../../../../components/typography";
+
+// commons / svg
+import { Icons } from "../../../../common/icons-svg";
+
+// typings
+import type { IActivitieRowProps } from "../../interface";
+import { asBaseComponent } from "../../../../@types/as-base-component";
+
+// styles
+import { theme } from "../../../../styles/theme/theme";
+import { styles } from "../../styles";
+
+/**
+ * Componente ActivityRows para a interação da ui.
+ */
+const ActivityRows = forwardRef<any, IActivitieRowProps<any>>(
+  ({ index, activities, items, onAdd, onEdit, onDelete }, ref): React.ReactElement => {
+    const handleAdd = useCallback(() => onAdd(activities), [onAdd, activities]);
+    const handleEdit = useCallback(() => onEdit(activities), [onEdit, activities]);
+    const handleDelete = useCallback(() => onDelete(activities), [onDelete, activities]);
+
+    const isInvalid = !!activities.invalid;
+
+    const dateText =
+      activities.date instanceof Date
+        ? `${String(activities.date.getDate()).padStart(2, "0")}/${String(
+            activities.date.getMonth() + 1
+          ).padStart(2, "0")}/${activities.date.getFullYear()}`
+        : String(activities.date ?? "");
+
+    const timeText =
+      activities.time instanceof Date
+        ? `${String(activities.time.getHours()).padStart(2, "0")}:${String(
+            activities.time.getMinutes()
+          ).padStart(2, "0")}`
+        : String(activities.time ?? "");
+
+    return (
+      <View ref={ref} style={styles.row}>
+        <View style={styles.badge}>
+          <Typography
+            text={String(index + 1)}
+            color={theme.colors.neutral[25]}
+            size={theme.fontSizes.sm}
+            fontFamily={theme.fonts.inter_bold_700}
+          />
+        </View>
+
+        {Boolean(index !== items?.length - 1) && (
+          <View
+            style={{
+              width: 2,
+              height: 76,
+              backgroundColor: theme.colors.blue[500],
+              position: "absolute",
+              left: 21,
+              top: 60,
+            }}
+          />
+        )}
+
+        <View style={styles.card}>
+          <Typography
+            numberOfLines={1}
+            style={styles.title}
+            text={activities.title ?? "Não informada"}
+            color={isInvalid ? theme.colors.red[900] : theme.colors.blue[500]}
+            size={14}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={34}
+          />
+
+          <View style={[styles.pill, isInvalid ? styles.pillInvalid : styles.pillOk]}>
+            <Icons
+              icon="CALENDAR"
+              size={18}
+              color={isInvalid ? theme.colors.red[900] : theme.colors.blue[500]}
+            />
+            <Typography
+              text={dateText}
+              color={isInvalid ? theme.colors.red[800] : theme.colors.blue[400]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_medium_500}
+            />
+            <Typography
+              text="|"
+              color={isInvalid ? theme.colors.red[800] : theme.colors.blue[400]}
+              size={theme.fontSizes.sm}
+              style={styles.sep}
+            />
+            <Typography
+              text={timeText}
+              color={isInvalid ? theme.colors.red[800] : theme.colors.blue[500]}
+              size={theme.fontSizes.xs}
+              fontFamily={theme.fonts.inter_medium_500}
+            />
+          </View>
+        </View>
+
+        <View style={styles.actions}>
+          <TouchableOpacity style={styles.iconButton} onPress={handleEdit} testID="edit-activity">
+            <Icons icon="NOTE_PINCEL" size={18} color={theme.colors.blue[350]} />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.iconButton} onPress={handleAdd} testID="add-after-activity">
+            {/* Não há PLUS_CONTAINER, usando PLUS como alternativa visual */}
+            <Icons icon="PLUS" size={18} color={theme.colors.green[500]} />
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.iconButton} onPress={handleDelete} testID="delete-activity">
+            {/* Não há TRASH, usando X_CIRCLE como alternativa de remover */}
+            <Icons icon="X_CIRCLE" size={18} color={theme.colors.red[900]} />
+          </TouchableOpacity>
+        </View>
+      </View>
+    );
+  }
+);
+
+ActivityRows.displayName = "ActivityRows";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ActivityRows);

package/src/components/activity-timeline/index.tsx

@@ -0,0 +1,72 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useCallback } from "react";
+import { View, FlatList } from "react-native";
+
+// components
+import ActivityRows from "./components/activite-row";
+
+// typings
+import type { ActivityItemModel, ActivityTimelineProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { styles, ROW_HEIGHT } from "./styles";
+
+/**
+ * Componente ActivityTimeline para a interação da ui.
+ */
+const ActivityTimeline = forwardRef<any, ActivityTimelineProps<any>>(
+  (
+    { data, onAdd, onEdit, onDelete, showIndexBadge = true, testID = "activity-timeline" },
+    ref
+  ): React.ReactElement => {
+    const keyExtractor = useCallback((it: ActivityItemModel) => String(it.id), []);
+
+    const renderItem = useCallback(
+      ({ item, index }: { item: ActivityItemModel; index: number }) => (
+        <ActivityRows
+          index={index}
+          items={data}
+          activities={item}
+          onAdd={onAdd}
+          onEdit={onEdit}
+          onDelete={onDelete}
+          showIndexBadge={showIndexBadge}
+        />
+      ),
+      [onAdd, onEdit, onDelete, showIndexBadge]
+    );
+
+    const getItemLayout = useCallback(
+      (_: any, index: number) => ({
+        length: ROW_HEIGHT,
+        offset: ROW_HEIGHT * index,
+        index,
+      }),
+      []
+    );
+    return (
+      <FlatList
+        ref={ref}
+        testID={testID}
+        data={data}
+        keyExtractor={keyExtractor}
+        renderItem={renderItem}
+        contentContainerStyle={styles.listContainer}
+        getItemLayout={getItemLayout}
+        initialNumToRender={10}
+        maxToRenderPerBatch={10}
+        removeClippedSubviews
+        windowSize={7}
+        ListEmptyComponent={<View style={{ height: 8 }} />}
+      />
+    );
+  }
+);
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(ActivityTimeline);

package/src/components/activity-timeline/interface.ts

@@ -0,0 +1,53 @@
+/**
+ * IMPORTS
+ */
+import type { TouchableOpacityProps } from "react-native";
+import type { SVG_NAME } from "../../common/icons-svg/constants";
+
+/**
+ * TYPES
+ */
+type ActivityId = string | number;
+
+type ActivityItemModel = {
+  id: ActivityId;
+  title: string; // "Operação com veículo", "Refeição", ...
+  date: Date | string; // pode vir Date ou string já formatada
+  time: Date | string; // idem
+  invalid?: boolean; // destaca em vermelho
+};
+
+type IconName = keyof typeof SVG_NAME;
+
+type OnActivity = (item: ActivityItemModel) => void;
+
+type ActivityTimelineProps<T> = TouchableOpacityProps & {
+  data: T[];
+  onAdd: OnActivity; // add novo após o item
+  onEdit: OnActivity;
+  onDelete: OnActivity;
+  showIndexBadge?: boolean; // mostra o “3/4/5”
+  testID?: string;
+};
+
+type IActivitieRowProps<T> = {
+  index: number;
+  activities: ActivityItemModel;
+  items: T[];
+  onAdd: OnActivity;
+  onEdit: OnActivity;
+  onDelete: OnActivity;
+  showIndexBadge?: boolean;
+};
+
+/**
+ * EXPORTS
+ */
+export type {
+  ActivityId,
+  ActivityItemModel,
+  IconName,
+  OnActivity,
+  ActivityTimelineProps,
+  IActivitieRowProps,
+};

package/src/components/activity-timeline/styles.ts

@@ -0,0 +1,69 @@
+/**
+ * IMPORTS
+ */
+import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme/theme";
+
+export const ROW_HEIGHT = 72;
+
+const styles = StyleSheet.create({
+  listContainer: { paddingVertical: 8 },
+  row: {
+    width: "100%",
+    minHeight: ROW_HEIGHT,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+  },
+  badge: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    backgroundColor: theme.colors.blue[500],
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  card: {
+    flex: 1,
+    borderRadius: 10,
+  },
+  title: { marginBottom: 6 },
+  pill: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+    gap: 4,
+  },
+  pillOk: {
+    backgroundColor: "#F3F3F5",
+    borderColor: "#C4D4E5",
+  },
+  pillInvalid: {
+    backgroundColor: "#FDE7E7",
+    borderColor: theme.colors.red[900],
+  },
+  sep: { marginHorizontal: 8, opacity: 0.5 },
+  actions: { flexDirection: "row", gap: 8 },
+  iconButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 8,
+    backgroundColor: theme.colors.neutral[25],
+    borderWidth: 1,
+    borderColor: theme.colors.neutral[200],
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 36,
+  },
+});
+
+/**
+ * EXPORTS
+ */
+export { styles };