diff --git a/.storybook/application.css b/.storybook/application.css
index 37b2d1916..7bb271778 100644
--- a/.storybook/application.css
+++ b/.storybook/application.css
@@ -28,3 +28,33 @@
var(--double) var(--double),
var(--double) var(--double);
}
+
+.ui-theme-dark,
+.ui-theme-dark .sbdocs {
+ @apply bg-neutral-1300;
+}
+
+.ui-theme-dark .sb-bar,
+.ui-theme-dark .sb-anchor > p > code {
+ @apply bg-neutral-1200;
+}
+
+.ui-theme-dark .docblock-code-toggle {
+ @apply bg-neutral-1200 text-neutral-000;
+}
+
+.ui-theme-dark .sbdocs-content > *,
+.ui-theme-dark .sb-anchor > h3,
+.ui-theme-dark .sb-anchor > p,
+.ui-theme-dark .sb-anchor > p > code {
+ @apply text-neutral-000;
+}
+
+.ui-theme-dark .sbdocs td,
+.ui-theme-dark .sbdocs th {
+ @apply text-neutral-200;
+}
+
+.ui-theme-dark .sbdocs td {
+ @apply !bg-neutral-1100 text-neutral-200;
+}
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index 214641d38..96a24aa1c 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -52,8 +52,8 @@ const preview = {
brandImage: brandImage,
},
stylePreview: true,
- darkClass: ["bg-neutral-1300"],
- lightClass: ["bg-neutral-000"],
+ darkClass: ["ui-theme-dark"],
+ lightClass: ["ui-theme-light"],
},
},
loaders: [mswLoader],
diff --git a/package.json b/package.json
index 3da91365a..293649efb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@ably/ui",
- "version": "14.8.0",
+ "version": "14.9.0-dev.4cf104c",
"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.",
"repository": {
"type": "git",
@@ -15,6 +15,9 @@
"index.d.ts"
],
"types": "index.d.ts",
+ "msw": {
+ "workerDirectory": "./public"
+ },
"devDependencies": {
"@storybook/addon-a11y": "^8.4.0",
"@storybook/addon-essentials": "^8.4.0",
@@ -59,9 +62,8 @@
"build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap",
"build:tsc": "tsc && node tsc.js && rm -r types",
"build:cleanup": "mv dist/* . && rm -r dist",
- "build:colors": "ts-node scripts/compute-colors.ts",
"build:sprites": "ts-node scripts/generate-sprites.ts",
- "build": "yarn build:prebuild && yarn build:colors && yarn build:sprites && yarn build:swc && yarn build:tsc && yarn build:cleanup",
+ "build": "yarn build:prebuild && yarn build:sprites && yarn build:swc && yarn build:tsc && yarn build:cleanup",
"watch": "yarn build:swc -w",
"format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
"format:write": "prettier -w *.{js,ts} src/**/*.{js,ts,tsx}",
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
index cbd28e53a..8c13930ac 100644
--- a/public/mockServiceWorker.js
+++ b/public/mockServiceWorker.js
@@ -8,8 +8,8 @@
* - Please do NOT serve this file on production.
*/
-const PACKAGE_VERSION = '2.3.4'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.1'
+const INTEGRITY_CHECKSUM = '07a8241b182f8a246a7cd39894799a9e'
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
const activeClientIds = new Set()
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
sendToClient(client, {
type: 'MOCKING_ENABLED',
- payload: true,
+ payload: {
+ client: {
+ id: client.id,
+ frameType: client.frameType,
+ },
+ },
})
break
}
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
async function resolveMainClient(event) {
const client = await self.clients.get(event.clientId)
+ if (activeClientIds.has(event.clientId)) {
+ return client
+ }
+
if (client?.frameType === 'top-level') {
return client
}
diff --git a/scripts/compute-colors.ts b/scripts/compute-colors.ts
deleted file mode 100644
index 95e8a2511..000000000
--- a/scripts/compute-colors.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import fs from "fs";
-import path from "path";
-import { invertTailwindClassVariant } from "../src/core/styles/colors/utils";
-import { colors, prefixes, variants } from "../src/core/styles/colors/types";
-
-const directoryPath = path.join(__dirname, "../src");
-const outputPath = path.join(
- __dirname,
- "../src/core/styles/colors",
- "computed-colors.json",
-);
-
-const joinedVariants = variants.join("|");
-const joinedPrefixes = prefixes.join("|");
-const joinedColors = colors.join("|");
-const pattern = `themeColor\\("((?:${joinedVariants}-)(${joinedPrefixes})-(${joinedColors})-(000|[1-9]00|1[0-3]00))"\\)`;
-const regex = new RegExp(pattern, "g");
-
-const findStringInFiles = (dir: string) => {
- const results: string[] = [];
-
- const readDirectory = (dir: string) => {
- let files: string[];
- try {
- files = fs.readdirSync(dir);
- } catch (error) {
- console.error(`Error reading directory ${dir}:`, error);
- return;
- }
-
- files.forEach((file) => {
- const filePath = path.join(dir, file);
- let stat;
- try {
- stat = fs.statSync(filePath);
- } catch (error) {
- console.error(`Error accessing ${filePath}:`, error);
- return;
- }
-
- if (stat.isDirectory()) {
- readDirectory(filePath);
- } else if (filePath.endsWith(".tsx")) {
- let content = "";
- try {
- content = fs.readFileSync(filePath, "utf-8");
- const matches = [...content.matchAll(regex)].map((match) => match[1]);
-
- if (matches.length > 0) {
- results.push(...matches);
- }
- } catch (error) {
- console.error(`Error reading file ${filePath}:`, error);
- return;
- }
- }
- });
- };
-
- readDirectory(dir);
- return Array.from(new Set(results)).sort();
-};
-
-const matches = findStringInFiles(directoryPath);
-
-const flippedMatches = matches.map((match) =>
- invertTailwindClassVariant(match),
-);
-
-try {
- const outputDir = path.dirname(outputPath);
- if (!fs.existsSync(outputDir)) {
- fs.mkdirSync(outputDir, { recursive: true });
- }
- fs.writeFileSync(outputPath, JSON.stringify(flippedMatches));
- console.log(
- `🎨 Tailwind theme classes have been computed and written to JSON files.`,
- );
-} catch (error) {
- console.error(`Error persisting computed colors:`, error);
-}
diff --git a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
index 9678682c5..82458df10 100644
--- a/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
+++ b/src/core/ContactFooter/__snapshots__/ContactFooter.stories.tsx.snap
@@ -6,7 +6,7 @@ exports[`JS Components/Contact Footer Default smoke-test 1`] = `
>