@strapi/design-system 1.3.0-beta.1 → 1.3.0-beta.2

package/src/helpers/getFocusableNodes.js

@@ -1,35 +0,0 @@
-/**
- * Sometimes, we want to retrieve the elements with tabindex=-1, and sometime we don't
- * The includeNegativeTabIndex aims to provide this capability
- *
- * @param {HTMLElement} node HTMLElement
- * @param {boolean} includeNegativeTabIndex boolean
- * @returns {HTMLElement[]} HTMLElement[]
- */
-export const getFocusableNodes = (node, includeNegativeTabIndex) => {
-  const nodes = [
-    ...node.querySelectorAll('a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'),
-  ];
-  const focusables = nodes.filter((node) => {
-    if (node.hasAttribute('disabled')) return false;
-    if (includeNegativeTabIndex) return true;
-
-    return node.getAttribute('tabindex') !== '-1';
-  });
-
-  return focusables;
-};
-
-/**
- * This function filters an array of HTMLElements and returns any of them that have internal keyboard navigation such as input type="text"
- * @param {HTMLElement[]} nodes HTMLElement[]
- */
-export const getFocusableNodesWithKeyboardNav = (nodes) => {
-  return nodes.filter((node) => {
-    if (node.tagName === 'INPUT') {
-      return node.type !== 'checkbox' && node.type !== 'radio';
-    }
-
-    return false;
-  });
-};

package/src/helpers/handleResponsiveValues.js

@@ -1,34 +0,0 @@
-const handleResponsiveValues = (property, value, theme) => {
-  let transformedArray = value;
-  if (!Array.isArray(value) && typeof value === 'object') {
-    transformedArray = [value?.desktop, value?.tablet, value?.mobile];
-  }
-
-  if (transformedArray === undefined) return undefined;
-
-  if (Array.isArray(transformedArray)) {
-    const [desktopValue, tabletValue, mobileValue] = transformedArray;
-
-    let spaces = `${property}: ${theme.spaces[desktopValue]};`;
-
-    if (tabletValue !== undefined) {
-      spaces += `${theme.mediaQueries.tablet}{
-          ${property}: ${theme.spaces[tabletValue]};
-        }`;
-    }
-
-    if (mobileValue !== undefined) {
-      spaces += `${theme.mediaQueries.mobile}{
-          ${property}: ${theme.spaces[mobileValue]};
-        }`;
-    }
-
-    return spaces;
-  }
-
-  // Fallback to the passed transformedArray when necessary
-  const realValue = theme.spaces[transformedArray] || transformedArray;
-  return `${property}: ${realValue};`;
-};
-
-export default handleResponsiveValues;

package/src/helpers/keyboardKeys.js

@@ -1,17 +0,0 @@
-export const KeyboardKeys = {
-  DOWN: 'ArrowDown',
-  UP: 'ArrowUp',
-  RIGHT: 'ArrowRight',
-  LEFT: 'ArrowLeft',
-  ESCAPE: 'Escape',
-  ENTER: 'Enter',
-  SPACE: ' ',
-  TAB: 'Tab',
-  END: 'End',
-  HOME: 'Home',
-  DELETE: 'Delete',
-  PAGE_UP: 'PageUp',
-  PAGE_DOWN: 'PageDown',
-  BACKSPACE: 'Backspace',
-  CLEAR: 'Clear',
-};

package/src/helpers/setOpacity.js

@@ -1,4 +0,0 @@
-export const setOpacity = (hex, alpha) =>
-  `${hex}${Math.floor(alpha * 255)
-    .toString(16)
-    .padStart(2, 0)}`;

package/src/helpers/setTabIndexOnFirstItem.js

@@ -1,7 +0,0 @@
-export const setTabIndexOnFirstItem = (node, selector) => {
-  const list = node.querySelectorAll(selector);
-
-  if (list && list.length > 0) {
-    list.item(0).setAttribute('tabindex', '0');
-  }
-};

package/src/helpers/useElementOnScreen.js

