Medsystem-web-components NPM

Biblioteca `medsystem-web-components`

Instalação

Para utilizar os componentes disponíveis na biblioteca medsystem-web-components, siga estes passos:

npm install medsystem-web-components // ou yarn add medsystem-web-components

Componentes Disponíveis

A biblioteca oferece os seguintes componentes:

Typography
Button
Input
Footer
Post
WhatsAppForm
ContactForm

Typography

O componente Typography é utilizado para exibir texto com diferentes estilos de fonte, cores e tamanhos.

import { Typography } from "medsystem-web-components";

Uso

O componente Typography pode ser utilizado da seguinte maneira:

<Typography>Seu texto aqui</Typography>

Propriedades

O componente Typography aceita as seguintes propriedades:

children: Texto ou elementos React a serem exibidos.
fontSize: Tamanho da fonte (número).
fontWeight: Peso da fonte (valores de "100" a "900").
color: Cor do texto.

Exemplo de Uso

<Typography fontSize={18} fontWeight="600" color="#333">
	Este é um exemplo de texto com estilos personalizados.
</Typography>

Propriedades Adicionais

O componente também aceita todas as propriedades de um elemento HTML span, permitindo a inclusão de propriedades HTML adicionais.

Estilos Personalizados

Além das propriedades padrão, você pode passar estilos personalizados usando a propriedade style:

<Typography style={{ lineHeight: "1.5", letterSpacing: "0.5px" }}>
	Texto com estilos personalizados.
</Typography>

Button

O componente Button é utilizado para criar botões interativos com suporte a diferentes tamanhos, estilos, e ícones.

import { Button } from "medsystem-web-components";

Uso

O componente Button pode ser utilizado da seguinte maneira:

<Button onClick={() => handleButtonClick()} variant="primary">
	Clique aqui
</Button>

Propriedades

O componente Button aceita as seguintes propriedades:

children: Texto ou elementos React a serem exibidos dentro do botão.
size: Tamanho do botão ("small", "medium", "large").
onClick: Função a ser executada ao clicar no botão.
theme: Tema do botão ("primary", "secondary").
variant: Variante do botão ("error", "success", "warning").
disabled: Define se o botão está desativado.
outlined: Define se o botão é exibido em formato de contorno.
iconPosition: Posição do ícone no botão ("left", "right").
icon: Ícone a ser exibido dentro do botão.
clean: Define se o botão possui estilos mínimos.
fullWidth: Define se o botão ocupa toda a largura disponível.

Exemplo de Uso

<Button
	onClick={() => handleButtonClick()}
	variant="primary"
	size="medium"
	icon={<Icone />}
	iconPosition="left"
	fullWidth
>
	Enviar
</Button>

Estilos Personalizados

O componente Button permite estilização adicional por meio das propriedades fornecidas, como size, theme, variant, disabled, outlined, e outras.

Input

O componente Input é utilizado para capturar a entrada do usuário, oferecendo suporte a ícones, máscaras e estilos personalizados.

import { Input } from "medsystem-web-components";

Uso

O componente Input pode ser utilizado da seguinte maneira:

<Input label="Nome" placeholder="Digite seu nome" />

Propriedades

O componente Input aceita as seguintes propriedades:

iconLeft: Ícone exibido à esquerda do campo de entrada.
iconRight: Ícone exibido à direita do campo de entrada.
className: Classe CSS para estilização adicional do componente.
labelClassName: Classe CSS para estilização adicional do rótulo.
containerClassName: Classe CSS para estilização adicional do contêiner do input.
label: Texto do rótulo do input.
error: Mensagem de erro a ser exibida.
mask: Máscara a ser aplicada ao input.

Exemplo de Uso

<Input
	label="Nome"
	placeholder="Digite seu nome"
	iconLeft={<IconeUsuario />}
	error="Campo obrigatório"
/>

Propriedades Adicionais

O componente também aceita todas as propriedades de um elemento HTML input, permitindo a inclusão de propriedades HTML adicionais.

Estilos Personalizados

Você pode aplicar estilos personalizados utilizando as propriedades de classe fornecidas (className, labelClassName, containerClassName) ou adicionando estilos diretamente aos ícones e ao input.

<Input
	label="Nome"
	placeholder="Digite seu nome"
	className="input-custom"
	labelClassName="label-custom"
	containerClassName="container-custom"
	iconLeft={<IconeUsuario style={{ color: "blue" }} />}
	style={{ borderColor: "red" }}
