@godxjp/ui 5.0.2 → 6.0.0

package/src/props/components/index.ts

@@ -0,0 +1,99 @@
+/* eslint-disable @typescript-eslint/no-deprecated -- barrel re-exports legacy PageHeaderProp */
+export type {
+  AppShellProp,
+  InlineProp,
+  PageContainerProp,
+  PageHeaderProp,
+  PageInsetProp,
+  SidebarItemProp,
+  SidebarProductProp,
+  SidebarProp,
+  SidebarSectionProp,
+  StackProp,
+  TopbarProductProp,
+  TopbarProjectProp,
+  TopbarProp,
+} from "./layout.prop";
+export type { ButtonProp } from "./general.prop";
+export type {
+  InputProp,
+  TextareaProp,
+  FormFieldProp,
+  SearchInputProp,
+  CheckboxProp,
+  CheckboxGroupProp,
+  ChoiceOptionProp,
+  RadioProp,
+  RadioGroupProp,
+  SwitchProp,
+  SliderProp,
+  CalendarProp,
+  DatePickerProp,
+  DateRangePickerProp,
+  TimePickerProp,
+  ColorPickerProp,
+  AutocompleteProp,
+  AutocompleteOptionProp,
+  UploadProp,
+  UploadFileItemProp,
+  UploadVariantProp,
+  TreeOptionProp,
+  TreeFieldNamesProp,
+  CascaderProp,
+  TreeSelectProp,
+  ShowCheckedStrategyProp,
+  TransferProp,
+  TransferItemProp,
+} from "./data-entry.prop";
+export type {
+  EmptyStateProp,
+  KeyValueGridProp,
+  KeyValueGridItemProp,
+  StatusBadgeProp,
+  DataTableProp,
+  BadgeProp,
+} from "./data-display.prop";
+export type {
+  DialogConfirmProp,
+  AlertQueryErrorProp,
+  AlertProp,
+  AlertTitleProp,
+  AlertContentProp,
+  AlertDescriptionProp,
+  AlertActionsProp,
+  SkeletonRowsProp,
+} from "./feedback.prop";
+export type {
+  DataStateProp,
+  MutationFeedbackProp,
+  QueryRefetchButtonProp,
+  InfiniteQueryStateProp,
+  InfiniteQueryHelpers,
+  PrefetchLinkProp,
+} from "./query.prop";
+export type {
+  FilterBarProp,
+  FilterGroupProp,
+  PaginationProp,
+  StepsProp,
+  StepItemProp,
+  StepStatusProp,
+  TabsItemsProp,
+  TabItemProp,
+} from "./navigation.prop";
+export type {
+  AppProviderProp,
+  AppContextValue,
+  LocalePickerProp,
+  TimezonePickerProp,
+  TimeFormatPickerProp,
+  DateFormatPickerProp,
+} from "./app.prop";
+export type {
+  ZodSchemaProp,
+  UseZodFormOptionsProp,
+  UseZodFormReturnProp,
+  FormRootProp,
+  FormFieldControlProp,
+  FieldErrorMessageProp,
+} from "./form.prop";

package/src/props/components/layout.prop.ts

