0.11.0 • Published 3 years ago

ame-miniapp-components-web

Licence

MIT

Version

0.11.0

Deps

Size

12.4 MB

Vulns

Weekly

Summary Dependency Versions

Tokens

Bordas

Alguns componentes experimentam o uso de bordas. Você poderá alterar propriedades básicas de borda como espessura ou cor.

borderWidth

Os valores abaixo indicam espessuras de borda, começando da mais fina para a mais grossa:

token	valor
none	0px
hairline	1px
thin	2px
thick	4px
heavy	8px

borderRadius

Abaixo os valores aceitos para arredondamento das bordas

token	valor
none	0px
micro	4px
small	8px
medium	16px
pill	500px
circular	50%

Veja aqui quais os tokens de corque você pode utilizar no borderColor

Os padrões de design estabelem que apenas as cores abaixo podem ser utilizadas. As cores são inseridas através dos tokens em componentes que possuem tais propriedades como: borderColor, color, backgroundColor e etc.

Primary

primary-100

primary-300

primary

primary-700

primary-900

Secondary

secondary-300

secondary

primary-700

Neutral

neutral-100

neutral-300

neutral-500

neutral-700

neutral-900

Feedback

positive-300

positive-700

warning-300

warning-700

negative-300

negative-700

Extras

support-01

support-02

support-03

background

none

Espaçamento

Em determinados momentos você precisará de uso de margem, para isso você poderá usar as propriedades descritas abaixo em componentes que aceitam todas ou algumas dessas propriedades.

Valores para propriedades de Margin e Padding

token	valores
'none'	0px
'quark'	4px
'nano'	8px
'extra-small'	16px
'small'	24px
'medium'	32px
'large'	40px
'extra-large'	48px
'big'	56px
'display'	64px
'huge'	80px
'giant'	120px
'jumbo'	160px
'immense'	200px

Flex

As propriedades abaixo afetam como os nós internos de um componente são ajustados ao seu conteúdo. São muito parecidas com as propriedades flex do CSS. Veja abaixo quais são:

Propriedades e Valores

Propriedade	Valores Aceitos
direction	'row', 'row-reverse', 'column', 'column-reverse'
align	'center', 'start', 'end'
justify	'center', 'start', 'end', 'between', 'around'
flexWrap	'wrap', 'nowrap', 'reverse'
flexNone	boolean

Tipografia

Propriedades e Valores

Propriedade	Valores Aceitos
fontSize	'quark' (12px), 'nano' (14px), 'extra-small' (16px), 'small' (20px), 'medium'(24px), 'large' (32px), 'extra-large' (40px), 'big' (48px), 'display'(56px), 'huge' (64px), 'giant' (72px), 'jumbo'(80px)
textAlign	'left', 'center', 'right', 'justify'
lineHeight	'small' (100%), 'medium' (150%), 'large' (200%)
fontWeight	'light' (300), 'regular' (400), 'medium' (500), 'bold' (700)

Target

token	valores
'heading-display'	font-size: '56px'; line-height: 200%; font-weight: 700
'heading-extra-large'	font-size: '48px'; line-height: 200%; font-weight: 700
'heading-large'	font-size: '40px'; line-height: 200%; font-weight: 700
'heading-medium'	font-size: '32px'; line-height: 200%; font-weight: 700
'heading-small'	font-size: '24px'; line-height: 200%; font-weight: 700
'title-large'	font-size: '32px'; line-height: 150%; font-weight: 700
'title-medium'	font-size: '24px'; line-height: 150%; font-weight: 700
'title-small'	font-size: '20px'; line-height: 150%; font-weight: 700
'subtitle-large'	font-size: '24px'; line-height: 150%; font-weight: 700
'subtitle-medium'	font-size: '20px'; line-height: 150%; font-weight: 700
'subtitle-small'	font-size: '16px'; line-height: 150%; font-weight: 700
'body-regular'	font-size: '16px'; line-height: 150%; font-weight: 400
'body-medium'	font-size: '16px'; line-height: 150%; font-weight: 500
'body-bold'	font-size: '16px'; line-height: 150%; font-weight: 700
'caption-regular'	font-size: '14px'; line-height: 100%; font-weight: 400
'caption-bold'	font-size: '14px'; line-height: 100%; font-weight: 700
'disclaimer-regular'	font-size: '12px'; line-height: 100%; font-weight: 400
'disclaimer-bold'	font-size: '12px'; line-height: 100%; font-weight: 700

Opacidade

Em determinados momentos você pode sentir a necessidade de tornar um elemento um pouco translúcido.

Para isto você deve verificar se o componente presente aceita a propriedade opacity.

opacity

token	valores
'trnasparent'	0
'semi-transparent'	0.16
'light'	0.32
'medium'	0.4
'intense'	0.64
'semiopaque'	0.8

Sombras

Tokens e valores

token	valores
'level-1'	0 4px 8px rgb(28 28 28 / 8%)
'level-2'	0 8px 24px rgb(28 28 28 / 16%)
'level-3'	0 16px 32px rgb(28 28 28 / 16%)
'level-4'	0 16px 48px rgb(28 28 28 / 24%)

Componentes Simples

Accordion

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente accordion para exibição de textos no estilo FAQ.

Exemplo

accordion

