@qiiqa/bob-ui-react-layout 0.2.0

package/.turbo/turbo-build.log

@@ -0,0 +1,21 @@
+
+> @qiiqa/bob-ui-react-layout@0.1.0 build F:\Dev\ai-bob\packages\qiiqa\bob-ui-react-layout
+> tsup src/index.ts --format cjs,esm --dts --clean --tsconfig tsconfig.json
+
+CLI Building entry: src/index.ts
+CLI Using tsconfig: tsconfig.json
+CLI tsup v8.5.1
+CLI Target: esnext
+CLI Cleaning output folder
+CJS Build start
+ESM Build start
+ESM dist\index.css 9.75 KB
+ESM dist\index.mjs 42.82 KB
+ESM ⚡️ Build success in 49ms
+CJS dist\index.css 9.75 KB
+CJS dist\index.js  47.27 KB
+CJS ⚡️ Build success in 49ms
+DTS Build start
+DTS ⚡️ Build success in 1967ms
+DTS dist\index.d.ts  6.21 KB
+DTS dist\index.d.mts 6.21 KB

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @qiiqa/bob-ui-react-layout
+
+## 0.2.0
+
+### Minor Changes
+
+- Initial basic functionality and ui theming
+
+### Patch Changes
+
+- Updated dependencies
+  - @qiiqa/bob-ui-react-components@0.2.0
+  - @qiiqa/bob-ui@0.2.0

package/dist/index.css