@@ -0,0 +1,130 @@
+/** Layout component prop types — @see docs/COMPONENTS.md#layout */
+import type * as React from "react";
+import type { ComponentType, ReactNode, SVGProps } from "react";
+import type {
+  BreadcrumbProp,
+  PageTitleProp,
+  SubtitleProp,
+  ExtraProp,
+  FooterProp,
+  PageDensityProp,
+  PageContainerVariantProp,
+  StackGapProp,
+  InlineGapProp,
+  ClassNameProp,
+  ChildrenProp,
+} from "../vocabulary";
+
+/** @see PageContainer */
+export type PageContainerProp = {
+  title: PageTitleProp;
+  subtitle?: SubtitleProp;
+  extra?: ExtraProp;
+  footer?: FooterProp;
+  breadcrumb?: BreadcrumbProp;
+  density?: PageDensityProp;
+  variant?: PageContainerVariantProp;
+  /** Pin footer to viewport bottom on scroll — pairs well with `variant="narrow"`. */
+  stickyFooter?: boolean;
+  children?: ChildrenProp;
+  className?: ClassNameProp;
+};
+
+/** @see Stack */
+export type StackProp = React.HTMLAttributes<HTMLDivElement> & {
+  gap?: StackGapProp;
+};
+
+/** @see Inline */
+export type InlineProp = React.HTMLAttributes<HTMLDivElement> & {
+  gap?: InlineGapProp;
+};
+
+/** @see PageInset — padded strip inside flush PageContainer (FilterBar, intro). */
+export type PageInsetProp = React.HTMLAttributes<HTMLDivElement> & {
+  children?: ChildrenProp;
+  className?: ClassNameProp;
+};
+
+/** @see AppShell */
+export type AppShellProp = {
+  sidebar: ReactNode;
+  children: ReactNode;
+  topbar?: ReactNode;
+  topbarLeft?: ReactNode;
+  topbarRight?: ReactNode;
+  logo?: ReactNode;
+  breadcrumb?: ReactNode;
+  footer?: ReactNode;
+  sidebarCollapsed?: boolean;
+};
+
+/** @see Sidebar */
+export type SidebarProductProp = {
+  name: string;
+  role?: string;
+  color?: string;
+};
+
+/** @see Sidebar */
+export type SidebarItemProp = {
+  id: string;
+  label: string;
+  icon: ComponentType<SVGProps<SVGSVGElement>>;
+  badge?: ReactNode;
+  disabled?: boolean;
+};
+
+/** @see Sidebar */
+export type SidebarSectionProp = {
+  label?: string;
+  items: SidebarItemProp[];
+};
+
+/** @see Sidebar */
+export type SidebarProp = {
+  activeId: string;
+  onSelect?: (id: string) => void;
+  sections: SidebarSectionProp[];
+  product?: SidebarProductProp;
+  onProductClick?: () => void;
+  brand?: ReactNode;
+  collapsed?: boolean;
+  footer?: ReactNode;
+};
+
+/** @see Topbar */
+export type TopbarProductProp = {
+  name: string;
+  color?: string;
+};
+
+/** @see Topbar */
+export type TopbarProjectProp = {
+  name: string;
+};
+
+/** @see Topbar */
+export type TopbarProp = {
+  product: TopbarProductProp;
+  project?: TopbarProjectProp | null;
+  onProductOpen?: () => void;
+  onProjectOpen?: () => void;
+  onSearchOpen?: () => void;
+  onTweaksOpen?: () => void;
+  collapsed?: boolean;
+  onToggleCollapsed?: () => void;
+  rightSlot?: ReactNode;
+  unread?: boolean;
+  onNotificationsOpen?: () => void;
+  user?: ReactNode;
+};
+
+/** @deprecated Use PageContainerProp — header-only legacy shell. */
+export type PageHeaderProp = {
+  title: PageTitleProp;
+  description?: SubtitleProp;
+  breadcrumb?: BreadcrumbProp;
+  actions?: ExtraProp;
+  className?: ClassNameProp;
+};

package/src/props/components/navigation.prop.ts

@@ -0,0 +1,88 @@
+/** Navigation component prop types — @see docs/COMPONENTS.md#navigation */
+import type * as React from "react";
+import type {
+  ChildrenProp,
+  ClassNameProp,
+  DisabledProp,
+  HasActiveFiltersProp,
+  LabelProp,
+  OnClearFiltersProp,
+} from "../vocabulary";
+
+/** @see FilterBar */
+export type FilterBarProp = {
+  onClear?: OnClearFiltersProp;
+  hasActiveFilters?: HasActiveFiltersProp;
+  className?: ClassNameProp;
+  children: ChildrenProp;
+};
+
+/** @see FilterGroup */
+export type FilterGroupProp = {
+  label: LabelProp;
+  className?: ClassNameProp;
+  children: ChildrenProp;
+};
+
+/** @see Pagination — offset/page-based (distinct from DataTable cursor pagination). */
+export type PaginationProp = {
+  current?: number;
+  total?: number;
+  pageSize?: number;
+  pageSizeOptions?: number[];
+  showSizeChanger?: boolean;
+  showTotal?: boolean | ((total: number, range: [number, number]) => React.ReactNode);
+  simple?: boolean;
+  disabled?: DisabledProp;
+  className?: ClassNameProp;
+  onChange?: (page: number, pageSize: number) => void;
+};
+
+export type StepStatusProp = "wait" | "process" | "finish" | "error";
+
+/** @see StepItem */
+export type StepItemProp = {
+  title: React.ReactNode;
+  subTitle?: React.ReactNode;
+  /** Ant Design `content` — alias `description` supported */
+  content?: React.ReactNode;
+  description?: React.ReactNode;
+  icon?: React.ReactNode;
+  status?: StepStatusProp;
+  disabled?: boolean;
+};
+
+/** @see Steps */
+export type StepsProp = {
+  items?: StepItemProp[];
+  current?: number;
+  initial?: number;
+  status?: StepStatusProp;
+  orientation?: "horizontal" | "vertical";
+  type?: "default" | "dot";
+  size?: "default" | "small";
+  titlePlacement?: "horizontal" | "vertical";
+  onChange?: (current: number) => void;
+  className?: ClassNameProp;
+};
+
+/** Tab pane — Ant Design `items` entry. */
+export type TabItemProp = {
+  key: string;
+  label: React.ReactNode;
+  children: React.ReactNode;
+  disabled?: boolean;
+  icon?: React.ReactNode;
+};
+
+/** @see TabsItems — high-level tabs with `items` array. */
+export type TabsItemsProp = {
+  items: TabItemProp[];
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (key: string) => void;
+  variant?: "default" | "line" | "card";
+  className?: ClassNameProp;
+  listClassName?: ClassNameProp;
+  contentClassName?: ClassNameProp;
+};

