@ciromaciel/dashboard-kit 1.0.0

package/src/components/DashboardFrame.jsx

@@ -0,0 +1,97 @@
+import { AppShell, Box, Burger, Group } from '@mantine/core'
+
+import { Wordmark } from './Wordmark'
+
+/** A largura da coluna, em px. Igual nos sete painéis. */
+export const SIDEBAR_WIDTH = 300
+
+/**
+ * A moldura de todo painel: barra no celular, coluna lateral, palco.
+ *
+ * VEIO DE SETE CÓPIAS IDÊNTICAS. Cada painel repetia o mesmo `<AppShell>` com
+ * os mesmos números — inclusive o comentário que explica o `height` responsivo,
+ * copiado literalmente nos sete, que é a prova de que viajou por `cp`.
+ *
+ * O QUE FICA AQUI é a moldura. O que NÃO fica é a composição de cada produto:
+ * providers, boot de identidade, stores, quotas e modais continuam no painel,
+ * porque é onde vivem as decisões dele. A fronteira é essa — a moldura não sabe
+ * o que é um projeto.
+ *
+ * A ALTURA DO HEADER É 0 NO DESKTOP E 56 NO CELULAR, e isso não é estilo:
+ * `hiddenFrom` sozinho remove o elemento por CSS, mas o `AppShell` continua
+ * reservando os 56px de deslocamento no topo da coluna e do conteúdo — uma
+ * faixa vazia acima da marca. A altura responsiva zera o deslocamento onde o
+ * header não existe.
+ *
+ * O PALCO não usa o py de 80–120 da landing: lá ele separa seções de uma
+ * narrativa; aqui há uma tela só, com a coluna fixa ao lado. A respiração vira
+ * o padding do container (px 48 · pt 40 · pb 80 · maw 1280), e o ritmo interno
+ * vira o espaço entre blocos.
+ *
+ * @param {string}   productName Nome do produto, para a marca na barra mobile.
+ * @param {boolean}  mobileOpened Estado da gaveta no celular.
+ * @param {Function} onToggleMobile Abre/fecha a gaveta.
+ * @param {node}     sidebar     A coluna. Cada produto monta a sua.
+ * @param {node}     children    O palco — normalmente o `<Outlet>`.
+ */
+export function DashboardFrame({ productName, mobileOpened, onToggleMobile, sidebar, children }) {
+    return (
+        <AppShell
+            header={{ height: { base: 56, sm: 0 }, offset: true }}
+            navbar={{
+                width: SIDEBAR_WIDTH,
+                breakpoint: 'sm',
+                collapsed: { mobile: !mobileOpened },
+            }}
+            padding={0}
+            transitionDuration={250}
+            transitionTimingFunction="ease"
+        >
+            {/*
+              A barra só existe no celular: no desktop a coluna já está visível,
+              e mais um header seria cromo duplicado.
+            */}
+            <AppShell.Header
+                withBorder
+                hiddenFrom="sm"
+            >
+                <Group
+                    h="100%"
+                    px="md"
+                    gap="md"
+                    wrap="nowrap"
+                >
+                    <Burger
+                        opened={mobileOpened}
+                        onClick={onToggleMobile}
+                        size="sm"
+                        aria-label="Menu"
+                    />
+                    <Wordmark
+                        name={productName}
+                        size={20}
+                    />
+                </Group>
+            </AppShell.Header>
+
+            <AppShell.Navbar
+                withBorder={false}
+                p={0}
+            >
+                {sidebar}
+            </AppShell.Navbar>
+
+            <AppShell.Main>
+                <Box
+                    mx="auto"
+                    px={{ base: 'md', md: 48 }}
+                    pt={{ base: 24, md: 40 }}
+                    pb={80}
+                    maw={1280}
+                >
+                    {children}
+                </Box>
+            </AppShell.Main>
+        </AppShell>
+    )
+}

package/src/components/DataTable.jsx