Utilização


 state = {
    lorem: `Lorem ipsum dolor sit amet consectetur adipisicing elit.
    Reprehenderit doloribus quis magni possimus! Architecto rem
    veritatis est quaerat, ab inventore quidem eaque maxime? Eius
    dolore quod totam vero mollitia saepe! Lorem ipsum dolor sit amet,
    consectetur adipisicing elit. Ipsam ex itaque sint aliquid quae
    vel ea ratione dolores quia blanditiis dolor nihil, in hic
    praesentium temporibus? Iste porro distinctio nisi! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Fugit sed atque ab ex
    qui ea ullam nisi nemo magni ut maiores mollitia libero corrupti
    cupiditate unde dignissimos, est soluta nesciunt! Lorem ipsum
    dolor sit amet consectetur adipisicing elit. Quo, voluptate et
    dignissimos adipisci sit voluptas vero repellendus accusantium,
    nostrum voluptatum maiores totam quidem ipsum ipsam eius ad
    deserunt facere non!`,
  };
  render() {
    return (
      <View padding='nano'>
        <View direction='column' align='center'>
          <Text fontSize='medium' fontWeight='bold'>
            Componente{' '}
            <Text color='primary' fontSize='medium' fontWeight='bold'>
              Accordion
            </Text>
          </Text>
        </View>
        <Accordion>
          <AccordionItem title='Seguro Celular'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Seguro Casa'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Seguro Pet'>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Quanto Custa?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tempo minimo de carencia?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
            <View paddingBottom='nano' paddingTop='nano'>
              <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
            </View>
            <Text>{this.state.lorem}</Text>
            <Text>{this.state.lorem}</Text>
          </AccordionItem>
          <AccordionItem title='Novos Seguros'>
            <Accordion>
              <AccordionItem title='Seguro Celular'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
              <AccordionItem title='Seguro Casa'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
              <AccordionItem title='Seguro Pet'>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Quanto Custa?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>
                    Qual o tempo minimo de carencia?
                  </Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
                <View paddingBottom='nano' paddingTop='nano'>
                  <Text fontWeight='bold'>Qual o tipo de proteção?</Text>
                </View>
                <Text>{this.state.lorem}</Text>
                <Text>{this.state.lorem}</Text>
              </AccordionItem>
            </Accordion>
          </AccordionItem>
        </Accordion>
      </View>

Propriedades Accordion

Propriedade	Descrição	Type	Default
children	Recebe 1 ou mais componente `AccordionItem` para ser renderizado dentro do `Accordion`.	component	null
disabled	Desabilita o Componente.	boolean	false

Propriedades AccordionItem

Propriedade	Descrição	Type	Default
title	Título de cada seção do Accordion	string	null
children	Conteúdo de cada seção. Pode receber o próprio componente `Accordion`, para iniciar uma nova cadeia de elementos.	component	null

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente Ads para renderização de anuncios.

ads

Utilização

<Ads
  path='/12345678912/circulo_3'
  size={['fluid', [76, 76]]}
  id={'div-gpt-ad-1234567891234-0'}
/>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
path	Valor do path relacionado ao anúncio a ser renderizado.	String	null	sim
size	Tamanho desejado para renderização do anúncio.	Array	null	sim
id	Valor do Id relacionado ao anúncio a ser renderizado.	String	null	sim
targetKey	Chave do target usado para segmentacão do anúncio.	string	null	Não
targetValue	Valor do target usado para segmentacão do anúncio.	string	null	Não

Animator

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Utilize este componente para exibir animações.

As animações são aceitas no formato JSON (Lottie).

Animações gratuitas podem ser encontradas no site LottieFiles.

Exemplo

animator

Utilização

<Window>
  <Animator animationData={myAnimationJSON}/>
</Window>

Propriedades

Propriedade	Descrição	Type	Default
animationData	Propriedade que recebe a animação em JSON Lottie. O utilitário `StyleResolver` possui um método para obter um JSON de animação padrão para carregamento.	JSON	null
width	Seta uma largura para a animação. O tamanho por padrão é 200px	number ou string	null
height	Seta uma altura para a animação. O tamanho por padrão é 200px	number ou string	null

Button

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Exibe um botão na tela. Nesta versão temos apenas um Componente Button para trabalhar.

Exemplo

Utilização

 <Window>
    <View direction='column' align='center'>
      <Text fontSize='medium' fontWeight='bold'>
        Componente Button
      </Text>

      <View>
        <View marginTop='nano' direction='column' align='center'>
          <Button
            display={false}
            dataCy='button-primary'
            onPress={() =>
              this.setState({ buttonPressText: 'Primary Normal Medium' })
            }
            label="Botão padrão"
            size="medium"
        />
        </View>
      </View>
    </View>
  </Window>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
variant	Define qual será o estilo do botão, as propriedades são 'primary', 'secondary' 'global', 'text' e 'danger'	string	primary	Não
onPress	Recebe uma função para ser executada ao pressionarmos o botão	function	null	Sim
label	Define um texto a ser renderizado no componente	string	true	Não
size	Define o tamanho do componente. os valores são: 'medium' e 'small'	boolean	true	Não
disabled	Insere um estilo de desabilitado e inutiliza a função do onPress	boolean	false	Não

Exemplos

Abaixo, alguns tipos de botões:

two-buttons

  <Window>
        <View
          direction="column"
          align="center"
          justify="center"
          marginTop="large"
        >
          <View
            align="center"
            justify="center"
            width="780px"
            backgroundColor="neutral-300"
            padding="large"
            borderRadius="small"
            shadow="level-2"
            direction="column"
          >
            <Text fontSize="medium" textAlign="center">
              Exemplo do componente [b]Button[/b]
            </Text>
            <View
              margin="small"
              width="500px"
              direction="column"
              justify="center"
            >
              <Text fontSize="medium">[b]Primary:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button onClick={() => console.log("click")} label="Button" />
                <Button
                  onClick={() => console.log("click")}
                  label="Button"
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Secondary:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="secondary"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                />

                <Button
                  variant="secondary"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Global:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="global"
                  label="Button Global"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="global"
                  label="Button Global"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Text:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="text"
                  label="Button Text"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="text"
                  label="Button Text"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
              <Text fontSize="medium">[b]Danger:[/b]</Text>
              <View
                marginBottom="extra-large"
                marginTop="extra-small"
                justify="around"
              >
                <Button
                  variant="danger"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                />
                <Button
                  variant="danger"
                  label="Button Secondary"
                  onClick={() => console.log("click")}
                  disabled
                />
              </View>
            </View>
          </View>
        </View>
      </Window>

Carousel

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente auxiliar para mostrar conteúdos dentro de um carrossel. Os conteúdos podem ser qualquer estrutura de componente (View, Banner, Card) propriedades.

Exemplo

carrousel

Utilização

Defina uma lista de componentes a serem exibidos, nesse caso colocamos o Text, mas você pode inserir qualquer componente.

<Carousel autoplay>
  <Text>Slide 1</Text>
  <Text>Slide 2</Text>
</Carousel>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
bullets	Mostrar indicadores de ponto	Boolean	true	não
speed	Velocidade de animação de slide / fade em milisegundos	Number	5000	não
autoplay	Define que os slides passem de forma automática.	Boolean	false	não
slidePosition	Nessa propriedade você pode passar a posição em que o slide deve ser renderizado inicilamente, onde 0 significa a primeira posição.	Number	0	não
lastSlide	Função que retorna true sempre que o último slide estiver sendo exibido.	Function	null	não
firstSlide	Função que retorna true quando o primeiro slide estiver sendo exibido.	Function	null	não
currentSlide	Função que retorna o index do slide que está sendo exibido.	Function	null	não

Chart

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

O grupo de componentes Chart permitem exibir alguns tipos de dados plotados na tela.

Chart.Bar

Utilizado para mostrar dados em um gráfico de barras.

Exemplo

chartbar

Utilização

 state = {
       labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
       dataOptions:[
        {
            label:"Prata",
            data: [10, 20, 30, 40, 30, 15],
            color: '#c0c0c0',
          },
          {
            label:"Ouro",
            data: [90, 70, 30, 30, 40, 80],
            color :'#ffd700'
          },
       ],
    }
 <Chart.Bar
     data={this.state.dataOptions}
     labels={this.state.labels}
     title="Gráfico em Barra"
  />

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
labels	Array de textos que conceberão as propriedades do gráfico .	String[]	null	sim
data	Array do tipo DataBar que vai definir os valores, cores das barras do gráfico	DataBar[]	null	sim
title	Título do gráfico	String	null	não
position	Posição do título no gráfico	String	null	não

Chart.Line

Utilizado para a exibição de dados em um gráfico de linhas.

Exemplo

chartline

Utilização

state= {
       labels: ['Janeiro', 'Fevereiro', 'Março','Abril', 'Maio', 'Junho'],
       dataOptions:[
        {
            label:"Prata",
            data: [7, 2, 6,10,100,4],
            lineColor: 'blue',
            color: 'blue'
          },
          {
            label:"Ouro",
            data: [10, 20, 10, 40,10,10],
            lineColor: 'orange',
            color: 'orange'
          },
       ],
      }
<Chart.Line
    data={this.state.dataOptions}
    labels={this.state.labels}
    title="Gráfico em Linha"
/>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
labels	Array de textos que conceberão as propriedades do gráfico.	String[]	null	sim
data	Array do tipo DataLine que vai definir os valores, cores das linhas no gráfico	DataLine[]	null	sim
title	Título do gráfico	String	null	não
position	Posição do título no gráfico	String	null	não

Chart.Pie

Utilizado para mostrar dados em formato de gráfico de pizza.

Exemplo

chartpie

Utilização

 state= {
       labels:['Javascript', 'Java', 'Typescript'],
       dataPieOptions:{
        label: 'Linguagens de programação',
        data: [120, 60, 80],
        backgroundColor: [
          'rgb(255, 99, 132)',
          'rgb(54, 162, 235)',
          'rgb(255, 206, 86)',
        ],
        borderColor: [
          '#444',
          '#444',
          '#444',
        ],
        borderWidth: 1,
      }
    }
<Chart.Pie
    data={this.state.dataPieOptions}
    labels={this.state.labels}
    title='Gráfico Pie'
/>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
labels	Array de textos que conceberão as propriedades do gráfico.	String[]	null	sim
data	Objeto do tipo DataPue que vai definir os valores e cores das das partes do gráfico	DataPie	null	sim

Checkbox

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Caixa de seleção que permite que o usuário selecione um ou mais itens de um conjunto.

Exemplo

checkbox

Utilização


 state = {
    checked: false
  };

  <Checkbox
    dataCy='checkbox-test'
    id='3124129'
    value='teste'
    checked={this.state.checked}
    onChange={e => {
      this.setState({ checked: e.checked });
    }}
  >
    Seu texto
  </Checkbox>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
checked	Define o estado do checkbox	boolean	false	Sim
onChange	Função que retorna o estado e o value	function	null	Sim
value	Define o valor para o checkbox	string	null	Não
disabled	Desabilita o checkbox	boolean	false	Não
id	Passa um id para o componente	number	aleatório	Não
group	Recebe um array com os estados de outros checkbox para controle do componente que recebe a propriedade 'group'	array	null	Não

Chip

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Exemplo

chip

Utilização

 state = {
    data: [
      {
        id: 1,
        label: 'label 1',
        value: 'chip-7',
      },
      {
        id: 2,
        label: 'label 2',
        value: 'chip-8',
        icon: '',
      },
      {
        id: 3,
        label: 'label 3',
        value: 'chip-9',
        icon: '',
      },
    ],
  };

  <Window>
    <View>
      <Text textAlign='center' fontSize='lg'>
        Chip
      </Text>
    </View>
    <View padding='nano'>
      <View
        marginBottom='quark'
        flexWrap='wrap'
        padding='quark'
        backgroundColor='none'>
        <View margin='quark' width='auto'>
          <Chip
            value='chip-1'
            icon='feedback-success'
            label='Label'
            onChange={(e) => console.log(e)}
          />
        </View>
        <View margin='quark' width='auto'>
          <Chip label='Label' value='chip-2' />
        </View>
        <View margin='quark' width='auto'>
          <Chip label='Label' value='chip-3' />
        </View>
      </View>
      <View flexWrap='wrap' padding='quark' backgroundColor='secondary'>
        {this.state.data.map((item, index) => {
          return (
            <View key={index} margin='quark' width='auto'>
              <Chip
                icon={item.icon}
                label={item.label}
                value={item.value}
                index={index}
                data={this.state.data}
                onChange={(e) => console.log(e)}
                dataChange={(e) => this.setState({ data: e })}
              />
            </View>
          );
        })}
      </View>
    </View>
  </Window>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
icon	Ícone a ser exibido do lado esquerdo do label. Recebe um token da lista de icones que pode ser encontrado aqui	String	none	não
label	Texto a ser renderizado no componente	String	none	sim
active	Ativa o componente selecionado	Boolean	false	não
disabled	Desabilita o componente	Boolean	false	não
value	Valor do componente	String	none	sim
onChange	Retorna o value do componente

CurrencyInput

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Exibe uma entrada de valor monetário na tela.

Exemplo

currencyinput

Utilização

<CurrencyInput
    maxLength={8}
    prefix={€}
    value={459}
    onChange={value => { ... }}
/>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
value	Valor inicial que será renderizado no componente.	number	null	Sim
onChange	Função a ser executada quando o valor é alterado, retornando o valor,	function	null	Sim
prefix	Prefixo do tipo de moeda utilizada. Padrão é R$	string	R$	Não
maxLength	Quantidade máxima de caracteres.	number	9	Não
disableEdit	Esconde o botão Editar	boolean	false	Não
disabled	Desabilita o componente.	boolean	false	Não
flat	Altera a aparência do componente para uma versão mais simples.	boolean	false	Não
color	Modifica a cor do CurrencyInput.	string	'primary'	Não

DataTable

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Insere um datatable para exibição de dados

Componente feito apartir de da biblioteca react-data-table-component.

Documentação da Biblioteca: https://react-data-table-component.netlify.app/?path=/docs/getting-started-intro--page

Exemplo

datatable

Utilização

<View>
  <DataTable
    title="Exemplo de DataTable"
    data={this.state.data}
    columns={this.state.columns}
  />
</View>

DatePicker

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente usado para seleção de data. Essa seleção pode ser aplicada por meio de um input de texto ou selecionando num calendário interativo.

Exemplo

datepicker

Utilização

<DatePicker
    value={new Date()}
    onChange={e => this.onDateChange(e)}
    placeholder="Data de Nascimento"
    minDate={new Date(1930, 0, 1)}
    maxDate={new Date(2022, 11, 18)}
/>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
value	Recebe uma data inicial. É usado para atualizar a data do componente.	Date	null	Sim
onChange	Função a ser executada quando a data é alterada, pelo input ou pelo calendário	Function	null	Sim
minDate	Determina a menor data possível.	Date	null	Não
maxDate	Determina a maior data possível.	Date	null	Não
locale	Determina a localização para formato da data.	string	"pt-br"	Não
placeholder	Determina o texto de placeholder do componente.	boolean	false	Não
disabled	Desabilita o componente.	boolean	false	Não
hint	Adiciona um texto alternativo ao componente.	string	null	Não
error	Altera o componente para uma cor de aviso.	boolean	false	Não

Grid

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Utilize este componente em conjunto com o Col para organização de elementos.

Exemplo

grid

Utilização

<View>
  <Grid>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="negative-300">
        <Text>Coluna 1</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: "hidden", lg: 3 }}>
      <View backgroundColor="positive-300">
        <Text>Coluna 2</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="warning-700">
        <Text>Coluna 3</Text>
      </View>
    </Col>
    <Col columnSize={{ sm: 12, md: 6, lg: 3 }}>
      <View backgroundColor="support-01">
        <Text>Coluna 4</Text>
      </View>
    </Col>
  </Grid>