package/src/props/components/query.prop.ts

@@ -0,0 +1,94 @@
+/** Query / async lifecycle helpers — @see docs/COMPONENTS.md#query */
+import type * as React from "react";
+import type {
+  InfiniteData,
+  QueryKey,
+  UseInfiniteQueryResult,
+  UseMutationResult,
+  UseQueryResult,
+} from "@tanstack/react-query";
+import type { LinkProps } from "react-router-dom";
+import type { ButtonProp } from "./general.prop";
+import type { ClassNameProp, HandlerProp } from "../vocabulary";
+
+/** @see DataState — TanStack Query lifecycle widget (not a visual component). */
+export type DataStateProp<T> = {
+  query: UseQueryResult<T>;
+  skeleton: React.ReactNode;
+  empty?: React.ReactNode;
+  isEmpty?: (data: NonNullable<T>) => boolean;
+  errorRenderer?: (error: unknown, retry: () => void) => React.ReactNode;
+  /** Default error UI retry button. Default `true`. */
+  showRetry?: boolean;
+  /** Default `() => query.refetch()`. */
+  onRetry?: HandlerProp;
+  children: (data: NonNullable<T>) => React.ReactNode;
+};
+
+type MutationLike = Pick<
+  UseMutationResult<unknown, unknown, unknown, unknown>,
+  "isError" | "error" | "isPending"
+>;
+
+/** @see MutationFeedback — inline mutation error (form submit, simulator run). */
+export type MutationFeedbackProp = {
+  mutation: MutationLike;
+  onRetry?: HandlerProp;
+  showRetry?: boolean;
+  /** Optional inline pending slot while `mutation.isPending`. */
+  pending?: React.ReactNode;
+  className?: ClassNameProp;
+};
+
+type QueryRefetchLike = Pick<UseQueryResult<unknown>, "isFetching" | "refetch">;
+
+/** @see QueryRefetchButton — header Refresh wired to `query.refetch()`. */
+export type QueryRefetchButtonProp = Omit<ButtonProp, "onClick" | "disabled"> & {
+  query: QueryRefetchLike;
+  label?: React.ReactNode;
+};
+
+type InfiniteQueryLike<TPage> = Pick<
+  UseInfiniteQueryResult<InfiniteData<TPage>, unknown>,
+  | "isPending"
+  | "isError"
+  | "isFetching"
+  | "isFetchingNextPage"
+  | "error"
+  | "data"
+  | "hasNextPage"
+  | "fetchNextPage"
+  | "refetch"
+>;
+
+export type InfiniteQueryHelpers = {
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+};
+
+/** @see InfiniteQueryState — useInfiniteQuery lifecycle + load more. */
+export type InfiniteQueryStateProp<TPage, TFlat> = {
+  query: InfiniteQueryLike<TPage>;
+  skeleton: React.ReactNode;
+  empty?: React.ReactNode;
+  flatten: (data: { pages: TPage[] }) => TFlat;
+  isEmpty?: (flat: TFlat) => boolean;
+  errorRenderer?: (error: unknown, retry: () => void) => React.ReactNode;
+  showRetry?: boolean;
+  onRetry?: HandlerProp;
+  loadingMore?: React.ReactNode;
+  /** Custom load-more footer; `false` hides footer entirely. */
+  loadMore?: React.ReactNode | false;
+  /** Show default load-more button when `hasNextPage`. Default `true`. */
+  showLoadMore?: boolean;
+  children: (flat: TFlat, helpers: InfiniteQueryHelpers) => React.ReactNode;
+};
+
+/** @see PrefetchLink — Link + prefetchQuery on hover/focus. */
+export type PrefetchLinkProp = LinkProps & {
+  queryKey: QueryKey;
+  queryFn: () => Promise<unknown>;
+  prefetchOn?: "hover" | "focus" | "both" | "none";
+  staleTime?: number;
+};

package/src/props/index.ts

@@ -0,0 +1,17 @@
+export * from "./vocabulary";
+export * from "./components";
+export {
+  VOCABULARY_REGISTRY,
+  COMPONENT_PROP_REGISTRY,
+  PROP_ALIASES_FORBIDDEN,
+  type VocabularyPropName,
+  type ComponentPropName,
+} from "./registry";
+
+// Backward-compatible re-exports (migrate to *Prop names)
+export type { PageContainerProp as PageContainerProps } from "./components/layout.prop";
+export type { StackProp as StackProps } from "./components/layout.prop";
+export type { InlineProp as InlineProps } from "./components/layout.prop";
+export type { ButtonProp as ButtonProps } from "./components/general.prop";
+export type { BreadcrumbItemProp as BreadcrumbItem } from "./vocabulary/navigation.prop";
+export type { ColumnDefProp as ColumnDef } from "./vocabulary/data.prop";