react-native-exp-fig 0.1.0

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

@@ -0,0 +1,286 @@
+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: () => {},
+  },
+};

package/src/stories/scheduled-journey-indicators/sheduled-journey-indicators.stories.tsx

@@ -0,0 +1,74 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { ScheduledJourneyIndicators } from "../../components/scheduled-journey-indicators";
+
+// import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof ScheduledJourneyIndicators> = {
+  title: "componente/ScheduledJourneyIndicators",
+  component: ScheduledJourneyIndicators,
+  args: {
+    journey: {},
+    isEdit: true,
+    handleOpenEditModal: () => {},
+  },
+  parameters: {
+    notes: `
+# ScheduledJourneyIndicators
+
+Este é um componente de indicadores da jornada marcada .
+Você usa assim:
+\`\`\`tsx
+<ScheduledJourneyIndicators
+    journey={journey}
+    isEdit={false}
+    handleOpenEditModal={() => {}}
+/>
+\`\`\`
+`,
+  },
+};
+
+const journey = { descricao: "Horas trabalhadas no dia", duracao_horas: "05H" };
+const journeyKM = { descricao: "Km percorrido", duracao_horas: "100km" };
+const journeyEngine = { descricao: "Horas com motor ligado", duracao_horas: "09H" };
+const journeyMiddleSpeed = { descricao: "velocidade média", duracao_horas: "40km/h" };
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const ScheduledJourneyWork: Story = {
+  name: "working-hours",
+  args: {
+    journey,
+    isEdit: false,
+    handleOpenEditModal: () => {},
+  },
+};
+
+export const ScheduledJourneyKm: Story = {
+  name: "km-traveled",
+  args: {
+    journey: journeyKM,
+    isEdit: true,
+    handleOpenEditModal: () => {},
+  },
+};
+
+export const ScheduledJourneyEngine: Story = {
+  name: "engine-running",
+  args: {
+    journey: journeyEngine,
+    isEdit: true,
+    handleOpenEditModal: () => {},
+  },
+};
+
+export const ScheduledJourneyMiddleSpeed: Story = {
+  name: "middle-speed",
+  args: {
+    journey: journeyMiddleSpeed,
+    isEdit: false,
+    handleOpenEditModal: () => {},
+  },
+};

package/src/stories/select-option/select-option.stories.tsx

@@ -0,0 +1,46 @@
+import type { StoryObj, Meta } from "@storybook/react";
+import { SelectOption } from "../../components/selects/select-option";
+
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof SelectOption> = {
+  title: "componente/SelectOption",
+  component: SelectOption,
+  args: { dataOption: [] },
+  parameters: {
+    notes: `
+# SelectOption
+
+Este é um componente de select.
+Você usa assim:
+\`\`\`tsx
+<SelectOption
+    titleLabel="Selecione um motivo"
+    sizeTitleLabel={18}
+    dataOption={options}
+    handleSelectDown={() => {}}
+/>
+\`\`\`
+`,
+  },
+};
+
+const options = [
+  { label: "Local com infraestrutura ruim", value: "option1" },
+  { label: "Pretendo fazer o repouso em casa ou outro local", value: "option2" },
+  { label: "Outro motivo", value: "option3" },
+];
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SelectRefuseRest: Story = {
+  name: "select-refuse-rest-week",
+  args: {
+    dataOption: options,
+    handleSelectDown: () => {},
+    titleLabel: "Selecione uma opção",
+    colortitleLabel: theme.colors.neutral[25],
+  },
+};

package/src/stories/step-indicator/step-indicator.stories.tsx