</View>

Como visto do exemplo acima, o componente Col, é usado como children do componente Grid para determinar cada coluna do grid.

Propriedades

Propriedade	Descrição	Type	Default
noGap	Tira o espaçamento entre as colunas	boolean	false

Propriedades Col

Propriedade	Descrição	Type	Default
columnSize	Recebe um objeto contendo os 3 break-points e seus respectivos valores. Os valores representam quantas colunas, num total de 12, o elemento vai ocupar. Existe ainda a opção de usar "hidden" para o valor caso queira esconder a coluna em um determinado break point. Ex: {sm: 12, md: 6, lg: 3}	object	false

Hint

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente para exibir alertas em formulários

Exemplo

hint

Utilização

  <Hint
    status='success'
    text='Retorno de sucesso'
    show={true}
  />

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
type	Define qual será o estilo do Hint, as propriedades são 'success', 'warning' e 'error'	string	null	Não
show	Parâmetro que define se o Hint será exibido ou não	boolean	false	não

Icon

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente que exibe um Ícone.

Exemplo

icon

Utilização

<Icon icon="ame-outline"/>
<Icon icon="ame-outline"/>

Propriedades

Propriedade	Descrição	Type	Default
icon	Carrega ícones de acordo com o token recebido.	number	ame-outline
colorIcon	Define a cor do ícone. Veja os valores	boolean	neutral-500
width	Define a largura do ícone, pode ser usado em porcentagem ou pixels	string	33px
height	Define a altura do ícone, pode ser usado em porcentagem ou pixels	string	auto

