dejanandClaude Opus 5
b8bf987d0e
UI/UX-Prototyp der Analytics-Dashboards in HiveGrid, fachlich auf einen SHK-/Handwerksbetrieb zugeschnitten. Ziel ist die Übergabe an die Entwicklung, nicht der Produktivbetrieb. Inhalt: sechs Seiten (Übersicht, Finanzen, Aufträge, Kunden, Team, Komponenten), 26 KPIs, neun Chart-Bausteine, Filtersystem mit seitenabhängiger Relevanz und ein deterministischer Demo-Datensatz (420 Kunden, 1.900 Aufträge, Stichtag 30.07.2026). Drei Quellen sind zusammengeführt: die fachliche Planung mit dem Branchenpartner (Januar 2026), die Subframe-Komponentenbibliothek aus dem HiveGrid-Pitch und IBM Carbon Data Visualization für die Diagrammregeln. Herkunft und bewusste Abweichungen stehen in docs/HERKUNFT.md. Dokumentation: README, HANDOVER (was echte Logik braucht), docs/DESIGN-SYSTEM, KPI-KATALOG, DATENMODELL, NAVIGATION, HERKUNFT, ZIELSYSTEM (Einbauort in HiveGrid Cloud) und LEITPLANKEN (welche Cloud-Screens als Vorbild taugen). Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
319 lines
12 KiB
TypeScript
319 lines
12 KiB
TypeScript
"use client";
|
|
/*
|
|
* Documentation:
|
|
* Text Input — https://app.subframe.com/f023064a5ca0/library?component=Text+Input_be48ca43-f8e7-4c0e-8870-d219ea11abfe
|
|
*/
|
|
|
|
import React from "react";
|
|
import { FeatherCircleDashed } from "@subframe/core";
|
|
import { FeatherEye } from "@subframe/core";
|
|
import { FeatherEyeOff } from "@subframe/core";
|
|
import { FeatherLock } from "@subframe/core";
|
|
import { FeatherPlus } from "@subframe/core";
|
|
import { FeatherSearch } from "@subframe/core";
|
|
import * as SubframeCore from "@subframe/core";
|
|
import * as SubframeUtils from "../../utils";
|
|
|
|
export interface InputProps
|
|
extends Omit<
|
|
React.InputHTMLAttributes<HTMLInputElement>,
|
|
"type" | "placeholder" | "value"
|
|
> {
|
|
type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
|
|
placeholder?: React.ReactNode;
|
|
value?: React.ReactNode;
|
|
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
className?: string;
|
|
}
|
|
|
|
const Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(
|
|
{ type = "text", placeholder, value, className, ...otherProps }: InputProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<input
|
|
className={SubframeUtils.twClassNames(
|
|
"group/b0d608f7 h-full w-full border-none bg-transparent px-0 py-0 text-body-default-regular-0 font-body-default-regular-0 text-text-neutral-secondary outline-none placeholder:text-text-neutral-subtle",
|
|
className
|
|
)}
|
|
placeholder={placeholder as string}
|
|
value={value as string}
|
|
ref={ref}
|
|
type={
|
|
type === "search"
|
|
? "search"
|
|
: type === "url"
|
|
? "url"
|
|
: type === "tel"
|
|
? "tel"
|
|
: type === "number"
|
|
? "number"
|
|
: type === "email"
|
|
? "email"
|
|
: type === "password"
|
|
? "password"
|
|
: "text"
|
|
}
|
|
{...otherProps}
|
|
/>
|
|
);
|
|
});
|
|
|
|
export interface PasswordEyeButtonProps
|
|
extends React.HTMLAttributes<HTMLDivElement> {
|
|
showPassword?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const PasswordEyeButton = React.forwardRef<
|
|
HTMLDivElement,
|
|
PasswordEyeButtonProps
|
|
>(function PasswordEyeButton(
|
|
{ showPassword = false, className, ...otherProps }: PasswordEyeButtonProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"group/39db4fac flex h-5 w-5 cursor-pointer flex-col items-center justify-center gap-4",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
{showPassword ? (
|
|
<FeatherEye className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
|
|
) : (
|
|
<FeatherEyeOff className="text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-primary group-hover/39db4fac:text-body-large-0 group-hover/39db4fac:font-body-large-0 group-active/39db4fac:text-body-default-regular-0 group-active/39db4fac:font-body-default-regular-0" />
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export interface TextInputRootProps
|
|
extends React.LabelHTMLAttributes<HTMLLabelElement> {
|
|
disabled?: boolean;
|
|
error?: boolean;
|
|
variant?: "outline" | "filled";
|
|
size?: "small" | "medium" | "large";
|
|
fillContainer?: boolean;
|
|
borderless?: boolean;
|
|
noPadding?: boolean;
|
|
showLabel?: boolean;
|
|
label?: React.ReactNode;
|
|
helpText?: React.ReactNode;
|
|
message?: React.ReactNode;
|
|
icon?: React.ReactNode;
|
|
iconRight?: React.ReactNode;
|
|
type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
|
|
children?: React.ReactNode;
|
|
showIconLeft?: boolean;
|
|
showIconRight?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const TextInputRoot = React.forwardRef<HTMLLabelElement, TextInputRootProps>(
|
|
function TextInputRoot(
|
|
{
|
|
disabled = false,
|
|
error = false,
|
|
variant = "outline",
|
|
size = "medium",
|
|
fillContainer = false,
|
|
borderless = false,
|
|
noPadding = false,
|
|
showLabel = false,
|
|
label,
|
|
helpText,
|
|
message,
|
|
icon = <FeatherCircleDashed />,
|
|
iconRight = <FeatherCircleDashed />,
|
|
type = "text",
|
|
children,
|
|
showIconLeft = false,
|
|
showIconRight = false,
|
|
className,
|
|
...otherProps
|
|
}: TextInputRootProps,
|
|
ref
|
|
) {
|
|
return (
|
|
<label
|
|
className={SubframeUtils.twClassNames(
|
|
"group/be48ca43 flex cursor-pointer flex-col items-start gap-2",
|
|
className
|
|
)}
|
|
ref={ref}
|
|
{...otherProps}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full grow shrink-0 basis-0 flex-col items-start justify-center gap-4",
|
|
{ "gap-1.5": showLabel, "min-w-[192px] flex-none": fillContainer }
|
|
)}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden flex-col items-start gap-2",
|
|
{ flex: showLabel }
|
|
)}
|
|
>
|
|
{label ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-medium-0 font-body-default-medium-0 text-text-neutral-secondary",
|
|
{
|
|
"text-text-feedback-negative": error,
|
|
"text-text-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{label}
|
|
</span>
|
|
) : null}
|
|
{helpText ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-small-regular-0 font-body-small-regular-0 text-text-neutral-tertiary",
|
|
{
|
|
"text-text-feedback-negative": error,
|
|
"text-text-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{helpText}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex w-full min-w-[192px] max-w-[320px] flex-col items-start justify-center gap-4",
|
|
{
|
|
"gap-1": showLabel,
|
|
"min-w-0 max-w-none flex-none": fillContainer,
|
|
}
|
|
)}
|
|
>
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"flex h-9 w-full min-w-[112px] flex-none items-center gap-2 rounded-sm border border-solid border-border-strong bg-surface-neutral-primary px-3 group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-brand-brand-border-solid-hover group-hover/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:bg-surface-neutral-secondary group-focus-within/be48ca43:shadow-focus",
|
|
{
|
|
"h-auto min-w-[80px] px-0 py-0": noPadding,
|
|
"border-none bg-transparent group-hover/be48ca43:border-none group-hover/be48ca43:bg-surface-neutral-modal":
|
|
borderless,
|
|
"h-12 min-w-[96px]": size === "large",
|
|
"h-8 min-w-[80px]": size === "small",
|
|
"bg-surface-neutral-secondary": variant === "filled",
|
|
"border border-solid border-border-negative-solid group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-negative-solid group-focus-within/be48ca43:border-2 group-focus-within/be48ca43:border-solid group-focus-within/be48ca43:border-border-negative-solid group-focus-within/be48ca43:shadow-none":
|
|
error,
|
|
"border border-solid border-border-disabled bg-surface-neutral-disabled group-hover/be48ca43:border group-hover/be48ca43:border-solid group-hover/be48ca43:border-border-disabled group-hover/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:bg-surface-neutral-disabled group-focus-within/be48ca43:shadow-none":
|
|
disabled,
|
|
}
|
|
)}
|
|
>
|
|
<div className="flex grow shrink-0 basis-0 items-center self-stretch">
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden items-center gap-2 pr-2",
|
|
{
|
|
flex:
|
|
showIconLeft ||
|
|
type === "search" ||
|
|
type === "password",
|
|
}
|
|
)}
|
|
>
|
|
{type === "search" ? (
|
|
<FeatherSearch
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
|
{ hidden: showIconLeft }
|
|
)}
|
|
/>
|
|
) : type === "password" ? (
|
|
<FeatherLock
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
|
{ hidden: showIconLeft }
|
|
)}
|
|
/>
|
|
) : (
|
|
<FeatherPlus
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
|
{ hidden: showIconLeft }
|
|
)}
|
|
/>
|
|
)}
|
|
{icon ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
|
{
|
|
hidden: type === "search" || type === "password",
|
|
"text-icon-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{icon}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
{children ? (
|
|
<div className="flex grow shrink-0 basis-0 flex-col items-start self-stretch">
|
|
{children}
|
|
</div>
|
|
) : null}
|
|
<div
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden items-center gap-1 pl-2",
|
|
{
|
|
flex: showIconRight,
|
|
"px-0 py-0": noPadding,
|
|
"pl-0 pr-2.5": size === "small",
|
|
}
|
|
)}
|
|
>
|
|
{iconRight ? (
|
|
<SubframeCore.IconWrapper
|
|
className={SubframeUtils.twClassNames(
|
|
"text-body-default-regular-0 font-body-default-regular-0 text-icon-neutral-tertiary",
|
|
{
|
|
"text-icon-feedback-negative": error,
|
|
"text-icon-neutral-disabled": disabled,
|
|
}
|
|
)}
|
|
>
|
|
{iconRight}
|
|
</SubframeCore.IconWrapper>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
<PasswordEyeButton
|
|
className={SubframeUtils.twClassNames("hidden", {
|
|
flex: type === "password",
|
|
})}
|
|
/>
|
|
</div>
|
|
{message ? (
|
|
<span
|
|
className={SubframeUtils.twClassNames(
|
|
"hidden text-body-extra-small-medium-0 font-body-extra-small-medium-0 text-text-neutral-secondary",
|
|
{ inline: showLabel, "text-text-feedback-negative": error }
|
|
)}
|
|
>
|
|
{message}
|
|
</span>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</label>
|
|
);
|
|
}
|
|
);
|
|
|
|
export const TextInput = Object.assign(TextInputRoot, {
|
|
Input,
|
|
PasswordEyeButton,
|
|
});
|