From aa3fde1c8f06e330b3e4dad634d3aa1232b23c3d Mon Sep 17 00:00:00 2001 From: Amanda Brown Date: Tue, 31 Oct 2023 19:04:47 -0400 Subject: [PATCH] Added InlineAutocomplete stories (#3639) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Added InlineAutocomplete stories * fix story naming convention and merge main * fix unrelated but breaking test * undo relative time update maybe * maybe this time * fix import * more fix imports * another fix imports * another fix imports * fix: update playwright * Update docs/content/drafts/InlineAutocomplete.mdx Co-authored-by: Armağan * Update src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx Co-authored-by: Armağan * Update src/InlineAutocomplete/InlineAutocomplete.stories.tsx Co-authored-by: Armağan * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Armağan * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black --------- Co-authored-by: Armağan Co-authored-by: Josh Black --- docs/content/drafts/InlineAutocomplete.mdx | 4 ++-- e2e/components/InlineAutocomplete.test.ts | 16 ++++++++-------- .../InlineAutocomplete.docs.json | 0 .../InlineAutocomplete.features.stories.tsx | 4 ++-- .../InlineAutocomplete.stories.tsx | 4 ++-- .../InlineAutocomplete.test.tsx | 10 +++++----- .../InlineAutocomplete/InlineAutocomplete.tsx | 14 +++++++------- .../_AutocompleteSuggestions.tsx | 14 +++++++------- src/{drafts => }/InlineAutocomplete/index.ts | 0 src/{drafts => }/InlineAutocomplete/types.ts | 2 +- src/{drafts => }/InlineAutocomplete/utils.ts | 0 src/__tests__/storybook.test.tsx | 1 + src/drafts/MarkdownEditor/_MarkdownInput.tsx | 2 +- .../suggestions/_useEmojiSuggestions.tsx | 2 +- .../suggestions/_useMentionSuggestions.tsx | 2 +- .../suggestions/_useReferenceSuggestions.tsx | 2 +- src/drafts/MarkdownEditor/suggestions/index.ts | 2 +- src/drafts/index.ts | 4 ++-- 18 files changed, 42 insertions(+), 41 deletions(-) rename src/{drafts => }/InlineAutocomplete/InlineAutocomplete.docs.json (100%) rename src/{drafts => }/InlineAutocomplete/InlineAutocomplete.features.stories.tsx (98%) rename src/{drafts => }/InlineAutocomplete/InlineAutocomplete.stories.tsx (98%) rename src/{drafts => }/InlineAutocomplete/InlineAutocomplete.test.tsx (98%) rename src/{drafts => }/InlineAutocomplete/InlineAutocomplete.tsx (96%) rename src/{drafts => }/InlineAutocomplete/_AutocompleteSuggestions.tsx (92%) rename src/{drafts => }/InlineAutocomplete/index.ts (100%) rename src/{drafts => }/InlineAutocomplete/types.ts (97%) rename src/{drafts => }/InlineAutocomplete/utils.ts (100%) diff --git a/docs/content/drafts/InlineAutocomplete.mdx b/docs/content/drafts/InlineAutocomplete.mdx index ed7b6c957ae..890d46ffefd 100644 --- a/docs/content/drafts/InlineAutocomplete.mdx +++ b/docs/content/drafts/InlineAutocomplete.mdx @@ -4,10 +4,10 @@ componentId: inline_autocomplete status: Draft description: Provides inline auto completion suggestions for an input or textarea. source: https://github.com/primer/react/tree/main/src/InlineAutocomplete -storybook: '/react/storybook?path=/story/components-forms-inlineautocomplete--default' +storybook: '/react/storybook?path=/story/drafts-components-inlineautocomplete--default' --- -import data from '../../../src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json' +import data from '../../../src/InlineAutocomplete/InlineAutocomplete.docs.json' ```js import {InlineAutocomplete} from '@primer/react/drafts' diff --git a/e2e/components/InlineAutocomplete.test.ts b/e2e/components/InlineAutocomplete.test.ts index 19492e39cc3..84e4457990f 100644 --- a/e2e/components/InlineAutocomplete.test.ts +++ b/e2e/components/InlineAutocomplete.test.ts @@ -8,7 +8,7 @@ test.describe('InlineAutocomplete', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete--default', + id: 'drafts-components-inlineautocomplete--default', globals: { colorScheme: theme, }, @@ -20,7 +20,7 @@ test.describe('InlineAutocomplete', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete--default', + id: 'drafts-components-inlineautocomplete--default', globals: { colorScheme: theme, }, @@ -36,7 +36,7 @@ test.describe('InlineAutocomplete', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete--playground', + id: 'drafts-components-inlineautocomplete--playground', globals: { colorScheme: theme, }, @@ -48,7 +48,7 @@ test.describe('InlineAutocomplete', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete--playground', + id: 'drafts-components-inlineautocomplete--playground', globals: { colorScheme: theme, }, @@ -64,7 +64,7 @@ test.describe('InlineAutocomplete', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete-features--custom-rendering', + id: 'drafts-components-inlineautocomplete-features--custom-rendering', globals: { colorScheme: theme, }, @@ -76,7 +76,7 @@ test.describe('InlineAutocomplete', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete-features--custom-rendering', + id: 'drafts-components-inlineautocomplete-features--custom-rendering', globals: { colorScheme: theme, }, @@ -92,7 +92,7 @@ test.describe('InlineAutocomplete', () => { test.describe(theme, () => { test('default @vrt', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete-features--single-line', + id: 'drafts-components-inlineautocomplete-features--single-line', globals: { colorScheme: theme, }, @@ -104,7 +104,7 @@ test.describe('InlineAutocomplete', () => { test('axe @aat', async ({page}) => { await visit(page, { - id: 'components-forms-inlineautocomplete-features--single-line', + id: 'drafts-components-inlineautocomplete-features--single-line', globals: { colorScheme: theme, }, diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json b/src/InlineAutocomplete/InlineAutocomplete.docs.json similarity index 100% rename from src/drafts/InlineAutocomplete/InlineAutocomplete.docs.json rename to src/InlineAutocomplete/InlineAutocomplete.docs.json diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx b/src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx similarity index 98% rename from src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx rename to src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx index 96ae45e30d1..0037a811e53 100644 --- a/src/drafts/InlineAutocomplete/InlineAutocomplete.features.stories.tsx +++ b/src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx @@ -1,10 +1,10 @@ import React, {useState} from 'react' import {Meta} from '@storybook/react' -import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '../..' +import {ActionList, Avatar, ActionListItemProps, Textarea, TextInput, FormControl} from '..' import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.' export default { - title: 'Components/Forms/InlineAutocomplete/Features', + title: 'Drafts/Components/InlineAutocomplete/Features', component: InlineAutocomplete, } as Meta diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx b/src/InlineAutocomplete/InlineAutocomplete.stories.tsx similarity index 98% rename from src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx rename to src/InlineAutocomplete/InlineAutocomplete.stories.tsx index 94faa2a4e28..d9762c3dd12 100644 --- a/src/drafts/InlineAutocomplete/InlineAutocomplete.stories.tsx +++ b/src/InlineAutocomplete/InlineAutocomplete.stories.tsx @@ -1,11 +1,11 @@ import React, {useState} from 'react' import {Meta} from '@storybook/react' -import {BaseStyles, Box, Textarea, ThemeProvider, FormControl} from '../..' +import {BaseStyles, Box, Textarea, ThemeProvider, FormControl} from '..' import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '.' export default { - title: 'Components/Forms/InlineAutocomplete', + title: 'Drafts/Components/InlineAutocomplete', component: InlineAutocomplete, decorators: [ Story => { diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx b/src/InlineAutocomplete/InlineAutocomplete.test.tsx similarity index 98% rename from src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx rename to src/InlineAutocomplete/InlineAutocomplete.test.tsx index cfd7dff63ea..fc836d5b6de 100644 --- a/src/drafts/InlineAutocomplete/InlineAutocomplete.test.tsx +++ b/src/InlineAutocomplete/InlineAutocomplete.test.tsx @@ -2,11 +2,11 @@ import React, {useState} from 'react' import {fireEvent, render, within} from '@testing-library/react' import userEvent from '@testing-library/user-event' import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions, Trigger} from '.' -import FormControl from '../../FormControl' -import {ActionList} from '../../ActionList' -import Textarea from '../../Textarea' -import ThemeProvider from '../../ThemeProvider' -import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect' +import FormControl from '../FormControl' +import {ActionList} from '../ActionList' +import Textarea from '../Textarea' +import ThemeProvider from '../ThemeProvider' +import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect' const label = 'Inline Autocomplete' diff --git a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx b/src/InlineAutocomplete/InlineAutocomplete.tsx similarity index 96% rename from src/drafts/InlineAutocomplete/InlineAutocomplete.tsx rename to src/InlineAutocomplete/InlineAutocomplete.tsx index 484fd8631a5..9f0c4f39fa0 100644 --- a/src/drafts/InlineAutocomplete/InlineAutocomplete.tsx +++ b/src/InlineAutocomplete/InlineAutocomplete.tsx @@ -1,9 +1,9 @@ import React, {cloneElement, useRef} from 'react' -import Box from '../../Box' -import Portal from '../../Portal' -import {BetterSystemStyleObject} from '../../sx' -import {useSyntheticChange} from '../hooks/useSyntheticChange' -import {getAbsoluteCharacterCoordinates} from '../utils/character-coordinates' +import Box from '../Box' +import Portal from '../Portal' +import {BetterSystemStyleObject} from '../sx' +import {useSyntheticChange} from '../drafts/hooks/useSyntheticChange' +import {getAbsoluteCharacterCoordinates} from '../drafts/utils/character-coordinates' import { SelectSuggestionsEvent, @@ -16,9 +16,9 @@ import { } from './types' import {augmentHandler, calculateSuggestionsQuery, getSuggestionValue, requireChildrenToBeInput} from './utils' -import {useRefObjectAsForwardedRef} from '../../hooks' +import {useRefObjectAsForwardedRef} from '../hooks' import AutocompleteSuggestions from './_AutocompleteSuggestions' -import {useFormControlForwardedProps} from '../../FormControl' +import {useFormControlForwardedProps} from '../FormControl' export type InlineAutocompleteProps = { /** Register the triggers that can cause suggestions to appear. */ diff --git a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx b/src/InlineAutocomplete/_AutocompleteSuggestions.tsx similarity index 92% rename from src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx rename to src/InlineAutocomplete/_AutocompleteSuggestions.tsx index 3d9bdfa51c6..17be0fa857f 100644 --- a/src/drafts/InlineAutocomplete/_AutocompleteSuggestions.tsx +++ b/src/InlineAutocomplete/_AutocompleteSuggestions.tsx @@ -1,14 +1,14 @@ import React, {useCallback, useRef, useState} from 'react' -import Spinner from '../../Spinner' -import {ActionList, ActionListItemProps} from '../../ActionList' -import Box from '../../Box' -import {ComboboxCommitEvent, useCombobox} from '../hooks/useCombobox' -import Overlay from '../../Overlay' +import Spinner from '../Spinner' +import {ActionList, ActionListItemProps} from '../ActionList' +import Box from '../Box' +import {ComboboxCommitEvent, useCombobox} from '../drafts/hooks/useCombobox' +import Overlay from '../Overlay' import {Suggestion, Suggestions, SuggestionsPlacement, TextInputElement} from './types' import {getSuggestionKey, getSuggestionValue} from './utils' -import {CharacterCoordinates} from '../utils/character-coordinates' -import useIsomorphicLayoutEffect from '../../utils/useIsomorphicLayoutEffect' +import {CharacterCoordinates} from '../drafts/utils/character-coordinates' +import useIsomorphicLayoutEffect from '../utils/useIsomorphicLayoutEffect' type AutoCompleteSuggestionsProps = { suggestions: Suggestions | null diff --git a/src/drafts/InlineAutocomplete/index.ts b/src/InlineAutocomplete/index.ts similarity index 100% rename from src/drafts/InlineAutocomplete/index.ts rename to src/InlineAutocomplete/index.ts diff --git a/src/drafts/InlineAutocomplete/types.ts b/src/InlineAutocomplete/types.ts similarity index 97% rename from src/drafts/InlineAutocomplete/types.ts rename to src/InlineAutocomplete/types.ts index 2b7334d1c26..25d326ce34c 100644 --- a/src/drafts/InlineAutocomplete/types.ts +++ b/src/InlineAutocomplete/types.ts @@ -1,4 +1,4 @@ -import {ActionListItemProps} from '../../ActionList' +import {ActionListItemProps} from '../ActionList' export type Trigger = { /** A single character that can cause the suggestion list to open. */ diff --git a/src/drafts/InlineAutocomplete/utils.ts b/src/InlineAutocomplete/utils.ts similarity index 100% rename from src/drafts/InlineAutocomplete/utils.ts rename to src/InlineAutocomplete/utils.ts diff --git a/src/__tests__/storybook.test.tsx b/src/__tests__/storybook.test.tsx index 30702e8da72..965e53b02d4 100644 --- a/src/__tests__/storybook.test.tsx +++ b/src/__tests__/storybook.test.tsx @@ -31,6 +31,7 @@ const allowlist = [ 'Header', 'Heading', 'IconButton', + 'InlineAutocomplete', 'FilteredActionList', 'Link', 'Octicon', diff --git a/src/drafts/MarkdownEditor/_MarkdownInput.tsx b/src/drafts/MarkdownEditor/_MarkdownInput.tsx index 9d0b7e4a9e5..da6c02d5103 100644 --- a/src/drafts/MarkdownEditor/_MarkdownInput.tsx +++ b/src/drafts/MarkdownEditor/_MarkdownInput.tsx @@ -1,7 +1,7 @@ import {subscribe as subscribeToMarkdownPasting} from '@github/paste-markdown' import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react' import {useDynamicTextareaHeight} from '../hooks/useDynamicTextareaHeight' -import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '../InlineAutocomplete' +import InlineAutocomplete, {ShowSuggestionsEvent, Suggestions} from '../../InlineAutocomplete' import Textarea, {TextareaProps} from '../../Textarea' import {Emoji, useEmojiSuggestions} from './suggestions/_useEmojiSuggestions' import {Mentionable, useMentionSuggestions} from './suggestions/_useMentionSuggestions' diff --git a/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx index 7c40dd82230..df1d74bb5ce 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx +++ b/src/drafts/MarkdownEditor/suggestions/_useEmojiSuggestions.tsx @@ -1,7 +1,7 @@ import React, {useMemo} from 'react' import {suggestionsCalculator, UseSuggestionsHook} from '.' import {ActionList} from '../../../ActionList' -import {Suggestion, Trigger} from '../../InlineAutocomplete' +import {Suggestion, Trigger} from '../../../InlineAutocomplete' type BaseEmoji = { /** Name (shortcode) of the emoji. Do not include the wrapping `:` symbols. */ diff --git a/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx index 386b4e4165e..8a9379029e8 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx +++ b/src/drafts/MarkdownEditor/suggestions/_useMentionSuggestions.tsx @@ -2,7 +2,7 @@ import {score} from 'fzy.js' import React, {useMemo} from 'react' import {suggestionsCalculator, UseSuggestionsHook} from '.' import {ActionList} from '../../../ActionList' -import {Suggestion, Trigger} from '../../InlineAutocomplete' +import {Suggestion, Trigger} from '../../../InlineAutocomplete' import Text from '../../../Text' /** Could be a user, team, or organization - anything that can be mentioned. */ diff --git a/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx b/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx index efd97c4f582..2de5acb8350 100644 --- a/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx +++ b/src/drafts/MarkdownEditor/suggestions/_useReferenceSuggestions.tsx @@ -1,7 +1,7 @@ import React, {useMemo} from 'react' import {suggestionsCalculator, UseSuggestionsHook} from '.' import {ActionList} from '../../../ActionList' -import {Suggestion, Trigger} from '../../InlineAutocomplete' +import {Suggestion, Trigger} from '../../../InlineAutocomplete' import Text from '../../../Text' import {score} from 'fzy.js' diff --git a/src/drafts/MarkdownEditor/suggestions/index.ts b/src/drafts/MarkdownEditor/suggestions/index.ts index a00939c8ffd..a3493c22d1f 100644 --- a/src/drafts/MarkdownEditor/suggestions/index.ts +++ b/src/drafts/MarkdownEditor/suggestions/index.ts @@ -1,4 +1,4 @@ -import {Suggestion, Trigger} from '../../InlineAutocomplete' +import {Suggestion, Trigger} from '../../../InlineAutocomplete' const MAX_SUGGESTIONS = 5 diff --git a/src/drafts/index.ts b/src/drafts/index.ts index afe2a6082e3..3d5ea0149af 100644 --- a/src/drafts/index.ts +++ b/src/drafts/index.ts @@ -27,14 +27,14 @@ export type { export * from '../Dialog/Dialog' -export {default as InlineAutocomplete} from './InlineAutocomplete' +export {default as InlineAutocomplete} from '../InlineAutocomplete' export type { InlineAutocompleteProps, ShowSuggestionsEvent, Suggestion, Suggestions, Trigger, -} from './InlineAutocomplete' +} from '../InlineAutocomplete' export {default as MarkdownViewer} from './MarkdownViewer' export type {MarkdownViewerProps, InteractiveMarkdownViewerProps} from './MarkdownViewer'