@bettercms-ai/kit 0.1.1 → 2.0.0

package/src/core/components/autocomplete/__workshop__/example.tsx

@@ -1,79 +0,0 @@
-import {Autocomplete, Box, Card, Container, Stack, Text} from '@bettercms-ai/kit'
-import {useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
-import {PerfTestProps, usePerfTest} from '@bettercms-ai/kit-workshop/plugin-perf'
-import {fireEvent} from '@testing-library/dom'
-import {useCallback, useMemo, useState} from 'react'
-
-import {
-  WORKSHOP_CARD_TONE_OPTIONS,
-  WORKSHOP_RADIUS_OPTIONS,
-  WORKSHOP_SPACE_OPTIONS,
-  WORKSHOP_TEXT_SIZE_OPTIONS,
-} from '../../../__workshop__/constants'
-import countries from '../__mocks__/countries'
-
-const typingPerfTest: PerfTestProps<HTMLInputElement> = {
-  name: 'typing',
-  title: 'Typing',
-  description: 'This test types one character at a time',
-  run({target}) {
-    const text = 'Hello, world & Hello, world & Hello, world'
-    const len = text.length
-
-    for (let i = 0; i < len; i += 1) {
-      const value = text.slice(0, i + 1)
-
-      fireEvent.change(target, {target: {value}})
-    }
-  },
-}
-
-export default function ExampleStory() {
-  const {ref, Wrapper} = usePerfTest(typingPerfTest)
-
-  const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS, 'default', 'Layout')
-  const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
-  const border = useBoolean('Border', true, 'Props')
-  const customValidity = useText('Custom validity', '', 'Props') || undefined
-  const disabled = useBoolean('Disabled', false, 'Props')
-  const fontSize = Number(useSelect('Font size', WORKSHOP_TEXT_SIZE_OPTIONS, 2, 'Props'))
-  const openButton = useBoolean('Open button', false, 'Props')
-  const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3, 'Props')
-  const radius = Number(useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2, 'Props'))
-  const readOnly = useBoolean('Read only', false, 'Props')
-  const [value, setValue] = useState('')
-
-  const handleChange = useCallback((value: string) => setValue(value), [])
-
-  return (
-    <Card height="fill" tone={layoutTone}>
-      <Container width={1}>
-        <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
-          <Stack space={3}>
-            <Text as="label" htmlFor="default" size={1} weight="medium">
-              Country code
-            </Text>
-            <Wrapper>
-              <Autocomplete
-                border={border}
-                customValidity={customValidity}
-                disabled={disabled}
-                fontSize={fontSize}
-                onChange={handleChange}
-                id="default"
-                openButton={openButton}
-                options={options}
-                padding={padding}
-                placeholder="Search"
-                radius={radius}
-                readOnly={readOnly}
-                ref={ref}
-                value={value}
-              />
-            </Wrapper>
-          </Stack>
-        </Box>
-      </Container>
-    </Card>
-  )
-}

package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx

@@ -1,36 +0,0 @@
-import {Autocomplete, Box, Button, Card, Code, Stack} from '@bettercms-ai/kit'
-import {useCallback, useState} from 'react'
-
-export default function FocusAndBlurStory() {
-  const [value, setValue] = useState('')
-  const [log, setLog] = useState<string[]>([])
-  const handleBlur = useCallback(() => setLog((v) => v.concat(['blur'])), [])
-  const handleFocus = useCallback(() => setLog((v) => v.concat(['focus'])), [])
-  const handleClear = useCallback(() => setLog([]), [])
-
-  return (
-    <Box padding={[4, 5, 6]}>
-      <Stack space={3}>
-        <Autocomplete
-          id="focus-and-blur"
-          onBlur={handleBlur}
-          onChange={setValue}
-          onFocus={handleFocus}
-          openButton
-          options={[{value: 'foo'}, {value: 'bar'}]}
-          placeholder="Search"
-          value={value}
-        />
-        <Stack space={3}>
-          <Card overflow="auto" padding={3} radius={2} tone="transparent">
-            <Code id="focus-and-blur-log" language="json" size={1}>
-              {JSON.stringify(log)}
-            </Code>
-          </Card>
-
-          <Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
-        </Stack>
-      </Stack>
-    </Box>
-  )
-}

package/src/core/components/autocomplete/__workshop__/fullscreen.tsx