@@ -0,0 +1,116 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+// components
+import { StepIndicator } from "../../components/step-indicator";
+
+// styles
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof StepIndicator> = {
+  title: "Componente/StepIndicator",
+  component: StepIndicator,
+  args: {
+    data: [],
+    backgroundColorBall: theme.colors.blue[500],
+    titleColor: theme.colors.neutral[25],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+  parameters: {
+    notes: `
+# StepIndicator
+
+Este é um componente de step indicator.
+Você usa assim:
+\`\`\`tsx
+<StepIndicator
+    backgroundColorBall="#050022"
+    type="default"
+    data={dataMock}
+  />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const dataMock = [
+  {
+    id: 1,
+    titleLabel: "Repouso Noturno",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    description: "01:00",
+  },
+  {
+    id: 2,
+    titleLabel: "Descarga",
+    data_inicio: "06/03/2024 14:52",
+    data_fim: "06/03/2024 16:52",
+    description: "02:00",
+  },
+];
+
+const dataMockCustom = [
+  {
+    id: 1,
+    titleLabel: "Pedido Realizado",
+    data_inicio: "",
+    data_fim: "",
+    description: "",
+  },
+  {
+    id: 2,
+    titleLabel: "Pagamento Aprovado",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    description: "01:00",
+  },
+  {
+    id: 3,
+    titleLabel: "Pedido Faturado",
+    data_inicio: "",
+    data_fim: "",
+    description: "",
+  },
+  {
+    id: 4,
+    titleLabel: "Pedido Enviado",
+    data_inicio: "",
+    data_fim: "",
+    description: "",
+  },
+  {
+    id: 4,
+    titleLabel: "Pedido Entregue",
+    data_inicio: "07/03/2024 14:52",
+    data_fim: "07/03/2024 17:52",
+    description: "01:00",
+  },
+];
+
+export const StepIndicatorDefault: Story = {
+  name: "step-indicator-default",
+  args: {
+    data: dataMock,
+    type: "default",
+    backgroundColorBall: theme.colors.blue[500],
+    titleColor: theme.colors.neutral[25],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};
+
+export const StepIndicationCustom: Story = {
+  name: "step-indicator-custom",
+  args: {
+    data: dataMockCustom,
+    type: "custom",
+    backgroundColorBall: theme.colors.orange[150],
+    titleColor: theme.colors.blue[500],
+    textColorDescription: theme.colors.gray[300],
+    titleNumberColor: theme.colors.neutral[25],
+  },
+};

package/src/stories/typography/typography.stories.tsx

@@ -0,0 +1,146 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Typography } from "../../components/typography";
+import { theme } from "../../styles/theme/theme";
+
+const meta: Meta<typeof Typography> = {
+  title: "Componente/Typography",
+  component: Typography,
+  args: {
+    onPress: () => {},
+  },
+  parameters: {
+    notes: `
+# Typography
+
+Este é um componente de texto.
+Você usa assim:
+\`\`\`tsx
+ <Typography text={'Ola Dev'} marginBottom={8} />
+\`\`\`
+`,
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Typography2XS: Story = {
+  name: "Typography-2xs",
+  args: {
+    text: "(2XS) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["2xs"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyXS: Story = {
+  name: "Typography-xs",
+  args: {
+    text: "(XS) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["xs"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographySM: Story = {
+  name: "Typography-sm",
+  args: {
+    text: "(SM) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["sm"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyMD: Story = {
+  name: "Typography-md",
+  args: {
+    text: "(MD) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["md"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyLG: Story = {
+  name: "Typography-lg",
+  args: {
+    text: "(LG) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["lg"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const TypographyXL: Story = {
+  name: "Typography-xl",
+  args: {
+    text: "(XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography2XL: Story = {
+  name: "Typography-2xl",
+  args: {
+    text: "(2XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["2xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography3XL: Story = {
+  name: "Typography-3xl",
+  args: {
+    text: "(3XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["3xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography4XL: Story = {
+  name: "Typography-4xl",
+  args: {
+    text: "(4XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["4xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};
+
+export const Typography5XL: Story = {
+  name: "Typography-5xl",
+  args: {
+    text: "(5XL) Expresso Figueiredo",
+    align: "center",
+    color: theme.colors.neutral[25],
+    size: theme.fontSizes["5xl"],
+    fontFamily: theme.fonts.inter_regular_400,
+    fontWeight: "400",
+  },
+};