From 16d508e899e2a761540feb0b8bb9b72240890ecf Mon Sep 17 00:00:00 2001 From: Klink <85062+dogmar@users.noreply.github.com> Date: Mon, 22 May 2023 07:57:22 -0700 Subject: [PATCH] feat: Updates for marketing site (#469) --- package.json | 94 +- src/components/Checkbox.tsx | 3 + src/components/ComboBox.tsx | 3 +- src/components/RepositoryCard.tsx | 4 +- src/components/Select.tsx | 3 +- src/components/Sidecar.tsx | 25 +- src/components/StackCard.tsx | 4 +- src/components/useFloatingDropdown.tsx | 69 - src/hooks/useFloatingDropdown.tsx | 92 + src/index.ts | 2 + src/stories/CheckBox.stories.tsx | 2 + src/stories/Sidecar.stories.tsx | 13 +- src/types/css.d.ts | 4 +- yarn.lock | 2790 ++++++++++++++---------- 14 files changed, 1839 insertions(+), 1269 deletions(-) delete mode 100644 src/components/useFloatingDropdown.tsx create mode 100644 src/hooks/useFloatingDropdown.tsx diff --git a/package.json b/package.json index aed685bf..72874d95 100644 --- a/package.json +++ b/package.json @@ -29,31 +29,31 @@ "@loomhq/loom-embed": "1.5.0", "@markdoc/markdoc": "0.2.2", "@monaco-editor/react": "4.4.6", - "@react-aria/button": "3.7.0", - "@react-aria/checkbox": "3.8.0", - "@react-aria/combobox": "3.5.0", - "@react-aria/focus": "3.11.0", - "@react-aria/interactions": "3.14.0", - "@react-aria/listbox": "3.8.0", - "@react-aria/overlays": "3.13.0", - "@react-aria/radio": "3.5.0", - "@react-aria/select": "3.9.0", - "@react-aria/slider": "3.3.0", - "@react-aria/tabs": "3.4.0", - "@react-aria/utils": "3.15.0", - "@react-aria/visually-hidden": "3.7.0", - "@react-stately/collections": "3.6.0", - "@react-stately/combobox": "3.4.0", - "@react-stately/overlays": "3.5.0", - "@react-stately/radio": "3.7.0", - "@react-stately/slider": "3.3.0", - "@react-stately/tabs": "3.3.0", - "@react-stately/toggle": "3.5.0", - "@react-types/shared": "3.17.0", - "@tanstack/match-sorter-utils": "8.7.6", - "@tanstack/react-table": "8.7.9", - "@tanstack/react-virtual": "3.0.0-beta.48", - "@types/chroma-js": "2.1.5", + "@react-aria/button": "3.7.1", + "@react-aria/checkbox": "3.9.0", + "@react-aria/combobox": "3.6.0", + "@react-aria/focus": "3.12.0", + "@react-aria/interactions": "3.15.0", + "@react-aria/listbox": "3.9.0", + "@react-aria/overlays": "3.14.0", + "@react-aria/radio": "3.6.0", + "@react-aria/select": "3.10.0", + "@react-aria/slider": "3.4.0", + "@react-aria/tabs": "3.5.0", + "@react-aria/utils": "3.16.0", + "@react-aria/visually-hidden": "3.8.0", + "@react-stately/collections": "3.7.0", + "@react-stately/combobox": "3.5.0", + "@react-stately/overlays": "3.5.1", + "@react-stately/radio": "3.8.0", + "@react-stately/slider": "3.3.1", + "@react-stately/tabs": "3.4.0", + "@react-stately/toggle": "3.5.1", + "@react-types/shared": "3.18.0", + "@tanstack/match-sorter-utils": "8.8.4", + "@tanstack/react-table": "8.9.1", + "@tanstack/react-virtual": "3.0.0-beta.54", + "@types/chroma-js": "2.4.0", "chroma-js": "2.4.2", "classnames": "2.3.2", "grommet": "2.29.1", @@ -76,36 +76,36 @@ "use-immer": "0.8.1" }, "devDependencies": { - "@babel/core": "7.20.12", - "@babel/preset-env": "7.20.2", + "@babel/core": "7.21.8", + "@babel/preset-env": "7.21.5", "@babel/preset-react": "7.18.6", - "@emotion/react": "11.10.6", - "@emotion/styled": "11.10.6", + "@emotion/react": "11.11.0", + "@emotion/styled": "11.11.0", "@pluralsh/eslint-config-typescript": "2.5.41", - "@storybook/addon-actions": "7.0.6", - "@storybook/addon-docs": "7.0.6", - "@storybook/addon-essentials": "7.0.6", - "@storybook/addon-interactions": "7.0.6", - "@storybook/addon-links": "7.0.6", - "@storybook/builder-vite": "7.0.6", - "@storybook/node-logger": "7.0.6", - "@storybook/react": "7.0.6", - "@storybook/react-vite": "7.0.6", + "@storybook/addon-actions": "7.0.12", + "@storybook/addon-docs": "7.0.12", + "@storybook/addon-essentials": "7.0.12", + "@storybook/addon-interactions": "7.0.12", + "@storybook/addon-links": "7.0.12", + "@storybook/builder-vite": "7.0.12", + "@storybook/node-logger": "7.0.12", + "@storybook/react": "7.0.12", + "@storybook/react-vite": "7.0.12", "@storybook/testing-library": "0.1.0", - "@types/react-dom": "18.0.11", - "@types/react-transition-group": "4.4.5", + "@types/react-dom": "18.2.4", + "@types/react-transition-group": "4.4.6", "@types/styled-components": "5.1.26", - "@typescript-eslint/eslint-plugin": "5.59.0", - "@typescript-eslint/parser": "5.59.0", + "@typescript-eslint/eslint-plugin": "5.59.6", + "@typescript-eslint/parser": "5.59.6", "babel-loader": "9.1.2", - "eslint": "8.38.0", + "eslint": "8.40.0", "eslint-config-prettier": "8.8.0", "eslint-plugin-import": "2.27.5", "eslint-plugin-import-newlines": "1.3.1", "eslint-plugin-jsx-a11y": "6.7.1", "eslint-plugin-react": "7.32.2", "eslint-plugin-react-hooks": "4.6.0", - "eslint-plugin-storybook": "0.6.11", + "eslint-plugin-storybook": "0.6.12", "firebase-tools": "11.23.1", "fuse.js": "6.6.2", "honorable": "1.0.0-beta.17", @@ -120,10 +120,10 @@ "react-dom": "18.2.0", "react-transition-group": "4.4.5", "rimraf": "3.0.2", - "storybook": "7.0.6", - "styled-components": "5.3.9", + "storybook": "7.0.12", + "styled-components": "5.3.10", "typescript": "4.9.5", - "vite": "4.1.1" + "vite": "4.3.8" }, "peerDependencies": { "@emotion/react": ">=11.10.6", diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx index 87214513..dcae0486 100644 --- a/src/components/Checkbox.tsx +++ b/src/components/Checkbox.tsx @@ -147,6 +147,7 @@ export type CheckboxProps = { defaultSelected?: boolean onChange?: (e: { target: { checked: boolean } }) => any onFocusChange?: (isFocused: boolean) => void + tabIndex?: number | string } & Omit function Checkbox( @@ -162,6 +163,7 @@ function Checkbox( onFocusChange, onKeyDown, onKeyUp, + tabIndex, ...props }: CheckboxProps, ref: MutableRefObject @@ -217,6 +219,7 @@ function Checkbox( { if (typeof onChange === 'function') { onChange(e) diff --git a/src/components/ComboBox.tsx b/src/components/ComboBox.tsx index 530ad8ea..9af081ee 100644 --- a/src/components/ComboBox.tsx +++ b/src/components/ComboBox.tsx @@ -28,6 +28,8 @@ import { omitBy } from 'lodash' import { mergeRefs } from 'react-merge-refs' +import { useFloatingDropdown } from '../hooks/useFloatingDropdown' + import { type ListBoxItemBaseProps } from './ListBoxItem' import DropdownArrowIcon from './icons/DropdownArrowIcon' import Input, { type InputProps } from './Input' @@ -38,7 +40,6 @@ import { import { PopoverListBox } from './PopoverListBox' import SearchIcon from './icons/SearchIcon' import { SelectInner } from './Select' -import { useFloatingDropdown } from './useFloatingDropdown' type Placement = 'left' | 'right' diff --git a/src/components/RepositoryCard.tsx b/src/components/RepositoryCard.tsx index f04d03d8..4879c481 100644 --- a/src/components/RepositoryCard.tsx +++ b/src/components/RepositoryCard.tsx @@ -176,8 +176,8 @@ function RepositoryCardRef( color="text-light" style={{ display: '-webkit-box', - '-webkit-line-clamp': '2', - '-webkit-box-orient': 'vertical', + WebkitLineClamp: '2', + WebkitBoxOrient: 'vertical', overflow: 'hidden', }} > diff --git a/src/components/Select.tsx b/src/components/Select.tsx index cc20c64f..fdd0533b 100644 --- a/src/components/Select.tsx +++ b/src/components/Select.tsx @@ -20,6 +20,8 @@ import { useBimodalSelectState, } from '../utils/useBimodalSelectState' +import { useFloatingDropdown } from '../hooks/useFloatingDropdown' + import { type ListBoxItemBaseProps } from './ListBoxItem' import DropdownArrowIcon from './icons/DropdownArrowIcon' import { PopoverListBox } from './PopoverListBox' @@ -27,7 +29,6 @@ import { setNextFocusedKey, useSelectComboStateProps, } from './SelectComboShared' -import { useFloatingDropdown } from './useFloatingDropdown' import { type FillLevel, useFillLevel } from './contexts/FillLevelContext' const parentFillLevelToBackground = { diff --git a/src/components/Sidecar.tsx b/src/components/Sidecar.tsx index d8754770..2d38e88c 100644 --- a/src/components/Sidecar.tsx +++ b/src/components/Sidecar.tsx @@ -72,17 +72,20 @@ const SidecarItem = forwardRef( ) ) -const SidecarButton = forwardRef( - ({ ...props }, ref) => ( -