@uappi/public-sdk 1.2.8 → 1.2.10

package/.gitlab-ci.yml

@@ -0,0 +1,43 @@
+stages:
+  - verify
+  - release
+
+variables:
+  GIT_DEPTH: 0
+
+.node-cache:
+  cache:
+    key:
+      files:
+        - package-lock.json
+    paths:
+      - node_modules/
+
+verify:
+  stage: verify
+  image: node:22
+  extends: .node-cache
+  rules:
+    - if: '$CI_PIPELINE_SOURCE == "merge_request_event"'
+  script:
+    - npm ci
+    - npm run lint
+    - npm run type-check
+
+release:
+  stage: release
+  image: node:22
+  extends: .node-cache
+  rules:
+    - if: '$CI_COMMIT_BRANCH == "main" && $CI_PIPELINE_SOURCE == "push"'
+  before_script:
+    - apt-get update -qq && apt-get install -y -qq git > /dev/null
+    - git config user.name "gitlab-ci"
+    - git config user.email "ci@uappi.com.br"
+    - git remote set-url origin "https://oauth2:${GITLAB_PUSH_TOKEN}@${CI_SERVER_HOST}/${CI_PROJECT_PATH}.git"
+    - git fetch --tags origin
+  script:
+    - npm ci
+    - npm run lint
+    - npm run type-check
+    - bash scripts/release.sh

package/.husky/pre-push

@@ -0,0 +1 @@
+npm run prepush

package/.vscode/extensions.json

@@ -1,5 +1,5 @@
-{
-  "recommendations": [
-    "EditorConfig.EditorConfig"
-  ],
+{
+  "recommendations": [
+    "EditorConfig.EditorConfig"
+  ],
 }

package/.vscode/settings.json

@@ -1,7 +1,7 @@
-{
-  "editor.tabSize": 2,
-  "editor.formatOnSave": false,
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit"
-  },
+{
+  "editor.tabSize": 2,
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
 }

package/README.md

@@ -0,0 +1,67 @@
+# @uappi/public-sdk
+
+Pacotes públicos (composables, tipos e componentes Vue 3) para desenvolvimento do ecossistema Uappi. Publicado como `.ts`/`.vue` cru — sem etapa de build — então os erros de compilação (imports de tipo, `verbatimModuleSyntax`, etc.) só aparecem quando o projeto consumidor faz o type-check. Por isso este repositório valida tudo antes de deixar chegar lá.
+
+## Setup
+
+```
+npm install
+```
+
+Isso também instala os git hooks do Husky via `prepare`.
+
+## Scripts
+
+| Script | O que faz |
+|---|---|
+| `npm run lint` | ESLint (`eslint.config.mjs`), com a regra `@typescript-eslint/consistent-type-imports` — pega imports de tipo sem `type`, que é a causa mais comum de quebrar o build de projetos consumidores com `verbatimModuleSyntax` habilitado. |
+| `npm run type-check` | `tsc --noEmit` usando `tsconfig.json`, que tem `verbatimModuleSyntax: true` propositalmente — reproduz localmente o mesmo erro que apareceria no projeto consumidor. |
+| `npm run prepush` | `lint` + `type-check` juntos. Roda automaticamente antes de qualquer `git push` (hook `.husky/pre-push`). |
+
+Se `npm run prepush` falhar, o `git push` é bloqueado. Corrija os erros reportados antes de tentar de novo.
+
+## Fluxo de desenvolvimento
+
+1. Crie uma branch a partir da `main`.
+2. Faça as alterações. Rode `npm run lint` e `npm run type-check` localmente se quiser adiantar (o pre-push já roda isso antes do push).
+3. Commite usando **Conventional Commits** — o prefixo do commit decide o bump de versão automático quando a MR for mergeada (veja [Versionamento e publicação](#versionamento-e-publicação)):
+   - `fix: ...` → patch
+   - `feat: ...` → minor
+   - `feat!: ...` ou corpo do commit com `BREAKING CHANGE: ...` → major
+   - qualquer outro prefixo (`chore:`, `docs:`, `refactor:`, etc.) → patch por padrão
+4. Abra o Merge Request para a `main`. A pipeline roda o job `verify` (lint + type-check) automaticamente na MR.
+5. Após aprovado, faça o merge. Isso dispara o job `release` na `main` — não é preciso bumpar versão nem publicar manualmente.
+
+## Versionamento e publicação (CI/CD)
+
+O `.gitlab-ci.yml` tem dois jobs:
+
+- **`verify`** — roda em toda pipeline de Merge Request. Executa `lint` e `type-check`. É a mesma checagem do hook local, mas visível na revisão do MR.
+- **`release`** — roda apenas em push direto na `main` (ou seja, no merge de uma MR aprovada). Faz, nessa ordem:
+  1. Roda `lint` e `type-check` de novo (segurança extra, já que o hook local pode ser pulado com `--no-verify`).
+  2. Olha os commits desde a última tag `vX.Y.Z` e decide o bump (patch/minor/major) pelas regras de Conventional Commits acima.
+  3. Atualiza a versão no `package.json`.
+  4. Publica no npm (`npm publish --access public`).
+  5. Só se a publicação funcionar: commita a nova versão e cria a tag `vX.Y.Z` de volta na `main`, com `[skip ci]` no commit para não disparar a pipeline de novo.
+
+Se o job `release` falhar (ex: token expirado, lint quebrado), nada é publicado e a versão não muda — corrija o problema e re-rode o job manualmente pela pipeline no GitLab, sem precisar de outra MR.
+
+### Variáveis de CI/CD necessárias (Settings → CI/CD → Variables no GitLab)
+
+| Variável | Uso | Observação |
+|---|---|---|
+| `NPM_TOKEN` | Autenticação no registry do npm para o `npm publish` | Token do tipo **Granular Access Token**, escopo `@uappi` ou pacote específico, permissão *Read and write*, com expiração — precisa ser rotacionado periodicamente. |
+| `GITLAB_PUSH_TOKEN` | Permite o job `release` dar `git push`/criar tag de volta na `main` protegida | Personal ou Project Access Token, scope `write_repository`, com role que tenha permissão de push na `main` (Maintainer, se a proteção da branch exigir). Também expira — se o `release` começar a falhar com 401, é o primeiro lugar a checar. |
+
+Ambas marcadas como **Protected** e **Masked**.
+
+### Bootstrap (já feito, só como referência)
+
+O job `release` precisa de uma tag de referência para calcular "commits desde o último release". A tag inicial foi criada manualmente uma única vez, apontando para a versão já publicada no npm no momento em que o CI foi introduzido:
+
+```
+git tag v1.2.9 origin/main
+git push origin v1.2.9
+```
+
+Não repita esse passo — é só histórico de como o processo começou.

package/components/Animations/ExpandTransition.ts

@@ -1,89 +1,89 @@
-import {
-  defineComponent,
-  h,
-  Transition,
-  type BaseTransitionProps,
-  type PropType,
-} from 'vue';
-
-export const ExpandTransition = defineComponent({
-  name: 'ExpandTransition',
-  props: {
-    mode: {
-      type: String as PropType<BaseTransitionProps<Element>['mode']>,
-      default: 'out-in',
-    },
-  },
-  setup(props, { slots }) {
-    const beforeEnter = (el: Element) => {
-      const element = el as HTMLElement;
-      element.style.height = '0';
-      element.style.opacity = '0';
-      element.style.overflow = 'hidden';
-    };
-
-    const enter = (el: Element, done: () => void) => {
-      const element = el as HTMLElement;
-      element.style.transition = 'none';
-      element.style.height = 'auto';
-      const targetHeight = element.scrollHeight + 'px';
-      element.style.height = '0';
-      void element.offsetHeight;
-      element.style.transition =
-        'height 300ms ease-in-out, opacity 300ms ease-in-out';
-      element.style.height = targetHeight;
-      element.style.opacity = '1';
-
-      const cleanup = () => {
-        element.style.height = 'auto';
-        element.style.overflow = '';
-        element.removeEventListener('transitionend', cleanup);
-        done();
-      };
-
-      element.addEventListener('transitionend', cleanup);
-    };
-
-    const leave = (el: Element, done: () => void) => {
-      const element = el as HTMLElement;
-      const height = element.scrollHeight + 'px';
-      element.style.height = height;
-      element.style.opacity = '1';
-      element.style.overflow = 'hidden';
-      void element.offsetHeight;
-      element.style.transition =
-        'height 300ms ease-in-out, opacity 300ms ease-in-out';
-      element.style.height = '0';
-      element.style.opacity = '0';
-
-      const cleanup = () => {
-        element.removeEventListener('transitionend', cleanup);
-        done();
-      };
-
-      element.addEventListener('transitionend', cleanup);
-    };
-
-    const cancel = (el: Element) => {
-      const element = el as HTMLElement;
-      element.style.transition = '';
-      element.style.height = 'auto';
-      element.style.opacity = '';
-      element.style.overflow = '';
-    };
-
-    return () =>
-      h(
-        Transition,
-        {
-          mode: props.mode,
-          onBeforeEnter: beforeEnter,
-          onEnter: enter,
-          onLeave: leave,
-          onEnterCancelled: cancel,
-          onLeaveCancelled: cancel,
-        },
-        slots,
-      );
-  },
-});
+import {
+  defineComponent,
+  h,
+  Transition,
+  type BaseTransitionProps,
+  type PropType,
+} from 'vue';
+
+export const ExpandTransition = defineComponent({
+  name: 'ExpandTransition',
+  props: {
+    mode: {
+      type: String as PropType<BaseTransitionProps<Element>['mode']>,
+      default: 'out-in',
+    },
+  },
+  setup(props, { slots }) {
+    const beforeEnter = (el: Element) => {
+      const element = el as HTMLElement;
+      element.style.height = '0';
+      element.style.opacity = '0';
+      element.style.overflow = 'hidden';
+    };
+
+    const enter = (el: Element, done: () => void) => {
+      const element = el as HTMLElement;
+      element.style.transition = 'none';
+      element.style.height = 'auto';
+      const targetHeight = element.scrollHeight + 'px';
+      element.style.height = '0';
+      void element.offsetHeight;
+      element.style.transition =
+        'height 300ms ease-in-out, opacity 300ms ease-in-out';
+      element.style.height = targetHeight;
+      element.style.opacity = '1';
+
+      const cleanup = () => {
+        element.style.height = 'auto';
+        element.style.overflow = '';
+        element.removeEventListener('transitionend', cleanup);
+        done();
+      };
+
+      element.addEventListener('transitionend', cleanup);
+    };
+
+    const leave = (el: Element, done: () => void) => {
+      const element = el as HTMLElement;
+      const height = element.scrollHeight + 'px';
+      element.style.height = height;
+      element.style.opacity = '1';
+      element.style.overflow = 'hidden';
+      void element.offsetHeight;
+      element.style.transition =
+        'height 300ms ease-in-out, opacity 300ms ease-in-out';
+      element.style.height = '0';
+      element.style.opacity = '0';
+
+      const cleanup = () => {
+        element.removeEventListener('transitionend', cleanup);
+        done();
+      };
+
+      element.addEventListener('transitionend', cleanup);
+    };
+
+    const cancel = (el: Element) => {
+      const element = el as HTMLElement;
+      element.style.transition = '';
+      element.style.height = 'auto';
+      element.style.opacity = '';
+      element.style.overflow = '';
+    };
+
+    return () =>
+      h(
+        Transition,
+        {
+          mode: props.mode,
+          onBeforeEnter: beforeEnter,
+          onEnter: enter,
+          onLeave: leave,
+          onEnterCancelled: cancel,
+          onLeaveCancelled: cancel,
+        },
+        slots,
+      );
+  },
+});

package/components/Animations/index.ts

@@ -1 +1 @@
-export { ExpandTransition } from './ExpandTransition';
+export { ExpandTransition } from './ExpandTransition';

package/components/ColorTheme/ColorTheme.ts

@@ -1,80 +1,80 @@
-import { defineComponent, h, Fragment, onMounted } from 'vue';
-
-import type { CSSVariables } from './types';
-
-export const ColorTheme = defineComponent({
-  name: 'ColorTheme',
-  props: {
-    variables: {
-      type: Object as () => CSSVariables,
-    },
-  },
-  setup(props, { slots }) {
-    function applyColors() {
-      if (!props.variables?.colors) return;
-
-      document.documentElement.style.setProperty(
-        '--checkout-cta-default',
-        props.variables.colors.CheckoutCTADefault,
-      );
-      document.documentElement.style.setProperty(
-        '--checkout-cta-hover',
-        props.variables.colors.CheckoutCTAHover,
-      );
-      document.documentElement.style.setProperty(
-        '--checkout-cta-text',
-        props.variables.colors.CheckoutCTAText,
-      );
-      document.documentElement.style.setProperty(
-        '--primary-cta-text',
-        props.variables.colors.PrimaryCTAText,
-      );
-      document.documentElement.style.setProperty(
-        '--primary-interactive-default',
-        props.variables.colors.PrimaryInteractiveDefault,
-      );
-      document.documentElement.style.setProperty(
-        '--primary-interactive-hover',
-        props.variables.colors.PrimaryInteractiveHover,
-      );
-      document.documentElement.style.setProperty(
-        '--primary-interactive-hover-low',
-        props.variables.colors.PrimaryInteractiveHoverLow,
-      );
-      document.documentElement.style.setProperty(
-        '--primary-surface-disabled',
-        props.variables.colors.PrimarySurfaceDisabled,
-      );
-      document.documentElement.style.setProperty(
-        '--primary-surface-low',
-        props.variables.colors.PrimarySurfaceLow,
-      );
-      document.documentElement.style.setProperty(
-        '--primary-text-decorative',
-        props.variables.colors.PrimaryTextDecorative,
-      );
-    }
-
-    function applyFont() {
-      if (!props?.variables?.font?.link) return;
-
-      const fontLink = document.createElement('link');
-      fontLink.rel = 'stylesheet';
-      fontLink.setAttribute('uappi-custom-font', '');
-      fontLink.href = props.variables.font.link;
-      document.head.appendChild(fontLink);
-
-      document.documentElement.style.setProperty(
-        '--font-family',
-        props.variables.font.family,
-      );
-    }
-
-    onMounted(() => {
-      applyColors();
-      applyFont();
-    });
-
-    return () => h(Fragment, null, slots.default?.());
-  },
-});
+import { defineComponent, h, Fragment, onMounted } from 'vue';
+
+import type { CSSVariables } from './types';
+
+export const ColorTheme = defineComponent({
+  name: 'ColorTheme',
+  props: {
+    variables: {
+      type: Object as () => CSSVariables,
+    },
+  },
+  setup(props, { slots }) {
+    function applyColors() {
+      if (!props.variables?.colors) return;
+
+      document.documentElement.style.setProperty(
+        '--checkout-cta-default',
+        props.variables.colors.CheckoutCTADefault,
+      );
+      document.documentElement.style.setProperty(
+        '--checkout-cta-hover',
+        props.variables.colors.CheckoutCTAHover,
+      );
+      document.documentElement.style.setProperty(
+        '--checkout-cta-text',
+        props.variables.colors.CheckoutCTAText,
+      );
+      document.documentElement.style.setProperty(
+        '--primary-cta-text',
+        props.variables.colors.PrimaryCTAText,
+      );
+      document.documentElement.style.setProperty(
+        '--primary-interactive-default',
+        props.variables.colors.PrimaryInteractiveDefault,
+      );
+      document.documentElement.style.setProperty(
+        '--primary-interactive-hover',
+        props.variables.colors.PrimaryInteractiveHover,
+      );
+      document.documentElement.style.setProperty(
+        '--primary-interactive-hover-low',
+        props.variables.colors.PrimaryInteractiveHoverLow,
+      );
+      document.documentElement.style.setProperty(
+        '--primary-surface-disabled',
+        props.variables.colors.PrimarySurfaceDisabled,
+      );
+      document.documentElement.style.setProperty(
+        '--primary-surface-low',
+        props.variables.colors.PrimarySurfaceLow,
+      );
+      document.documentElement.style.setProperty(
+        '--primary-text-decorative',
+        props.variables.colors.PrimaryTextDecorative,
+      );
+    }
+
+    function applyFont() {
+      if (!props?.variables?.font?.link) return;
+
+      const fontLink = document.createElement('link');
+      fontLink.rel = 'stylesheet';
+      fontLink.setAttribute('uappi-custom-font', '');
+      fontLink.href = props.variables.font.link;
+      document.head.appendChild(fontLink);
+
+      document.documentElement.style.setProperty(
+        '--font-family',
+        props.variables.font.family,
+      );
+    }
+
+    onMounted(() => {
+      applyColors();
+      applyFont();
+    });
+
+    return () => h(Fragment, null, slots.default?.());
+  },
+});

package/components/ColorTheme/index.ts

@@ -1 +1 @@
-export { ColorTheme } from './ColorTheme';
+export { ColorTheme } from './ColorTheme';

package/components/ColorTheme/types.ts

@@ -1,18 +1,18 @@
-export interface CSSVariables {
-  font?: {
-    family: string;
-    link: string;
-  };
-  colors?: {
-    CheckoutCTADefault: string;
-    CheckoutCTAHover: string;
-    CheckoutCTAText: string;
-    PrimaryCTAText: string;
-    PrimaryInteractiveDefault: string;
-    PrimaryInteractiveHover: string;
-    PrimaryInteractiveHoverLow: string;
-    PrimarySurfaceDisabled: string;
-    PrimarySurfaceLow: string;
-    PrimaryTextDecorative: string;
-  };
-}
+export interface CSSVariables {
+  font?: {
+    family: string;
+    link: string;
+  };
+  colors?: {
+    CheckoutCTADefault: string;
+    CheckoutCTAHover: string;
+    CheckoutCTAText: string;
+    PrimaryCTAText: string;
+    PrimaryInteractiveDefault: string;
+    PrimaryInteractiveHover: string;
+    PrimaryInteractiveHoverLow: string;
+    PrimarySurfaceDisabled: string;
+    PrimarySurfaceLow: string;
+    PrimaryTextDecorative: string;
+  };
+}

package/components/SocialAuth/FacebookAuth/types.ts

@@ -1,3 +1,3 @@
-export interface Props {
-  uri: string;
+export interface Props {
+  uri: string;
 }

package/components/SocialAuth/GoogleAuth/types.ts

@@ -1,3 +1,3 @@
-export interface Props {
-  uri: string;
+export interface Props {
+  uri: string;
 }

package/components/SocialAuth/index.ts

@@ -1,2 +1,2 @@
-export { default as FacebookAuth } from './FacebookAuth/FacebookAuth.vue';
+export { default as FacebookAuth } from './FacebookAuth/FacebookAuth.vue';
 export { default as GoogleAuth } from './GoogleAuth/GoogleAuth.vue';

package/components/index.ts

@@ -1,3 +1,3 @@
-export * from './Animations';
-export * from './ColorTheme';
+export * from './Animations';
+export * from './ColorTheme';
 export * from './SocialAuth';

package/eslint.config.mjs

@@ -0,0 +1,19 @@
+import tseslint from 'typescript-eslint';
+
+export default tseslint.config(
+  {
+    ignores: ['node_modules/**', 'package-lock.json'],
+  },
+  ...tseslint.configs.recommended,
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        { prefer: 'type-imports', fixStyle: 'separate-type-imports' },
+      ],
+      '@typescript-eslint/no-unused-vars': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+);

package/main.ts

@@ -1,5 +1,5 @@
-export * from './modules';
-export * from './components'
-
-export type * as ApiTypes from './modules/Api/types'
+export * from './modules';
+export * from './components'
+
+export type * as ApiTypes from './modules/Api/types'
 export type * as TrackingTypes from './modules/Tracking/types'