@clement_lores/admin-design-system 1.0.0

package/build/molecules/drawer/drawer.js

@@ -0,0 +1,120 @@
+/* eslint-disable no-shadow */
+import { space, variant, layout, color } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass } from "../../utils/css-class.js";
+import { DEFAULT_DRAWER_WIDTH } from "../../constants.js";
+
+/**
+ * Props for Drawer component. Apart from those described below it also extends all
+ * {@link SpaceProps}.
+ *
+ * @alias DrawerProps
+ * @extends SpaceProps
+ * @extends LayoutProps
+ * @extends ColorProps
+ * @memberof Drawer
+ */
+
+const variants = variant({
+  variants: {
+    filter: {
+      bg: 'filterBg',
+      width: '400px',
+      className: cssClass(['Drawer', 'Drawer_Filter'])
+    }
+  }
+});
+
+/**
+ * @classdesc
+ *
+ * <img src="components/drawer.png" />
+ *
+ * Drawer component renders a huge side area where {@link BaseActionComponent} renders
+ * all actions where {@link Action.showInDrawer} is set to true.
+ *
+ * You probably don't want to use it directly in your actions, but if you decide to set
+ * `showInDrawer` to true you will probably want to use `DrawerContent` or `DrawerFooter`
+ * components.
+ *
+ * All these components: Drawer, DrawerContent and Drawer Footer extends {@link SpaceProps}.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { Drawer, DrawerProps, DrawerContent, DrawerFooter } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see DrawerProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-drawer--default Storybook}
+ * @example
+ * return (
+ * <Box height="500px">
+ *   <Drawer>
+ *     <DrawerContent>
+ *       <Header.H3>
+ *         <Button size="icon" rounded mr="lg">
+ *           <Icon icon="ChevronRight" />
+ *         </Button>
+ *         Edit
+ *       </Header.H3>
+ *       <Box my="x3" p={0}>
+ *         <Button size="sm">
+ *           <Icon icon="Info" />
+ *           Info
+ *         </Button>
+ *         <Button size="sm" ml="lg">
+ *           <Icon icon="Trash" />
+ *           Delete
+ *         </Button>
+ *       </Box>
+ *
+ *     </DrawerContent>
+ *     <DrawerFooter>
+ *       <Button variant="contained">
+ *         Save
+ *       </Button>
+ *     </DrawerFooter>
+ *   </Drawer>
+ * </Box>
+ * )
+ *
+ * @section design-system
+ */
+const Drawer = styled.section`
+  position: fixed;
+  top: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  max-width: 100%;
+  z-index: 100;
+
+  transform: translateX(${({
+  isHidden
+}) => isHidden ? '100%' : '0%'});
+  transition: transform 0.25s ease-in-out;
+
+  box-shadow: -1px 0px 0px #EEEEEF, -4px 0px 16px rgba(107, 119, 129, 0.1);
+  background-color: ${({
+  theme
+}) => theme.colors.container};
+  overflow-y: auto;
+  overflow-x: hidden;
+  
+  ${space};
+  ${color};
+  ${layout};
+  ${variants};
+`;
+Drawer.defaultProps = {
+  width: DEFAULT_DRAWER_WIDTH,
+  className: cssClass('Drawer')
+};
+Drawer.displayName = 'Drawer';
+export { Drawer };
+export default Drawer;

