react-native-exp-fig 0.1.25 → 0.1.27

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

@@ -0,0 +1,32 @@
+/**
+ * IMPORTS
+ */
+declare const styles: {
+    overlay: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+    };
+    card: {
+        width: "90%";
+    };
+    headerRow: {
+        marginBottom: number;
+        marginLeft: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    content: {
+        padding: number;
+    };
+    actions: {
+        marginTop: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+};
+/**
+ * EXPORTS
+ */
+export { styles };

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

@@ -0,0 +1,7 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import type { IModalJourneyRectificationProps } from "./interface";
+declare const _default: React.ComponentType<IModalJourneyRectificationProps<any>>;
+export default _default;

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

@@ -0,0 +1,32 @@
+/**
+ * IMPORTS
+ */
+declare const styles: {
+    overlay: {
+        flex: number;
+        justifyContent: "center";
+        alignItems: "center";
+        backgroundColor: string;
+    };
+    card: {
+        width: "90%";
+    };
+    headerRow: {
+        marginBottom: number;
+        marginLeft: number;
+        flexDirection: "row";
+        alignItems: "center";
+    };
+    content: {
+        padding: number;
+    };
+    actions: {
+        marginTop: number;
+        flexDirection: "row";
+        justifyContent: "space-between";
+    };
+};
+/**
+ * EXPORTS
+ */
+export { styles };

package/lib/typescript/src/components/modals/modal-activity-reason/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import type { IModalActivityReasonProps } from "./interface";
+declare const ModalActivityReason: React.FC<IModalActivityReasonProps>;
+export default ModalActivityReason;

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,13 @@ 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 { multiply } from "./utils/mutiply";
 export { formatDate, getLastSevenDays, formHoursMinute } from "./utils/format-data";
 export { theme } from "./styles/theme/theme";

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.25",
+  "version": "0.1.27",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app da Expresso Figueiredo.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",

package/src/components/input-text-counter/index.tsx

@@ -0,0 +1,64 @@
+/**
+ * IMPORTS
+ */
+import React, { forwardRef, useState } from "react";
+import { View, Text, TextInput } from "react-native";
+
+// components
+import Box from "../box";
+
+// typings
+import type { InputTextCounterProps } from "./interface";
+import { asBaseComponent } from "../../@types/as-base-component";
+
+// styles
+import { stylesInput } from "./styles";
+const MAX_LENGTH = 150;
+
+/**
+ * Component input + limitador de carecteres para interação do usuário.
+ */
+const InputTextCounter = forwardRef<any, InputTextCounterProps>(
+  ({ label, onChangeText, error = null, ...props }, ref): React.ReactElement => {
+    const [text, setText] = useState("");
+
+    const handleChangeText = (value: string) => {
+      const sliced = value.slice(0, 150);
+      setText(sliced);
+      onChangeText?.(sliced);
+    };
+
+    return (
+      <View>
+        <Text style={stylesInput.label}>{label}</Text>
+
+        <View style={stylesInput.inputWrapper}>
+          <TextInput
+            ref={ref}
+            multiline
+            style={stylesInput.input}
+            placeholderTextColor="#999"
+            maxLength={MAX_LENGTH}
+            value={text}
+            onChangeText={handleChangeText}
+            {...props}
+          />
+        </View>
+
+        <Box
+          flexStyle={{ flexDirection: "row", justifyContent: error ? "space-between" : "flex-end" }}
+        >
+          {error && <Text style={stylesInput.errorText}>{error}</Text>}
+          <Text style={stylesInput.charCount}>{`${text.length}/${MAX_LENGTH}`}</Text>
+        </Box>
+      </View>
+    );
+  }
+);
+
+InputTextCounter.displayName = "InputTextCounterProps";
+
+/**
+ * EXPORTS
+ */
+export default asBaseComponent(React.memo(InputTextCounter));

package/src/components/input-text-counter/interface.d.ts

@@ -0,0 +1,41 @@
+/**
+ * IMPORTS
+ */
+import { type TextInputProps, type DimensionValue } from "react-native";
+
+type InputTextCounterProps = TextInputProps & {
+  label: string;
+  backgroundColor?: string;
+
+  error?: string | null;
+
+  /**
+   * A propriedade CSS abreviada border define a borda de um elemento. Ele define os valores de largura da borda, estilo da borda e cor da borda.
+   */
+  borderStyled?: {
+    borderStyle?: "solid" | "dotted" | "dashed";
+
+    borderRadius?: number | DimensionValue;
+    borderTopRightRadius?: number | DimensionValue;
+    borderTopLeftRadius?: number | DimensionValue;
+    borderBottomRightRadius?: number | DimensionValue;
+    borderBottomLeftRadius?: number | DimensionValue;
+
+    borderWidth?: number | DimensionValue;
+    borderLeftWidth?: number | DimensionValue;
+    borderRightWidth?: number | DimensionValue;
+    borderTopWidth?: number | DimensionValue;
+    borderBottomWidth?: number | DimensionValue;
+
+    borderColor?: string;
+    borderBottomColor?: string;
+    borderLeftColor?: string;
+    borderRightColor?: string;
+    borderTopColor?: string;
+  };
+};
+
+/**
+ * EXPORTS
+ */
+export { InputTextCounterProps };

package/src/components/input-text-counter/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from "react-native";
+import { theme } from "../../styles/theme/theme";
+
+const stylesInput = StyleSheet.create({
+  label: {
+    fontFamily: theme.fonts.inter_regular_400,
+    fontSize: theme.fontSizes.md,
+    color: theme.colors.black[100],
+    marginBottom: theme.margins["1xs"],
+    fontWeight: "500",
+  },
+  inputWrapper: {
+    borderColor: theme.colors.gray[850],
+    borderWidth: theme.borderWidths.thin,
+    borderRadius: theme.borderWidths.thick,
+  },
+  input: {
+    fontFamily: theme.fonts.inter_regular_400,
+    fontSize: theme.fontSizes.sm,
+    color: theme.colors.gray[850],
+    padding: theme.paddings["2xs"],
+    textAlignVertical: "top",
+    minHeight: 80,
+  },
+  charCount: {
+    alignSelf: "flex-end",
+    marginTop: theme.margins["1xs"],
+    color: theme.colors.gray[850],
+    fontSize: theme.fontSizes.sm,
+  },
+  errorText: {
+    color: theme.colors.red[900],
+    fontSize: theme.fontSizes.sm,
+    marginTop: theme.margins["1xs"],
+  },
+});
+
+export { stylesInput };