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

Author: JasonBerry

.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.

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
 

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>

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"
   }
 }

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>

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

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]"
 }

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",

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 (

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`,
       );