@@ -1,294 +0,0 @@
-import {CloseIcon, SearchIcon} from '@bettercms-ai/icons'
-import {
-  Autocomplete,
-  BaseAutocompleteOption,
-  Box,
-  Button,
-  Card,
-  Flex,
-  Heading,
-  Label,
-  Layer,
-  Portal,
-  PortalProvider,
-  Skeleton,
-  Stack,
-  Text,
-  TextSkeleton,
-  useToast,
-} from '@bettercms-ai/kit'
-import {useBoolean} from '@bettercms-ai/kit-workshop'
-import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
-
-import {countriesStore} from '../__mocks__/apiStore'
-
-export default function Fullscreen() {
-  const error = useBoolean('Error', false, 'Props')
-
-  const {push: pushToast} = useToast()
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [closeSearchButtonElement, setCloseSearchButtonElement] =
-    useState<HTMLButtonElement | null>(null)
-  const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
-  const searchRef = useRef<{cancel: () => void} | null>(null)
-  const fetchRef = useRef<{cancel: () => void} | null>(null)
-  const openSearchButtonElementRef = useRef<HTMLButtonElement | null>(null)
-  const [loading, setLoading] = useState(false)
-  const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
-  const [open, setOpen] = useState(false)
-  const [optionTitle, setOptionTitle] = useState<string | null>(null)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const [query, setQuery] = useState<string | null>(null)
-  const [value, setValue] = useState<string>('')
-
-  const relatedElements = useMemo(
-    () => [closeSearchButtonElement].filter(Boolean) as HTMLElement[],
-    [closeSearchButtonElement],
-  )
-
-  const search = useCallback((query: string | null) => {
-    if (searchRef.current) searchRef.current.cancel()
-    searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
-  }, [])
-
-  const filterOption = useCallback(() => true, [])
-
-  const handleClose = useCallback(() => setOpen(false), [])
-
-  const handleQueryChange = useCallback(
-    (query: string | null) => {
-      if (query !== null) search(query)
-      setQuery(query)
-    },
-    [search],
-  )
-
-  const handleOpen = useCallback(() => {
-    setValue('')
-    setOpen(true)
-  }, [])
-
-  const handleSelect = useCallback(
-    (v: string) => {
-      setOpen(false)
-      setValue(v)
-      pushToast({status: 'info', title: `Selected “${v}”`})
-    },
-    [pushToast],
-  )
-
-  const renderOption = useCallback((option: BaseAutocompleteOption) => {
-    return <AsyncOption documentId={option.value} />
-  }, [])
-
-  const renderPopover = useCallback(
-    (
-      props: {
-        content: React.ReactNode
-        hidden: boolean
-        onMouseEnter: () => void
-        onMouseLeave: () => void
-      },
-      ref: React.Ref<HTMLDivElement>,
-    ) => {
-      if (!props.hidden && error) {
-        return (
-          <Portal>
-            <Card
-              onMouseEnter={props.onMouseEnter}
-              onMouseLeave={props.onMouseLeave}
-              padding={4}
-              style={{position: 'absolute', inset: '0 0 0 0'}}
-              tone="critical"
-            >
-              <Flex align="center" height="fill" justify="center">
-                <Text align="center" muted>
-                  Something went wrong while searching
-                </Text>
-              </Flex>
-            </Card>
-          </Portal>
-        )
-      }
-
-      if (!props.hidden && query && !loading && options.length === 0) {
-        return (
-          <Portal>
-            <Card
-              onMouseEnter={props.onMouseEnter}
-              onMouseLeave={props.onMouseLeave}
-              padding={4}
-              style={{position: 'absolute', inset: '0 0 0 0'}}
-            >
-              <Flex align="center" height="fill" justify="center">
-                <Text align="center" muted>
-                  No results for <strong>‘{query}’</strong>
-                </Text>
-              </Flex>
-            </Card>
-          </Portal>
-        )
-      }
-
-      return (
-        <Portal>
-          <Card
-            hidden={props.hidden}
-            onMouseEnter={props.onMouseEnter}
-            onMouseLeave={props.onMouseLeave}
-            ref={ref}
-          >
-            {props.content}
-          </Card>
-        </Portal>
-      )
-    },
-    [error, loading, options, query],
-  )
-
-  const renderValue = useCallback(() => {
-    if (loadingCurrentRef) {
-      return 'Loading…'
-    }
-
-    return optionTitle || ''
-  }, [loadingCurrentRef, optionTitle])
-
-  useEffect(() => {
-    if (open) inputRef.current?.focus()
-    if (!open) openSearchButtonElementRef.current?.focus()
-  }, [open])
-
-  useEffect(() => {
-    if (fetchRef.current) fetchRef.current.cancel()
-
-    if (value) {
-      fetchRef.current = countriesStore.fetchDocument(
-        value,
-        (data) => setOptionTitle(data?.title || null),
-        setLoadingCurrentRef,
-      )
-    } else {
-      setOptionTitle(null)
-      setLoadingCurrentRef(false)
-    }
-  }, [value])
-
-  return (
-    <Card style={{display: 'flex', flexDirection: 'column', minHeight: '100%'}} tone="transparent">
-      <PortalProvider element={portalElement}>
-        <Flex direction="column" flex={1} height="fill">
-          <Card hidden={open} padding={2}>
-            <Flex align="center">
-              <Box flex={1} />
-              <Button
-                aria-label="Open search"
-                icon={SearchIcon}
-                mode="ghost"
-                onClick={handleOpen}
-                ref={openSearchButtonElementRef}
-              />
-            </Flex>
-          </Card>
-          <Layer hidden={!open} style={{position: 'sticky', top: 0}}>
-            <Card padding={2} shadow={1}>
-              <Autocomplete
-                filterOption={filterOption}
-                icon={SearchIcon}
-                id="fullsceen-example"
-                listBox={{padding: 2}}
-                loading={loading}
-                onQueryChange={handleQueryChange}
-                onSelect={handleSelect}
-                options={options}
-                placeholder="Search"
-                radius={2}
-                ref={inputRef}
-                relatedElements={relatedElements}
-                renderOption={renderOption}
-                renderPopover={renderPopover}
-                renderValue={renderValue}
-                suffix={
-                  <Box padding={1}>
-                    <Button
-                      aria-label="Close search"
-                      icon={CloseIcon}
-                      onClick={handleClose}
-                      padding={2}
-                      mode="bleed"
-                      ref={setCloseSearchButtonElement}
-                    />
-                  </Box>
-                }
-                value={value}
-              />
-            </Card>
-          </Layer>
-          <Card flex={1} hidden={!open} ref={setPortalElement} style={{position: 'relative'}} />
-          <Box flex={1} hidden={open} padding={4}>
-            <Heading>Welcome to this app</Heading>
-          </Box>
-        </Flex>
-      </PortalProvider>
-    </Card>
-  )
-}
-
-function AsyncOption(props: {
-  documentId: string
-  disabled?: boolean
-  selected?: boolean
-  tabIndex?: number
-}) {
-  const {documentId, disabled, selected, tabIndex} = props
-  const [data, setData] = useState<{code: string; title: string} | null>(null)
-  const [loading, setLoading] = useState(false)
-  const ref = useRef<{cancel: () => void} | null>(null)
-
-  useEffect(() => {
-    if (ref.current) ref.current.cancel()
-    ref.current = countriesStore.fetchDocument(documentId, setData, setLoading)
-  }, [documentId])
-
-  return (
-    <Card
-      aria-label={data?.title}
-      data-as="a"
-      disabled={disabled}
-      padding={2}
-      radius={2}
-      selected={selected}
-      style={{lineHeight: 0}}
-      tabIndex={tabIndex}
-    >
-      <Flex align="center">
-        <Skeleton radius={2} style={{width: 35, height: 35}} />
-        <Box flex={1} marginLeft={3}>
-          <Stack space={2}>
-            {loading && (
-              <>
-                <TextSkeleton style={{maxWidth: 200}} />
-                <TextSkeleton size={1} style={{maxWidth: 120}} />
-              </>
-            )}
-            {!loading && (
-              <>
-                <Text muted={!data} textOverflow="ellipsis">
-                  {data ? data.title : <>Untitled</>}
-                </Text>
-                <Text muted size={1}>
-                  {data?.code}
-                </Text>
-              </>
-            )}
-          </Stack>
-        </Box>
-        <Box paddingX={2}>
-          <Label muted size={0}>
-            Country
-          </Label>
-        </Box>
-      </Flex>
-    </Card>
-  )
-}