@@ -0,0 +1,429 @@
+/* src/css/bob-react-layout.css */
+.bob-react-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  width: 100%;
+  min-height: 100%;
+  max-width: 100%;
+  overflow-x: hidden;
+}
+.bob-react-page {
+  display: grid;
+  gap: 16px;
+  align-content: start;
+  align-items: start;
+  width: 100%;
+  box-sizing: border-box;
+}
+.bob-react-panel-header {
+  margin: 0 0 16px 0;
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  min-height: 24px;
+  width: 100%;
+}
+.bob-react-panel-caption {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--q-text-base);
+}
+.bob-react-panel-design-controls {
+  display: flex;
+  align-items: center;
+  margin-right: 12px;
+  gap: 8px;
+}
+.bob-react-panel-drag-handle {
+  cursor: grab;
+  color: var(--q-icon-color);
+}
+.bob-react-panel-resize-controls {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+}
+.bob-react-panel-resize-btn {
+  background: var(--q-bg-hover);
+  border: 1px solid var(--q-border-color);
+  border-radius: 4px;
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+}
+.bob-react-panel-span-label {
+  font-size: 0.75rem;
+  color: var(--q-text-muted);
+  padding: 0 4px;
+  user-select: none;
+}
+.bob-react-panel-fields-row {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: repeat(var(--panel-columns, 12), 1fr);
+  width: 100%;
+}
+.bob-react-panel {
+  display: grid;
+  flex-grow: 1;
+  gap: 0;
+  align-content: start;
+  align-items: start;
+  position: relative;
+  padding: 8px;
+  border: 1px solid var(--q-border-color);
+  border-radius: var(--q-border-radius);
+  background: var(--q-bg-base);
+  box-shadow: var(--q-shadow-sm);
+  width: 100%;
+  min-width: 0;
+}
+.bob-react-panel-design-mode {
+  border: 2px solid var(--q-primary);
+  background-color: var(--q-primary-dark);
+  color: var(--q-text-on-dark);
+  padding-bottom: 40px;
+}
+.bob-react-panel-design-mode .bob-react-panel-caption {
+  color: var(--q-text-on-dark);
+}
+.bob-react-panel-row-controls {
+  position: absolute;
+  top: -12px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  align-items: center;
+  z-index: 30;
+  background: var(--q-bg-base);
+  border: 1px solid var(--q-primary);
+  border-radius: 4px;
+  padding: 1px;
+  box-shadow: var(--q-shadow-sm);
+}
+.bob-react-item-row-controls {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  display: flex;
+  align-items: center;
+  z-index: 30;
+  background: var(--q-bg-base);
+  border: 1px solid var(--q-primary);
+  border-radius: 4px;
+  padding: 1px;
+  box-shadow: var(--q-shadow-sm);
+}
+.bob-react-panel-dragover {
+  background-color: var(--q-bg-hover) !important;
+  box-shadow: var(--q-shadow-primary-inset);
+  border-color: var(--q-primary) !important;
+}
+.bob-react-item {
+  display: flex !important;
+  flex-direction: column;
+  justify-content: flex-end;
+  gap: 4px;
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  min-height: 0;
+  align-self: stretch;
+  padding: 8px 8px 8px 0;
+}
+.bob-react-item-expand-vertical {
+  align-self: stretch;
+  height: 100%;
+}
+.bob-react-item-caption {
+  font-size: var(--q-font-size-base);
+  font-weight: 500;
+  color: var(--q-text-base);
+  margin-bottom: 2px;
+  word-break: break-word;
+}
+.bob-react-item-horizontal {
+  display: grid;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+.bob-react-item-horizontal-caption {
+  font-size: var(--q-font-size-base);
+  font-weight: 500;
+  color: var(--q-text-base);
+  word-break: break-word;
+}
+.bob-react-item-horizontal-content {
+  min-width: 0;
+}
+.bob-react-item-row-btn {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  padding: 0 4px;
+  font-size: 12px;
+  font-weight: bold;
+  color: var(--q-primary);
+}
+.bob-react-gap-zone {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  min-height: 100%;
+  background: transparent;
+  transition: background 0.15s ease;
+  flex-shrink: 0;
+  grid-column: unset !important;
+}
+.bob-react-gap-zone.start {
+  border-radius: 4px 0 0 4px;
+}
+.bob-react-gap-zone.end {
+  border-radius: 0 4px 4px 0;
+}
+.bob-react-gap-zone.bob-react-gap-zone-active {
+  background: var(--q-primary-alpha-20);
+  box-shadow: inset 0 0 0 2px var(--q-primary);
+  border-radius: 4px;
+}
+.bob-react-gap-controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0;
+  background: var(--q-bg-base);
+  border: 1px solid var(--q-primary);
+  border-radius: 4px;
+  padding: 1px;
+  box-shadow: var(--q-shadow-sm);
+  z-index: 20;
+  pointer-events: all;
+}
+.bob-react-gap-btn {
+  background: transparent;
+  color: var(--q-primary);
+  border: none;
+  width: 14px;
+  height: 14px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  font-size: 11px;
+  font-weight: bold;
+  border-radius: 2px;
+  transition: background 0.1s;
+}
+.bob-react-gap-btn:hover {
+  background: var(--q-bg-hover);
+}
+.bob-react-gap-span-label {
+  font-size: 0.55rem;
+  color: var(--q-text-muted);
+  padding: 0;
+  user-select: none;
+  text-align: center;
+  font-weight: 700;
+  min-width: 12px;
+  line-height: 1;
+}
+.bob-react-item-selected .bob-react-overlay {
+  background-color: var(--q-primary-alpha-15);
+  border: 2px solid var(--q-primary);
+}
+.bob-react-item-selected .bob-react-overlay::after {
+  content: "SELECTED";
+  background: var(--q-primary-dark);
+}
+.bob-react-tab-strip {
+  display: flex;
+  gap: 8px;
+  border-bottom: 1px solid var(--q-border-color);
+  margin-bottom: 16px;
+  margin-left: 3px;
+}
+.bob-react-tab {
+  padding: 8px 16px;
+  border: 1px solid transparent;
+  border-bottom: none;
+  cursor: pointer;
+  font-weight: 500;
+  color: var(--q-text-muted);
+  transition: all 0.2s;
+  margin-bottom: -1px;
+  border-radius: 6px 6px 0 0;
+  background: transparent;
+}
+.bob-react-tab:hover {
+  color: var(--q-primary);
+  background: var(--q-bg-hover);
+}
+.bob-react-tab-active {
+  background: var(--q-bg-base);
+  color: var(--q-primary);
+  border-color: var(--q-border-color);
+  border-bottom: 2px solid var(--q-primary);
+  z-index: 10;
+}
+.theme-variant-clean .bob-react-tab-strip {
+  border-bottom-color: transparent;
+}
+.theme-variant-clean .bob-react-tab {
+  border-color: transparent !important;
+}
+.theme-variant-clean .bob-react-tab-active {
+  border-color: transparent !important;
+  border-bottom-color: var(--q-primary) !important;
+}
+.bob-react-overlay {
+  position: absolute;
+  inset: 4px;
+  background-color: var(--q-overlay-bg);
+  z-index: 10;
+  cursor: move;
+  border-radius: 4px;
+  border: 1px dashed var(--q-primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.bob-react-overlay::after {
+  content: "DRAG";
+  font-size: 0.75rem;
+  color: var(--q-bg-base);
+  background: var(--q-primary);
+  padding: 2px 6px;
+  border-radius: 4px;
+}
+.bob-react-drop-indicator {
+  position: absolute;
+  background: var(--q-primary);
+  z-index: 50;
+  pointer-events: none;
+}
+.bob-react-drop-indicator.left {
+  left: 0px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-radius: 2px;
+}
+.bob-react-drop-indicator.right {
+  right: 0px;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-radius: 2px;
+}
+.bob-react-drop-indicator.top {
+  top: 0px;
+  left: 0;
+  right: 0;
+  height: 4px;
+  border-radius: 2px;
+}
+.bob-react-drop-indicator.bottom {
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  height: 4px;
+  border-radius: 2px;
+}
+.bob-react-panel-compact {
+  padding: 8px !important;
+  gap: 4px !important;
+}
+.bob-react-panel-compact .bob-react-panel-header {
+  margin-bottom: 8px !important;
+}
+.bob-react-panel-compact .bob-react-panel-caption {
+  font-size: 0.9rem !important;
+}
+.bob-react-panel-compact .bob-react-item {
+  padding: 4px 4px 4px 0 !important;
+}
+.bob-react-responsiveness {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.bob-react-responsiveness-display {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  padding: 4px 8px;
+  border-radius: 4px;
+  border: 1px solid var(--q-border-color);
+  background: var(--q-bg-base);
+  color: var(--q-text-base);
+}
+.bob-react-responsiveness-display span:first-child {
+  font-weight: 600;
+}
+.bob-react-responsiveness-display span:nth-child(2) {
+  opacity: 0.6;
+}
+.bob-react-responsiveness-display i {
+  font-size: 10px;
+  margin-left: 2px;
+}
+.bob-react-responsiveness-popup {
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 1000;
+  background-color: var(--q-bg-sunken);
+  border: 1px solid var(--q-border-color);
+  border-radius: 12px;
+  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+  padding: 12px;
+  width: 280px;
+}
+.bob-react-responsiveness-popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+.bob-react-responsiveness-popup-header span {
+  font-weight: 600;
+  font-size: 16px;
+  color: var(--q-text-base);
+}
+.bob-react-responsiveness-popup-close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  color: var(--q-text-muted);
+  font-size: 18px;
+}
+.bob-react-responsiveness-panel {
+  border: 1px solid var(--q-border-color);
+  background: var(--q-bg-base);
+  box-shadow: none;
+  margin-bottom: 4px;
+}
+.bob-react-responsiveness-panel.resp-panel-active {
+}
+.bob-react-responsiveness-input {
+  width: 100%;
+  padding: 2px 4px;
+  font-size: 11px;
+  border: 1px solid var(--q-border-color);
+  border-radius: 4px;
+  background-color: var(--q-bg-sunken);
+  color: var(--q-primary);
+}

package/dist/index.d.mts

@@ -0,0 +1,185 @@
+import React, { ReactNode } from 'react';
+
+interface BobResponsivenessConfig {
+    small: {
+        page: number;
+        group: number;
+    };
+    medium: {
+        page: number;
+        group: number;
+    };
+    large: {
+        page: number;
+        group: number;
+    };
+    extraLarge: {
+        page: number;
+        group: number;
+    };
+}
+declare const DEFAULT_RESPONSIVENESS_CONFIG: BobResponsivenessConfig;
+type LayoutStateDictionary = Record<string, string[]>;
+interface LayoutContextState {
+    designMode: boolean;
+    designTabs: boolean;
+    designGroups: boolean;
+    designFields: boolean;
+    layoutState: LayoutStateDictionary;
+    selectedItemIds: string[];
+    isDraggingActive: boolean;
+    dragOverId: string | null;
+    dragSide: 'left' | 'right' | 'top' | 'bottom' | null;
+    pageCols: number;
+    groupCols: number;
+    setLayoutState: React.Dispatch<React.SetStateAction<LayoutStateDictionary>>;
+    toggleItemSelection: (id: string, multi: boolean) => void;
+    clearItemSelection: () => void;
+    setDraggingActive: (active: boolean) => void;
+    setDragOverState: (id: string | null, side: 'left' | 'right' | 'top' | 'bottom' | null) => void;
+    loadLayoutState: (state: LayoutStateDictionary) => void;
+    reorderItemWithinContainer: (containerId: string, activeId: string, overId: string, fallbackItems?: string[], insertAfter?: boolean) => void;
+    moveItemBetweenContainers: (sourceContainerId: string, destContainerId: string, activeId: string, overId: string, fallbackItems?: string[], insertAfter?: boolean) => void;
+    setDesignMode: (mode: boolean) => void;
+    setDesignTabs: (mode: boolean) => void;
+    setDesignGroups: (mode: boolean) => void;
+    setDesignFields: (mode: boolean) => void;
+    setPageCols: (cols: number) => void;
+    setGroupCols: (cols: number) => void;
+    responsivenessConfig: BobResponsivenessConfig;
+    setResponsivenessConfig: (config: BobResponsivenessConfig) => void;
+    currentBreakpoint: string;
+}
+declare function useLayoutContext(): LayoutContextState;
+declare const LayoutProvider: React.FC<{
+    children: ReactNode;
+    initialDesignMode?: boolean;
+    initialDesignTabs?: boolean;
+    initialDesignGroups?: boolean;
+    initialDesignFields?: boolean;
+    initialLayoutState?: LayoutStateDictionary;
+    initialPageCols?: number;
+    initialGroupCols?: number;
+    initialResponsivenessConfig?: BobResponsivenessConfig;
+    onLayoutChange?: (state: LayoutStateDictionary) => void;
+    onPageColsChange?: (cols: number) => void;
+    onGroupColsChange?: (cols: number) => void;
+    onResponsivenessConfigChange?: (config: BobResponsivenessConfig) => void;
+}>;
+
+interface BobFormProps {
+    children: ReactNode;
+    className?: string;
+    designMode?: boolean;
+    designTabs?: boolean;
+    designGroups?: boolean;
+    designFields?: boolean;
+    layoutState?: Record<string, string[]>;
+    pageCols?: number;
+    groupCols?: number;
+    initialResponsivenessConfig?: any;
+    onLayoutChange?: (state: any) => void;
+    onPageColsChange?: (cols: number) => void;
+    onGroupColsChange?: (cols: number) => void;
+    onResponsivenessConfigChange?: (config: any) => void;
+}
+declare const BobForm: React.FC<BobFormProps>;
+
+interface BobTabStripProps {
+    id: string;
+    children?: ReactNode;
+    className?: string;
+}
+declare const BobTabStrip: React.FC<BobTabStripProps>;
+
+interface BobTabProps {
+    id: string;
+    label: string | ReactNode;
+    isActive?: boolean;
+    onClick?: (id: string) => void;
+    className?: string;
+}
+declare const BobTab: React.FC<BobTabProps>;
+
+interface BobPageProps {
+    id: string;
+    children?: ReactNode;
+    columns?: number;
+    className?: string;
+}
+declare const BobPage: React.FC<BobPageProps>;
+
+interface BobTabPageProps {
+    id?: string;
+    children?: ReactNode;
+    isActive?: boolean;
+    columns?: number;
+    className?: string;
+    pageClassName?: string;
+}
+declare const BobTabPage: React.FC<BobTabPageProps>;
+
+interface BobPanelProps {
+    id: string;
+    children?: ReactNode;
+    colSpan?: number;
+    rowSpan?: number;
+    columns?: number;
+    className?: string;
+    caption?: string;
+    newline?: boolean;
+    onRowResize?: (delta: number) => void;
+    style?: React.CSSProperties;
+}
+declare const BobPanel: React.FC<BobPanelProps>;
+
+interface BobItemProps {
+    id: string;
+    children?: ReactNode;
+    colSpan?: number;
+    rowSpan?: number;
+    className?: string;
+    expandVertical?: boolean;
+    caption?: string;
+    hideCaption?: boolean;
+    newline?: boolean;
+    onRowResize?: (delta: number) => void;
+    style?: React.CSSProperties;
+    horizontal?: boolean;
+    labelWidth?: string;
+}
+declare const BobItem: React.FC<BobItemProps>;
+
+interface BobResponsivenessProps {
+    className?: string;
+}
+/**
+ * BobResponsiveness component acts as a UI for viewing the current breakpoint
+ * and modifying the global responsiveness configuration in LayoutContext.
+ */
+declare const BobResponsiveness: React.FC<BobResponsivenessProps>;
+
+/**
+ * A GapDropZone represents the empty space between two BobItems (or before the first / after the last).
+ * It renders as a 20px invisible hit-target that highlights when dragged over
+ * and contains the +/- column span control for the *preceding* item.
+ *
+ * `containerId`       – the BobPanel this gap belongs to
+ * `insertAfterItemId` – if set, the new item is inserted AFTER this id; if undefined, insert at START
+ * `colSpan`           – current colSpan of the preceding item (for display)
+ * `onResize`          – called with delta (+1 / -1)
+ * `position`          – 'start' | 'between' | 'end'
+ */
+interface GapDropZoneProps {
+    id: string;
+    containerId: string;
+    insertAfterItemId?: string;
+    colSpan?: number;
+    newline?: boolean;
+    onResize?: (delta: number) => void;
+    onToggleNewline?: () => void;
+    position: 'start' | 'between' | 'end';
+}
+declare const GapDropZone: React.FC<GapDropZoneProps>;
+
+export { BobForm, type BobFormProps, BobItem, type BobItemProps, BobPage, type BobPageProps, BobPanel, type BobPanelProps, BobResponsiveness, type BobResponsivenessConfig, type BobResponsivenessProps, BobTab, BobTabPage, type BobTabPageProps, type BobTabProps, BobTabStrip, type BobTabStripProps, DEFAULT_RESPONSIVENESS_CONFIG, GapDropZone, type GapDropZoneProps, type LayoutContextState, LayoutProvider, type LayoutStateDictionary, useLayoutContext };