react-native-exp-fig 0.1.1 → 0.1.3

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

@@ -1,286 +1,287 @@
-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",
-  component: Input,
-
-  args: {
-    testID: "",
-    name: "",
-    textLabel: "",
-    width: "100%",
-    height: 70,
-    placeholder: "",
-
-    backgroundColor: theme.colors.neutral[50],
-    borderStyled: { borderBottomWidth: 1, borderBottomColor: theme.colors.blue[500] },
-    placeholderTextColor: theme.colors.gray[700],
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-
-  parameters: {
-    notes: `
-# Input
-Este é um componente de Input.
-Você usa assim:
-\`\`\`tsx
-<Input text="Eu sou um Input!" />
-\`\`\`
-`,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-let isFocusHigherSpeed = false;
-export const Basic: Story = {
-  name: "input-basic",
-  render: (args) => {
-    const [isFocusHigherSpeed, setIsFocusHigherSpeed] = React.useState<boolean>(false);
-
-    return (
-      <Input
-        {...args}
-        onFocus={(e) => {
-          setIsFocusHigherSpeed(true);
-          args.onFocus?.(e);
-        }}
-        onBlur={(e) => {
-          setIsFocusHigherSpeed(false);
-          args.onBlur?.(e);
-        }}
-        borderStyled={{
-          borderBottomWidth: 3,
-          borderColor: isFocusHigherSpeed ? theme.colors.neutral[75] : theme.colors.blue[350],
-        }}
-
-        // podendo usar direto as props ou style
-
-        // style={[
-        //   args.style,
-        //   {
-        //     borderBottomWidth: 2,
-        //     borderColor: isFocusHigherSpeed ? "green" : theme.colors.blue[350],
-        //   },
-        // ]}
-      />
-    );
-  },
-  args: {
-    testID: "maior_velocidade_atingida",
-    name: "maior_velocidade_atingida",
-    textLabel: "Maior velocidade do dia",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "informe a velocidade do dia",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: theme.colors.blue[350],
-    },
-    color: { colorText: theme.colors.neutral[75] },
-    placeholderTextColor: theme.colors.gray[900],
-
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => (isFocusHigherSpeed = true),
-    onFocus: () => {
-      isFocusHigherSpeed = true;
-      return isFocusHigherSpeed;
-    },
-  },
-};
-
-export const Append: Story = {
-  name: "input-append",
-  args: {
-    testID: "maior_velocidade_atingida",
-    name: "append",
-    textLabel: "Input para usar com append",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "append",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
-    },
-    color: { colorText: theme.colors.neutral[75] },
-    placeholderTextColor: theme.colors.gray[900],
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-    append: {
-      appendText: "aqui mostra Append Text",
-      appendColor: theme.colors.yellow[100],
-    },
-  },
-};
-export const Password: Story = {
-  name: "input-password",
-  args: {
-    testID: "password",
-    name: "senha",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "digite sua senha",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
-    },
-    placeholderTextColor: theme.colors.gray[900],
-    secureTextEntry: false,
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-};
-export const Data: Story = {
-  name: "input-data",
-  args: {
-    testID: "data",
-    name: "data",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "digite sua data ",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: theme.colors.blue[500],
-    },
-    placeholderTextColor: theme.colors.gray[900],
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-};
-export const Hours: Story = {
-  name: "input-hours",
-  args: {
-    testID: "hours",
-    name: "hours",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "digite a hora",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
-    },
-    placeholderTextColor: theme.colors.gray[900],
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-};
-export const Litragem: Story = {
-  name: "input-litragem",
-  args: {
-    testID: "litragem",
-    name: "litragem",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "digite sua litragem",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
-    },
-    placeholderTextColor: theme.colors.gray[900],
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-};
-export const Value: Story = {
-  name: "input-value",
-  args: {
-    testID: "value",
-    name: "value",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "digite o valor",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: theme.colors.blue[350],
-    },
-    placeholderTextColor: theme.colors.gray[900],
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-};
-
-export const Label: Story = {
-  name: "input-com-label",
-  args: {
-    testID: "input-com-label",
-    name: "label",
-    textLabel: "Informe seu Km",
-    textLabelPlaceholder: "Km",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "digite o valor do KM",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: theme.colors.blue[350],
-    },
-    color: { colorText: theme.colors.neutral[75] },
-    placeholderTextColor: theme.colors.gray[900],
-    messageError: "",
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-};
-export const MessageError: Story = {
-  name: "input-message-error",
-  args: {
-    testID: "value",
-    name: "messageError",
-    textLabel: "mensagem de erro",
-    width: "100%",
-    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
-    placeholder: "digite o valor",
-    backgroundColor: theme.colors.neutral[200],
-    borderStyled: {
-      borderBottomWidth: 3,
-      borderColor: theme.colors.red[400],
-    },
-    color: { colorText: theme.colors.neutral[75] },
-    placeholderTextColor: theme.colors.gray[900],
-    messageError: "Message error",
-    onChange: (text: any) => {
-      return text;
-    },
-    onBlur: () => {},
-    onFocus: () => {},
-  },
-};
+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",
+  component: Input,
+
+  args: {
+    testID: "",
+    name: "",
+    textLabel: "",
+    width: "100%",
+    height: 70,
+    placeholder: "",
+
+    backgroundColor: theme.colors.neutral[50],
+    borderStyled: { borderBottomWidth: 1, borderBottomColor: theme.colors.blue[500] },
+    placeholderTextColor: theme.colors.gray[700],
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+
+  parameters: {
+    notes: `
+# Input
+Este é um componente de Input.
+Você usa assim:
+\`\`\`tsx
+<Input text="Eu sou um Input!" />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+let isFocusHigherSpeed = false;
+export const Basic: Story = {
+  name: "input-basic",
+  render: (args) => {
+    const [isFocusHigherSpeed, setIsFocusHigherSpeed] = React.useState<boolean>(false);
+
+    return (
+      <Input
+        {...args}
+        name="input-basic"
+        onFocus={(e) => {
+          setIsFocusHigherSpeed(true);
+          args.onFocus?.(e);
+        }}
+        onBlur={(e) => {
+          setIsFocusHigherSpeed(false);
+          args.onBlur?.(e);
+        }}
+        borderStyled={{
+          borderBottomWidth: 3,
+          borderColor: isFocusHigherSpeed ? theme.colors.neutral[75] : theme.colors.blue[350],
+        }}
+
+        // podendo usar direto as props ou style
+
+        // style={[
+        //   args.style,
+        //   {
+        //     borderBottomWidth: 2,
+        //     borderColor: isFocusHigherSpeed ? "green" : theme.colors.blue[350],
+        //   },
+        // ]}
+      />
+    );
+  },
+  args: {
+    testID: "maior_velocidade_atingida",
+    name: "maior_velocidade_atingida",
+    textLabel: "Maior velocidade do dia",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "informe a velocidade do dia",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: theme.colors.blue[350],
+    },
+    color: { colorText: theme.colors.neutral[75] },
+    placeholderTextColor: theme.colors.gray[900],
+
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => (isFocusHigherSpeed = true),
+    onFocus: () => {
+      isFocusHigherSpeed = true;
+      return isFocusHigherSpeed;
+    },
+  },
+};
+
+export const Append: Story = {
+  name: "input-append",
+  args: {
+    testID: "maior_velocidade_atingida",
+    name: "append",
+    textLabel: "Input para usar com append",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "append",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
+    },
+    color: { colorText: theme.colors.neutral[75] },
+    placeholderTextColor: theme.colors.gray[900],
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+    append: {
+      appendText: "aqui mostra Append Text",
+      appendColor: theme.colors.yellow[100],
+    },
+  },
+};
+export const Password: Story = {
+  name: "input-password",
+  args: {
+    testID: "password",
+    name: "senha",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "digite sua senha",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
+    },
+    placeholderTextColor: theme.colors.gray[900],
+    secureTextEntry: false,
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+};
+export const Data: Story = {
+  name: "input-data",
+  args: {
+    testID: "data",
+    name: "data",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "digite sua data ",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: theme.colors.blue[500],
+    },
+    placeholderTextColor: theme.colors.gray[900],
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+};
+export const Hours: Story = {
+  name: "input-hours",
+  args: {
+    testID: "hours",
+    name: "hours",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "digite a hora",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
+    },
+    placeholderTextColor: theme.colors.gray[900],
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+};
+export const Litragem: Story = {
+  name: "input-litragem",
+  args: {
+    testID: "litragem",
+    name: "litragem",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "digite sua litragem",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: isFocusHigherSpeed ? theme.colors.blue[500] : theme.colors.blue[350],
+    },
+    placeholderTextColor: theme.colors.gray[900],
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+};
+export const Value: Story = {
+  name: "input-value",
+  args: {
+    testID: "value",
+    name: "value",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "digite o valor",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: theme.colors.blue[350],
+    },
+    placeholderTextColor: theme.colors.gray[900],
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+};
+
+export const Label: Story = {
+  name: "input-com-label",
+  args: {
+    testID: "input-com-label",
+    name: "label",
+    textLabel: "Informe seu Km",
+    textLabelPlaceholder: "Km",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "digite o valor do KM",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: theme.colors.blue[350],
+    },
+    color: { colorText: theme.colors.neutral[75] },
+    placeholderTextColor: theme.colors.gray[900],
+    messageError: "",
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+};
+export const MessageError: Story = {
+  name: "input-message-error",
+  args: {
+    testID: "value",
+    name: "messageError",
+    textLabel: "mensagem de erro",
+    width: "100%",
+    paddingStyle: { paddingTop: 20, paddingBottom: 20, paddingLeft: 20, paddingRight: 20 },
+    placeholder: "digite o valor",
+    backgroundColor: theme.colors.neutral[200],
+    borderStyled: {
+      borderBottomWidth: 3,
+      borderColor: theme.colors.red[400],
+    },
+    color: { colorText: theme.colors.neutral[75] },
+    placeholderTextColor: theme.colors.gray[900],
+    messageError: "Message error",
+    onChange: (text: any) => {
+      return text;
+    },
+    onBlur: () => {},
+    onFocus: () => {},
+  },
+};

package/src/stories/menu-item/menu-item.stories.tsx

@@ -0,0 +1,76 @@
+import type { StoryObj, Meta } from "@storybook/react";
+
+import { MenuItem } from "../../components/menu-item";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof MenuItem> = {
+  title: "componente/MenuItem",
+  component: MenuItem,
+  args: {
+    width: 120,
+    height: 90,
+    title: "Histórico",
+    backgroundColor: theme.colors.blue[400],
+    handleNavigation: () => {},
+    typeSelected: "HISTORY",
+  },
+  parameters: {
+    notes: `
+# MenuItem
+
+Este é um componente de MenuItem de menu.
+Você usa assim:
+\`\`\`tsx
+ <MenuItem
+    width={110}
+    height={90}
+    title={"Histórico"}
+    selected={false}
+    handleNavigation={() => {}}
+    typeSelected={"HISTORY"}
+    testID={"COIL"}
+/>
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const MenuItemsInativo: Story = {
+  name: "menu-item-inativo-carregamento",
+  args: {
+    width: 120,
+    height: 90,
+    selected: false,
+    handleNavigation: () => {},
+    typeSelected: "LOADING",
+  },
+};
+
+export const MenuItemsInativoBobina: Story = {
+  name: "menu-item-inativo-bobina",
+  args: {
+    width: 120,
+    height: 90,
+    selected: false,
+    title: "Bobinas",
+    backgroundColor: theme.colors.gray[350],
+    handleNavigation: () => {},
+    typeSelected: "COIL",
+  },
+};
+
+export const MenuItems: Story = {
+  name: "menu-item-ativo-histórico",
+  args: {
+    width: 120,
+    height: 90,
+    title: "Histórico",
+    selected: true,
+    handleNavigation: () => {},
+    typeSelected: "HISTORY",
+  },
+};