{"version":3,"file":"GridLayout.stories.jsx","sourceRoot":"","sources":["../../../src/core/PageTemplates/GridLayout.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["/* eslint react-hooks/exhaustive-deps: error */\nimport { useCallback, useRef, useState, useMemo, type ReactNode } from 'react';\nimport type { Meta, StoryFn } from '@storybook/react';\n\nimport {\n  Button,\n  Card,\n  CardContent,\n  Flex,\n  GridLayoutEditor,\n  GridLayoutViewer,\n  Text,\n  useConfiguration\n} from '@pega/cosmos-react-core';\nimport type { GridLayoutHandleValue, GridLayoutModel } from '@pega/cosmos-react-core';\nimport { ParentFitFlexItem } from '@pega/cosmos-react-core/lib/components/PageTemplates/GridLayout/utils';\n\nimport {\n  deriveGridChildren,\n  generateNewItem,\n  getInitialGridConfig,\n  gridBreakpointSetup,\n  persistGridConfig,\n  SbGlobalHeight,\n  StyledStory\n} from './GridLayout.mocks';\n\nexport default {\n  title: 'Core/PageTemplates/GridLayout',\n  parameters: {\n    layout: 'fullscreen'\n  }\n} as Meta;\n\nexport const Editor: StoryFn = () => {\n  const handle = useRef<GridLayoutHandleValue>(null);\n\n  const [gridConfig, setGridConfig] = useState(getInitialGridConfig);\n\n  const children = useMemo(() => deriveGridChildren(gridConfig.items), [gridConfig.items]);\n\n  const itemLabelMap = useMemo(\n    () =>\n      gridConfig.items.reduce(\n        (acc, item) => {\n          // Using item type as label, just for storybook\n          acc[item.id] = item.type;\n          return acc;\n        },\n        {} as Record<string, string>\n      ),\n    [gridConfig.items]\n  );\n\n  const addItem = useCallback(\n    (type: 'CHART' | 'PARAGRAPH') => {\n      const maxYInLayout = gridConfig.layout.lg\n        ? Math.max(...gridConfig.layout.lg.map(item => item.y + item.h))\n        : 0;\n\n      const newItem = generateNewItem(type);\n      const newLayoutObj = { i: newItem.id, x: 0, y: maxYInLayout, w: 4, h: 3, minW: 2, minH: 2 };\n      setGridConfig({\n        items: [...gridConfig.items, newItem],\n        layout: { lg: [...(gridConfig.layout.lg || []), newLayoutObj] }\n      });\n    },\n    [gridConfig]\n  );\n\n  const resetGrid = () => {\n    setGridConfig(getInitialGridConfig(true));\n  };\n\n  const [validityMessage, setValidityMessage] = useState<ReactNode>('');\n  const validateLayout = useCallback(() => {\n    const hasGaps = handle.current?.checkForGaps();\n    setValidityMessage(\n      hasGaps ? <Text status='warning'>Has gaps</Text> : <Text status='success'>No gaps</Text>\n    );\n  }, [handle]);\n\n  const onModelChange = (newModel?: GridLayoutModel) => {\n    if (newModel) setGridConfig({ ...gridConfig, layout: newModel });\n  };\n\n  return (\n    <>\n      <SbGlobalHeight />\n      <StyledStory container={{ direction: 'column' }}>\n        <Card>\n          <CardContent container={{ direction: 'row', justify: 'between' }}>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              <Button onClick={() => addItem('CHART')}>Add chart</Button>\n              <Button onClick={() => addItem('PARAGRAPH')}>Add paragraph</Button>\n            </Flex>\n            <Flex container={{ alignItems: 'center', gap: 1 }}>\n              {validityMessage}\n              <Button onClick={resetGrid}>Reset</Button>\n              <Button onClick={validateLayout}>Validate</Button>\n              <Button onClick={() => persistGridConfig(gridConfig)} variant='primary'>\n                Persist\n              </Button>\n            </Flex>\n          </CardContent>\n        </Card>\n\n        <ParentFitFlexItem>\n          <GridLayoutEditor\n            {...gridBreakpointSetup}\n            handle={handle}\n            layoutModel={gridConfig.layout}\n            onModelChange={onModelChange}\n            itemLabelMap={itemLabelMap}\n          >\n            {children}\n          </GridLayoutEditor>\n        </ParentFitFlexItem>\n      </StyledStory>\n    </>\n  );\n};\n\nexport const Viewer: StoryFn = () => {\n  const { items, layout } = useMemo(() => getInitialGridConfig(), []);\n  const children = useMemo(() => deriveGridChildren(items), [items]);\n  const { direction } = useConfiguration();\n\n  return (\n    <>\n      <SbGlobalHeight />\n      <GridLayoutViewer\n        {...gridBreakpointSetup}\n        layoutModel={layout}\n        autoSizeItemIDs={['feed-1']}\n        key={direction}\n      >\n        {children}\n      </GridLayoutViewer>\n    </>\n  );\n};\n"]}