Skip to content

Commit

Permalink
Merge pull request #442 from ably/add-pubsub-icons
Browse files Browse the repository at this point in the history
[WEB-3878] Add icons for pubsub, bump to Storybook 8.2.9
  • Loading branch information
jamiehenson authored Aug 14, 2024
2 parents cb4825c + 161e440 commit 6dce790
Show file tree
Hide file tree
Showing 68 changed files with 1,444 additions and 1,839 deletions.
14 changes: 0 additions & 14 deletions .svgrc

This file was deleted.

21 changes: 10 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ably/ui",
"version": "14.2.0",
"version": "14.3.0",
"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",
Expand All @@ -15,13 +15,13 @@
],
"devDependencies": {
"@mrtkrcm/cypress-plugin-snapshots": "https://github.com/mrtkrcm/cypress-plugin-snapshots#v1.13.0",
"@storybook/addon-essentials": "^8.1.7",
"@storybook/addon-interactions": "^8.1.7",
"@storybook/addon-links": "^8.1.7",
"@storybook/blocks": "^8.1.7",
"@storybook/react": "^8.1.7",
"@storybook/react-vite": "^8.1.7",
"@storybook/test": "^8.1.7",
"@storybook/addon-essentials": "^8.2.9",
"@storybook/addon-interactions": "^8.2.9",
"@storybook/addon-links": "^8.2.9",
"@storybook/blocks": "^8.2.9",
"@storybook/react": "^8.2.9",
"@storybook/react-vite": "^8.2.9",
"@storybook/test": "^8.2.9",
"@swc/cli": "^0.4.0",
"@swc/core": "^1.4.11",
"@typescript-eslint/eslint-plugin": "^7.0.0",
Expand All @@ -36,7 +36,7 @@
"msw": "2.3.5",
"msw-storybook-addon": "^2.0.2",
"prettier": "^3.2.5",
"storybook": "^8.1.7",
"storybook": "^8.2.9",
"svg-sprite": "^2.0.4",
"tailwindcss": "^3.3.6",
"typescript": "5.5.4",
Expand All @@ -45,9 +45,8 @@
"scripts": {
"build:prebuild": "rm -rf core reset",
"build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths",
"build:sprites": "svg-sprite -C .svgrc src/core/icons/*.svg",
"build:cleanup": "mv dist/* . && rm -r dist",
"build": "yarn build:prebuild && yarn build:swc && yarn build:sprites && yarn build:cleanup",
"build": "yarn build:prebuild && yarn build:swc && node sprites.js && 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}",
Expand Down
2 changes: 1 addition & 1 deletion public/mockServiceWorker.js
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
* - Please do NOT serve this file on production.
*/

const PACKAGE_VERSION = '2.3.1'
const PACKAGE_VERSION = '2.3.4'
const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
const activeClientIds = new Set()
Expand Down
64 changes: 64 additions & 0 deletions sprites.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
const path = require("path");
const fs = require("fs");
const svgSprite = require("svg-sprite");

// Configuration for svg-sprite
const config = {
dest: "dist/core",
mode: {
symbol: {
inline: true,
sprite: "../sprites",
},
},
shape: {
id: {
generator: "sprite-%s",
},
},
svg: {
transform: [
function (svg) {
let globalDefs = "";

return svg
.replace(/<defs>(.+?)<\/defs>/g, (_match, def) => {
globalDefs += def;
})
.replace("<symbol", `<defs>${globalDefs}</defs><symbol`);
},
],
},
};

// Create a new SVG sprite instance
const sprite = new svgSprite(config);

// Directory where your individual SVG files are located
const svgDir = path.resolve(__dirname, "src/core/icons");

// Read all SVG files from the directory and add them to the sprite
fs.readdirSync(svgDir).forEach((file) => {
if (file.endsWith(".svg")) {
sprite.add(
path.resolve(svgDir, file),
null,
fs.readFileSync(path.resolve(svgDir, file), "utf-8"),
);
}
});

// Compile the sprite
sprite.compile((err, result) => {
if (err) {
console.error("Error generating SVG sprite:", err);
} else {
// Write the compiled sprite to the destination directory
fs.mkdirSync(path.resolve(__dirname, "dist/core"), { recursive: true });
fs.writeFileSync(
path.resolve(__dirname, "dist", result.symbol.sprite.path),
result.symbol.sprite.contents,
);
console.log("SVG sprite generated successfully!");
}
});
121 changes: 101 additions & 20 deletions src/core/Icon/Icon.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import React from "react";
import Icon from "../Icon";
import loadIcons from "../icons";

export default {
title: "JS Components/Icon",
Expand Down Expand Up @@ -54,47 +55,76 @@ const coreIcons = [

const displayIcons = [
"icon-display-48hrs",
"icon-display-ably-channels",
"icon-display-about-ably-col",
"icon-display-api",
"icon-display-api-keys",
"icon-display-api",
"icon-display-architectural-guidance",
"icon-display-asset-tracking-col",
"icon-display-authentication",
"icon-display-avatar-stack",
"icon-display-browser",
"icon-display-calendar",
"icon-display-call-mobile",
"icon-display-careers-col",
"icon-display-case-studies-col",
"icon-display-chat-col",
"icon-display-chat-stack-col",
"icon-display-cloud-servers",
"icon-display-compare-tech-col",
"icon-display-connection-state-&-recovery",
"icon-display-consumer-groups",
"icon-display-custom-cname",
"icon-display-customers-col",
"icon-display-dedicated-cluster",
"icon-display-deltas",
"icon-display-docs-col",
"icon-display-documentation",
"icon-display-dynamic-channel-groups",
"icon-display-edge-network",
"icon-display-elasticity",
"icon-display-exactly-once-delivery",
"icon-display-examples-col",
"icon-display-fan-out",
"icon-display-firehose",
"icon-display-gdpr",
"icon-display-general-comms",
"icon-display-granular-permissions",
"icon-display-hipaa-mono",
"icon-display-hipaa",
"icon-display-history",
"icon-display-integrations-col",
"icon-display-it-support-access",
"icon-display-it-support-helpdesk",
"icon-display-laptop",
"icon-display-lightbulb-col",
"icon-display-live-chat",
"icon-display-map-pin",
"icon-display-message-batching",
"icon-display-message-persistence",
"icon-display-message-queues",
"icon-display-message",
"icon-display-observe-analytics",
"icon-display-padlock-closed",
"icon-display-platform",
"icon-display-play",
"icon-display-premium-support",
"icon-display-privacy-shield-framework",
"icon-display-push-notifications",
"icon-display-quickstart-guides-col",
"icon-display-resources-col",
"icon-display-rewind",
"icon-display-sdks-col",
"icon-display-send-received-messages",
"icon-display-servers",
"icon-display-shopping-cart",
"icon-display-sla",
"icon-display-chat-col",
"icon-display-soc2-type2-mono",
"icon-display-soc2-type2",
"icon-display-subscription-filters",
"icon-display-system-metadata",
"icon-display-tech-account-comms",
"icon-display-tutorials-demos-col",
"icon-display-integrations-col",
"icon-display-virtual-events-col",
"icon-live-updates-results-metrics-col",
"icon-multi-user-spaces-col",
Expand All @@ -114,25 +144,68 @@ const socialIcons = [

const otherIcons = ["quote"];

const renderIcons = (iconSet: string[]) => (
<div className="grid grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
{iconSet.map((icon: string) => (
<div className="border p-16" key={icon}>
<code className="ui-text-code mb-8 block">{icon}</code>
<div className="border inline-flex flex-0">
<div className="flex pi-checkered-bg">
<Icon
name={icon}
additionalCSS="hover:text-active-orange"
color="text-cool-black"
size="1.5rem"
/>
const techIcons = [
"icon-tech-amqp10",
"icon-tech-apache-kafka",
"icon-tech-apachepulsar",
"icon-tech-awskinesis",
"icon-tech-awslambda",
"icon-tech-awssqs",
"icon-tech-azureservicebus",
"icon-tech-cloudflareworkers",
"icon-tech-csharp",
"icon-tech-flutter",
"icon-tech-gcloudfunctions",
"icon-tech-go",
"icon-tech-ifttt",
"icon-tech-java",
"icon-tech-javascript",
"icon-tech-net",
"icon-tech-objectivec",
"icon-tech-php",
"icon-tech-python",
"icon-tech-react",
"icon-tech-ruby",
"icon-tech-swift",
"icon-tech-terraform",
"icon-tech-zapier",
];

const productIcons = [
"icon-product-asset-tracking",
"icon-product-chat",
"icon-product-liveobjects",
"icon-product-livesync",
"icon-product-pubsub",
"icon-product-spaces",
];

const renderIcons = (iconSet: string[]) => {
loadIcons();

return (
<div className="grid grid-cols-2 sm:grid-cols-4 ui-grid-gap max-w-screen-lg mb-64">
{iconSet.map((icon: string) => (
<div
className="border p-16 flex flex-col sm:flex-row items-center justify-between gap-12"
key={icon}
>
<code className="ui-text-code mb-8 block">{icon}</code>
<div className="border inline-flex flex-0">
<div className="flex pi-checkered-bg">
<Icon
name={icon}
additionalCSS="hover:text-active-orange"
color="text-cool-black"
size="1.5rem"
/>
</div>
</div>
</div>
</div>
))}
</div>
);
))}
</div>
);
};

export const GUIIcons = {
render: () => renderIcons(coreIcons),
Expand All @@ -146,6 +219,14 @@ export const SocialIcons = {
render: () => renderIcons(socialIcons),
};

export const TechIcons = {
render: () => renderIcons(techIcons),
};

export const ProductIcons = {
render: () => renderIcons(productIcons),
};

export const Other = {
render: () => renderIcons(otherIcons),
};
10 changes: 10 additions & 0 deletions src/core/icons/icon-display-ably-channels.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
15 changes: 15 additions & 0 deletions src/core/icons/icon-display-architectural-guidance.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions src/core/icons/icon-display-authentication.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions src/core/icons/icon-display-avatar-stack.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions src/core/icons/icon-display-connection-state-&-recovery.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 6dce790

Please sign in to comment.