Segue abaixo a lista de ícones:

accounts-outline
accounts-solid
adress-outline
adress-solid
agenda-outline
agenda-solid
alert-outline
alert-solid
ame-banking
ame-outline
ame-solid
attach
bank-outline
bank-solid
bar-code
barbecue-outline
barbecue-solid
bell-notification-outline
bell-notification-solid
bestcb
best-deals-outline
bikeitau
bus-outline
bus-solid
cabify
caixa
calendar-outline
calendar-solid
camera-outline
camera-solid
card-ame-outline
card-ame-solid
carimbo
cart-outline
cart-solid
cashback
cat
chat-mail-outline
chat-mail-solid
chat-message-outline
chat-message-solid
chat-sms-outline
chat-sms-solid
chat-whatsapp-outline
chat-whatsapp-solid
cinema-outline
cinema-solid
clock-outline
clock-solid
close
clothing-tshirt-outline
clothing-tshirt-solid
colapse
configuration-outline
configuration-solid
conversion
copy-outline
copy-solid
cracha
credit-card-ame
credit-card-outline
credit-card-solid
cupom-outline
cupom-solid
curiosities-outline
curiosities-solid
dashboard-outline
dashboard-solid
delivery-outline
delivery-solid
deposit-outline
deposit-solid
deslike-no-outline
deslike-no-solid
details
diarista-outline
diarista-solid
divide
documents-cpf
documents-id-outline
documents-id-solid
donation-art
donation-autonomous
donation-communities
donation-coronavirus
donation-environement
donation-fomezero
donation-girlpower
donation-healthcare
donation-kids
donation-planet
donation-rainbow
donation-sambarj
donation-sambasalvador
donation-sambasp
donation-seniors
donations-education
donations
down
drconsulta
edit-outline
edit-solid
electrician
emprestimo-loan-outline
emprestimo-loan-solid
emprestimopj-loan
ensure
equal
events-outline
events-solid
expand
extended-warranty
extrato-outline
extrato-solid
eye-hide
eye-show
faces-et-outline
faces-happy-outline
faces-happy-solid
faces-medium
faces-normal-outline
faces-normal-solid
faces-sad-outline
faces-sad-solid
faces-veryhappy
fav-outline
fav-solid
feature-bazar-outline
feature-bazar-solid
feature-br-petrobras
feature-news
feature-scanandgo
feature-shell-box
feature-taggy
feature-voucher-future
feedback-error
feedback-success
filter-outline
filter-solid
fire
flash-active
flash-disabled
food-convenience
gamerzone
games-outline
games-solid
general-services-outline
general-services-solid
ghost
gift-card-outline
gift-card-solid
gift-outline
gift-solid
glutenfree
gym-outline
gym-solid
hand-easy
hands
handshake
health-outline
health-solid
heart-outline
heart-solid
help-outline
help-solid
home-outline
home-solid
house-outline
house-solid
image-album-outline
image-album-solid
image-outline
image-solid
incoming
insurances
investments
keyboard-numbers-outline
keyboard-numbers-solid
lamp-outline
lamp-solid
lavanderia
lazer-recreation-outline
lazer-recreation-solid
left-previous
like-ok-outline
like-ok-solid
limit
list-items-outline
list-items-solid
loan-consignado
location-outline
location-solid
logo-autentic
map-outline
map-solid
market-bag-outline
market-bag-solid
menu-plus-collapse
menu-plus-expand
mini-games
mirror-beuty-outline
mirror-beuty-solid
mobile-chip
mobile-outline
mobile-solid
mobile-plan
money-balance
money-card-outline
money-card-solid
money-outline
money-solid
montador-outline
montador-solid
movimentar-extrato-statement
multiply
natal
new-card-segunda-via
newness-outline
newness-solid
padlock-lock-outline
padlock-lock-solid
padlock-open-outline
padlock-open-solid
parking-outline
parking-solid
pet-m-outline
pet-m-solid
pet-p-outline
pet-p-solid
pet-xl-outline
pet-xl-solid
pets-outline
pets-solid
phishing
phone-outline
phone-solid
pix
pixkey
play
plumber-outline
plumber-solid
poup-pig
pricing-outline
pricing-solid
profile-outline
profile-solid
qrcode
randomkey
receipt-outline
receipt-solid
recieve
restaurant-outline
restaurant-solid
right-next
scissor-cut-outline
scissor-cut-solid
search
selfie-outline
selfie-solid
send-money
send-outline
send-solid
serralheiro-outline
serralheiro-solid
services-outline
services-solid
share-outline
share-solid
spotify
store-outline
store-solid
subtract
sum
taxes
taxes-money
teams-outline
teams-solid
tech-outline
tech-solid
tecnico-Informatica-outline
tecnico-Informatica-solid
telemedicin
teste-covid
thief
ticket-outline
ticket-solid
tickets-outline
tickets-solid
tools-outline
tools-solid
transactions-outline
transactions-solid
transfer-outline
transfer-solid
transport-card
transports
trash-outline
trash-solid
trip-plane
turn-camera-outline
turn-camera-solid
uber
uber-eats
ultragaz
up
vakinha
valueqr
vegan
velocimeter
virtual-card-ame-outline
virtual-card-ame-solid
wallet-outline
wallet-solid
wdental
withdraw-retirar-outline
withdraw-retirar-solid
work-outline
work-solid

Image

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

O Componente Image pode carregar tanto ícones padrões da Ame quanto imagens para compor os seus layouts

Exemplo

Utilização

<Image src="<link_da_imagem>" alt="Uma Imagem" />

Propriedades

Propriedade	Descrição	Type	Default
src	Carrega a imagem tanto de require quanto com url	string, function	null
cover	Essa propriedade deixa a imagem com object-fill cover	boolean	false
width	Define a largura da imagem, pode ser usado em porcentagem ou pixels	string	100%
height	Define a altura da imagem, pode ser usado em porcentagem ou pixels	string	auto
alt	Insere um alt na imagem	string	null
bordeRadius	Insere o borderRadius no componente	string	none

InfiniteScroll

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente focado em perfomance.

Exemplo

toggle

Utilização


state = {
    maxValue: 16,
    teams: teamsWordCup,
  }

  onEndReach = () => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        this.setState({
          maxValue: 32,
        })
        resolve()
      }, 3000)
    })
  }

<Window>
        <InfiniteScroll
          onEndReach={this.onEndReach}
          endOffset={50}>
          {this.state.teams.map(
            (team, index) =>
              index <= this.state.maxValue && (
                <CardImage
                  key={team.name}
                  onPress={() => console.log("press")}
                  image="https://static.vecteezy.com/system/resources/previews/008/785/472/original/fifa-world-cup-qatar-2022-official-logo-mondial-champion-symbol-design-abstract-illustration-free-vector.jpg"
                  title={team.name}
                  description={team.country}
                />
              ),
          )}
        </InfiniteScroll>
      </Window>

Propriedades

