react-native-exp-fig 0.1.6 → 0.1.8

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

@@ -1,144 +1,144 @@
-/**
- * IMPORTS
- */
-import React from "react";
-import { TouchableOpacity } from "react-native";
-
-// components
-import { Box } from "../box";
-import { Typography } from "../typography";
-
-// icons
-import { Icons } from "../../common/icons-svg";
-
-// theme
-import { theme } from "../../styles/theme/theme";
-
-import { INotificationLoading } from "./interface";
-import { getStatusColor, StatusType } from "../../utils/status-color/return-color";
-
-const NotificationLoading: React.FC<INotificationLoading> = ({
-  handleNavigation,
-  title,
-  testID,
-  statusNotify,
-  date,
-  notification,
-  dataStart,
-  style,
-}) => {
-  // const truncatedText = title.length > 13 ? title.substring(0, 11) + "..." : title;
-  return (
-    <TouchableOpacity activeOpacity={0.7} testID={testID} onPress={handleNavigation}>
-      <Box
-        width={"100%"}
-        flexStyle={{ flexDirection: "row", alignItems: "center" }}
-        backgroundColor={theme.colors.blue[400]}
-        borderStyled={{
-          borderWidth: 1,
-          borderRadius: theme.borderWidths.thick_medium,
-          borderColor: theme.colors.blue[400],
-        }}
-        paddingStyle={{ padding: theme.paddings["2xs"] }}
-        style={[{ elevation: 5 }, style]}
-      >
-        <Box width={"9%"}>
-          <Icons icon={"BELL"} size={32} color={theme.colors.neutral[25]} />
-        </Box>
-
-        <Box
-          flexStyle={{ flexDirection: "column" }}
-          width={"91%"}
-          paddingStyle={{ paddingLeft: 7 }}
-        >
-          {/*   Carregamento identificação */}
-          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
-            <Typography
-              text={"Carregamento - "}
-              size={theme.fontSizes.sm}
-              lineHeight={theme.fontSizes.sm}
-              fontFamily={theme.fonts.inter_semi_bold_600}
-              color={theme.colors.neutral[25]}
-              letterSpacing={"regular"}
-            />
-            <Typography
-              text={title}
-              size={theme.fontSizes.xs}
-              lineHeight={theme.fontSizes.sm}
-              fontFamily={theme.fonts.inter_bold_700}
-              color={theme.colors.neutral[25]}
-              letterSpacing={"regular"}
-            />
-          </Box>
-
-          {/*   Data do carregamento */}
-          <Box
-            flexStyle={{
-              flexDirection: "row",
-              alignItems: "center",
-              justifyContent: "space-between",
-            }}
-          >
-            <Box
-              flexStyle={{
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
-              <Typography
-                text={"Data - "}
-                size={theme.fontSizes.sm}
-                lineHeight={theme.fontSizes.lg ?? 18}
-                fontFamily={theme.fonts.inter_medium_500}
-                color={theme.colors.neutral[25]}
-                letterSpacing={"regular"}
-              />
-              <Typography
-                text={String(date)}
-                size={theme.fontSizes.sm}
-                lineHeight={theme.fontSizes.lg ?? 18}
-                fontFamily={theme.fonts.inter_medium_500}
-                color={theme.colors.neutral[25]}
-                letterSpacing={"regular"}
-              />
-            </Box>
-            <Box
-              flexStyle={{
-                flexDirection: "row",
-                alignItems: "center",
-              }}
-            >
-              <Typography
-                text={String(dataStart)}
-                size={theme.fontSizes["2xs"]}
-                fontFamily={theme.fonts.inter_medium_500}
-                color={theme.colors.neutral[25]}
-                letterSpacing={"regular"}
-                marginRight={8}
-              />
-
-              <Icons icon={"ELLIPSE"} color={getStatusColor(statusNotify as StatusType)} size={9} />
-            </Box>
-          </Box>
-
-          {/*  Mensagem de notificação do carregamento */}
-          <Typography
-            text={notification}
-            size={theme.fontSizes["2xs"]}
-            fontFamily={theme.fonts.inter_medium_500}
-            lineHeight={theme.fontSizes.sm ?? 14}
-            color={theme.colors.neutral[25]}
-            letterSpacing={"regular"}
-            ellipsizeMode="tail"
-            numberOfLines={1}
-          />
-        </Box>
-      </Box>
-    </TouchableOpacity>
-  );
-};
-
-/**
- * EXPORTS
- */
-export { NotificationLoading };
+/**
+ * IMPORTS
+ */
+import React from "react";
+import { TouchableOpacity } from "react-native";
+
+// components
+import { Box } from "../box";
+import { Typography } from "../typography";
+
+// icons
+import { Icons } from "../../common/icons-svg";
+
+// theme
+import { theme } from "../../styles/theme/theme";
+
+import { INotificationLoading } from "./interface";
+import { getStatusColor, StatusType } from "../../utils/status-color/return-color";
+
+const NotificationLoading: React.FC<INotificationLoading> = ({
+  handleNavigation,
+  title,
+  testID,
+  statusNotify,
+  date,
+  notification,
+  dataStart,
+  style,
+}) => {
+  // const truncatedText = title.length > 13 ? title.substring(0, 11) + "..." : title;
+  return (
+    <TouchableOpacity activeOpacity={0.7} testID={testID} onPress={handleNavigation}>
+      <Box
+        width={"100%"}
+        flexStyle={{ flexDirection: "row", alignItems: "center" }}
+        backgroundColor={theme.colors.blue[400]}
+        borderStyled={{
+          borderWidth: 1,
+          borderRadius: theme.borderWidths.thick_medium,
+          borderColor: theme.colors.blue[400],
+        }}
+        paddingStyle={{ padding: theme.paddings["2xs"] }}
+        style={[{ elevation: 5 }, style]}
+      >
+        <Box width={"9%"}>
+          <Icons icon={"BELL"} size={32} color={theme.colors.neutral[25]} />
+        </Box>
+
+        <Box
+          flexStyle={{ flexDirection: "column" }}
+          width={"91%"}
+          paddingStyle={{ paddingLeft: 7 }}
+        >
+          {/*   Carregamento identificação */}
+          <Box flexStyle={{ flexDirection: "row", alignItems: "center" }}>
+            <Typography
+              text={"Carregamento - "}
+              size={theme.fontSizes.sm}
+              lineHeight={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_semi_bold_600}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+            />
+            <Typography
+              text={title}
+              size={theme.fontSizes.xs}
+              lineHeight={theme.fontSizes.sm}
+              fontFamily={theme.fonts.inter_bold_700}
+              color={theme.colors.neutral[25]}
+              letterSpacing={"regular"}
+            />
+          </Box>
+
+          {/*   Data do carregamento */}
+          <Box
+            flexStyle={{
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "space-between",
+            }}
+          >
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                text={"Data - "}
+                size={theme.fontSizes.sm}
+                lineHeight={theme.fontSizes.lg ?? 18}
+                fontFamily={theme.fonts.inter_medium_500}
+                color={theme.colors.neutral[25]}
+                letterSpacing={"regular"}
+              />
+              <Typography
+                text={String(date)}
+                size={theme.fontSizes.sm}
+                lineHeight={theme.fontSizes.lg ?? 18}
+                fontFamily={theme.fonts.inter_medium_500}
+                color={theme.colors.neutral[25]}
+                letterSpacing={"regular"}
+              />
+            </Box>
+            <Box
+              flexStyle={{
+                flexDirection: "row",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                text={String(dataStart)}
+                size={theme.fontSizes["2xs"]}
+                fontFamily={theme.fonts.inter_medium_500}
+                color={theme.colors.neutral[25]}
+                letterSpacing={"regular"}
+                marginRight={8}
+              />
+
+              <Icons icon={"ELLIPSE"} color={getStatusColor(statusNotify as StatusType)} size={9} />
+            </Box>
+          </Box>
+
+          {/*  Mensagem de notificação do carregamento */}
+          <Typography
+            text={notification}
+            size={theme.fontSizes["2xs"]}
+            fontFamily={theme.fonts.inter_medium_500}
+            lineHeight={theme.fontSizes.sm ?? 14}
+            color={theme.colors.neutral[25]}
+            letterSpacing={"regular"}
+            ellipsizeMode="tail"
+            numberOfLines={1}
+          />
+        </Box>
+      </Box>
+    </TouchableOpacity>
+  );
+};
+
+/**
+ * EXPORTS
+ */
+export { NotificationLoading };

package/src/index.ts

@@ -4,9 +4,7 @@
 
 // Components
 export { Box } from "./components/box";
-export type { IBoxProps } from "./components/box/interface";
 export { Button } from "./components/button";
-export { IButtonProps } from "./components/button/interface";
 export { StepIndicator } from "./components/step-indicator";
 export { Typography } from "./components/typography";
 export { Input } from "./components/input";

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

@@ -1,64 +1,74 @@
-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: () => {},
-    status: "pending",
-  },
-  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",
-  },
-};
+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",
+  },
+};

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

@@ -86,3 +86,18 @@ export const HeaderPermission: Story = {
     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" },
+  },
+};