Tailwind upgrade (#856)

* chore(deps): bump @sajari-ui/core, prism-react-renderer, react-dom, tailwindcss to 2.x, Tailwind UI, twin.macro, and postcss-import * fix: add native focus interactions for button and combobox components * fix: add native focus interactions for link, select and tab components * fix: add native focus interactions for range input and swatch components * fix: remove unused ring style hooks * update snapshots * fix: documentation typos * chore: add changeset * chore(deps): bump react peer dependency in utils
sajari · Sep 6, 2022 · 3f6f72c · 3f6f72c
1 parent c16e30f
commit 3f6f72c
Show file tree

Hide file tree

Showing 48 changed files with 1,115 additions and 843 deletions.
diff --git a/.changeset/afraid-boxes-invent.md b/.changeset/afraid-boxes-invent.md
@@ -0,0 +1,10 @@
+---
+'sajari-sdk-docs': major
+'@sajari/react-components': major
+'@sajari/react-hooks': major
+'@sajari/react-search-ui': major
+'@sajari/server': major
+'@sajari/react-sdk-utils': major
+---
+
+Major version bump of Tailwind. Require React 17 peer dependency. Remove useFocusRingStyles and useRingStyles hooks.
diff --git a/README.md b/README.md
@@ -4,13 +4,13 @@
 
 ## Introduction
 
-The Sajari React SDK is a library of React Hooks and Components to help build fast and powerful search interfaces.
+The Search.io React SDK is a library of React Hooks and Components to help build fast and powerful search interfaces.
 
-React provides a simple and elegant way to structure user interfaces. Aside from providing generic UI components, the Sajari React SDK also provides a way to seamlessly integrate the Sajari Search platform into any web-based app through the use of easily composable Components.
+React provides a simple and elegant way to structure user interfaces. Aside from providing generic UI components, the Search.io React SDK also provides a way to seamlessly integrate the Search.io Search platform into any web-based app through the use of easily composable Components.
 
 There are three main packages allowing you to pick and choose the right solution for your application:
 
-The Sajari React SDK is broken into 4 separate packages:
+The Search.io React SDK is broken into 4 separate packages:
 
 ### @sajari/react-components
 
@@ -32,7 +32,7 @@ Easy to use search components to quickly build a beautiful search interface. If
 
 ### @sajari/server
 
-Helpers for server-side rendering your React application using Sajari search.
+Helpers for server-side rendering your React application using Search.io search.
 
 ## Documentation
 

diff --git a/docs/components/SearchBar/SearchModal.tsx b/docs/components/SearchBar/SearchModal.tsx
@@ -109,7 +109,7 @@ const SearchModal = ({ open, onClose }: Props) => {
             onKeyDown={onKeyDown}
             placeholder="Search the docs"
             borderWidth="border-0"
-            boxShadow="focus:shadow-none"
+            ringWidth="focus:ring-0"
             padding="px-0"
           />
         </Flex>

diff --git a/docs/package.json b/docs/package.json
@@ -12,7 +12,7 @@
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "@next/mdx": "^12.0.9",
-    "@sajari-ui/core": "^0.20.0",
+    "@sajari-ui/core": "^3.0.2",
     "@sajari/react-components": "^1.15.0",
     "@sajari/react-hooks": "^3.15.0",
     "@sajari/react-search-ui": "^4.19.0",
@@ -21,21 +21,21 @@
     "lorem-ipsum": "^2.0.3",
     "next": "^12.0.9",
     "next-seo": "^5.0.0",
-    "prism-react-renderer": "^1.1.1",
+    "prism-react-renderer": "^1.3.5",
     "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.2",
     "react-live": "^2.2.3",
     "remark-autolink-headings": "6.0.1",
     "remark-emoji": "2.1.0",
     "remark-images": "2.0.0",
     "remark-slug": "6.0.0",
     "remark-unwrap-images": "2.0.0",
-    "tailwindcss": "^1.9.6"
+    "tailwindcss": "^2.2.19"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^12.0.9",
     "eslint-config-prettier": "^8.3.0",
     "postcss-clean": "^1.2.2",
-    "postcss-import": "^14.0.2"
+    "postcss-import": "^14.1.0"
   }
 }
