Waveclass Design System (WDS) - Web

Este repositório pertence à organização Wavetex e tem o objetivo de reunir os componentes padronizados da grade de estilos da plataforma Waveclass para Web.

Sumário

• Tecnologias utilizadas
• Storybook
• Instalação
• Utilitários
• Componentes
  • Student Menu
  • Student Header
  • Checkout Product Card
  • Checkout Module Item Card

Tecnologias utilizadas

• React 18;
• Typescript;
• Styled Components;
• React Icons;
• Storybook;
• PNPM.

Storybook

Este repositório faz uso do Storybook para demonstração dos componentes visuais da WDS. Para utilizá-lo, clone o repositório localmente em sua máquina e execute os seguintes comandos:

pnpm i

É fortemente recomendado o uso do PNPM para execução de scripts de instalação neste repositório.

pnpm sb

Este comando iniciará o Storybook e deve automaticamente abrir uma aba no seu browser padrão com a página inicial do Storybook. Caso isso não ocorra, basta acessar http://localhost:6006/.

Agora você pode visualizar os componentes da WDS e brincar com suas variações!

Instalação

Para utilizar a Waveclass Design System no seu projeto (seja no repo principal da Waveclass ou em algum projeto à parte), basta executar o comando:

pnpm i --save @waveclass/wds-web

A WDS assume que o seu projeto possua as dependências necessárias para o funcionamento, são elas:

• @waveclass/wds-core (a versão mais recente sempre);
• AWS Amplify ^4.3.43;
• React ^18.2.0;
• React DOM ^18.2.0;
• React Icons ^4.9.0;
• React i18next ^13.0.1;
• i18next ^23.2.8;
• Styled Components 6.0.0-rc.3.

Certifique-se de tê-las instaladas e nas versões mínimas necessárias antes de iniciar o uso da WDS.

Hooks

useLocation

Esta utility function retorna a URL atual da página.

Exemplo de uso

import { useLocation } from '@waveclass/wds-web';

const location = useLocation();

Componentes

Student Menu

Exemplo de uso

import { StudentMenu } from "@waveclass/wds-web";

const App = () => {
	return (
    	// page structure...
    	<StudentMenu />
	)
}

Componentes internos

menu-item

Props

Nome	Tipo	Descrição	Obrigatório
icon	reactNode	Ícone mostrado	Sim
iconVariant	'fill', 'outline'	Tipo de ícone	Sim
content	string	Texto mostrado	Sim
isAvatar	boolean	Se é um Avatar	Não
hasNotification	boolean	Se tem o indicador de notificações	Não
notificationAmount	number	Quantas notificações tem, se tem notificações	Não
link	string	URL da página para qual redirecionará	Não

Exemplo de uso

import { MenuItem } from '../components/student-menu/menu-item';

const MyComponent = () => {
    return (
	    <MenuItem
		    icon={<TfiBell  size={20}  />}
		    iconVariant={'outline'}
		    content={'Notificações'}
		    hasNotification={true}
		    notificationAmount={1}
	    />
    );
};

Funções

menuToggle

Esta função não é exportada por essa biblioteca e é apenas um exemplo de como a abertura dos menus podem ser feitas.

Exemplo de uso

function menuToggle() {
    if (document  ===  undefined) {
	    return;
    }
    else {
		const  menuContainerClassList =
			document.getElementById('menuContainer').classList;

	    if (menuContainerClassList.contains('closed')) {
		    menuContainerClassList.remove('closed');
		    menuContainerClassList.add('open');
	    }
	    else if (menuContainerClassList.contains('open')) {
		    menuContainerClassList.remove('open');
		    menuContainerClassList.add('closed');
	    }
    }
}

Student Header

Props

Nome	Tipo	Descrição	Obrigatório
tabItems	[]	Abas do header	Sim
activeTab	string	ID da tab ativa	Sim
onTabClick	() => void	Callback chamada quando uma tab é clicada	Sim

Exemplo de uso

import { StudentHeader } from "@waveclass/wds-web";

const App = () => {
	return (
    	// page structure...
    	<StudentHeader
        	tabItems=[
            	{
                	id: '1'
                    tabIcon: <TfiAlignLeft size={18} />
                    text: 'texto da tab'
                }
            ]
            activeTab='1'
            onTabClick= () => void
        />
	)
}

Search Modal

Props

Nome	Tipo	Descrição	Obrigatório
onClose	() => void	Callback chamada quando o botão de fechar é clicado	Sim

Exemplo de uso

import { SearchModal } from "@waveclass/wds-web";

const App = () => {
	return (
    	// page structure...
    	<SearchModal onClose={() => null} />
	)
}

Checkout Product Card

Props

Nome	Tipo	Descrição	Obrigatório
cover	string	URL da capa do produto	Sim
title	string	Título do produto	Sim
delivery_text	string	Texto dos itens entregáveis do produto	Sim
price	string	Preço do produto formatado	Sim
payment_methods_text	string	Texto das formas de pagamento	Sim
onClick	() => void	Callback chamada quando o produto é selecionado	Sim
primary_color	string	Cor primária da escola	Sim

Exemplo de uso

	import { CheckoutProductCard } from "@waveclass/wds-core";

	const App = () {
		return (
			// page structure...
			<CheckoutProductCard
				cover="https://example.com/someimage.png"
				title="Curso de Marketing"
				delivery_text="1 Curso"
				price="R$ 297,00"
				payment_methods_text="No PIX, boleto ou até 6x no cartão"
				onClick={() => {}}
				primary_color="#ff4d4d"
			/>
		)
	}

Checkout Module Item Card

Props

Nome	Tipo	Descrição	Obrigatório
name	string	Título da aula	Sim
type	string	Tipo da aula	Sim
duration	string	Duração da aula	Sim
thumb_url	string	URL da miniatura da aula	Sim

Exemplo de uso

import { CheckoutModuleItemCard } from "@waveclass/wds-web";

const App = () => {
	return (
    	// page structure...
    	<CheckoutModuleItemCard
					name="Aula 01"
					type="VIDEO"
					duration="14:25"
					thumb_url="https://example.com/someimage.png"
				/>
	)
}