refactor(ui): enforce poyraz button standards
This commit is contained in:
@@ -77,7 +77,7 @@ export default async function InvitationPage({
|
|||||||
<p className="text-xs text-muted-foreground">En az 8 karakter kullan.</p>
|
<p className="text-xs text-muted-foreground">En az 8 karakter kullan.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<SubmitButton formAction={acceptInvitation} className="h-11 w-full" pendingText="Hesap oluşturuluyor...">
|
<SubmitButton size="lg" formAction={acceptInvitation} className="w-full" pendingText="Hesap oluşturuluyor...">
|
||||||
Portal hesabını oluştur
|
Portal hesabını oluştur
|
||||||
</SubmitButton>
|
</SubmitButton>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
+1
-1
@@ -75,7 +75,7 @@ export default async function LoginPage({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SubmitButton formAction={login} className="h-11 w-full gap-2" pendingText="Giriş yapılıyor...">
|
<SubmitButton size="lg" formAction={login} className="w-full gap-2" pendingText="Giriş yapılıyor...">
|
||||||
<LogIn className="h-4 w-4" />
|
<LogIn className="h-4 w-4" />
|
||||||
Giriş yap
|
Giriş yap
|
||||||
</SubmitButton>
|
</SubmitButton>
|
||||||
|
|||||||
@@ -79,7 +79,7 @@ export default async function RegisterPage({
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<SubmitButton formAction={signup} className="h-11 w-full gap-2" pendingText="Oluşturuluyor...">
|
<SubmitButton size="lg" formAction={signup} className="w-full gap-2" pendingText="Oluşturuluyor...">
|
||||||
<UserPlus className="h-4 w-4" />
|
<UserPlus className="h-4 w-4" />
|
||||||
Admin hesabını oluştur
|
Admin hesabını oluştur
|
||||||
</SubmitButton>
|
</SubmitButton>
|
||||||
|
|||||||
@@ -4,20 +4,31 @@ import { useFormStatus } from "react-dom";
|
|||||||
import { Button } from "poyraz-ui/atoms";
|
import { Button } from "poyraz-ui/atoms";
|
||||||
import React from "react";
|
import React from "react";
|
||||||
|
|
||||||
interface SubmitButtonProps extends React.ComponentProps<typeof Button> {
|
interface SubmitButtonProps
|
||||||
|
extends Omit<React.ComponentProps<typeof Button>, "effect" | "variant"> {
|
||||||
pendingText?: string;
|
pendingText?: string;
|
||||||
|
variant?: "default" | "secondary";
|
||||||
}
|
}
|
||||||
|
|
||||||
export function SubmitButton({
|
export function SubmitButton({
|
||||||
children,
|
children,
|
||||||
pendingText,
|
pendingText,
|
||||||
type = "submit",
|
type = "submit",
|
||||||
|
variant = "default",
|
||||||
...props
|
...props
|
||||||
}: SubmitButtonProps) {
|
}: SubmitButtonProps) {
|
||||||
const { pending } = useFormStatus();
|
const { pending } = useFormStatus();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Button type={type} disabled={pending} loading={pending} aria-busy={pending} {...props}>
|
<Button
|
||||||
|
type={type}
|
||||||
|
disabled={pending}
|
||||||
|
loading={pending}
|
||||||
|
aria-busy={pending}
|
||||||
|
{...props}
|
||||||
|
variant={variant}
|
||||||
|
effect="shine"
|
||||||
|
>
|
||||||
{pending ? (
|
{pending ? (
|
||||||
<>
|
<>
|
||||||
{pendingText || children}
|
{pendingText || children}
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { signOut } from "@/app/login/actions";
|
|||||||
import { ColorModeSync } from "@/components/theme/color-mode-sync";
|
import { ColorModeSync } from "@/components/theme/color-mode-sync";
|
||||||
import type { ColorMode } from "@/lib/color-mode";
|
import type { ColorMode } from "@/lib/color-mode";
|
||||||
import {
|
import {
|
||||||
|
Button,
|
||||||
Card,
|
Card,
|
||||||
CardContent,
|
CardContent,
|
||||||
Typography,
|
Typography,
|
||||||
@@ -308,10 +309,11 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
|
|||||||
return (
|
return (
|
||||||
<DropdownMenu>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<button
|
<Button effect="shine"
|
||||||
type="button"
|
type="button"
|
||||||
|
variant="secondary"
|
||||||
aria-label={`${user.displayName} için hesap menüsünü aç`}
|
aria-label={`${user.displayName} için hesap menüsünü aç`}
|
||||||
className="group flex w-full items-center gap-2 rounded-md border border-transparent p-1.5 text-left outline-none transition-[color,background-color,border-color] hover:border-border hover:bg-accent focus-visible:ring-2 focus-visible:ring-focus-ring data-[state=open]:border-border data-[state=open]:bg-accent"
|
className="group h-auto min-h-10 w-full justify-start p-1.5 text-left"
|
||||||
>
|
>
|
||||||
<SidebarUserProfile
|
<SidebarUserProfile
|
||||||
className="min-w-0 flex-1"
|
className="min-w-0 flex-1"
|
||||||
@@ -324,7 +326,7 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
|
|||||||
className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
|
className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-data-[state=open]:rotate-180"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
/>
|
/>
|
||||||
</button>
|
</Button>
|
||||||
</DropdownMenuTrigger>
|
</DropdownMenuTrigger>
|
||||||
<DropdownMenuContent
|
<DropdownMenuContent
|
||||||
align="start"
|
align="start"
|
||||||
@@ -355,10 +357,10 @@ function AccountMenu({ user, settingsHref }: { user: ShellUser; settingsHref: st
|
|||||||
asChild
|
asChild
|
||||||
className="text-destructive focus:text-destructive data-[highlighted]:text-destructive"
|
className="text-destructive focus:text-destructive data-[highlighted]:text-destructive"
|
||||||
>
|
>
|
||||||
<button type="submit" className="w-full gap-2 text-left">
|
<Button effect="shine" type="submit" variant="secondary" size="sm" className="w-full justify-start gap-2 text-left text-destructive">
|
||||||
<LogOut className="h-4 w-4 shrink-0" aria-hidden="true" />
|
<LogOut className="h-4 w-4 shrink-0" aria-hidden="true" />
|
||||||
<span>Çıkış yap</span>
|
<span>Çıkış yap</span>
|
||||||
</button>
|
</Button>
|
||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</form>
|
</form>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
|
|||||||
@@ -41,13 +41,14 @@ export function DestructiveConfirmation({
|
|||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
<DialogFooter>
|
<DialogFooter>
|
||||||
<DialogClose asChild>
|
<DialogClose asChild>
|
||||||
<Button type="button" variant="outline" disabled={loading}>
|
<Button effect="shine" type="button" variant="secondary" disabled={loading}>
|
||||||
{cancelLabel}
|
{cancelLabel}
|
||||||
</Button>
|
</Button>
|
||||||
</DialogClose>
|
</DialogClose>
|
||||||
<Button
|
<Button
|
||||||
|
effect="shine"
|
||||||
type="button"
|
type="button"
|
||||||
variant="destructive"
|
variant="default"
|
||||||
loading={loading}
|
loading={loading}
|
||||||
aria-busy={loading}
|
aria-busy={loading}
|
||||||
onClick={onConfirm}
|
onClick={onConfirm}
|
||||||
|
|||||||
@@ -62,7 +62,7 @@ export function LoadingState({ label = "İçerik yükleniyor" }: { label?: strin
|
|||||||
|
|
||||||
export function RetryAction({ onClick }: { onClick: () => void }) {
|
export function RetryAction({ onClick }: { onClick: () => void }) {
|
||||||
return (
|
return (
|
||||||
<Button type="button" variant="outline" size="sm" onClick={onClick}>
|
<Button effect="shine" type="button" variant="secondary" size="sm" onClick={onClick}>
|
||||||
Yeniden dene
|
Yeniden dene
|
||||||
</Button>
|
</Button>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -7,10 +7,14 @@ import { useFormStatus } from "react-dom";
|
|||||||
|
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
|
||||||
type PendingSubmitButtonProps = ComponentProps<typeof Button> & {
|
type PendingSubmitButtonProps = Omit<
|
||||||
|
ComponentProps<typeof Button>,
|
||||||
|
"effect" | "variant"
|
||||||
|
> & {
|
||||||
idleIcon?: ReactNode;
|
idleIcon?: ReactNode;
|
||||||
pendingIcon?: ReactNode;
|
pendingIcon?: ReactNode;
|
||||||
pendingChildren?: ReactNode;
|
pendingChildren?: ReactNode;
|
||||||
|
variant?: "default" | "secondary";
|
||||||
};
|
};
|
||||||
|
|
||||||
export function PendingSubmitButton({
|
export function PendingSubmitButton({
|
||||||
@@ -21,6 +25,7 @@ export function PendingSubmitButton({
|
|||||||
pendingChildren,
|
pendingChildren,
|
||||||
pendingIcon,
|
pendingIcon,
|
||||||
type = "submit",
|
type = "submit",
|
||||||
|
variant = "default",
|
||||||
...props
|
...props
|
||||||
}: PendingSubmitButtonProps) {
|
}: PendingSubmitButtonProps) {
|
||||||
const { pending } = useFormStatus();
|
const { pending } = useFormStatus();
|
||||||
@@ -36,6 +41,8 @@ export function PendingSubmitButton({
|
|||||||
aria-busy={pending}
|
aria-busy={pending}
|
||||||
loading={pending && !pendingIcon}
|
loading={pending && !pendingIcon}
|
||||||
className={cn(className)}
|
className={cn(className)}
|
||||||
|
variant={variant}
|
||||||
|
effect="shine"
|
||||||
>
|
>
|
||||||
{icon}
|
{icon}
|
||||||
{pending ? pendingChildren ?? children : children}
|
{pending ? pendingChildren ?? children : children}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import assert from "node:assert/strict";
|
import assert from "node:assert/strict";
|
||||||
import fs from "node:fs";
|
import fs from "node:fs";
|
||||||
import path from "node:path";
|
import path from "node:path";
|
||||||
|
import ts from "typescript";
|
||||||
|
|
||||||
const repoRoot = process.cwd();
|
const repoRoot = process.cwd();
|
||||||
const packageJson = JSON.parse(fs.readFileSync(path.join(repoRoot, "package.json"), "utf8"));
|
const packageJson = JSON.parse(fs.readFileSync(path.join(repoRoot, "package.json"), "utf8"));
|
||||||
@@ -164,6 +165,8 @@ for (const sliderBehavior of [
|
|||||||
"snap-mandatory",
|
"snap-mandatory",
|
||||||
"overflow-x-auto",
|
"overflow-x-auto",
|
||||||
"scrollBy",
|
"scrollBy",
|
||||||
|
"[scrollbar-width:none]",
|
||||||
|
"[&::-webkit-scrollbar]:hidden",
|
||||||
'event.key === "ArrowLeft"',
|
'event.key === "ArrowLeft"',
|
||||||
'event.key === "ArrowRight"',
|
'event.key === "ArrowRight"',
|
||||||
]) {
|
]) {
|
||||||
@@ -173,6 +176,45 @@ for (const sliderBehavior of [
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const pageHeaderFiles = [
|
||||||
|
"app/(dashboard)/dashboard-client.tsx",
|
||||||
|
"app/(dashboard)/analytics/analytics-client.tsx",
|
||||||
|
"app/(dashboard)/calendar/calendar-client.tsx",
|
||||||
|
"app/(dashboard)/clients/clients-client.tsx",
|
||||||
|
"app/(dashboard)/clients/[id]/client-detail-client.tsx",
|
||||||
|
"app/(dashboard)/finance/finance-client.tsx",
|
||||||
|
"app/(dashboard)/journal/journal-client.tsx",
|
||||||
|
"app/(dashboard)/projects/projects-client.tsx",
|
||||||
|
"app/(dashboard)/projects/[id]/project-detail-client.tsx",
|
||||||
|
"app/(dashboard)/tasks/tasks-client.tsx",
|
||||||
|
"app/(dashboard)/settings/page.tsx",
|
||||||
|
"app/(dashboard)/business/invoices/invoices-client.tsx",
|
||||||
|
"app/(dashboard)/business/proposals/proposals-client.tsx",
|
||||||
|
"app/(dashboard)/business/subscriptions/subscriptions-client.tsx",
|
||||||
|
"app/(dashboard)/chat/page.tsx",
|
||||||
|
"app/portal/page.tsx",
|
||||||
|
"app/portal/projects/page.tsx",
|
||||||
|
"app/portal/projects/[id]/portal-project-client.tsx",
|
||||||
|
"app/portal/tasks/page.tsx",
|
||||||
|
"app/portal/revisions/page.tsx",
|
||||||
|
];
|
||||||
|
for (const pageHeaderFile of pageHeaderFiles) {
|
||||||
|
const content = fs.readFileSync(path.join(repoRoot, pageHeaderFile), "utf8");
|
||||||
|
assert.doesNotMatch(
|
||||||
|
content,
|
||||||
|
/<\/h1>\s*(?:\{[^\n]*&&\s*)?<p\b[^>]*text-muted-foreground/,
|
||||||
|
`${pageHeaderFile} must not render a description directly below its page title`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
assert.doesNotMatch(
|
||||||
|
fs.readFileSync(
|
||||||
|
path.join(repoRoot, "app/(dashboard)/projects/[id]/project-detail-client.tsx"),
|
||||||
|
"utf8",
|
||||||
|
),
|
||||||
|
/project\.description\s*\|\|/,
|
||||||
|
"Project detail header must not render the project description below its title",
|
||||||
|
);
|
||||||
|
|
||||||
const allowedLocalUiFiles = new Set([
|
const allowedLocalUiFiles = new Set([
|
||||||
"pending-link.tsx",
|
"pending-link.tsx",
|
||||||
"pending-submit-button.tsx",
|
"pending-submit-button.tsx",
|
||||||
@@ -221,6 +263,80 @@ function walk(targetPath) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const buttonViolations = ["app", "components"]
|
||||||
|
.flatMap(walk)
|
||||||
|
.filter((filePath) => filePath.endsWith(".tsx"))
|
||||||
|
.flatMap((filePath) => {
|
||||||
|
const content = fs.readFileSync(filePath, "utf8");
|
||||||
|
const relativePath = path.relative(repoRoot, filePath);
|
||||||
|
const sourceFile = ts.createSourceFile(
|
||||||
|
filePath,
|
||||||
|
content,
|
||||||
|
ts.ScriptTarget.Latest,
|
||||||
|
true,
|
||||||
|
ts.ScriptKind.TSX,
|
||||||
|
);
|
||||||
|
const violations = [];
|
||||||
|
let hasPoyrazButtonImport = false;
|
||||||
|
const buttonNodes = [];
|
||||||
|
|
||||||
|
function visit(node) {
|
||||||
|
if (
|
||||||
|
ts.isImportDeclaration(node) &&
|
||||||
|
node.moduleSpecifier.text === "poyraz-ui/atoms" &&
|
||||||
|
node.importClause?.namedBindings &&
|
||||||
|
ts.isNamedImports(node.importClause.namedBindings)
|
||||||
|
) {
|
||||||
|
hasPoyrazButtonImport ||= node.importClause.namedBindings.elements.some(
|
||||||
|
(element) => element.name.text === "Button",
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
|
||||||
|
const tagName = node.tagName.getText(sourceFile);
|
||||||
|
if (tagName === "button") {
|
||||||
|
const line = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)).line + 1;
|
||||||
|
violations.push(`${relativePath}:${line}: native button must use Poyraz Button`);
|
||||||
|
}
|
||||||
|
if (tagName === "Button") buttonNodes.push(node);
|
||||||
|
}
|
||||||
|
ts.forEachChild(node, visit);
|
||||||
|
}
|
||||||
|
visit(sourceFile);
|
||||||
|
|
||||||
|
if (buttonNodes.length > 0 && !hasPoyrazButtonImport) {
|
||||||
|
violations.push(`${relativePath}: Button must be imported from poyraz-ui/atoms`);
|
||||||
|
}
|
||||||
|
|
||||||
|
for (const node of buttonNodes) {
|
||||||
|
const line = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)).line + 1;
|
||||||
|
const attributes = node.attributes.properties.filter(ts.isJsxAttribute);
|
||||||
|
const effect = attributes.find((attribute) => attribute.name.getText(sourceFile) === "effect");
|
||||||
|
const variant = attributes.find((attribute) => attribute.name.getText(sourceFile) === "variant");
|
||||||
|
const variantText = variant?.getText(sourceFile) ?? "";
|
||||||
|
|
||||||
|
if (effect?.getText(sourceFile) !== 'effect="shine"') {
|
||||||
|
violations.push(`${relativePath}:${line}: Button must use effect="shine"`);
|
||||||
|
}
|
||||||
|
if (!variant || /outline|ghost|destructive|soft|glass|link/.test(variantText)) {
|
||||||
|
violations.push(
|
||||||
|
`${relativePath}:${line}: Button variant must be default or secondary`,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
if (/bg-indigo|border-indigo|text-indigo/.test(node.getText(sourceFile))) {
|
||||||
|
violations.push(`${relativePath}:${line}: Button must not override Poyraz variant colors`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return violations;
|
||||||
|
});
|
||||||
|
|
||||||
|
assert.deepEqual(
|
||||||
|
buttonViolations,
|
||||||
|
[],
|
||||||
|
`Poyraz Button boundary violations:\n${buttonViolations.join("\n")}`,
|
||||||
|
);
|
||||||
|
|
||||||
const violations = ["app", "components"]
|
const violations = ["app", "components"]
|
||||||
.flatMap(walk)
|
.flatMap(walk)
|
||||||
.flatMap((filePath) => {
|
.flatMap((filePath) => {
|
||||||
|
|||||||
Reference in New Issue
Block a user