diff --git a/docs/pages/_app.tsx b/docs/pages/_app.tsx
@@ -35,7 +35,7 @@ const Layout = (props: FlexProps) => {
         {...rest}
       >
         <Flex alignItems="items-center">
-          <Logomark useNewLogomark size="sm" margin="mr-3" />
+          <Logomark size="sm" margin="mr-3" />
           <Heading as="h3" size="md">
             React SDK
           </Heading>

diff --git a/docs/pages/components/radio.mdx b/docs/pages/components/radio.mdx
@@ -62,7 +62,7 @@ function RadioExample() {
 ### Custom Radio Buttons
 
 In some cases, you might need to create components that work like radios but
-don't look like radios. Chakra exports a `RadioGroup` to help with this
+don't look like radios. The Search.io React SDK exports a `RadioGroup` to help with this
 scenario. Here's what you need to do:
 
 1. Create a component that accepts the `checked` and `disabled` props. Be

diff --git a/package.json b/package.json
@@ -7,8 +7,8 @@
     "test:ci": "turbo run test:ci --filter=!sajari-sdk-docs -- --passWithNoTests",
     "build": "turbo run build --filter=!sajari-sdk-docs",
     "prepublish": "turbo run prepublish",
-    "docs": "turbo -filter=sajari-sdk-docs dev",
-    "build:docs": "turbo run build -filter=sajari-sdk-docs",
+    "docs": "turbo run dev --filter=sajari-sdk-docs",
+    "build:docs": "turbo run build --filter=sajari-sdk-docs",
     "start:docs": "turbo run start --filter=sajari-sdk-docs",
     "format": "prettier -c --write \"*/**\"",
     "lint": "eslint .",
@@ -91,7 +91,7 @@
     "typescript": "^4.5.5",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
-    "postcss": "^8.4.5"
+    "postcss": "^8.4.16"
   },
   "packageManager": "[email protected]"
 }
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -22,10 +22,11 @@
     "dist"
   ],
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "react": ">=17",
+    "react-dom": ">=17"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.8",
     "@popperjs/core": "^2.9.2",
     "@react-aria/button": "^3.3.0",
     "@react-aria/focus": "^3.2.3",

diff --git a/packages/components/src/Button/index.tsx b/packages/components/src/Button/index.tsx
@@ -1,5 +1,5 @@
 import { useButton } from '@react-aria/button';
-import { useFocus, useHover } from '@react-aria/interactions';
+import { useHover } from '@react-aria/interactions';
 import { mergeProps } from '@react-aria/utils';
 import { getStylesObject, mergeRefs } from '@sajari/react-sdk-utils';
 import classnames from 'classnames';