package/build/molecules/drawer/drawer.stories.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Box, Button, Header, Icon, Text } from "../../index.js";
+import { FullFeaturedFormGroup } from "../form-group/form-group.stories.js";
+import { Drawer, DrawerContent, DrawerFooter } from "./index.js";
+export const Default = {
+  render: props => /*#__PURE__*/React.createElement(Drawer, props, /*#__PURE__*/React.createElement(DrawerContent, null, /*#__PURE__*/React.createElement(Header.H3, null, /*#__PURE__*/React.createElement(Button, {
+    size: "icon",
+    rounded: true,
+    mr: "lg"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "ChevronRight"
+  })), "Edit"), /*#__PURE__*/React.createElement(Box, {
+    my: "x3",
+    p: 0
+  }, /*#__PURE__*/React.createElement(Button, null, /*#__PURE__*/React.createElement(Icon, {
+    icon: "Info"
+  }), "Info"), /*#__PURE__*/React.createElement(Button, {
+    ml: "lg"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "Trash2"
+  }), "Delete")), /*#__PURE__*/React.createElement(Header.H4, null, "Primary Fields"), /*#__PURE__*/React.createElement(Text, null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nibh augue, suscipit a, scelerisque sed, lacinia in, mi. Cras vel lorem. Etiam pellentesque aliquet tellus. Phasellus pharetra nulla ac diam. Quisque semper justo at risus. Donec venenatis, turpis vel hendrerit interdum, dui ligula ultricies purus, sed"), /*#__PURE__*/React.createElement(FullFeaturedFormGroup, null)), /*#__PURE__*/React.createElement(DrawerFooter, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "contained"
+  }, "Save")))
+};
+const meta = {
+  title: 'DesignSystem/Molecules/Drawer',
+  component: Drawer,
+  args: {
+    isHidden: false
+  },
+  argTypes: {
+    isHidden: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+export default meta;

package/build/molecules/drawer/index.js

@@ -0,0 +1,3 @@
+export * from "./drawer.js";
+export * from "./drawer-content.js";
+export * from "./drawer-footer.js";

package/build/molecules/drop-down/drop-down-item-action.js

@@ -0,0 +1,19 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { cssClass } from "../../utils/index.js";
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+export const DropDownItemAction = styled(Box).attrs(props => ({
+  className: cssClass('DropDownItemAction', props.className)
+}))`
+  ${({
+  onClick
+}) => onClick ? 'cursor: pointer;' : ''};
+`;
+DropDownItemAction.defaultProps = {
+  width: 1,
+  px: 'xxl',
+  py: 'lg'
+};
+DropDownItemAction.displayName = 'DropDownItemAction';
+export default DropDownItemAction;

package/build/molecules/drop-down/drop-down-item.js

@@ -0,0 +1,95 @@
+import { rgba } from 'polished';
+import { styled } from "../../../build/utils/styled.js";
+import { space, variant } from 'styled-system';
+import { Box } from "../../atoms/box/index.js";
+import { cssClass } from "../../utils/index.js";
+import DropDownMenu from "./drop-down-menu.js";
+const variantsShared = (theme, color) => ({
+  color,
+  [`& .${cssClass('DropDownItemAction')}`]: {
+    color
+  },
+  '&:hover': {
+    bg: rgba(theme.colors[color], 0.03)
+  }
+});
+const colorVariants = variant({
+  prop: 'colorVariant',
+  variants: {
+    primary: theme => variantsShared(theme, 'primary100'),
+    danger: theme => variantsShared(theme, 'error'),
+    success: theme => variantsShared(theme, 'success'),
+    info: theme => variantsShared(theme, 'info'),
+    secondary: theme => variantsShared(theme, 'accent'),
+    light: theme => variantsShared(theme, 'grey80'),
+    default: theme => variantsShared(theme, 'text')
+  }
+});
+
+/**
+ * Props passed to DropDownItem
+ * Extends {@link BoxProps}
+ *
+ * @memberof DropDown
+ * @extends BoxProps
+ */
+
+/**
+ * @component
+ * @private
+ */
+export const DropDownItem = styled(Box)`
+  color: ${({
+  theme
+}) => theme.colors.text};
+  font-family: ${({
+  theme
+}) => theme.font};
+  ${({
+  onClick
+}) => onClick ? 'cursor: pointer;' : ''};
+  text-decoration: none;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  white-space: nowrap;
+  text-align: left;
+
+  &:hover {
+    background: ${({
+  theme
+}) => rgba(theme.colors.text, 0.03)};
+  }
+
+  & .${cssClass('Icon')} {
+    padding-right: ${({
+  theme
+}) => theme.space.default};
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+
+  & > ${DropDownMenu} {
+    position: absolute;
+    top: 0;
+    display: none;
+  }
+
+  &:hover > ${DropDownMenu} {
+    display: flex;
+  }
+
+  & a {
+    color: inherit;
+    text-decoration: none;
+  }
+
+  padding: ${({
+  theme
+}) => `${theme.space.lg} ${theme.space.xxl}`};
+
+  ${space};
+  ${colorVariants};
+`;
+DropDownItem.displayName = 'DropDownItem';
+export default DropDownItem;

package/build/molecules/drop-down/drop-down-menu.js

@@ -0,0 +1,45 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { DEFAULT_STICK } from "./drop-down.js";
+import { cssClass } from "../../utils/index.js";
+
+/**
+ * Props passed to DropDownMenu element.
+ * Extends {@link BoxProps}
+ *
+ * @memberof DropDown
+ */
+
+/**
+ * @component
+ * @private
+ */
+export const DropDownMenu = styled(Box).attrs(props => ({
+  className: cssClass([`DropDown-Stick-${props.stick || DEFAULT_STICK}`, 'DropDownMenu'], props.className)
+}))`
+  background: ${({
+  theme
+}) => theme.colors.container};
+  display: inline-block;
+  position: absolute;
+  z-index: 40;
+  flex-direction: column;
+  box-shadow: ${({
+  theme
+}) => theme.shadows.card};
+  border-radius: ${({
+  theme
+}) => theme.space.sm};
+  ${({
+  isVisible
+}) => isVisible !== false ? '' : 'display: none;'};
+
+  &.${cssClass('DropDown-Stick-left')} .${cssClass('DropDownMenu')} {
+    left: 100%;
+  }
+  &.${cssClass('DropDown-Stick-right')} .${cssClass('DropDownMenu')} {
+    right: 100%;
+  }
+`;
+DropDownMenu.displayName = 'DropDownMenu';
+export default DropDownMenu;

package/build/molecules/drop-down/drop-down-trigger.js

@@ -0,0 +1,11 @@
+import { styled } from "../../../build/utils/styled.js";
+
+/**
+ * @component
+ * @private
+ */
+export const DropDownTrigger = styled.span`
+  display: inline-block;
+`;
+DropDownTrigger.displayName = 'DropDownTrigger';
+export default DropDownTrigger;

package/build/molecules/drop-down/drop-down.doc.md

@@ -0,0 +1,74 @@
+<img src="components/drop-down.png" />
+
+A Simple set of components allowing you to create dropdowns.
+
+### Usage
+
+```javascript
+import {
+  DropDown,
+  DropDownTrigger,
+  DropDownMenu,
+  DropDownItem
+} from '@adminjs/design-system'
+
+return (
+  <DropDown>
+    <DropDownTrigger>
+      <Button>
+        <Icon icon="MoreHorizontal" />
+        This is trigger
+      </Button>
+    </DropDownTrigger>
+    <DropDownMenu>
+      <DropDownItem>
+        <Link href="/some">
+          <Icon icon="Video" />
+          Some menu item
+        </Link>
+      </DropDownItem>
+    </DropDownMenu>
+  </DropDown>
+)
+```
+
+It contains a couple of sub-components:
+
+- `DropDown` - an actual wrapper for an entire DropDown
+- `DropDownTrigger` - it has to be right inside the DropDown.
+  It is what the user sees when the DropDown is not hovered
+- `DropDownMenu` - wraps elements which are hidden by default.
+  Shown after hovering Trigger
+- `DropDownItem` - it is a wrapper for a menu item list.
+  It can next contain either a `Link` or `Button`.
+
+Props:
+- DropDownMenu extends {@link PositionProps}, so you can add prop like `top="xl"`
+- DropDownItem extends {@link SpaceProps}
+- DropDownTrigger also extends {@link SpaceProps}
+
+
+### Example
+
+```reactComponent
+return (
+  <Box p="xxl" pb="x5">
+    <DropDown>
+      <DropDownTrigger>
+        <Button>
+          <Icon icon="MoreHorizontal" />
+          Hover me to see dropdown
+        </Button>
+      </DropDownTrigger>
+      <DropDownMenu>
+        <DropDownItem>
+          Menu item 1
+        </DropDownItem>
+        <DropDownItem>
+          Menu item 2
+        </DropDownItem>
+      </DropDownMenu>
+    </DropDown>
+  </Box>
+)
+```

package/build/molecules/drop-down/drop-down.js

@@ -0,0 +1,85 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+/* eslint-disable default-case */
+import React, { useLayoutEffect, useRef, useState } from 'react';
+import { styled } from "../../../build/utils/styled.js";
+const StyledDropDown = styled.div`
+  position: relative;
+  display: inline-block;
+`;
+export const DEFAULT_STICK = 'left';
+
+/**
+ * Available values for {@link DropDown}.stick prop
+ * @memberof DropDown
+ */
+
+/**
+ * Props passed to DropDown element.
+ * @property {string} [...] Other props from {@link BoxProps}
+ * @memberof DropDown
+ * @extends BoxProps
+ */
+
+/**
+ * @load ./drop-down.doc.md
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-dropdown--default Storybook}
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ */
+const DropDown = props => {
+  const {
+    children,
+    stick = DEFAULT_STICK,
+    ...boxProps
+  } = props;
+  const [isVisible, setIsVisible] = useState(false);
+  const [initialHeight, setInitialHeight] = useState(null);
+  const ref = useRef(null);
+  const [menuPosition, setMenuPosition] = useState();
+  useLayoutEffect(() => {
+    if (ref.current && !initialHeight) {
+      const {
+        offsetHeight
+      } = ref.current;
+      setInitialHeight(offsetHeight);
+      switch (stick) {
+        case 'left':
+          setMenuPosition({
+            left: 0,
+            top: offsetHeight
+          });
+          break;
+        case 'right':
+          setMenuPosition({
+            right: 0,
+            top: offsetHeight
+          });
+      }
+    }
+  }, [ref.current]);
+  const elements = React.Children.map(children, child => {
+    const type = child && child.type && child.type.displayName;
+    if (type === 'DropDownTrigger') {
+      // getting rid of DropDownTrigger and render just what was inside
+      return /*#__PURE__*/React.cloneElement(child.props.children);
+    }
+    if (type === 'DropDownMenu') {
+      return /*#__PURE__*/React.cloneElement(child, {
+        isVisible,
+        stick,
+        ...menuPosition
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/React.createElement(StyledDropDown, _extends({}, boxProps, {
+    onMouseEnter: () => setIsVisible(true),
+    onMouseLeave: () => setIsVisible(false),
+    ref: ref
+  }), elements);
+};
+DropDown.displayName = 'DropDown';
+export { DropDown };
+export default DropDown;

package/build/molecules/drop-down/drop-down.stories.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Badge, Box, Button, Icon, Text } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { DropDown, DropDownItem, DropDownMenu, DropDownTrigger } from "./index.js";
+export const Default = {
+  render: ({
+    onClick,
+    ...props
+  }) => {
+    const handleClick = event => {
+      event.preventDefault();
+      onClick(event);
+    };
+    return /*#__PURE__*/React.createElement(StoryWrapper, {
+      label: "Button trigger with nested DropDownItems"
+    }, /*#__PURE__*/React.createElement(Box, {
+      height: "200px"
+    }, /*#__PURE__*/React.createElement(DropDown, props, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(Button, null, "Get your cursor here!")), /*#__PURE__*/React.createElement(DropDownMenu, null, /*#__PURE__*/React.createElement(DropDownItem, {
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "Video"
+    }), "Some menu item"), /*#__PURE__*/React.createElement(DropDownItem, {
+      onClick: handleClick
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "Headphones"
+    }), "Other item", /*#__PURE__*/React.createElement(DropDownMenu, null, /*#__PURE__*/React.createElement(DropDownItem, {
+      onClick: handleClick,
+      color: "danger"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      icon: "Edit"
+    }), "Some danger item")))))));
+  }
+};
+export const Custom = {
+  render: ({
+    onClick
+  }) => {
+    const handleClick = event => {
+      event.preventDefault();
+      onClick(event);
+    };
+    return /*#__PURE__*/React.createElement(StoryWrapper, {
+      label: "Badge trigger with TextContent"
+    }, /*#__PURE__*/React.createElement(DropDown, null, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(Badge, null, "Get your cursor here!")), /*#__PURE__*/React.createElement(DropDownMenu, null, /*#__PURE__*/React.createElement(Box, {
+      p: "xxl",
+      width: 300
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h3", null, "I am inside dropdown Menu"), /*#__PURE__*/React.createElement(Button, {
+      onClick: handleClick
+    }, "Click me if you dare"))))));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Molecules/DropDown',
+  args: {
+    stick: 'left'
+  },
+  argTypes: {
+    stick: {
+      options: ['left', 'right'],
+      control: {
+        type: 'select'
+      }
+    }
+  }
+};
+export default meta;

