Added InlineAutocomplete stories (#3639)

* 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 <[email protected]> * Update src/InlineAutocomplete/InlineAutocomplete.features.stories.tsx Co-authored-by: Armağan <[email protected]> * Update src/InlineAutocomplete/InlineAutocomplete.stories.tsx Co-authored-by: Armağan <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Armağan <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black <[email protected]> * Update e2e/components/InlineAutocomplete.test.ts Co-authored-by: Josh Black <[email protected]> --------- Co-authored-by: Armağan <[email protected]> Co-authored-by: Josh Black <[email protected]>
primer · Oct 31, 2023 · aa3fde1 · aa3fde1
1 parent e27c3c8
commit aa3fde1
Show file tree

Hide file tree

Showing 18 changed files with 42 additions and 41 deletions.
diff --git 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
@@ -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/...Autocomplete/InlineAutocomplete.docs.json → ...Autocomplete/InlineAutocomplete.docs.json b/...Autocomplete/InlineAutocomplete.docs.json → ...Autocomplete/InlineAutocomplete.docs.json
diff --git a/...e/InlineAutocomplete.features.stories.tsx → ...e/InlineAutocomplete.features.stories.tsx b/...e/InlineAutocomplete.features.stories.tsx → ...e/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<typeof InlineAutocomplete>
 

diff --git a/...tocomplete/InlineAutocomplete.stories.tsx → ...tocomplete/InlineAutocomplete.stories.tsx b/...tocomplete/InlineAutocomplete.stories.tsx → ...tocomplete/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/...eAutocomplete/InlineAutocomplete.test.tsx → ...eAutocomplete/InlineAutocomplete.test.tsx b/...eAutocomplete/InlineAutocomplete.test.tsx → ...eAutocomplete/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/...InlineAutocomplete/InlineAutocomplete.tsx → ...InlineAutocomplete/InlineAutocomplete.tsx b/...InlineAutocomplete/InlineAutocomplete.tsx → ...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/...Autocomplete/_AutocompleteSuggestions.tsx → ...Autocomplete/_AutocompleteSuggestions.tsx b/...Autocomplete/_AutocompleteSuggestions.tsx → ...Autocomplete/_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 → src/InlineAutocomplete/index.ts b/src/drafts/InlineAutocomplete/index.ts → src/InlineAutocomplete/index.ts
diff --git a/src/drafts/InlineAutocomplete/types.ts → src/InlineAutocomplete/types.ts b/src/drafts/InlineAutocomplete/types.ts → 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 → src/InlineAutocomplete/utils.ts b/src/drafts/InlineAutocomplete/utils.ts → src/InlineAutocomplete/utils.ts
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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'