Environment notice

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Yomizaka (krizaka/yomizaka#364) on every surface of its dev deployment, then Akinaza and Orazaka.

Installation

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

import { EnvironmentNotice, environmentNotice } from "@krizaka/ui/environment-notice";

Exemples

Props

Accessibilité

• A region named by its title (role=region, aria-label), not a live region: it is there from the first render, not an event.
• Its colours are the warning tint over the surface and the text roles (readable in dark and light); there is no motion.
• It cannot be dismissed: the line is part of the page for as long as the stage is not production.

Clavier

Bonnes pratiques

• Read the stage once (an env var named by context, such as APP_ENVIRONMENT, or a setting in the database) and pass it down from the root layout: never an if per page.
• Pass the words from your messages (@krizaka/i18n), French first where the app defaults to French; the package ships none.
• Put it above the app bar, outside the content, so it never covers anything and shifts nothing (it is server-rendered with a minimum height).
• environmentNotice(config) is the rule if you need it elsewhere (a native shell, a test): it returns null for production and prod.
• Set the stage in the deployment spec of the dev environment; no production spec sets it to development.

Composants liés

• AlertA message in the flow of the page: a tone, an icon, a title, a text and an optional action.
• Stage bannerThe announcement of a chapter: a stage and its name on one line, or, large, a stage above a title and a line — a sober eyebrow by default, a stage call that slams in for the arcade flavour.
• App headerThe family's top bar beside a RailNav: the product's name as text, optional status chips, then the session's controls in a fixed order — search (⌘K), language, the host's actions, messages and notifications with their unread counts, the primary action, the account with its name. Every slot is the host's; an empty one draws nothing.
• Nav barThe Krizaka navigation bar, the same on every site of the family: a floating pill that tightens as the page scrolls, the family switcher on the brand, one light that glides to the item under the pointer or the focus and rests on the current page, accessible menus with rich links, and a mobile panel.

Générée depuis le code de @krizaka/ui 3.63.1 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub