Merge pull request #138 from ably/company-autocomplete

[DEX-55] Company autocomplete

Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    ably-ui (6.0.1)
+    ably-ui (6.0.1.dev.6103afe)
       view_component (~> 2.33.0)
 
 GEM

cypress/integration/core/company_autocomplete/behaviour.spec.js

@@ -0,0 +1,111 @@
+describe("Company Autocomplete", () => {
+  const url = "/components/company-autocomplete?framework=vw";
+  const CONTAINER_SELECTOR = "[data-id=company-autocomplete-dropdown]";
+  const ITEMS_SELECTOR = `${CONTAINER_SELECTOR} button`;
+
+  beforeEach(() => {
+    cy.visit(url);
+  });
+
+  it("shows the drop down when you start typing", () => {
+    cy.get("input").type("A");
+    cy.get(CONTAINER_SELECTOR).should("be.visible");
+    cy.get(CONTAINER_SELECTOR).contains("All Things Apple");
+  });
+
+  it("updates the input when a result is clicked on", () => {
+    cy.get("input").type("A");
+    cy.get(CONTAINER_SELECTOR).should("be.visible");
+    cy.get(ITEMS_SELECTOR).eq(1).click();
+    cy.get("input").should("have.value", "All Things Apple");
+  });
+
+  it("changes the focus when the down arrow is pressed", () => {
+    cy.get("input").type("A");
+    cy.get("input")
+      .trigger("keydown", { code: "ArrowDown" })
+      .trigger("keydown", { code: "ArrowDown" })
+      .get(ITEMS_SELECTOR)
+      .eq(1)
+      .should("have.focus");
+  });
+
+  it("changes the focus when the up arrow is pressed", () => {
+    cy.get("input").type("A");
+
+    cy.get("input")
+      .trigger("keydown", { code: "ArrowDown" })
+      .trigger("keydown", { code: "ArrowDown" })
+      .get(ITEMS_SELECTOR)
+      .eq(1)
+      .should("have.focus");
+
+    cy.get("input")
+      .trigger("keydown", { code: "ArrowUp" })
+      .get(ITEMS_SELECTOR)
+      .eq(0)
+      .should("have.focus");
+  });
+
+  it("stops changing focus when the down arrow is pressed at the last item", () => {
+    cy.get("input").type("A");
+
+    cy.get("input")
+      .trigger("keydown", { code: "ArrowDown" })
+      .trigger("keydown", { code: "ArrowDown" })
+      .trigger("keydown", { code: "ArrowDown" })
+      .trigger("keydown", { code: "ArrowDown" })
+      .trigger("keydown", { code: "ArrowDown" })
+      .get(ITEMS_SELECTOR)
+      .eq(4)
+      .should("have.focus");
+
+    cy.get("input")
+      .trigger("keydown", { code: "ArrowDown" })
+      .get(ITEMS_SELECTOR)
+      .eq(4)
+      .should("have.focus");
+  });
+
+  it("focuses on the input when up arrow is pressed on the first item", () => {
+    cy.get("input").type("A");
+
+    cy.get("input")
+      .trigger("keydown", { code: "ArrowDown" })
+      .get(ITEMS_SELECTOR)
+      .eq(0)
+      .should("have.focus");
+
+    cy.get("input")
+      .trigger("keydown", { code: "ArrowUp" })
+      .get("input")
+      .should("have.focus");
+  });
+
+  it("closes the dropdown when clicked outside it", () => {
+    cy.get("input")
+      .type("A")
+      .get("body")
+      .click()
+      .get(CONTAINER_SELECTOR)
+      .should("not.be.visible");
+  });
+
+  it("closes the dropdown when Esc is pressed", () => {
+    cy.get("input")
+      .type("A")
+      .trigger("keydown", { code: "Escape" })
+      .get(CONTAINER_SELECTOR)
+      .should("not.be.visible")
+      .get("input")
+      .should("have.focus");
+  });
+
+  // Not implemented as Cypress has no Tab support
+  // https://docs.cypress.io/api/commands/type#Tabbing
+  xit("moves focus away from input if shift-tab is pressed", () => {});
+
+  // Not implemented as Cypress has no Tab support
+  // https://docs.cypress.io/api/commands/type#Tabbing
+  xit("closes the menu after pressing tab on the last item", () => {});
+});

lib/ably_ui/version.rb

@@ -1,3 +1,3 @@
 module AblyUi
-  VERSION = '6.0.1'
+  VERSION = '6.0.1.dev.6103afe'
 end

modules-config.js

@@ -32,6 +32,7 @@ module.exports = [
       "Icon",
       "Slider",
       "CustomerLogos",
+      "CompanyAutocomplete",
     ],
   },
   {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "6.0.1",
+  "version": "6.0.1-dev.6103afe",
   "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",

pre-release.sh

@@ -60,12 +60,15 @@ gem push ably-ui-$RUBY_VERSION.gem
 echo "> Remove local gem artifact ($RUBY_VERSION)"
 rm ably-ui-$RUBY_VERSION.gem
 
-echo "> Update Gemfile.lock"
-bundle
-
 echo "> Publish the npm package to the registry"
 yarn publish --no-git-tag-version --new-version $VERSION
 
+echo "Waiting to make sure packages are available in registries"
+sleep 30
+
+echo "> Update Gemfile.lock"
+bundle
+
 echo "> Update preview app version"
 cd preview
 

preview/Gemfile

@@ -36,4 +36,4 @@ gem 'view_component', '~> 2.33.0', require: 'view_component/engine'
 
 gem 'responders'
 
-gem 'ably-ui', '6.0.1', require: 'ably_ui'
+gem 'ably-ui', '6.0.1.dev.6103afe', require: 'ably_ui'

preview/Gemfile.lock

@@ -1,7 +1,7 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    ably-ui (6.0.1)
+    ably-ui (6.0.1.dev.6103afe)
       view_component (~> 2.33.0)
     actioncable (6.0.3.4)
       actionpack (= 6.0.3.4)
@@ -169,7 +169,7 @@ PLATFORMS
   ruby
 
 DEPENDENCIES
-  ably-ui (= 6.0.1)
+  ably-ui (= 6.0.1.dev.6103afe)
   bootsnap (>= 1.4.2)
   byebug
   listen (~> 3.2)

preview/app/controllers/api/company_data_controller.rb

@@ -0,0 +1,36 @@
+module Api
+	class CompanyDataController < ApplicationController
+	  include ActionController::MimeResponds
+	  respond_to :json
+
+	  def companies
+	    render json: [
+	      {
+          name: "Apple",
+          domain: "apple.com",
+          logo: "https://logo.clearbit.com/apple.com"
+        },
+        {
+          name: "All Things Apple",
+          domain: "apple.news",
+          logo: "https://logo.clearbit.com/apple.news"
+        },
+        {
+          name: "AppleInsider",
+          domain: "appleinsider.com",
+          logo: "https://logo.clearbit.com/appleinsider.com"
+        },
+        {
+          name: "Applebee's Grill + Bar",
+          domain: "applebees.com",
+          logo: "https://logo.clearbit.com/applebees.com"
+        },
+        {
+          name: "Apple Federal Credit Union",
+          domain: "applefcu.org",
+          logo: "https://logo.clearbit.com/applefcu.org"
+        }
+      ]
+	  end
+	end
+end

preview/app/javascript/styles/application.css

@@ -15,6 +15,7 @@
 @import "@ably/ui/core/CookieMessage/component.css";
 @import "@ably/ui/core/FeaturedLink/component.css";
 @import "@ably/ui/core/Slider/component.css";
+@import "@ably/ui/core/CompanyAutocomplete/component.css";
 @import "@ably/ui/core/styles.css";
 
 @layer base {

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

@@ -0,0 +1,20 @@
+<%= render(TitleComponent.new(react: false, vw: true)) do %>
+  Company Autocomplete
+<% end %>
+
+<div class="max-w-screen-xs">
+	<input type="text" placeholder="Company name" class="w-full" />
+</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>
+<% end %>

preview/app/views/pages/index.html.erb

@@ -46,6 +46,9 @@
             <li>
               <a href="/components/customer-logos">Customer Logos</a>
             </li>
+            <li>
+              <a href="/components/company-autocomplete?framework=vw">Company Autocomplete</a>
+            </li>
           </ul>
         </li>
         <li>

preview/config/routes.rb

@@ -12,6 +12,7 @@
     get '/api/me', to: 'api/user_session#me'
     get '/api/blog', to: 'api/blog#recent_blog_posts'
     get '/api/uptime', to: 'api/uptime#uptime_json'
+    get '/api/companies', to: 'api/company_data#companies'
 
     root 'pages#index'
   end

preview/package.json

@@ -2,11 +2,12 @@
   "name": "preview",
   "private": true,
   "dependencies": {
-    "@ably/ui": "6.0.1",
+    "@ably/ui": "6.0.1-dev.6103afe",
     "@babel/preset-react": "^7.12.5",
     "@rails/ujs": "^6.0.0",
     "@rails/webpacker": "4.3.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
+    "node-sass": "^6.0.1",
     "postcss": "^7",
     "prop-types": "^15.7.2",
     "react": "^17.0.1",
@@ -23,5 +24,8 @@
     "@tailwindcss/postcss7-compat": "^2.0.3",
     "autoprefixer": "^9",
     "webpack-dev-server": "^3.11.0"
+  },
+  "resolutions": {
+    "node-sass": "^6.0.1"
   }
 }