@ably/ui 17.3.0-dev.a6f974a8 → 17.3.1-dev.2075de74
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/README.md +3 -3
- package/core/Icon/utils.js +1 -1
- package/core/Icon/utils.js.map +1 -1
- package/core/Icon.js +1 -1
- package/core/Icon.js.map +1 -1
- package/core/load-sprites.js +1 -1
- package/core/load-sprites.js.map +1 -1
- package/core/remote-blogs-posts.js.map +1 -1
- package/core/remote-session-data.js.map +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -122,13 +122,13 @@ import Meganav from "@ably/ui/core/Meganav";
|
|
|
122
122
|
|
|
123
123
|
### Icons
|
|
124
124
|
|
|
125
|
-
|
|
125
|
+
We have access to two sets of icons via the `Icon` component, custom local assets hosted in the repo itself, and the third-party Heroicons library.
|
|
126
126
|
|
|
127
127
|
#### Local Custom Icons
|
|
128
128
|
|
|
129
|
-
Putting SVG files inside a `src/
|
|
129
|
+
Putting SVG files inside a `src/core/icons` folder will:
|
|
130
130
|
|
|
131
|
-
1. Add them to a per-
|
|
131
|
+
1. Add them to a per-group sprites file (e.g., `core/sprites-gui.svg`) for backward compatibility
|
|
132
132
|
2. Generate React components that can be imported dynamically
|
|
133
133
|
|
|
134
134
|
The sprites file can be loaded with the `loadSprites` helper available in the `core` module or included in the page directly.
|
package/core/Icon/utils.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as OutlineIcons from"@heroicons/react/24/outline";import*as SolidIcons from"@heroicons/react/24/solid";import*as MiniIcons from"@heroicons/react/20/solid";import*as MicroIcons from"@heroicons/react/16/solid";export const defaultIconSecondaryColor=name=>{const colorLookup={"icon-gui-check-circled-fill":"text-white"};return colorLookup[name]};export const toPascalCase=str=>{return str.split("-").map(word=>word.charAt(0).toUpperCase()+word.slice(1)).join("")};export const getHeroicon=(iconName,variant)=>{const componentName=`${iconName}Icon`;try{let iconModule;switch(variant){case"outline":iconModule=OutlineIcons;break;case"solid":iconModule=SolidIcons;break;case"mini":iconModule=MiniIcons;break;case"micro":iconModule=MicroIcons;break;default:return null}const component=iconModule[componentName];return component||null}catch(error){console.error("Error getting heroicon:",error,componentName);return null}};
|
|
1
|
+
import*as OutlineIcons from"@heroicons/react/24/outline";import*as SolidIcons from"@heroicons/react/24/solid";import*as MiniIcons from"@heroicons/react/20/solid";import*as MicroIcons from"@heroicons/react/16/solid";export const defaultIconSecondaryColor=name=>{const colorLookup={"icon-gui-check-circled-fill":"text-white"};return colorLookup[name]};export const toPascalCase=str=>{return str.split("-").map(word=>word.charAt(0).toUpperCase()+word.slice(1)).join("")};export const getHeroicon=(iconName,variant)=>{const componentName=`${toPascalCase(iconName)}Icon`;try{let iconModule;switch(variant){case"outline":iconModule=OutlineIcons;break;case"solid":iconModule=SolidIcons;break;case"mini":iconModule=MiniIcons;break;case"micro":iconModule=MicroIcons;break;default:return null}const component=iconModule[componentName];return component||null}catch(error){console.error("Error getting heroicon:",error,componentName);return null}};
|
|
2
2
|
//# sourceMappingURL=utils.js.map
|
package/core/Icon/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Icon/utils.ts"],"sourcesContent":["import { ColorClass } from \"../styles/colors/types\";\nimport { IconName } from \"./types\";\n\n// Import entire heroicon category modules\nimport * as OutlineIcons from \"@heroicons/react/24/outline\";\nimport * as SolidIcons from \"@heroicons/react/24/solid\";\nimport * as MiniIcons from \"@heroicons/react/20/solid\";\nimport * as MicroIcons from \"@heroicons/react/16/solid\";\n\ntype HeroiconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;\n\nexport const defaultIconSecondaryColor = (name: IconName) => {\n const colorLookup = {\n \"icon-gui-check-circled-fill\": \"text-white\",\n } as Record<string, ColorClass>;\n\n return colorLookup[name];\n};\n\n// Helper function to convert kebab-case to PascalCase for heroicons\nexport const toPascalCase = (str: string): string => {\n return str\n .split(\"-\")\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(\"\");\n};\n\n// Helper function to get a heroicon component by name and variant\nexport const getHeroicon = (\n iconName: string,\n variant: string,\n): HeroiconComponent | null => {\n const componentName = `${iconName}Icon`;\n\n try {\n let iconModule: Record<string, HeroiconComponent>;\n\n switch (variant) {\n case \"outline\":\n iconModule = OutlineIcons as Record<string, HeroiconComponent>;\n break;\n case \"solid\":\n iconModule = SolidIcons as Record<string, HeroiconComponent>;\n break;\n case \"mini\":\n iconModule = MiniIcons as Record<string, HeroiconComponent>;\n break;\n case \"micro\":\n iconModule = MicroIcons as Record<string, HeroiconComponent>;\n break;\n default:\n return null;\n }\n\n // Access the component from the module\n const component = iconModule[componentName];\n return component || null;\n } catch (error) {\n console.error(\"Error getting heroicon:\", error, componentName);\n return null;\n }\n};\n"],"names":["OutlineIcons","SolidIcons","MiniIcons","MicroIcons","defaultIconSecondaryColor","name","colorLookup","toPascalCase","str","split","map","word","charAt","toUpperCase","slice","join","getHeroicon","iconName","variant","componentName","iconModule","component","error","console"],"mappings":"AAIA,UAAYA,iBAAkB,6BAA8B,AAC5D,WAAYC,eAAgB,2BAA4B,AACxD,WAAYC,cAAe,2BAA4B,AACvD,WAAYC,eAAgB,2BAA4B,AAIxD,QAAO,MAAMC,0BAA4B,AAACC,OACxC,MAAMC,YAAc,CAClB,8BAA+B,YACjC,EAEA,OAAOA,WAAW,CAACD,KAAK,AAC1B,CAAE,AAGF,QAAO,MAAME,aAAe,AAACC,MAC3B,OAAOA,IACJC,KAAK,CAAC,KACNC,GAAG,CAAC,AAACC,MAASA,KAAKC,MAAM,CAAC,GAAGC,WAAW,GAAKF,KAAKG,KAAK,CAAC,IACxDC,IAAI,CAAC,GACV,CAAE,AAGF,QAAO,MAAMC,YAAc,CACzBC,SACAC,WAEA,MAAMC,cAAgB,CAAC,
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Icon/utils.ts"],"sourcesContent":["import { ColorClass } from \"../styles/colors/types\";\nimport { IconName } from \"./types\";\n\n// Import entire heroicon category modules\nimport * as OutlineIcons from \"@heroicons/react/24/outline\";\nimport * as SolidIcons from \"@heroicons/react/24/solid\";\nimport * as MiniIcons from \"@heroicons/react/20/solid\";\nimport * as MicroIcons from \"@heroicons/react/16/solid\";\n\ntype HeroiconComponent = React.ComponentType<React.SVGProps<SVGSVGElement>>;\n\nexport const defaultIconSecondaryColor = (name: IconName) => {\n const colorLookup = {\n \"icon-gui-check-circled-fill\": \"text-white\",\n } as Record<string, ColorClass>;\n\n return colorLookup[name];\n};\n\n// Helper function to convert kebab-case to PascalCase for heroicons\nexport const toPascalCase = (str: string): string => {\n return str\n .split(\"-\")\n .map((word) => word.charAt(0).toUpperCase() + word.slice(1))\n .join(\"\");\n};\n\n// Helper function to get a heroicon component by name and variant\nexport const getHeroicon = (\n iconName: string,\n variant: string,\n): HeroiconComponent | null => {\n const componentName = `${toPascalCase(iconName)}Icon`;\n\n try {\n let iconModule: Record<string, HeroiconComponent>;\n\n switch (variant) {\n case \"outline\":\n iconModule = OutlineIcons as Record<string, HeroiconComponent>;\n break;\n case \"solid\":\n iconModule = SolidIcons as Record<string, HeroiconComponent>;\n break;\n case \"mini\":\n iconModule = MiniIcons as Record<string, HeroiconComponent>;\n break;\n case \"micro\":\n iconModule = MicroIcons as Record<string, HeroiconComponent>;\n break;\n default:\n return null;\n }\n\n // Access the component from the module\n const component = iconModule[componentName];\n return component || null;\n } catch (error) {\n console.error(\"Error getting heroicon:\", error, componentName);\n return null;\n }\n};\n"],"names":["OutlineIcons","SolidIcons","MiniIcons","MicroIcons","defaultIconSecondaryColor","name","colorLookup","toPascalCase","str","split","map","word","charAt","toUpperCase","slice","join","getHeroicon","iconName","variant","componentName","iconModule","component","error","console"],"mappings":"AAIA,UAAYA,iBAAkB,6BAA8B,AAC5D,WAAYC,eAAgB,2BAA4B,AACxD,WAAYC,cAAe,2BAA4B,AACvD,WAAYC,eAAgB,2BAA4B,AAIxD,QAAO,MAAMC,0BAA4B,AAACC,OACxC,MAAMC,YAAc,CAClB,8BAA+B,YACjC,EAEA,OAAOA,WAAW,CAACD,KAAK,AAC1B,CAAE,AAGF,QAAO,MAAME,aAAe,AAACC,MAC3B,OAAOA,IACJC,KAAK,CAAC,KACNC,GAAG,CAAC,AAACC,MAASA,KAAKC,MAAM,CAAC,GAAGC,WAAW,GAAKF,KAAKG,KAAK,CAAC,IACxDC,IAAI,CAAC,GACV,CAAE,AAGF,QAAO,MAAMC,YAAc,CACzBC,SACAC,WAEA,MAAMC,cAAgB,CAAC,EAAEZ,aAAaU,UAAU,IAAI,CAAC,CAErD,GAAI,CACF,IAAIG,WAEJ,OAAQF,SACN,IAAK,UACHE,WAAapB,aACb,KACF,KAAK,QACHoB,WAAanB,WACb,KACF,KAAK,OACHmB,WAAalB,UACb,KACF,KAAK,QACHkB,WAAajB,WACb,KACF,SACE,OAAO,IACX,CAGA,MAAMkB,UAAYD,UAAU,CAACD,cAAc,CAC3C,OAAOE,WAAa,IACtB,CAAE,MAAOC,MAAO,CACdC,QAAQD,KAAK,CAAC,0BAA2BA,MAAOH,eAChD,OAAO,IACT,CACF,CAAE"}
|
package/core/Icon.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useCallback,useMemo}from"react";import{defaultIconSecondaryColor}from"./Icon/utils";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";
|
|
1
|
+
import React,{useCallback,useMemo}from"react";import{defaultIconSecondaryColor,getHeroicon,toPascalCase}from"./Icon/utils";import*as IconComponents from"./Icon/components";import{convertTailwindClassToVar}from"./styles/colors/utils";import cn from"./utils/cn";const getHeroiconComponent=iconName=>{const match=iconName.match(/^icon-gui-(.+)-(outline|solid|mini|micro)$/);if(!match){return null}const[,heroiconName,variant]=match;const component=getHeroicon(heroiconName,variant);return component};const Icon=({name,size="0.75rem",color,secondaryColor,additionalCSS="",variant,...additionalAttributes})=>{const[lightSecondaryColor,darkSecondaryColor]=(secondaryColor??"").split(" dark:");const iconName=variant&&!name.endsWith(`-${variant}`)?`${name}-${variant}`:name;const LocalIconComponent=useMemo(()=>{return IconComponents[toPascalCase(iconName)]},[iconName]);const HeroiconComponent=useMemo(()=>{return LocalIconComponent?null:getHeroiconComponent(iconName)},[LocalIconComponent,iconName]);const iconSvg=useCallback((secondaryColor,isDark,isThemed)=>{let secondaryColorValue;if(secondaryColor){secondaryColorValue=convertTailwindClassToVar(secondaryColor)}else if(defaultIconSecondaryColor(name)){secondaryColorValue=convertTailwindClassToVar(defaultIconSecondaryColor(name))}const IconComponent=LocalIconComponent||HeroiconComponent;if(!IconComponent){return null}return React.createElement(IconComponent,{className:cn({[`${color}`]:color},{[`${additionalCSS}`]:additionalCSS},{"hidden dark:block":secondaryColor&&!isDark&&isThemed},{"dark:hidden":secondaryColor&&isDark&&isThemed}),style:{width:size,height:size,...secondaryColorValue&&{"--ui-icon-secondary-color":secondaryColorValue}},...additionalAttributes})},[LocalIconComponent,HeroiconComponent,iconName,size,color,additionalCSS,lightSecondaryColor,darkSecondaryColor,name]);if(lightSecondaryColor&&darkSecondaryColor){return React.createElement(React.Fragment,null,iconSvg(lightSecondaryColor,false,!!darkSecondaryColor),iconSvg(darkSecondaryColor,true,true))}else if(lightSecondaryColor){return iconSvg(lightSecondaryColor,false,!!darkSecondaryColor)}else{return iconSvg()}};export default Icon;
|
|
2
2
|
//# sourceMappingURL=Icon.js.map
|
package/core/Icon.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback, useMemo } from \"react\";\n\nimport {
|
|
1
|
+
{"version":3,"sources":["../../src/core/Icon.tsx"],"sourcesContent":["import React, { CSSProperties, useCallback, useMemo } from \"react\";\n\nimport {\n defaultIconSecondaryColor,\n getHeroicon,\n toPascalCase,\n} from \"./Icon/utils\";\nimport * as IconComponents from \"./Icon/components\";\nimport { IconName, IconSize } from \"./Icon/types\";\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport { convertTailwindClassToVar } from \"./styles/colors/utils\";\nimport cn from \"./utils/cn\";\n\nexport type IconProps = {\n name: IconName;\n size?: IconSize;\n color?: ColorClass | ColorThemeSet;\n secondaryColor?: ColorClass | ColorThemeSet;\n additionalCSS?: string;\n variant?: \"outline\" | \"solid\" | \"micro\" | \"mini\";\n};\n\n// Helper function to get a heroicon component from the static map\nconst getHeroiconComponent = (\n iconName: string,\n): React.ComponentType<React.SVGProps<SVGSVGElement>> | null => {\n // Parse the icon name to extract heroicon name and variant\n // Expected format: icon-gui-{heroicon-name}-{variant}\n const match = iconName.match(/^icon-gui-(.+)-(outline|solid|mini|micro)$/);\n if (!match) {\n return null;\n }\n\n const [, heroiconName, variant] = match;\n const component = getHeroicon(heroiconName, variant);\n return component;\n};\n\nconst Icon = ({\n name,\n size = \"0.75rem\",\n color,\n secondaryColor,\n additionalCSS = \"\",\n variant,\n ...additionalAttributes\n}: IconProps) => {\n const [lightSecondaryColor, darkSecondaryColor] = (\n secondaryColor ?? \"\"\n ).split(\" dark:\") as [ColorClass, ColorClass | undefined];\n\n const iconName =\n variant && !name.endsWith(`-${variant}`) ? `${name}-${variant}` : name;\n\n // Get the local icon component (memoized)\n const LocalIconComponent = useMemo(():\n | React.ComponentType<React.SVGProps<SVGSVGElement>>\n | undefined => {\n return IconComponents[\n toPascalCase(iconName) as keyof typeof IconComponents\n ];\n }, [iconName]);\n\n // Get the heroicon component only if no local component is found (memoized)\n const HeroiconComponent = useMemo(() => {\n return LocalIconComponent ? null : getHeroiconComponent(iconName);\n }, [LocalIconComponent, iconName]);\n\n const iconSvg = useCallback(\n (secondaryColor?: ColorClass, isDark?: boolean, isThemed?: boolean) => {\n let secondaryColorValue;\n if (secondaryColor) {\n secondaryColorValue = convertTailwindClassToVar(secondaryColor);\n } else if (defaultIconSecondaryColor(name)) {\n secondaryColorValue = convertTailwindClassToVar(\n defaultIconSecondaryColor(name),\n );\n }\n\n // Try local component first\n const IconComponent = LocalIconComponent || HeroiconComponent;\n\n if (!IconComponent) {\n return null;\n }\n\n return (\n <IconComponent\n className={cn(\n { [`${color}`]: color },\n { [`${additionalCSS}`]: additionalCSS },\n {\n \"hidden dark:block\": secondaryColor && !isDark && isThemed,\n },\n {\n \"dark:hidden\": secondaryColor && isDark && isThemed,\n },\n )}\n style={\n {\n width: size,\n height: size,\n ...(secondaryColorValue && {\n \"--ui-icon-secondary-color\": secondaryColorValue,\n }),\n } as CSSProperties\n }\n {...additionalAttributes}\n />\n );\n },\n [\n LocalIconComponent,\n HeroiconComponent,\n iconName,\n size,\n color,\n additionalCSS,\n lightSecondaryColor,\n darkSecondaryColor,\n name,\n ],\n );\n\n if (lightSecondaryColor && darkSecondaryColor) {\n return (\n <>\n {iconSvg(lightSecondaryColor, false, !!darkSecondaryColor)}\n {iconSvg(darkSecondaryColor, true, true)}\n </>\n );\n } else if (lightSecondaryColor) {\n return iconSvg(lightSecondaryColor, false, !!darkSecondaryColor);\n } else {\n return iconSvg();\n }\n};\n\nexport default Icon;\n"],"names":["React","useCallback","useMemo","defaultIconSecondaryColor","getHeroicon","toPascalCase","IconComponents","convertTailwindClassToVar","cn","getHeroiconComponent","iconName","match","heroiconName","variant","component","Icon","name","size","color","secondaryColor","additionalCSS","additionalAttributes","lightSecondaryColor","darkSecondaryColor","split","endsWith","LocalIconComponent","HeroiconComponent","iconSvg","isDark","isThemed","secondaryColorValue","IconComponent","className","style","width","height"],"mappings":"AAAA,OAAOA,OAAwBC,WAAW,CAAEC,OAAO,KAAQ,OAAQ,AAEnE,QACEC,yBAAyB,CACzBC,WAAW,CACXC,YAAY,KACP,cAAe,AACtB,WAAYC,mBAAoB,mBAAoB,AAGpD,QAASC,yBAAyB,KAAQ,uBAAwB,AAClE,QAAOC,OAAQ,YAAa,CAY5B,MAAMC,qBAAuB,AAC3BC,WAIA,MAAMC,MAAQD,SAASC,KAAK,CAAC,8CAC7B,GAAI,CAACA,MAAO,CACV,OAAO,IACT,CAEA,KAAM,EAAGC,aAAcC,QAAQ,CAAGF,MAClC,MAAMG,UAAYV,YAAYQ,aAAcC,SAC5C,OAAOC,SACT,EAEA,MAAMC,KAAO,CAAC,CACZC,IAAI,CACJC,KAAO,SAAS,CAChBC,KAAK,CACLC,cAAc,CACdC,cAAgB,EAAE,CAClBP,OAAO,CACP,GAAGQ,qBACO,IACV,KAAM,CAACC,oBAAqBC,mBAAmB,CAAG,AAChDJ,CAAAA,gBAAkB,EAAC,EACnBK,KAAK,CAAC,UAER,MAAMd,SACJG,SAAW,CAACG,KAAKS,QAAQ,CAAC,CAAC,CAAC,EAAEZ,QAAQ,CAAC,EAAI,CAAC,EAAEG,KAAK,CAAC,EAAEH,QAAQ,CAAC,CAAGG,KAGpE,MAAMU,mBAAqBxB,QAAQ,KAGjC,OAAOI,cAAc,CACnBD,aAAaK,UACd,AACH,EAAG,CAACA,SAAS,EAGb,MAAMiB,kBAAoBzB,QAAQ,KAChC,OAAOwB,mBAAqB,KAAOjB,qBAAqBC,SAC1D,EAAG,CAACgB,mBAAoBhB,SAAS,EAEjC,MAAMkB,QAAU3B,YACd,CAACkB,eAA6BU,OAAkBC,YAC9C,IAAIC,oBACJ,GAAIZ,eAAgB,CAClBY,oBAAsBxB,0BAA0BY,eAClD,MAAO,GAAIhB,0BAA0Ba,MAAO,CAC1Ce,oBAAsBxB,0BACpBJ,0BAA0Ba,MAE9B,CAGA,MAAMgB,cAAgBN,oBAAsBC,kBAE5C,GAAI,CAACK,cAAe,CAClB,OAAO,IACT,CAEA,OACE,oBAACA,eACCC,UAAWzB,GACT,CAAE,CAAC,CAAC,EAAEU,MAAM,CAAC,CAAC,CAAEA,KAAM,EACtB,CAAE,CAAC,CAAC,EAAEE,cAAc,CAAC,CAAC,CAAEA,aAAc,EACtC,CACE,oBAAqBD,gBAAkB,CAACU,QAAUC,QACpD,EACA,CACE,cAAeX,gBAAkBU,QAAUC,QAC7C,GAEFI,MACE,CACEC,MAAOlB,KACPmB,OAAQnB,KACR,GAAIc,qBAAuB,CACzB,4BAA6BA,mBAC/B,CAAC,AACH,EAED,GAAGV,oBAAoB,EAG9B,EACA,CACEK,mBACAC,kBACAjB,SACAO,KACAC,MACAE,cACAE,oBACAC,mBACAP,KACD,EAGH,GAAIM,qBAAuBC,mBAAoB,CAC7C,OACE,wCACGK,QAAQN,oBAAqB,MAAO,CAAC,CAACC,oBACtCK,QAAQL,mBAAoB,KAAM,MAGzC,MAAO,GAAID,oBAAqB,CAC9B,OAAOM,QAAQN,oBAAqB,MAAO,CAAC,CAACC,mBAC/C,KAAO,CACL,OAAOK,SACT,CACF,CAEA,gBAAeb,IAAK"}
|
package/core/load-sprites.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export default(spritesUrl=>{if(document.querySelector(
|
|
1
|
+
export default((spritesUrl,key)=>{if(document.querySelector(`.ably-sprites-${key}`))return;fetch(spritesUrl).then(response=>response.text()).then(image=>{const container=document.createElement("div");container.className=`ably-sprites-${key}`;container.style.opacity=0;container.style.position="absolute";container.style.width="0";container.style.height="0";container.innerHTML=image;document.body.appendChild(container)}).catch(err=>console.error(err))});
|
|
2
2
|
//# sourceMappingURL=load-sprites.js.map
|
package/core/load-sprites.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/load-sprites.js"],"sourcesContent":["export default (spritesUrl) => {\n if (document.querySelector(
|
|
1
|
+
{"version":3,"sources":["../../src/core/load-sprites.js"],"sourcesContent":["export default (spritesUrl, key) => {\n if (document.querySelector(`.ably-sprites-${key}`)) return;\n\n fetch(spritesUrl)\n .then((response) => response.text())\n .then((image) => {\n const container = document.createElement(\"div\");\n container.className = `ably-sprites-${key}`;\n container.style.opacity = 0;\n container.style.position = \"absolute\";\n container.style.width = \"0\";\n container.style.height = \"0\";\n container.innerHTML = image;\n document.body.appendChild(container);\n })\n .catch((err) => console.error(err));\n};\n"],"names":["spritesUrl","key","document","querySelector","fetch","then","response","text","image","container","createElement","className","style","opacity","position","width","height","innerHTML","body","appendChild","catch","err","console","error"],"mappings":"AAAA,cAAe,CAAA,CAACA,WAAYC,OAC1B,GAAIC,SAASC,aAAa,CAAC,CAAC,cAAc,EAAEF,IAAI,CAAC,EAAG,OAEpDG,MAAMJ,YACHK,IAAI,CAAC,AAACC,UAAaA,SAASC,IAAI,IAChCF,IAAI,CAAC,AAACG,QACL,MAAMC,UAAYP,SAASQ,aAAa,CAAC,MACzCD,CAAAA,UAAUE,SAAS,CAAG,CAAC,aAAa,EAAEV,IAAI,CAAC,AAC3CQ,CAAAA,UAAUG,KAAK,CAACC,OAAO,CAAG,CAC1BJ,CAAAA,UAAUG,KAAK,CAACE,QAAQ,CAAG,UAC3BL,CAAAA,UAAUG,KAAK,CAACG,KAAK,CAAG,GACxBN,CAAAA,UAAUG,KAAK,CAACI,MAAM,CAAG,GACzBP,CAAAA,UAAUQ,SAAS,CAAGT,MACtBN,SAASgB,IAAI,CAACC,WAAW,CAACV,UAC5B,GACCW,KAAK,CAAC,AAACC,KAAQC,QAAQC,KAAK,CAACF,KAClC,CAAA,CAAE"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/remote-blogs-posts.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst fetchBlogPosts = async (store, blogUrl) => {\n try {\n if (!blogUrl) {\n console.log(\n `Skipping fetching blog posts, invalid blogUrl: \"${blogUrl}\"`,\n );\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(blogUrl, options);\n\n if (isJsonResponse(res.headers.get(\"content-type\"))) {\n const payload = await res.json();\n store.dispatch({ type: \"blog/loaded\", payload });\n } else {\n throw new Error(\"Blog posts url is not serving json\");\n }\n } catch (e) {\n console.warn(\"Could not fetch blog posts due to error:\", e);\n }\n};\n\nconst initialState = { recent: null };\n\nconst REDUCER_KEY = \"blogPosts\";\n\nconst reducerBlogPosts = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"blog/loaded\":\n return { ...state, recent: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectRecentBlogPosts = (store) => store.getState()[REDUCER_KEY]?.recent;\n\nexport { fetchBlogPosts, reducerBlogPosts, selectRecentBlogPosts };\n"],"names":["isJsonResponse","fetchBlogPosts","store","blogUrl","console","log","options","headers","accept","cache","credentials","res","fetch","get","payload","json","dispatch","type","Error","e","warn","initialState","recent","REDUCER_KEY","reducerBlogPosts","state","action","selectRecentBlogPosts","getState"],"mappings":"AAEA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,eAAiB,MAAOC,MAAOC,WACnC,GAAI,CACF,GAAI,CAACA,QAAS,CACZC,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEF,QAAQ,CAAC,CAAC,EAE/D,MACF,CAEA,MAAMG,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/core/remote-blogs-posts.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst fetchBlogPosts = async (store, blogUrl) => {\n try {\n if (!blogUrl) {\n console.log(\n `Skipping fetching blog posts, invalid blogUrl: \"${blogUrl}\"`,\n );\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(blogUrl, options);\n\n if (isJsonResponse(res.headers.get(\"content-type\"))) {\n const payload = await res.json();\n store.dispatch({ type: \"blog/loaded\", payload });\n } else {\n throw new Error(\"Blog posts url is not serving json\");\n }\n } catch (e) {\n console.warn(\"Could not fetch blog posts due to error:\", e);\n }\n};\n\nconst initialState = { recent: null };\n\nconst REDUCER_KEY = \"blogPosts\";\n\nconst reducerBlogPosts = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"blog/loaded\":\n return { ...state, recent: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectRecentBlogPosts = (store) => store.getState()[REDUCER_KEY]?.recent;\n\nexport { fetchBlogPosts, reducerBlogPosts, selectRecentBlogPosts };\n"],"names":["isJsonResponse","fetchBlogPosts","store","blogUrl","console","log","options","headers","accept","cache","credentials","res","fetch","get","payload","json","dispatch","type","Error","e","warn","initialState","recent","REDUCER_KEY","reducerBlogPosts","state","action","selectRecentBlogPosts","getState"],"mappings":"AAEA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,eAAiB,MAAOC,MAAOC,WACnC,GAAI,CACF,GAAI,CAACA,QAAS,CACZC,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEF,QAAQ,CAAC,CAAC,EAE/D,MACF,CAEA,MAAMG,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GAWJ,MAX2C,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMT,QAASG,SAEjC,GAAIN,eAAeW,IAAIJ,OAAO,CAACM,GAAG,CAAC,iBAAkB,CACnD,MAAMC,QAAU,MAAMH,IAAII,IAAI,GAC9Bb,MAAMc,QAAQ,CAAC,CAAEC,KAAM,cAAeH,OAAQ,EAChD,KAAO,CACL,MAAM,IAAII,MAAM,qCAClB,CACF,CAAE,MAAOC,EAAG,CACVf,QAAQgB,IAAI,CAAC,2CAA4CD,EAC3D,CACF,EAEA,MAAME,aAAe,CAAEC,OAAQ,IAAK,EAEpC,MAAMC,YAAc,YAEpB,MAAMC,iBAAmB,CACvB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOT,IAAI,EACjB,IAAK,cACH,MAAO,CAAE,GAAGQ,KAAK,CAAEH,OAAQI,OAAOZ,OAAO,AAAC,CAC5C,SACE,OAAOW,KACX,CACF,CACF,EAEA,MAAME,sBAAwB,AAACzB,OAAUA,MAAM0B,QAAQ,EAAE,CAACL,YAAY,EAAED,MAExE,QAASrB,cAAc,CAAEuB,gBAAgB,CAAEG,qBAAqB,CAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GACkB,MADqB,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "17.3.
|
|
3
|
+
"version": "17.3.1-dev.2075de74",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"@storybook/addon-interactions": "^8.6.14",
|
|
24
24
|
"@storybook/react-vite": "^8.6.14",
|
|
25
25
|
"@storybook/test": "^8.6.14",
|
|
26
|
-
"@storybook/test-runner": "^0.
|
|
26
|
+
"@storybook/test-runner": "^0.23.0",
|
|
27
27
|
"@svgr/core": "^8.1.0",
|
|
28
28
|
"@svgr/plugin-jsx": "^8.1.0",
|
|
29
29
|
"@svgr/plugin-svgo": "^8.1.0",
|