Propriedade	Descrição	Type	Default
onEndReach	Função que carrega ao chegar no bottom da div	Promise, function	null
endOffset	Número em pixels para ativação do onEndReach antes do bottom	number	0
children	Conteúdo dentro do InfiniteScroll	ReactNode	null
disabled	Desabilita o componente	boolean	false

Input

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Insere um campo para inserção de dados.

Exemplo

input

Utilização

<View>
  <Input
    placeholder="Digite seu nome:"
    value={this.state.inpuPadrao}
    onChange={e => this.setState({ inputPadrao: e })}
  />
</View>

Propriedades

Propriedade	Descrição	Type	Default
type	Define o tipo do campo input. as opções são: "text", "number", "password", "email", "file", "search".	string	text
value	Define o valor do campo.	any	null
placeholder	Texto descritivo dentro do input.	string	null
onChange	Função a ser executada quando o valor é alterado.	function	null
rightIcon	Token do ícone a ser exibido no lado direito do Input. Veja aqui a lista de icones.	string	null
clickRightIcon	Função a ser executada quando tocar no ícone do lado direito.	function	null
id	Atribuiu um id ao input.	string	null
mask	Indica que o conteúdo do input deverá ser formatado de acordo com uma máscara. Pode ser usado um array de masks para mudança dinâmica.	string	null
disabled	Desabilita o campo.	boolean	false
autoFocus	Atribui foco automatico ao Input quando a página for carregada.	boolean	false
onBlur	Executa uma função assim que o Input perde o foco.	function	null
accept	Define o tipo de arquivo que será aceito no Input. Pode ser usado apenas com o type='file'.	string	null
status	Muda a cor da borda e hint de acordo com o status enviado. opções: "positive", "negative".	string	null
multiline	Se ativo define um input estilo text area.	boolean	null
hint	Pequeno texto auxiliar.	string	null
onSubmit	Função executada ao usuário prescionar a tecla 'Enter' durante o uso do componente Input.	function	null

Exemplos

No exemplo a seguir o componente Input é usado com o 'type="password"', com isso é gerado automáticamente o ícone de visibilidade do campo, que é alterado quando clicado:

input

<View>
  <Input
    placeholder="Digite a sua senha"
    value={this.state.inputPassword}
    onChange={e => this.setState({ inputPassword: e })}
    type="password"
    hint="Escolha uma senha segura"
  />
</View>

Label

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente select para seleção de itens

Exemplo

select

Utilização

  <Label
    text='Exemplo do [u]label[/u]'
    htmlFor='inputName'>
    Exemplo do [u]label[/u]
  </Label>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
htmlFor	Define a qual elemento de form, através do id, o `Label` está atrelado.	string	null	Não
color	Define a cor do texto. Veja os valores	string	"neutral-900"	Não

Map

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente utilizado para a exibir a localização no mapa, a partir da API do Google Map.

Documentação da API: https://developers.google.com/maps/documentation/javascript/overview

Exemplo

map

Utilização

<Map
  apiKey={'GOOGLE_API_KEY'}
  mapOptions={{
    center: {
      lat: -22.94980821,
      lng: -43.19095194,
    },
    zoom: 12,
  }}
  getMap={(map, markers) => {
    this.setState({ map, markers });
  }}
  onMarkerPress={marker => {
    let info = new window.google.maps.InfoWindow({
      content: 'teste',
    });
    info.open(this.state.map, marker);
  }}
  markers={[
    {
      lat: -22.970722,
      lng: -43.182365,
      options: {
        title: 'Copacabana',
        clickable: false,
        icon:
          'https://developers.google.com/maps/documentation/javascript/examples/full/images/parking_lot_maps.png',
      },
    },
    {
      lat: -22.9511,
      lng: -43.1809,
      options: {
        title: 'Botafogo',
        draggable: true,
      },
    },
  ]}
/>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
apiKey	Chave de Api String fornecida pelo Google para a exibição de um Mapa.	String	null	true
mapOptions	Aqui vão, obrigatoriamente em formato de objeto, todas as opções para a criação do mapa, como: center, zoom, disableDefaultUI...	Object	null	false
getMap	Função a ser executada que recebe como parametro o mapa criado via props na construção do mapa. Use-a para armazenar o mapa em um estado para usa-lo se necessario no google map.	Function	null	false
height	Define a altura do mapa. As informações principai necessárias para a criação de um Marker são lat: (latitude) e lng: (longitude), porem, em options, você pode colocar todas as opções que desejar para o marker, como title, clickable e draggable.	Number	100vh	false
markers	Lista de Pins no mapa.	Array	null	false
onMarkerPress	Ação de clique em cada marker. Recebe como parametro da função um objeto marker. Tem como valor o marker que está sendo pressionado, para ser utilizado em funções que o requeira.	Function	null	false

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente que renderiza um modal no meio da tela ou a partir do bottom.

Exemplo

modal

Utilização

<Modal
  show={showModal}
  position={position}
  closeModalCallback={this.closeModal}
>
  <Text>Lorem ipsum ....</Text>
</Modal>

Propriedades

Propriedade	Descrição	Type	Default
show	Essa propriedade recebe true ou false e controla a visibilidade do modal.	boolean	false
position	Position pode receber as strings bottom ou center (Veja nos exemplos no fim da página as diferenças entre eles).	string	center
closeModalCallback	Essa propriedade chama a função que muda o status presente em show, ela é acionada quando clica fora do modal.	function	null
pressOutCloseModal	Essa propriedade impede que a Modal feche caso clique fora do conteúdo	function	null

Exemplos

modal

Modal com

import img from '../../assets/images/image_example.jpg';

 state = {
    showModal: false,
    position: 'center',
  };
  closeModal = () => {
    this.setState({
      showModal: false,
    });
  };
  openModal = position => {
    this.setState({
      showModal: true,
      position: position,
    });
  };

   <Modal
      show={showModal}
      position={position}
      closeModalCallback={this.closeModal}>
      <Image height={200} src={img} />
      <Text>Lorem ipsum dolor sit amet</Text>
      <View padding='nano'>
        <Button onPress={() => console.log('Continuar')}>Continuar</Button>
      </View>
      <View padding='nano'>
        <Button variant='secondary' onPress={() => this.closeModal()}>
          Cancelar
        </Button>
      </View>
    </Modal>

Pagination

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente de paginação. A renderização do conteúdo de cada página fica a cargo do desenvolvedor.

modal

Utilização

  <Pagination
    currentPage={1}
    pages={10}
    onClick={page => console.log(page)}
    showFirstButton
    showLastButton
    pageRange={10}
  />

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
pages	Informa o número de páginas.	number	null	sim
currentPage	Informa o número da página corrente.	number	null	sim
onClick	Função que será chamada ao clicar em um dos botões do paginador, o número da página é enviado como argumento da função.	function	null	sim
showFirstButton	Mostrar o botão “ir para primeira página".	boolean	false	não
showlastButton	Mostrar o botão “ir para última página".	boolean	false	não
disabled	Desabilita o paginador.	boolean	false	não
pageRange	Define quantos botões o paginador deve mostrar.	number	5	não

Exemplos

pagination

