npm - @fluid-app/rep-widgets - Versions diffs - 0.1.7 → 0.1.9 - Mend

@fluid-app/rep-widgets 0.1.7 → 0.1.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (214) hide show

package/dist/{chunk-VDHV7FEJ.cjs.map → chunk-RPNLSRUS.cjs.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../src/widgets/LayoutWidget.tsx"],"names":["useRegistry","useScreenRenderer","ScreenRenderer","sectionLayoutConfig","gapValues","jsx","groupChildrenByColumn","getGapField","getPaddingField","getBorderRadiusField"],"mappings":"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","file":"chunk-~~VDHV7FEJ~~.cjs","sourcesContent":["import { ScreenRenderer as DefaultScreenRenderer } from \"../core/ScreenRenderer\";\nimport { useRegistry } from \"../contexts/RegistryContext\";\nimport { useScreenRenderer } from \"../contexts/ScreenRendererContext\";\nimport type {\n TypedWidgetSchema,\n WidgetSchema,\n BorderRadiusOptions,\n PaddingOptions,\n GapOptions,\n SectionLayoutType,\n BackgroundValue,\n} from \"@fluid-app/rep-core/types\";\nimport { sectionLayoutConfig } from \"@fluid-app/rep-core/types\";\nimport type { ComponentType } from \"react\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getGapField,\n getPaddingField,\n gapValues,\n} from \"../core/fields\";\nimport { groupChildrenByColumn } from \"@fluid-app/rep-core/widget-utils\";\n\nconst DEFAULT_BACKGROUND: BackgroundValue = {\n type: \"solid\",\n color: \"background\",\n};\nconst DEFAULT_CHILDREN: (WidgetSchema \| null)[] = [];\n\ntype LayoutProps<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n T extends Record<string, ComponentType<any>> = Record<\n string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ComponentType<any>\n >,\n> = {\n // Section layout type (masonry-style column configuration)\n sectionLayout?: SectionLayoutType;\n\n // Legacy props (deprecated, kept for backward compatibility)\n type?: \"flex\" \| \"grid\";\n columns?: number;\n rows?: number;\n direction?: string;\n justify?: string;\n align?: string;\n wrap?: boolean;\n\n // Spacing\n gap?: number; // deprecated, use gapSize instead\n gapSize?: GapOptions;\n\n // Design\n background?: BackgroundValue;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n\n // Content - widgets with columnIndex property for masonry layout\n children: (TypedWidgetSchema<T> \| null)[] \| (WidgetSchema \| null)[];\n\n // Widget registry (passed down from parent renderer)\n registry?: T;\n\n // Styling\n className?: string;\n minHeight?: number;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutWidget = <T extends Record<string, ComponentType<any>>>({\n sectionLayout = \"single-column\",\n gap = 4,\n gapSize,\n background = DEFAULT_BACKGROUND,\n padding = 0,\n borderRadius = \"md\",\n children = DEFAULT_CHILDREN,\n registry,\n className = \"\",\n minHeight,\n}: LayoutProps<T>) => {\n // Get registry from context if not provided as prop\n const contextRegistry = useRegistry();\n const effectiveRegistry = registry \|\| contextRegistry;\n\n // Use ScreenRenderer from context (e.g. rep-builder's), fall back to local\n const ContextScreenRenderer = useScreenRenderer();\n const ScreenRenderer = ContextScreenRenderer ?? DefaultScreenRenderer;\n\n // Extract background values\n const backgroundColor = background.color \|\| \"background\";\n const backgroundImage =\n (background.resource?.image_url \|\| background.resource?.imageUrl) &&\n background.type === \"image\"\n ? `url(${background.resource.image_url \|\| background.resource.imageUrl})`\n : \"none\";\n\n // Get layout configuration\n const layoutConfig = sectionLayoutConfig[sectionLayout];\n const columnCount = layoutConfig.columns;\n\n // Calculate gap size\n const gapSizeValue = gapSize ? gapValues[gapSize] : gap;\n\n // Build CSS classes for masonry layout with responsive columns\n const layoutClasses = [\n \"grid\",\n \"grid-cols-1\", // Mobile: single column\n layoutConfig.gridClasses, // Desktop (@md+): configured columns\n `bg-${backgroundColor} p-${padding} rounded-${borderRadius}`,\n `gap-${gapSizeValue}`,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n // Container style\n const containerStyle: React.CSSProperties = {\n ...(minHeight ? { minHeight: `${minHeight}px` } : {}),\n alignItems: \"start\", // Masonry-style: columns don't stretch to match height\n backgroundImage,\n };\n\n // If no registry is available, we can't render the children\n if (!effectiveRegistry) {\n console.warn(\"Layout widget: No registry provided, cannot render children\");\n return <div className={layoutClasses} style={containerStyle} />;\n }\n\n // Group children by column\n const columnGroups = groupChildrenByColumn(\n children as WidgetSchema[],\n columnCount,\n );\n\n // Regular render mode - render each column as a flex column\n return (\n <div className=\"@container\">\n <div className={layoutClasses} style={containerStyle}>\n {columnGroups.map((columnChildren, colIndex) => (\n <ScreenRenderer\n key={colIndex}\n screen={columnChildren}\n registry={effectiveRegistry}\n className={`flex flex-col gap-${gapSizeValue}`}\n />\n ))}\n </div>\n </div>\n );\n};\n\nexport const layoutWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"LayoutWidget\",\n displayName: \"Layout\",\n fields: [\n // Layout Configuration - Visual selector matching Figma design\n {\n key: \"sectionLayout\",\n label: \"Layout Type\",\n type: \"sectionLayoutSelect\",\n description: \"Column layout configuration\",\n defaultValue: \"single-column\",\n group: \"Layout\",\n },\n\n // Design\n getGapField({\n key: \"gapSize\",\n label: \"Gap\",\n description: \"Gap between columns and widgets\",\n defaultValue: \"md\",\n group: \"Design\",\n }),\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the layout container\",\n defaultValue: \"background\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding for the layout container\",\n defaultValue: 4,\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the layout container\",\n defaultValue: \"md\",\n group: \"Design\",\n }),\n ],\n};\n"]}
1	+ {"version":3,"sources":["../src/widgets/LayoutWidget.tsx"],"names":["useRegistry","useScreenRenderer","ScreenRenderer","sectionLayoutConfig","gapValues","jsx","groupChildrenByColumn","getGapField","getPaddingField","getBorderRadiusField"],"mappings":"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","file":"chunk-RPNLSRUS.cjs","sourcesContent":["import { ScreenRenderer as DefaultScreenRenderer } from \"../core/ScreenRenderer\";\nimport { useRegistry } from \"../contexts/RegistryContext\";\nimport { useScreenRenderer } from \"../contexts/ScreenRendererContext\";\nimport type {\n TypedWidgetSchema,\n WidgetSchema,\n BorderRadiusOptions,\n PaddingOptions,\n GapOptions,\n SectionLayoutType,\n BackgroundValue,\n} from \"@fluid-app/rep-core/types\";\nimport { sectionLayoutConfig } from \"@fluid-app/rep-core/types\";\nimport type { ComponentType } from \"react\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getGapField,\n getPaddingField,\n gapValues,\n} from \"../core/fields\";\nimport { groupChildrenByColumn } from \"@fluid-app/rep-core/widget-utils\";\n\nconst DEFAULT_BACKGROUND: BackgroundValue = {\n type: \"solid\",\n color: \"background\",\n};\nconst DEFAULT_CHILDREN: (WidgetSchema \| null)[] = [];\n\ntype LayoutProps<\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n T extends Record<string, ComponentType<any>> = Record<\n string,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n ComponentType<any>\n >,\n> = {\n // Section layout type (masonry-style column configuration)\n sectionLayout?: SectionLayoutType;\n\n // Legacy props (deprecated, kept for backward compatibility)\n type?: \"flex\" \| \"grid\";\n columns?: number;\n rows?: number;\n direction?: string;\n justify?: string;\n align?: string;\n wrap?: boolean;\n\n // Spacing\n gap?: number; // deprecated, use gapSize instead\n gapSize?: GapOptions;\n\n // Design\n background?: BackgroundValue;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n\n // Content - widgets with columnIndex property for masonry layout\n children: (TypedWidgetSchema<T> \| null)[] \| (WidgetSchema \| null)[];\n\n // Widget registry (passed down from parent renderer)\n registry?: T;\n\n // Styling\n className?: string;\n minHeight?: number;\n};\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport const LayoutWidget = <T extends Record<string, ComponentType<any>>>({\n sectionLayout = \"single-column\",\n gap = 4,\n gapSize,\n background = DEFAULT_BACKGROUND,\n padding = 0,\n borderRadius = \"md\",\n children = DEFAULT_CHILDREN,\n registry,\n className = \"\",\n minHeight,\n}: LayoutProps<T>) => {\n // Get registry from context if not provided as prop\n const contextRegistry = useRegistry();\n const effectiveRegistry = registry \|\| contextRegistry;\n\n // Use ScreenRenderer from context (e.g. rep-builder's), fall back to local\n const ContextScreenRenderer = useScreenRenderer();\n const ScreenRenderer = ContextScreenRenderer ?? DefaultScreenRenderer;\n\n // Extract background values\n const backgroundColor = background.color \|\| \"background\";\n const backgroundImage =\n (background.resource?.image_url \|\| background.resource?.imageUrl) &&\n background.type === \"image\"\n ? `url(${background.resource.image_url \|\| background.resource.imageUrl})`\n : \"none\";\n\n // Get layout configuration\n const layoutConfig = sectionLayoutConfig[sectionLayout];\n const columnCount = layoutConfig.columns;\n\n // Calculate gap size\n const gapSizeValue = gapSize ? gapValues[gapSize] : gap;\n\n // Build CSS classes for masonry layout with responsive columns\n const layoutClasses = [\n \"grid\",\n \"grid-cols-1\", // Mobile: single column\n layoutConfig.gridClasses, // Desktop (@md+): configured columns\n `bg-${backgroundColor} p-${padding} rounded-${borderRadius}`,\n `gap-${gapSizeValue}`,\n className,\n ]\n .filter(Boolean)\n .join(\" \");\n\n // Container style\n const containerStyle: React.CSSProperties = {\n ...(minHeight ? { minHeight: `${minHeight}px` } : {}),\n alignItems: \"start\", // Masonry-style: columns don't stretch to match height\n backgroundImage,\n };\n\n // If no registry is available, we can't render the children\n if (!effectiveRegistry) {\n console.warn(\"Layout widget: No registry provided, cannot render children\");\n return <div className={layoutClasses} style={containerStyle} />;\n }\n\n // Group children by column\n const columnGroups = groupChildrenByColumn(\n children as WidgetSchema[],\n columnCount,\n );\n\n // Regular render mode - render each column as a flex column\n return (\n <div className=\"@container\">\n <div className={layoutClasses} style={containerStyle}>\n {columnGroups.map((columnChildren, colIndex) => (\n <ScreenRenderer\n key={colIndex}\n screen={columnChildren}\n registry={effectiveRegistry}\n className={`flex flex-col gap-${gapSizeValue}`}\n />\n ))}\n </div>\n </div>\n );\n};\n\nexport const layoutWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"LayoutWidget\",\n displayName: \"Layout\",\n fields: [\n // Layout Configuration - Visual selector matching Figma design\n {\n key: \"sectionLayout\",\n label: \"Layout Type\",\n type: \"sectionLayoutSelect\",\n description: \"Column layout configuration\",\n defaultValue: \"single-column\",\n group: \"Layout\",\n },\n\n // Design\n getGapField({\n key: \"gapSize\",\n label: \"Gap\",\n description: \"Gap between columns and widgets\",\n defaultValue: \"md\",\n group: \"Design\",\n }),\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the layout container\",\n defaultValue: \"background\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding for the layout container\",\n defaultValue: 4,\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the layout container\",\n defaultValue: \"md\",\n group: \"Design\",\n }),\n ],\n};\n"]}