start ui web

O Start UI [Web] é um repositório de partida de frente opinativo criado e mantido pela equipe do Bearstudio e outros colaboradores. Ele representa a pilha atualizada de nossa equipe que usamos ao criar aplicativos da Web para nossos clientes.

Documentação

Para obter informações detalhadas sobre como usar este projeto, consulte a documentação. A documentação contém todas as informações necessárias sobre instalação, uso e alguns guias.

Demonstração

Uma demonstração somente leitura ao vivo do que você terá ao iniciar um projeto com a interface do usuário inicial [Web] está disponível no Demo.start-ui.com.

Tecnologias

? TypeScript, ⚛️ React, ⚫️ NextJs, ⚡️ Chakra UI ,? TRPC, ▲ PRISMA ,? THANSTACK QUERSY, Storybook ,? Dramaturgo ,? React gancho forma ,? Reaja i18next

Requisitos

• Nodejs> = 20
• PNPM
• Docker (ou um banco de dados PostGresql)

Começando

pnpm create start-ui --web myApp

Que andaime irá uma nova pasta com a versão mais recente da interface do usuário inicial [web]?

Instalação

1. Duplique o arquivo .env.example para um novo arquivo .env e atualize as variáveis do ambiente

cp .env.example .env

Observação

Conselhos rápidos para o desenvolvimento local

• Não atualize a variável email_server , porque o valor padrão será usado para capturar os emails durante o desenvolvimento.

2. Instalar dependências

pnpm install

3. Configure e inicie o banco de dados com o Docker

pnpm dk:init

Observação

Não quer usar o Docker?

Configure um banco de dados PostGresql (localmente ou online) e substitua a variável de ambiente DATABASE_URL . Em seguida, você pode executar pnpm db:push para atualizar seu esquema de banco de dados e executar pnpm db:seed para semear seu banco de dados.

Desenvolvimento

 # Run the database in Docker (if not already started)
pnpm dk:start
# Run the development server
pnpm dev

E -mails em desenvolvimento

MailDev para pegar e -mails

No desenvolvimento, os e -mails não serão enviados e serão capturados pelo MailDev.

A interface do usuário do MailDev está disponível em 0.0.0.0:1080.

Visualizar e -mails

Os modelos de emails são criados com componentes react-email na pasta src/emails .

Você pode visualizar um modelo de email em http://localhost:3000/devtools/email/{template} onde {template} é o nome do arquivo de modelo na pasta src/emails/templates .

Exemplo: código de login

Visualização de tradução por e -mail

Adicione o idioma no URL de visualização como http://localhost:3000/devtools/email/{template}/{language} onde {language} é a chave de idioma ( en , fr , ...)

Visualização de adereços por e -mail

Você pode adicionar parâmetros de pesquisa ao URL de visualização para passar como adereços para o modelo. http://localhost:3000/devtools/email/{template}/?{propsName}={propsValue}

Livro de histórias

pnpm storybook

Atualizar digitação do tema

Ao adicionar ou atualizar componentes temáticos, variações de componentes, tamanhos, cores e outras fundações temáticas, você pode estender as tímidas de temas internas para fornecer um bom preenchimento automático.

Basta executar o seguinte comando depois de atualizar o tema:

pnpm theme:generate-typing

Gerar componentes de ícones personalizados a partir de arquivos SVG

Coloque os arquivos SVG personalizados na pasta src/components/Icons/svg-sources e, em seguida, execute o seguinte comando:

pnpm theme:generate-icons

Aviso

Todos os ícones SVG devem ser arquivos SVG prefixados pelo icon- (Exemplo: icon-externel-link ) com tamanho 24x24px , apenas uma forma e preenchida com a cor #000 (será substituída pelo currentColor ).

Atualizar a tecla de armazenamento do modo de cor

Você pode atualizar a tecla de armazenamento usada para detectar o modo de cor, atualizando essa constante no arquivo src/theme/config.ts :

 export const COLOR_MODE_STORAGE_KEY = 'start-ui-color-mode' ; // Update the key according to your needs

Testes E2E

Os testes E2E são configurados com dramaturgo.

pnpm e2e     # Run tests in headless mode, this is the command executed in CI
pnpm e2e:ui  # Open a UI which allow you to run specific tests and see test execution

Os testes são gravados na pasta e2e ; Há também uma pasta e2e/utils que contém alguns utilitários para ajudar a escrever testes.

Mostre dica em ambientes de desenvolvimento

Configure a variação NEXT_PUBLIC_ENV_NAME ENV com o nome do ambiente.

 NEXT_PUBLIC_ENV_NAME="staging"
NEXT_PUBLIC_ENV_EMOJI="?"
NEXT_PUBLIC_ENV_COLOR_SCHEME="teal"

Traduções

Configure a extensão do aliada i18n

Recomendamos o uso do plug -in i18N Ally para código VS para gerenciamento de traduções.

Crie ou edite o arquivo .vscode/settings.json com as seguintes configurações:

{
  "i18n-ally.localesPaths" : [ " src/locales " ],
  "i18n-ally.keystyle" : " nested " ,
  "i18n-ally.enabledFrameworks" : [ " general " , " react " , " i18next " ],
  "i18n-ally.namespace" : true ,
  "i18n-ally.defaultNamespace" : " common " ,
  "i18n-ally.extract.autoDetect" : true ,
  "i18n-ally.keysInUse" : [ " common.languages.* " ]
}

Produção

pnpm install
pnpm storybook:build # Optional: Will expose the Storybook at `/storybook`
pnpm build
pnpm start

Implantar com o Docker

1. Construa a imagem do Docker (substitua start-ui-web pelo nome do seu projeto)

 docker build -t start-ui-web .

2. Execute a imagem do Docker (substitua start-ui-web pelo nome do seu projeto)

 docker run -p 80:3000 start-ui-web

O aplicativo será exposto na porta 80 (http: // localhost)