@ciromaciel/dashboard-kit 1.0.0

package/src/components/PageHeader.jsx

@@ -0,0 +1,124 @@
+import { Group, Stack, Text, Title } from '@mantine/core'
+import { useMediaQuery } from '@mantine/hooks'
+
+/**
+ * The canonical pair in dashboard form: a small label pressed against a heavy
+ * title.
+ *
+ * Two differences from the stage — the title is 36px (the dashboard has a
+ * controlled width, so it drops to 28 only on phones, where 36 would break a
+ * project name across three lines) and the row gains an actions zone on the
+ * right.
+ *
+ * Spec (§Page header):
+ *   crumb    fz 10 · fw 800 · gray.4 · uppercase · ls 1.5px   — where you are
+ *   title    fz 36 · fw 900 · lh 1 · ls -0.04em               — what this screen is
+ *   subtitle fz 15 · fw 500 · gray.6 · lh 1.5                 — what you can do
+ *   actions  Group gap md, on the right                       — ONE primary button
+ *
+ * One primary button per screen. If there are two equally important actions,
+ * one of them isn't.
+ */
+export function PageHeader({ crumb, title, subtitle, actions, order = 1, mb = 32 }) {
+    const side = useMediaQuery('(min-width: 48em)')
+
+    /*
+     * The crumb on project screens is assembled as `Product · ${project.name}`.
+     * On first load the name hasn't arrived yet (ProjectShell hands over a
+     * provisional project, with the id from the URL and an empty name), and the
+     * interpolation would leave a separator dangling at the end of the line — a
+     * " · " pointing at nothing. Trimming it here is worth more than repeating
+     * the condition on every screen: the header already owns the crumb's
+     * display rule.
+     */
+    const trilha = typeof crumb === 'string' ? crumb.replace(/\s*·\s*$/, '') : crumb
+
+    return (
+        <Group
+            justify="space-between"
+            align="flex-start"
+            /*
+             * On phones the actions drop to the line below instead of squeezing
+             * the title against the edge.
+             *
+             * `wrap` does NOT accept a responsive object: the Group passes it
+             * raw into the CSS var `--group-wrap`, and a stringified object is
+             * not a valid value. That's why the decision comes from
+             * `useMediaQuery`.
+             */
+            wrap={side ? 'nowrap' : 'wrap'}
+            gap={{ base: 16, sm: 24 }}
+            mb={mb}
+        >
+            <Stack
+                gap={8}
+                /* The `0` in flex-shrink is what forces the wrap: with shrink 1
+                   the two children shrank until they fit side by side, and the
+                   title broke one word per line instead of the row wrapping. */
+                flex={{ base: '1 0 100%', sm: 1 }}
+                miw={0}
+            >
+                {trilha && (
+                    <Text
+                        fz={10}
+                        fw={800}
+                        c="gray.4"
+                        tt="uppercase"
+                        ls="1.5px"
+                        lh={1.4}
+                    >
+                        {trilha}
+                    </Text>
+                )}
+                <Title
+                    order={order}
+                    /*
+                     * THE SIZE COMES FROM THE THEME, not from this line.
+                     *
+                     * Mantine's `Title` ignores a responsive `fz`: it always
+                     * emits `--title-fz: var(--mantine-h1-font-size)`, whatever
+                     * object you pass. Measured — `{base:28, sm:36}` and
+                     * `{base:26, sm:32, md:36}` produce identical styling.
+                     *
+                     * This matters because three dashboards kept a local copy of
+                     * this component "because of the different ramp", and the
+                     * ramp never applied in any of the four. The divergence was
+                     * only in the source; the screen was always the same.
+                     *
+                     * Anyone who wants to change the title scale changes the
+                     * theme (`headings.sizes.h1`), which is where it actually
+                     * lives.
+                     */
+                    fw={900}
+                    lh={1}
+                    ls="-0.04em"
+                    c="gray.9"
+                    style={{ overflowWrap: 'anywhere' }}
+                >
+                    {title}
+                </Title>
+                {subtitle && (
+                    <Text
+                        fz={15}
+                        fw={500}
+                        c="gray.6"
+                        lh={1.5}
+                    >
+                        {subtitle}
+                    </Text>
+                )}
+            </Stack>
+
+            {actions && (
+                <Group
+                    gap="md"
+                    wrap="nowrap"
+                    flex={{ base: '1 0 100%', sm: 'none' }}
+                    justify={side ? 'flex-end' : 'flex-start'}
+                >
+                    {actions}
+                </Group>
+            )}
+        </Group>
+    )
+}

package/src/components/PlanBanner.jsx

@@ -0,0 +1,88 @@
+import { Alert, Button, Group, Text } from '@mantine/core'
+import { IconAlertTriangle } from '@tabler/icons-react'
+
+/**
+ * The billing banner: shown when the owner has no active plan of this product.
+ *
+ * WHAT IT DOES NOT DO is the point of it. It does not block the panel, it does
+ * not cover the content, and it can never be the reason somebody fails to reach
+ * what they already have. The rule across the stack is FREEZE, NOT DISCONNECT:
+ * an expired subscription stops the NEXT thing from being created, and leaves
+ * everything already created working — including, in Auth's case, the login of
+ * end users who never bought anything from us and could not fix it if they
+ * wanted to.
+ *
+ * That is why the copy says what STILL WORKS before what does not. The first
+ * question of anyone who sees this banner is "did my users just go down?", and
+ * an answer that opens with the refusal makes them assume the worst.
+ *
+ * IT TAKES THE STATE, IT DOES NOT FETCH IT. The kit paints; it does not know
+ * the address of the Payments. The caller passes what `usePlanNotice(product)`
+ * from `@ciromaciel/payments-react` returned, which costs no request of its own —
+ * the provider has already loaded it.
+ *
+ * IT RENDERS NOTHING UNLESS THE STATE IS `none`. `unknown` — still loading, or
+ * the call failed — is deliberately silent: dunning somebody because our own
+ * billing request has not come back is worse than waiting for it, and it is
+ * also what keeps the banner from flashing on every page load.
+ *
+ * IT IS NOT DISMISSIBLE. A banner with an X is a banner that gets closed once
+ * and never seen again, and what it reports does not go away on its own — it
+ * goes away when the person pays. The button is the way out.
+ *
+ * RED, NOT YELLOW. Yellow reads as "look at this when you can"; a lapsed
+ * subscription is a wall the person has already hit. The panel's own vocabulary
+ * says so: `red.6`/`red.7` is what the kit spends on destructive confirmation,
+ * so a viewer who has seen a delete modal already knows this colour means
+ * "something is blocked until you act". The light `variant="light"` surface
+ * keeps it from shouting over the page it sits on — the banner still must not
+ * be the loudest thing on a screen that otherwise works.
+ *
+ * The button is `red.7` filled with white text, the same pair as the kit's
+ * destructive button, so the two never drift apart.
+ *
+ * @param {'active'|'none'|'unknown'} state  What `usePlanNotice` returned.
+ * @param {string} message  One sentence, in the reader's language. Says what
+ *                          keeps working before what does not.
+ * @param {string} [actionLabel]
+ * @param {Function} onAction  Opens the Billing modal the panel already has.
+ */
+export function PlanBanner({ state, message, actionLabel = 'Regularizar assinatura', onAction }) {
+    if (state !== 'none') return null
+
+    return (
+        <Alert
+            variant="light"
+            color="red.6"
+            icon={<IconAlertTriangle size={20} />}
+            title="Assinatura necessária"
+            mb="lg"
+        >
+            <Group
+                justify="space-between"
+                align="flex-start"
+                wrap="wrap"
+                gap="sm"
+            >
+                <Text
+                    size="sm"
+                    style={{ flex: '1 1 320px' }}
+                >
+                    {message}
+                </Text>
+
+                {/* Responsive `w`, not `fullWidth`: Mantine's `fullWidth` is a
+                    boolean and does not accept breakpoints, so on a phone the
+                    button would keep its content width in the corner. */}
+                <Button
+                    size="sm"
+                    color="red.7"
+                    onClick={onAction}
+                    w={{ base: '100%', sm: 'auto' }}
+                >
+                    {actionLabel}
+                </Button>
+            </Group>
+        </Alert>
+    )
+}

package/src/components/ResourceItem.jsx

@@ -0,0 +1,93 @@
+import { Box, Text, UnstyledButton } from '@mantine/core'
+
+/**
+ * Uma linha da lista de recursos na coluna lateral.
+ *
+ * VEIO DE SEIS CÓPIAS COM QUATRO NOMES: `ProjectItem` (payments, messages,
+ * hoster), `InstanceItem` (storage), `ApplicationItem` (auth) e `FunctionItem`
+ * (functions). A estrutura era a mesma nas seis — ícone, nome, segunda linha —
+ * e o que mudava era só o formato do objeto que cada uma recebia
+ * (`project.name`, `tenant.name`, `fn.name`) e o campo da segunda linha.
+ *
+ * Aqui o componente recebe `title` e `subtitle` já resolvidos. O painel sabe o
+ * que é um projeto; o kit não precisa saber.
+ *
+ * A SEGUNDA LINHA É O QUE DISTINGUE DUAS LINHAS PARECIDAS. No Storage é o
+ * ambiente, no Hoster o endereço no ar, no Payments se o projeto consegue
+ * cobrar. Sem ela, quatro nomes semelhantes viram quatro linhas iguais — e ela
+ * SOME quando não há dado, em vez de mostrar um estado inventado enquanto a
+ * resposta não chegou.
+ *
+ * `minWidth: 0` no botão e no texto não é detalhe: sem ele o conteúdo mais
+ * largo que a coluna define a largura mínima e empurra a barra inteira.
+ *
+ * @param {Function} icon     Componente de ícone (tabler).
+ * @param {string}   title    O nome do recurso.
+ * @param {string}   subtitle A segunda linha. Opcional.
+ * @param {'muted'|'alert'} tone  `alert` pinta o subtítulo de vermelho — para
+ *                           quando ele É o problema ("SEM GATEWAY").
+ * @param {boolean}  mono     Título monoespaçado, para nome que é identificador.
+ * @param {node}     trailing O que vai na ponta direita. O Hoster põe o alfinete
+ *                           de fixar; os outros não passam nada.
+ * @param {Function} onClick  Abrir o recurso.
+ */
+export function ResourceItem({ icon: Icon, title, subtitle, tone = 'muted', mono = false, trailing, onClick }) {
+    return (
+        <UnstyledButton
+            onClick={onClick}
+            w="100%"
+            px={12}
+            py={8}
+            style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                gap: 10,
+                borderRadius: 0,
+                background: 'transparent',
+                transition: 'background 120ms ease',
+                minWidth: 0,
+                maxWidth: '100%',
+            }}
+            onMouseEnter={e => {
+                e.currentTarget.style.background = 'var(--mantine-color-gray-1)'
+            }}
+            onMouseLeave={e => {
+                e.currentTarget.style.background = 'transparent'
+            }}
+        >
+            <Icon
+                size={18}
+                stroke={1.5}
+                style={{ flex: 'none', color: 'var(--mantine-color-gray-5)' }}
+            />
+
+            <Box style={{ flex: 1, minWidth: 0, lineHeight: 1.25, textAlign: 'left' }}>
+                <Text
+                    fz={13}
+                    fw={500}
+                    c="gray.9"
+                    lineClamp={1}
+                    ff={mono ? 'monospace' : undefined}
+                >
+                    {title}
+                </Text>
+
+                {subtitle && (
+                    <Text
+                        fz={9}
+                        fw={800}
+                        c={tone === 'alert' ? 'red.6' : 'gray.4'}
+                        tt="uppercase"
+                        lts="1.5px"
+                        lineClamp={1}
+                    >
+                        {subtitle}
+                    </Text>
+                )}
+            </Box>
+
+            {trailing}
+        </UnstyledButton>
+    )
+}

package/src/components/SectionCard.jsx

