@fluid-app/rep-widgets 0.1.18 → 0.1.20
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.
- package/dist/AlertWidget-CiMRJYmn.mjs.map +1 -1
- package/dist/AlertWidget-DU_HP0EW.cjs.map +1 -1
- package/dist/CalendarWidget-DshBk5tG.mjs.map +1 -1
- package/dist/CalendarWidget-s7KgQ5JD.cjs.map +1 -1
- package/dist/CarouselWidget-0RP-Rd1D.mjs.map +1 -1
- package/dist/CarouselWidget-DLADgLPJ.cjs.map +1 -1
- package/dist/CatchUpWidget-CUnCumIf.mjs.map +1 -1
- package/dist/CatchUpWidget-DiqdwPvE.cjs.map +1 -1
- package/dist/ChartWidget-DhAVW8w4.cjs.map +1 -1
- package/dist/ChartWidget-DrF1e1sy.mjs.map +1 -1
- package/dist/ContainerWidget-8FdPHgLz.cjs +2 -0
- package/dist/{ContainerWidget-Cp0_vPZB.cjs → ContainerWidget-BTKOl5XX.cjs} +3 -13
- package/dist/ContainerWidget-BTKOl5XX.cjs.map +1 -0
- package/dist/ContainerWidget-Xd231yys.mjs.map +1 -1
- package/dist/{EmbedWidget-BQyYm50g.cjs → EmbedWidget-Cfv65pBr.cjs} +1 -1
- package/dist/EmbedWidget-Cfv65pBr.cjs.map +1 -0
- package/dist/EmbedWidget-DQ2rCA4j.mjs.map +1 -1
- package/dist/{ImageWidget-DTwM7xCz.cjs → ImageWidget-BXkjWEEn.cjs} +1 -1
- package/dist/ImageWidget-BXkjWEEn.cjs.map +1 -0
- package/dist/ImageWidget-DBBul7ca.mjs.map +1 -1
- package/dist/LayoutWidget-B1itwSsn.mjs.map +1 -1
- package/dist/{LayoutWidget-CWE_9JB5.cjs → LayoutWidget-BVv--tp3.cjs} +5 -15
- package/dist/LayoutWidget-BVv--tp3.cjs.map +1 -0
- package/dist/LayoutWidget-BsOPpmVb.cjs +2 -0
- package/dist/{ListWidget-CxaLm0D5.cjs → ListWidget-ByLHcRHL.cjs} +1 -1
- package/dist/ListWidget-ByLHcRHL.cjs.map +1 -0
- package/dist/ListWidget-EXPlzfUE.mjs.map +1 -1
- package/dist/MediaRenderer-CcJvyOJ1.cjs.map +1 -1
- package/dist/MediaRenderer-Uq90PZcY.mjs.map +1 -1
- package/dist/MySiteWidget-BTyb5AJM.mjs.map +1 -1
- package/dist/{MySiteWidget-iRPl6b2F.cjs → MySiteWidget-DrUI7OTT.cjs} +1 -1
- package/dist/MySiteWidget-DrUI7OTT.cjs.map +1 -0
- package/dist/{NestedWidget-DavPMVii.cjs → NestedWidget-CbuuxK7U.cjs} +1 -1
- package/dist/NestedWidget-CbuuxK7U.cjs.map +1 -0
- package/dist/NestedWidget-CwyVsZ-f.mjs.map +1 -1
- package/dist/QuickShareWidget-BUbuTQFQ.mjs.map +1 -1
- package/dist/{QuickShareWidget-BIOkquPG.cjs → QuickShareWidget-DjhPbMsy.cjs} +1 -1
- package/dist/QuickShareWidget-DjhPbMsy.cjs.map +1 -0
- package/dist/{RecentActivityWidget-u1zCrwGF.cjs → RecentActivityWidget-BPs8xmPD.cjs} +1 -1
- package/dist/RecentActivityWidget-BPs8xmPD.cjs.map +1 -0
- package/dist/RecentActivityWidget-CxEgRz3c.mjs.map +1 -1
- package/dist/RegistryContext-CscXrsRa.mjs.map +1 -1
- package/dist/{RegistryContext-6KXd4t6d.cjs → RegistryContext-xjea4xVV.cjs} +3 -2
- package/dist/RegistryContext-xjea4xVV.cjs.map +1 -0
- package/dist/{ScreenRenderer-BCd4Rsba.cjs → ScreenRenderer-B-nGFObe.cjs} +2 -2
- package/dist/ScreenRenderer-B-nGFObe.cjs.map +1 -0
- package/dist/ScreenRenderer-CVJMpQ9A.mjs.map +1 -1
- package/dist/{ScreenRendererContext-D62_Fazh.cjs → ScreenRendererContext-B660JoZO.cjs} +3 -2
- package/dist/ScreenRendererContext-B660JoZO.cjs.map +1 -0
- package/dist/ScreenRendererContext-DaldtZnX.mjs.map +1 -1
- package/dist/SpacerWidget-Bs18KYH9.mjs.map +1 -1
- package/dist/{SpacerWidget-D-Foe9wG.cjs → SpacerWidget-DGccATXA.cjs} +1 -1
- package/dist/SpacerWidget-DGccATXA.cjs.map +1 -0
- package/dist/TableWidget-Cc4kQaOE.mjs.map +1 -1
- package/dist/{TableWidget-BeG92tkU.cjs → TableWidget-GSCLhWDu.cjs} +1 -1
- package/dist/TableWidget-GSCLhWDu.cjs.map +1 -0
- package/dist/TextWidget-CQxOWNZK.mjs.map +1 -1
- package/dist/TextWidget-Cn7-yZGk.cjs.map +1 -1
- package/dist/ToDoWidget--KBpHqbA.mjs.map +1 -1
- package/dist/{ToDoWidget-CK87BavM.cjs → ToDoWidget-B4Lrb4FT.cjs} +1 -1
- package/dist/ToDoWidget-B4Lrb4FT.cjs.map +1 -0
- package/dist/{VideoWidget-DxuqyD5L.cjs → VideoWidget-CiydQ4xO.cjs} +1 -1
- package/dist/VideoWidget-CiydQ4xO.cjs.map +1 -0
- package/dist/VideoWidget-uKkRf5pm.mjs.map +1 -1
- package/dist/components/index.cjs.map +1 -1
- package/dist/components/index.d.cts +2 -2
- package/dist/components/index.d.cts.map +1 -1
- package/dist/components/index.d.mts +2 -2
- package/dist/components/index.d.mts.map +1 -1
- package/dist/components/index.mjs.map +1 -1
- package/dist/contexts/index.cjs +2 -2
- package/dist/contexts/index.d.cts +40 -42
- package/dist/contexts/index.d.cts.map +1 -1
- package/dist/contexts/index.d.mts +40 -42
- package/dist/contexts/index.d.mts.map +1 -1
- package/dist/core/index.cjs +1 -1
- package/dist/core/index.d.cts +30 -31
- package/dist/core/index.d.cts.map +1 -1
- package/dist/core/index.d.mts +30 -31
- package/dist/core/index.d.mts.map +1 -1
- package/dist/error-state-DErSxZwH.mjs.map +1 -1
- package/dist/error-state-DSzVUtEl.cjs.map +1 -1
- package/dist/scroll-arrows-BZIlsE_x.cjs.map +1 -1
- package/dist/scroll-arrows-BevCYRNT.mjs.map +1 -1
- package/dist/ui/index.d.cts +2 -2
- package/dist/ui/index.d.cts.map +1 -1
- package/dist/ui/index.d.mts +2 -2
- package/dist/ui/index.d.mts.map +1 -1
- package/dist/widgets/index.cjs +26 -26
- package/dist/widgets/index.cjs.map +1 -1
- package/dist/widgets/index.d.cts +53 -256
- package/dist/widgets/index.d.cts.map +1 -1
- package/dist/widgets/index.d.mts +53 -256
- package/dist/widgets/index.d.mts.map +1 -1
- package/dist/widgets/index.mjs.map +1 -1
- package/package.json +6 -6
- package/{styles → src/styles}/globals.css +4 -2
- package/src/styles/index.ts +1 -0
- package/dist/ContainerWidget-Cp0_vPZB.cjs.map +0 -1
- package/dist/EmbedWidget-BQyYm50g.cjs.map +0 -1
- package/dist/ImageWidget-DTwM7xCz.cjs.map +0 -1
- package/dist/LayoutWidget-CWE_9JB5.cjs.map +0 -1
- package/dist/ListWidget-CxaLm0D5.cjs.map +0 -1
- package/dist/MySiteWidget-iRPl6b2F.cjs.map +0 -1
- package/dist/NestedWidget-DavPMVii.cjs.map +0 -1
- package/dist/QuickShareWidget-BIOkquPG.cjs.map +0 -1
- package/dist/RecentActivityWidget-u1zCrwGF.cjs.map +0 -1
- package/dist/RegistryContext-6KXd4t6d.cjs.map +0 -1
- package/dist/ScreenRenderer-BCd4Rsba.cjs.map +0 -1
- package/dist/ScreenRendererContext-D62_Fazh.cjs.map +0 -1
- package/dist/SpacerWidget-D-Foe9wG.cjs.map +0 -1
- package/dist/TableWidget-BeG92tkU.cjs.map +0 -1
- package/dist/ToDoWidget-CK87BavM.cjs.map +0 -1
- package/dist/VideoWidget-DxuqyD5L.cjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextWidget-Cn7-yZGk.cjs","names":[],"sources":["../src/widgets/TextWidget.tsx"],"sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n} from \"../core/fields\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\n\ntype TextWidgetProps = ComponentProps<\"div\"> & {\n // Title\n titleEnabled?: boolean;\n title?: string;\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n\n // Description\n description?: string;\n descriptionFontSize?: FontSizeOptions;\n descriptionColor?: ColorOptions;\n\n // Styling\n background?: BackgroundValue;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n};\n\nexport function TextWidget({\n titleEnabled = true,\n title = \"Text Widget\",\n titleFontSize = \"xl\",\n titleColor = \"foreground\",\n description = \"This is a text widget\",\n descriptionFontSize = \"md\",\n descriptionColor = \"foreground\",\n background = {\n type: \"solid\",\n color: \"background\",\n },\n padding = 4,\n borderRadius = \"md\",\n className,\n ...props\n}: TextWidgetProps) {\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 return (\n <div\n className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? \"\"}`}\n style={{ backgroundImage }}\n {...props}\n >\n {titleEnabled && (\n <h2 className={`text-${titleFontSize} text-${titleColor} font-bold`}>\n {title}\n </h2>\n )}\n <p className={`text-${descriptionFontSize} text-${descriptionColor}`}>\n {description}\n </p>\n </div>\n );\n}\n\nexport const textWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"TextWidget\",\n displayName: \"Text Widget\",\n tabsConfig: [{ id: \"content\", label: \"Content\" }],\n dataSourceTargetProps: [\"title\", \"description\"],\n fields: [\n // Content Tab - Title Group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the title displayed above the text\",\n defaultValue: true,\n tab: \"content\",\n group: \"Title\",\n },\n {\n key: \"title\",\n label: \"Title\",\n type: \"text\",\n description: \"The title\",\n defaultValue: \"Heads up!\",\n tab: \"content\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n key: \"titleFontSize\",\n label: \"Title Font Size\",\n description: \"Font size for the title\",\n defaultValue: \"xl\",\n tab: \"content\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"The color of the title\",\n defaultValue: \"foreground\",\n tab: \"content\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n // Content Tab - Description Group\n {\n key: \"description\",\n label: \"Description\",\n type: \"textarea\",\n description: \"The text message\",\n rows: 3,\n defaultValue:\n \"You can add components and dependencies to your app using the cli.\",\n tab: \"content\",\n group: \"Description\",\n },\n getFontSizeField({\n key: \"descriptionFontSize\",\n label: \"Description Font Size\",\n description: \"Font size for the text\",\n defaultValue: \"md\",\n tab: \"content\",\n group: \"Description\",\n }),\n getColorField({\n key: \"descriptionColor\",\n label: \"Description Color\",\n description: \"The color of the text\",\n defaultValue: \"foreground\",\n tab: \"content\",\n group: \"Description\",\n }),\n // Content Tab - Style Group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the text container\",\n defaultValue: \"background\",\n tab: \"content\",\n group: \"Style\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"The padding of the text container\",\n defaultValue: 4,\n tab: \"content\",\n group: \"Style\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n description: \"The border radius of the text container\",\n label: \"Border Radius\",\n tab: \"content\",\n group: \"Style\",\n }),\n ],\n};\n"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"TextWidget-Cn7-yZGk.cjs","names":[],"sources":["../src/widgets/TextWidget.tsx"],"sourcesContent":["import type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n} from \"../core/fields\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\n\ntype TextWidgetProps = ComponentProps<\"div\"> & {\n // Title\n titleEnabled?: boolean;\n title?: string;\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n\n // Description\n description?: string;\n descriptionFontSize?: FontSizeOptions;\n descriptionColor?: ColorOptions;\n\n // Styling\n background?: BackgroundValue;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n};\n\nexport function TextWidget({\n titleEnabled = true,\n title = \"Text Widget\",\n titleFontSize = \"xl\",\n titleColor = \"foreground\",\n description = \"This is a text widget\",\n descriptionFontSize = \"md\",\n descriptionColor = \"foreground\",\n background = {\n type: \"solid\",\n color: \"background\",\n },\n padding = 4,\n borderRadius = \"md\",\n className,\n ...props\n}: TextWidgetProps): React.JSX.Element {\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 return (\n <div\n className={`bg-${backgroundColor} p-${padding} rounded-${borderRadius} ${className ?? \"\"}`}\n style={{ backgroundImage }}\n {...props}\n >\n {titleEnabled && (\n <h2 className={`text-${titleFontSize} text-${titleColor} font-bold`}>\n {title}\n </h2>\n )}\n <p className={`text-${descriptionFontSize} text-${descriptionColor}`}>\n {description}\n </p>\n </div>\n );\n}\n\nexport const textWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"TextWidget\",\n displayName: \"Text Widget\",\n tabsConfig: [{ id: \"content\", label: \"Content\" }],\n dataSourceTargetProps: [\"title\", \"description\"],\n fields: [\n // Content Tab - Title Group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the title displayed above the text\",\n defaultValue: true,\n tab: \"content\",\n group: \"Title\",\n },\n {\n key: \"title\",\n label: \"Title\",\n type: \"text\",\n description: \"The title\",\n defaultValue: \"Heads up!\",\n tab: \"content\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n key: \"titleFontSize\",\n label: \"Title Font Size\",\n description: \"Font size for the title\",\n defaultValue: \"xl\",\n tab: \"content\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"The color of the title\",\n defaultValue: \"foreground\",\n tab: \"content\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n // Content Tab - Description Group\n {\n key: \"description\",\n label: \"Description\",\n type: \"textarea\",\n description: \"The text message\",\n rows: 3,\n defaultValue:\n \"You can add components and dependencies to your app using the cli.\",\n tab: \"content\",\n group: \"Description\",\n },\n getFontSizeField({\n key: \"descriptionFontSize\",\n label: \"Description Font Size\",\n description: \"Font size for the text\",\n defaultValue: \"md\",\n tab: \"content\",\n group: \"Description\",\n }),\n getColorField({\n key: \"descriptionColor\",\n label: \"Description Color\",\n description: \"The color of the text\",\n defaultValue: \"foreground\",\n tab: \"content\",\n group: \"Description\",\n }),\n // Content Tab - Style Group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the text container\",\n defaultValue: \"background\",\n tab: \"content\",\n group: \"Style\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"The padding of the text container\",\n defaultValue: 4,\n tab: \"content\",\n group: \"Style\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n description: \"The border radius of the text container\",\n label: \"Border Radius\",\n tab: \"content\",\n group: \"Style\",\n }),\n ],\n};\n"],"mappings":";;;;;;;;AAmCA,SAAgB,WAAW,EACzB,eAAe,MACf,QAAQ,eACR,gBAAgB,MAChB,aAAa,cACb,cAAc,yBACd,sBAAsB,MACtB,mBAAmB,cACnB,aAAa;CACX,MAAM;CACN,OAAO;CACR,EACD,UAAU,GACV,eAAe,MACf,WACA,GAAG,SACkC;CACrC,MAAM,kBAAkB,WAAW,SAAS;CAC5C,MAAM,mBACH,WAAW,UAAU,aAAa,WAAW,UAAU,aACxD,WAAW,SAAS,UAChB,OAAO,WAAW,SAAS,aAAa,WAAW,SAAS,SAAS,KACrE;AACN,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,WAAW,MAAM,gBAAgB,KAAK,QAAQ,WAAW,aAAa,GAAG,aAAa;EACtF,OAAO,EAAE,iBAAiB;EAC1B,GAAI;YAHN,CAKG,gBACC,iBAAA,GAAA,kBAAA,KAAC,MAAD;GAAI,WAAW,QAAQ,cAAc,QAAQ,WAAW;aACrD;GACE,CAAA,EAEP,iBAAA,GAAA,kBAAA,KAAC,KAAD;GAAG,WAAW,QAAQ,oBAAoB,QAAQ;aAC/C;GACC,CAAA,CACA;;;AAIV,MAAa,2BAAiD;CAC5D,YAAY;CACZ,aAAa;CACb,YAAY,CAAC;EAAE,IAAI;EAAW,OAAO;EAAW,CAAC;CACjD,uBAAuB,CAAC,SAAS,cAAc;CAC/C,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;uDACgB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAEF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,MAAM;GACN,cACE;GACF,KAAK;GACL,OAAO;GACR;uDACgB;GACf,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EAEF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,aAAa;GACb,OAAO;GACP,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToDoWidget--KBpHqbA.mjs","names":[],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n const d = new Date(now);\n d.setDate(d.getDate() + days);\n return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n {\n id: 1,\n body: \"Send follow-up email to new leads\",\n dueAt: daysFromNow(1),\n completedAt: null,\n createdAt: daysFromNow(-2),\n contactName: \"Sarah Johnson\",\n },\n {\n id: 2,\n body: \"Prepare slides for team training\",\n dueAt: daysFromNow(3),\n completedAt: null,\n createdAt: daysFromNow(-1),\n contactName: null,\n },\n {\n id: 3,\n body: \"Review monthly sales report\",\n dueAt: daysFromNow(-1),\n completedAt: null,\n createdAt: daysFromNow(-5),\n contactName: \"Mike Chen\",\n },\n];\n","import { useQuery } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/rep-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos() {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"rep-widget-use\",\n \"todos\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<Todo[]> => {\n const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\n const response = await fetch(url, {\n headers: {\n \"content-type\": \"application/json\",\n ...getApiHeaders?.(),\n },\n signal,\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch todos: ${response.status}`);\n }\n\n const data: ApiTodo[] = await response.json();\n return transformTodos(data);\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n return rawData.map((todo) => ({\n id: todo.id,\n body: todo.body,\n dueAt: todo.due_at,\n completedAt: todo.completed_at,\n createdAt: todo.created_at,\n contactName: todo.contact\n ? `${todo.contact.first_name} ${todo.contact.last_name}`\n : null,\n }));\n}\n","import type { ComponentProps } from \"react\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n} from \"../core/fields\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = ComponentProps<\"div\"> & {\n // Title\n titleEnabled?: boolean;\n titleText?: string;\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n\n // Styling\n background?: BackgroundValue;\n textColor?: ColorOptions;\n accentColor?: ColorOptions;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n\n // Content\n maxItems?: number;\n};\n\nexport function ToDoWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"To-Do\",\n titleFontSize = \"lg\",\n titleColor = \"foreground\",\n\n // Styling defaults\n background = {\n type: \"solid\",\n color: \"background\",\n },\n textColor = \"foreground\",\n accentColor = \"primary\",\n padding = 4,\n borderRadius = \"md\",\n\n // Content defaults\n maxItems = 5,\n\n className,\n ...props\n}: ToDoWidgetProps) {\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 const { data: todos = [], isLoading, isError } = useTodos();\n\n // Use API data if available, otherwise fall back to demo data\n const displayTodos = todos.length > 0 ? todos : [];\n\n // Filter out completed tasks\n const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n const todosToShow = activeTodos.slice(0, maxItems);\n const remainingCount = activeTodos.length - todosToShow.length;\n const isEmpty = activeTodos.length === 0;\n\n return (\n <div\n className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n style={{ backgroundImage }}\n {...props}\n >\n {/* Header */}\n <div className=\"mb-3 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n {titleEnabled && titleText && (\n <h2\n className={`text-${titleFontSize} font-bold text-${titleColor}`}\n >\n {titleText}\n </h2>\n )}\n </div>\n <div className=\"flex items-center gap-2\">\n {!isEmpty && !isLoading && (\n <span className={`text-2xl font-bold text-${accentColor}`}>\n {activeTodos.length}\n </span>\n )}\n <div\n className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n >\n <FontAwesomeIcon\n icon={faListCheck}\n className={`h-5 w-5 text-${accentColor}-foreground`}\n />\n </div>\n </div>\n </div>\n\n {/* Loading state */}\n {isLoading ? (\n <div className=\"flex min-h-[120px] items-center justify-center\">\n <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n </div>\n ) : isError ? (\n /* Error state */\n <ErrorState />\n ) : isEmpty ? (\n /* Empty state */\n <div className=\"flex flex-col items-center justify-center py-8\">\n <p className={`text-center text-${textColor}/60`}>\n You've got nothing else To-Do!\n </p>\n </div>\n ) : (\n /* Todo List */\n <>\n <div className=\"flex flex-col\">\n {todosToShow.map((todo, index) => (\n <div\n key={todo.id}\n className={`flex items-center gap-3 py-2.5 ${\n index !== todosToShow.length - 1\n ? `border-b border-${textColor}/10`\n : \"\"\n }`}\n >\n <input\n type=\"checkbox\"\n className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n checked={!!todo.completedAt}\n readOnly\n />\n <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n </div>\n ))}\n </div>\n\n {/* Footer */}\n <div className=\"mt-2 flex items-center justify-between\">\n {remainingCount > 0 && (\n <span className={`text-sm text-${textColor}/50 underline`}>\n {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n </span>\n )}\n <div className=\"ml-auto\">\n <FontAwesomeIcon\n icon={faPlus}\n className={`h-5 w-5 text-${textColor}/50`}\n />\n </div>\n </div>\n </>\n )}\n </div>\n );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"ToDoWidget\",\n displayName: \"To-Do Widget\",\n tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n fields: [\n // Styling Tab - Title Group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the title displayed above the todo list\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"titleText\",\n label: \"Title\",\n type: \"text\",\n description: \"Title text displayed above the todo list\",\n defaultValue: \"To-Do\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n key: \"titleFontSize\",\n label: \"Title Font Size\",\n description: \"Font size for the widget title\",\n defaultValue: \"xl\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color for the widget title\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n\n // Styling Tab - Design Group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the widget container\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Default text color for todo items\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getColorField({\n key: \"accentColor\",\n label: \"Accent Color\",\n description: \"Color used for count badge and icon\",\n defaultValue: \"primary\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"maxItems\",\n label: \"Max Items\",\n type: \"number\",\n description: \"Maximum number of todo items to display\",\n min: 1,\n max: 20,\n step: 1,\n defaultValue: 5,\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding around the widget container\",\n defaultValue: 4,\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the widget container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ToDoWidget--KBpHqbA.mjs","names":[],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n const d = new Date(now);\n d.setDate(d.getDate() + days);\n return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n {\n id: 1,\n body: \"Send follow-up email to new leads\",\n dueAt: daysFromNow(1),\n completedAt: null,\n createdAt: daysFromNow(-2),\n contactName: \"Sarah Johnson\",\n },\n {\n id: 2,\n body: \"Prepare slides for team training\",\n dueAt: daysFromNow(3),\n completedAt: null,\n createdAt: daysFromNow(-1),\n contactName: null,\n },\n {\n id: 3,\n body: \"Review monthly sales report\",\n dueAt: daysFromNow(-1),\n completedAt: null,\n createdAt: daysFromNow(-5),\n contactName: \"Mike Chen\",\n },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/rep-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos(): UseQueryResult<Todo[], Error> {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"rep-widget-use\",\n \"todos\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<Todo[]> => {\n const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\n const response = await fetch(url, {\n headers: {\n \"content-type\": \"application/json\",\n ...getApiHeaders?.(),\n },\n signal,\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch todos: ${response.status}`);\n }\n\n const data: ApiTodo[] = await response.json();\n return transformTodos(data);\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n return rawData.map((todo) => ({\n id: todo.id,\n body: todo.body,\n dueAt: todo.due_at,\n completedAt: todo.completed_at,\n createdAt: todo.created_at,\n contactName: todo.contact\n ? `${todo.contact.first_name} ${todo.contact.last_name}`\n : null,\n }));\n}\n","import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n} from \"../core/fields\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = ComponentProps<\"div\"> & {\n // Title\n titleEnabled?: boolean;\n titleText?: string;\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n\n // Styling\n background?: BackgroundValue;\n textColor?: ColorOptions;\n accentColor?: ColorOptions;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n\n // Content\n maxItems?: number;\n};\n\nexport function ToDoWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"To-Do\",\n titleFontSize = \"lg\",\n titleColor = \"foreground\",\n\n // Styling defaults\n background = {\n type: \"solid\",\n color: \"background\",\n },\n textColor = \"foreground\",\n accentColor = \"primary\",\n padding = 4,\n borderRadius = \"md\",\n\n // Content defaults\n maxItems = 5,\n\n className,\n ...props\n}: ToDoWidgetProps): React.JSX.Element {\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 const { data: todos = [], isLoading, isError } = useTodos();\n\n // Use API data if available, otherwise fall back to demo data\n const displayTodos = todos.length > 0 ? todos : [];\n\n // Filter out completed tasks\n const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n const todosToShow = activeTodos.slice(0, maxItems);\n const remainingCount = activeTodos.length - todosToShow.length;\n const isEmpty = activeTodos.length === 0;\n\n return (\n <div\n className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n style={{ backgroundImage }}\n {...props}\n >\n {/* Header */}\n <div className=\"mb-3 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n {titleEnabled && titleText && (\n <h2\n className={`text-${titleFontSize} font-bold text-${titleColor}`}\n >\n {titleText}\n </h2>\n )}\n </div>\n <div className=\"flex items-center gap-2\">\n {!isEmpty && !isLoading && (\n <span className={`text-2xl font-bold text-${accentColor}`}>\n {activeTodos.length}\n </span>\n )}\n <div\n className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n >\n <FontAwesomeIcon\n icon={faListCheck}\n className={`h-5 w-5 text-${accentColor}-foreground`}\n />\n </div>\n </div>\n </div>\n\n {/* Loading state */}\n {isLoading ? (\n <div className=\"flex min-h-[120px] items-center justify-center\">\n <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n </div>\n ) : isError ? (\n /* Error state */\n <ErrorState />\n ) : isEmpty ? (\n /* Empty state */\n <div className=\"flex flex-col items-center justify-center py-8\">\n <p className={`text-center text-${textColor}/60`}>\n You've got nothing else To-Do!\n </p>\n </div>\n ) : (\n /* Todo List */\n <>\n <div className=\"flex flex-col\">\n {todosToShow.map((todo, index) => (\n <div\n key={todo.id}\n className={`flex items-center gap-3 py-2.5 ${\n index !== todosToShow.length - 1\n ? `border-b border-${textColor}/10`\n : \"\"\n }`}\n >\n <input\n type=\"checkbox\"\n className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n checked={!!todo.completedAt}\n readOnly\n />\n <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n </div>\n ))}\n </div>\n\n {/* Footer */}\n <div className=\"mt-2 flex items-center justify-between\">\n {remainingCount > 0 && (\n <span className={`text-sm text-${textColor}/50 underline`}>\n {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n </span>\n )}\n <div className=\"ml-auto\">\n <FontAwesomeIcon\n icon={faPlus}\n className={`h-5 w-5 text-${textColor}/50`}\n />\n </div>\n </div>\n </>\n )}\n </div>\n );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"ToDoWidget\",\n displayName: \"To-Do Widget\",\n tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n fields: [\n // Styling Tab - Title Group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the title displayed above the todo list\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"titleText\",\n label: \"Title\",\n type: \"text\",\n description: \"Title text displayed above the todo list\",\n defaultValue: \"To-Do\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n key: \"titleFontSize\",\n label: \"Title Font Size\",\n description: \"Font size for the widget title\",\n defaultValue: \"xl\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color for the widget title\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n\n // Styling Tab - Design Group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the widget container\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Default text color for todo items\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getColorField({\n key: \"accentColor\",\n label: \"Accent Color\",\n description: \"Color used for count badge and icon\",\n defaultValue: \"primary\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"maxItems\",\n label: \"Max Items\",\n type: \"number\",\n description: \"Maximum number of todo items to display\",\n min: 1,\n max: 20,\n step: 1,\n defaultValue: 5,\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding around the widget container\",\n defaultValue: 4,\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the widget container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToDoWidget-B4Lrb4FT.cjs","names":["FontAwesomeIcon","faListCheck","ErrorState","faPlus"],"sources":["../src/hooks/use-todos.preview.ts","../src/hooks/use-todos.ts","../src/widgets/ToDoWidget.tsx"],"sourcesContent":["import type { Todo } from \"./use-todos.types\";\n\nconst now = new Date();\n\nfunction daysFromNow(days: number): string {\n const d = new Date(now);\n d.setDate(d.getDate() + days);\n return d.toISOString();\n}\n\nexport const PREVIEW_DATA: Todo[] = [\n {\n id: 1,\n body: \"Send follow-up email to new leads\",\n dueAt: daysFromNow(1),\n completedAt: null,\n createdAt: daysFromNow(-2),\n contactName: \"Sarah Johnson\",\n },\n {\n id: 2,\n body: \"Prepare slides for team training\",\n dueAt: daysFromNow(3),\n completedAt: null,\n createdAt: daysFromNow(-1),\n contactName: null,\n },\n {\n id: 3,\n body: \"Review monthly sales report\",\n dueAt: daysFromNow(-1),\n completedAt: null,\n createdAt: daysFromNow(-5),\n contactName: \"Mike Chen\",\n },\n];\n","import { useQuery, type UseQueryResult } from \"@tanstack/react-query\";\nimport { useDataSourceConfig } from \"@fluid-app/rep-core/data-sources/context\";\nimport { useWidgetPreviewContext } from \"@fluid-app/rep-core/data-sources/preview-context\";\nimport { PREVIEW_DATA } from \"./use-todos.preview\";\nimport type { ApiTodo, Todo } from \"./use-todos.types\";\n\nexport type { TodoContact, ApiTodo, Todo } from \"./use-todos.types\";\n\nexport function useTodos(): UseQueryResult<Todo[], Error> {\n const { baseUrl, getApiHeaders } = useDataSourceConfig();\n const { isPreview } = useWidgetPreviewContext();\n\n return useQuery({\n queryKey: [\n \"rep-widget-use\",\n \"todos\",\n isPreview ? \"preview\" : baseUrl,\n ] as const,\n queryFn: async ({ signal }): Promise<Todo[]> => {\n const url = baseUrl ? `${baseUrl}/tasks` : \"/tasks\";\n const response = await fetch(url, {\n headers: {\n \"content-type\": \"application/json\",\n ...getApiHeaders?.(),\n },\n signal,\n });\n\n if (!response.ok) {\n throw new Error(`Failed to fetch todos: ${response.status}`);\n }\n\n const data: ApiTodo[] = await response.json();\n return transformTodos(data);\n },\n enabled: !isPreview,\n ...(isPreview && { placeholderData: PREVIEW_DATA }),\n });\n}\n\nfunction transformTodos(rawData: ApiTodo[]): Todo[] {\n return rawData.map((todo) => ({\n id: todo.id,\n body: todo.body,\n dueAt: todo.due_at,\n completedAt: todo.completed_at,\n createdAt: todo.created_at,\n contactName: todo.contact\n ? `${todo.contact.first_name} ${todo.contact.last_name}`\n : null,\n }));\n}\n","import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport type {\n BackgroundValue,\n BorderRadiusOptions,\n ColorOptions,\n FontSizeOptions,\n PaddingOptions,\n} from \"@fluid-app/rep-core/types\";\nimport type { WidgetPropertySchema } from \"@fluid-app/rep-core/registries\";\nimport {\n getBorderRadiusField,\n getColorField,\n getFontSizeField,\n getPaddingField,\n} from \"../core/fields\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { faListCheck, faPlus } from \"@fortawesome/pro-regular-svg-icons\";\nimport { useTodos } from \"../hooks/use-todos\";\nimport { ErrorState } from \"../components/error-state\";\n\ntype ToDoWidgetProps = ComponentProps<\"div\"> & {\n // Title\n titleEnabled?: boolean;\n titleText?: string;\n titleFontSize?: FontSizeOptions;\n titleColor?: ColorOptions;\n\n // Styling\n background?: BackgroundValue;\n textColor?: ColorOptions;\n accentColor?: ColorOptions;\n padding?: PaddingOptions;\n borderRadius?: BorderRadiusOptions;\n\n // Content\n maxItems?: number;\n};\n\nexport function ToDoWidget({\n // Title defaults\n titleEnabled = true,\n titleText = \"To-Do\",\n titleFontSize = \"lg\",\n titleColor = \"foreground\",\n\n // Styling defaults\n background = {\n type: \"solid\",\n color: \"background\",\n },\n textColor = \"foreground\",\n accentColor = \"primary\",\n padding = 4,\n borderRadius = \"md\",\n\n // Content defaults\n maxItems = 5,\n\n className,\n ...props\n}: ToDoWidgetProps): React.JSX.Element {\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 const { data: todos = [], isLoading, isError } = useTodos();\n\n // Use API data if available, otherwise fall back to demo data\n const displayTodos = todos.length > 0 ? todos : [];\n\n // Filter out completed tasks\n const activeTodos = displayTodos.filter((todo) => !todo.completedAt);\n const todosToShow = activeTodos.slice(0, maxItems);\n const remainingCount = activeTodos.length - todosToShow.length;\n const isEmpty = activeTodos.length === 0;\n\n return (\n <div\n className={`overflow-hidden rounded-${borderRadius} bg-${backgroundColor} text-${textColor} p-${padding} ${className ?? \"\"}`}\n style={{ backgroundImage }}\n {...props}\n >\n {/* Header */}\n <div className=\"mb-3 flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n {titleEnabled && titleText && (\n <h2\n className={`text-${titleFontSize} font-bold text-${titleColor}`}\n >\n {titleText}\n </h2>\n )}\n </div>\n <div className=\"flex items-center gap-2\">\n {!isEmpty && !isLoading && (\n <span className={`text-2xl font-bold text-${accentColor}`}>\n {activeTodos.length}\n </span>\n )}\n <div\n className={`flex h-10 w-10 shrink-0 items-center justify-center`}\n >\n <FontAwesomeIcon\n icon={faListCheck}\n className={`h-5 w-5 text-${accentColor}-foreground`}\n />\n </div>\n </div>\n </div>\n\n {/* Loading state */}\n {isLoading ? (\n <div className=\"flex min-h-[120px] items-center justify-center\">\n <div className=\"h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent\" />\n </div>\n ) : isError ? (\n /* Error state */\n <ErrorState />\n ) : isEmpty ? (\n /* Empty state */\n <div className=\"flex flex-col items-center justify-center py-8\">\n <p className={`text-center text-${textColor}/60`}>\n You've got nothing else To-Do!\n </p>\n </div>\n ) : (\n /* Todo List */\n <>\n <div className=\"flex flex-col\">\n {todosToShow.map((todo, index) => (\n <div\n key={todo.id}\n className={`flex items-center gap-3 py-2.5 ${\n index !== todosToShow.length - 1\n ? `border-b border-${textColor}/10`\n : \"\"\n }`}\n >\n <input\n type=\"checkbox\"\n className={`h-5 w-5 rounded-full border-2 border-${textColor}/30 bg-transparent`}\n checked={!!todo.completedAt}\n readOnly\n />\n <span className=\"line-clamp-1 flex-1 text-sm\">{todo.body}</span>\n </div>\n ))}\n </div>\n\n {/* Footer */}\n <div className=\"mt-2 flex items-center justify-between\">\n {remainingCount > 0 && (\n <span className={`text-sm text-${textColor}/50 underline`}>\n {remainingCount} more task{remainingCount > 1 ? \"s\" : \"\"}\n </span>\n )}\n <div className=\"ml-auto\">\n <FontAwesomeIcon\n icon={faPlus}\n className={`h-5 w-5 text-${textColor}/50`}\n />\n </div>\n </div>\n </>\n )}\n </div>\n );\n}\n\nexport const toDoWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"ToDoWidget\",\n displayName: \"To-Do Widget\",\n tabsConfig: [{ id: \"styling\", label: \"Styling\" }],\n fields: [\n // Styling Tab - Title Group\n {\n key: \"titleEnabled\",\n label: \"Widget Title\",\n type: \"boolean\",\n description: \"Enable the title displayed above the todo list\",\n defaultValue: true,\n tab: \"styling\",\n group: \"Title\",\n },\n {\n key: \"titleText\",\n label: \"Title\",\n type: \"text\",\n description: \"Title text displayed above the todo list\",\n defaultValue: \"To-Do\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n },\n getFontSizeField({\n key: \"titleFontSize\",\n label: \"Title Font Size\",\n description: \"Font size for the widget title\",\n defaultValue: \"xl\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n getColorField({\n key: \"titleColor\",\n label: \"Title Color\",\n description: \"Color for the widget title\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Title\",\n requiresKeyToBeTrue: \"titleEnabled\",\n }),\n\n // Styling Tab - Design Group\n {\n type: \"background\",\n key: \"background\",\n label: \"Background\",\n description: \"Background for the widget container\",\n defaultValue: \"background\",\n tab: \"styling\",\n group: \"Design\",\n },\n getColorField({\n key: \"textColor\",\n label: \"Text Color\",\n description: \"Default text color for todo items\",\n defaultValue: \"foreground\",\n tab: \"styling\",\n group: \"Design\",\n }),\n getColorField({\n key: \"accentColor\",\n label: \"Accent Color\",\n description: \"Color used for count badge and icon\",\n defaultValue: \"primary\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"separator\",\n type: \"separator\",\n label: \"Separator\",\n tab: \"styling\",\n group: \"Design\",\n },\n {\n key: \"maxItems\",\n label: \"Max Items\",\n type: \"number\",\n description: \"Maximum number of todo items to display\",\n min: 1,\n max: 20,\n step: 1,\n defaultValue: 5,\n tab: \"styling\",\n group: \"Design\",\n },\n getPaddingField({\n key: \"padding\",\n label: \"Padding\",\n description: \"Padding around the widget container\",\n defaultValue: 4,\n tab: \"styling\",\n group: \"Design\",\n }),\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the widget container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n ],\n} as const satisfies WidgetPropertySchema;\n"],"mappings":"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P,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB,CAAC;EAGF;GACE,MAAM;GACN,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;oDACa;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;oDACY;GACZ,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,MAAM;GACN,OAAO;GACP,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACR;sDACe;GACd,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;2DACmB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACH;CACF"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VideoWidget-CiydQ4xO.cjs","names":["MediaRenderer"],"sources":["../src/widgets/VideoWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n getBorderRadiusField,\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type {\n BorderRadiusOptions,\n ShareableItem,\n} from \"@fluid-app/rep-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype VideoWidgetProps = ComponentProps<\"div\"> & {\n src?: string;\n poster?: string;\n borderRadius?: BorderRadiusOptions;\n verticalSizing?: \"auto\" | \"fixed\";\n fixedHeight?: string;\n displayFit?: \"cover\" | \"contain\";\n focusPoint?: string;\n controls?: boolean;\n autoplay?: boolean;\n loop?: boolean;\n muted?: boolean;\n resource?: ShareableItem;\n useCustomUrl?: boolean;\n};\n\nexport function VideoWidget({\n src = \"\",\n poster = \"\",\n borderRadius = \"md\",\n verticalSizing = \"auto\",\n fixedHeight = \"200px\",\n displayFit = \"cover\",\n focusPoint,\n controls = true,\n autoplay = false,\n loop = false,\n muted = false,\n resource,\n useCustomUrl,\n}: VideoWidgetProps): React.JSX.Element {\n const effectiveSrc = useCustomUrl ? src : (resource?.videoUrl ?? src);\n const effectivePoster = useCustomUrl\n ? poster\n : (resource?.imageUrl ?? poster);\n\n const isFixed = verticalSizing === \"fixed\";\n\n return (\n <div\n className={`relative w-full overflow-hidden rounded-${borderRadius}`}\n style={isFixed ? { height: fixedHeight } : undefined}\n >\n <MediaRenderer\n mediaType=\"video\"\n src={effectiveSrc}\n poster={effectivePoster}\n objectFit={isFixed ? displayFit : undefined}\n focusPoint={isFixed ? focusPoint : undefined}\n controls={controls}\n autoplay={autoplay}\n loop={loop}\n muted={muted}\n />\n </div>\n );\n}\n\nexport const videoWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"VideoWidget\",\n displayName: \"Video\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"behavior\", label: \"Behavior\" },\n ],\n fields: [\n // Styling tab - Content group\n {\n key: \"resource\",\n label: \"Select Video\",\n type: \"resource\",\n description: \"Browse and select a video\",\n allowedTypes: [\"Medium\"],\n tab: \"styling\",\n group: \"Content\",\n },\n {\n key: \"useCustomUrl\",\n label: \"Use Custom URL\",\n type: \"boolean\",\n description: \"Enter a custom video URL instead of selecting media\",\n defaultValue: false,\n tab: \"styling\",\n group: \"Content\",\n },\n {\n key: \"src\",\n label: \"Video URL\",\n type: \"text\",\n description: \"The source URL of the video\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Content\",\n requiresKeyToBeTrue: \"useCustomUrl\",\n },\n {\n key: \"poster\",\n label: \"Poster Image URL\",\n type: \"text\",\n description: \"Thumbnail image displayed before video plays\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Content\",\n requiresKeyToBeTrue: \"useCustomUrl\",\n },\n\n // Styling tab - Design group\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"verticalSizing\",\n label: \"Vertical Sizing\",\n type: \"buttonGroup\",\n description: \"How the video height is determined\",\n options: [\n { label: \"Auto\", value: \"auto\" },\n { label: \"Fixed\", value: \"fixed\" },\n ],\n defaultValue: \"auto\",\n tab: \"styling\",\n group: \"Design\",\n },\n getHeightField({\n key: \"fixedHeight\",\n label: \"Height\",\n description: \"Fixed height of the video container\",\n min: 10,\n max: 1200,\n step: 10,\n defaultValue: \"200px\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n }),\n {\n key: \"displayFit\",\n label: \"Display Fit\",\n type: \"buttonGroup\",\n description: \"How the video fills its container\",\n options: [\n { label: \"Cover\", value: \"cover\" },\n { label: \"Contain\", value: \"contain\" },\n ],\n defaultValue: \"cover\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n },\n {\n key: \"focusPoint\",\n label: \"Focus Point\",\n type: \"contentPosition\",\n description: \"The focal point of the video within its container\",\n defaultValue: \"center\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n },\n\n // Behavior tab\n {\n key: \"controls\",\n label: \"Show Controls\",\n type: \"boolean\",\n description: \"Display video playback controls\",\n defaultValue: true,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"autoplay\",\n label: \"Autoplay\",\n type: \"boolean\",\n description: \"Automatically start playing the video\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"loop\",\n label: \"Loop\",\n type: \"boolean\",\n description: \"Repeat the video when it ends\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"muted\",\n label: \"Muted\",\n type: \"boolean\",\n description: \"Start with audio muted\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n ],\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoWidget-uKkRf5pm.mjs","names":[],"sources":["../src/widgets/VideoWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport {\n getBorderRadiusField,\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type {\n BorderRadiusOptions,\n ShareableItem,\n} from \"@fluid-app/rep-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype VideoWidgetProps = ComponentProps<\"div\"> & {\n src?: string;\n poster?: string;\n borderRadius?: BorderRadiusOptions;\n verticalSizing?: \"auto\" | \"fixed\";\n fixedHeight?: string;\n displayFit?: \"cover\" | \"contain\";\n focusPoint?: string;\n controls?: boolean;\n autoplay?: boolean;\n loop?: boolean;\n muted?: boolean;\n resource?: ShareableItem;\n useCustomUrl?: boolean;\n};\n\nexport function VideoWidget({\n src = \"\",\n poster = \"\",\n borderRadius = \"md\",\n verticalSizing = \"auto\",\n fixedHeight = \"200px\",\n displayFit = \"cover\",\n focusPoint,\n controls = true,\n autoplay = false,\n loop = false,\n muted = false,\n resource,\n useCustomUrl,\n}: VideoWidgetProps) {\n const effectiveSrc = useCustomUrl ? src : (resource?.videoUrl ?? src);\n const effectivePoster = useCustomUrl\n ? poster\n : (resource?.imageUrl ?? poster);\n\n const isFixed = verticalSizing === \"fixed\";\n\n return (\n <div\n className={`relative w-full overflow-hidden rounded-${borderRadius}`}\n style={isFixed ? { height: fixedHeight } : undefined}\n >\n <MediaRenderer\n mediaType=\"video\"\n src={effectiveSrc}\n poster={effectivePoster}\n objectFit={isFixed ? displayFit : undefined}\n focusPoint={isFixed ? focusPoint : undefined}\n controls={controls}\n autoplay={autoplay}\n loop={loop}\n muted={muted}\n />\n </div>\n );\n}\n\nexport const videoWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"VideoWidget\",\n displayName: \"Video\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"behavior\", label: \"Behavior\" },\n ],\n fields: [\n // Styling tab - Content group\n {\n key: \"resource\",\n label: \"Select Video\",\n type: \"resource\",\n description: \"Browse and select a video\",\n allowedTypes: [\"Medium\"],\n tab: \"styling\",\n group: \"Content\",\n },\n {\n key: \"useCustomUrl\",\n label: \"Use Custom URL\",\n type: \"boolean\",\n description: \"Enter a custom video URL instead of selecting media\",\n defaultValue: false,\n tab: \"styling\",\n group: \"Content\",\n },\n {\n key: \"src\",\n label: \"Video URL\",\n type: \"text\",\n description: \"The source URL of the video\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Content\",\n requiresKeyToBeTrue: \"useCustomUrl\",\n },\n {\n key: \"poster\",\n label: \"Poster Image URL\",\n type: \"text\",\n description: \"Thumbnail image displayed before video plays\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Content\",\n requiresKeyToBeTrue: \"useCustomUrl\",\n },\n\n // Styling tab - Design group\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"verticalSizing\",\n label: \"Vertical Sizing\",\n type: \"buttonGroup\",\n description: \"How the video height is determined\",\n options: [\n { label: \"Auto\", value: \"auto\" },\n { label: \"Fixed\", value: \"fixed\" },\n ],\n defaultValue: \"auto\",\n tab: \"styling\",\n group: \"Design\",\n },\n getHeightField({\n key: \"fixedHeight\",\n label: \"Height\",\n description: \"Fixed height of the video container\",\n min: 10,\n max: 1200,\n step: 10,\n defaultValue: \"200px\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n }),\n {\n key: \"displayFit\",\n label: \"Display Fit\",\n type: \"buttonGroup\",\n description: \"How the video fills its container\",\n options: [\n { label: \"Cover\", value: \"cover\" },\n { label: \"Contain\", value: \"contain\" },\n ],\n defaultValue: \"cover\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n },\n {\n key: \"focusPoint\",\n label: \"Focus Point\",\n type: \"contentPosition\",\n description: \"The focal point of the video within its container\",\n defaultValue: \"center\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n },\n\n // Behavior tab\n {\n key: \"controls\",\n label: \"Show Controls\",\n type: \"boolean\",\n description: \"Display video playback controls\",\n defaultValue: true,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"autoplay\",\n label: \"Autoplay\",\n type: \"boolean\",\n description: \"Automatically start playing the video\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"loop\",\n label: \"Loop\",\n type: \"boolean\",\n description: \"Repeat the video when it ends\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"muted\",\n label: \"Muted\",\n type: \"boolean\",\n description: \"Start with audio muted\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n ],\n};\n"],"mappings":";;;;;;;;;
|
|
1
|
+
{"version":3,"file":"VideoWidget-uKkRf5pm.mjs","names":[],"sources":["../src/widgets/VideoWidget.tsx"],"sourcesContent":["import type { ComponentProps } from \"react\";\nimport type React from \"react\";\nimport {\n getBorderRadiusField,\n getHeightField,\n type WidgetPropertySchema,\n} from \"@fluid-app/rep-core/registries\";\nimport type {\n BorderRadiusOptions,\n ShareableItem,\n} from \"@fluid-app/rep-core/types\";\nimport { MediaRenderer } from \"../components/MediaRenderer\";\n\ntype VideoWidgetProps = ComponentProps<\"div\"> & {\n src?: string;\n poster?: string;\n borderRadius?: BorderRadiusOptions;\n verticalSizing?: \"auto\" | \"fixed\";\n fixedHeight?: string;\n displayFit?: \"cover\" | \"contain\";\n focusPoint?: string;\n controls?: boolean;\n autoplay?: boolean;\n loop?: boolean;\n muted?: boolean;\n resource?: ShareableItem;\n useCustomUrl?: boolean;\n};\n\nexport function VideoWidget({\n src = \"\",\n poster = \"\",\n borderRadius = \"md\",\n verticalSizing = \"auto\",\n fixedHeight = \"200px\",\n displayFit = \"cover\",\n focusPoint,\n controls = true,\n autoplay = false,\n loop = false,\n muted = false,\n resource,\n useCustomUrl,\n}: VideoWidgetProps): React.JSX.Element {\n const effectiveSrc = useCustomUrl ? src : (resource?.videoUrl ?? src);\n const effectivePoster = useCustomUrl\n ? poster\n : (resource?.imageUrl ?? poster);\n\n const isFixed = verticalSizing === \"fixed\";\n\n return (\n <div\n className={`relative w-full overflow-hidden rounded-${borderRadius}`}\n style={isFixed ? { height: fixedHeight } : undefined}\n >\n <MediaRenderer\n mediaType=\"video\"\n src={effectiveSrc}\n poster={effectivePoster}\n objectFit={isFixed ? displayFit : undefined}\n focusPoint={isFixed ? focusPoint : undefined}\n controls={controls}\n autoplay={autoplay}\n loop={loop}\n muted={muted}\n />\n </div>\n );\n}\n\nexport const videoWidgetPropertySchema: WidgetPropertySchema = {\n widgetType: \"VideoWidget\",\n displayName: \"Video\",\n tabsConfig: [\n { id: \"styling\", label: \"Styling\" },\n { id: \"behavior\", label: \"Behavior\" },\n ],\n fields: [\n // Styling tab - Content group\n {\n key: \"resource\",\n label: \"Select Video\",\n type: \"resource\",\n description: \"Browse and select a video\",\n allowedTypes: [\"Medium\"],\n tab: \"styling\",\n group: \"Content\",\n },\n {\n key: \"useCustomUrl\",\n label: \"Use Custom URL\",\n type: \"boolean\",\n description: \"Enter a custom video URL instead of selecting media\",\n defaultValue: false,\n tab: \"styling\",\n group: \"Content\",\n },\n {\n key: \"src\",\n label: \"Video URL\",\n type: \"text\",\n description: \"The source URL of the video\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Content\",\n requiresKeyToBeTrue: \"useCustomUrl\",\n },\n {\n key: \"poster\",\n label: \"Poster Image URL\",\n type: \"text\",\n description: \"Thumbnail image displayed before video plays\",\n defaultValue: \"\",\n tab: \"styling\",\n group: \"Content\",\n requiresKeyToBeTrue: \"useCustomUrl\",\n },\n\n // Styling tab - Design group\n getBorderRadiusField({\n key: \"borderRadius\",\n label: \"Border Radius\",\n description: \"Border radius for the calendar container\",\n defaultValue: \"md\",\n tab: \"styling\",\n group: \"Design\",\n }),\n {\n key: \"verticalSizing\",\n label: \"Vertical Sizing\",\n type: \"buttonGroup\",\n description: \"How the video height is determined\",\n options: [\n { label: \"Auto\", value: \"auto\" },\n { label: \"Fixed\", value: \"fixed\" },\n ],\n defaultValue: \"auto\",\n tab: \"styling\",\n group: \"Design\",\n },\n getHeightField({\n key: \"fixedHeight\",\n label: \"Height\",\n description: \"Fixed height of the video container\",\n min: 10,\n max: 1200,\n step: 10,\n defaultValue: \"200px\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n }),\n {\n key: \"displayFit\",\n label: \"Display Fit\",\n type: \"buttonGroup\",\n description: \"How the video fills its container\",\n options: [\n { label: \"Cover\", value: \"cover\" },\n { label: \"Contain\", value: \"contain\" },\n ],\n defaultValue: \"cover\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n },\n {\n key: \"focusPoint\",\n label: \"Focus Point\",\n type: \"contentPosition\",\n description: \"The focal point of the video within its container\",\n defaultValue: \"center\",\n tab: \"styling\",\n group: \"Design\",\n requiresKeyValue: { key: \"verticalSizing\", value: \"fixed\" },\n },\n\n // Behavior tab\n {\n key: \"controls\",\n label: \"Show Controls\",\n type: \"boolean\",\n description: \"Display video playback controls\",\n defaultValue: true,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"autoplay\",\n label: \"Autoplay\",\n type: \"boolean\",\n description: \"Automatically start playing the video\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"loop\",\n label: \"Loop\",\n type: \"boolean\",\n description: \"Repeat the video when it ends\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n {\n key: \"muted\",\n label: \"Muted\",\n type: \"boolean\",\n description: \"Start with audio muted\",\n defaultValue: false,\n tab: \"behavior\",\n group: \"Behavior\",\n },\n ],\n};\n"],"mappings":";;;;;;;;;AA6BA,SAAgB,YAAY,EAC1B,MAAM,IACN,SAAS,IACT,eAAe,MACf,iBAAiB,QACjB,cAAc,SACd,aAAa,SACb,YACA,WAAW,MACX,WAAW,OACX,OAAO,OACP,QAAQ,OACR,UACA,gBACsC;CACtC,MAAM,eAAe,eAAe,MAAO,UAAU,YAAY;CACjE,MAAM,kBAAkB,eACpB,SACC,UAAU,YAAY;CAE3B,MAAM,UAAU,mBAAmB;AAEnC,QACE,oBAAC,OAAD;EACE,WAAW,2CAA2C;EACtD,OAAO,UAAU,EAAE,QAAQ,aAAa,GAAG,KAAA;YAE3C,oBAAC,eAAD;GACE,WAAU;GACV,KAAK;GACL,QAAQ;GACR,WAAW,UAAU,aAAa,KAAA;GAClC,YAAY,UAAU,aAAa,KAAA;GACzB;GACA;GACJ;GACC;GACP,CAAA;EACE,CAAA;;AAIV,MAAa,4BAAkD;CAC7D,YAAY;CACZ,aAAa;CACb,YAAY,CACV;EAAE,IAAI;EAAW,OAAO;EAAW,EACnC;EAAE,IAAI;EAAY,OAAO;EAAY,CACtC;CACD,QAAQ;EAEN;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc,CAAC,SAAS;GACxB,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,qBAAqB;GACtB;EAGD,qBAAqB;GACnB,KAAK;GACL,OAAO;GACP,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAQ,OAAO;IAAQ,EAChC;IAAE,OAAO;IAAS,OAAO;IAAS,CACnC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD,eAAe;GACb,KAAK;GACL,OAAO;GACP,aAAa;GACb,KAAK;GACL,KAAK;GACL,MAAM;GACN,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D,CAAC;EACF;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,SAAS,CACP;IAAE,OAAO;IAAS,OAAO;IAAS,EAClC;IAAE,OAAO;IAAW,OAAO;IAAW,CACvC;GACD,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACP,kBAAkB;IAAE,KAAK;IAAkB,OAAO;IAAS;GAC5D;EAGD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACD;GACE,KAAK;GACL,OAAO;GACP,MAAM;GACN,aAAa;GACb,cAAc;GACd,KAAK;GACL,OAAO;GACR;EACF;CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: readonly ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;AAGA,SAAgB,GAAG,GAAG,
|
|
1
|
+
{"version":3,"file":"index.cjs","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: readonly ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;;;AAGA,SAAgB,GAAG,GAAG,QAAuC;AAC3D,SAAA,GAAA,eAAA,UAAA,GAAA,KAAA,MAAoB,OAAO,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { ClassValue } from "clsx";
|
|
3
3
|
|
|
4
4
|
//#region src/components/error-state.d.ts
|
|
5
|
-
declare function ErrorState():
|
|
5
|
+
declare function ErrorState(): React.JSX.Element;
|
|
6
6
|
//#endregion
|
|
7
7
|
//#region src/lib/utils.d.ts
|
|
8
8
|
declare function cn(...inputs: readonly ClassValue[]): string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/components/error-state.tsx","../../src/lib/utils.ts"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/components/error-state.tsx","../../src/lib/utils.ts"],"mappings":";;;;iBACgB,UAAA,CAAA,GAAc,KAAA,CAAM,GAAA,CAAI,OAAA;;;iBCExB,EAAA,CAAA,GAAM,MAAA,WAAiB,UAAA"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
1
|
+
import React from "react";
|
|
2
2
|
import { ClassValue } from "clsx";
|
|
3
3
|
|
|
4
4
|
//#region src/components/error-state.d.ts
|
|
5
|
-
declare function ErrorState():
|
|
5
|
+
declare function ErrorState(): React.JSX.Element;
|
|
6
6
|
//#endregion
|
|
7
7
|
//#region src/lib/utils.d.ts
|
|
8
8
|
declare function cn(...inputs: readonly ClassValue[]): string;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/components/error-state.tsx","../../src/lib/utils.ts"],"mappings":";;;;
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/components/error-state.tsx","../../src/lib/utils.ts"],"mappings":";;;;iBACgB,UAAA,CAAA,GAAc,KAAA,CAAM,GAAA,CAAI,OAAA;;;iBCExB,EAAA,CAAA,GAAM,MAAA,WAAiB,UAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: readonly ClassValue[]) {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;AAGA,SAAgB,GAAG,GAAG,
|
|
1
|
+
{"version":3,"file":"index.mjs","names":[],"sources":["../../src/lib/utils.ts"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: readonly ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n"],"mappings":";;;;AAGA,SAAgB,GAAG,GAAG,QAAuC;AAC3D,QAAO,QAAQ,KAAK,OAAO,CAAC"}
|
package/dist/contexts/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
|
-
const require_RegistryContext = require("../RegistryContext-
|
|
3
|
-
const require_ScreenRendererContext = require("../ScreenRendererContext-
|
|
2
|
+
const require_RegistryContext = require("../RegistryContext-xjea4xVV.cjs");
|
|
3
|
+
const require_ScreenRendererContext = require("../ScreenRendererContext-B660JoZO.cjs");
|
|
4
4
|
exports.RegistryContext = require_RegistryContext.RegistryContext;
|
|
5
5
|
exports.RegistryProvider = require_RegistryContext.RegistryProvider;
|
|
6
6
|
exports.ScreenRendererContext = require_ScreenRendererContext.ScreenRendererContext;
|
|
@@ -1,78 +1,76 @@
|
|
|
1
|
-
import
|
|
2
|
-
import * as react from "react";
|
|
3
|
-
import { ComponentType, ReactNode } from "react";
|
|
1
|
+
import React, { ComponentType, ReactNode } from "react";
|
|
4
2
|
import { WidgetSchema } from "@fluid-app/rep-core/types";
|
|
5
3
|
|
|
6
4
|
//#region src/contexts/RegistryContext.d.ts
|
|
7
5
|
/**
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
* Base props interface for widget components.
|
|
7
|
+
* All widgets receive at least these props from the ScreenRenderer.
|
|
8
|
+
*/
|
|
11
9
|
interface WidgetBaseProps {
|
|
12
10
|
readonly widget: WidgetSchema;
|
|
13
11
|
readonly path?: readonly number[];
|
|
14
12
|
}
|
|
15
13
|
/**
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
* Generic widget component type.
|
|
15
|
+
* Widgets receive WidgetBaseProps and may have additional props.
|
|
16
|
+
*/
|
|
19
17
|
type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> = ComponentType<P>;
|
|
20
18
|
/**
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
* Registry mapping widget type names to their components.
|
|
20
|
+
* The keys are widget type strings (e.g., "TextWidget", "ButtonWidget").
|
|
21
|
+
* Using WidgetComponent for the value type provides better type safety than `any`.
|
|
22
|
+
*/
|
|
25
23
|
type WidgetRegistry = Readonly<Record<string, WidgetComponent<any>>>;
|
|
26
24
|
/**
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
declare const RegistryContext:
|
|
25
|
+
* Context for providing the widget registry to all components in the tree.
|
|
26
|
+
* This eliminates prop drilling and makes the registry accessible anywhere.
|
|
27
|
+
*
|
|
28
|
+
* Default to undefined - registry must be provided by a RegistryProvider.
|
|
29
|
+
*/
|
|
30
|
+
declare const RegistryContext: React.Context<WidgetRegistry | undefined>;
|
|
33
31
|
interface RegistryProviderProps {
|
|
34
32
|
registry?: WidgetRegistry;
|
|
35
33
|
children: ReactNode;
|
|
36
34
|
}
|
|
37
35
|
/**
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
* Provider component that makes the widget registry available to all descendants.
|
|
37
|
+
* A registry must be provided either via props or by nesting within another RegistryProvider.
|
|
38
|
+
*/
|
|
41
39
|
declare function RegistryProvider({
|
|
42
40
|
registry,
|
|
43
41
|
children
|
|
44
|
-
}: RegistryProviderProps):
|
|
42
|
+
}: RegistryProviderProps): React.JSX.Element;
|
|
45
43
|
/**
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
* Hook to access the widget registry from anywhere in the component tree.
|
|
45
|
+
* Must be used within a RegistryProvider that has a registry prop.
|
|
46
|
+
*/
|
|
49
47
|
declare function useRegistry(): WidgetRegistry;
|
|
50
48
|
//#endregion
|
|
51
49
|
//#region src/contexts/ScreenRendererContext.d.ts
|
|
52
50
|
/**
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
* Props that any ScreenRenderer must accept.
|
|
52
|
+
* This is the minimal interface used by container widgets (e.g. LayoutWidget)
|
|
53
|
+
* to render their children.
|
|
54
|
+
*/
|
|
57
55
|
interface ScreenRendererComponentProps {
|
|
58
56
|
screen: WidgetSchema[];
|
|
59
57
|
registry?: WidgetRegistry;
|
|
60
58
|
className?: string;
|
|
61
59
|
}
|
|
62
60
|
/**
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
declare const ScreenRendererContext:
|
|
61
|
+
* Context for providing an alternative ScreenRenderer component.
|
|
62
|
+
*
|
|
63
|
+
* This allows packages like rep-builder to inject their own ScreenRenderer
|
|
64
|
+
* (with edit mode, drag-and-drop, etc.) so that container widgets in rep-widgets
|
|
65
|
+
* use the richer renderer instead of the basic view-only one.
|
|
66
|
+
*
|
|
67
|
+
* Default is undefined — container widgets fall back to the local ScreenRenderer import.
|
|
68
|
+
*/
|
|
69
|
+
declare const ScreenRendererContext: React.Context<ComponentType<ScreenRendererComponentProps> | undefined>;
|
|
72
70
|
/**
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
* Hook to get the ScreenRenderer component from context.
|
|
72
|
+
* Returns undefined if no override has been provided.
|
|
73
|
+
*/
|
|
76
74
|
declare function useScreenRenderer(): ComponentType<ScreenRendererComponentProps> | undefined;
|
|
77
75
|
//#endregion
|
|
78
76
|
export { RegistryContext, RegistryProvider, type RegistryProviderProps, type ScreenRendererComponentProps, ScreenRendererContext, type WidgetBaseProps, type WidgetComponent, type WidgetRegistry, useRegistry, useScreenRenderer };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.cts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx"],"mappings":";;;;;;AAYA;;UAAiB,eAAA;EAAA,SACN,MAAA,EAAQ,YAAA;EAAA,SACR,IAAA;AAAA;;;;AAOX;KAAY,eAAA,WAA0B,eAAA,GAAkB,eAAA,IACtD,aAAA,CAAc,CAAA;;;;;;KAOJ,cAAA,GAAiB,QAAA,CAE3B,MAAA,SAAe,eAAA;;;;;;;cASJ,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,cAAA;AAAA,UAG3B,qBAAA;EACf,QAAA,GAAW,cAAA;EACX,QAAA,EAAU,SAAA;AAAA;;;;;iBAOI,gBAAA,CAAA;EACd,QAAA;EACA;AAAA,GACC,qBAAA,GAAwB,KAAA,CAAM,GAAA,CAAI,OAAA;;;;;iBAsBrB,WAAA,CAAA,GAAe,cAAA;;;;AAjE/B;;;;UCHiB,4BAAA;EACf,MAAA,EAAQ,YAAA;EACR,QAAA,GAAW,cAAA;EACX,SAAA;AAAA;ADSF;;;;;;;;;AAAA,cCGa,qBAAA,EAAuB,KAAA,CAAM,OAAA,CACxC,aAAA,CAAc,4BAAA;;;;;iBASA,iBAAA,CAAA,GACZ,aAAA,CAAc,4BAAA"}
|
|
@@ -1,78 +1,76 @@
|
|
|
1
|
-
import
|
|
2
|
-
import * as react from "react";
|
|
3
|
-
import { ComponentType, ReactNode } from "react";
|
|
1
|
+
import React, { ComponentType, ReactNode } from "react";
|
|
4
2
|
import { WidgetSchema } from "@fluid-app/rep-core/types";
|
|
5
3
|
|
|
6
4
|
//#region src/contexts/RegistryContext.d.ts
|
|
7
5
|
/**
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
6
|
+
* Base props interface for widget components.
|
|
7
|
+
* All widgets receive at least these props from the ScreenRenderer.
|
|
8
|
+
*/
|
|
11
9
|
interface WidgetBaseProps {
|
|
12
10
|
readonly widget: WidgetSchema;
|
|
13
11
|
readonly path?: readonly number[];
|
|
14
12
|
}
|
|
15
13
|
/**
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
* Generic widget component type.
|
|
15
|
+
* Widgets receive WidgetBaseProps and may have additional props.
|
|
16
|
+
*/
|
|
19
17
|
type WidgetComponent<P extends WidgetBaseProps = WidgetBaseProps> = ComponentType<P>;
|
|
20
18
|
/**
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
* Registry mapping widget type names to their components.
|
|
20
|
+
* The keys are widget type strings (e.g., "TextWidget", "ButtonWidget").
|
|
21
|
+
* Using WidgetComponent for the value type provides better type safety than `any`.
|
|
22
|
+
*/
|
|
25
23
|
type WidgetRegistry = Readonly<Record<string, WidgetComponent<any>>>;
|
|
26
24
|
/**
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
declare const RegistryContext:
|
|
25
|
+
* Context for providing the widget registry to all components in the tree.
|
|
26
|
+
* This eliminates prop drilling and makes the registry accessible anywhere.
|
|
27
|
+
*
|
|
28
|
+
* Default to undefined - registry must be provided by a RegistryProvider.
|
|
29
|
+
*/
|
|
30
|
+
declare const RegistryContext: React.Context<WidgetRegistry | undefined>;
|
|
33
31
|
interface RegistryProviderProps {
|
|
34
32
|
registry?: WidgetRegistry;
|
|
35
33
|
children: ReactNode;
|
|
36
34
|
}
|
|
37
35
|
/**
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
* Provider component that makes the widget registry available to all descendants.
|
|
37
|
+
* A registry must be provided either via props or by nesting within another RegistryProvider.
|
|
38
|
+
*/
|
|
41
39
|
declare function RegistryProvider({
|
|
42
40
|
registry,
|
|
43
41
|
children
|
|
44
|
-
}: RegistryProviderProps):
|
|
42
|
+
}: RegistryProviderProps): React.JSX.Element;
|
|
45
43
|
/**
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
* Hook to access the widget registry from anywhere in the component tree.
|
|
45
|
+
* Must be used within a RegistryProvider that has a registry prop.
|
|
46
|
+
*/
|
|
49
47
|
declare function useRegistry(): WidgetRegistry;
|
|
50
48
|
//#endregion
|
|
51
49
|
//#region src/contexts/ScreenRendererContext.d.ts
|
|
52
50
|
/**
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
51
|
+
* Props that any ScreenRenderer must accept.
|
|
52
|
+
* This is the minimal interface used by container widgets (e.g. LayoutWidget)
|
|
53
|
+
* to render their children.
|
|
54
|
+
*/
|
|
57
55
|
interface ScreenRendererComponentProps {
|
|
58
56
|
screen: WidgetSchema[];
|
|
59
57
|
registry?: WidgetRegistry;
|
|
60
58
|
className?: string;
|
|
61
59
|
}
|
|
62
60
|
/**
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
declare const ScreenRendererContext:
|
|
61
|
+
* Context for providing an alternative ScreenRenderer component.
|
|
62
|
+
*
|
|
63
|
+
* This allows packages like rep-builder to inject their own ScreenRenderer
|
|
64
|
+
* (with edit mode, drag-and-drop, etc.) so that container widgets in rep-widgets
|
|
65
|
+
* use the richer renderer instead of the basic view-only one.
|
|
66
|
+
*
|
|
67
|
+
* Default is undefined — container widgets fall back to the local ScreenRenderer import.
|
|
68
|
+
*/
|
|
69
|
+
declare const ScreenRendererContext: React.Context<ComponentType<ScreenRendererComponentProps> | undefined>;
|
|
72
70
|
/**
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
* Hook to get the ScreenRenderer component from context.
|
|
72
|
+
* Returns undefined if no override has been provided.
|
|
73
|
+
*/
|
|
76
74
|
declare function useScreenRenderer(): ComponentType<ScreenRendererComponentProps> | undefined;
|
|
77
75
|
//#endregion
|
|
78
76
|
export { RegistryContext, RegistryProvider, type RegistryProviderProps, type ScreenRendererComponentProps, ScreenRendererContext, type WidgetBaseProps, type WidgetComponent, type WidgetRegistry, useRegistry, useScreenRenderer };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.d.mts","names":[],"sources":["../../src/contexts/RegistryContext.tsx","../../src/contexts/ScreenRendererContext.tsx"],"mappings":";;;;;;AAYA;;UAAiB,eAAA;EAAA,SACN,MAAA,EAAQ,YAAA;EAAA,SACR,IAAA;AAAA;;;;AAOX;KAAY,eAAA,WAA0B,eAAA,GAAkB,eAAA,IACtD,aAAA,CAAc,CAAA;;;;;;KAOJ,cAAA,GAAiB,QAAA,CAE3B,MAAA,SAAe,eAAA;;;;;;;cASJ,eAAA,EAAiB,KAAA,CAAM,OAAA,CAAQ,cAAA;AAAA,UAG3B,qBAAA;EACf,QAAA,GAAW,cAAA;EACX,QAAA,EAAU,SAAA;AAAA;;;;;iBAOI,gBAAA,CAAA;EACd,QAAA;EACA;AAAA,GACC,qBAAA,GAAwB,KAAA,CAAM,GAAA,CAAI,OAAA;;;;;iBAsBrB,WAAA,CAAA,GAAe,cAAA;;;;AAjE/B;;;;UCHiB,4BAAA;EACf,MAAA,EAAQ,YAAA;EACR,QAAA,GAAW,cAAA;EACX,SAAA;AAAA;ADSF;;;;;;;;;AAAA,cCGa,qBAAA,EAAuB,KAAA,CAAM,OAAA,CACxC,aAAA,CAAc,4BAAA;;;;;iBASA,iBAAA,CAAA,GACZ,aAAA,CAAc,4BAAA"}
|
package/dist/core/index.cjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
2
2
|
require("../chunk-CZWwpsFl.cjs");
|
|
3
3
|
const require_MediaRenderer = require("../MediaRenderer-CcJvyOJ1.cjs");
|
|
4
|
-
const require_ScreenRenderer = require("../ScreenRenderer-
|
|
4
|
+
const require_ScreenRenderer = require("../ScreenRenderer-B-nGFObe.cjs");
|
|
5
5
|
let _fluid_app_rep_core_registries = require("@fluid-app/rep-core/registries");
|
|
6
6
|
exports.MediaRenderer = require_MediaRenderer.MediaRenderer;
|
|
7
7
|
exports.ScreenRenderer = require_ScreenRenderer.ScreenRenderer;
|