Feature/kanban refactored - [merged] #253

Closed 01oseluiz closed 9 months ago

In GitLab by @victorandre957 on Aug 9, 2023, 24:59

Merges feature/kanban-refactored -> develop

Gitlab MR Web Template

Descrição

Essa branch cria os componentes para o kanban, os componentes foram criados com base na branch anterior do kanban "feature/kanban" mas agora de forma mais modular. O bord pode ser utilizado usando a lista e o card padrão mas o usuário pode facilmente passar os componentes para substituir a lista e o card, dessa forma apenas a estrutura para arrastar os items permanecerá.

Se ocorreu alguma breaking change liste ela aqui também, e aponte o que deve ser feito para se adaptar a mudança.

Drafts: Colocar o que deve ser finalizado antes do merge

Fixes #(numero da issue)

Tempo de desenvolvimento

Insira aqui o tempo estimado para a tarefa, e após, o quanto foi gasto na realização das tarefas.

Veja como inserir de forma correta em gitlab docs - time tracking.

Tipo de mudança

[ ] Bug fix (Correção de um problema que não quebrava algo grande)
[X] New feature (Mudança que adiciona novas funcionalidades)
[ ] Breaking change (correção ou recurso que faria com que a funcionalidade existente não funcionasse como esperado)
[ ] Refactor (Alteração que melhora algo que já existente)

Em quais navegadores foi testado?

[X] Google Chrome
[X] Mozilla Firefox
[ ] IE 11 (Windows 10)
[ ] Edge
[ ] Opera
[ ] Opera GX
[ ] IOS Safari
[ ] IOS Chrome
[ ] Android Chrome
[ ] Android Firefox

Testei as seguintes resoluções no navegador:

[X] 2520 x 1080
[X] 1920 x 1080
[X] 1400 x 790
[X] 1280 x 720
[X] 1024 x 1366 (iPad Pro vertical)
[X] 1366 x 1024 (iPad Pro horizontal)
[X] 768 x 1024 (iPad vertical)
[X] 1024 x 768 (iPad horizontal)
[X] 375 x 812 (iPhone X)
[X] 320 x 568 (iPhone 5/SE)

Checklist:

Qualidade

[X] Segui os padrões de criação da stack em svelte
[X] Eu revisei ou reli o meu próprio código
[X] Segui o formato de criação e nomenclatura de variáveis CSS

Documentação

[X] Documentei onde era mais necessário e difícil de entender no meu código
[X] Documentei as variáveis CSS que meu componente externaliza
[X] Criei bons exemplos no storybook para meu componente

Teste

[ ] As mudanças que esta MR implementa possui testes automatizados
[X] Executei e garanto que os testes automatizados já criados estão todos passando
[X] Executei e garanto que não há erros de lint
[X] Executei e garanto que não há erros de typescript

MR

[X] Eu conferi a checklist de atividades, e expliquei no meu merge request caso algo não tenha sido necessário ou possível

In GitLab by @victorandre957 on Aug 9, 2023, 01:03

added 6 commits

6615976e...c9848e81 - 5 commits from branch develop
97948424 - merge to develop

Compare with previous version

In GitLab by @victorandre957 on Aug 9, 2023, 12:00

added 1 commit

0d200f0d - (fix): fix prettier format

Compare with previous version

combinei com o raposo de não dar nome da versão até o momento em que for colocar em produção pq esse número é definido com base nas coisas que foram modificadas no total. Tipo, se tiver breaking change no próximo merge, já vira v4.0.0

## current

### Features

- Create Kanban component

### Refactors

### Fix

### Breaking Changes

Faltou ligar/criar aqui no card aquela página com a doc das props, e a doc de variáveis css:

Olhando aqui a doc do kanban card não entendi o que são esses itens que sublinhei:

Quanto a lista:

As props:

Achei confuso ter uma props que se chama "props" que é um objeto, que habilita o uso do default.
Não entendi o que o "flipDurationMs" faz, e pq preciso do "id".

Os Eventos:

Tem um monte de evento, mas eu não sei como faço para eles dispararem, não vi nenhum action acontecendo quando eu clico nas coisas.

As props:

Tem muitas props, eu fiquei bem perdido. Me pareceu redundante e confuso eu poder mexer por meio da lista no corpo do card, por exemplo. Eu criaria 2 slots só, o default ou custom-list (e deixar documentado que ele serve pra vc criar uma lista customizada e manter funcionando o quadro), e o card (que se vc quiser mexer minimamente em qualquer coisa do card vc cria um novo componente no seu projeto (pode usar o que já tem do card ou não e passa pra cá). Pq assim ficaria uma aplicação um pouco estranha ao meu ver

<list>
<div slot="card-header">
...
</div>
<div slot="card-body">
...
</div>
<div slot="card-body">
...
</div>
<div slot="list-header">
...
</div>
</list>

Prefiro algo assim:

<list>
<div slot="list-header">
...
</div>
<MyCustomCard slot="card" let:cardData>
...
</MyCustomCard>
</list>

E ai se eu quiser mudar a label do card por exemplo, eu sou obrigado a fazer o MyCustomCard como um outro componente no meu projeto.

Dropdown ta vazio, fica parecendo bug:

Pro board a minha sugestão é a mesma que indiquei p/ lista. Ele ficou muito pesado, vc foi acumulando tudo que tinha de props e slot nos outros. Uma analogia, vc fez uma função A q tinha 3 parâmetros (A1,A2,A3), depois vc fez outra função que faz uso da função A, chamada função B, e tinha 2 parâmetros (B1,B2), no lugar vc criar uma dependência agnóstica a implementação de A (B1, B2, callback que faz A) vc fez (B1,B2,A1,A2,A3). Nessa analogia foram só 2 camadas, o seu tem 4 (board - lista - card - label). Eu prefiro ser obrigado a juntar os pedaços todas as vezes, então crio o board, passo a lista, na lista passo o card, no card passo a label, do que ter isso automático e ter que entender tantas props). Algo do tipo:

<Board minhas-configs-do-board dados-do-board>
<Lista let:listData>
 <Card let:cardData />
<Lista>
</Board>

Ainda se tratando do board, esse ligar do botão de adicionar, as vezes pode fazer sentido ligar só pra uma lista, no formato que está não sei como eu ligaria para uma lista só se a configuração desse ponto é global.

Como vc faz para saber a nova ordem? Tanto da lista, quando do card, é com base na ordem do array? A mesma coisa vale pra mudança do card de lista? vc descobre a mudança olhando pra qual array ele foi?

Tive uma ideia aqui de fazer um log de operações no board, pra facilitar quem vai persistir o dado, depois em liga ai.

Criaria um exemplo com scroll, o board fica com scroll na página, teremos que ter scroll na lista.

Começamos a chamar de card example, o pessoal estava confuso com esse nome wrapper e pra que servia. O que vc acha?

import CardExample from "./CardExample.svelte";

o gradient está sempre presente neste componente, n entendi pq dessa separação.

Abaixo tem um card-border-not-gradient q n entendi tb.

faltou tipar o restprops pro storybook funcionar melhor, por padrão restprops é any, abrindo margem pra erros.

Um jeito de indicar o que entra no restProps.

linha7: vc está usando diretamente uma dependencia que é de outra lib, salvo engano é boa prática adicionar ela como dependencia desse projeto tb.

n esta funcionando o formato svelte de setar variável css direto na div n? ou será q só funciona em componente?

troque o background:{LabelData.backgroundColor} por uma variável css e use no css msm, pra ficar no padrão q vc fez a cima

cara, que componente com interface confusa. Essa props chamada "componentes" ai mt ruim pqp. Tive que ler a lib pra entender o que diabos era o PickerColorWrapper, pq a interface dele n fazia sentido nenhum, e pq n estava na pasta componentes. Se tu conseguir deixar mais claro esse ponto ai seria bom.

uma div é por padrão block, não entendi isso daqui

tu criou um tipo genérico mas n está usando ele.

A linha 19, se fosse feito o uso do generic acho q n precisa dela.

quebraria esse data em mais props, para ficar melhor documentado, e vc poder comentar algumas coisas, como por exemplo o que o showButtons faz? Olhando o storybook somente eu nunca ia descobrir o que faz esse showButtons. Pq n tem um exemplo com o uso dele, e o storybook n mostra o tipo. Não tem com eu saber sem testar também, pq n tem um comentário deixando explicito que se refere ao mesmo showButtons das labels

comportamento bom de documentar, um comentário ali no showbuttons já ajuda

qual a necessidade desse zindex?

/** this is not global is only available for components using svelte-dnd-action lib */
declare type Item = import("svelte-dnd-action").Item;
declare type DndEvent<ItemType = Item> = import("svelte-dnd-action").DndEvent<ItemType>;
declare namespace svelte.JSX {
  interface HTMLAttributes<T> {
    onconsider?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void;
    onfinalize?: (event: CustomEvent<DndEvent<ItemType>> & { target: EventTarget & T }) => void;
  }
}

import ListExample from "./ListExample.svelte";

    addCard: undefined;
    clickCard: undefined;

pq precisa do if openedDropdown + bind:opened={openedDropdown} + targetId?

forward de evento sem uso

      {#each cardsList as cardData (cardData.id)}

não está documentado que meu custom-list precisa ter um slot

linha 4, mal tipado.

Vc poderia usar um restprosp tipado no lugar de declarar tudo dnv

de onde brotou esse id e teste?

linha 132, aqui e em outros lugares não faria spreed do dado, fica mais dificil a tipagem salvo engano

requested review from @01oseluiz

In GitLab by @victorandre957 on Aug 11, 2023, 13:09

Commented on src/lib/components/Kanban/Components/EditLabel/EditLabel.svelte line 43

<div slot="modal-content" class="modal-content" --szot-input-border-color="{LabelData.backgroundColor}" />

Seria isso aqui? Só funciona em componentes, na div direto não funciona.

In GitLab by @victorandre957 on Aug 11, 2023, 17:02

Commented on src/lib/components/Kanban/Components/List/List.svelte line 132

Passar apenas o objeto funciona sim, porem isso obriga o usuário a criar um componente que receba esse objeto e dentro do componente dele poder acessar isso, caso contrário o lint vai reclamar. Deixei os 2 formatos: <slot name="body-list" {cardData} {...cardData} /> Dessa forma você pode tanto usar o objeto em um coponente ou declarar todas as variaveis e usar direto.

In GitLab by @victorandre957 on Aug 11, 2023, 23:19

Commented on src/lib/components/Card/Card.svelte line 72

Adicionei uma nota sobre isso na documentação.

In GitLab by @victorandre957 on Aug 12, 2023, 01:26

resolved all threads

In GitLab by @victorandre957 on Aug 12, 2023, 01:29

Commented on src/lib/components/Card/Card.stories.ts line 4

changed this line in version 4 of the diff

In GitLab by @victorandre957 on Aug 12, 2023, 01:29

Commented on src/lib/components/Card/CardWrapper.svelte line 12

changed this line in version 4 of the diff

In GitLab by @victorandre957 on Aug 12, 2023, 01:29