@waveclass/wds-web v0.0.34
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
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"
/>
)
}
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago