World Clock — plugin Backstage

Plugin de frontend para o Backstage que exibe relógios em tempo real para fusos horários de escritórios (Nova York, Londres e Tóquio por padrão). O item World clock aparece automaticamente na barra lateral.

Construída com o novo sistema de frontend do Backstage (@backstage/frontend-plugin-api).

Requisitos

• App Backstage com o novo frontend system (padrão em apps criados recentemente com create-app).
• No app-config.yaml, a descoberta automática de plugins costuma estar habilitada com app.packages: all (valor padrão em apps novos).

Se o seu app ainda usa o frontend legado, esta plugin não é compatível sem migração.

Instalação

Na raiz do monorepo do seu app Backstage (não na pasta da plugin):

yarn --cwd packages/app add @lucaspalharesbarbosa/backstage-plugin-world-clock-plugin

A dependência deve ficar em packages/app, onde ficam as plugins de interface.

Descoberta automática (recomendado)

Confirme que o app-config.yaml contém:

app:
  packages: all

Com isso, não é necessário alterar código: a plugin é detectada após a instalação.

Suba o app e acesse:

http://localhost:3000/world-clock-plugin

Instalação manual (opcional)

Use apenas se não utilizar app.packages: all ou precisar de controle explícito sobre as features do app.

Em packages/app/src/App.tsx (o caminho pode variar no seu projeto):

import { createApp } from '@backstage/frontend-defaults';
import worldClockPlugin from '@lucaspalharesbarbosa/backstage-plugin-world-clock-plugin';

const app = createApp({
  features: [
    worldClockPlugin,
    // ...demais plugins
  ],
});

export default app.createRoot();

Documentação oficial: Configuring App with plugins.

Uso

| Item | Valor | |------|--------| | Rota | /world-clock-plugin | | Título na sidebar | World clock | | ID da plugin | world-clock-plugin |

As cidades exibidas vêm da constante DISPLAY_CITIES exportada pelo pacote. Para personalizar fusos no código do seu app, importe e use os tipos exportados (CityClockConfig, DISPLAY_CITIES) conforme a necessidade do seu time.

Atualização

Para instalar uma versão mais recente publicada no npm:

yarn --cwd packages/app upgrade @lucaspalharesbarbosa/backstage-plugin-world-clock-plugin

Desenvolvimento local (mantenedores)

Para trabalhar neste repositório da plugin, não no app Backstage consumidor:

yarn install
yarn start

O modo isolado em dev/ oferece hot reload mais rápido e serve apenas para desenvolvimento.

Outros comandos úteis:

yarn build   # gera dist/ para publicação no npm
yarn test
yarn lint

Links

• Documentação — building plugins
• Repositório no GitHub
• Reportar problemas

Licença

UNLICENSED — consulte o autor antes de redistribuir ou usar fora do contexto acordado.