react-native-exp-fig 0.1.27 → 0.1.28

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 };

package/src/index.ts

@@ -40,6 +40,7 @@ export { default as ModalActivityReason } from "./components/modals/modal-activi
 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";
 
 // Utilities
 export { multiply } from "./utils/mutiply";

package/src/stories/activity-timeline/activity-timeline.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import ActivityTimeline from "../../components/activity-timeline";
+
+import type { ActivityItemModel } from "../../components/activity-timeline/interface";
+
+const sampleData: ActivityItemModel[] = [
+  {
+    id: 1,
+    title: "Operação com veículo",
+    date: "24/03/2025",
+    time: "08:00",
+  },
+  {
+    id: 2,
+    title: "Refeição",
+    date: "24/03/2025",
+    time: "12:30",
+  },
+  {
+    id: 3,
+    title: "Aguardando carga",
+    date: "24/03/2025",
+    time: "14:00",
+    invalid: true,
+  },
+  {
+    id: 4,
+    title: "Descanso",
+    date: "24/03/2025",
+    time: "18:45",
+  },
+];
+
+const meta: Meta<typeof ActivityTimeline> = {
+  title: "componente/ActivityTimeline",
+  component: ActivityTimeline,
+  args: {
+    data: sampleData,
+    showIndexBadge: true,
+    onAdd: (item: ActivityItemModel) => console.log("onAdd", item),
+    onEdit: (item: ActivityItemModel) => console.log("onEdit", item),
+    onDelete: (item: ActivityItemModel) => console.log("onDelete", item),
+  },
+  parameters: {
+    notes: `
+# ActivityTimeline
+
+Lista de atividades com ações de adicionar, editar e excluir.
+
+Exemplo de uso:
+
+\`\`\`tsx
+<ActivityTimeline
+  data={data}
+  showIndexBadge
+  onAdd={(item) => console.log('onAdd', item)}
+  onEdit={(item) => console.log('onEdit', item)}
+  onDelete={(item) => console.log('onDelete', item)}
+/>
+\`\`\`
+    `,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Padrao: Story = {
+  name: "activity-timeline-padrao",
+  args: {
+    data: sampleData,
+    showIndexBadge: true,
+  },
+};
+
+export const SemBadge: Story = {
+  name: "activity-timeline-sem-badge",
+  args: {
+    data: sampleData,
+    showIndexBadge: false,
+  },
+};
+
+export const ListaVazia: Story = {
+  name: "activity-timeline-lista-vazia",
+  args: {
+    data: [],
+  },
+};