package/build/molecules/drop-down/index.js

@@ -0,0 +1,5 @@
+export * from "./drop-down.js";
+export * from "./drop-down-item.js";
+export * from "./drop-down-item-action.js";
+export * from "./drop-down-menu.js";
+export * from "./drop-down-trigger.js";

package/build/molecules/drop-zone/drop-zone-image.js

@@ -0,0 +1,46 @@
+import React from 'react';
+const DropZoneImage = () => /*#__PURE__*/React.createElement("svg", {
+  width: "80",
+  height: "72",
+  viewBox: "0 0 80 72",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg"
+}, /*#__PURE__*/React.createElement("rect", {
+  x: "5.85",
+  y: "9.35",
+  width: "68.3",
+  height: "55.3",
+  rx: "1.65",
+  fill: "white",
+  stroke: "#3B3552",
+  strokeWidth: "0.7"
+}), /*#__PURE__*/React.createElement("rect", {
+  x: "8.5",
+  y: "12",
+  width: "63",
+  height: "38",
+  rx: "1",
+  fill: "currentColor",
+  fillOpacity: "0.05"
+}), /*#__PURE__*/React.createElement("circle", {
+  cx: "23.5",
+  cy: "27",
+  r: "8",
+  fill: "currentColor"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M30 16L49.5 50H10.5L30 16Z",
+  fill: "#3B3552"
+}), /*#__PURE__*/React.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M53 25L69.5 50H36.5L53 25Z",
+  fill: "#3B3552"
+}), /*#__PURE__*/React.createElement("path", {
+  d: "M2.5 52V10C2.5 7.79086 4.29086 6 6.5 6H61.5",
+  stroke: "#3B3552",
+  strokeWidth: "0.7",
+  strokeLinecap: "round"
+}));
+export default DropZoneImage;