Merge pull request #223 from ably/move-all-dependecies-to-externals

Move all dependecies to externals

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (8.7.0.dev.24cbbe4)
+    ably-ui (8.7.0.dev.9b0589d)
       view_component (>= 2.33, < 2.50)
 
 GEM

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '8.7.0.dev.24cbbe4'
+  VERSION = '8.7.0.dev.9b0589d'
 end

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "8.7.0-dev.24cbbe4",
+  "version": "8.7.0-dev.9b0589d",
   "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",
@@ -34,6 +34,7 @@
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-react": "^7.21.5",
     "extra-watch-webpack-plugin": "^1.0.3",
+    "find-imports": "^1.1.0",
     "mini-css-extract-plugin": "^1.2.1",
     "null-loader": "^4.0.1",
     "postcss": "^8.1.10",
@@ -42,7 +43,6 @@
     "postcss-import": "^13.0.0",
     "postcss-loader": "^4.0.4",
     "prettier": "^2.3.0",
-    "prop-types": "^15.7.2",
     "svg-spritemap-webpack-plugin": "^3.7.1",
     "tailwindcss": "^2.0.1",
     "tailwindcss-filters": "^3.0.0",
@@ -67,13 +67,13 @@
   "dependencies": {
     "addsearch-js-client": "^0.7.0",
     "array-flat-polyfill": "^1.0.1",
-    "deepmerge": "^4.2.2",
     "dompurify": "^2.2.9",
     "highlight.js": "^10.7.2",
+    "highlightjs-curl": "^1.3.0",
     "js-cookie": "^2.2.1",
-    "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "nanoid": "^4.0.0",
+    "prop-types": "^15.7.2",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "redux": "^4.0.5",

preview/Gemfile

@@ -37,7 +37,7 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '8.7.0.dev.24cbbe4', require: 'ably_ui'
+gem 'ably-ui', '8.7.0.dev.9b0589d', require: 'ably_ui'
 
 # https://stackoverflow.com/questions/71191685/visit-psych-nodes-alias-unknown-alias-default-psychbadalias
 gem 'psych', '< 4'

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (8.7.0.dev.24cbbe4)
+    ably-ui (8.7.0.dev.9b0589d)
       view_component (>= 2.33, < 2.50)
     actioncable (6.0.5.1)
       actionpack (= 6.0.5.1)
@@ -175,7 +175,7 @@ PLATFORMS
   x86_64-linux
 
 DEPENDENCIES
-  ably-ui (= 8.7.0.dev.24cbbe4)
+  ably-ui (= 8.7.0.dev.9b0589d)
   bootsnap (>= 1.4.2)
   byebug
   dotenv-rails

preview/app/javascript/packs/code-vw.js

@@ -0,0 +1,8 @@
+import highlightEl from "@ably/ui/core/Code/component";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const blocks = document.querySelectorAll("[data-id=code]");
+  Array.from(blocks).forEach(highlightEl);
+
+  document.body.classList.add("bg-light-grey", "m-32");
+});

preview/app/javascript/packs/company-autocomplete-vw.js

@@ -0,0 +1,8 @@
+import CompanyAutocomplete from "@ably/ui/core/CompanyAutocomplete/component";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const input = document.querySelector("input");
+  CompanyAutocomplete(input, "/api/companies");
+
+  document.body.classList.add("bg-light-grey", "m-32");
+});

preview/app/javascript/packs/contact-footer-vw.js

@@ -0,0 +1,5 @@
+import ContactFooter from "@ably/ui/core/ContactFooter/component";
+
+document.addEventListener("DOMContentLoaded", () => {
+  ContactFooter();
+});

preview/app/javascript/packs/meganav-vw.js

@@ -0,0 +1,25 @@
+import Meganav from "@ably/ui/core/Meganav/component";
+import Notice from "@ably/ui/core/Notice/component";
+import MeganavBlogPostsList from "@ably/ui/core/MeganavBlogPostsList/component";
+
+document.addEventListener("DOMContentLoaded", () => {
+  const queryString = window.location.search;
+
+  const params = new URLSearchParams(queryString);
+  const addSearchApiKey = document.body.dataset.addSearchApiKey;
+
+  Meganav({
+    addSearchApiKey,
+  });
+
+  Notice({
+    bannerContainer: document.querySelector('[data-id="ui-notice"]'),
+    cookieId: "1",
+    noticeId: "A",
+    options: {
+      collapse: params.has("notice-collapse"),
+    },
+  });
+
+  MeganavBlogPostsList();
+});

preview/app/javascript/packs/showcase-vw.js