Modal com


 state = {
    pages: 10,
    currentPage: 1,
    pagesContent: [
      { colorPage: "primary", textPage: "Primary color" },
      { colorPage: "secondary", textPage: "Secondary color" },
      { colorPage: "neutral-500", textPage: "Neutral 500 color" },
      { colorPage: "primary-700", textPage: "Primary 700 color" },
      { colorPage: "secondary-700", textPage: "Secondary 700 color" },
      { colorPage: "positive-700", textPage: "Positive 700 color" },
      { colorPage: "warning-700", textPage: "Warning 700 color" },
      { colorPage: "negative-700", textPage: "Negative 700 color" },
      { colorPage: "support-01", textPage: "Support 01 color" },
      { colorPage: "support-03", textPage: "Support 02 color" },
    ],
  }

   <View
    direction="column"
    align="center"
    justify="center">
    <View
      width="80%"
      height="320px"
      align="center"
      justify="center"
      backgroundColor={
        this.state.pagesContent[this.state.currentPage - 1].colorPage
      }>
      {this.state.pagesContent[this.state.currentPage - 1].textPage}
    </View>
    <View height="16px" />
    <Pagination
      currentPage={this.state.currentPage}
      pages={this.state.pages}
      onClick={page => this.setState({ currentPage: page })}
      showFirstButton
      showLastButton
    />
  </View>

ProgressIndicator

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente para visualização de transição de elementos/telas através de bullets animados.

Exemplo

Utilização

<View>
   <ProgressIndicator
      returnSelected={index => console.log(index)}
      bullets={this.state.bullets}
      selected={this.state.selected}
    />
</View>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
bullets	Define quantos bullets irão aparecer	number	3	Sim
returnSelected	Retorna qual o bullet ativo	function	null	Não
selected	Define qual é o bullet default na renderização do componente	number	1	Não

QRCode

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Utilize este componente para mostrar um QRCode na tela.

Utilização

<QRCode value="Meu valor do QRCode" />

Propriedades

Propriedade	Descrição	Type	Default
value	Valor contido no QRCode	string	null
size	Tamanho do QRCode	number	null

Radio

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

O Radio é usado para seleções únicas, onde somente uma opção pode ser selecionada

Exemplo

Radio

Utilização

  <Radio
      name='primary'
      value='primary1'
      id='primary'
      checked={this.state.valueRadioSelected}
      onChange={value => {
        this.selectValue(value);
      }}
  />

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
name	Define o name do radio	string	null	Sim
checked	Aqui é passado qual o value selecionado	string	null	Sim
onChange	Função que retorna o value	function	null	Sim
value	Define o valor para o radio	string	null	Sim
disabled	Desabilita o radio	boolean	false	Não
id	Passa um id para o componente	number	aleatório	Não

SegmentedControl

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente de tab que recebe diversas propriedades

Exemplo

segmented-control

Utilização

 state = {
    tabIndex: 0,
    tabs: [
      {
        title: "Anual",
        valor: "R$ [b][color=primary]75,90[/color][/b]",
      },
      {
        title: "Semestral",
        valor: "R$ [b][color=primary]89,90[/color][/b]",
      },
      {
        title: "Mensal",
        valor: "R$ [b][color=primary]109,90[/color][/b]",
      },
    ],
  };
  
  <Window>
   <View
      margin="large"
      width="auto">
      <SegmentedControl
        activeTab={this.state.tabIndex}
        onChange={this.handleTabChange}
        items={[
          { title: this.state.tabs[0].title },
          { title: this.state.tabs[1].title },
          { title: this.state.tabs[2].title },
        ]}
      />
      <View
        width="312px"
        backgroundColor="neutral-300"
        paddingBottom="big"
        paddingTop="big"
        borderRadius="small"
        borderWidth="thin"
        borderTopWidth="none"
        borderColor="primary-700"
        justify="center">
        <Text
          textAlign="center"
          fontSize="large">
          {this.state.tabs[this.state.tabIndex].valor}
          <Text fontSize="nano">/Mês</Text>
        </Text>
      </View>
    </View>
  </Window>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
activeTab	Define qual aba começará ativa	Number	0	não
onChange	Função de mudança na aba	Function	null	sim
disabled	Desabilita o componente	Boolean	false	não
items	Recebe um array de objetos que definirá o título da aba	Array	null	sim

OBS: A parte da renderização do conteúdo ficará a cargo do desenvolvedor.

Select

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente select para seleção de itens

Exemplo

select

Utilização

