@ably/ui - npm Package Compare versions

Comparing version 14.5.0 to 14.5.1

core/Code.js

@@ -1,1 +0,1 @@
-import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS=""})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;return /*#__PURE__*/React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},/*#__PURE__*/React.createElement("pre",{lang:language},/*#__PURE__*/React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;
+import React from"react";import{highlightSnippet,registerDefaultLanguages}from"./utils/syntax-highlighter";import languagesRegistry from"./utils/syntax-highlighter-registry";registerDefaultLanguages(languagesRegistry);const Code=({language,snippet,textSize="ui-text-code",padding="p-32",additionalCSS="",showLines,lineCSS})=>{const HTMLraw=highlightSnippet(language,`${snippet}`.trim())??"";const className=`language-${language} ${textSize}`;const lineCount=snippet.split(/\r\n|\r|\n/).length;return /*#__PURE__*/React.createElement("div",{className:`hljs overflow-auto flex ${padding} ${additionalCSS}`,"data-id":"code"},showLines?/*#__PURE__*/React.createElement("div",null,[...Array(lineCount)].map((_,i)=>/*#__PURE__*/React.createElement("p",{className:`mr-24 font-mono text-neutral-800 ${lineCSS??""}`,key:i},i+1))):null,/*#__PURE__*/React.createElement("pre",{lang:language},/*#__PURE__*/React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

core/Icon.js

@@ -1,1 +0,1 @@
-import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";const convertTailwindClassToVar=className=>className.replace(/text-([a-z0-9-]+)/gi,"var(--color-$1)");const Icon=({name,size="0.75rem",color="",secondaryColor=defaultIconSecondaryColor(name),additionalCSS="",...additionalAttributes})=>/*#__PURE__*/React.createElement("svg",{className:`${color} ${additionalCSS}`,style:{width:size,height:size,...secondaryColor&&{"--ui-icon-secondary-color":convertTailwindClassToVar(secondaryColor)}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}));export default Icon;
+import React from"react";import{defaultIconSecondaryColor}from"./Icon/secondary-colors";const convertTailwindClassToVar=className=>className.replace(/(text|bg)-([a-z0-9-]+)/gi,"var(--color-$2)");const Icon=({name,size="0.75rem",color="",secondaryColor=defaultIconSecondaryColor(name),additionalCSS="",...additionalAttributes})=>/*#__PURE__*/React.createElement("svg",{className:`${color} ${additionalCSS}`,style:{width:size,height:size,...secondaryColor&&{"--ui-icon-secondary-color":convertTailwindClassToVar(secondaryColor)}},...additionalAttributes},/*#__PURE__*/React.createElement("use",{xlinkHref:`#sprite-${name}`}));export default Icon;

core/ProductTile.js

@@ -1,1 +0,1 @@
-import React from"react";import Icon from"./Icon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";const ProductTile=({name,selected,currentPage})=>{const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected?"bg-neutral-300":"bg-neutral-1200 hover:bg-neutral-1100"}`},/*#__PURE__*/React.createElement("div",{className:"flex gap-12"},icon?/*#__PURE__*/React.createElement(Icon,{name:icon,size:"48"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${selected?"text-neutral-800":"text-neutral-500"} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${selected?"text-neutral-1300":"text-neutral-300"} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-700"} font-medium leading-snug`},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block ${selected?"text-neutral-1300":"text-white"}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
+import React from"react";import Icon from"./Icon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${selected?"bg-neutral-300":"bg-neutral-1200 hover:bg-neutral-1100"} ${className??""}`,onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12"},icon?/*#__PURE__*/React.createElement(Icon,{name:icon,size:"48"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${selected?"text-neutral-800":"text-neutral-500"} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${selected?"text-neutral-1300":"text-neutral-300"} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell bg-neutral-1000 rounded-full px-6 py-2 text-neutral-600 tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-700"} font-medium leading-snug`},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`ui-btn-secondary w-full hover:text-neutral-1300 mt-8 text-center inline-block ${selected?"text-neutral-1300":"text-white"}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;

index.d.ts

@@ -30,4 +30,6 @@ /* eslint-disable @typescript-eslint/no-explicit-any */
     additionalCSS?: string;
+    showLines?: boolean;
+    lineCSS?: string;
 };
-const Code: ({ language, snippet, textSize, padding, additionalCSS, }: CodeProps) => import("react/jsx-runtime").JSX.Element;
+const Code: ({ language, snippet, textSize, padding, additionalCSS, showLines, lineCSS, }: CodeProps) => import("react/jsx-runtime").JSX.Element;
 export default Code;
@@ -617,4 +619,6 @@ //# sourceMappingURL=Code.d.ts.map
     currentPage?: boolean;
+    className?: string;
+    onClick?: () => void;
 };
-const ProductTile: ({ name, selected, currentPage }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
+const ProductTile: ({ name, selected, currentPage, className, onClick, }: ProductTileProps) => import("react/jsx-runtime").JSX.Element;
 export default ProductTile;
@@ -621,0 +625,0 @@ //# sourceMappingURL=ProductTile.d.ts.map

package.json

 {
   "name": "@ably/ui",
-  "version": "14.5.0",
+  "version": "14.5.1",
   "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.",
@@ -24,6 +24,6 @@ "repository": {
     "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
-    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/test": "^8.2.9",
     "@swc/cli": "^0.4.0",
@@ -38,9 +38,9 @@ "@swc/core": "^1.4.11",
     "autoprefixer": "^10.0.2",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint": "^8.57.0",
     "http-server": "14.1.1",
+    "msw": "2.4.2",
     "msw-storybook-addon": "^2.0.2",
-    "msw": "2.4.2",
     "prettier": "^3.2.5",
@@ -47,0 +47,0 @@ "storybook": "^8.2.9",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3298222

increased by0.01%

Lines of code

2737

increased by0.15%

No dependency changes