@@ -0,0 +1,12 @@
+import Showcase from "@ably/ui/core/Showcase/component";
+
+document.body.classList.add("bg-light-grey", "m-32");
+
+document.addEventListener("DOMContentLoaded", () => {
+  const showcases = document.querySelectorAll('[data-id="showcase"]');
+
+  Showcase(showcases[0], false);
+  Showcase(showcases[1], true);
+  Showcase(showcases[2], false);
+  Showcase(showcases[3], true);
+});

preview/app/javascript/packs/slider.js → preview/app/javascript/packs/slider-react.js

@@ -4,6 +4,8 @@ import Slider from "@ably/ui/core/Slider";
 
 import { renderComponent } from "@ably/ui/core/scripts";
 
+document.body.classList.add("bg-light-grey", "m-32");
+
 document.addEventListener("DOMContentLoaded", () => {
   // eslint-disable-next-line react/prop-types
   const Slide = ({ children }) => (

preview/app/javascript/packs/slider-vw.js

@@ -0,0 +1,18 @@
+import Slider from "@ably/ui/core/Slider/component";
+
+document.body.classList.add("bg-light-grey", "m-32");
+
+document.addEventListener("DOMContentLoaded", () => {
+  const slider = document.querySelectorAll('[data-id="slider"]');
+
+  Slider({
+    container: slider[0],
+    mqEnableThreshold: () => true,
+  });
+
+  Slider({
+    container: slider[1],
+    // match sm breakpoint
+    mqEnableThreshold: () => !window.matchMedia("(min-width: 48rem)").matches,
+  });
+});

preview/app/views/components/code_vw.html.erb

@@ -48,13 +48,5 @@ channel.subscribe("greeting", listener);
 })) %>
 
 <% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/code/component' %>
-  <script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", () => {
-      const blocks = document.querySelectorAll("[data-id=code]");
-      Array.from(blocks).forEach(AblyUi.Core.Code);
-
-      document.body.classList.add("bg-light-grey", "m-32");
-    });
-  </script>
+  <%= javascript_packs_with_chunks_tag 'code-vw' %>
 <% end %>

preview/app/views/components/company_autocomplete_vw.html.erb

@@ -7,14 +7,5 @@
 </div>
 
 <% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/company_autocomplete/component' %>
-
-  <script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", () => {
-      const input = document.querySelector('input');
-      AblyUi.Core.CompanyAutocomplete(input, "/api/companies");
-
-      document.body.classList.add("bg-light-grey", "m-32");
-    });
-  </script>
+  <%= javascript_packs_with_chunks_tag 'company-autocomplete-vw' %>
 <% end %>

preview/app/views/components/contact_footer_vw.html.erb

@@ -1,11 +1,5 @@
 <%= render(AblyUi::Core::ContactFooter.new) %>
 
 <% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/contact_footer/component' %>
-
-  <script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", () => {
-      AblyUi.Core.ContactFooter();
-    });
-  </script>
+  <%= javascript_packs_with_chunks_tag 'contact-footer-vw' %>
 <% end %>

preview/app/views/components/featured_link_react.html.erb

@@ -4,12 +4,34 @@
 
 <%= render(ParameterTableComponent.new(component_parameters, framework)) %>
 
-<%= react_component('featured_link', { url: '/blog', text_size: 'text-p1', children: 'Link Paragraph 1' }) %>
-<%= react_component('featured_link', { url: '/blog', text_size: 'text-p2', children: 'Link Paragraph 2' }) %>
-<%= react_component('featured_link', { url: '/blog', text_size: 'text-p3', children: 'Link Paragraph 3' }) %>
-<%= react_component('featured_link', { url: '/blog', text_size: 'text-menu1', children: 'Link Menu 1' }) %>
-<%= react_component('featured_link', { url: '/blog', text_size: 'text-menu2', children: 'Link Menu 2' }) %>
-<%= react_component('featured_link', { url: '/blog', text_size: 'text-menu3', children: 'Link Menu 3' }) %>
+<div class="flex flex-wrap gap-16 grid-cols-3">
+  <div class="p-16 mb-16 border rounded">
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p1', children: 'Link Paragraph 1' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p2', children: 'Link Paragraph 2' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p3', children: 'Link Paragraph 3' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu1', children: 'Link Menu 1' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu2', children: 'Link Menu 2' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu3', children: 'Link Menu 3' }) %>
+  </div>
+
+  <div class="bg-cool-black p-16 mb-16 border rounded">
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p1', icon_color: 'text-white', children: 'Link Paragraph 1' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p2', icon_color: 'text-white', children: 'Link Paragraph 2' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p3', icon_color: 'text-white', children: 'Link Paragraph 3' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu1', icon_color: 'text-white', children: 'Link Menu 1' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu2', icon_color: 'text-white', children: 'Link Menu 2' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu3', icon_color: 'text-white', children: 'Link Menu 3' }) %>
+  </div>
+
+  <div class="bg-gradient-hot-pink p-16 mb-16 border rounded">
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p1', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white', children: 'Link Paragraph 1' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p2', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white', children: 'Link Paragraph 2' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-p3', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white', children: 'Link Paragraph 3' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu1', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white', children: 'Link Menu 1' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu2', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white', children: 'Link Menu 2' }) %>
+    <%= react_component('featured_link', { url: '/blog', text_size: 'text-menu3', icon_color: 'text-cool-black', additional_css: 'text-white hover:text-white focus:text-white focus:text-white', children: 'Link Menu 3' }) %>
+  </div>
+</div>
 
 <div class="max-w-screen-xs">
   <%= react_component('featured_link', { url: '/blog', text_size: 'text-p1', children: 'Really long text in here to show how the link wraps' }) %>