@@ -28,7 +28,6 @@ const Button = React.forwardRef((props: ButtonProps, ref?: React.Ref<HTMLElement
     ...rest
   } = props;
 
-  const [focused, setFocused] = React.useState(false);
   const buttonRef = useRef<HTMLElement | null>(null);
   const ownRef = mergeRefs(buttonRef, ref);
 
@@ -39,25 +38,19 @@ const Button = React.forwardRef((props: ButtonProps, ref?: React.Ref<HTMLElement
   const { hoverProps, isHovered: hovered } = useHover({
     isDisabled: disabled,
   });
-  const { focusProps } = useFocus({
-    isDisabled: disabled,
-    onFocus: () => setFocused(true),
-    onBlur: () => setFocused(false),
-  });
 
-  const { styles: containerStyles, focusRingProps } = useButtonStyles({
+  const { styles: containerStyles } = useButtonStyles({
     pressed,
     appearance,
     disabled,
     fullWidth,
     loading,
     size,
     spacing,
-    focused,
     hovered,
   });
 
-  const customProps = mergeProps(buttonProps, focusProps, hoverProps, focusRingProps, rest);
+  const customProps = mergeProps(buttonProps, hoverProps, rest);
   const styles = getStylesObject({ container: containerStyles }, disableDefaultStyles);
 
   return (

diff --git a/packages/components/src/Button/styles.ts b/packages/components/src/Button/styles.ts
@@ -2,29 +2,27 @@ import { css } from '@emotion/core';
 import { useTheme } from '@sajari/react-sdk-utils';
 import tw, { TwStyle } from 'twin.macro';
 
-import { useFocusRingStyles } from '../hooks';
 import { ButtonProps } from './types';
 
 interface UseButtonStylesProps extends ButtonProps {
   pressed: boolean;
   hovered: boolean;
-  focused: boolean;
 }
 
 const useButtonStyles = (props: UseButtonStylesProps) => {
-  const { size, fullWidth, appearance, spacing, disabled, loading, pressed, focused, hovered } = props;
+  const { size, fullWidth, appearance, spacing, disabled, loading, pressed } = props;
   const theme = useTheme();
   const isLink = (['link', 'subtle-link'] as Array<ButtonProps['apperance']>).includes(appearance);
   const styles: (string | TwStyle)[] = [];
-  const { focusProps: focusRingProps, focusRingStyles } = useFocusRingStyles();
-  const returnStyles = (val: typeof styles) => ({ styles: [css(val), focusRingStyles], focusRingProps });
+  const returnStyles = (val: typeof styles) => ({ styles: [css(val)] });
 
   styles.push(
-    tw`relative items-center justify-center leading-normal no-underline transition duration-150 ease-in-out border border-transparent border-solid cursor-pointer font-inherit focus:outline-none h-auto`,
+    tw`relative items-center justify-center h-auto leading-normal no-underline transition duration-150 ease-in-out border border-transparent border-solid rounded-md cursor-pointer font-inherit focus:outline-none`,
+    `&:focus { box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${theme.color.primary.base} }`,
   );
 
   if (!isLink) {
-    styles.push(tw`font-medium rounded-md select-none`);
+    styles.push(tw`font-medium select-none`);
   }
 
   styles.push(fullWidth ? tw`flex` : tw`inline-flex`);
@@ -117,15 +115,11 @@ const useButtonStyles = (props: UseButtonStylesProps) => {
 
   switch (appearance) {
     case 'primary':
-      styles.push(`color: ${theme.color.primary.text};`);
-
-      if (focused || pressed) {
-        styles.push(`background: ${theme.color.primary.active};`);
-      } else if (hovered) {
-        styles.push(`background: ${theme.color.primary.active};`);
-      } else {
-        styles.push(`background: ${theme.color.primary.base};`);
-      }
+      styles.push(
+        `color: ${theme.color.primary.text};`,
+        `background: ${theme.color.primary.base};`,
+        `&:hover, &:focus, &:hover { background: ${theme.color.primary.active} }`,
+      );
       break;
 
     case 'default':
@@ -144,7 +138,7 @@ const useButtonStyles = (props: UseButtonStylesProps) => {
 
     case 'link':
       styles.push(
-        tw`p-0 no-underline bg-transparent hover:bg-transparent focus:bg-transparent hover:underline focus:underline leading-inherit`,
+        tw`p-0 no-underline bg-transparent hover:bg-transparent focus:bg-transparent hover:underline focus:underline leading-inherit focus:border-white`,
         {
           color: pressed ? theme.color.primary.active : theme.color.primary.base,
         },
@@ -157,7 +151,7 @@ const useButtonStyles = (props: UseButtonStylesProps) => {
 
     case 'subtle-link':
       styles.push(
-        tw`p-0 no-underline bg-transparent hover:underline focus:underline leading-inherit`,
+        tw`p-0 no-underline bg-transparent hover:underline focus:underline leading-inherit focus:border-white`,
         pressed ? tw`text-gray-700` : tw`text-gray-500`,
       );
 

diff --git a/packages/components/src/Button/test/__snapshots__/Button.test.tsx.snap b/packages/components/src/Button/test/__snapshots__/Button.test.tsx.snap
@@ -3,6 +3,13 @@
 exports[`Button Should match snapshot 1`] = `
 <DocumentFragment>
   .emotion-0 {
+  -webkit-transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,-webkit-transform,filter,backdrop-filter;
+  -webkit-transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
+  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;
+  -webkit-transition-timing-function: cubic-bezier(0.4,0,0.2,1);
+  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
+  -webkit-transition-duration: 150ms;
+  transition-duration: 150ms;
   position: relative;
   -webkit-align-items: center;
   -webkit-box-align: center;
@@ -12,24 +19,17 @@ exports[`Button Should match snapshot 1`] = `
   -webkit-justify-content: center;
   -ms-flex-pack: center;
   justify-content: center;
+  height: auto;
   line-height: 1.5;
   -webkit-text-decoration: none;
   text-decoration: none;
-  -webkit-transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,-webkit-transform;
-  -webkit-transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;
-  transition-property: background-color,border-color,color,fill,stroke,opacity,box-shadow,transform;
-  -webkit-transition-duration: 150ms;
-  transition-duration: 150ms;
-  -webkit-transition-timing-function: cubic-bezier(0.4,0,0.2,1);
-  transition-timing-function: cubic-bezier(0.4,0,0.2,1);
   border-width: 1px;
-  border-color: transparent;
+  border-color: rgba(0,0,0,0);
   border-style: solid;
+  border-radius: 0.375em;
   cursor: pointer;
   font-family: inherit;
-  height: auto;
   font-weight: 500;
-  border-radius: 0.375em;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
@@ -43,38 +43,43 @@ exports[`Button Should match snapshot 1`] = `
   padding-right: 1em;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
-  --bg-opacity: 1;
-  background-color: rgba(255,255,255,var(--bg-opacity));
-  --border-opacity: 1;
-  border-color: rgba(229,231,235,var(--border-opacity));
-  box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
-  --text-opacity: 1;
-  color: rgba(107,114,128,var(--text-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(255,255,255,var(--tw-bg-opacity));
+  --tw-border-opacity: 1;
+  border-color: rgba(229,231,235,var(--tw-border-opacity));
+  --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05);
+  box-shadow: var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
+  --tw-text-opacity: 1;
+  color: rgba(107,114,128,var(--tw-text-opacity));
 }
 
 .emotion-0:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
 
+.emotion-0:focus {
+  box-shadow: 0 0 0 1px #fff,0 0 0 3px #6366f1;
+}
+
 .emotion-0:hover {
-  --bg-opacity: 1;
-  background-color: rgba(244,245,247,var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(243,244,246,var(--tw-bg-opacity));
 }
 
 .emotion-0:focus {
-  --bg-opacity: 1;
-  background-color: rgba(244,245,247,var(--bg-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgba(243,244,246,var(--tw-bg-opacity));
 }
 
 .emotion-0:hover {
-  --text-opacity: 1;
-  color: rgba(107,114,128,var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(107,114,128,var(--tw-text-opacity));
 }
 
 .emotion-0:focus {
-  --text-opacity: 1;
-  color: rgba(107,114,128,var(--text-opacity));
+  --tw-text-opacity: 1;
+  color: rgba(107,114,128,var(--tw-text-opacity));
 }
 
 <button