@bettercms-ai/kit 0.1.1 → 2.0.0

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

@@ -1,19 +0,0 @@
-import {defineScope} from '@bettercms-ai/kit-workshop'
-import {lazy} from 'react'
-
-export default defineScope({
-  name: 'components/dialog',
-  title: 'Dialog',
-  stories: [
-    {name: 'props', title: 'Props', component: lazy(() => import('./props'))},
-    {name: 'nested', title: 'Nested', component: lazy(() => import('./nested'))},
-    {name: 'on-scroll', title: 'On scroll', component: lazy(() => import('./onScroll'))},
-    {name: 'layering', title: 'Layering', component: lazy(() => import('./layering'))},
-    {name: 'position', title: 'Position', component: lazy(() => import('./position'))},
-    {name: 'provider', title: 'Provider', component: lazy(() => import('./provider'))},
-    {name: 'auto-focus', title: 'AutoFocus', component: lazy(() => import('./autoFocus'))},
-    {name: 'panes', title: 'Panes', component: lazy(() => import('./panes'))},
-    {name: 'activate', title: 'Activate', component: lazy(() => import('./activate'))},
-    {name: 'wrapped', title: 'Wrapped', component: lazy(() => import('./wrapped'))},
-  ],
-})

package/src/core/components/dialog/__workshop__/layering.tsx

@@ -1,41 +0,0 @@
-import {Box, Card, Code, Dialog, Layer, LayerProvider, useLayer} from '@bettercms-ai/kit'
-import {useAction} from '@bettercms-ai/kit-workshop'
-
-export default function LayeringStory() {
-  return (
-    <Box padding={[4, 5, 6]}>
-      <LayerProvider>
-        <Layer zOffset={10} id="a">
-          <Card padding={2} shadow={2}>
-            <DebugLayer />
-          </Card>
-        </Layer>
-        <Layer zOffset={10} id="b">
-          <Card padding={2} shadow={2}>
-            <DebugLayer />
-          </Card>
-        </Layer>
-        <Dialog
-          header="Layering example"
-          id="layering-example"
-          onClose={useAction('onEscape')}
-          zOffset={100}
-        >
-          <Box padding={4}>
-            <DebugLayer />
-          </Box>
-        </Dialog>
-      </LayerProvider>
-    </Box>
-  )
-}
-
-function DebugLayer() {
-  const layer = useLayer()
-
-  return (
-    <Code language="json" size={1}>
-      {JSON.stringify(layer, null, 2)}
-    </Code>
-  )
-}

package/src/core/components/dialog/__workshop__/nested.tsx

@@ -1,72 +0,0 @@
-import {Box, Button, Dialog, LayerProvider, Menu, MenuButton, MenuItem} from '@bettercms-ai/kit'
-import {useEffect, useRef, useState} from 'react'
-
-export default function NestedStory() {
-  const [open1] = useState(true)
-  const [open2, setOpen2] = useState(false)
-  const [open3, setOpen3] = useState(false)
-
-  const dialog2Button = useRef<HTMLButtonElement>(null)
-  const dialog3Button = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    if (!open2) dialog2Button.current?.focus()
-  }, [open2])
-
-  useEffect(() => {
-    if (!open3) dialog3Button.current?.focus()
-  }, [open3])
-
-  return (
-    <LayerProvider>
-      {open1 && (
-        <Dialog animate cardShadow={1} header="Dialog 1" id="dialog1">
-          <Box padding={4}>
-            <Button onClick={() => setOpen2(true)} ref={dialog2Button} text="Open Dialog 2" />
-          </Box>
-
-          {open2 && (
-            <Dialog
-              animate
-              cardShadow={2}
-              header="Dialog 2"
-              id="dialog2"
-              onClose={() => setOpen2(false)}
-              onClickOutside={() => setOpen2(false)}
-            >
-              <Box padding={4}>
-                <Button onClick={() => setOpen3(true)} ref={dialog3Button} text="Open Dialog 3" />
-              </Box>
-
-              {open3 && (
-                <Dialog
-                  animate
-                  cardShadow={4}
-                  header="Dialog 3"
-                  id="dialog3"
-                  onClose={() => setOpen3(false)}
-                  onClickOutside={() => setOpen3(false)}
-                >
-                  <Box padding={4}>
-                    <MenuButton
-                      button={<Button text="Test" />}
-                      id="menu3"
-                      popover={{animate: true}}
-                      menu={
-                        <Menu>
-                          <MenuItem text="Test" />
-                          <MenuItem text="Test" />
-                        </Menu>
-                      }
-                      portal
-                    />
-                  </Box>
-                </Dialog>
-              )}
-            </Dialog>
-          )}
-        </Dialog>
-      )}
-    </LayerProvider>
-  )
-}

