@strapi/design-system 1.2.7 → 1.3.0-beta.0

package/src/helpers/getFocusableNodes.js

@@ -0,0 +1,35 @@
+/**
+ * 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

@@ -0,0 +1,34 @@
+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

@@ -0,0 +1,17 @@
+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

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

package/src/helpers/setTabIndexOnFirstItem.js

@@ -0,0 +1,7 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/helpers/useResizeObserver.js

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,227 @@
+<!--- 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

@@ -0,0 +1,119 @@
+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",
+      ]
+    `);
+  });
+});