@ably/ui 14.1.0-dev.76621d8 → 14.1.0

package/core/styles/dropdowns.css

@@ -0,0 +1,45 @@
+@layer components {
+  .ui-dropdown-base {
+    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 text-p2 flex font-medium bg-transparent;
+    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
+    background-repeat: no-repeat;
+    background-position: center right 16px;
+  }
+
+  .ui-dropdown-base option:disabled {
+    @apply text-neutral-800;
+  }
+
+  .ui-dropdown {
+    @apply ui-dropdown-base py-12;
+  }
+
+  .ui-dropdown-small {
+    @apply ui-dropdown-base py-[10px] text-[14px];
+  }
+
+  /* Special wrapper styles for overriding default Select2 functionality */
+  .ui-dropdown-select2-wrapper .select2 {
+    @apply !w-full;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection {
+    @apply ui-dropdown-small;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection--single {
+    @apply !h-auto;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection__rendered {
+    @apply !leading-relaxed !px-0;
+  }
+
+  .ui-dropdown-select2-wrapper .select2-selection__arrow {
+    @apply hidden;
+  }
+
+  .ui-dropdown-dark {
+    @apply text-white;
+  }
+}

package/core/styles/forms.css

@@ -61,23 +61,4 @@
     /* color: var(--text-dark-grey); */
     color: #76767c;
   }
-
-  .ui-dropdown-base {
-    @apply rounded-lg border border-neutral-500 pl-16 pr-[56px] appearance-none select-none focus:outline-gui-focus focus:outline-4 leading-snug;
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHZpZXdCb3g9IjAgMCAyNCAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjNjY3MDg1IiBkPSJNMTIuOTA0NiAxMkw5LjAwNjcxIDE2LjMzMUwxMC40OTMzIDE3LjY2OUwxNC45OTMzIDEyLjY2OUwxNC45OTMzIDExLjMzMUwxMC40OTMzIDYuMzMxMDVMOS4wMDY3MSA3LjY2ODk4TDEyLjkwNDYgMTJaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCAxMiAxMikiLz4KPC9zdmc+Cg==");
-    background-repeat: no-repeat;
-    background-position: center right 16px;
-  }
-
-  .ui-dropdown-base option:disabled {
-    @apply text-neutral-800;
-  }
-
-  .ui-dropdown {
-    @apply ui-dropdown-base py-12;
-  }
-
-  .ui-dropdown-small {
-    @apply ui-dropdown-base py-8;
-  }
 }

package/core/styles.components.css

@@ -3,6 +3,7 @@
 @import "./styles/text.css";
 @import "./styles/forms.css";
 @import "./styles/toggles.css";
+@import "./styles/dropdowns.css";
 
 @layer components {
   .ui-input {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "14.1.0-dev.76621d8",
+  "version": "14.1.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",
@@ -8,7 +8,6 @@
   },
   "license": "Apache-2.0",
   "files": [
-    "src",
     "core",
     "reset",
     "tailwind.config.js",
@@ -25,7 +24,7 @@
     "@storybook/test": "^8.1.7",
     "@swc/cli": "^0.3.10",
     "@swc/core": "^1.4.11",
-    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.0.2",

package/src/core/Accordion/Accordion.stories.tsx

@@ -1,39 +0,0 @@
-import React from "react";
-import Accordion, { AccordionProps } from "../Accordion";
-
-export default {
-  title: "JS Components/Accordion",
-  component: Accordion,
-  args: {
-    data: [
-      {
-        name: "Item 1",
-        content: "Content 1",
-      },
-      {
-        name: "Item 2",
-        content: "Content 2",
-      },
-      {
-        name: "Item 3",
-        content: "Content 3",
-      },
-      {
-        name: "Item 4",
-        content: "Content 4",
-      },
-    ],
-    autoClose: false,
-    topBorder: false,
-    bottomBorder: false,
-    arrowIcon: false,
-  },
-};
-
-export const Default = {};
-
-export const AutoClose = {
-  render: (args: AccordionProps) => (
-    <Accordion data={args.data} autoClose={true} />
-  ),
-};

package/src/core/Accordion.tsx

@@ -1,149 +0,0 @@
-import React, { useState, ReactNode, JSX } from "react";
-import Icon from "./Icon";
-
-type AccordionData = {
-  name: string;
-  content: ReactNode;
-};
-
-type AccordionRowProps = {
-  bottomBorder?: boolean;
-  topBorder?: boolean;
-  active: boolean;
-  last: boolean;
-  name: string;
-  index;
-  children: ReactNode;
-  arrowIcon?: boolean;
-  setActiveIndex: (index: number) => void;
-};
-
-export type AccordionProps = {
-  data: AccordionData[];
-  arrowIcon?: boolean;
-  topBorder?: boolean;
-  bottomBorder?: boolean;
-  id?: string;
-  autoClose?: boolean;
-  className?: string;
-};
-
-const AccordionRow = ({
-  name,
-  children,
-  index,
-  setActiveIndex,
-  active,
-  topBorder,
-  bottomBorder,
-  last,
-  arrowIcon,
-}: AccordionRowProps) => {
-  let iconActive: JSX.Element, iconInactive: JSX.Element;
-  const handleSetIndex = () => {
-    setActiveIndex(index);
-  };
-
-  if (arrowIcon) {
-    iconActive = (
-      <Icon
-        name="icon-gui-disclosure-arrow"
-        color="text-dark-grey"
-        size="1.5rem"
-        additionalCSS="-rotate-90"
-      />
-    );
-    iconInactive = (
-      <Icon
-        name="icon-gui-disclosure-arrow"
-        color="text-dark-grey"
-        size="1.5rem"
-        additionalCSS="rotate-90"
-      />
-    );
-  } else {
-    iconActive = (
-      <Icon name="icon-gui-minus" color="text-dark-grey" size="1.5rem" />
-    );
-    iconInactive = (
-      <Icon name="icon-gui-plus" color="text-dark-grey" size="1.5rem" />
-    );
-  }
-
-  return (
-    <div
-      className={`border-mid-grey ${last && !bottomBorder ? "" : "border-b"} ${
-        topBorder ? "border-t" : ""
-      }`}
-    >
-      <button
-        type="button"
-        onClick={handleSetIndex}
-        className={`flex w-full px-0 focus:outline-none py-20`}
-      >
-        <span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
-        <span className="ml-auto">{active ? iconActive : iconInactive}</span>
-      </button>
-
-      <section
-        className="ui-text-p2 transition-all overflow-hidden"
-        style={{
-          maxHeight: active ? "500px" : "0",
-          paddingBottom: active ? "1.5rem" : "0",
-        }}
-      >
-        {children}
-      </section>
-    </div>
-  );
-};
-
-const Accordion = ({
-  data,
-  id = "id-accordion",
-  topBorder,
-  bottomBorder,
-  arrowIcon,
-  autoClose,
-  className,
-}: AccordionProps) => {
-  const [activeIndexes, setActiveIndexes] = useState<number[]>([]);
-
-  const handleSetIndex = (index: number) => {
-    const currentIndexIsActive = activeIndexes.includes(index);
-
-    if (autoClose) {
-      setActiveIndexes(currentIndexIsActive ? [] : [index]);
-    } else {
-      setActiveIndexes(
-        currentIndexIsActive
-          ? activeIndexes.filter((i) => i !== index)
-          : [...activeIndexes, index],
-      );
-    }
-  };
-
-  return (
-    <div className={className} id={id}>
-      {data.map((item, currentIndex) => {
-        return (
-          <AccordionRow
-            key={item.name}
-            name={item.name}
-            arrowIcon={arrowIcon}
-            index={currentIndex}
-            last={data.length === currentIndex + 1}
-            topBorder={topBorder && currentIndex === 0}
-            bottomBorder={bottomBorder && data.length === currentIndex + 1}
-            active={activeIndexes.includes(currentIndex)}
-            setActiveIndex={handleSetIndex}
-          >
-            {item.content}
-          </AccordionRow>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Accordion;

package/src/core/Code/Code.stories.tsx

@@ -1,71 +0,0 @@
-import Code from "../Code";
-
-export default {
-  title: "JS Components/Code",
-  component: Code,
-  tags: ["autodocs"],
-};
-
-export const Javascript = {
-  args: {
-    language: "javascript",
-    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
-var channel = ably.channels.get('web-pal');
-    
-// Subscribe to messages on channel
-channel.subscribe('greeting', function(message) {
-  alert(message.data);
-});`,
-  },
-};
-
-export const Swift = {
-  args: {
-    language: "swift",
-    snippet: `let ably = ARTRealtime(key: "1WChTA.mc0Biw:kNfiYG4KiPgmHHgH")
-let channel = ably.channels.get("web-pal")
-
-// Subscribe to messages on channel
-channel.subscribe("greeting") { message in
-  print("\\(message.data)")
-}`,
-  },
-};
-
-export const Java = {
-  args: {
-    language: "java",
-    snippet: `AblyRealtime ably = new AblyRealtime("1WChTA.mc0Biw:kNfiYG4KiPgmHHgH");
-Channel channel = ably.channels.get("web-pal");
-
-/* Subscribe to messages on channel */
-
-MessageListener listener;
-listener = new MessageListener() {
-  @Override
-  public void onMessage(Message message) {
-    System.out.print(message.data);
-  };
-};
-channel.subscribe("greeting", listener);`,
-  },
-};
-
-export const Kotlin = {
-  args: {
-    language: "kotlin",
-    snippet: `var ably = new Ably.Realtime('1WChTA.mc0Biw:kNfiYG4KiPgmHHgH');
-val exampleConstraints = DefaultResolutionConstraints(
-  DefaultResolutionSet( // this constructor provides one Resolution for all states
-      Resolution(
-          accuracy = Accuracy.BALANCED,
-          desiredInterval = 1000L,
-          minimumDisplacement = 1.0
-      )
-  ),
-  proximityThreshold = DefaultProximity(spatial = 1.0),
-  batteryLevelThreshold = 10.0f,
-  lowBatteryMultiplier = 2.0f
-)`,
-  },
-};

package/src/core/Code/component.css

@@ -1 +0,0 @@
-@import "../utils/syntax-highlighter.css";

package/src/core/Code/component.js

@@ -1,27 +0,0 @@
-// Note: importing syntax-highlighter here means the component.js file will include
-// all the language dependecies, creating a large a bundle. Prefer using the highlighter serverside.
-import {
-  highlightSnippet,
-  registerDefaultLanguages,
-} from "../utils/syntax-highlighter";
-
-import languagesRegistry from "../utils/syntax-highlighter-registry";
-
-registerDefaultLanguages(languagesRegistry);
-
-function highlightEl(el) {
-  if (!el) throw "Missing code element";
-
-  const pre = el.querySelector("pre");
-  const code = el.querySelector("code");
-  const language = pre.getAttribute("lang");
-
-  if (!code || !pre || !language) throw "Malformed code element";
-
-  const { innerHTML } = code;
-  const html = highlightSnippet(language, innerHTML);
-
-  code.innerHTML = html;
-}
-
-export default highlightEl;

package/src/core/Code.tsx

@@ -1,44 +0,0 @@
-import React from "react";
-
-import {
-  highlightSnippet,
-  registerDefaultLanguages,
-} from "./utils/syntax-highlighter";
-import languagesRegistry from "./utils/syntax-highlighter-registry";
-
-registerDefaultLanguages(languagesRegistry);
-
-type CodeProps = {
-  language: string;
-  snippet: string;
-  textSize?: string;
-  padding?: string;
-  additionalCSS?: string;
-};
-
-const Code = ({
-  language,
-  snippet,
-  textSize = "ui-text-code",
-  padding = "p-32",
-  additionalCSS = "",
-}: CodeProps) => {
-  const HTMLraw = highlightSnippet(language, `${snippet}`.trim()) ?? "";
-  const className = `language-${language} ${textSize}`;
-
-  return (
-    <div
-      className={`hljs overflow-auto ${padding} ${additionalCSS}`}
-      data-id="code"
-    >
-      <pre lang={language}>
-        <code
-          className={className}
-          dangerouslySetInnerHTML={{ __html: HTMLraw }}
-        />
-      </pre>
-    </div>
-  );
-};
-
-export default Code;

package/src/core/ConnectStateWrapper.tsx

@@ -1,43 +0,0 @@
-import React, { useEffect, useState } from "react";
-
-import { connectState, getRemoteDataStore } from "./remote-data-store";
-
-/*
-  Connect a react component to a global store.
-  This is similar to what react-redux does but uses our global store so
-  can share state with other React mount points or anything that uses the
-  store.
-  - selectors is an object where keys are your prop names and values are your select
-  functions that work on the store to retrieve the state you are interested in
-  - initial state is set in useEffect so the wrapped component needs to handle it's props set to undefined initially
-*/
-
-const ConnectStateWrapper = (Component, selectors) => {
-  const [state, setState] = useState({});
-
-  const setStateForKey = (key) => (storeState) =>
-    setState(() => ({ [key]: storeState }));
-
-  useEffect(() => {
-    const store = getRemoteDataStore();
-    const resolvedState = Object.keys(selectors).reduce(
-      (acc, key) => ({ ...acc, [key]: selectors[key](store) }),
-      {},
-    );
-
-    // Set initial state
-    setState(resolvedState);
-
-    // Create a store subscription for each selector. Depending on your use case, this can be inefficient.
-    // When optimising for renders, look for wins with selectors better for your use and using connectState directly.
-    Object.keys(selectors).forEach((key) => {
-      connectState(selectors[key], setStateForKey(key));
-    });
-  }, []);
-
-  const WrappedComponent = (props) => <Component {...props} {...state} />;
-
-  return WrappedComponent;
-};
-
-export default ConnectStateWrapper;

package/src/core/ContactFooter/ContactFooter.stories.tsx

@@ -1,11 +0,0 @@
-import ContactFooter from "../ContactFooter";
-
-export default {
-  title: "JS Components/Contact Footer",
-  component: ContactFooter,
-  parameters: {
-    layout: "fullscreen",
-  },
-};
-
-export const Default = {};

package/src/core/ContactFooter/component.css

@@ -1,11 +0,0 @@
-@layer components {
-  .ui-contact-footer {
-    background-size: 100% 100%;
-    background-position: right center;
-    @apply w-full bg-gradient-active-orange;
-  }
-
-  .ui-contact-footer-box {
-    @apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
-  }
-}

package/src/core/ContactFooter/component.js

@@ -1,2 +0,0 @@
-import toggleChatWidget from "../hubspot-chat-toggle";
-export default () => toggleChatWidget({ dataId: "contact-footer" });