package/src/core/components/autocomplete/__workshop__/index.ts

@@ -1,39 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/autocomplete',
-  title: 'Autocomplete',
-  stories: [
-    {
-      name: 'example',
-      title: 'Example',
-      component: lazy(() => import('./example')),
-    },
-    {
-      name: 'custom',
-      title: 'Custom',
-      component: lazy(() => import('./custom')),
-    },
-    {
-      name: 'async',
-      title: 'Async',
-      component: lazy(() => import('./async')),
-    },
-    {
-      name: 'constrained-height',
-      title: 'Constrained height',
-      component: lazy(() => import('./constrainedHeight')),
-    },
-    {
-      name: 'focus-and-blur',
-      title: 'Focus and blur',
-      component: lazy(() => import('./focusAndBlur')),
-    },
-    {
-      name: 'fullscreen',
-      title: 'Fullscreen',
-      component: lazy(() => import('./fullscreen')),
-    },
-  ],
-})

package/src/core/components/autocomplete/__workshop__/types.ts

@@ -1,4 +0,0 @@
-export interface ExampleOption {
-  value: string
-  title: string
-}

package/src/core/components/autocomplete/autocomplete.styles.tsx

@@ -1,39 +0,0 @@
-import {SpinnerIcon} from '@bettercms-ai/icons'
-import {keyframes, styled} from 'styled-components'
-
-import {Box} from '../../primitives'
-
-/**
- * @internal
- */
-export const StyledAutocomplete = styled.div`
-  line-height: 0;
-`
-
-/**
- * @internal
- */
-export const ListBox = styled(Box)`
-  & > ul {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-`
-
-const rotate = keyframes`
-  from {
-    transform: rotate(0deg);
-  }
-
-  to {
-    transform: rotate(360deg);
-  }
-`
-
-/**
- * @internal
- */
-export const AnimatedSpinnerIcon = styled(SpinnerIcon)`
-  animation: ${rotate} 500ms linear infinite;
-`