@devix-tecnologia/timeline-vue 1.0.1

package/src/components/timeline/organismos/Timeline.mock.ts

@@ -0,0 +1,281 @@
+import { Evento, Perfil } from "../type";
+
+export const dadosPerfil: Perfil = {
+  nome: "Maria do Socorro",
+  imagem:
+    "https://this-person-does-not-exist.com/img/avatar-gen11071f8e0802a35d66684ee9376722b2.jpg",
+  icone: "person",
+};
+
+export const dadosEventos: Evento[] = [
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f1",
+    data: new Date("2023-04-26T19:00Z"),
+    previsto: new Date("2023-04-26T19:00Z"),
+    realizado: new Date("2023-04-26T19:30Z"),
+    duracao: null,
+    tolerancia: null,
+    titulo: "Vacina da Covid",
+    subtitulo: "Posto de saúde do bairro",
+    destaque: "",
+    categoria: {
+      nome: "Vacina",
+      icone: "vaccines",
+    },
+    status: "realizado",
+    criticidade: "media",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f2",
+    data: new Date("2023-04-26T18:10Z"),
+    previsto: new Date("2023-04-26T18:10Z"),
+    realizado: new Date("2023-04-26T18:15Z"),
+    duracao: null,
+    tolerancia: null,
+    titulo: "Vacina da gripe",
+    subtitulo: "Posto de saúde do bairro",
+    destaque: "",
+    categoria: {
+      nome: "Vacina",
+      icone: "vaccines",
+    },
+    status: "cancelado",
+    criticidade: "baixa",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f3",
+    data: new Date("2023-05-03T09:00Z"),
+    previsto: new Date("2023-05-03T09:00Z"),
+    realizado: new Date("2023-05-03T09:00Z"),
+    duracao: null,
+    tolerancia: null,
+    titulo: "Ligar para médica",
+    subtitulo: "",
+    destaque: "",
+    categoria: {
+      nome: "Ligação",
+      icone: "call",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: true,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f4",
+    data: new Date("2023-05-03T10:00Z"),
+    previsto: new Date("2023-05-03T10:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Passeio no parque",
+    subtitulo: "",
+    destaque: "",
+    categoria: {
+      nome: "Passeio",
+      icone: "tour",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f5",
+    data: new Date("2023-05-03T11:00Z"),
+    previsto: new Date("2023-05-03T11:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Exames do coração",
+    subtitulo: "Hospital do Coração",
+    destaque: "",
+    categoria: {
+      nome: "Cardiologista",
+      icone: "cardiology",
+    },
+    status: "planejado",
+    criticidade: "media",
+    acao: true,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f6",
+    data: new Date("2023-05-01T12:00Z"),
+    previsto: new Date("2023-05-01T12:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Consulta",
+    subtitulo: "Posto de saúde",
+    destaque: "Remarcado",
+    categoria: {
+      nome: "Tele consulta",
+      icone: "call",
+    },
+    status: "adiado",
+    criticidade: "baixa",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f7",
+    data: new Date("2023-05-01T13:00Z"),
+    previsto: new Date("2023-05-01T13:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Consulta cardiologista",
+    subtitulo: "Posto de saúde do bairro",
+    destaque: "",
+    categoria: {
+      nome: "Cardiologista",
+      icone: "cardiology",
+    },
+    status: "realizado",
+    criticidade: "alta",
+    acao: true,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f8",
+    data: new Date("2023-05-03T12:30Z"),
+    previsto: new Date("2023-05-03T12:30Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Dentista",
+    subtitulo: "Reta da Penha",
+    destaque: "",
+    categoria: {
+      nome: "Dentista",
+      icone: "dentistry",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f9",
+    data: new Date("2023-05-03T14:30Z"),
+    previsto: new Date("2023-05-03T14:30Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Consulta",
+    subtitulo: "Hospital central",
+    destaque: "",
+    categoria: {
+      nome: "Consulta",
+      icone: "health_and_safety",
+    },
+    status: "planejado",
+    criticidade: "alta",
+    acao: true,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f10",
+    data: new Date("2023-05-03T15:30Z"),
+    previsto: new Date("2023-05-03T15:30Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Remédio de pressão",
+    subtitulo: "Aferir a pressão",
+    destaque: "",
+    categoria: {
+      nome: "Remédio",
+      icone: "pill",
+    },
+    status: "planejado",
+    criticidade: "alta",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f11",
+    data: new Date("2023-05-03T16:00Z"),
+    previsto: new Date("2023-05-03T16:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Checar temperatura",
+    subtitulo: "",
+    destaque: "",
+    categoria: {
+      nome: "Termometro",
+      icone: "thermometer_gain",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: true,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f12",
+    data: new Date("2023-05-03T17:30Z"),
+    previsto: new Date("2023-05-03T17:30Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Avaliação Física",
+    subtitulo: "",
+    destaque: "IMC: 28,4",
+    categoria: {
+      nome: "Avaliação Física",
+      icone: "conditions",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f13",
+    data: new Date("2023-05-03T18:00Z"),
+    previsto: new Date("2023-05-03T18:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Vacina da gripe",
+    subtitulo: "Posto de saúde do bairro",
+    destaque: "",
+    categoria: {
+      nome: "Vacina",
+      icone: "vaccines",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: true,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f14",
+    data: new Date("2023-05-03T19:00Z"),
+    previsto: new Date("2023-05-03T19:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Vitamina D",
+    subtitulo: "2 comprimidos",
+    destaque: "",
+    categoria: {
+      nome: "Remédio",
+      icone: "pill",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: false,
+  },
+  {
+    id: "15ea7863-2402-4b84-8a8d-10a00ba07e2f15",
+    data: new Date("2023-05-03T20:00Z"),
+    previsto: new Date("2023-05-03T20:00Z"),
+    realizado: null,
+    duracao: null,
+    tolerancia: null,
+    titulo: "Fisioterapia",
+    subtitulo: "",
+    destaque: "",
+    categoria: {
+      nome: "Fisioterapia",
+      icone: "physical_therapy",
+    },
+    status: "planejado",
+    criticidade: "baixa",
+    acao: true,
+  },
+];

package/src/components/timeline/organismos/Timeline.stories.ts

@@ -0,0 +1,31 @@
+import Timeline from './Timeline.vue';
+import { Meta, StoryFn } from '@storybook/vue3';
+import { dadosEventos, dadosPerfil } from './Timeline.mock';
+
+export default {
+  title: 'Devix/Timeline/Organismos/Timeline',
+  component: Timeline,
+  parameters: {
+    componentSubtitle: 'Linha do tempo padrão com identidade da Devix',
+  },
+  argTypes: {},
+} as Meta<typeof Timeline>;
+
+const perfilMock = dadosPerfil;
+
+const eventosPorDataMock = dadosEventos;
+
+const Template: StoryFn<typeof Timeline> = (args) => ({
+  components: { Timeline: Timeline },
+  setup() {
+    return { args };
+  },
+  template:
+    '<Timeline :perfilTimeline="args.perfilTimeline" :eventosTimeline="args.eventosTimeline" style="position: relative" />',
+});
+
+export const Padrao = Template.bind({});
+Padrao.args = {
+  perfilTimeline: perfilMock,
+  eventosTimeline: eventosPorDataMock,
+};

package/src/components/timeline/organismos/Timeline.vue

@@ -0,0 +1,188 @@
+<template>
+  <div>
+    <div>
+      <PerfilTimeline
+        v-if="perfilTimeline !== null"
+        :nomePerfil="perfilTimeline.nome"
+        :imagemPerfil="perfilTimeline.imagem"
+        :iconePerfil="perfilTimeline.icone"
+      />
+    </div>
+
+    <div
+      v-for="evento in eventosPorTipo"
+      :key="evento.key"
+      class="areaTimeline"
+    >
+      <!-- SEPARADOR -->
+      <div v-if="evento.tipo === 'dia'">
+        <SeparadorPeriodo :dataSeparador="evento.valor.toDateString()" />
+      </div>
+      <div v-if="evento.tipo === 'evento'">
+        <section class="timeline">
+          <!--loop-->
+          <EventoTimeline :dadosEvento="evento" />
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, reactive } from "vue";
+import EventoTimeline from "../moleculas/EventoTimeline.vue";
+import SeparadorPeriodo from "../moleculas/SeparadorPeriodo.vue";
+import PerfilTimeline from "../moleculas/PerfilTimeline.vue";
+import { Evento } from "../type";
+
+type TipoEventoTimeline =
+  | { tipo: "dia"; valor: Date; key: number }
+  | { tipo: "evento"; valor: Evento; key: number; atual: boolean }
+  | { tipo: "eventos"; valor: Evento[]; key: number };
+
+// type Ordem = 'ascendente' | 'descendente';
+
+export default defineComponent({
+  props: {
+    perfilTimeline: {
+      required: true,
+      type: Object,
+    },
+    eventosTimeline: {
+      required: true,
+      type: Object,
+    },
+    // ordem: {
+    //   required: false,
+    //   type: Ordem,
+    // },
+  },
+  components: {
+    PerfilTimeline,
+    SeparadorPeriodo,
+    EventoTimeline,
+  },
+  setup(props) {
+    const dadosEventosTimeline: Evento[] = reactive(
+      props.eventosTimeline as Array<Evento>
+    );
+
+    const eventosOrdenados = dadosEventosTimeline.sort(
+      (a: Evento, b: Evento) => {
+        return a.data.getTime() - b.data.getTime();
+      }
+    );
+
+    const verifica_mesmo_dia = (a: Date, b: Date) => {
+      const mesmo_dia = a.getDay() === b.getDay();
+      const mesmo_mes = a.getMonth() === b.getMonth();
+      const mesmo_ano = a.getFullYear() === b.getFullYear();
+      return mesmo_dia && mesmo_mes && mesmo_ano;
+    };
+
+    //verifica qual evento está mais próximo da hora atual e coloca ele numa nova lista na primeira posição
+    function filtraEventoAtual(eventos: Evento[]) {
+      if (eventos) {
+        const agora = Date.now();
+        let minDiff = null;
+        let listaEventos = [];
+        for (const e of eventos) {
+          const t = e.data.getTime();
+          const diff = Math.abs(agora - t);
+          if (minDiff === null || diff < minDiff) {
+            minDiff = diff;
+            listaEventos.length = 0;
+          }
+          //se o evento já estiver marcado como realizado, cancelado ou adiado, ele pula para o próximo da lista.
+          if (e.status === "planejado" || e.status === "atrasado") {
+            listaEventos.push(e);
+          }
+        }
+        return listaEventos;
+      } else {
+        console.log("vazio.. ", []);
+        return [];
+      }
+    }
+    const eventosFiltrados: Evento[] = filtraEventoAtual(eventosOrdenados);
+    const eventoAtual = eventosFiltrados[0]
+      ? (eventosFiltrados[0] as Evento)
+      : null;
+
+    //lista de eventos
+    const eventosPorTipo = computed(() => {
+      if (dadosEventosTimeline) {
+        let result: Array<TipoEventoTimeline> = [];
+        let dataAtual: Date | null = null;
+        let idx = 0;
+
+        for (const evento of eventosOrdenados) {
+          const dataEvento = evento.data;
+
+          if (!dataAtual || !verifica_mesmo_dia(dataAtual, dataEvento)) {
+            dataAtual = dataEvento;
+            result.push({
+              tipo: "dia",
+              valor: evento.data,
+              key: ++idx,
+            });
+          }
+
+          result.push({
+            tipo: "evento",
+            valor: evento,
+            key: ++idx,
+            atual:
+              eventoAtual === null
+                ? false
+                : evento.id === eventoAtual.id
+                ? true
+                : false,
+          });
+        }
+        return result;
+      } else {
+        return [];
+      }
+    });
+
+    return {
+      eventosPorTipo,
+    };
+  },
+  methods: {
+    scrollParaItemAtual() {
+      const itemAtual = document.querySelector(".atual");
+      itemAtual?.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    },
+  },
+  mounted() {
+    this.scrollParaItemAtual();
+  },
+});
+</script>
+
+<style scoped>
+/* TIMELINE */
+
+/* .areaTimeline {
+  max-width: 850px;
+  margin: 0 auto;
+} */
+
+.areaEvento {
+  display: table-row;
+  min-height: 8rem;
+  position: relative !important;
+  width: 100%;
+}
+
+.timeline {
+  display: table;
+  width: 100%;
+  position: relative;
+}
+</style>

package/src/components/timeline/type.ts

@@ -0,0 +1,30 @@
+export type Perfil = {
+  nome: string;
+  imagem: string | null;
+  icone: string | null;
+};
+
+export type Evento = {
+  id: string;
+  data: Date;
+  previsto: Date;
+  duracao: number | null;
+  realizado: Date | null;
+  tolerancia: number | null;
+  titulo: string;
+  subtitulo: string;
+  destaque: string;
+  categoria: {
+    nome: string;
+    icone: string;
+  };
+  status:
+    | "atrasado"
+    | "adiantado"
+    | "adiado"
+    | "realizado"
+    | "planejado"
+    | "cancelado";
+  criticidade: string;
+  acao: boolean;
+};

package/src/global.css

@@ -0,0 +1,98 @@
+/* GERAIS */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+*:focus {
+  outline: none;
+}
+
+:root {
+  --fonte: 'Work Sans', sans-serif;
+  font-size: 62.5%;
+
+  --cor-primaria: #00e01d;
+  --cor-secundaria: #1b2f39;
+  --cor-terciaria: #ebf1f2;
+
+  --cor-fundo: #fff;
+
+  --cor-selecao: #ccf9d2;
+  --cor-texto-selecao: #1b2f39;
+  --cor-texto: #1b2f39;
+
+  --cor-apoio: #57676f;
+  --cor-linha: #e9eaeb;
+
+  --cor-importante: #bb0202;
+  --cor-alerta: #f0cc0d;
+  --cor-sucesso: #00a816;
+}
+
+
+:root .tema-escuro {
+  --fonte: 'Work Sans', sans-serif;
+  font-size: 62.5%;
+
+  --cor-primaria: #00e01d;
+  --cor-secundaria: #ebf1f2;
+  --cor-terciaria: #1b2f39;
+
+  --cor-fundo: #1b2f39;
+
+  --cor-selecao: #ccf9d2;
+  --cor-texto-selecao: #1b2f39;
+  --cor-texto: #f9f9f9;
+
+  --cor-apoio: #57676f;
+  --cor-linha: #e9eaeb;
+
+  --cor-importante: #bb0202;
+  --cor-alerta: #f0cc0d;
+  --cor-sucesso: #00a816;
+}
+
+body {
+  font-family: var(--fonte);
+  font-size: 1.6rem;
+  font-weight: 300;
+}
+
+h1 {
+  font-size: 2.4rem;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 1.8rem;
+  font-weight: 600;
+}
+
+h3 {
+  font-size: 1.4rem;
+  font-weight: 600;
+  margin: 0;
+  padding: 0;
+  line-height: 1em;
+}
+
+h4 {
+  font-size: 1.2rem;
+  font-weight: 300;
+}
+
+.texto-pequeno {
+  font-size: 1rem;
+}
+
+.texto-medio {
+  font-size: 1.2rem;
+}
+
+.texto-grande {
+  font-size: 1.4rem;
+}

package/src/index.ts

@@ -0,0 +1,16 @@
+import { Plugin } from "vue";
+import * as components from "./components/timeline";
+import "./global.css";
+
+const Timeline: Plugin = {
+  install(app, ...options) {
+    for (const key in components) {
+      // @ts-expect-error
+      app.component(key, components[key]);
+    }
+  },
+};
+
+export default Timeline;
+
+export * from "./components/timeline";

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />