react-native-exp-fig 0.1.2 → 0.1.4

package/src/stories/filter-date-selector/filter-date-selector.stories.tsx

@@ -0,0 +1,93 @@
+import React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+import { FilterDateSelector } from "../../components/filter-date-selector";
+import { getLastSevenDays } from "../../utils/format-data";
+import { ISelectedDay } from "../../components/filter-date-selector/interface";
+
+const meta: Meta<typeof FilterDateSelector> = {
+  title: "componente/FilterDateSelector",
+  component: FilterDateSelector as React.FC,
+  args: {
+    selectedDay: {
+      date: "",
+      dayName: "",
+      fullDate: new Date(""),
+    },
+    handleSelectedDay: (date: ISelectedDay) => {
+      return date;
+    },
+    days: [],
+  },
+  parameters: {
+    notes: `
+# FilterDateSelector
+
+Este é um componente de filtro do dias  .
+Você usa assim:
+\`\`\`tsx
+  <FilterDateSelector
+    selectedDay={selectedDay as any}
+    handleSelectedDay={setSelectedDay as any}
+    days={days as []}
+    isLoading={false}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const FilterDateSelectorSimples: Story = {
+  name: "filter-journey",
+  render: () => {
+    const [isLoading, setIsLoading] = React.useState(false);
+    const [selectedDay, setSelectedDay] = React.useState<ISelectedDay>({
+      date: "",
+      dayName: "",
+      fullDate: new Date(""),
+    });
+    const days = getLastSevenDays();
+
+    React.useEffect(() => {
+      const today = new Date();
+
+      setSelectedDay(
+        days.find(
+          (day) => day.date === today.getDate() && day.fullDate.getMonth() === today.getMonth()
+        ) as any
+      );
+    }, []);
+
+    const handleSelectedDay = (day: ISelectedDay) => {
+      setSelectedDay(day);
+      setIsLoading(true);
+
+      /* global setTimeout */
+      setTimeout(() => {
+        setIsLoading(false);
+      }, 1000);
+    };
+    return (
+      <FilterDateSelector
+        selectedDay={selectedDay as any}
+        handleSelectedDay={handleSelectedDay as any}
+        days={days as []}
+        isLoading={isLoading}
+      />
+    );
+  },
+  args: {
+    selectedDay: {
+      date: "",
+      dayName: "",
+      fullDate: new Date(""),
+    },
+    handleSelectedDay: (date: ISelectedDay) => {
+      return date;
+    },
+    days: [],
+  },
+};

package/src/stories/filter-journey/filter-journey.stories.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+import { FilterJourney } from "../../components/filter-journey";
+
+const meta: Meta<typeof FilterJourney> = {
+  title: "componente/FilterJourney",
+  component: FilterJourney,
+  args: {
+    selectedFilter: "disponíveis",
+    handleFilterSelect: (filter) => {
+      return filter;
+    },
+    filters: [
+      { id: 1, descricao: "disponíveis" },
+      { id: 2, descricao: "pendente" },
+      { id: 3, descricao: "finalizado" },
+      { id: 4, descricao: "aguardando" },
+    ],
+  },
+  parameters: {
+    notes: `
+# FilterJourney
+
+Este é um componente de filtro do tipo de cargas .
+Você usa assim:
+\`\`\`tsx
+  <FilterJourney filters={filters} handleFilterSelect={handleFilterSelect} selectedFilter={selectedFilter} />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+const filters = [
+  { id: 1, descricao: "disponíveis" },
+  { id: 2, descricao: "pendente" },
+  { id: 3, descricao: "finalizado" },
+  { id: 4, descricao: "aguardando" },
+];
+
+export const FilterJourneySimples: Story = {
+  name: "filter-journey",
+  render: () => {
+    const [selected, setSelected] = React.useState<string>(filters[0]?.descricao || "");
+    return (
+      <FilterJourney
+        selectedFilter={selected}
+        handleFilterSelect={setSelected}
+        filters={filters}
+        isLoading={false}
+      />
+    );
+  },
+  args: {
+    selectedFilter: "disponíveis",
+    handleFilterSelect: (filter: any) => {
+      /* global console */
+      console.log(filter);
+    },
+    filters: filters,
+  },
+};

package/src/stories/image-capture-with-remove/image-capture-with-remove.stories.tsx

@@ -0,0 +1,47 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+import { ImageCaptureWithRemove } from "../../components/image-capture-with-remove";
+
+const meta: Meta<typeof ImageCaptureWithRemove> = {
+  title: "componente/ImageCaptureWithRemove",
+  component: ImageCaptureWithRemove as React.FC,
+  args: {
+    foto: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6OOy_GKxjzabOOBo22zHfg4TdWhubwnU7GQ&s",
+  },
+  parameters: {
+    notes: `
+# ImageCaptureWithRemove
+
+Este é um componente de ImageCaptureWithRemove.
+Você usa assim:
+\`\`\`tsx
+<ImageCaptureWithRemove
+
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ImageCapture: Story = {
+  name: "image-capture-with",
+  args: {
+    foto: null,
+    handleTakePhoto: () => {},
+    onRemove: () => {},
+  },
+};
+
+export const ImageCaptureWithDelete: Story = {
+  name: "image-capture-with-delete",
+  args: {
+    foto: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS6OOy_GKxjzabOOBo22zHfg4TdWhubwnU7GQ&s",
+    handleTakePhoto: () => {},
+    onRemove: () => {},
+  },
+};

package/src/stories/input/input.stories.tsx

@@ -1,8 +1,8 @@
+import React from "react";
 import { StoryObj, Meta } from "@storybook/react";
 import { Input } from "../../components/input";
 
 import { theme } from "../../styles/theme/theme";
-import React from "react";
 
 const meta: Meta<typeof Input> = {
   title: "componente/Input",
@@ -50,6 +50,7 @@ export const Basic: Story = {
     return (
       <Input
         {...args}
+        name="input-basic"
         onFocus={(e) => {
           setIsFocusHigherSpeed(true);
           args.onFocus?.(e);

package/src/stories/loading-details/loading-details.stories.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { LoadingDetails } from "../../components/loading-details";
+
+const meta: Meta<typeof LoadingDetails> = {
+  title: "componente/LoadingDetails",
+  component: LoadingDetails as React.FC,
+  args: {
+    numero: "01",
+    local: "Doca 1, Pátio 02 - Ultrimais (Ipatinga)",
+    date: "24/03/2025",
+    duracao: "00:00",
+  },
+  parameters: {
+    notes: `
+# LoadingDetails
+
+Este é um componente de LoadingDetails.
+Você usa assim:
+\`\`\`tsx
+<LoadingDetails
+    numero="01"
+    local="Doca 1, Pátio 02 - Usiminas (Ipatinga)"
+    date="24/03/2025"
+    duracao="00:00"
+    handleClickGoback={() => {}}
+    isLoadingStart={false}
+    handleClickStart={() => {}}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Profile: Story = {
+  name: "loading-details",
+  args: {
+    numero: "01",
+    local: "Doca 1, Pátio 02 - Ultrimais (Ipatinga)",
+    date: "24/03/2025",
+    duracao: "00:00",
+  },
+};

package/src/stories/loading-progress/loading-progress.stories.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+import { LoadingProgress } from "../../components/loading-progress";
+
+const meta: Meta<typeof LoadingProgress> = {
+  title: "componente/LoadingProgress",
+  component: LoadingProgress as React.FC,
+  args: {
+    textLoading: "Loading progress",
+  },
+  parameters: {
+    notes: `
+# LoadingProgress
+
+Este é um componente de carregamento em andamento.
+Você usa assim:
+\`\`\`tsx
+<LoadingProgress textLoading="#09843456096789" />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const LoadingProgressSimples: Story = {
+  name: "LoadingProgress",
+  args: {
+    textLoading: "#579685967889",
+    handleClick: () => {},
+  },
+};

package/src/stories/no-data/no-data.stories.tsx

@@ -0,0 +1,35 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { NoData } from "../../components/no-data";
+
+const meta: Meta<typeof NoData> = {
+  title: "componente/NoData",
+  component: NoData,
+  args: {
+    text: "",
+  },
+  parameters: {
+    notes: `
+# NoData
+
+Este é um componente de NoData .
+Você usa assim:
+\`\`\`tsx
+ <NoData
+   text="sem cargas"
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NoDatasSimples: Story = {
+  name: "no-data",
+  args: {
+    text: "sem carga",
+  },
+};

package/src/stories/notification-loading/notification-loading.stories.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+import { NotificationLoading } from "../../components/notification-loading";
+
+const meta: Meta<typeof NotificationLoading> = {
+  title: "componente/NotificationLoading",
+  component: NotificationLoading as React.FC,
+  args: {
+    title: "Carregamento - #013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => {},
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "pending",
+    dataStart: "Hoje",
+  },
+  parameters: {
+    notes: `
+# NotificationLoading
+
+Este é um componente de Card de notificação.
+Você usa assim:
+\`\`\`tsx
+<NotificationLoading
+    title=""
+    date=""
+    handleNavigation={() => {}}
+    notification=""
+    statusNotify=""
+    dataStart: "Hoje",
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const NotificationLoadingPending: Story = {
+  name: "Notification-pending",
+  args: {
+    title: "#013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => {},
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "Pendente",
+    dataStart: "Ontem",
+  },
+};
+export const NotificationLoadingApproved: Story = {
+  name: "Notification-Approved",
+  args: {
+    title: "#013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => {},
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "Aprovado",
+    dataStart: "Hoje",
+  },
+};
+export const NotificationLoadingRecused: Story = {
+  name: "Notification-recused",
+  args: {
+    title: "#013200400456",
+    date: "12:30 07/05/2025",
+    handleNavigation: () => {},
+    notification: "Hoje você tem um carregamento agendamento",
+    statusNotify: "Reprovado",
+    dataStart: "25 abril 2025",
+  },
+};

package/src/stories/user-profile/user-profile.stories.tsx

@@ -16,7 +16,7 @@ Este é um componente de Card de horas.
 Você usa assim:
 \`\`\`tsx
 <UserProfile
-  
+
   />
 \`\`\`
 `,

package/src/styles/theme/theme.ts

@@ -9,6 +9,7 @@ const borderWidths = {
   thick: 4,
   thick_medium: 8,
   thick_bold: 12,
+  thick_large: 16,
   hairline: 999,
 };
 
@@ -22,15 +23,18 @@ const colors = {
     400: "#F4F5F6",
   },
   black: {
+    10: "#000000",
     25: "#1E1E1E",
     100: "#393939",
     180: "#35302B",
   },
   blue: {
     25: "#1E1E1E",
+    50: "#1EA7fD",
     100: "#051C3B",
     150: "#2E41F2",
     350: "#357FD6",
+    375: "#056CF2",
     400: "#2D3748",
     500: "#050022",
     525: "#051C3B",
@@ -52,9 +56,12 @@ const colors = {
     850: "#868686",
     875: "#949494",
     900: "#9B9B9B",
+    925: "#957c5f",
+    950: "#94a3b8",
   },
   green: {
     200: "#25BA76",
+    250: "#20AD48",
     400: "#49C63E",
     500: "#50C58F",
   },
@@ -65,6 +72,8 @@ const colors = {
   },
   yellow: {
     100: "#DFAE00",
+    50: "#F0CA4B",
+    75: "#F59E0B",
   },
 };
 

package/src/utils/format-data/index.ts

@@ -1,14 +1,40 @@
-/**
- * Formata uma data do tipo Date para o formato DD/MM/YYYY
- * @param date Objeto Date a ser formatado
- * @returns String no formato DD/MM/YYYY
- */
-const formatDate = (date: Date): string => {
-  const day = String(date.getDate()).padStart(2, "0");
-  const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
-  const year = date.getFullYear();
-
-  return `${day}/${month}/${year}`;
-};
-
-export { formatDate };
+/**
+ * Formata uma data do tipo Date para o formato DD/MM/YYYY
+ * @param date Objeto Date a ser formatado
+ * @returns String no formato DD/MM/YYYY
+ */
+const formatDate = (date: Date): string => {
+  const day = String(date.getDate()).padStart(2, "0");
+  const month = String(date.getMonth() + 1).padStart(2, "0"); // Mês começa em 0
+  const year = date.getFullYear();
+
+  return `${day}/${month}/${year}`;
+};
+
+export { formatDate };
+
+/**
+ * Retorna as sete últimas datas do dias
+ * @returns Array<{ date: number, dayName: string, fullDate: Date }>
+ */
+
+const getLastSevenDays = () => {
+  const today = new Date();
+  const days = [];
+  const dayNames = ["Domingo", "Segunda", "Terça", "Quarta", "Quinta", "Sexta", "Sábado"];
+
+  for (let i = 7; i >= 0; i--) {
+    const date = new Date(today);
+    date.setDate(today.getDate() - i);
+
+    days.push({
+      date: date.getDate(),
+      dayName: dayNames[date.getDay()],
+      fullDate: date,
+    });
+  }
+
+  return days;
+};
+
+export { getLastSevenDays };

package/src/utils/status-color/return-color.ts

@@ -0,0 +1,15 @@
+import { theme } from "../../styles/theme/theme";
+
+export type StatusType = "Aprovado" | "Reprovado" | "Pendente";
+
+function getStatusColor(status: StatusType): string {
+  const statusColors: Record<StatusType, string> = {
+    Aprovado: theme.colors.green[400],
+    Reprovado: theme.colors.red[900],
+    Pendente: theme.colors.yellow[50],
+  };
+
+  return statusColors[status];
+}
+
+export { getStatusColor };