@clement_lores/admin-design-system 1.0.0

package/build/molecules/modal/modal-inline.js

@@ -0,0 +1,63 @@
+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); }
+import React from 'react';
+import { Box } from "../../atoms/box/index.js";
+import { Button } from "../../atoms/button/index.js";
+import { Icon } from "../../atoms/icon/index.js";
+import { Label } from "../../atoms/label/index.js";
+import { Text } from "../../atoms/text/index.js";
+import { H5 } from "../../atoms/typography/index.js";
+import { ModalStyled } from "./modal-styled.js";
+
+/**
+ * Modal which can be rendered inline instead of a "modal"
+ *
+ * @memberof Modal
+ * @component
+ * @hideconstructor
+ * @private
+ * @section design-system
+ */
+export const ModalInline = props => {
+  const {
+    title,
+    subTitle,
+    variant,
+    onClose,
+    children,
+    buttons,
+    label,
+    icon,
+    ...boxProps
+  } = props;
+  return /*#__PURE__*/React.createElement(ModalStyled, _extends({
+    variant: variant
+  }, boxProps), label && /*#__PURE__*/React.createElement(Label, {
+    size: "lg",
+    variant: variant,
+    className: "modal-label"
+  }, icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  }), label), title && /*#__PURE__*/React.createElement(H5, null, title), onClose && /*#__PURE__*/React.createElement(Button, {
+    className: "close-button",
+    size: "icon",
+    variant: "text",
+    onClick: onClose,
+    rounded: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "X"
+  })), subTitle && /*#__PURE__*/React.createElement(Text, null, subTitle), children, buttons && buttons.length && /*#__PURE__*/React.createElement(Box, {
+    flex: true,
+    flexDirection: "row",
+    justifyContent: "flex-end",
+    mt: "xl"
+  }, buttons.map((buttonProps, key) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  React.createElement(Button, _extends({
+    key: key,
+    mr: "md",
+    mt: "sm"
+  }, buttonProps)))));
+};
+ModalInline.displayName = 'ModalInline';
+export default ModalInline;

package/build/molecules/modal/modal-props.js

@@ -0,0 +1 @@
+export {};

package/build/molecules/modal/modal-styled.js

@@ -0,0 +1,52 @@
+import { getValueAndUnit } from 'polished';
+import { variant as styledVariant } from 'styled-system';
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import themeGet from "../../utils/theme-get.js";
+const DEFAULT_WIDTH = 540;
+const VARIANT_BORDER_WIDTH = 8;
+const variantStyle = (color, props) => {
+  const newPadding = getValueAndUnit(themeGet('space', 'xxl')(props))[0] - VARIANT_BORDER_WIDTH;
+  return {
+    borderLeftWidth: VARIANT_BORDER_WIDTH,
+    borderLeftStyle: 'solid',
+    borderLeftColor: color,
+    paddingLeft: newPadding
+  };
+};
+const variants = props => styledVariant({
+  prop: 'variant',
+  variants: {
+    primary: variantStyle('primary100', props),
+    danger: variantStyle('error', props),
+    success: variantStyle('success', props),
+    info: variantStyle('info', props),
+    secondary: variantStyle('accent', props),
+    light: variantStyle('grey60', props),
+    default: {}
+  }
+});
+export const ModalStyled = styled(Box)`
+  position: relative;
+  & > .close-button {
+    position: absolute;
+    top: ${themeGet('space', 'md')};
+    right: ${themeGet('space', 'md')};
+  }
+  & > .modal-label {
+    margin-bottom: 0;
+    margin-top: -${themeGet('space', 'xxl')};
+    padding-top: ${themeGet('space', 'sm')};
+  }
+  ${props => variants(props)};
+`;
+ModalStyled.defaultProps = {
+  pl: 'xxl',
+  pr: 'xl',
+  pt: 'x3',
+  pb: 'xxl',
+  bg: 'filterBg',
+  color: 'text',
+  width: [1, DEFAULT_WIDTH]
+};
+export default ModalStyled;

package/build/molecules/modal/modal-wrapper.js

@@ -0,0 +1,33 @@
+import React from 'react';
+import { styled } from "../../../build/utils/styled.js";
+import { ModalInline } from "./modal-inline.js";
+import { ModalStyled } from "./modal-styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { Overlay } from "../../atoms/overlay/index.js";
+const Wrapper = styled(Box)`
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+
+  & > ${ModalStyled} {
+    z-index: 1001;
+  }
+`;
+export const ModalWrapper = props => {
+  const {
+    onOverlayClick,
+    ...otherProps
+  } = props;
+  const handleOverlayClick = onOverlayClick || (() => true);
+  return /*#__PURE__*/React.createElement(Wrapper, {
+    flex: true,
+    justifyContent: "center",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Overlay, {
+    onClick: handleOverlayClick
+  }), /*#__PURE__*/React.createElement(ModalInline, otherProps));
+};
+ModalWrapper.displayName = 'ModalWrapper';
+export default ModalWrapper;

package/build/molecules/modal/modal.doc.md

@@ -0,0 +1,138 @@
+<img src="components/modal.png" />
+
+Renders Modal
+
+### Usage:
+
+```javascript
+import { Modal, ModalProps, ModalInline } from '@adminjs/design-system'
+```
+
+Modal can be rendered either inline or as a regular Modal.
+
+#### Inline usage
+
+```jsx
+  <ModalInline {...modalProps} />
+```
+
+#### Modal usage
+
+```jsx
+const [isVisible, setIsVisible] = useState(false)
+modalProps = {
+  /** ... **/
+  onOverlayClick: () => setIsVisible(false),
+  onClose: () => setIsVisible(false),
+}
+
+<Box>
+  <Label>Modal Trigger</Label>
+  <Button
+    onClick={() => setIsVisible(!isVisible)}
+  >
+    Toggle Modal
+  </Button>
+  {isVisible && <Modal {...modalProps} />}
+</Box>
+```
+
+### Passing content
+
+You can also pass the values in 2 ways:
+
+1. by using just the {@link ModalProps} - as shown in the previous examples.
+2. by using the **Children**
+
+### Playground
+
+Let me show you 3 live examples of using the Modal component:
+
+#### Passing children
+
+The most versatile way, but, the one, which requires you to "design" the modal
+
+```reactComponent
+return (
+  <Box variant="grey">
+    <Box py="xxl" width={1}>
+      <ModalInline>
+        <Header.H4>I am header</Header.H4>
+        <Text>
+          I am info text
+        </Text>
+        <Box>
+          <Button>Confirm?</Button>
+        </Box>
+      </ModalInline>
+    </Box>
+  </Box>
+)
+```
+
+#### Passing props
+
+You have everything out of the box
+
+```reactComponent
+
+const variant = 'danger'
+
+const modalProps = {
+  label: 'Someone broke your car',
+  icon: 'Car',
+  title: 'Behold',
+  variant,
+  subTitle: 'Something wrong is happening!!!',
+  buttons: [
+    { label: 'Cancel' },
+    { label: 'Delete', variant },
+  ],
+}
+
+return (
+  <Box variant="grey">
+    <Box py="xxl" width={1}>
+      <ModalInline {...modalProps} />
+    </Box>
+  </Box>
+)
+```
+
+#### Real modal
+
+Handling modal visibility with the `useState` hook.
+
+```reactComponent
+const Wrapper = () => {
+  const [isVisible, setIsVisible] = React.useState(false)
+
+  const variant = 'success'
+
+  const modalProps = {
+    label: 'Your car is 100% fine',
+    icon: 'Car',
+    title: 'It is ok',
+    variant,
+    subTitle: 'Something wrong is NOT happening!!!',
+    buttons: [
+      { label: 'Cancel' },
+      { label: 'Delete', variant },
+    ],
+    onOverlayClick: () => setIsVisible(false),
+    onClose: () => setIsVisible(false),
+  }
+  return (
+    <Box py="100px">
+      <Button
+        onClick={() => setIsVisible(!isVisible)}
+      >
+        Toggle Modal
+      </Button>
+      {isVisible && <Modal {...modalProps} />}
+    </Box>
+   )
+}
+
+return <Wrapper />
+```

package/build/molecules/modal/modal.js

@@ -0,0 +1,17 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PortalUtils from "../../utils/portal-utils.js";
+import ModalWrapper from "./modal-wrapper.js";
+const ModalPortal = PortalUtils.createPortalForKey('MODAL', ModalWrapper);
+
+/**
+ * @load ./modal.doc.md
+ * @component
+ * @subcategory Molecules
+ * @section design-system
+ * @hideconstructor
+ * @new In version 3.3
+ */
+export const Modal = props => /*#__PURE__*/React.createElement(ModalPortal, props);
+Modal.displayName = 'Modal';
+export default Modal;

package/build/molecules/modal/modal.stories.js

@@ -0,0 +1,79 @@
+import React, { useState } from 'react';
+import { Box, Button, Label } from "../../index.js";
+import { Modal, ModalInline } from "./index.js";
+const variants = ['danger', 'primary', 'success', 'info', 'secondary', 'default', 'light'];
+export const Default = {
+  render: props => {
+    const {
+      label,
+      icon,
+      title,
+      variant,
+      subTitle
+    } = props;
+    const [isVisible, setIsVisible] = useState(false);
+    const modalProps = {
+      label,
+      icon,
+      title,
+      variant,
+      subTitle,
+      onOverlayClick: () => setIsVisible(false),
+      onClose: () => setIsVisible(false),
+      buttons: [{
+        label: 'Cancel'
+      }, {
+        label: 'Delete',
+        variant
+      }]
+    };
+    return /*#__PURE__*/React.createElement(Box, {
+      variant: "grey"
+    }, /*#__PURE__*/React.createElement(Label, null, "Inline modal: ModalInline"), /*#__PURE__*/React.createElement(Box, {
+      py: "xxl",
+      width: 1
+    }, /*#__PURE__*/React.createElement(ModalInline, modalProps)), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Label, null, "Modal Trigger"), /*#__PURE__*/React.createElement(Button, {
+      onClick: () => setIsVisible(!isVisible)
+    }, "Toggle Modal"), isVisible && /*#__PURE__*/React.createElement(Modal, modalProps)));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Molecules/Modal',
+  component: Modal,
+  args: {
+    variant: variants[0],
+    title: 'Are you sure you want to delete this car?',
+    subTitle: 'This item will be deleted immediately. You can’t undo this action.',
+    icon: 'AlertTriangle',
+    label: 'Warning'
+  },
+  argTypes: {
+    variant: {
+      options: variants,
+      control: {
+        type: 'select'
+      }
+    },
+    title: {
+      control: {
+        type: 'text'
+      }
+    },
+    subTitle: {
+      control: {
+        type: 'text'
+      }
+    },
+    icon: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export default meta;

package/build/molecules/navigation-element/index.js

@@ -0,0 +1,3 @@
+export * from "./navigation-element.js";
+export * from "./navigation-element-styled.js";
+export * from "./navigation-element-props.js";

package/build/molecules/navigation-element/navigation-element-props.js

@@ -0,0 +1 @@
+export {};

package/build/molecules/navigation-element/navigation-element-styled.js

@@ -0,0 +1,66 @@
+import { rgba } from 'polished';
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { Title } from "../../atoms/typography/index.js";
+import { themeGet } from "../../utils/index.js";
+export const StyledNavigationElement = styled(Box)`
+  padding: ${themeGet('space', 'md', '-1px')} ${themeGet('space', 'lg')};
+  text-decoration: none;
+  color: ${({
+  theme
+}) => theme.colors.text};
+  background-color: transparent;
+  cursor: pointer;
+  border-radius: 4px;
+  transition: all 0.1s ease-in;
+  user-select: none;
+
+  & > * {
+    align-self: center;
+  }
+
+  & > .icon-box, & > .arrow-box {
+    flex-shrink: 0;
+    color: ${({
+  theme
+}) => theme.colors.grey60};
+  }
+
+  & > .icon-box {
+    padding-right: ${themeGet('space', 'lg')};
+  }
+
+  & > ${Title} {
+    flex-grow: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    ${({
+  isSelected
+}) => isSelected && {
+  fontWeight: 500
+}}
+  }
+ 
+  ${({
+  theme,
+  isSelected
+}) => isSelected && {
+  backgroundColor: rgba(theme.colors.primary100, 0.2),
+  color: theme.colors.primary100,
+  '& > .icon-box': {
+    color: 'inherit'
+  }
+}}
+
+  ${({
+  theme,
+  isSelected
+}) => !isSelected && {
+  '&:hover': {
+    backgroundColor: rgba(theme.colors.text, 0.2)
+  }
+}};
+
+  
+`;

package/build/molecules/navigation-element/navigation-element.doc.md

@@ -0,0 +1,69 @@
+<img src="components/navigation-element.png" />
+
+This component is responsible for rendering elements on the sidebar navigation.
+
+### Usage
+
+```javascript
+import { NavigationElement } from '@adminjs/design-system'
+
+return (
+  <NavigationElement
+    href="#"
+    open={true}
+    isSelected={false}
+    icon="Activity"
+    label="Activities"
+    onClick={(event, props) => {console.log(event, props)}}
+  />
+)
+```
+
+### Prop types
+
+By default all the data are passed via {@link NavigationElementProps} - check them out below.
+
+
+### Example
+
+This is a working example of a NavigationElement:
+
+```reactComponent
+    const MyComponent = () => {
+    const [isSelected, setIsSelected] = React.useState(false)
+    const [isOpen, setIsOpen] = React.useState(false)
+    const icon = 'Activity'
+    const label = 'Activities'
+    
+    const onClickHandler = (event) => {
+     event.preventDefault()
+     console.log(isOpen)
+     setIsOpen(!isOpen)
+    }
+
+    return (
+      <Box>
+        <NavigationElement
+          href="#"
+          isOpen={isOpen}
+          isSelected={isSelected}
+          icon="Activity"
+          label="Activities"
+          onClick={onClickHandler}
+        />
+        {isOpen ? (
+          <Text p="md">some data below. You can also nest NavigationElements</Text>
+        ) : ''}
+        <NavigationElement
+          href="#"
+          icon="ShoppingCart"
+          label="Orders"
+          onClick={(event) => event.preventDefault()}
+        />
+      </Box>
+    )
+  }
+return (
+  <MyComponent />
+)
+```

package/build/molecules/navigation-element/navigation-element.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Box } from "../../atoms/box/index.js";
+import { Icon } from "../../atoms/icon/index.js";
+import { Title } from "../../atoms/typography/index.js";
+import { StyledNavigationElement } from "./navigation-element-styled.js";
+
+// The longest part of the label which makes it no-wrap: ellipsis
+// example: `MongooseWithLongNameAnd with space` should be truncated because 15 lines doesn't fit
+// the width of the navbar. But "Postgres with long name and spaces" shouldn't be truncated because
+// its "parts" doesn't exceed 15 chars each.
+const PART_LENGTH_TO_ELLIPSIS = 15;
+
+/**
+ * @load ./navigation-element.doc.md
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see NavigationElementProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-navigation-element--default Storybook}
+ * @section design-system
+ * @new In version 3.3
+ */
+export const NavigationElement = props => {
+  const {
+    isOpen,
+    icon,
+    onClick,
+    label,
+    isSelected,
+    href
+  } = props;
+  const expandable = typeof isOpen !== 'undefined';
+  const chevron = isOpen ? 'ChevronUp' : 'ChevronDown';
+  const hasLongName = label.split(' ').reduce((memo, part) => memo.length > part.length ? memo : part, '').length > PART_LENGTH_TO_ELLIPSIS;
+  const handleNavigationClick = event => onClick ? onClick(event, props) : undefined;
+  return /*#__PURE__*/React.createElement(StyledNavigationElement, {
+    flex: true,
+    flexDirection: "row",
+    as: "a",
+    isSelected: isSelected,
+    isOpen: isOpen,
+    href: href,
+    onClick: handleNavigationClick
+  }, icon && /*#__PURE__*/React.createElement(Box, {
+    className: "icon-box",
+    as: "span"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: icon
+  })), /*#__PURE__*/React.createElement(Title, {
+    style: {
+      whiteSpace: hasLongName ? 'nowrap' : 'normal'
+    }
+  }, label), expandable && /*#__PURE__*/React.createElement(Box, {
+    className: "arrow-box",
+    as: "span"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: chevron
+  })));
+};
+NavigationElement.displayName = 'NavigationElement';
+export default NavigationElement;

package/build/molecules/navigation-element/navigation-element.stories.js

@@ -0,0 +1,53 @@
+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); }
+import React, { useState } from 'react';
+import { Box } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { NavigationElement } from "./index.js";
+export const Default = {
+  render: props => {
+    const [isOpen, setOpen] = useState(false);
+    const handleClick = event => {
+      event.stopPropagation();
+      event.preventDefault();
+      setOpen(!isOpen);
+    };
+    return /*#__PURE__*/React.createElement(StoryWrapper, {
+      label: "Navigation Element"
+    }, /*#__PURE__*/React.createElement(Box, {
+      px: "xl",
+      py: "xxl",
+      width: "300px",
+      border: "bg"
+    }, /*#__PURE__*/React.createElement(NavigationElement, _extends({}, props, {
+      href: "#",
+      isOpen: isOpen,
+      onClick: handleClick
+    }))));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Molecules/NavigationElement',
+  args: {
+    label: 'Dashboard',
+    icon: 'Activity',
+    isSelected: false
+  },
+  argTypes: {
+    isSelected: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    icon: {
+      control: {
+        type: 'text'
+      }
+    },
+    label: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export default meta;

package/build/molecules/pagination/index.js

@@ -0,0 +1 @@
+export * from "./pagination.js";