@stardust-ds/react-native

Stardust - React Native

Seja bem vindo a sua library UI de React Native desenvolvido pelo time mobile da Ubistart!

Essa library foi desenvolvida para agilizar o processo de criação de aplicativos em React Native e extrair o máximo de complexidade do lado do desenvolvedor para que o processo seja mais ágil.

Componentes

• Badge
• Button
• Checkbox
• DatePicker
• Input
• Radio
• Select
• Switch
• Tag
• Typography
• Link
• Toast
• Skeleton

Como utilizar o @stardust-ds/react-native?

Nossa library faz uso de algumas dependências e configurações padrões que são necessárias para o nosso funcionamento default que segue o nosso Design System.

Essas dependências são:

SVG

Necessário configurar duas libraries:

• 1. react-native-animatable

  yarn add react-native-animatable

• 2. react-native-svg

  yarn add react-native-svg

  • 2.1 caso esteja utilizando Typescript (o que recomendamos), precisará criar um arquivo, ou adicionar caso exista um, para que o typescript reconheça os imports dos svgs: custom.d.ts:

  declare module '*.svg' {
    const content: any;
    export default content;
  }

• 3. react-native-svg-transformer

  yarn add react-native-svg-transformer

  • 3.1 Para podermos manipular as cores dos svg que eventualmente usará, precisamos criar um arquivo para a configuração desses svgs. .svgrrc

    {
      "replaceAttrValues": {
        "#000000": "{props.fill}",
        "black": "{props.fill}"
      }
    }

  ⚠️ Tenha ATENÇÃO que caso a cor do seu svg não for um dos valores '#000000' ou 'black', a cor do mesmo não será alterada. Para isso, ou mude as cores do svg para tais cores mencionadas ou adicione uma nova propriedade no 'replaceAttrValues' com a cor que quer substituir. exemplo: "red": "{props.fill}"

Tipografia - customizada (Poppins)

• 1. É necessário criar um arquivo chamado de react-native.config.js caso o teu projeto não possua.
• 2. Criar uma pasta assets/fonts e colocar os arquivos de fontes dentro.
• 3. react-native.config.js:

    module.exports = {
      assets: ['./assets/fonts'],
    };

• 4. Então execute o comando

  = 0.69

  npx react-native-asset

  < 0.69

  npx react-native link

  Para maior entendimento da utilização do Typography em diferentes sistemas operacionais, consulte a documentação específica aqui

Instalando a library

Após as configurações acima, temos que instalar a nossa library como uma dependência no vosso projeto.

yarn add @stardust-ds/react-native #ou npm install @stardust-ds/react-native

cd ios

pod install

Agora precisamos fazer algumas configurações para podermos utilizar os recursos dentro do projeto.

Precisamos encapsular o seu APP no ThemeManager para o tema ser acessível em toda a aplicação:

import { ThemeManager } from '@stardust-ds/react-native';

const App = () => (
 <ThemeManager>
   <SeuAppAqui />
 </ThemeManager>
);

Com essa configuração já será possível fazer a utilização dos componentes disponíveis na library.

Utilizando os componentes

import { ThemeManager, Button } from '@stardust-ds/react-native';


const App = () => (
 <ThemeManager>
   <Button label="Stardust" onPress={() => console.log("Stardust button"!)} />
 </ThemeManager>
);

Styling - Customizando o Tema da library

Nossa library tem a possibilidade de sobrescrever os estilos definidos por padrão, usados no nosso Design System.

Para isso, utilize a função extendTheme() para inserir as propriedades do seu tema, ou sobrescrever as já existentes, como por exemplo:

import { ThemeManager, extendTheme } from '@stardust-ds/react-native';

const theme = {
 color: {
  ubistart: "blue",
 },
}

const customTheme = extendTheme(theme);

const App = () => (
 <ThemeManager theme={customTheme}>
   <SeuAppAqui />
 </ThemeManager>
);

Após essa definição, já estará disponível para utilização a propriedade theme.brand.color.ubistart

Para acessar essa propriedade temos que invocar o nosso custom hook de tema e utilizar a propriedade theme dele.

import { useTheme, Button } from '@stardust-ds/react-native';

const CustomButton = () => {
 const theme = useTheme();
 //theme.brand.color.ubistart já é acessível aqui.

 return <Button bgColor={theme.brand.color.ubistart}>

};

export default CustomButton;

Typing theme - dizendo para seu tema como agir

Se estiver utilizando Typescript (altamente recomendado), para que seu projeto identifique as propriedades sobrescritas no tema, deve criar um arquivo de tipos para sobrescrever o type da library também.

como por exemplo:

type.d.ts

import { customTheme } from './App'; // lembre de exportar essa informação no seu App ou onde quer que tenha definido ela e importe aqui

type Theme = typeof customTheme;

declare module '@stardust-ds/react-native' {
  export interface StardustTheme extends Theme {}
  export function useTheme(): Theme;
}

Isso irá fazer com que seu typescript identifique as propriedades novas que passares para o ThemeManager e te ajudará na hora do desenvolvimento.

Caso esteja utilizando o styled components, deve fazer a etapa a seguir para que o DefaultTheme seja sobrescrito:

...
import {StardustTheme} from '@stardust-ds/react-native'

...

declare module 'styled-components' {
  export interface DefaultTheme extends StardustTheme
}

Para finalizar, adicione o arquivo type.d.ts na propriedade include do seu arquivo tsconfig.

exemplo:

...
"include": [
    "src", "type.d.ts"
  ],
...