state = {
    selected: '',
  };
  options = [
    {
      label: 'teste 1',
      value: 'teste 1',
    },
    {
      label: 'teste 2',
      value: 'teste 2',
    },
    {
      label: 'teste 3',
      value: 'teste 3',
    },
    {
      label: 'teste 4',
      value: 'teste 4',
    },
    {
      label: 'teste 5',
      value: 'teste 5',
    },
    {
      label: 'teste 6',
      value: 'teste 6',
    },
  ];

  <Select
    label='Label do select'
    placeholder='Selecione Aqui'
    keySelectLabel='label'
    options={this.options}
    value={this.state.selected}
    onChange={e => this.setState({ selected: e })}
  />

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
options	Array de objetos contendo valores de `label` e `value`.	array	null	Sim
value	Valor que pode ser passado para iniciar o componente. Recebe objeto com {value: 'string', label: 'string'}	objeto	null	Sim
keySelectLabel	Indica se o valor informado como value e o retorno da função OnChange é o `label` ou o `value do objeto.	string	label	Não
disabled	Desabilita o componente.	boolean	false	Não
onChange	Função a ser executada quando selecionar valor, deve alimentar o estado do `value`.	function	null	Sim
placeholder	Texto descritivo dentro do Select caso o value inicial seja vazio.	string	null	Não
inputValue	Valor do inicial do Input. Recebe objeto com {value: 'string', label: 'string'}	objeto	null	Não
hint	Define um hint para o select	string	null	Não
status	Define um status. Pode receber 'positive' ou 'negative'	string	null	Não

Slider

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente utilizado para seleção de valor através de um slider range.

Exemplo

slider

Utilização

<Slider
  minAmount={0}
  maxAmount={10000}
  value={200000}
  onChange={(value) => {
    setValue(value)
  }}
/>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
monetary	Define se os valores do componente será monetário (ex: 150,00) ou number (ex: 150)	Boolean	true	false
minAmount	Valor mínimo para seleção. Se a prop monetary for true, deve ser acrescentado 00 ao final do número. (ex: 15000 => 150,00)	Number	0	false
maxAmount	Valor máximo para seleção. Se a prop monetary for true, deve ser acrescentado 00 ao final do número. (ex: 700000 => 7000,00)	Number	7500	false
value	Valor inicial que será renderizado no componente.	Number	null	false
onChange	Função que será executada quando o valor for alterado.	Function	undefined	true
step	Quantidade que será incrementada ou decrementada no value ao alterar o slider. (Ex: se o valor desta prop for 5, a alteração será de 5 em 5)	Number	100	false
disabled	Desabilita a interação com o componente.	Boolean	false	false
infoLabel	Indica se os labels laterais serão representados pelos values de min e max, ou por icones. opções: "value" ou "icon"	string	value	false
leftIcon	Quando infoLabel="icon", renderiza um icone na esquerda do componente. Recebe um token da lista de icones que pode ser encontrado aqui	string	null	false
rightIcon	Quando infoLabel="icon", renderiza um icone na direitoa do componente. Recebe um token da lista de icones que pode ser encontrado aqui	string	null	false
label	Habilita a renderoização de um label acima do knobe do slider representando o valor selecionado	boolean	false	false

Outros exemplos

Abaixo, alguns exemplos usando o Slider:

slider

<Window>
     <Slider
        monetary
        minAmount={20000}
        maxAmount={700000}
        value={200000}
        step={20000}
        onChange={value => {
          setValueMonetary(value);
        }}
      />

Status

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente de status que recebe diversas propriedades

Exemplo

view

Utilização

state = {
    inputValue: "",
    statusText: "",
    showStatus: false,
    typeStatus: "",
  };

  getInputValue = (text) => {
    this.setState({ inputValue: text });
    if (text.length < 8) {
      this.setState({ statusText: "Recusado" });
      this.setState({ showStatus: true });
      this.setState({ typeStatus: "error" });
    } else if (text.length > 13) {
      this.setState({ statusText: "Em validação" });
      this.setState({ typeStatus: "warning" });
    } else {
      this.setState({ statusText: "Validado" });
      this.setState({ typeStatus: "success" });
    }
  };

  <Window>
    <View marginTop="small">
      <View direction="row">
        <Text>Contrato social</Text>
        <Status show={this.state.showStatus} type={this.state.typeStatus}>
          {this.state.statusText}
        </Status>
      </View>
      <Input
        placeholder="Teste Status"
        value={this.state.inputValue}
        onChange={(e) => this.getInputValue(e)}
      />
    </View>
  </Window>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
show	Exibe o status	boolean	false	Não
type	Tipo do status. 'positive', 'warning' ou 'negative'	string	'negative'	Não
theme	Tema do status	string	'700	Não

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
hint	Recebr um objeto do tipo hint com suas definições	HintProps	none	não
status	Recebe um objeto do tipo status com suas definições	StatusProps	primary	não
label	Texto a ser renderizado no componente	string	none	sim
info	Info	string	false	não
disabled	Desabilita o componente	boolean	false	não

Text

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente de texto que recebe diversas propriedades

Exemplo

view

Utilização

<View>
  <Text>
    Componente Text
  </Text>
</View>

Propriedades

Propriedade	Descrição	Type	Default
fontSize	Define o tamanho da font. Veja os valores	string	xxs
fontWeight	Define o peso da font. Veja os valores	string	regular
lineHeight	Define a altura da linha font. Veja os valores	string	medium
textAlign	Define o alimanhento do texto. Veja os valores	string	left
selectable	Define se o texto será selecionavel.	boolean	false
truncate	Define uma quantidade de linhas para mostrar o texto. Ao fim dessas linhas, caso tenha mais textos, será acresentado '...'.	number	null
color	Define a cor do texto. Veja os valores	string	neutracolor-brand-darkest
target	Define um estilo para o texto pré determinado. Veja os valores	string	null

Toggle

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente para escolhas com retorno true e false.

Exemplo

toggle

Utilização

state = {
  checked: false
}

<Toggle
  checked={this.state.checked}
  value="teste"
  onChange={(e) => this.setState({ checked: e.state })}
/>

Propriedades

Propriedade	Descrição	Type	Default
checked	Define se o Toggle está ou não ativo	boolean	false
disabled	Desabilita o componente	boolean	false
value	Valor atribuído ao componente	string	null
id	Atribui um id ao Toggle	string	null
onChange	Função que retorna o estado do componente.	function	null

Outros exemplos

Abaixo um exemplo do toggle sendo usado em aceite de termos e etc.

toggle

state = {
  checked: false
}
<View align="center">
  <Toggle
    checked={this.state.checked}
    value="teste"
    onChange={(e) => this.setState({ checked: e.state })}
  />
  <View paddingLeft="nano">
    <Text>
      Aceito os{' '}
      <Text onClick={() => console.log('clique')}>termos de uso</Text>
    </Text>
  </View>
</View>

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente focado em acessibilidade.

Exemplo

toggle

Utilização


<Text>

Lorem Ipsum is{` `}

<Tooltip

label="Olá eu sou o Tooltip"

position="bottom">

<Text>[b]simply[/b]</Text>

</Tooltip>

{` `}

dummy text of the printing and typesetting industry. Lorem

Ipsum has been the industry's standard dummy text ever

since the 1500s, when an unknown printer took a galley of

type and scrambled it to make a type specimen book. It has

survived not only five centuries, but also the leap into

electronic typesetting, remaining essentially unchanged.

It was popularised in the 1960s with the release of

Letraset sheets containing Lorem Ipsum passages, and more

recently with desktop publishing software like Aldus

PageMaker including versions of Lorem Ipsu

</Text>

Propriedades

| ----------- | ------------------------------------------------------------------------------------------------------------ | -------- | ------- |

Touchable

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Envolva um componente com Touchable para que ele passe a ter interação.

Exemplo

Touchable

Utilização

<Touchable onClick={() => {console.log('Clicado!')}}>
  <Text>Agora sou clicável</Text>
</Touchable>

Propriedades

Propriedade	Descrição	Type	Default
onPress	Função que será chamada ao tocar no componente.	function	null
disabledOnPress	Função que será chamada caso o Touchable esteja desabilitado.	function	null
disabled	Desabilita o componente	boolean	false
width	Define a largura do componente	string	null
height	Define a altura do componente	string	null

ValueInput

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Use o ValueInput para entradas de valores numéricos

Exemplo

Touchable

Utilização


  state = {
    valueInteger: 10,
  };

  <Window>
    <View>
    <ValueInput
        value={this.state.valueInteger}
        onChange={(v) =>
             this.setState({ valueInteger: v }, console.log(v))
        }
        />
    </View>
   </Window>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
value	Valor inicial que será renderizado no componente.	number	null	Sim
valueType	Tipo do valor 'integer', 'decimal' ou 'currency'	number	'integer'	Sim
onChange	Função a ser executada quando o valor é alterado, retornando o valor,	function	null	Sim
prefix	Propriedade responsável por definir um prefixo no valor.	string	null	Não
suffix	Acrescenta um sufixo após o valor.	string	null	Não
maxLength	Quantidade máxima de caracteres.	number	9	Não
disableEdit	Esconde o botão Editar	boolean	false	Não
disabled	Desabilita o componente.	boolean	false	Não
flat	Altera a aparência do componente para uma versão mais simples.	boolean	false	Não

Video

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente para renderização de vídeo.

Exemplo

video

Utilização

<Video source="https://s3.amazonaws.com/calindra.com.br/ame.mp4" />

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
source	Aceita arquivos de vídeo em formato MP4 e player externo como o Vimeo.	string	null	Não
youtubeId	Aceita o ID de um vídeo do youtubeId. OBS: O ID pode ser encontrado na URL do vídeo apois o caracter '='.	string	null	Não
width	Define a largura do componente.	string ou number	100%	Não
height	Define a altura do componente.	string ou number	100%	Não
controls	Permite o usuário controlar a reprodução do vídeo, incluindo volume, navegação, e pausa/continuação da reprodução.	boolean	false	Não
autoPlay	O vídeo é executado automaticamente. OBS: Funciona apenas com a propriedade source.	boolean	false	Não
thumbnail	Imagem para a capa do vídeo enquanto não carregado. OBS: Funciona apenas com a propriedade source.	string	null	Não
muted	Inicia o vídeo mutado.	boolean	false	Não

View

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Talvez um dos componentes mais úteis para construir telas e recebe diversas propriedades para te ajudar nessa tarefa.

Exemplo

view

Utilização

<View>
  <Text>
    Este paragráfo está dentro da view
  </Text>
</View>

Propriedades

Propriedade	Descrição	Type	Default
background	Adiciona uma cor de fundo. Veja os valores	string	null
border	Adiciona uma borda na View. Veja os valores	string	null
borderRadius	Define o arredondamento da borda. Veja os valores	string	null
borderRadiusLeftTop	Define o arredondamento da borda no canto esquerdo superior. Veja os valores	string	null
borderRadiusRightTop	Define o arredondamento da borda no canto direito superior. Veja os valores	string	null
borderRadiusLeftBottom	Define o arredondamento da borda no canto esquerdo inferior. Veja os valores	string	null
borderRadiusRightBottom	Define o arredondamento da borda no canto direito inferior. Veja os valores	string	null
borderColor	Define qual será a cor da borda. Veja os valores	string	null
direction	Define qual será a direção do display flex. Veja os valores	string	null
align	Define qual será o alinhamento vertical do display flex. Veja os valores	string	null
justify	Define qual sera o alinhamento horizontal do display flex. Veja os valores	string	null
paddingLeft	Define o padding no lado esquerdo. Veja os valores	string	xxxs
paddingRight	Define o padding no lado direito. Veja os valores	string	xxxs
paddingTop	Define o padding em cima. Veja os valores	string	xxxs
paddingBottom	Define o padding em baixo. Veja os valores	string	xxxs
paddingX	Define o padding no eixo X. Veja os valores	string	null
paddingY	Define o padding no eixo Y. Veja os valores	string	null
margin	Define a margem no eixo X e Y. Veja os valores	string	null
marginLeft	Define a margem no lado esquerdo. Veja os valores	string	null
marginRight	Define a margem no lado direito. Veja os valores	string	null
marginTop	Define a margem em cima. Veja os valores	string	null
marginBottom	Define a margem em baixo. Veja os valores	string	null
marginY	Define a margem no eixo Y. Veja os valores	string	null
marginX	Define a margem no eixo X. Veja os valores	string	null
width	Define qual será a largura da View em % ou px	string	100%
minWidth	Define qual será a largura miníma da View em % ou px	string	100%
maxWidth	Define qual será a largura máxima da View em % ou px	string	100%
height	Define qual será a altura da View em % ou px	string	auto
minHeight	Define qual será a altura máxima da View em % ou px	string	auto
maxHeight	Define qual será a altura máxima da View em % ou px	string	auto
display	Define qual será o display. Veja os valores	string	block
flexWrap	Define se os itens são forçados em uma linha ou podem ser agrupados em várias linhas. Veja os valores	string	null
flexShrink	Define uma redução caso os valores do container ultrapassarem o limite. Veja mais em exemplos	number	null
FlexGrow	Define um aumento caso os valores do container ultrapassarem o limite. Veja mais em exemplos	number	null
flexBasis	Define qual será a largura base dos elementos. Seus valores podem ser em %, px ou 'auto'	string	null
flexNone	Passando essa propriedade a View respeitará o tamanho de width independente do flex	boolean	false
opacity	Define a opacidade da View. Veja os valores	string	null
shadow	Aplica niveis de sombra na View. Veja os valores	string	null

Window

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

É um componente mestre que precisa envolver toda tela. Seu uso é obrigatório e ele deverá ser o primeiro nó de todas as telas. Nunca utilize Window dentro de outro Window.

Você deve usar o componente Window como no exemplo abaixo.

Utilização

<Window>
    Todas as outras tags devem ficar aqui dentro
</Window>

Super Componentes

CardNavigation

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente de CardNavigation que recebe diversas propriedades

Exemplo

view

Utilização

  state = {
    item: {
      title: "Posto BR Itaquaquecetuba",
      description: "Vendedor",
      rightIcon: "Vendedor",
    },
  };

  <Window>
      <View aligin="row" marginBottom="small">
        <CardNavigation
          
          leftIcon="ame-outline"
          width="469px"
          title={this.state.item.title}
          description={this.state.item.description}
          rightIcon="right-next"></CardNavigation>
      </View>
      <View aligin="row" marginBottom="small">
        <CardNavigation
          width="469px"
          title={this.state.item.title}
          description={this.state.item.description}
          rightIcon="right-next"
          onClick={() => {
            console.log("Segundo card clicado");
          }}></CardNavigation>
      </View>
      <View aligin="row">
        <CardNavigation
          leftImage={img}
          width="469px"
          title={this.state.item.title}
          description={this.state.item.description}></CardNavigation>
      </View>
              
  </Window>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
title	Título do CardNavigation	string	center	não
width	Largura do card	Boolean	false	não
description	Descrição do card	string	null	não
leftIcon	Nome do ícone da na esquerda	string	null	não
rightIcon	Nome do ícone da na direita	string	null	não
leftImage	Nome da imagem na esquerda	string	null	não
description	Descrição do card	string	null	não
onClick	Função de clique no card	Function	null	não

FormSelect

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Componente FormSelect que recebe diversas propriedades

Exemplo

view

Utilização

 options = [
    {
      label: "teste 1",
      value: "teste 1",
    },
    {
      label: "teste 2",
      value: "teste 2",
    },
    {
      label: "teste 3",
      value: "teste 3",
    },
    {
      label: "teste 4",
      value: "teste 4",
    },
    {
      label: "teste 5",
      value: "teste 5",
    },
    {
      label: "teste 6",
      value: "teste 6",
    },
  ];

   <Window>
    <View padding="large" height="500px">
        <Text target="title">FormSelect</Text>
        <View marginTop="large">
        <FormSelect
            label="Label"
            options={this.options}
            placeholder="Selecione Aqui"
            keySelectLabel="label"
            onChange={(e) => console.log("selected: ", e)}
        />
        </View>
    </View>
    </Window>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
hint	Recebr um objeto do tipo hint com suas definições	HintProps	none	não
status	Recebe um objeto do tipo status com suas definições	StatusProps	primary	não
label	Texto a ser renderizado no componente	string	none	sim
info	Info	string	false	não
disabled	Desabilita o componente	boolean	false	não

List

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Este componente fornece uma lista útil para ser usada como um navegador, exibir produtos ou outras coisas.

Exemplo

list

Utilização

state = {
  ListItems: [{ title: 'Compras' }, { title: 'Saldo' }, { title: 'Extrato' }]
}
goTo = (index) => {
  console.log(index)
}
<View padding="sm">
  <List items={this.state.ListItems} onItemPress={(i) => this.goTo(i)} />
</View>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
items	Recebe um array de objetos contendo a propriedade `title`.	array	null	Sim
disabled	Desabilita o Componente.	boolean	false	Não
onIntemPress	Função a ser executada quando um item é clicado. Retorna o index do item no array da propriedade `items`	function	null	Não

items

Valores aceitos em cada objeto do array. Todos os valores são do tipo string.

{
  title: 'Titulo do item.'
}

TextLink

Modifique esse componente em tempo real pelo Storybook clique aqui

Veja um exemplo desse componente aqui

Executa a função semelhante a um link html. Evite o uso excessivo.

Exemplo

textlink

Utilização

O TextLink pode ser usado com o Text, assim você consegue controlar o tamanho da fonte sem precisar passar um parâmetro para o text e outro para o textLink por exemplo.

<Text size='md'>
  Um texto qualquer
  <TextLink onClick='() => { funcaoClick() }'/> Texto Link </TextLink>
  [b]um texto bold[/b]
</Text>

Propriedades

Propriedade	Descrição	Type	Default	Obrigatório
onPress	Recebe uma função para ser executada ao pressionarmos o TextLink	function	null	Sim