@ably/ui 13.3.0 → 14.0.0-dev.0ed6be7

package/README.md

@@ -1,5 +1,3 @@
-**_Note:_** some features are still in development and their documentation might be incomplete. Lookout for the ⚠️ icon.
-
 # ably-ui
 
 `ably-ui` is the of home of the Ably design system library ([https://ably-ui.herokuapp.com/](https://ably-ui.herokuapp.com/)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.
@@ -20,13 +18,13 @@ In some cases, this is impractical. Some components will be more specialized and
 
 ### Library structure
 
-The library is built out of modules, assets, JavaScript & ruby modules and components. A module is a container for all of those.
+The library is built out of modules, assets, and JavaScript components. A module is a container for all of those.
 
-For example, the `core` module provides the most general elements one can build the “chrome” of a web-based interface — typography, colours, spacing (i.e., containers) etc. The components within the module support our most common needs to build that “chrome”, like navigation elements, footer, hero sections, code samples etc. Assets, JavaScript & ruby modules are all shared between the components in the module.
+For example, the `core` module provides the most general elements one can build the “chrome” of a web-based interface — typography, colours, spacing (i.e., containers) etc. The components within the module support our most common needs to build that “chrome”, like navigation elements, footer, hero sections, code samples etc. Assets, and JavaScript are all shared between the components in the module.
 
 Components do not require assets directly — instead, it's up to the consumer to load the assets and pass them to the components. This ensures flexibility in terms of URLs.
 
-Each module, apart from components, exposes a `scripts.js`, `styles.css` and `MODULE_NAME.rb` files. `scripts.js` contains helper functions, `MODULE_NAME.rb` contains modules that components can include. `styles.css` contains CSS that does not belong to any module in particular.
+Each module, apart from components, exposes a `scripts.js` and `styles.css`. `scripts.js` contains helper functions. `styles.css` contains CSS that does not belong to any module in particular.
 
 ### Installation
 
@@ -39,7 +37,7 @@ npm install @ably/ui
 
 # or
 
-yarn add @ably/ui
+yarn add @ably/ui # Preferred
 ```
 
 To attach the imported JavaScript from the `Core` module to the `window` object:
@@ -121,24 +119,6 @@ Note that depending on the component, you might still need to include CSS & JS f
 import Meganav from "@ably/ui/core/Meganav";
 ```
 
-#### Importing ViewComponent (Rails) components
-
-To use `ably-ui` with [Ruby on Rails](https://rubyonrails.org/) add the `ably-ui` gem to your `Gemfile`:
-
-```ruby
-gem 'ably-ui',
-    '1.0.0',
-    require: 'ably_ui'
-```
-
-Components are exposed as [View Components](https://github.com/github/view_component) and should be available in any view:
-
-```erb
-<%= render(AblyUi::Core::Meganav.new) %>
-```
-
-Note that this loads neither CSS nor JS — these need to still be loaded by a bundler like webpack.
-
 ## Usage
 
 ### Icons
@@ -147,16 +127,10 @@ Putting SVG files inside a`src/MODULE_NAME/icons` folder will add them to a per-
 
 Usage with the `Icon` React component:
 
-```jsx
+```tsx
 <Icon name="icon-display-live-chat" size="3rem" additionalCSS="block mb-16" />
 ```
 
-Usage with `Icon` VW component:
-
-```rb
-<%= render(AblyUi::Core::Icon.new(name: "icon-gui-disclosure-arrow", size: "1rem", additional_css: "align-middle transform rotate-180 mr-4")) %>
-```
-
 Usage without a component:
 
 ```html
@@ -168,7 +142,7 @@ Usage without a component:
 
 Usage without a component, in React, with hover states. Note the [group](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover) class:
 
-```jsx
+```tsx
 <a
   href="{url}"
   className="text-gui-default hover:text-gui-hover focus:text-gui-focus group"
@@ -186,12 +160,6 @@ See https://ably-ui.herokuapp.com/components/icon for more details.
 
 Font assets are not included automagically but are part of the repo, together with an example of font-face file; see `src/core/fonts` for examples. Make sure to include the licence file declaration on usage.
 
-See `preview/app/javascript/styles/application.css` for an example when using webpacker/rails.
-
-#### Rails
-
-Because the gem directories are on the asset path (see [Importing ViewComponent (Rails) components](#user-content-importing-viewcomponent-rails-components) section), they will work with standard asset helpers (i.e., `asset_path`).
-
 ### Accessibility
 
 An important part of ably-ui is ensuring the produced UI is accessible to as wide range of users as possible. All components should adhere to at least AA accessibility standards. In most cases, this can be accomplished by following a few simple rules:
@@ -205,73 +173,19 @@ An important part of ably-ui is ensuring the produced UI is accessible to as wid
 
 ## Development
 
-The repository includes a “preview” app, which is serves both as a showcase and development environment.
-
-To use, first make sure you install dependencies both for the library and the “preview” app:
-
-```bash
-yarn && bundle
-cd preview
-yarn && bundle
-```
-
-Then, from the root of the repository, run:
-
-```bash
-yarn dev
-```
-
-This will run the app and use the published versions of the `ably-ui`, specified in `preview/Gemfile` and `preview/package.json` NPM package.
-
-### Using the local ably-ui in the preview app
+To visualise the assets in `ably-ui`, there is a Storybook instance, which serves as both a showcase and a development environment.
 
-It's possible to use the local version of ably-ui in the “preview” app. Enabling this, requires separate steps for the `npm` and `ruby` packages.
+Firstly, ensure you have all of the required project dependencies by running `yarn` in the project root.
 
-For `npm`:
-
-```bash
-# in the root directory
-yarn link
-# in the "preview" directory
-yarn link @ably/ui
-```
+Then, to run Storybook, run `yarn storybook` in the project root - it should open automatically in your browser.
 
-For `ruby`:
-
-In `preview/Gemfile` replace the Ably UI gem version number with `path: '../'` like this:
-
-```bash
-# in preview
-gem 'ably-ui', path: '../', require: 'ably_ui'
-```
-
-and run:
-
-```bash
-# in preview
-bundle --no-cache
-```
-
-Why not `bundle config set local.ably-ui ../`? Because that feature is built around the local gem being a separate repo, and works poorly with our config.
-
-A caveat of this approach is that the change `preview/Gemfile` should not be committed, as it will cause the remote app to not build.
-
-### Using a deployed package of ably-ui in the preview app
-
-If at anytime you don't want to use the local NPM package and/or gems any more, you can do:
-
-```bash
-# in "preview" directory
-yarn unlink @ably/ui
-```
-
-Then change back `path` to source `source` in the `Gemfile`. If you need to update `Gemfile.lock` without installing gems, you can run `bundle lock`.
+To build Storybook as if it was a statically built site (i.e. what it looks like when deployed), run `yarn build-storybook` from the project root, go to the generated directory with `cd preview`, and then run `npx http-server` (accepting the prompt to install that package if you haven't done already). The built site will be available at the listed local URL.
 
 #### Publishing pre-release packages for review apps
 
-Make sure you commit & push your work and remove the [development-specific config](#using-the-development-build-of-ably-ui-in-the-preview-app) before doing this.
+Make sure you commit & push your work before doing this.
 
-You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) and [Ruby Gems](https://guides.rubygems.org/api-key-scopes/) to publish.
+You will need to authenticate with [npmjs](https://docs.npmjs.com/creating-and-viewing-access-tokens) to publish.
 
 After the above, you should have:
 
@@ -280,11 +194,6 @@ After the above, you should have:
   ```
   //registry.npmjs.org/:_authToken=${NPM_TOKEN}
   ```
-- a `~/.gem/credentials` file that has your Rubygems API key:
-  ```
-  ---
-  :rubygems_api_key: REPLACE_THIS_WITH_YOUR_OWN_API_KEY
-  ```
 
 To deploy a review app with your in-progress code, you can use the `pre-release` script:
 
@@ -298,11 +207,10 @@ This script is a combination of two scripts:
 1. Pre-Release:
 
 - update your local dependencies for ably-ui and run a production build
-- release a gem and a NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
+- release an NPM package with the version built from your current SemVer but adding a pre-release tag based on a short SHA of your HEAD commit
 
 2. Update Pre-Release Version:
 
-- update the preview app
 - commit all the above and push to origin
 
 This will trigger a build of the review app.
@@ -318,8 +226,7 @@ All components live in `src` and follow a directory and filename convention:
   - component directory (TitleCase)
     - `component.js` - this is the entry file for a component and is the only required file
     - `components.css` - additional CSS
-    - for ruby components, you need `component.rb` and `component.html.erb`
-    - for react, `components.jsx`
+    - for react, `components.tsx`
 
 For example:
 
@@ -328,11 +235,9 @@ For example:
   - script.js
   - styles.css
   - Accordion
-    - component.rb
-    - component.html.erb
     - component.js
     - component.css
-    - component.jsx
+    - component.tsx
 ```
 
 #### CSS
@@ -345,50 +250,19 @@ If using positioning any other than static, be mindful of creating stacking cont
 
 By default, [Prettier](https://prettier.io/) & [ESLint](https://eslint.org/) will handle most of the frontend files. You can use them through your editor (which should pick up the relevant config files) or on the command line (see `scripts` in package.json).
 
-Neither handles `erb` and `rb` files. The only config for those files is at the moment in `editorconfig`.
-
-#### Note
-
-Until we have set up formatting scripts for `erb` it's worth setting up [htmlbeautifier](https://github.com/threedaymonk/htmlbeautifier) for your editor (for example with https://github.com/aliariff/vscode-erb-beautify if you use VS Code) and tracking [this issue in Prettier](https://github.com/prettier/plugin-ruby/issues/371), as Prettier is much faster and hopefully will get support for `erb`.
-
 ### Adding a new component
 
 #### To add a new component:
 
-1. Add it in `modules-config.js`
-2. Create a folder in `src`, in the module of your choice. The folder name should be TitleCase.
-3. Add a `component.js`
+1. Create a folder in `src`, in the module of your choice (i.e. `core`). The folder name should be TitleCase.
+2. Add a `component.tsx`
 
-- if the component has custom CSS, add a `component.css` file as well. Add `@layer components {}` to its contents. Import the CSS file in `component.js`
-- if you need a VW component, add `component.rb` and `component.html.erb`
-- if you need a React component, add a `components.jsx`
+- also add an empty `component.js` file (current legacy requirement)
+- if the component has custom CSS, add a `component.css` file as well.
 
-#### To see this component in the preview app:
+#### To see this component in Storybook:
 
-##### For React components:
-
-1. Import the file into `preview/app/javascript/packs/application.js` and add as input to the `reactRenderer`
-2. If it contains custom CSS, import it into `preview/app/javascript/styles/application.css`
-3. Add a template in `preview/app/views/components`, with a `_react` suffix, i.e. `my_component_react.html.erb`
-
-##### For VW components:
-
-1. You will need to restart the server for Rails to load the component (this will also need to happen after any changes to `component.rb`)
-1. If it contains custom CSS, import it into `preview/app/javascript/styles/application.css`
-1. Add a template in `preview/app/views/components`, with a `_vw` suffix, i.e. `my_component_vw.html.erb`
-1. If the component has any JavaScript, import it in the view (`preview/app/views/components/my_component_vw.html.erb`) and initialize:
-
-```rb
-<% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/my_component/component' %>
-  <script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", () => {
-      const container = document.querySelector("[data-id=my_component]");
-      AblyUI.Core.MyComponent(container);
-    });
-  </script>
-<% end %>
-```
+Create a `[COMPONENT_NAME].stories.tsx` file alongside your `component` assets, following the examples of other Storybook stories, or their online documentation for guidance. When running Storybook, the story should be picked up and rendered in place automatically.
 
 ### Publishing
 
@@ -396,13 +270,13 @@ We use [Semantic Versioning 2.0.0](https://semver.org/) to version different lib
 
 Packages are published to the [GitHub private registry](https://github.com/features/packages).
 
-Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the private NPM and gem registries as well as publishing new artefacts in the CDN, with the version taken from the tag of the GitHub release. ⚠️
+Publishing is done by tagging a release in GitHub. This triggers a GitHub action that pushes to the private NPM registry as well as publishing new artefacts in the CDN, with the version taken from the tag of the GitHub release.
 
 This will trigger GitHub actions in supported apps (currently [Voltaire](http://github.com/ably/voltaire) & [Website](http://github.com/ably/website)) to create a PR with an ably-ui version update.
 
 **To trigger a release:**
 
-- Make sure you have run pre-release script `./pre-release.sh` (This updates the gem and the npm package version for ably-ui in the following files `Gemfile`, `package.json`, `version.rb`).
+- Make sure you have run pre-release script `./pre-release.sh` (This updates the npm package version for ably-ui in `package.json`).
 - Merge your PR into `main` after it has been approved.
 - On the Github [Ably-UI](http://github.com/ably/ably-ui) repo, [create a new release](https://github.com/ably/ably-ui/releases/new) tag.
 - Create a new tag with the new version number for the release.
@@ -411,10 +285,9 @@ This will trigger GitHub actions in supported apps (currently [Voltaire](http://
 - Click on the Autogenerate release notes button.
 - Publish Release.
 - Check the Github `Actions` tab in the repo to make sure the release is green.
+- Upon successful release, a compiled version of the Storybook site will be deployed to Github Pages.
 
-This will release the packages, update library & preview app and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website.
-
-_Note: If the version number of the gem has been yanked you will need to increment the version number._
+This will release the packages and update library and create & push the commit & tag, and also create corresponding PRs in Voltaire & Website. It will also deploy a new Storybook site to [https://ably.github.io/ably-ui/](https://ably.github.io/ably-ui/).
 
 ### Running tests
 

package/core/Accordion.js

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

package/core/Code/component.css

@@ -1,72 +1 @@
-@layer base {
-  @import url("https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,600;0,700;1,600;1,700&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800&display=swap");
-  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200;300;400;500;600;700;800&display=swap");
-}
-
-@layer components {
-  .hljs {
-    background: var(--syntax-black);
-    color: var(--syntax-light-grey);
-  }
-
-  .hljs-emphasis {
-    @apply italic;
-  }
-
-  .hljs-strong {
-    @apply font-bold;
-  }
-
-  .hljs-comment,
-  .hljs-quote {
-    color: var(--syntax-dark-grey);
-  }
-
-  .hljs-variable,
-  .hljs-template-variable,
-  .hljs-tag,
-  .hljs-name,
-  .hljs-selector-id,
-  .hljs-selector-class,
-  .hljs-regexp,
-  .hljs-deletion {
-    color: var(--syntax-red);
-  }
-
-  .hljs-number,
-  .hljs-built_in,
-  .hljs-literal,
-  .hljs-type,
-  .hljs-params,
-  .hljs-meta,
-  .hljs-link {
-    color: var(--syntax-orange);
-  }
-
-  .hljs-attribute {
-    color: var(--syntax-yellow);
-  }
-
-  .hljs-string,
-  .hljs-symbol,
-  .hljs-bullet,
-  .hljs-addition {
-    color: var(--syntax-green);
-  }
-
-  .hljs-title,
-  .hljs-section {
-    color: var(--syntax-blue);
-  }
-
-  .hljs-keyword,
-  .hljs-selector-tag {
-    color: var(--syntax-lilac);
-  }
-
-  .hljs-subst {
-    color: var(--syntax-mid-grey);
-  }
-}
-
+@import "../utils/syntax-highlighter.css";

package/core/Code/component.js

@@ -1 +1 @@
-!function(e,i){"object"==typeof exports&&"object"==typeof module?module.exports=i(require("highlight.js/lib/core"),require("highlight.js/lib/languages/bash"),require("highlight.js/lib/languages/cpp"),require("highlight.js/lib/languages/csharp"),require("highlight.js/lib/languages/css"),require("highlight.js/lib/languages/dart"),require("highlight.js/lib/languages/diff"),require("highlight.js/lib/languages/dos"),require("highlight.js/lib/languages/elixir"),require("highlight.js/lib/languages/erlang"),require("highlight.js/lib/languages/go"),require("highlight.js/lib/languages/http"),require("highlight.js/lib/languages/java"),require("highlight.js/lib/languages/javascript"),require("highlight.js/lib/languages/json"),require("highlight.js/lib/languages/kotlin"),require("highlight.js/lib/languages/objectivec"),require("highlight.js/lib/languages/php"),require("highlight.js/lib/languages/plaintext"),require("highlight.js/lib/languages/python"),require("highlight.js/lib/languages/ruby"),require("highlight.js/lib/languages/sql"),require("highlight.js/lib/languages/swift"),require("highlight.js/lib/languages/typescript"),require("highlight.js/lib/languages/xml"),require("highlight.js/lib/languages/yaml"),require("highlightjs-curl/src/languages/curl")):"function"==typeof define&&define.amd?define([,,,,,,,,,,,,,,,,,,,,,,,,,,],i):"object"==typeof exports?exports.AblyUi=i(require("highlight.js/lib/core"),require("highlight.js/lib/languages/bash"),require("highlight.js/lib/languages/cpp"),require("highlight.js/lib/languages/csharp"),require("highlight.js/lib/languages/css"),require("highlight.js/lib/languages/dart"),require("highlight.js/lib/languages/diff"),require("highlight.js/lib/languages/dos"),require("highlight.js/lib/languages/elixir"),require("highlight.js/lib/languages/erlang"),require("highlight.js/lib/languages/go"),require("highlight.js/lib/languages/http"),require("highlight.js/lib/languages/java"),require("highlight.js/lib/languages/javascript"),require("highlight.js/lib/languages/json"),require("highlight.js/lib/languages/kotlin"),require("highlight.js/lib/languages/objectivec"),require("highlight.js/lib/languages/php"),require("highlight.js/lib/languages/plaintext"),require("highlight.js/lib/languages/python"),require("highlight.js/lib/languages/ruby"),require("highlight.js/lib/languages/sql"),require("highlight.js/lib/languages/swift"),require("highlight.js/lib/languages/typescript"),require("highlight.js/lib/languages/xml"),require("highlight.js/lib/languages/yaml"),require("highlightjs-curl/src/languages/curl")):(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Code=i(e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0],e[void 0]))}(this,((e,i,l,a,r,g,s,t,h,u,o,n,b,c,d,p,j,y,q,v,x,k,m,f,S,L,w)=>(()=>{"use strict";var C={9302:i=>{i.exports=e},497:e=>{e.exports=i},6736:e=>{e.exports=l},4260:e=>{e.exports=a},7892:e=>{e.exports=r},8673:e=>{e.exports=g},3523:e=>{e.exports=s},9857:e=>{e.exports=t},2870:e=>{e.exports=h},5964:e=>{e.exports=u},3345:e=>{e.exports=o},132:e=>{e.exports=n},314:e=>{e.exports=b},6257:e=>{e.exports=c},5114:e=>{e.exports=d},6482:e=>{e.exports=p},2519:e=>{e.exports=j},1703:e=>{e.exports=y},7420:e=>{e.exports=q},6941:e=>{e.exports=v},7684:e=>{e.exports=x},5501:e=>{e.exports=k},5098:e=>{e.exports=m},9937:e=>{e.exports=f},6630:e=>{e.exports=S},1469:e=>{e.exports=L},8488:e=>{e.exports=w}},M={};function A(e){var i=M[e];if(void 0!==i)return i.exports;var l=M[e]={exports:{}};return C[e](l,l.exports,A),l.exports}A.n=e=>{var i=e&&e.__esModule?()=>e.default:()=>e;return A.d(i,{a:i}),i},A.d=(e,i)=>{for(var l in i)A.o(i,l)&&!A.o(e,l)&&Object.defineProperty(e,l,{enumerable:!0,get:i[l]})},A.o=(e,i)=>Object.prototype.hasOwnProperty.call(e,i);var T={};return(()=>{A.d(T,{default:()=>le});var e=A(9302),i=A.n(e),l=A(497),a=A.n(l),r=A(6736),g=A.n(r),s=A(4260),t=A.n(s),h=A(7892),u=A.n(h),o=A(8673),n=A.n(o),b=A(9857),c=A.n(b),d=A(3523),p=A.n(d),j=A(5964),y=A.n(j),q=A(2870),v=A.n(q),x=A(7420),k=A.n(x),m=A(3345),f=A.n(m),S=A(132),L=A.n(S),w=A(314),C=A.n(w),M=A(6257),U=A.n(M),H=A(9937),O=A.n(H),P=A(5114),D=A.n(P),E=A(2519),J=A.n(E),N=A(1703),R=A.n(N),_=A(6941),G=A.n(_),K=A(7684),Q=A.n(K),X=A(5098),Y=A.n(X),z=A(6482),B=A.n(z),F=A(5501),I=A.n(F),V=A(6630),W=A.n(V),Z=A(1469),$=A.n(Z),ee=A(8488),ie=A.n(ee);[{label:"Text",key:"text",module:k()},{label:"JS",key:"javascript",module:U()},{label:"TS",key:"typescript",module:O()},{label:"Java",key:"java",module:C()},{label:"Ruby",key:"ruby",module:Q()},{label:"Python",key:"python",module:G()},{label:"PHP",key:"php",module:R()},{label:"Shell",key:"bash",module:a()},{label:"C#",key:"cs",module:t()},{label:"CSS",key:"css",module:u()},{label:"Go",key:"go",module:f()},{label:"HTML",key:"xml",module:W()},{label:"HTTP",key:"http",module:L()},{label:"C++",key:"cpp",module:g()},{label:"Dart",key:"dart",module:n()},{label:"Swift",key:"swift",module:Y()},{label:"Kotlin",key:"kotlin",module:B()},{label:"Objective C",key:"objectivec",module:J()},{label:"Node.js",key:"javascript",module:U()},{label:"JSON",key:"json",module:D()},{label:"DOS",key:"dos",module:c()},{label:"YAML",key:"yaml",module:$()},{label:"Erlang",key:"erlang",module:y()},{label:"Elixir",key:"elixir",module:v()},{label:"Diff",key:"diff",module:p()},{label:"SQL",key:"sql",module:I()},{label:"cURL",key:"curl",module:ie()},{label:"HTML",key:"html",module:W()},{label:"XML",key:"xml",module:W()}].forEach((function(e){var l=e.key,a=e.module;return i().registerLanguage(l,a)}));const le=function(e){if(!e)throw"Missing code element";var l=e.querySelector("pre"),a=e.querySelector("code"),r=l.getAttribute("lang");if(!a||!l||!r)throw"Malformed code element";var g=function(e,l){var a=function(e){var i;switch(e||(e="text"),e.toLowerCase()){case"android":i="java";break;case".net":case"net":case"dotnet":case"csharp":case"c#":i="cs";break;case"objc":case"objective c":i="objectivec";break;case"laravel":i="php";break;case"flutter":i="dart";break;case"node.js":case"js":i="javascript";break;case"ts":i="typescript";break;case"kotlin":case"kt":i="kotlin";break;case"shell":case"fh":case"sh":i="bash";break;case"https":case"http":case"txt":case"plaintext":i="text";break;case"cmd":case"bat":i="dos";break;case"yml":i="yaml";break;case"erl":i="erlang";break;case"patch":i="diff";break;case"svg":i="xml"}return i||e}(e);if("string"==typeof l&&l&&a)return i().highlight(l,{language:a}).value}(r,a.innerHTML);a.innerHTML=g}})(),T.default})()));
+import"./component.css";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/core/Code.js

@@ -0,0 +1 @@
+import React from"react";import"../utils/syntax-highlighter.css";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=""})=>{var _highlightSnippet;const HTMLraw=(_highlightSnippet=highlightSnippet(language,`${snippet}`.trim()))!==null&&_highlightSnippet!==void 0?_highlightSnippet:"";const className=`language-${language} ${textSize}`;return React.createElement("div",{className:`hljs overflow-auto ${padding} ${additionalCSS}`,"data-id":"code"},React.createElement("pre",{lang:language},React.createElement("code",{className:className,dangerouslySetInnerHTML:{__html:HTMLraw}})))};export default Code;

package/core/ConnectStateWrapper/component.js

@@ -1 +0,0 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.ConnectStateWrapper=o())}(this,(()=>({}.default)));

package/core/ConnectStateWrapper.js

@@ -0,0 +1 @@
+import React,{useEffect,useState}from"react";import{connectState,getRemoteDataStore}from"../remote-data-store";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)}),{});setState(resolvedState);Object.keys(selectors).forEach(key=>{connectState(selectors[key],setStateForKey(key))})},[]);const WrappedComponent=props=>React.createElement(Component,{...props,...state});return WrappedComponent};export default ConnectStateWrapper;

package/core/ContactFooter/component.css

@@ -1,12 +1,9 @@
-@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;
-  }
+.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/core/ContactFooter/component.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.AblyUi=t():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.ContactFooter=t())}(this,(()=>(()=>{"use strict";var e={d:(t,o)=>{for(var n in o)e.o(o,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:o[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>r});var o=function(e){return(arguments.length>1&&void 0!==arguments[1]?arguments[1]:document).querySelector("[data-id=".concat(e,"]"))};function n(e,t){e.disabled=!0,e.innerText=t}var i=30;const r=function(){return function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).dataId,t=o(e),r=o("open-chat-widget",t),a=r.dataset.enabledLabel,d=r.dataset.disabledLabel;if(e&&t){var c,u=o("open-chat-widget",t);return n(u,d),function e(t){var o,n,r,d,l=null===(o=window)||void 0===o||null===(n=o.HubSpotConversations)||void 0===n?void 0:n.widget,f=document.querySelector("#hubspot-messages-iframe-container");c=function(e){e.preventDefault(),l.open()},l&&f?(u.addEventListener("click",c),d=a,(r=u).disabled=!1,r.innerText=d):--i&&setTimeout((function(){return e(100)}),t)}(0),function(){n(u,d),u.removeEventListener("click",c)}}}({dataId:"contact-footer"})};return t.default})()));
+import"./component.css";import toggleChatWidget from"../hubspot-chat-toggle";export default(()=>toggleChatWidget({dataId:"contact-footer"}));

package/core/ContactFooter.js

@@ -0,0 +1 @@
+import React,{useEffect}from"react";import Icon from"../Icon/component.tsx";import _absUrl from"../url-base.js";import toggleChatWidget from"../hubspot-chat-toggle";import"./component.css";const ContactFooter=({urlBase})=>{useEffect(()=>toggleChatWidget({dataId:"contact-footer"}),[]);const absUrl=path=>_absUrl(path,urlBase);return React.createElement("div",{className:"ui-contact-footer font-sans antialiased","data-id":"contact-footer"},React.createElement("div",{className:"w-full bp-lg max-w-screen-xl mx-auto py-64 grid grid-cols-1 md:grid-cols-3 ui-grid-gap ui-grid-px"},React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-live-chat",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Live Chat"),React.createElement("p",{className:"ui-text-p1"},"Reach out team of experts over chat powered by Ably.")),React.createElement("button",{type:"button",className:"ui-btn-secondary self-start mt-16",disabled:true,"data-id":"open-chat-widget","data-enabled-label":"Start a live chat","data-disabled-label":"Live chat unavailable"},"Live chat unavailable")),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-call-mobile",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",{className:"flex-grow"},React.createElement("div",{className:"ui-text-h3 mb-24"},"Call us"),React.createElement("p",{className:"ui-text-p1"},React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+1 877 434 5287")," (USA, toll free)"),React.createElement("span",{className:"block"},React.createElement("strong",{className:"font-bold"},"+44 20 3318 4689")," (UK)")))),React.createElement("div",{className:"ui-contact-footer-box"},React.createElement(Icon,{name:"icon-display-tech-account-comms",size:"3rem",additionalCSS:"block mb-16"}),React.createElement("div",null,React.createElement("div",{className:"ui-text-h3 mb-24"},"Technical and account support"),React.createElement("p",{className:"ui-text-p1"},"We're standing by to help with any questions or code.")),React.createElement("a",{className:"ui-btn-secondary self-start p-btn mt-16",href:absUrl("/support")},"Get support now"))))};export default ContactFooter;

package/core/CookieMessage/component.css

@@ -1,14 +1,11 @@
-@layer components {
-  .ui-cookie-message {
-    @apply rounded-lg bg-white font-sans;
-    @apply justify-between items-center;
-    @apply opacity-100 z-50 bottom-0 fixed sm:flex;
-    @apply p-16 mb-16 ml-16;
-    max-width: 70vw;
-    box-shadow: 0px 24px 32px 0px #0000000d;
-    border: 1px solid var(--color-mid-grey);
-    border-left: 0.5rem solid var(--color-electric-cyan);
-    transition: bottom 250ms ease-out, opacity 150ms ease-out;
-  }
+.ui-cookie-message {
+  @apply rounded-lg bg-white font-sans;
+  @apply justify-between items-center;
+  @apply opacity-100 z-50 bottom-0 fixed sm:flex;
+  @apply p-16 mb-16 ml-16;
+  max-width: 70vw;
+  box-shadow: 0px 24px 32px 0px #0000000d;
+  border: 1px solid var(--color-mid-grey);
+  border-left: 0.5rem solid var(--color-electric-cyan);
+  transition: bottom 250ms ease-out, opacity 150ms ease-out;
 }
-

package/core/CookieMessage/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.CookieMessage=o())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
+import"./component.css";

package/core/CookieMessage.js

@@ -0,0 +1 @@
+import React,{useRef,useEffect,useState}from"react";import Cookie from"js-cookie";import"./component.css";import _absUrl from"../url-base";const COOKIE_EXPIRY=365;const CookieMessage=({cookieId,urlBase})=>{const ref=useRef(null);const[hideCookieMessage,setHideCookieMessage]=useState(true);useEffect(()=>{const isCookieSet=Cookie.get(cookieId)?true:false;setHideCookieMessage(isCookieSet)},[]);const handleClose=()=>{var _ref_current;Cookie.set(cookieId,"1",{expires:COOKIE_EXPIRY});(_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.classList.add("bottom-1","opacity-0");setTimeout(()=>setHideCookieMessage(true),500)};const absUrl=path=>_absUrl(path,urlBase);if(hideCookieMessage)return null;return React.createElement("div",{className:"ui-cookie-message",ref:ref},React.createElement("p",{className:"ui-text-p2 pr-32"},React.createElement("a",{href:absUrl("/privacy"),className:"underline"},"How we use cookies")," ","to improve your experience."),React.createElement("button",{className:"ui-btn-secondary mt-12 sm:mt-0 whitespace-nowrap",onClick:handleClose},"Accept and close"))};export default CookieMessage;

package/core/CustomerLogos/component.js

@@ -1 +0,0 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.CustomerLogos=o())}(this,(()=>({}.default)));

package/core/CustomerLogos.js

@@ -0,0 +1 @@
+import React from"react";const CustomerLogos=({companies,additionalCss=""})=>{return React.createElement("section",{className:"w-full bg-white"},React.createElement("ul",{className:`py-64 flex flex-row flex-wrap md:flex-nowrap content-between m-auto items-center ${additionalCss}`},companies.map(company=>React.createElement("li",{key:company.label,className:"flex-auto text-center sm:w-1/3 w-1/2"},React.createElement("img",{alt:company.label,src:company.logo,className:"mx-auto"})))))};export default CustomerLogos;

package/core/DropdownMenu/component.js

@@ -1 +0,0 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.DropdownMenu=o())}(this,(()=>({}.default)));

package/core/DropdownMenu.js

@@ -0,0 +1 @@
+import React,{createContext,useContext,useState,useEffect,useRef}from"react";import Icon from"../Icon/component.tsx";const DropdownMenuContext=createContext({isOpen:false,setOpen:()=>{}});const DropdownMenu=({children})=>{const[isOpen,setOpen]=useState(false);const ref=useRef(null);useEffect(()=>{const clickHandler=e=>{var _ref_current;if((_ref_current=ref.current)===null||_ref_current===void 0?void 0:_ref_current.contains(e.target))return;setOpen(false)};document.addEventListener("click",clickHandler);return()=>{document.removeEventListener("click",clickHandler)}},[]);return React.createElement(DropdownMenuContext.Provider,{value:{isOpen,setOpen}},React.createElement("div",{id:"dropdown-menu",className:"relative",ref:ref},children))};const Trigger=({children,additionalTriggerCSS=""})=>{const{isOpen,setOpen}=useContext(DropdownMenuContext);return React.createElement("button",{id:"menu-trigger",onClick:()=>setOpen(!isOpen),className:`${additionalTriggerCSS} flex items-center p-8 ml-8 group hover:text-gui-hover hover:bg-light-grey active:text-gui-active focus:text-gui-focus focus:outline-none rounded-lg`},React.createElement("span",{className:"leading-normal"},children),React.createElement(Icon,{name:"icon-gui-disclosure-arrow",color:"text-cool-black",size:"1.25rem",additionalCSS:"transform rotate-90 group-hover:text-gui-hover group-active:text-gui-active group-focus:text-gui-focus"}))};const Content=({children,anchorPosition="right",additionalContentCSS})=>{const{isOpen}=useContext(DropdownMenuContext);if(!isOpen){return null}const anchorPositionClasses=anchorPosition==="right"?"right-0":"left-0";return React.createElement("div",{id:"menu-content",className:`${additionalContentCSS} absolute p-8 z-10 border border-mid-grey bg-white rounded shadow-container ${anchorPositionClasses}`,style:{minWidth:275,top:44}},children)};const Link=({url,title,subtitle,iconName,children})=>{return React.createElement("a",{href:url,className:"menu-link group block p-8 hover:bg-light-grey hover:text-cool-black rounded"},React.createElement("p",{className:"mb-4"},title,iconName?React.createElement(Icon,{name:iconName,size:"1rem",color:"text-cool-black",additionalCSS:"align-middle ml-8 relative -top-1 -left-4"}):null),subtitle?React.createElement("p",{className:"ui-text-p3 mb-16"},subtitle):null,children)};DropdownMenu.Trigger=Trigger;DropdownMenu.Content=Content;DropdownMenu.Link=Link;export default DropdownMenu;

package/core/FeaturedLink/component.js

@@ -1 +0,0 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.FeaturedLink=o())}(this,(()=>({}.default)));

package/core/FeaturedLink.js

@@ -0,0 +1 @@
+import React from"react";import Icon from"../Icon/component.tsx";const buildTargetAndRel=(url,newWindow)=>{const props={};if(newWindow){props.target="_blank";if(url.startsWith("/")&&!url.startsWith("//")){props.rel="noopener"}else{props.rel="noopenner noreferrer"}}return props};const FeaturedLink=({url,textSize="text-p2",iconColor="text-cool-black",flush=false,reverse=false,additionalCSS="",newWindow=false,onClick=undefined,children})=>{const targetAndRel=buildTargetAndRel(url,newWindow);return React.createElement("a",{href:url,className:`font-sans font-bold block text-gui-default hover:text-gui-hover focus:text-gui-focus focus:outline-gui-focus group ui-${textSize} ${flush?"":"py-8"} ${additionalCSS}`,style:{"--featured-link-icon-size":`var(${textSize.replace("text","--fs")})`},...targetAndRel,onClick:onClick},reverse?React.createElement(React.Fragment,null,React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle mr-8 relative -top-1 -right-4 transition-all group-hover:right-0 transform rotate-180"}),children):React.createElement(React.Fragment,null,children,React.createElement(Icon,{name:"icon-gui-link-arrow",size:`calc(var(--featured-link-icon-size) * 1.25)`,color:iconColor,additionalCSS:"align-middle ml-8 relative -top-1 -left-4 transition-all group-hover:left-0"})))};export default FeaturedLink;

package/core/Flash/component.css

@@ -1,26 +1,23 @@
-@layer components {
-  .ui-flash {
-    @apply w-full fixed;
-    top: 5.5rem;
-    z-index: calc(var(--stacking-context-page-meganav) - 10);
-    transition: margin-top 200ms;
-  }
-
-  .ui-flash-message {
-    @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
-    transition: opacity 200ms, transform 200ms, height 200ms 200ms,
-      margin-top 200ms 200ms;
-    transform: translateY(-200%) rotateX(-90deg);
-  }
+.ui-flash {
+  @apply w-full fixed;
+  top: 5.5rem;
+  z-index: calc(var(--stacking-context-page-meganav) - 10);
+  transition: margin-top 200ms;
+}
 
-  /* dynamic content inside flash, can't add classes */
-  .ui-flash-text a {
-    @apply underline;
-  }
+.ui-flash-message {
+  @apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
+  transition: opacity 200ms, transform 200ms, height 200ms 200ms,
+    margin-top 200ms 200ms;
+  transform: translateY(-200%) rotateX(-90deg);
+}
 
-  .ui-flash-message-enter {
-    @apply opacity-100;
-    transform: translateY(0) rotateX(0);
-  }
+/* dynamic content inside flash, can't add classes */
+.ui-flash-text a {
+  @apply underline;
 }
 
+.ui-flash-message-enter {
+  @apply opacity-100;
+  transform: translateY(0) rotateX(0);
+}

package/core/Flash/component.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"object"==typeof module?module.exports=o():"function"==typeof define&&define.amd?define([],o):"object"==typeof exports?exports.AblyUi=o():(e.AblyUi=e.AblyUi||{},e.AblyUi.Core=e.AblyUi.Core||{},e.AblyUi.Core.Flash=o())}(this,(()=>(()=>{"use strict";var e={};return e.default})()));
+import"./component.css";

package/core/Flash.js

@@ -0,0 +1 @@
+import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{nanoid}from"nanoid/non-secure";import{getRemoteDataStore}from"../remote-data-store.js";import ConnectStateWrapper from"../ConnectStateWrapper/component.tsx";import Icon from"../Icon/component.tsx";import"./component.css";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes===null||flashes===void 0?void 0:flashes.items).map(flash=>({...flash,id:nanoid(),removed:false}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;