package/src/core/components/dialog/__workshop__/onScroll.tsx

@@ -1,39 +0,0 @@
-import {Box, Dialog, LayerProvider, Text} from '@bettercms-ai/kit'
-import {useAction} from '@bettercms-ai/kit-workshop'
-import {useEffect, useRef} from 'react'
-
-export default function OnScrollStory() {
-  const ref = useRef<HTMLDivElement | null>(null)
-  const handleScroll = useAction('scroll')
-
-  useEffect(() => {
-    const el = ref.current
-
-    if (!el) return
-
-    el.addEventListener('scroll', handleScroll, {passive: true})
-
-    return () => el.removeEventListener('scroll', handleScroll)
-  }, [handleScroll])
-
-  return (
-    <LayerProvider>
-      <Dialog contentRef={ref} header="On scroll example" id="on-scroll-example">
-        <Box padding={4}>
-          <Text>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at nisl at sem tempor
-            hendrerit scelerisque ut libero. Maecenas iaculis efficitur lorem, ac faucibus mi
-            imperdiet quis. Cras a consectetur erat. Fusce imperdiet, dolor et pellentesque iaculis,
-            ex quam luctus felis, non ultrices enim sem vitae quam. Duis lorem velit, lacinia at
-            rhoncus a, tempus vel neque. Vestibulum ante ipsum primis in faucibus orci luctus et
-            ultrices posuere cubilia curae; Sed id mauris quam. Nam finibus sapien non lacinia
-            ultricies. Integer fermentum tortor at pellentesque faucibus. In venenatis commodo
-            placerat. Curabitur commodo tortor libero, vel pellentesque elit luctus sodales. Donec
-            mattis tristique nunc ac lacinia. Vestibulum non pulvinar turpis, posuere consequat
-            arcu. Fusce ut urna blandit, finibus nisi a, molestie elit. Nulla sed eleifend mi.
-          </Text>
-        </Box>
-      </Dialog>
-    </LayerProvider>
-  )
-}

package/src/core/components/dialog/__workshop__/panes.tsx

@@ -1,82 +0,0 @@
-import {useCallback, useState} from 'react'
-import {styled} from 'styled-components'
-
-import {Box, Button, Card, Flex} from '../../../primitives'
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Menu, MenuButton, MenuItem} from '../../menu'
-import {Dialog} from '../dialog'
-
-export default function PanesStory() {
-  return (
-    <Flex height="fill">
-      <Pane id="A" />
-      <Pane id="B" borderLeft />
-    </Flex>
-  )
-}
-
-const PaneRoot = styled(Card)`
-  position: relative;
-`
-
-const PanePortal = styled.div`
-  position: absolute;
-  left: 0;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-`
-
-function Pane(props: {borderLeft?: boolean; id: string}) {
-  const {borderLeft, id} = props
-  const [element, setElement] = useState<HTMLDivElement | null>(null)
-  const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
-  const [dialogOpen, setDialogOpen] = useState(false)
-
-  const handleClose = useCallback(() => {
-    setDialogOpen(false)
-  }, [])
-
-  return (
-    <BoundaryElementProvider element={element}>
-      <PortalProvider element={portalElement}>
-        <PaneRoot borderLeft={borderLeft} flex={1} ref={setElement}>
-          <Box padding={4}>
-            <Button onClick={() => setDialogOpen(true)} selected={dialogOpen} text="Open dialog" />
-          </Box>
-
-          <PanePortal ref={setPortalElement} />
-        </PaneRoot>
-
-        {dialogOpen && (
-          <Dialog
-            header={`Dialog ${id}`}
-            id={id}
-            onClickOutside={handleClose}
-            onClose={handleClose}
-            position="absolute"
-          >
-            <Box padding={4}>
-              <MenuButton
-                button={<Button text="Open menu" />}
-                id={`${id}-menu`}
-                menu={
-                  <Menu>
-                    <MenuItem text="Item 1" />
-                    <MenuItem text="Item 2" />
-                    <MenuItem text="Item 3" />
-                  </Menu>
-                }
-              />
-            </Box>
-          </Dialog>
-        )}
-      </PortalProvider>
-    </BoundaryElementProvider>
-  )
-}