@@ -0,0 +1,212 @@
+import { Box, Card, Divider, Group, Text, Title } from '@mantine/core'
+import { useMediaQuery } from '@mantine/hooks'
+
+/**
+ * The dashboard's settings block — the same primitive as the auth dashboard
+ * (components/Configurations/Shared.jsx) and the storage one (SettingsView).
+ *
+ * THE TITLE LIVES INSIDE THE CARD. This is the difference that separates a
+ * dashboard from a document, and it's worth writing out in full:
+ *
+ * The hoster opened each block with a SectionHeader — a "01 · ENVIAR
+ * ARQUIVOS" label, a 32px title, a 15px description over two lines — and only
+ * then the Card with the content. Each of those headers cost ~135px of height
+ * before any data, and two sections per screen spent 30% of the viewport saying
+ * the names of things. Worse: with the screen's h1 at 36px and the section's at
+ * 32px, nothing declared which of the two was the page title.
+ *
+ * Here the title is 18px and lives in the Card's own header, right up against
+ * the content it names. The ratio against the PageHeader is back to 36:18 — the
+ * same as auth — and the whole screen fits where half of it used to.
+ *
+ * The 01/02/03 numbering went with it. It promises a sequence, and parallel
+ * settings are not steps of anything; in auth, numbering only shows up in
+ * onboarding, where you really do follow one step after another.
+ */
+export function SectionCard({ eyebrow, title, lead, action, children }) {
+    return (
+        <Card
+            p={0}
+            withBorder
+            styles={{ root: { overflow: 'hidden' } }}
+        >
+            <Group
+                justify="space-between"
+                align="flex-end"
+                px={{ base: 16, sm: 24 }}
+                py={20}
+                gap={16}
+                wrap="nowrap"
+            >
+                <Box
+                    miw={0}
+                    flex={1}
+                >
+                    {/* `span` because the eyebrow isn't always text: the domains
+                        screen passes the status indicator (glyph + word), and a
+                        <div> inside the <p> that Text generates by default is
+                        invalid HTML — the browser closes the paragraph on its own
+                        and the layout breaks. As a span, any content fits. */}
+                    {eyebrow && (
+                        <Text
+                            component="span"
+                            display="block"
+                            fz={10}
+                            fw={800}
+                            c="gray.4"
+                            tt="uppercase"
+                            mb={6}
+                            ls="1.5px"
+                        >
+                            {eyebrow}
+                        </Text>
+                    )}
+                    <Title
+                        order={3}
+                        fz={18}
+                        fw={800}
+                        lh={1.2}
+                        ls="-0.02em"
+                        c="gray.9"
+                    >
+                        {title}
+                    </Title>
+                    {lead && (
+                        <Text
+                            fz={13}
+                            fw={500}
+                            c="gray.6"
+                            lh={1.5}
+                            mt={6}
+                            maw={640}
+                        >
+                            {lead}
+                        </Text>
+                    )}
+                </Box>
+                {action && <Box flex="none">{action}</Box>}
+            </Group>
+
+            <Divider />
+
+            <Box>{children}</Box>
+        </Card>
+    )
+}
+
+/**
+ * One row of the block: label on the left, control on the right.
+ *
+ * `1fr auto` instead of two equal columns — the text is elastic and the control
+ * gets the width it needs. `last` suppresses the final border, otherwise the
+ * hairline would double up with the Card's frame.
+ */
+export function Field({ label, help, control, last = false, align = 'center' }) {
+    /*
+     * Two columns become one on phones.
+     *
+     * The `auto` column is the control, and `auto` won't shrink below the
+     * control's own width: on a 280px input the label was squeezed to zero and
+     * the row overflowed anyway. Stacked, the control gets the full width and
+     * the label fits again.
+     */
+    const side = useMediaQuery('(min-width: 48em)')
+    return (
+        <Box
+            px={{ base: 16, sm: 24 }}
+            py={18}
+            style={{
+                borderBottom: last ? 'none' : 'var(--rlg-border)',
+                display: 'grid',
+                gridTemplateColumns: side ? '1fr auto' : '1fr',
+                gap: side ? 32 : 10,
+                alignItems: side ? align : 'stretch',
+            }}
+        >
+            <Box miw={0}>
+                <Text
+                    fz={13}
+                    fw={700}
+                    c="gray.9"
+                    lh={1.3}
+                >
+                    {label}
+                </Text>
+                {help && (
+                    <Text
+                        fz={12}
+                        fw={500}
+                        c="gray.6"
+                        lh={1.5}
+                        mt={4}
+                        maw={520}
+                    >
+                        {help}
+                    </Text>
+                )}
+            </Box>
+            <Box style={{ justifySelf: side ? 'end' : 'stretch' }}>{control}</Box>
+        </Box>
+    )
+}
+
+/**
+ * The same row, with the control at full width below the label — for whatever
+ * doesn't fit on the right: a textarea, a dropzone, a whole table.
+ */
+export function FieldStacked({ label, help, control, last = false }) {
+    return (
+        <Box
+            px={{ base: 16, sm: 24 }}
+            py={20}
+            style={{ borderBottom: last ? 'none' : 'var(--rlg-border)' }}
+        >
+            {label && (
+                <Text
+                    fz={13}
+                    fw={700}
+                    c="gray.9"
+                    lh={1.3}
+                    mb={4}
+                >
+                    {label}
+                </Text>
+            )}
+            {help && (
+                <Text
+                    fz={12}
+                    fw={500}
+                    c="gray.6"
+                    lh={1.5}
+                    mb={12}
+                    maw={520}
+                >
+                    {help}
+                </Text>
+            )}
+            {control}
+        </Box>
+    )
+}
+
+/**
+ * A block's action footer — outside the body, over the gray.1 band.
+ *
+ * It sits inside the Card, not loose below it: the action belongs to the block
+ * it saves, and a button floating between two Cards doesn't say which one it
+ * answers to.
+ */
+export function CardActions({ children, justify = 'flex-end' }) {
+    return (
+        <Group
+            justify={justify}
+            gap={8}
+            px={{ base: 16, sm: 24 }}
+            py={16}
+            bg="gray.1"
+            style={{ borderTop: 'var(--rlg-border)' }}
+        >
+            {children}
+        </Group>
+    )
+}