@@ -1,27 +0,0 @@
-import { useRef, useState, useEffect } from 'react';
-
-export const useElementOnScreen = (options) => {
-  const containerRef = useRef(null);
-  const [isVisible, setIsVisible] = useState(true);
-
-  const callback = ([entry]) => {
-    setIsVisible(entry.isIntersecting);
-  };
-
-  useEffect(() => {
-    const containerEl = containerRef.current;
-    const observer = new IntersectionObserver(callback, options);
-
-    if (containerEl) {
-      observer.observe(containerRef.current);
-    }
-
-    return () => {
-      if (containerEl) {
-        observer.disconnect();
-      }
-    };
-  }, [containerRef, options]);
-
-  return [containerRef, isVisible];
-};

package/src/helpers/useId.js

@@ -1,8 +0,0 @@
-import { useRef } from 'react';
-import { genId } from './genId';
-
-export const useId = (prefix, initialId) => {
-  const idRef = useRef(initialId || `${prefix}-${genId()}`);
-
-  return idRef.current;
-};

package/src/helpers/useIntersection.js

@@ -1,31 +0,0 @@
-import { useEffect } from 'react';
-
-export const useIntersection = (scrollableAreaRef, callback, { selectorToWatch, skipWhen = false }) => {
-  useEffect(() => {
-    if (skipWhen) return;
-
-    const options = {
-      root: scrollableAreaRef.current,
-      rootMargin: '0px',
-    };
-
-    const onEnterZone = (entries) => {
-      entries.forEach((entry) => {
-        if (entry.isIntersecting) {
-          if (scrollableAreaRef.current.scrollHeight > scrollableAreaRef.current.clientHeight) {
-            callback(entry);
-          }
-        }
-      });
-    };
-
-    const observer = new IntersectionObserver(onEnterZone, options);
-    const target = scrollableAreaRef.current.querySelector(selectorToWatch);
-
-    observer.observe(target);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [skipWhen, callback, selectorToWatch]);
-};

package/src/helpers/useLockScroll.js

@@ -1,14 +0,0 @@
-import { useEffect } from 'react';
-
-const useLockScroll = (lockScroll) => {
-  useEffect(() => {
-    if (lockScroll) {
-      document.body.classList.add('lock-body-scroll');
-    }
-    return () => {
-      document.body.classList.remove('lock-body-scroll');
-    };
-  }, [lockScroll]);
-};
-
-export default useLockScroll;

package/src/helpers/usePrevious.js

@@ -1,9 +0,0 @@
-import { useRef, useEffect } from 'react';
-
-export const usePrevious = (value) => {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-};

package/src/helpers/useResizeObserver.js

@@ -1,22 +0,0 @@
-import { useLayoutEffect } from 'react';
-
-export const useResizeObserver = (sources, onResize) => {
-  useLayoutEffect(() => {
-    const resizeObs = new ResizeObserver(onResize);
-    if (Array.isArray(sources)) {
-      sources.map((source) => {
-        if (source.current) {
-          resizeObs.observe(source.current);
-        }
-      });
-    } else {
-      if (sources.current) {
-        resizeObs.observe(sources.current);
-      }
-    }
-
-    return () => {
-      resizeObs.disconnect();
-    };
-  }, []);
-};

package/src/index.js

@@ -1,65 +0,0 @@
-export * from './Accordion';
-export * from './Alert';
-export * from './Avatar';
-export * from './Badge';
-export * from './BaseButton';
-export * from './BaseCheckbox';
-export * from './BaseLink';
-export * from './BaseRadio';
-export * from './Box';
-export * from './Breadcrumbs';
-export * from './Button';
-export * from './Card';
-export * from './CarouselInput';
-export * from './Checkbox';
-export * from './Combobox';
-export * from './Dialog';
-export * from './DismissibleLayer';
-export * from './DatePicker';
-export * from './DateTimePicker';
-export * from './Divider';
-export * from './EmptyStateLayout';
-export * from './Field';
-export * from './FocusTrap';
-export * from './Grid';
-export * from './Icon';
-export * from './IconButton';
-export * from './KeyboardNavigable';
-export * from './Layout';
-export * from './Link';
-export * from './LinkButton';
-export * from './LiveRegions';
-export * from './Loader';
-export * from './Main';
-export * from './MainNav';
-export * from './ModalLayout';
-export * from './NumberInput';
-export * from './Pagination';
-export * from './Popover';
-export * from './Portal';
-export * from './ProgressBar';
-export * from './Radio';
-export * from './RawTable';
-export * from './Flex';
-export * from './Searchbar';
-export * from './Select';
-export * from './SimpleMenu';
-export * from './Stack';
-export * from './Status';
-export * from './SubNav';
-export * from './Switch';
-export * from './Tabs';
-export * from './Table';
-export * from './Tag';
-export * from './TextButton';
-export * from './TextInput';
-export * from './Textarea';
-export * from './ThemeProvider';
-export * from './TimePicker';
-export * from './ToggleCheckbox';
-export * from './ToggleInput';
-export * from './Tooltip';
-export * from './Typography';
-export * from './VisuallyHidden';
-export * from './v2';
-export * from './themes';

package/src/themes/ColorButton.js

@@ -1,24 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
-import styled from 'styled-components';
-
-const StyledBox = styled(Box)`
-  background: ${({ color }) => color};
-`;
-
-export const ColorButton = ({ colorKey, color }) => {
-  return (
-    <StyledBox color={color} paddingTop={6} paddingLeft={6} hasRadius shadow="popupShadow" borderColor="neutral200">
-      <Box background="neutral0" padding={1}>
-        <Typography>{colorKey}</Typography>
-      </Box>
-    </StyledBox>
-  );
-};
-
-ColorButton.propTypes = {
-  color: PropTypes.string.isRequired,
-  colorKey: PropTypes.string.isRequired,
-};

package/src/themes/Theme.stories.mdx

@@ -1,227 +0,0 @@
-<!--- TimePicker.stories.mdx --->
-
-import { useState } from 'react';
-import * as Icons from '@strapi/icons';
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { Box } from '../Box';
-import { Flex } from '../Flex';
-import { Typography } from '../Typography';
-import { Grid, GridItem } from '../Grid';
-import { useTheme } from '../ThemeProvider';
-import { Stack } from '../Stack';
-import { Searchbar, SearchForm } from '../Searchbar';
-import { Icon } from '../Icon';
-import { Tooltip } from '../Tooltip';
-import { darkColorTokenObject } from './darkTheme/dark-colors';
-import { lightColorTokenObject } from './lightTheme/light-colors.js';
-import { ColorButton } from './ColorButton';
-
-<Meta title="Design System/Components/Theme" component={Box} />
-
-# Theme
-
-This is the documentation of the `Theme` component
-
-## Light colors
-
-This is the light colors used for the light mode
-
-<Canvas>
-  <Story name="light colors">
-    {() => {
-      const { color } = lightColorTokenObject;
-      const colors = [];
-      let ruptureKey;
-      for (const colorKey of Object.keys(color)) {
-        const prefix = colorKey.substr(0, 2);
-        if (ruptureKey !== prefix) {
-          colors.push([]);
-          ruptureKey = prefix;
-        }
-        colors[colors.length - 1].push({ colorKey, colorValue: color[colorKey] });
-      }
-      return (
-        <Box>
-          <Grid>
-            {colors.map((colorGroup, idx) => (
-              <GridItem key={`color-group-${idx}`} padding={4}>
-                <Stack spacing={2}>
-                  {colorGroup.map(({ colorKey, colorValue }) => (
-                    <ColorButton key={colorKey} colorKey={colorKey} color={colorValue} />
-                  ))}
-                </Stack>
-              </GridItem>
-            ))}
-          </Grid>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Dark colors
-
-This is the dark colors used for the dark mode
-
-<Canvas>
-  <Story name="dark colors">
-    {() => {
-      const { color } = darkColorTokenObject;
-      const colors = [];
-      let ruptureKey;
-      for (const colorKey of Object.keys(color)) {
-        const prefix = colorKey.substr(0, 2);
-        if (ruptureKey !== prefix) {
-          colors.push([]);
-          ruptureKey = prefix;
-        }
-        colors[colors.length - 1].push({ colorKey, colorValue: color[colorKey] });
-      }
-      return (
-        <Box>
-          <Grid>
-            {colors.map((colorGroup, idx) => (
-              <GridItem key={`color-group-${idx}`} padding={4}>
-                <Stack spacing={2}>
-                  {colorGroup.map(({ colorKey, colorValue }) => (
-                    <ColorButton key={colorKey} colorKey={colorKey} color={colorValue} />
-                  ))}
-                </Stack>
-              </GridItem>
-            ))}
-          </Grid>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Shadows
-
-We have 3 types of shadows: Table, Popup, Filter. We use the drop shadows on different cases:
-
-- On Containers
-- On Filters
-- On Modals & PopOvers
-
-<Canvas>
-  <Story name="shadows">
-    {() => {
-      const theme = useTheme();
-      const shadows = Object.keys(theme.shadows);
-      return (
-        <Box padding={8} background="neutral100">
-          <Grid gap={4}>
-            {shadows.map((shadow) => (
-              <GridItem padding={8} shadow={shadow} background="neutral0" col={3} key={shadow}>
-                <Typography>{shadow}</Typography>
-              </GridItem>
-            ))}
-          </Grid>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Spaces
-
-A spacing system helps the content to follow a logical order and increase readability. It is based on multiples of 4px when it comes to defining measurements, spacing, and positioning elements.
-
-<Canvas>
-  <Story name="spaces">
-    {() => {
-      const theme = useTheme();
-      const spaces = Object.keys(theme.spaces);
-      return (
-        <Box padding={8} background="neutral100">
-          <Stack spacing={1}>
-            {spaces.map((space) => (
-              <Flex key={`space-${space}`}>
-                <Box paddingLeft={2}>
-                  <Typography>{space}</Typography> <Typography variant="pi">({theme.spaces[space]})</Typography>
-                </Box>
-              </Flex>
-            ))}
-          </Stack>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>
-
-## Icons
-
-Icons are used to emphasize actions and specific menus in the admin panel. We can find different type of icons: Navigation, Action, Notification, and illustrations.
-
-<Canvas>
-  <Story
-    name="icons"
-    parameters={{
-      storyshots: { disable: true },
-    }}
-  >
-    {() => {
-      const [value, setValue] = useState('');
-      const iconsArray = Object.keys(Icons)
-        .filter((icon) => {
-          if (!value) {
-            return true;
-          }
-          return icon.toLowerCase().includes(value.toLowerCase());
-        })
-        .sort();
-      return (
-        <Box>
-          <Box paddingBottom={8}>
-            <SearchForm>
-              <Searchbar
-                name="searchbar"
-                onClear={() => setValue('')}
-                value={value}
-                onChange={(e) => setValue(e.target.value)}
-                clearLabel="Clearing the asset search"
-                placeholder="e.g: AddAsset"
-              >
-                Search for an icon
-              </Searchbar>
-            </SearchForm>
-          </Box>
-          <Box padding={8} background="neutral100">
-            <Grid gap={2}>
-              {iconsArray.map((icon) => {
-                const RealIcon = Icons[icon];
-                return (
-                  <GridItem padding={2} col={2} key={icon} background={'neutral0'}>
-                    <Box>
-                      <Icon
-                        aria-hidden={true}
-                        colors={(theme) => ({
-                          rect: {
-                            fill: theme.colors.danger600,
-                          },
-                        })}
-                        as={RealIcon}
-                        fontSize={5}
-                      />
-                    </Box>
-                    <Box>
-                      <Tooltip description="Copy import">
-                        <CopyToClipboard text={`import ${icon} from '@strapi/icons/${icon}';`}>
-                          <Typography fontWeight="bold" as="button" type="button">
-                            {icon}
-                          </Typography>
-                        </CopyToClipboard>
-                      </Tooltip>
-                    </Box>
-                  </GridItem>
-                );
-              })}
-            </Grid>
-          </Box>
-        </Box>
-      );
-    }}
-  </Story>
-</Canvas>

package/src/themes/__tests__/extendTheme.spec.js

@@ -1,119 +0,0 @@
-import { extendTheme } from '../extendTheme';
-import { lightTheme } from '../lightTheme';
-
-Object.freeze(lightTheme);
-
-describe('extendTheme', () => {
-  it('throws an error when passing an invalid value for the first argument', () => {
-    let error;
-
-    try {
-      extendTheme(null, null);
-    } catch (e) {
-      error = e.message;
-    }
-
-    expect(error).toMatchInlineSnapshot(`
-      "
-      The first argument should be an object and corresponds to the theme you want to extend.
-
-      The following is an example:
-
-
-      import { lightTheme, extendTheme } from '@strapi/design-system/themes';
-
-      const myCustomTheme = extendTheme(lightTheme, {
-          colors: /* put the overrides for the colors key */,
-      shadows: /* put the overrides for the shadows key */,
-      sizes: /* put the overrides for the sizes key */,
-      zIndices: /* put the overrides for the zIndices key */,
-      spaces: /* put the overrides for the spaces key */,
-      borderRadius: /* put the overrides for the borderRadius key */,
-      mediaQueries: /* put the overrides for the mediaQueries key */,
-      fontSizes: /* put the overrides for the fontSizes key */,
-      lineHeights: /* put the overrides for the lineHeights key */,
-      fontWeights: /* put the overrides for the fontWeights key */,
-      })
-      "
-    `);
-  });
-
-  it('throws an error when passing an invalid value for the second argument', () => {
-    let error;
-
-    try {
-      extendTheme(lightTheme, null);
-    } catch (e) {
-      error = e.message;
-    }
-
-    expect(error).toMatchInlineSnapshot(`
-      "
-      The second argument should be an object and corresponds to the keys of the theme you want to override.
-
-      The following is an example:
-
-
-      import { lightTheme, extendTheme } from '@strapi/design-system/themes';
-
-      const myCustomTheme = extendTheme(lightTheme, {
-          colors: /* put the overrides for the colors key */,
-      shadows: /* put the overrides for the shadows key */,
-      sizes: /* put the overrides for the sizes key */,
-      zIndices: /* put the overrides for the zIndices key */,
-      spaces: /* put the overrides for the spaces key */,
-      borderRadius: /* put the overrides for the borderRadius key */,
-      mediaQueries: /* put the overrides for the mediaQueries key */,
-      fontSizes: /* put the overrides for the fontSizes key */,
-      lineHeights: /* put the overrides for the lineHeights key */,
-      fontWeights: /* put the overrides for the fontWeights key */,
-      })
-      "
-    `);
-  });
-
-  it('overrides the given color', () => {
-    const myTheme = extendTheme(lightTheme, {
-      colors: {
-        primary100: 'red',
-      },
-    });
-
-    const expectedColors = { ...lightTheme.colors, primary100: 'red' };
-
-    expect(myTheme).toEqual({
-      ...lightTheme,
-      colors: expectedColors,
-    });
-    expect(lightTheme.colors.primary100).toMatchInlineSnapshot(`"#f0f0ff"`);
-  });
-
-  it('overrides a spacing value color', () => {
-    const myTheme = extendTheme(lightTheme, {
-      spaces: [1, 2, 3],
-    });
-
-    const expectedSpaces = [1, 2, 3];
-    expect(myTheme).toEqual({
-      ...lightTheme,
-      spaces: expectedSpaces,
-    });
-
-    expect(lightTheme.spaces).toMatchInlineSnapshot(`
-      [
-        "0px",
-        "4px",
-        "8px",
-        "12px",
-        "16px",
-        "20px",
-        "24px",
-        "32px",
-        "40px",
-        "48px",
-        "56px",
-        "64px",
-      ]
-    `);
-  });
-});