@kosdev-code/base-ui-components 0.1.0-dev.5382 → 0.1.0-dev.5596

package/components/molecules/view/types.d.ts

@@ -0,0 +1,103 @@
+import { IconIds, IconColors } from '../../atoms/icon';
+import { ReactNode } from 'react';
+
+/**
+ * Configuration for an icon in the view header.
+ *
+ * @category Components
+ */
+export interface ViewIconConfig {
+    /** Icon identifier */
+    iconId: IconIds;
+    /** Icon color */
+    color?: IconColors;
+}
+/**
+ * Configuration for a view header action button.
+ *
+ * @category Components
+ */
+export interface ViewHeaderAction {
+    /** Unique identifier for the action */
+    id: string;
+    /** Icon to display for the action */
+    iconId: IconIds;
+    /** Tooltip text for the action */
+    tooltip?: string;
+    /** Label text for the action (shown in overflow menu) */
+    label?: string;
+    /** Icon color */
+    color?: IconColors;
+    /** Click handler for the action */
+    onClick: () => void;
+    /** Whether the action is disabled */
+    disabled?: boolean;
+    /**
+     * Whether this is a primary action displayed inline.
+     * Primary actions appear as icon buttons in the header.
+     * Secondary actions (isPrimary=false or undefined) appear in the overflow menu.
+     * Max 3 primary actions are shown; extras overflow with a separator.
+     */
+    isPrimary?: boolean;
+}
+/**
+ * Props for the ViewHeader component.
+ *
+ * @category Components
+ */
+export interface ViewHeaderProps {
+    /** Header title */
+    title: string;
+    /** Optional subtitle */
+    subtitle?: string;
+    /** Optional icon configuration */
+    icon?: ViewIconConfig;
+    /** Action buttons to display in the header */
+    actions?: ViewHeaderAction[];
+    /**
+     * Custom content to render in the header actions area.
+     * Rendered before action buttons. Use for ButtonGroup, toggles, etc.
+     */
+    headerContent?: ReactNode;
+    /** Whether the view is collapsible */
+    collapsible?: boolean;
+    /** Whether the view is currently collapsed */
+    collapsed?: boolean;
+    /** Handler for collapse toggle */
+    onToggleCollapse?: () => void;
+}
+/**
+ * Props for the View component.
+ *
+ * @category Components
+ */
+export interface ViewProps {
+    /** View title */
+    title: string;
+    /** Optional subtitle */
+    subtitle?: string;
+    /** Optional icon configuration */
+    icon?: ViewIconConfig;
+    /** Action buttons to display in the header */
+    actions?: ViewHeaderAction[];
+    /**
+     * Custom content to render in the header actions area.
+     * Rendered before action buttons. Use for ButtonGroup, toggles, etc.
+     */
+    headerContent?: ReactNode;
+    /** Whether the view can be collapsed */
+    collapsible?: boolean;
+    /** Whether the view is collapsed by default (uncontrolled mode) */
+    defaultCollapsed?: boolean;
+    /** Whether the view is currently collapsed (controlled mode) */
+    collapsed?: boolean;
+    /** Handler for collapse toggle (controlled mode) */
+    onToggleCollapse?: () => void;
+    /** Content to display in the view */
+    children: ReactNode;
+    /** CSS class name */
+    className?: string;
+    /** Focus event handler */
+    onFocus?: () => void;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/molecules/view/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../packages/libraries/base-ui-components/src/components/molecules/view/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE5D;;;;GAIG;AACH,MAAM,WAAW,cAAc;IAC7B,sBAAsB;IACtB,MAAM,EAAE,OAAO,CAAC;IAChB,iBAAiB;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;CACpB;AAED;;;;GAIG;AACH,MAAM,WAAW,gBAAgB;IAC/B,uCAAuC;IACvC,EAAE,EAAE,MAAM,CAAC;IACX,qCAAqC;IACrC,MAAM,EAAE,OAAO,CAAC;IAChB,kCAAkC;IAClC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iBAAiB;IACjB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,mCAAmC;IACnC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAe;IAC9B,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,sCAAsC;IACtC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8CAA8C;IAC9C,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;CAC/B;AAED;;;;GAIG;AACH,MAAM,WAAW,SAAS;IACxB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,kCAAkC;IAClC,IAAI,CAAC,EAAE,cAAc,CAAC;IACtB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC7B;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,wCAAwC;IACxC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,gEAAgE;IAChE,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oDAAoD;IACpD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB"}

package/components/molecules/view/view-header.d.ts

@@ -0,0 +1,32 @@
+import { ViewHeaderProps } from './types';
+
+/**
+ * ViewHeader component displays a header section for a View.
+ *
+ * Features:
+ * - Title and optional subtitle
+ * - Optional icon
+ * - Action buttons
+ * - Collapsible support with chevron indicator
+ *
+ * @category Components
+ *
+ * @example
+ * ```tsx
+ * <ViewHeader
+ *   title="Projects"
+ *   subtitle="3 items"
+ *   icon={{ iconId: 'Project', color: 'blue' }}
+ *   actions={[
+ *     {
+ *       id: 'add',
+ *       iconId: 'AddOutlined',
+ *       tooltip: 'Add Project',
+ *       onClick: handleAdd,
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ViewHeader: import('react').NamedExoticComponent<ViewHeaderProps>;
+//# sourceMappingURL=view-header.d.ts.map

package/components/molecules/view/view-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-header.d.ts","sourceRoot":"","sources":["../../../../../../../packages/libraries/base-ui-components/src/components/molecules/view/view-header.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AASH,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,UAAU,uDA+EtB,CAAC"}

package/components/molecules/view/view.d.ts

@@ -0,0 +1,60 @@
+import { ViewProps } from './types';
+
+/**
+ * View component serves as an individual view unit with header and content area.
+ *
+ * Features:
+ * - Integrated ViewHeader with title, subtitle, icon, and actions
+ * - Flexible content slot for any content type (AsyncList, custom components, etc.)
+ * - Optional collapsible state
+ * - Consistent Studio 2.0 styling
+ *
+ * @category Components
+ *
+ * @example Basic view
+ * ```tsx
+ * <View
+ *   title="Projects"
+ *   subtitle="3 items"
+ *   icon={{ iconId: 'Project', color: 'blue' }}
+ * >
+ *   <AsyncList dataProvider={projectsProvider} ItemTemplate={StudioNamedListItem} />
+ * </View>
+ * ```
+ *
+ * @example View with actions
+ * ```tsx
+ * <View
+ *   title="Projects"
+ *   actions={[
+ *     {
+ *       id: 'add',
+ *       iconId: 'AddOutlined',
+ *       tooltip: 'Add Project',
+ *       onClick: handleAdd,
+ *     },
+ *     {
+ *       id: 'refresh',
+ *       iconId: 'RefreshOutlined',
+ *       tooltip: 'Refresh',
+ *       onClick: handleRefresh,
+ *     },
+ *   ]}
+ * >
+ *   <AsyncList dataProvider={projectsProvider} ItemTemplate={StudioNamedListItem} />
+ * </View>
+ * ```
+ *
+ * @example Collapsible view
+ * ```tsx
+ * <View
+ *   title="Advanced Settings"
+ *   collapsible
+ *   defaultCollapsed
+ * >
+ *   <ConfigurationForm />
+ * </View>
+ * ```
+ */
+export declare const View: import('react').NamedExoticComponent<ViewProps>;
+//# sourceMappingURL=view.d.ts.map

package/components/molecules/view/view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view.d.ts","sourceRoot":"","sources":["../../../../../../../packages/libraries/base-ui-components/src/components/molecules/view/view.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AAKH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAKzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuDG;AACH,eAAO,MAAM,IAAI,iDAmDhB,CAAC"}

package/components/molecules/view-container/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * (C) Copyright 2025, TCCC, All rights reserved.
+ */
+export { ViewContainer } from './view-container';
+export type { ViewContainerProps, ViewContainerDirection } from './types';
+//# sourceMappingURL=index.d.ts.map

package/components/molecules/view-container/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../../packages/libraries/base-ui-components/src/components/molecules/view-container/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,SAAS,CAAC"}

package/components/molecules/view-container/types.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+
+/**
+ * Layout direction for the view container.
+ *
+ * @category Components
+ */
+export type ViewContainerDirection = "vertical" | "horizontal";
+/**
+ * Props for the ViewContainer component.
+ *
+ * @category Components
+ */
+export interface ViewContainerProps {
+    /** Container identifier */
+    id?: string;
+    /** Container name/label */
+    name?: string;
+    /** Layout direction for stacking views */
+    direction?: ViewContainerDirection;
+    /** Gap between views (uses token default if not specified) */
+    gap?: string | number;
+    /** View components to render */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/components/molecules/view-container/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../../../packages/libraries/base-ui-components/src/components/molecules/view-container/types.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,YAAY,CAAC;AAE/D;;;;GAIG;AACH,MAAM,WAAW,kBAAkB;IACjC,2BAA2B;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,8DAA8D;IAC9D,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,gCAAgC;IAChC,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB"}

package/components/molecules/view-container/view-container.d.ts

@@ -0,0 +1,52 @@
+import { ViewContainerProps } from './types';
+
+/**
+ * ViewContainer component manages multiple views with flexible layout direction.
+ *
+ * Features:
+ * - Named layout area for organizing multiple views
+ * - Vertical (top-to-bottom) or horizontal (left-to-right) stacking
+ * - Configurable gap between views
+ * - Responsive behavior
+ * - Accepts View components as children
+ *
+ * @category Components
+ *
+ * @example Vertical stacking (default)
+ * ```tsx
+ * <ViewContainer name="main-content">
+ *   <View title="Projects">
+ *     <AsyncList dataProvider={projectsProvider} ItemTemplate={StudioNamedListItem} />
+ *   </View>
+ *   <View title="Recent Activity">
+ *     <ActivityList />
+ *   </View>
+ * </ViewContainer>
+ * ```
+ *
+ * @example Horizontal stacking
+ * ```tsx
+ * <ViewContainer direction="horizontal" name="side-by-side">
+ *   <View title="Available Items">
+ *     <ItemList items={available} />
+ *   </View>
+ *   <View title="Selected Items">
+ *     <ItemList items={selected} />
+ *   </View>
+ * </ViewContainer>
+ * ```
+ *
+ * @example Custom gap
+ * ```tsx
+ * <ViewContainer direction="vertical" gap="24px">
+ *   <View title="Section 1">
+ *     <Content1 />
+ *   </View>
+ *   <View title="Section 2">
+ *     <Content2 />
+ *   </View>
+ * </ViewContainer>
+ * ```
+ */
+export declare const ViewContainer: import('react').NamedExoticComponent<ViewContainerProps>;
+//# sourceMappingURL=view-container.d.ts.map

package/components/molecules/view-container/view-container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-container.d.ts","sourceRoot":"","sources":["../../../../../../../packages/libraries/base-ui-components/src/components/molecules/view-container/view-container.tsx"],"names":[],"mappings":"AAAA;;GAEG;;AAKH,OAAO,KAAK,EAAE,kBAAkB,EAA0B,MAAM,SAAS,CAAC;AAI1E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,aAAa,0DAMzB,CAAC"}