/>

Claro, vou criar a documentação para o componente Footer:

Footer

O componente Footer é utilizado para exibir informações como links úteis, contatos e informações de direitos autorais, com suporte para exibir um logotipo e links para redes sociais.

import { Footer } from "medsystem-web-components";

Uso

O componente Footer pode ser utilizado da seguinte maneira:

<Footer
	logo="URL_DO_LOGO"
	company="Nome da Empresa"
	categories={[
		{
			title: "Título da Categoria",
			subtitles: [
				{ linkTitle: "Link 1", link: "URL_Link_1" },
				{ linkTitle: "Link 2", link: "URL_Link_2" },
				// ...mais links se necessário
			],
		},
		// ...mais categorias se necessário
	]}
	socials={{
		facebook: "URL_Facebook",
		youtube: "URL_Youtube",
		instagram: "URL_Instagram",
		linkedin: "URL_Linkedin",
	}}
/>

Propriedades

O componente Footer aceita as seguintes propriedades:

logo: URL do logotipo a ser exibido no rodapé.
company: Nome da empresa exibido nos direitos autorais.
year: Ano exibido nos direitos autorais (se não fornecido, será utilizado o ano atual).
categories: Array de categorias com títulos e links úteis.
socials: Links para redes sociais (Facebook, Youtube, Instagram, LinkedIn).

Exemplo de Uso

<Footer
	logo="URL_DO_LOGO"
	company="Nome da Empresa"
	categories={[
		{
			title: "Produtos",
			subtitles: [
				{ linkTitle: "Produto 1", link: "/produto-1" },
				{ linkTitle: "Produto 2", link: "/produto-2" },
			],
		},
		{
			title: "Recursos",
			subtitles: [
				{ linkTitle: "FAQ", link: "/faq" },
				{ linkTitle: "Contato", link: "/contato" },
			],
		},
	]}
	socials={{
		facebook: "https://facebook.com/seufacebook",
		youtube: "https://youtube.com/seuyoutube",
		instagram: "https://instagram.com/seuinstagram",
		linkedin: "https://linkedin.com/seulinkedin",
	}}
/>

Estilos Personalizados

Você pode aplicar estilos adicionais para o logotipo, links, ícones de redes sociais e outros elementos dentro do componente Footer conforme necessário.

Aqui está a documentação para o componente Post:

Post

O componente Post é utilizado para exibir informações de um post, como título, imagem, data e descrição.

Instalação

Para utilizar o componente Post da biblioteca medsystem-web-components, certifique-se de ter instalado a biblioteca conforme instruído acima.

import { Post } from "medsystem-web-components";

Uso

O componente Post pode ser utilizado da seguinte maneira:

<Post
	title="Título do Post"
	image="URL_DA_IMAGEM"
	link="/caminho-para-o-post"
	date="2023-01-02"
	description="Descrição do post."
/>

Propriedades

O componente Post aceita as seguintes propriedades:

title: Título do post.
image: URL da imagem exibida no post.
link: URL para o post completo.
date: Data do post.
description: Descrição breve do post.

Exemplo de Uso

<Post
	title="Novidades de Janeiro"
	image="https://exemplo.com/imagem.jpg"
	link="/novidades-janeiro"
	date="2023-01-02"
	description="Confira as últimas novidades do mês!"
/>

Estilos Personalizados

Você pode aplicar estilos adicionais para o título, descrição e outros elementos dentro do componente Post conforme necessário.

Aqui está a documentação para o componente ContactForm:

ContactForm

O componente ContactForm é utilizado para exibir um formulário de contato com campos para nome, email, telefone, e um botão de envio.

import { ContactForm } from "medsystem-web-components";

Uso

O componente ContactForm pode ser utilizado da seguinte maneira:

<ContactForm
	title="Título do Formulário"
	subtitle="Subtítulo do Formulário"
	product="Medsystem"
/>

Propriedades

O componente ContactForm aceita as seguintes propriedades:

title: Título do formulário de contato.
subtitle: Subtítulo do formulário de contato.
product: Produto associado ao formulário ("Medsystem", "Metra", "Labsys", "Colmeia").

Exemplo de Uso

<ContactForm
	title="Entre em Contato"
	subtitle="Preencha o formulário para mais informações."
	product="Medsystem"
/>

Funcionalidades

O componente ContactForm inclui um formulário interativo que coleta informações do usuário, realiza validações e envia os dados para uma API (comentada no código).