react-native-exp-fig 0.1.8 → 0.1.9

package/src/components/header-profile/index.tsx

@@ -1,132 +1,132 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { Dimensions, TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// typings
-import { IHeaderProps } from "./interface";
-
-// commons
-import { Icons } from "../../common/icons-svg";
-
-// styles
-import { theme } from "../../styles/theme/theme";
-
-/**
- * Componente Header para a interação do usuário com ui.
- */
-const Header: React.FC<IHeaderProps> = ({
-  title,
-  color,
-  testID,
-  arrow,
-  // propsNav,
-  permission,
-  bluetoothIsConnected,
-  isInternetReachable,
-  handleNavigation,
-  backgroundColor,
-  isBluetooth = false,
-}) => {
-  const { width: widthScreen } = Dimensions.get("window");
-  const isMobile = widthScreen < 768;
-
-  return (
-    <Box
-      testID={testID}
-      width={"100%"}
-      height={45}
-      backgroundColor={backgroundColor ?? theme.colors.blue[400]}
-      flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
-    >
-      <Box
-        width={"10%"}
-        height={45}
-        flexStyle={{ flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}
-        paddingStyle={{ paddingLeft: theme.paddings.md }}
-      >
-        {arrow && title !== "Login" && (
-          <TouchableOpacity
-            disabled={!arrow}
-            onPress={handleNavigation}
-            style={{
-              width: 50,
-              height: 45,
-              flexDirection: "column",
-              alignItems: "flex-start",
-              justifyContent: "center",
-            }}
-          >
-            {title === "Controle de Jornada" || title === "Controle de Carregamento" ? (
-              <>
-                <Icons icon="LIST" color="#fff" />
-                <Box marginStyle={{ marginBottom: 8 }} />
-              </>
-            ) : (
-              arrow && <Icons icon="ARROW_LEFT" />
-            )}
-          </TouchableOpacity>
-        )}
-      </Box>
-
-      <Box
-        height={45}
-        flexStyle={{
-          flexDirection: "row",
-          justifyContent: "center",
-          alignItems: "center",
-          flex: 0.9,
-        }}
-      >
-        <Typography
-          text={title ? title : "Login"}
-          size={15.4}
-          fontFamily={theme.fonts.inter_bold_700}
-          color={color?.colorText ?? theme.colors.neutral[25]}
-          fontWeight="700"
-          align="center"
-          lineHeight={theme.fontSizes.lg}
-          letterSpacing={"regular"}
-          marginLeft={theme.margins["2xl"]}
-        />
-      </Box>
-
-      <Box
-        marginStyle={{ marginRight: isMobile ? 10 : 60 }}
-        borderStyled={{ borderRadius: 10 }}
-        width={50}
-        height={24}
-      >
-        {permission ? (
-          <Box marginStyle={{ marginTop: 2 }} />
-        ) : (
-          <Box
-            marginStyle={{ marginTop: 2 }}
-            flexStyle={{ flexDirection: "row", justifyContent: "flex-end" }}
-          >
-            {isBluetooth && (
-              <Icons
-                icon={bluetoothIsConnected ? "BLUETOOTH_CONNECTED" : "BLUETOOTH"}
-                color={bluetoothIsConnected ? theme.colors.green[400] : theme.colors.red[900]}
-              />
-            )}
-            <Icons
-              icon={isInternetReachable ? "WIFI_HIGH" : "WIFI_X"}
-              color={isInternetReachable ? theme.colors.orange[150] : theme.colors.red[800]}
-            />
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { Header };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { Dimensions, TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// typings
+import { IHeaderProps } from "./interface";
+
+// commons
+import { Icons } from "../../common/icons-svg";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+/**
+ * Componente Header para a interação do usuário com ui.
+ */
+const Header: React.FC<IHeaderProps> = ({
+  title,
+  color,
+  testID,
+  arrow,
+  // propsNav,
+  permission,
+  bluetoothIsConnected,
+  isInternetReachable,
+  handleNavigation,
+  backgroundColor,
+  isBluetooth = false,
+}) => {
+  const { width: widthScreen } = Dimensions.get("window");
+  const isMobile = widthScreen < 768;
+
+  return (
+    <Box
+      testID={testID}
+      width={"100%"}
+      height={45}
+      backgroundColor={backgroundColor ?? theme.colors.blue[400]}
+      flexStyle={{ flexDirection: "row", justifyContent: "space-between", alignItems: "center" }}
+    >
+      <Box
+        width={"10%"}
+        height={45}
+        flexStyle={{ flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}
+        paddingStyle={{ paddingLeft: theme.paddings.md }}
+      >
+        {arrow && title !== "Login" && (
+          <TouchableOpacity
+            disabled={!arrow}
+            onPress={handleNavigation}
+            style={{
+              width: 50,
+              height: 45,
+              flexDirection: "column",
+              alignItems: "flex-start",
+              justifyContent: "center",
+            }}
+          >
+            {title === "Controle de Jornada" || title === "Controle de Carregamento" ? (
+              <>
+                <Icons icon="LIST" color="#fff" />
+                <Box marginStyle={{ marginBottom: 8 }} />
+              </>
+            ) : (
+              arrow && <Icons icon="ARROW_LEFT" />
+            )}
+          </TouchableOpacity>
+        )}
+      </Box>
+
+      <Box
+        height={45}
+        flexStyle={{
+          flexDirection: "row",
+          justifyContent: "center",
+          alignItems: "center",
+          flex: 0.9,
+        }}
+      >
+        <Typography
+          text={title ? title : "Login"}
+          size={15.4}
+          fontFamily={theme.fonts.inter_bold_700}
+          color={color?.colorText ?? theme.colors.neutral[25]}
+          fontWeight="700"
+          align="center"
+          lineHeight={theme.fontSizes.lg}
+          letterSpacing={"regular"}
+          marginLeft={theme.margins["2xl"]}
+        />
+      </Box>
+
+      <Box
+        marginStyle={{ marginRight: isMobile ? 10 : 60 }}
+        borderStyled={{ borderRadius: 10 }}
+        width={50}
+        height={24}
+      >
+        {permission ? (
+          <Box marginStyle={{ marginTop: 2 }} />
+        ) : (
+          <Box
+            marginStyle={{ marginTop: 2 }}
+            flexStyle={{ flexDirection: "row", justifyContent: "flex-end" }}
+          >
+            {isBluetooth && (
+              <Icons
+                icon={bluetoothIsConnected ? "BLUETOOTH_CONNECTED" : "BLUETOOTH"}
+                color={bluetoothIsConnected ? theme.colors.green[400] : theme.colors.red[900]}
+              />
+            )}
+            <Icons
+              icon={isInternetReachable ? "WIFI_HIGH" : "WIFI_X"}
+              color={isInternetReachable ? theme.colors.orange[150] : theme.colors.red[800]}
+            />
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { Header };

package/src/stories/card-work-session/card-work-session.stories.tsx

@@ -24,6 +24,7 @@ Você usa assim:
   workDate="25/01/2025"
   initialTime="11:40"
   duration="03:45"
+  counterBadge={2}
   avatar={""}
   />
 \`\`\`
@@ -36,7 +37,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const CardTrabalhoSession: Story = {
-  name: "card-work=session",
+  name: "card-work-session",
   args: {
     width: 400,
     name: "Weverson L.S",
@@ -45,5 +46,19 @@ export const CardTrabalhoSession: Story = {
     initialTime: "11:40",
     duration: "05:20",
     avatar: "",
+    counterBadge: 0,
+  },
+};
+export const CardWorkNotified: Story = {
+  name: "card-work-notified",
+  args: {
+    width: 400,
+    name: "Weverson L.S",
+    workDate: "25/01/2025",
+    timeWork: "",
+    initialTime: "11:40",
+    duration: "05:20",
+    avatar: "",
+    counterBadge: 3,
   },
 };

package/src/stories/coil/coil.stories.tsx

@@ -1,74 +1,75 @@
-import React from "react";
-
-import type { StoryObj, Meta } from "@storybook/react";
-import { Coil } from "../../components/coil";
-
-const meta: Meta<typeof Coil> = {
-  title: "componente/Coil",
-  component: Coil as React.FC,
-  args: {
-    title: "HUTY-9754",
-    description: "04 de 02 fotos pendentes",
-    handleNavigation: () => {},
-  },
-  parameters: {
-    notes: `
-# Coil
-
-Este é um componente de Card da bobina.
-Você usa assim:
-\`\`\`tsx
-<Coil
-title=''
-description=''
-handleNavigation={() => {}}
-status=''
-/>
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const CoilPending: Story = {
-  name: "coil-pending",
-  args: {
-    title: "HUTY-9754",
-    description: "04 de 02 fotos pendentes",
-    handleNavigation: () => {},
-    status: "pending",
-  },
-};
-
-export const CoilApproved: Story = {
-  name: "coil-approved",
-  args: {
-    title: "HUTY-9754",
-    description: "04 de 02 fotos pendentes",
-    handleNavigation: () => {},
-    status: "approved",
-  },
-};
-
-export const CoilRecused: Story = {
-  name: "coil-recused",
-  args: {
-    title: "HUTY-9754",
-    description: "04 de 02 fotos pendentes",
-    handleNavigation: () => {},
-    status: "recused",
-  },
-};
-
-export const CoilNoStatus: Story = {
-  name: "coil-no-status",
-  args: {
-    title: "HUTY-9754",
-    description: "background color diferente",
-    handleNavigation: () => {},
-    backgroundColor: "green",
-  },
-};
+import React from "react";
+
+import type { StoryObj, Meta } from "@storybook/react";
+import { Coil } from "../../components/coil";
+
+const meta: Meta<typeof Coil> = {
+  title: "componente/Coil",
+  component: Coil as React.FC,
+  args: {
+    title: "HUTY-9754",
+    description: "04 de 02 fotos pendentes",
+    handleNavigation: () => {},
+  },
+  parameters: {
+    notes: `
+# Coil
+
+Este é um componente de Card da bobina.
+Você usa assim:
+\`\`\`tsx
+<Coil
+  title=''
+  description=''
+  handleNavigation={() => {}}
+  status=''
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CoilPending: Story = {
+  name: "coil-pending",
+  args: {
+    title: "HUTY-9754",
+    description: "04 de 02 fotos pendentes",
+    handleNavigation: () => {},
+    status: "pending",
+  },
+};
+
+export const CoilApproved: Story = {
+  name: "coil-approved",
+  args: {
+    title: "HUTY-9754",
+    description: "04 de 02 fotos pendentes",
+    handleNavigation: () => {},
+    status: "approved",
+  },
+};
+
+export const CoilRecused: Story = {
+  name: "coil-recused",
+  args: {
+    title: "HUTY-9754",
+    description: "04 de 02 fotos pendentes",
+    handleNavigation: () => {},
+    status: "recused",
+  },
+};
+
+export const CoilNoStatus: Story = {
+  name: "coil-no-status",
+  args: {
+    title: "HUTY-9754",
+    description: "background color diferente",
+    handleNavigation: () => {},
+    backgroundColor: "green",
+    disabled: true,
+  },
+};

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

@@ -1,103 +1,103 @@
-import type { StoryObj, Meta } from "@storybook/react";
-import { Header } from "../../components/header-profile";
-
-const meta: Meta<typeof Header> = {
-  title: "componente/Header",
-  component: Header,
-  args: {
-    testID: "header",
-    arrow: false,
-    title: "aqui",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: false,
-    isInternetReachable: true,
-  },
-  parameters: {
-    notes: `
-# Header
-
-Este é um componente de Card de horas.
-Você usa assim:
-\`\`\`tsx
-<Header
-
-  />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const HeaderLogin: Story = {
-  name: "header-login",
-  args: {
-    testID: "header",
-    arrow: false,
-    title: "Login",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: false,
-    isInternetReachable: true,
-    isBluetooth: false,
-  },
-};
-export const HeaderArrow: Story = {
-  name: "header-arrow",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "SINCRONIZAR ATIVIDADES",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: false,
-    isInternetReachable: false,
-    isBluetooth: true,
-  },
-};
-
-export const HeaderList: Story = {
-  name: "header-list",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "Controle de Jornada",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: true,
-    isInternetReachable: true,
-    isBluetooth: true,
-  },
-};
-
-export const HeaderPermission: Story = {
-  name: "header-permission",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "Permission",
-    handleNavigation: () => {},
-    permission: true,
-    bluetoothIsConnected: true,
-    isInternetReachable: true,
-    isBluetooth: false,
-  },
-};
-
-export const HeaderBackground: Story = {
-  name: "header-background",
-  args: {
-    testID: "header",
-    arrow: true,
-    title: "texto grande e background diferente",
-    handleNavigation: () => {},
-    permission: false,
-    bluetoothIsConnected: true,
-    isInternetReachable: true,
-    isBluetooth: false,
-    color: { colorText: "white" },
-  },
-};
+import type { StoryObj, Meta } from "@storybook/react";
+import { Header } from "../../components/header-profile";
+
+const meta: Meta<typeof Header> = {
+  title: "componente/Header",
+  component: Header,
+  args: {
+    testID: "header",
+    arrow: false,
+    title: "aqui",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: true,
+  },
+  parameters: {
+    notes: `
+# Header
+
+Este é um componente de Card de horas.
+Você usa assim:
+\`\`\`tsx
+<Header
+
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const HeaderLogin: Story = {
+  name: "header-login",
+  args: {
+    testID: "header",
+    arrow: false,
+    title: "Login",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: true,
+    isBluetooth: false,
+  },
+};
+export const HeaderArrow: Story = {
+  name: "header-arrow",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "SINCRONIZAR ATIVIDADES",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: false,
+    isInternetReachable: false,
+    isBluetooth: true,
+  },
+};
+
+export const HeaderList: Story = {
+  name: "header-list",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "Controle de Jornada",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+    isBluetooth: true,
+  },
+};
+
+export const HeaderPermission: Story = {
+  name: "header-permission",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "Permission",
+    handleNavigation: () => {},
+    permission: true,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+    isBluetooth: false,
+  },
+};
+
+export const HeaderBackground: Story = {
+  name: "header-background",
+  args: {
+    testID: "header",
+    arrow: true,
+    title: "texto grande e background diferente",
+    handleNavigation: () => {},
+    permission: false,
+    bluetoothIsConnected: true,
+    isInternetReachable: true,
+    isBluetooth: false,
+    color: { colorText: "white" },
+  },
+};

package/src/styles/global/interface.d.ts

@@ -123,6 +123,16 @@ export interface IGlobalCss {
     letterSpacing?: keyof typeof theme.letterSpacing;
     lineHeight?: number;
   };
+
+  /**
+   * A propriedade CSS opacity define o nível de opacidade de um elemento. O valor da opacidade varia de 0 (totalmente transparente) a 1 (totalmente opaco).
+   */
+  disabled?: boolean;
+
+  /**
+   * A propriedade  background do icon da cor.
+   */
+  backgroundColorIcon?: string;
 }
 
 // /**

package/src/styles/theme/theme.ts

@@ -42,6 +42,7 @@ const colors = {
   red: {
     400: "#D23A1A",
     500: "#C54239",
+    600: "#B3261E",
     800: "#E72626",
     900: "#9F0000",
   },