preview/app/views/components/meganav_vw.html.erb

@@ -3,22 +3,5 @@
 <% end %>
 
 <% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/meganav/component' %>
-  <%= javascript_include_tag 'ably_ui/core/meganav_blog_posts_list/component' %>
-  <%= javascript_include_tag 'ably_ui/core/notice/component' %>
-
-  <script type="text/javascript">
-    document.addEventListener("DOMContentLoaded", () => {
-      AblyUi.Core.Meganav({ addSearchApiKey: "<%= Rails.application.config.add_search_api_key %>" });
-      AblyUi.Core.Notice({
-        bannerContainer: document.querySelector('[data-id="ui-notice"]'),
-        cookieId: '1',
-        noticeId: 'A',
-        options: {
-          collapse: <%= notice_config[:collapse] %>
-        }
-      });
-      AblyUi.Core.MeganavBlogPostsList();
-    });
-  </script>
+  <%= javascript_packs_with_chunks_tag 'meganav-vw' %>
 <% end %>

preview/app/views/components/showcase_vw.html.erb

@@ -41,18 +41,5 @@
 </div>
 
 <% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/showcase/component' %>
-
-  <script type="text/javascript">
-    document.body.classList.add("bg-light-grey", "m-32");
-
-    document.addEventListener("DOMContentLoaded", () => {
-      const showcases = document.querySelectorAll('[data-id="showcase"]');
-
-      AblyUi.Core.Showcase(showcases[0], false);
-      AblyUi.Core.Showcase(showcases[1], true);
-      AblyUi.Core.Showcase(showcases[2], false);
-      AblyUi.Core.Showcase(showcases[3], true);
-    });
-  </script>
+  <%= javascript_packs_with_chunks_tag 'showcase-vw' %>
 <% end %>

preview/app/views/components/slider_react.html.erb

@@ -10,10 +10,6 @@
 <div class="font-sans font-light max-w-screen-xl border-1" id="slider2"></div>
 
 <% content_for :component do %>
-  <%= javascript_packs_with_chunks_tag 'slider' %>
-
-  <script type="text/javascript">
-    document.body.classList.add("bg-light-grey", "m-32");
-  </script>
+  <%= javascript_packs_with_chunks_tag 'slider-react' %>
 <% end %>
 

preview/app/views/components/slider_vw.html.erb

@@ -49,25 +49,6 @@
 </div>
 
 <% content_for :component do %>
-  <%= javascript_include_tag 'ably_ui/core/slider/component' %>
-
-  <script type="text/javascript">
-    document.body.classList.add("bg-light-grey", "m-32");
-
-    document.addEventListener("DOMContentLoaded", () => {
-      const slider = document.querySelectorAll('[data-id="slider"]');
-
-      AblyUi.Core.Slider({
-        container: slider[0],
-        mqEnableThreshold: () => true
-      });
-
-      AblyUi.Core.Slider({
-        container: slider[1],
-        // match sm breakpoint
-        mqEnableThreshold: () => !window.matchMedia("(min-width: 48rem)").matches
-      });
-    });
-  </script>
+  <%= javascript_packs_with_chunks_tag 'slider-vw' %>
 <% end %>
 

preview/app/views/layouts/application.html.erb

@@ -7,7 +7,7 @@
     <%= csp_meta_tag %>
     <%= stylesheet_packs_with_chunks_tag 'application'  %>
   </head>
-  <body>
+  <body data-add-search-api-key="<%= Rails.application.config.add_search_api_key %>">
     <%= yield %>
     <%= javascript_packs_with_chunks_tag 'application' %>
 

preview/package.json

@@ -2,7 +2,7 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "8.7.0-dev.471ada5",
+    "@ably/ui": "8.7.0-dev.9b0589d",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",