lib-components-delta-apps v1.0.30

lib-components-delta-apps

Nesta biblioteca você encontra um grupo de componentes, constantes e funções, para o desenvolvimento de app dentro da Delta Global.

Instalação

Instale lib-components-delta-apps com npm

npm i lib-components-delta-apps

Configurações adicionais

É necessária a realização de algumas configurações adiocionais no seu projeto.

Adicionar as dependências:

Link: react-native-svg

Expo:

npx expo install react-native-svg

RN CLI:

npx expo install react-native-svg

• Para iOS:

cd ios && pod install

• Para Android:

Sem configurações adicionais

Link: expo-font

npx expo install expo-font

• Para iOS:

cd ios && pod install

• Exemplo

import React from "react";
import { useFonts } from "expo-font";

function App() {
  // Fontes listadas abaixo são usadas na biblioteca
  const [fontsLoaded] = useFonts({
    "Inter-Light": require("../../assets/fonts/Inter-Light.ttf"),
    "Inter-Regular": require("../../assets/fonts/Inter-Regular.ttf"),
    "Inter-Medium": require("../../assets/fonts/Inter-Medium.ttf"),
    "Inter-SemiBold": require("../../assets/fonts/Inter-SemiBold.ttf"),
    "Inter-Bold": require("../../assets/fonts/Inter-Bold.ttf"),
    "Roboto-Regular": require("../../assets/fonts/Roboto-Regular.ttf"),
    "Roboto-Medium": require("../../assets/fonts/Roboto-Medium.ttf"),
    "Roboto-Light": require("../../assets/fonts/Roboto-Light.ttf"),
    "Roboto-Bold": require("../../assets/fonts/Roboto-Bold.ttf"),
  });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded) {
      onFontsLoaded?.();
    }
  }, [fontsLoaded, onFontsLoaded]);

  if (!fontsLoaded) {
    return null;
  }

  return (
    <View onLayout={onLayoutRootView} style={{ flex: 1 }}>
      {children}
    </View>
  );
}

Stack utilizada

Mobile: React Native. Expo e Typescript

Documentação

<ButtonExpandable />

import { ButtonExpandable } from "lib-components-delta-apps";

const handlePress = () => {
  // Código a ser executado
};

function App() {
  return (
    <ButtonExpandable
      title="Botão Expansível"
      icon="list_on"
      isOpen={true}
      rotation={180}
      disabled={false}
      onPress={handlePress}
      theme="light"
    />
  );
}

<ButtonMenu />

import { ButtonMenu } from "lib-components-delta-apps";

const handlePress = () => {
  // Código a ser executado
};

function App() {
  return (
    <ButtonMenu
      text="Botão"
      icon="list_on"
      onPress={handlePress}
      active={true}
      theme="light"
    />
  );
}

<ButtonRounded />

import { ButtonRounded } from "lib-components-delta-apps";

const handlePress = () => {
  // Código a ser executado
};

function App() {
  return (
    <ButtonRounded
      text="Botão"
      icon="list_on"
      onPress={handlePress}
      disabled={true}
      theme="light"
    />
  );
}

<CardPosition />

import { CardPosition, Colors } from "lib-components-delta-apps";

const colorsTheme = Colors["light"];

function App() {
  return (
    <CardPosition
      numCard={1}
      eventTime={"13:45"}
      eventTitle={"Excesso de Velocidade"}
      speed={"110.00"}
      location={"Rua Olinda, 140"}
      color={colorsTheme.red}
      typeVehicle={"truck"}
      theme={"light"}
    />
  );
}

<Checkbox />

    import { Checkbox } from 'lib-components-delta-apps'

    const colorsTheme = Colors['light']

    function App() {

        const [status, setStatus] = useState(false)

        return (
            <Checkbox
                status={status}
                setStatus={setStatus}
                theme={'light'}
            >
        )
    }

<Icon />

    import { Icon } from 'lib-components-delta-apps'

    const colorsTheme = Colors['light']

    function App() {

        return (
            <Icon
                name={'close'}
                size={30}
                color={colorsTheme.red}
            >
        )
    }

<ListGroup />

    import { ListGroup } from 'lib-components-delta-apps'

    const colorsTheme = Colors['light']

    const list = [
      { title: 'Item 1', onPress: () => {} },
      { title: 'Item 2', onPress: () => {} }
    ]

    function App() {

        return (
            <ListGroup
              title='Título da Lista'
              dataList={list}
              gap={0}
              textKey='list-veiculos'
              ComponentListItem={(item) => <LIDefault first={item.firstKey} text={item.title} onPress={item.onPress} />}
              theme={'light'}
            >
        )
    }

<Tag></Tag>

import { Tag, Colors } from "lib-components-delta-apps";

const colorsTheme = Colors["light"];

function App() {
  return (
    <Tag
      color={colorsTheme.red}
      icon="list_on"
      size="small"
      type="solid"
      theme="light"
    >
      Teste
    </Tag>
  );
}

Usado por

Esse projeto é usado pelas seguintes empresas:

• Delta Global

Autores

• @racahumada
• @lucas1207