@@ -0,0 +1,153 @@
+import { Box, Card, Text } from '@mantine/core'
+import { useMediaQuery } from '@mantine/hooks'
+import { templateFor, ROW_PADDING, HEAD_PADDING } from './table-grid'
+
+/**
+ * The system's table — CSS Grid, not <Table>.
+ *
+ * Grid because the spec asks for two things that table layout makes hard:
+ * proportional columns (`2.4fr 1fr 1fr 40px`) and the WHOLE row clickable. Grid
+ * solves both without fighting display:table.
+ *
+ * Spec (§Table):
+ *   container   Card p={0} withBorder · overflow hidden
+ *   header      bg gray.1 · padding 12px 24px · borderBottom 1px gray.2
+ *   header cell fz 10 · fw 800 · gray.5 · uppercase · ls 1.5px
+ *   row         padding 14px 24px · borderBottom 1px gray.2 (except the last)
+ *   cell        fz 13 · gray.7 · lh 1.4 — the "data" role
+ *   hover       background gray.1 · transition 120ms
+ *   highlight   background gray.1 + 2px black hairline on the left (inset)
+ *               — `quietSelection` keeps only the background, for when the
+ *                 highlight is a state of the data and not the row you clicked
+ *
+ * Config-driven per Law 4: `columns` describes the columns with data
+ * (key/label/width), and each column brings its own `render`. The consumer
+ * never injects the table's structure — it only says what each cell shows.
+ */
+
+const HEAD = { fz: 10, fw: 800, c: 'gray.5', tt: 'uppercase', ls: '1.5px', lh: 1.4 }
+
+export function DataTable({ columns, rows, getRowKey, onRowClick, isRowSelected, quietSelection, getRowLabel, toolbar, footer, emptyState, loading, skeleton }) {
+    const clickable = typeof onRowClick === 'function'
+
+    /*
+     * A column with `hideBelow` disappears on phones — and really disappears:
+     * hiding it via CSS would leave the grid track reserved, and an empty gash
+     * would remain in its place. JS is what decides: below 48em the hidden
+     * columns drop out of the list, so the grid is never even generated with
+     * them.
+     */
+    const wide = useMediaQuery('(min-width: 48em)', true)
+    const visible = wide ? columns : columns.filter(col => !col.hideBelow)
+    const template = templateFor(visible)
+
+    return (
+        <Card
+            p={0}
+            style={{ overflow: 'hidden' }}
+        >
+            {toolbar}
+
+            <Box
+                bg="gray.1"
+                style={{
+                    display: 'grid',
+                    gridTemplateColumns: template,
+                    gap: 16,
+                    alignItems: 'center',
+                    padding: HEAD_PADDING,
+                    borderBottom: 'var(--rlg-border)',
+                }}
+            >
+                {visible.map(col =>
+                    col.label ? (
+                        <Text
+                            key={col.key}
+                            {...HEAD}
+                            ta={col.align}
+                        >
+                            {col.label}
+                        </Text>
+                    ) : (
+                        <Box key={col.key} />
+                    ),
+                )}
+            </Box>
+
+            {/* First load: the skeleton has the SAME grid as the table, so the
+                layout doesn't jump when the data arrives (Law 3). A refetch with
+                data already visible doesn't flash a skeleton over it — the
+                consumer decides, passing `loading` only the first time. */}
+            {loading && skeleton}
+
+            {!loading && rows.length === 0 && emptyState}
+
+            {!loading &&
+                rows.map((row, i) => {
+                    const selected = isRowSelected?.(row) || undefined
+                    const last = i === rows.length - 1
+
+                    return (
+                        <Box
+                            key={getRowKey(row)}
+                            data-selected={selected}
+                            onClick={clickable ? () => onRowClick(row) : undefined}
+                            // The row is the target: it has to announce itself to the
+                            // keyboard and the screen reader as the button it actually is.
+                            onKeyDown={
+                                clickable
+                                    ? e => {
+                                          if (e.target !== e.currentTarget) return
+                                          if (e.key === 'Enter' || e.key === ' ') {
+                                              e.preventDefault()
+                                              onRowClick(row)
+                                          }
+                                      }
+                                    : undefined
+                            }
+                            onMouseEnter={clickable ? e => (e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-1)') : undefined}
+                            onMouseLeave={clickable ? e => (e.currentTarget.style.backgroundColor = selected ? 'var(--mantine-color-gray-1)' : '') : undefined}
+                            tabIndex={clickable ? 0 : undefined}
+                            role={clickable ? 'button' : undefined}
+                            aria-pressed={clickable && isRowSelected ? Boolean(selected) : undefined}
+                            aria-label={clickable ? getRowLabel?.(row) : undefined}
+                            style={{
+                                display: 'grid',
+                                gridTemplateColumns: template,
+                                gap: 16,
+                                alignItems: 'center',
+                                padding: ROW_PADDING,
+                                cursor: clickable ? 'pointer' : undefined,
+                                borderBottom: last ? 'none' : 'var(--rlg-border)',
+                                transition: 'background-color 120ms ease',
+                                /* Selected: black hairline on the left. Not a strong
+                                   background color, which would compete with the hover.
+
+                                   `quietSelection` keeps the background and drops the
+                                   hairline. The 2px mark was designed for
+                                   SELECTION — the row you just clicked — and it
+                                   weighs too much when the highlight is a
+                                   permanent state of the data (the live version,
+                                   which already announces itself with the badge on
+                                   the row). */
+                                backgroundColor: selected ? 'var(--mantine-color-gray-1)' : undefined,
+                                boxShadow: selected && !quietSelection ? 'inset 2px 0 0 var(--mantine-color-gray-9)' : undefined,
+                            }}
+                        >
+                            {visible.map(col => (
+                                <Box
+                                    key={col.key}
+                                    miw={0}
+                                    style={col.align ? { textAlign: col.align } : undefined}
+                                >
+                                    {col.render(row)}
+                                </Box>
+                            ))}
+                        </Box>
+                    )
+                })}
+
+            {footer}
+        </Card>
+    )
+}

package/src/components/DeleteModal.jsx

@@ -0,0 +1,341 @@
+import { useState } from 'react'
+import { Box, Button, Group, Modal, Stack, Text, TextInput, Title } from '@mantine/core'
+import { IconAlertTriangle, IconArrowRight } from '@tabler/icons-react'
+
+/**
+ * The destructive modal — one shape for the seven panels.
+ *
+ * Specified in `design-system/10-modal-de-exclusao.md`. This is the executable
+ * half: the spec says WHY, the component is WHAT, and having only one of them
+ * is how the two drift apart.
+ *
+ * WHAT THE AUDIT FOUND
+ *
+ * Fifteen destructive modals across seven panels, and no two alike. Four
+ * families of chrome (`padding={0}` bare vs Mantine's `title` prop vs a
+ * `ThemeIcon` in the header vs nothing), the destructive button on the left in
+ * two and on the right in thirteen, four ways of comparing the typed string
+ * (case-sensitive, case-insensitive, trimmed on one side, trimmed on both), and
+ * the target repeated in the label AND the placeholder in nine of them.
+ *
+ * None of that variety encoded a difference in the product. It encoded the
+ * order the screens were written in.
+ *
+ * THE ONE THING THIS COMPONENT REFUSES TO PARAMETERIZE
+ *
+ * The row icon. It is `IconArrowRight`, always, and there is no prop for it.
+ * When it was a choice, three panels picked thematic glyphs — a key for OAuth,
+ * a globe for a domain, a clock for history — and each of those repeats in a
+ * picture what the sentence beside it already says, turning a list into four
+ * marks competing for the same eye. The glyph MARKS a row; it does not describe
+ * it. Making it a prop is how it stops being a rule.
+ *
+ * WHEN NOT TO REACH FOR THIS
+ *
+ * The escalation has three steps and this is the top one. A reversible action
+ * (disable, archive, unlink) takes a plain button. An irreversible action whose
+ * TARGET is unambiguous takes `HoldToConfirmIcon` — holding proves intent,
+ * which is the whole question when there is only one row it could be. This
+ * modal exists for the case where the target itself can be confused with its
+ * neighbours, because only typing an identifier answers "this one?".
+ *
+ * Do not stack the hold and the typing. Two panels do, and the second gate adds
+ * friction without adding information: the modal is already the escalation.
+ */
+
+/**
+ * The title's size follows the LENGTH OF THE DATA, not the viewport.
+ *
+ * A panel title is fixed at 28px because the panel's width is controlled. That
+ * reasoning holds for a title someone WROTE. It breaks for a title that IS an
+ * identifier, because its length is not ours to choose — the e-mails in one
+ * Auth application run from 22 to 56 characters, and half pass 30.
+ *
+ * Past 40 the identifier leaves the title slot entirely. Shrinking it was the
+ * first attempt and it failed in a way worth recording: at 18px mono a
+ * 56-character address STILL wrapped, and it broke mid-word
+ * (`…myinfrast / ructure`) while the confirmation line below, at 13px, fit the
+ * same string whole. The title had become the worse copy of something the modal
+ * already showed intact one block down.
+ *
+ * So above 40 the heading becomes the sentence that says what is about to
+ * happen, and the identifier appears once — whole, in mono, directly above the
+ * field that asks for it.
+ *
+ * Truncating with an ellipsis is never the answer: this string is what someone
+ * checks character by character before reproducing it.
+ */
+export function deleteTitleScale(value) {
+    const length = (value ?? '').length
+
+    if (length <= 24) return { fz: { base: 22, sm: 28 }, asTitle: true }
+    if (length <= 40) return { fz: { base: 18, sm: 22 }, asTitle: true }
+
+    return { fz: { base: 18, sm: 20 }, asTitle: false }
+}
+
+/**
+ * @param {object}   props
+ * @param {boolean}  props.opened
+ * @param {Function} props.onClose
+ * @param {Function} props.onConfirm       Receives the confirmed target string.
+ * @param {string}   props.target          The identifier to be typed. Required.
+ * @param {string}   props.context         Subtitle: who · what · where.
+ * @param {string}   props.headline        Title when `target` is too long to be one.
+ * @param {string[]} props.consequences    One sentence per row. Includes the caveat.
+ * @param {string}   props.confirmLabel    Button verb — names the resource.
+ * @param {string}   props.prompt          Sentence above the target line.
+ * @param {boolean}  props.loading
+ * @param {boolean}  props.caseSensitive   See `matches` below.
+ * @param {string}   props.eyebrow
+ */
+export function DeleteModal({
+    opened,
+    onClose,
+    onConfirm,
+    target,
+    context,
+    headline = 'Confirmar exclusão',
+    consequences = [],
+    confirmLabel = 'Excluir',
+    prompt = 'Digite o texto abaixo para confirmar',
+    loading = false,
+    caseSensitive = false,
+    eyebrow = 'Zona de risco',
+}) {
+    const [typed, setTyped] = useState('')
+
+    const value = (target ?? '').trim()
+    const scale = deleteTitleScale(value)
+
+    /*
+     * `trim()` always; the case follows the DATA.
+     *
+     * A stray space — a paste, a phone's autocorrect — is not an attempt to
+     * delete something else. The capital letter is the judgement call, so it is
+     * the caller's: an e-mail is case-insensitive by RFC and the worker stores
+     * it lowercased, so refusing `Maciel@…` would be rigour against someone
+     * typing their own address correctly. A project id or a slug is not, and
+     * there `caseSensitive` keeps the comparison exact.
+     *
+     * `value.length > 0` stops an empty field from matching an absent target
+     * and arming the button.
+     */
+    const entered = typed.trim()
+    const matches = value.length > 0 && (caseSensitive ? entered === value : entered.toLowerCase() === value.toLowerCase())
+    const canDelete = matches && !loading
+
+    const confirm = () => {
+        if (canDelete) onConfirm(value)
+    }
+
+    return (
+        <Modal
+            opened={opened}
+            // Closing mid-request does not cancel the deletion — it only hides
+            // the result of it.
+            onClose={loading ? () => {} : onClose}
+            size={520}
+            padding={0}
+            withCloseButton={false}
+            closeOnClickOutside={!loading}
+            closeOnEscape={!loading}
+        >
+            <Stack
+                gap={0}
+                p={{ base: 24, md: 32 }}
+            >
+                <Group
+                    gap={8}
+                    wrap="nowrap"
+                    align="center"
+                >
+                    <IconAlertTriangle
+                        size={13}
+                        stroke={2.5}
+                        style={{ color: 'var(--mantine-color-red-6)', flex: 'none' }}
+                    />
+                    <Text
+                        fz={10}
+                        fw={800}
+                        c="red.6"
+                        tt="uppercase"
+                        ls="1.5px"
+                    >
+                        {eyebrow}
+                    </Text>
+                </Group>
+
+                {/*
+                 * The TARGET is the title, and the subtitle says what kind of
+                 * thing it is — until the target is too long to be a title, and
+                 * then the two swap jobs.
+                 *
+                 * The identifier, not the human name: names repeat inside one
+                 * account, and the identifier is the string to be typed below.
+                 */}
+                <Title
+                    order={2}
+                    fw={900}
+                    fz={scale.fz}
+                    lh={1.15}
+                    mt={12}
+                    ls="-0.04em"
+                    c="gray.9"
+                    /*
+                     * `break-all` only where the title IS the identifier. On the
+                     * long case the title is prose, and `break-all` would split
+                     * it mid-word — the rule exists for a string with no spaces
+                     * to break at.
+                     */
+                    style={scale.asTitle ? { wordBreak: 'break-all' } : undefined}
+                >
+                    {scale.asTitle ? value : headline}
+                </Title>
+
+                {context ? (
+                    <Text
+                        fz={12}
+                        c="gray.6"
+                        ff="var(--mantine-font-family-monospace)"
+                        mt={6}
+                    >
+                        {context}
+                    </Text>
+                ) : null}
+
+                {consequences.length > 0 ? (
+                    <Box mt={20}>
+                        <Stack gap={12}>
+                            {consequences.map(label => (
+                                <Group
+                                    key={label}
+                                    gap={10}
+                                    wrap="nowrap"
+                                    align="flex-start"
+                                >
+                                    <IconArrowRight
+                                        size={14}
+                                        stroke={1.5}
+                                        style={{ color: 'var(--mantine-color-gray-4)', flex: 'none', marginTop: 3 }}
+                                    />
+                                    <Text
+                                        fz={13}
+                                        c="gray.6"
+                                        lh={1.5}
+                                    >
+                                        {label}
+                                    </Text>
+                                </Group>
+                            ))}
+                        </Stack>
+                    </Box>
+                ) : null}
+
+                {/*
+                 * No rule before the confirmation — the footer's is the only
+                 * one. Two hairlines inside 520px cut the modal into three
+                 * strips and the second lands on nothing: typing the target and
+                 * pressing the button are one gesture, not two sections.
+                 */}
+                <Box mt={28}>
+                    {/*
+                     * The instruction is prose; the TARGET gets its own line.
+                     *
+                     * Embedded mid-sentence, a long identifier breaks the phrase
+                     * across two lines and the eye has to reassemble it around
+                     * the very string it is copying.
+                     *
+                     * And this is the LAST place it appears. It used to be here
+                     * AND in the placeholder — the same string twice, with the
+                     * placeholder truncated by the input's width. A cut-off copy
+                     * of what must be typed exactly teaches the error.
+                     */}
+                    <Text
+                        fz={13}
+                        c="gray.7"
+                        mb={6}
+                    >
+                        {prompt}
+                    </Text>
+                    <Text
+                        fz={13}
+                        fw={800}
+                        c="gray.9"
+                        ff="var(--mantine-font-family-monospace)"
+                        mb={8}
+                        // One click selects the whole identifier. Copying is not
+                        // cheating: the protection is against deleting the WRONG
+                        // row, and pasted text is the right one.
+                        style={{ wordBreak: 'break-all', userSelect: 'all' }}
+                    >
+                        {value}
+                    </Text>
+
+                    <TextInput
+                        value={typed}
+                        onChange={event => setTyped(event.currentTarget.value)}
+                        aria-label={`${prompt}: ${value}`}
+                        // An identifier is data, not prose: the keyboard's
+                        // helpers get in the way of reproducing an exact string.
+                        autoComplete="off"
+                        autoCorrect="off"
+                        autoCapitalize="off"
+                        spellCheck={false}
+                        data-autofocus
+                        disabled={loading}
+                        /*
+                         * Monospace on the INPUT only. `ff` on the component
+                         * lands on the wrapper and takes the prose with it.
+                         */
+                        styles={{ input: { fontFamily: 'var(--mantine-font-family-monospace)' } }}
+                        onKeyDown={event => {
+                            // Enter completes what the field already authorized.
+                            // Typing IS the confirmation; routing the person to
+                            // the mouse afterwards is friction with no
+                            // protective role.
+                            if (event.key === 'Enter') confirm()
+                        }}
+                    />
+                </Box>
+            </Stack>
+
+            {/*
+             * The footer is a band of its own and carries ONLY the buttons. It
+             * is also the modal's only rule: above it everything that is read
+             * and typed, below it the act.
+             *
+             * Destructive on the LEFT — §Formulários: "Submit à direita;
+             * destrutivo à esquerda". The submit position is reserved for what
+             * moves forward, and this does the opposite.
+             */}
+            <Box
+                px={{ base: 24, md: 32 }}
+                py={20}
+                style={{ borderTop: 'var(--rlg-border)' }}
+            >
+                <Group
+                    justify="space-between"
+                    gap={8}
+                >
+                    <Button
+                        color="red.7"
+                        onClick={confirm}
+                        disabled={!canDelete}
+                        loading={loading}
+                    >
+                        {confirmLabel}
+                    </Button>
+                    <Button
+                        variant="subtle"
+                        color="gray.7"
+                        onClick={onClose}
+                        disabled={loading}
+                    >
+                        Cancelar
+                    </Button>
+                </Group>
+            </Box>
+        </Modal>
+    )
+}

package/src/components/EmptyState.jsx

@@ -0,0 +1,55 @@
+import { Box, Button, Stack, Text } from '@mantine/core'
+
+/**
+ * Empty is not an error — it's a screen that doesn't have content yet.
+ *
+ * Spec (§States): Stack align center py 56 · title fz 10 fw 800 gray.4
+ * uppercase ls 1.5px + subtitle + action.
+ *
+ * Two anatomies, the same shape: "no data at all" and "the search found
+ * nothing", the latter quoting the term — whoever searched needs to see what
+ * was searched for.
+ */
+export function EmptyState({ title, description, actionLabel, onAction }) {
+    return (
+        <Stack
+            align="center"
+            gap={8}
+            py={56}
+            px="md"
+        >
+            <Text
+                fz={10}
+                fw={800}
+                c="gray.4"
+                tt="uppercase"
+                ls="1.5px"
+                ta="center"
+            >
+                {title}
+            </Text>
+            {description && (
+                <Text
+                    fz={13}
+                    c="gray.6"
+                    lh={1.5}
+                    ta="center"
+                    maw={420}
+                >
+                    {description}
+                </Text>
+            )}
+            {actionLabel && onAction && (
+                <Box mt={8}>
+                    <Button
+                        variant="outline"
+                        color="gray.9"
+                        onClick={onAction}
+                    >
+                        {actionLabel}
+                    </Button>
+                </Box>
+            )}
+        </Stack>
+    )
+}

package/src/components/GroupLabel.jsx

@@ -0,0 +1,28 @@
+import { Text } from '@mantine/core'
+
+/**
+ * O rótulo que nomeia um grupo na coluna — "Projetos", "Instâncias", "Conta".
+ *
+ * Seis cópias, e a única diferença real entre elas era o `lineClamp` que o
+ * Functions não tinha. Ele entra: um nome de grupo que quebra em duas linhas
+ * empurra a lista inteira, e nenhum destes rótulos precisa de duas linhas.
+ *
+ * O tamanho de 10px com `lts` de 1.5px é o papel de RÓTULO do sistema Zen —
+ * ele anuncia a seção sem competir com o conteúdo dela.
+ */
+export function GroupLabel({ children }) {
+    return (
+        <Text
+            fz={10}
+            fw={800}
+            c="gray.4"
+            tt="uppercase"
+            px={12}
+            mb={4}
+            lineClamp={1}
+            lts="1.5px"
+        >
+            {children}
+        </Text>
+    )
+}