package/src/core/components/dialog/__workshop__/position.tsx

@@ -1,30 +0,0 @@
-import {ArrowDownIcon, ArrowUpIcon} from '@bettercms-ai/icons'
-import {Box, Dialog, LayerProvider, Stack, Text} from '@bettercms-ai/kit'
-import {useBoolean, useSelect} from '@bettercms-ai/kit-workshop'
-
-import {WORKSHOP_DIALOG_POSITION_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PositionStory() {
-  const open = useBoolean('Open', true, 'Props')
-  const position = useSelect('Position', WORKSHOP_DIALOG_POSITION_OPTIONS, 'fixed', 'Props')
-
-  return (
-    <Box padding={4}>
-      <Box style={{padding: 'calc(100vh - 100px) 0'}}>
-        <Stack space={3}>
-          <Text align="center">
-            <ArrowUpIcon />
-          </Text>
-          <Text align="center">Scrollable</Text>
-          <Text align="center">
-            <ArrowDownIcon />
-          </Text>
-        </Stack>
-
-        <LayerProvider>
-          {open && <Dialog header="Position example" id="position-example" position={position} />}
-        </LayerProvider>
-      </Box>
-    </Box>
-  )
-}

package/src/core/components/dialog/__workshop__/props.tsx

@@ -1,75 +0,0 @@
-import {Box, Button, Dialog, LayerProvider, Stack, Text} from '@bettercms-ai/kit'
-import {useBoolean, useSelect, useText} from '@bettercms-ai/kit-workshop'
-import {useCallback, useRef, useState} from 'react'
-
-import {WORKSHOP_WIDTH_OPTIONS} from '../../../__workshop__/constants'
-
-export default function PropsStory() {
-  const header = useText('Header', 'Props example', 'Props')
-  const onClickOutside = useBoolean('Close when click outside', false, 'Props') || false
-  const hideCloseButton = useBoolean('Hide close button', false, 'Props') || false
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 0, 'Props')
-  const [open, setOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement | null>(null)
-
-  const handleClose = useCallback(() => {
-    setOpen(false)
-    buttonRef.current?.focus()
-  }, [])
-
-  return (
-    <LayerProvider>
-      <Box padding={[4, 5, 6]}>
-        <Button
-          id="open-dialog-button"
-          onClick={() => setOpen(true)}
-          ref={buttonRef}
-          text="Open dialog"
-        />
-
-        {open && (
-          <Dialog
-            __unstable_hideCloseButton={hideCloseButton}
-            header={header}
-            id="dialog"
-            onClickOutside={onClickOutside ? handleClose : undefined}
-            onClose={handleClose}
-            open={open}
-            width={width}
-          >
-            <Box padding={4}>
-              <Stack space={4}>
-                <Text>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et orci vitae diam
-                  aliquet imperdiet.
-                </Text>
-                <Button id="button-1" text="Focus test" />
-                <Text>
-                  Sed in hendrerit metus. Sed sapien neque, imperdiet eu justo sed, vestibulum
-                  mollis dolor.
-                </Text>
-                <Button id="button-2" text="Focus test" />
-                <Text>
-                  Nulla sit amet ipsum ligula. Duis sit amet velit tempor, ultricies mauris
-                  dignissim, mollis enim.
-                </Text>
-                <Button id="button-3" text="Focus test" />
-                <Text>Cras quis elit non mauris faucibus molestie non non augue. </Text>
-                <Text>
-                  Proin suscipit gravida sodales. Morbi vel purus molestie, rhoncus augue sit amet,
-                  auctor justo.
-                </Text>
-                <Button id="button-4" text="Focus test" />
-                <Text>Proin lobortis nunc a tellus condimentum, a ultrices arcu egestas.</Text>
-                <Button id="button-5" text="Focus test" />
-                <Text>
-                  Suspendisse augue nibh, euismod sit amet sapien nec, molestie dignissim magna.
-                </Text>
-              </Stack>
-            </Box>
-          </Dialog>
-        )}
-      </Box>
-    </LayerProvider>
-  )
-}

package/src/core/components/dialog/__workshop__/provider.tsx

@@ -1,11 +0,0 @@
-import {Dialog, DialogProvider} from '@bettercms-ai/kit'
-
-export default function ProviderStory() {
-  return (
-    <DialogProvider position="absolute" zOffset={1000}>
-      <Dialog header="Outer" id="provider-example">
-        <Dialog header="Inner" id="nested-provider-example" />
-      </Dialog>
-    </DialogProvider>
-  )
-}

package/src/core/components/dialog/__workshop__/wrapped.tsx

@@ -1,76 +0,0 @@
-import {Box, Button, Dialog, DialogProps, LayerProvider, useLayer} from '@bettercms-ai/kit'
-import {ReactNode, useCallback, useEffect, useRef, useState} from 'react'
-
-export default function WrappedStory() {
-  return (
-    <LayerProvider zOffset={100}>
-      <Box padding={4}>
-        <DialogButton level={0} />
-      </Box>
-    </LayerProvider>
-  )
-}
-
-function DialogButton(props: {level: number}) {
-  const {level} = props
-  const [open, setOpen] = useState(false)
-
-  const openRef = useRef(open)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-
-  useEffect(() => {
-    if (openRef.current !== open) {
-      openRef.current = open
-
-      if (!open) {
-        // focus the button that opened the dialog
-        // buttonRef.current?.focus()
-      }
-    }
-  }, [open])
-
-  return (
-    <>
-      <Button onClick={() => setOpen(true)} ref={buttonRef} text={`Open dialog ${level + 1}`} />
-
-      {open && (
-        <WrappedDialog
-          header={`WrappedDialog ${level + 1}`}
-          id={`wrapped-${level + 1}`}
-          onClickOutside={() => setOpen(false)}
-          onClose={() => setOpen(false)}
-        >
-          <Box padding={4}>
-            <DialogButton level={level + 1} />
-          </Box>
-        </WrappedDialog>
-      )}
-    </>
-  )
-}
-
-function WrappedDialog(props: DialogProps & {children?: ReactNode}) {
-  const layer = useLayer()
-  const isTopLayer = layer.size === 1
-
-  const dialogRef = useRef<HTMLDivElement>(null)
-
-  const [lastFocusedElement, setLastFocusedElement] = useState<HTMLElement | null>(null)
-
-  const handleContentFocus = useCallback(() => {
-    const containsActiveElement = dialogRef.current?.contains(document.activeElement)
-
-    if (containsActiveElement) {
-      setLastFocusedElement(document.activeElement as HTMLElement)
-    }
-  }, [])
-
-  // Set focus on the last focused element when the dialog becomes the top layer.
-  useEffect(() => {
-    if (isTopLayer && lastFocusedElement) {
-      lastFocusedElement.focus()
-    }
-  }, [isTopLayer, lastFocusedElement])
-
-  return <Dialog {...props} data-size={layer.size} onFocus={handleContentFocus} ref={dialogRef} />
-}