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"
				/>
	)
}