polijrorg/eh-tudo-nosso

Coleção oficial de libs do NTec para projetos em React e React Native (em TypeScript)

Eh tudo nosso 💯

Coleção oficial de libs para te ajudar a fazer projetos em 💻 React e 📱 React Native, feita por e para o NTec 🐒

Pacotes 📦

@ntec/native 📱

@ntec/native 📱

Lib de componentes básicos para utilizar em 📱 React Native.

Exemplos Como instalar

📎 Exemplos:

DropDown:

import { useState } from "react";
import { DropDown } from "@ntec/native";

const options = ["Muito bom! 😜", "Estou impressionado. 😳"];

const Component = () => {
  const [selectedOption, setSelectedOption] = useState(options[0]);

  return (
    <DropDown
      label="Selecione a opção"
      disableSelectAll
      value={selectedOption}
      onChange={setSelectedOption}
      options={options}
    />
  );
};

export default Component;

👾 Como instalar:

1. Rode no diretório do seu projeto:

expo add @ntec/native react-native-reanimated

2. Adicione um arquivo metro.config.js no root do projeto com este conteúdo:

const { getDefaultConfig } = require('expo/metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig(__dirname);
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
    },
    resolver: {
      assetExts: assetExts.filter((ext) => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  };
})();

3. Altere o conteúdo do arquivo babel.config.js para isto:

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    plugins: [
      [
        "module-resolver",
        {
          extensions: [".ts", ".tsx", ".jsx", ".js", ".json"],
        },
      ],
      "react-native-reanimated/plugin",
    ],
  };
};

4. Reinicie o Expo com expo start -c

@ntec/utils 🛠

@ntec/utils 🛠

Lib de funções bem úteis de 🛠 TypeScript.

Exemplos Como instalar

📎 Exemplos:

keySort:

Alternativa ao .sort() do TS, que pode ser um saco de se utilizar. Consegue ordenar automaticamente por:

• string
• number
• boolean

import { keySort } from "@ntec/utils";

const people = [{ name: "Mateus" }, { name: "Jorel" }, { name: "Amanda" }];

// Ordena em relação ao nome:
const ordered = keySort(people, (p) => p.name);

console.log(ordered);
// Resultado: [{ name: "Amanda" }, { name: "Jorel" }, { name: "Mateus" }];

wait:

Versão assíncrona do setTimeout() do TS. Recebe um valor em milissegundos e espera pela duração definida.

import { wait } from "@ntec/utils";

const call = async () => {
  await wait(3000);
  console.log("3 segundos depois ⏱");
};

call();

👾 Como instalar:

1. Rode no diretório do seu projeto:

yarn add @ntec/utils

Documentação 📓

🚧 Estado de manutenção... Aguarde enquanto a mágica está sendo feita 👀