jornada-ui 2.0.7 → 2.0.9

package/lib/typescript/module/src/components/notification-card/interface.d.ts

@@ -1,10 +1,11 @@
 /**
  * IMPORTS
  */
+import type { ReactNode } from "react";
 interface INotificationCardProps {
     variant?: "read" | "unread";
     title: string;
-    description: string;
+    description: string | ReactNode;
     actionLabel?: string;
     onPress?: () => void;
     onPressAction?: () => void;

package/lib/typescript/module/src/components/notification-card/interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/notification-card/interface.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,OAAO,EAAE,KAAK,sBAAsB,EAAE,CAAC"}
+{"version":3,"file":"interface.d.ts","sourceRoot":"","sources":["../../../../../../src/components/notification-card/interface.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,UAAU,sBAAsB;IAC9B,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;IAC3B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED;;GAEG;AACH,OAAO,EAAE,KAAK,sBAAsB,EAAE,CAAC"}

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

@@ -4,7 +4,7 @@
 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_OUTLINE" | "MOON_STARS" | "CALL_BELL" | "STEERING_WHEEL_FILL" | "TROPHY" | "SHOPPING_CART" | "CREDIT_CARD" | "FILE_TEXT" | "TRUCK" | "PACKAGE_CHECK" | "PLUS" | "PLUS_CONTAINER" | "EYE_SLASH" | "EYE" | "CALENDAR" | "TIMER" | "GEAR" | "CURRENCY" | "GAUGE" | "GAS_PUMP" | "ARROW_LEFT" | "BLUETOOTH" | "BLUETOOTH_CONNECTED" | "BLUETOOTH_SLASH" | "LIST" | "WIFI_X" | "WIFI_HIGH" | "NOTE_PINCEL" | "CHECK_CIRCLE" | "ARROW_DROP_DOWN" | "ARROW_CHEVRON_UP" | "ARROW_CHEVRON_DOWN" | "CLOSED" | "LOADING" | "COIL" | "HISTORY" | "BELL" | "BED" | "FILES" | "LIFEBUOY" | "RECUSED" | "EXCLAMATION_CIRCLE" | "EXCLAMATION_TRIANGLE" | "X_CIRCLE" | "TRUCK_ACTIVITY" | "COFFEE" | "CAR" | "CHECK_OUTLINE" | "HOURGLASS" | "HOUSE" | "ISLAND" | "CHEVRON_DOWN" | "CHEVRON_UP" | "TRASH" | "DOWNLOAD";
+    icon: "CAMERA_PLUS" | "STEERING_WHEEL" | "CHECK_BOX_FILL" | "CHECK_BOX_OUTLINE" | "CHECK_BOX" | "MOON_STARS" | "CALL_BELL" | "STEERING_WHEEL_FILL" | "TROPHY" | "SHOPPING_CART" | "CREDIT_CARD" | "FILE_TEXT" | "TRUCK" | "PACKAGE_CHECK" | "PLUS" | "PLUS_CONTAINER" | "EYE_SLASH" | "EYE" | "CALENDAR" | "TIMER" | "GEAR" | "CURRENCY" | "GAUGE" | "GAS_PUMP" | "ARROW_LEFT" | "BLUETOOTH" | "BLUETOOTH_CONNECTED" | "BLUETOOTH_SLASH" | "LIST" | "WIFI_X" | "WIFI_HIGH" | "NOTE_PINCEL" | "CHECK_CIRCLE" | "ARROW_DROP_DOWN" | "ARROW_CHEVRON_UP" | "ARROW_CHEVRON_DOWN" | "CLOSED" | "LOADING" | "COIL" | "HISTORY" | "BELL" | "BED" | "FILES" | "LIFEBUOY" | "RECUSED" | "EXCLAMATION_CIRCLE" | "EXCLAMATION_TRIANGLE" | "X_CIRCLE" | "TRUCK_ACTIVITY" | "COFFEE" | "CAR" | "CHECK_OUTLINE" | "HOURGLASS" | "HOUSE" | "ISLAND" | "CHEVRON_DOWN" | "CHEVRON_UP" | "TRASH" | "DOWNLOAD";
     disabled?: boolean;
     textColor?: string;
     onPressConfirm: (value: any) => void;

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

@@ -47,6 +47,7 @@ export { default as ModalToConfirmations } from "./components/modals/modal-to-co
 export { default as ActivityTimeline } from "./components/activity-step";
 export { default as NotificationCard } from "./components/notification-card";
 export { default as NotificationDetailCard } from "./components/notification-details-card";
+export { default as CheckBox } from "./components/check-box";
 export { default as WeeklyHoursBalance } from "./components/weekly-hours-balance";
 export { formatDate } from "./utils/format-date";
 export { theme } from "./styles/theme/theme";

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/index.tsx"],"names":[],"mappings":"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"}

package/lib/typescript/module/src/stories/check-box/check-box.stories.d.ts

@@ -0,0 +1,12 @@
+/**
+ * IMPORTS
+ */
+import type { Meta, StoryObj } from "@storybook/react";
+import CheckBox from "../../components/check-box";
+declare const meta: Meta<typeof CheckBox>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const CheckBoxChecked: Story;
+export declare const CheckBoxUnchecked: Story;
+export declare const CheckBoxWithoutLabel: Story;
+//# sourceMappingURL=check-box.stories.d.ts.map

package/lib/typescript/module/src/stories/check-box/check-box.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"check-box.stories.d.ts","sourceRoot":"","sources":["../../../../../../src/stories/check-box/check-box.stories.tsx"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,QAAQ,MAAM,4BAA4B,CAAC;AAKlD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,QAAQ,CA4B/B,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,eAAe,EAAE,KAY7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAQlC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jornada-ui",
-  "version": "2.0.7",
+  "version": "2.0.9",
   "description": "Biblioteca para desenvolvimento dos componentes para utilizar nos app da Expresso Figueiredo.",
   "source": "./src/index.tsx",
   "main": "./lib/commonjs/index.js",

package/src/common/icons-svg/check-box/index.tsx

@@ -0,0 +1,28 @@
+/**
+ * IMPORTS
+ */
+import * as React from "react";
+import Svg, { Path } from "react-native-svg";
+/**
+ * typings
+ */
+import type { ISvgProps } from "../interface";
+
+const SvgIconCheckBox: React.FC<ISvgProps> = ({ color, size, background, ...res }) => (
+  <Svg
+    // @ts-ignore
+    xmlns="http://www.w3.org/2000/svg"
+    width={size ?? 20}
+    height={size ?? 20}
+    fill="none"
+    viewBox="0 0 20 20"
+    {...res}
+  >
+    <Path fill={color ?? "#fff"} stroke={background ?? "#D9D9D9"} d="M.5.5h19v19H.5z"></Path>
+  </Svg>
+);
+
+/**
+ * EXPORTS
+ */
+export { SvgIconCheckBox };

package/src/common/icons-svg/constants/index.ts

@@ -7,6 +7,7 @@ const SVG_NAME = {
   STEERING_WHEEL: "steering-wheel",
   CHECK_BOX_FILL: "check-box-fill",
   CHECK_BOX_OUTLINE: "check-box-outline",
+  CHECK_BOX: "check-box",
   MOON_STARS: "moon-stars",
   CALL_BELL: "call-bell",
   STEERING_WHEEL_FILL: "steering-wheel-fill",

package/src/common/icons-svg/index.tsx

@@ -68,6 +68,7 @@ import { SvgIconPlusContainer } from "./plus-container";
 import { SvgIconPlusTrash } from "./trash";
 import { SvgIconDownload } from "./download";
 import { SvgIconBluetoothSlash } from "./bluetooth-slash";
+import { SvgIconCheckBox } from "./check-box";
 
 const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
   switch (icon) {
@@ -101,6 +102,9 @@ const Icons: React.FC<ISvgProps> = ({ icon, color, size, background }) => {
     case "CHECK_BOX_OUTLINE":
       return <SvgIconCheckBoxOutline icon="CHECK_BOX_OUTLINE" color={color} size={size} />;
 
+    case "CHECK_BOX":
+      return <SvgIconCheckBox icon="CHECK_BOX" color={color} size={size} />;
+
     case "CAMERA_PLUS":
       return <SvgIconCameraPlus color={color} size={size} icon={"CAMERA_PLUS"} />;
 

package/src/common/icons-svg/interface.d.ts

@@ -1,19 +1,19 @@
-/**
- * IMPORTS
- */
-
-import { SvgProps } from "react-native-svg";
-import { SVG_NAME } from "./constants";
-
-interface ISvgProps extends SvgProps {
-  width?: number;
-  height?: number;
-  color?: string;
-  size?: number;
-  icon: keyof typeof SVG_NAME;
-  background?: string;
-}
-/**
- * EXPORTS
- */
-export { ISvgProps };
+/**
+ * IMPORTS
+ */
+
+import { SvgProps } from "react-native-svg";
+import { SVG_NAME } from "./constants";
+
+interface ISvgProps extends SvgProps {
+  width?: number;
+  height?: number;
+  color?: string;
+  size?: number;
+  icon: keyof typeof SVG_NAME;
+  background?: string;
+}
+/**
+ * EXPORTS
+ */
+export { ISvgProps };

package/src/components/check-box/index.tsx

@@ -0,0 +1,95 @@
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import Typography from "../../components/typography";
+import Box from "../../components/box";
+
+// commons icons-svg
+import { Icons } from "../../common/icons-svg";
+
+// typings
+import { asBaseComponent } from "../../@types/as-base-component";
+import type { ICheckBoxProps } from "./interface";
+
+/**
+ * Componente CheckBox para interação da UI.
+ */
+const CheckBox: React.FC<ICheckBoxProps> = ({
+  width_box_check_icon,
+  is_checked,
+  background_color_check,
+  background_box_check_icon,
+  text_label,
+  text_size_label,
+  color_text_label,
+  onPress,
+  ...res
+}) => {
+
+  const iconName = is_checked ? "CHECK_BOX_OUTLINE" : "CHECK_BOX";
+  const iconSize = is_checked ? 24 : 19;
+
+  return (
+    <TouchableOpacity
+      testID="checkbox-button"
+      onPress={onPress}
+      {...res}
+    >
+      <Box
+        width="100%"
+        paddingStyle={{
+          paddingLeft: 16,
+          paddingRight: 16,
+        }}
+        flexStyle={{
+          flexDirection: "row",
+          alignItems: "center",
+          justifyContent: "flex-start",
+        }}
+        testID={is_checked ? "check-box-true" : "check-box-false"}
+      >
+        <Box
+          width={width_box_check_icon ?? 30}
+          height={40}
+          backgroundColor={
+            background_box_check_icon ?? "transparent"
+          }
+          flexStyle={{
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "flex-start",
+          }}
+        >
+          <Icons
+            size={iconSize}
+            color={background_color_check}
+            background={background_color_check}
+            icon={iconName}
+          />
+        </Box>
+
+        {!!text_label && (
+          <Typography
+            text={text_label}
+            color={color_text_label ?? "white"}
+            size={text_size_label ?? 16}
+            lineHeight={18}
+            letterSpacing="regular"
+            marginLeft={4}
+          />
+        )}
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+CheckBox.displayName = "CheckBox";
+
+/**
+ * EXPORT
+ */
+export default asBaseComponent(CheckBox);

package/src/components/check-box/interface.ts

@@ -0,0 +1,31 @@
+/**
+ * IMPORTS
+ */
+import type { TouchableOpacityProps } from "react-native";
+
+interface ICheckBoxProps extends TouchableOpacityProps {
+  /**Propriedade do tamanho do box do icon-check-outline */
+  width_box_check_icon?: number;
+
+  /**Propriedade para saber se o checkbox esta marcado */
+  is_checked: boolean;
+
+  /**Propriedade para mudar a cor do icon quando for marcado */
+  background_color_check?: string;
+
+  /**Propriedade para mudar a cor do icon quando for marcado */
+  background_box_check_icon?: string;
+
+  /**Propriedade do textLabel */
+  text_label?: string;
+
+  /**Propriedade do tamanho do textLabel */
+  text_size_label?: number;
+
+  /**Propriedade da cor do textLabel */
+  color_text_label?: string;
+}
+/**
+ * EXPORTS
+ */
+export type { ICheckBoxProps };

package/src/components/notification-card/index.tsx

@@ -72,16 +72,21 @@ const NotificationCard: React.FC<INotificationCardProps> = forwardRef<View, INot
             </Box>
 
             {/* Texto */}
-            <Typography
-              text={description}
-              numberOfLines={isWarning ? 2 : 4}
-              ellipsizeMode="tail"
-              size={theme.fontSizes.sm}
-              lineHeight={theme.lineHeight.md}
-              fontFamily={theme.fonts.inter_regular_400}
-              color={theme.colors.gray[700]}
-              marginBottom={theme.margins.xs}
-            />
+            {/* Texto */}
+            {typeof description === "string" ? (
+              <Typography
+                text={description}
+                numberOfLines={isWarning ? 2 : 4}
+                ellipsizeMode="tail"
+                size={theme.fontSizes.sm}
+                lineHeight={theme.lineHeight.md}
+                fontFamily={theme.fonts.inter_regular_400}
+                color={theme.colors.gray[700]}
+                marginBottom={theme.margins.xs}
+              />
+            ) : (
+              <Box marginStyle={{ marginBottom: theme.margins.xs }}>{description}</Box>
+            )}
 
             {/* Ação opcional */}
             {actionLabel && onPressAction && (

package/src/components/notification-card/interface.ts

@@ -2,10 +2,12 @@
  * IMPORTS
  */
 
+import type { ReactNode } from "react";
+
 interface INotificationCardProps {
   variant?: "read" | "unread";
   title: string;
-  description: string;
+  description: string | ReactNode;
   actionLabel?: string;
   onPress?: () => void;
   onPressAction?: () => void;

package/src/index.tsx

@@ -49,6 +49,7 @@ export { default as ModalToConfirmations } from "./components/modals/modal-to-co
 export { default as ActivityTimeline } from "./components/activity-step";
 export { default as NotificationCard } from "./components/notification-card";
 export { default as NotificationDetailCard } from "./components/notification-details-card";
+export { default as CheckBox } from "./components/check-box";
 
 // adicionar o storybook + teste
 export { default as WeeklyHoursBalance } from "./components/weekly-hours-balance";

package/src/stories/check-box/check-box.stories.tsx

@@ -0,0 +1,84 @@
+/**
+ * IMPORTS
+ */
+
+import type React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+
+// components
+import CheckBox from "../../components/check-box";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof CheckBox> = {
+  title: "componente/CheckBox",
+  component: CheckBox as React.FC,
+  args: {
+    onPress: () => { },
+  },
+  parameters: {
+    notes: `
+# CheckBox
+
+Este é um componente de CheckBox.
+
+Você usa assim:
+
+\`\`\`tsx
+<CheckBox
+  is_checked={true}
+  width_box_check_icon={28}
+  background_color_check={theme.colors.orange[150]}
+  text_size_label={16}
+  text_label="Confirmo que este abastecimento pertence à minha viagem e autorizo seu lançamento."
+  color_text_label={theme.colors.gray[700]}
+  background_box_check_icon="transparent"
+  onPress={() => {}}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CheckBoxChecked: Story = {
+  name: "checkbox-checked",
+  args: {
+    is_checked: true,
+    width_box_check_icon: 28,
+    background_color_check: theme.colors.orange[150],
+    text_size_label: 16,
+    text_label:
+      "Confirmo que este abastecimento pertence à minha viagem e autorizo seu lançamento.",
+    color_text_label: theme.colors.gray[700],
+    background_box_check_icon: "transparent",
+  },
+};
+
+export const CheckBoxUnchecked: Story = {
+  name: "checkbox-unchecked",
+  args: {
+    is_checked: false,
+    width_box_check_icon: 28,
+    background_color_check: theme.colors.gray[850],
+    text_size_label: 16,
+    text_label:
+      "Confirmo que este abastecimento pertence à minha viagem e autorizo seu lançamento.",
+    color_text_label: theme.colors.gray[700],
+    background_box_check_icon: "transparent",
+  },
+};
+
+export const CheckBoxWithoutLabel: Story = {
+  name: "checkbox-without-label",
+  args: {
+    is_checked: true,
+    width_box_check_icon: 28,
+    background_color_check: theme.colors.orange[150],
+    background_box_check_icon: "transparent",
+  },
+};