@clement_lores/admin-design-system 1.0.0

package/build/organisms/button-group/single-button-in-group.js

@@ -0,0 +1,39 @@
+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, useMemo } from 'react';
+import { Box } from "../../atoms/box/index.js";
+import { Icon } from "../../atoms/icon/index.js";
+import { StyledSingleButton } from "./button-group.styled.js";
+export const SingleButtonInGroup = props => {
+  const {
+    icon,
+    label,
+    buttons,
+    source,
+    onClick,
+    ...buttonProps
+  } = props;
+  const [loading, setLoading] = useState(false);
+  const onClickHandler = onClick ? async event => {
+    setLoading(true);
+    await onClick(event, source);
+    setLoading(false);
+  } : undefined;
+  const iconName = useMemo(() => loading ? 'Loader' : icon, [loading]);
+  return /*#__PURE__*/React.createElement(StyledSingleButton, _extends({
+    as: "a",
+    hasLabel: !!label,
+    onClick: onClickHandler
+  }, buttonProps), !loading && !icon ? '' : /*#__PURE__*/React.createElement(Icon, {
+    key: iconName?.toString(),
+    icon: iconName,
+    spin: loading
+  }), label, buttons && buttons.length && label ? /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    mr: "-8px",
+    ml: "md"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "ChevronDown"
+  })) : '');
+};
+SingleButtonInGroup.displayName = 'SingleButtonInGroup';
+export default SingleButtonInGroup;

package/build/organisms/current-user-nav/current-user-nav-props.js

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

package/build/organisms/current-user-nav/current-user-nav-styled.js

@@ -0,0 +1,27 @@
+import { styled } from "../../../build/utils/styled.js";
+import { cssClass, themeGet } from "../../utils/index.js";
+import { Box } from "../../atoms/box/index.js";
+export const StyledCurrentUserNav = styled(Box)`
+  text-align: right;
+
+  & .line-action {
+    .${cssClass('Icon')} svg {
+      stroke: ${themeGet('colors', 'grey80')};
+    }
+    &:hover .${cssClass('Icon')} svg {
+      stroke: ${themeGet('colors', 'primary100')};
+    }
+  }
+
+  & img {
+    width: 36px;
+    height: 36px;
+    border-radius: 40px;
+    margin: -1px ${themeGet('space', 'md')} 0;
+  }
+`;
+StyledCurrentUserNav.defaultProps = {
+  flex: true,
+  flexDirection: 'row'
+};
+export default StyledCurrentUserNav;

package/build/organisms/current-user-nav/current-user-nav.doc.md

@@ -0,0 +1,72 @@
+<img src="components/current-user-nav.png" />
+
+Component rendering current user top-right menu.
+
+### Usage
+
+```javascript
+import { CurrentUserNav } from '@adminjs/design-system'
+
+return (
+  <CurrentUserNav
+    name={name}
+    title={title}
+    avatarUrl={avatar}
+    dropActions={dropActions}
+    lineActions={lineActions}
+  />
+)
+```
+
+### Prop types
+
+By default all the data are passed via {@link CurrentUserNavProps} - check them out below.
+
+
+### Example
+
+#### Full-featured example with all the props
+
+```reactComponent
+  const name = 'Wojtek'
+  const title = 'Master admin'
+  const avatar = 'https://api.adorable.io/avatars/285/abott@adorable.png'
+
+  const handleClick = (event) => {
+    event.preventDefault()
+  }
+
+  const dropActions = [{
+    label: 'My Profile',
+    onClick: handleClick,
+    icon: 'User',
+  }, {
+    label: 'log out',
+    onClick: handleClick,
+    icon: 'Logout',
+  }]
+
+  const lineActions = [{
+    label: 'Notification',
+    onClick: handleClick,
+    icon: 'NotificationNew',
+  }, {
+    label: 'Settings',
+    onClick: handleClick,
+    icon: 'Settings',
+  }]
+
+  return (
+    <Box pt="xxl" pb="x4">
+      <Box border="default" flex flexDirection="row-reverse" height="navbarHeight">
+        <CurrentUserNav
+          name={name}
+          title={title}
+          avatarUrl={avatar}
+          dropActions={dropActions}
+          lineActions={lineActions}
+        />
+      </Box>
+    </Box>
+  )
+```

package/build/organisms/current-user-nav/current-user-nav.js

@@ -0,0 +1,68 @@
+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 { SmallText, Title } from "../../atoms/typography/index.js";
+import { DropDown, DropDownItem, DropDownMenu, DropDownTrigger } from "../../molecules/drop-down/index.js";
+import StyledCurrentUserNav from "./current-user-nav-styled.js";
+import { Avatar } from "../../atoms/avatar/index.js";
+
+/**
+ * @load ./current-user-nav.doc.md
+ * @component
+ * @subcategory Organisms
+ * @hideconstructor
+ * @see CurrentUserNavProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-organisms-current-user-nav--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export const CurrentUserNav = props => {
+  const {
+    name = '',
+    title = '',
+    avatarUrl,
+    dropActions,
+    lineActions
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledCurrentUserNav, null, lineActions && lineActions.length && /*#__PURE__*/React.createElement(Box, {
+    flex: true,
+    flexDirection: "row",
+    alignItems: "center"
+  }, lineActions.map(action => /*#__PURE__*/React.createElement(Button, {
+    size: "icon",
+    variant: "text",
+    title: action.label,
+    key: action.label,
+    href: action.href,
+    as: "a",
+    className: "line-action",
+    onClick: action.onClick
+  }, action.icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: action.icon
+  })))), /*#__PURE__*/React.createElement(DropDown, {
+    stick: "right",
+    display: "flex"
+  }, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(Box, {
+    flex: true,
+    flexDirection: "row",
+    px: "xl",
+    alignItems: "center",
+    height: "navbarHeight"
+  }, /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Title, null, name), title && /*#__PURE__*/React.createElement(SmallText, null, title)), /*#__PURE__*/React.createElement(Avatar, {
+    src: avatarUrl,
+    alt: name,
+    marginLeft: "lg"
+  }, name.slice(0, 1).toUpperCase()))), dropActions && dropActions.length && /*#__PURE__*/React.createElement(DropDownMenu, {
+    minWidth: "100%"
+  }, dropActions.map(action => /*#__PURE__*/React.createElement(DropDownItem, {
+    key: action.label,
+    as: "a",
+    onClick: action.onClick,
+    href: action.href
+  }, action.icon && /*#__PURE__*/React.createElement(Icon, {
+    icon: action.icon
+  }), action.label)))));
+};
+CurrentUserNav.displayName = 'CurrentUserNav';
+export default CurrentUserNav;

package/build/organisms/current-user-nav/current-user-nav.stories.js

@@ -0,0 +1,74 @@
+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 "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { CurrentUserNav } from "./index.js";
+export const Default = {
+  render: ({
+    onClick,
+    ...props
+  }) => {
+    const handleClick = event => {
+      event.preventDefault();
+      onClick(event);
+    };
+    const dropActions = [{
+      label: 'My Profile',
+      onClick: handleClick,
+      icon: 'User'
+    }, {
+      label: 'Log out',
+      onClick: handleClick,
+      icon: 'LogOut'
+    }];
+    const lineActions = [{
+      label: 'Notification',
+      onClick: handleClick,
+      icon: 'Bell'
+    }, {
+      label: 'Settings',
+      onClick: handleClick,
+      icon: 'Settings'
+    }];
+    return /*#__PURE__*/React.createElement(StoryWrapper, {
+      label: "Current user navigation"
+    }, /*#__PURE__*/React.createElement(Box, {
+      height: "250px"
+    }, /*#__PURE__*/React.createElement(Box, {
+      border: "default",
+      flex: true,
+      flexDirection: "row-reverse",
+      height: "navbarHeight"
+    }, /*#__PURE__*/React.createElement(CurrentUserNav, _extends({}, props, {
+      dropActions: dropActions,
+      lineActions: lineActions
+    })))));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Organisms/CurrentUserNav',
+  component: CurrentUserNav,
+  args: {
+    name: 'John Doe',
+    title: 'Admin',
+    avatarUrl: 'https://images.unsplash.com/photo-1612144431180-2d672779556c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80'
+  },
+  argTypes: {
+    name: {
+      control: {
+        type: 'text'
+      }
+    },
+    title: {
+      control: {
+        type: 'text'
+      }
+    },
+    avatarUrl: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export default meta;

package/build/organisms/current-user-nav/index.js

@@ -0,0 +1,3 @@
+export * from "./current-user-nav.js";
+export * from "./current-user-nav-props.js";
+export * from "./current-user-nav-styled.js";

package/build/organisms/index.js

@@ -0,0 +1,4 @@
+export * from "./button-group/index.js";
+export * from "./current-user-nav/index.js";
+export * from "./made-with-love/index.js";
+export * from "./navigation/index.js";

package/build/organisms/made-with-love/index.js

@@ -0,0 +1 @@
+export * from "./made-with-love.js";

package/build/organisms/made-with-love/made-with-love.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { Icon } from "../../atoms/icon/index.js";
+import { Link } from "../../atoms/link/index.js";
+import { Text } from "../../atoms/text/index.js";
+import { themeGet } from "../../utils/index.js";
+const StyledWrapper = styled(Box)`
+  user-select: none;
+  & > * {
+    padding: 0 ${themeGet('space', 'xs')};
+  }
+`;
+StyledWrapper.defaultProps = {
+  color: 'grey60',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center'
+};
+const StyledLink = styled(Link)`
+  font-size: ${themeGet('fontSizes', 'sm')};
+  font-weight: 300;
+  &:hover {
+    color: ${themeGet('colors', 'love')};
+    text-decoration: none;
+  }
+`;
+export const MadeWithLove = () => /*#__PURE__*/React.createElement(StyledWrapper, null, /*#__PURE__*/React.createElement(Text, {
+  as: "span",
+  variant: "sm"
+}, "Made with"), /*#__PURE__*/React.createElement(Icon, {
+  icon: "Heart",
+  color: "love"
+}), /*#__PURE__*/React.createElement(Text, {
+  as: "span",
+  variant: "sm"
+}, "by"), /*#__PURE__*/React.createElement(StyledLink, {
+  href: "https://adminjs.co/",
+  target: "_blank",
+  rel: "noopener noreferrer"
+}, "AdminJS Team"));
+MadeWithLove.displayName = 'MadeWithLove';
+export default MadeWithLove;

package/build/organisms/made-with-love/made-with-love.stories.js

@@ -0,0 +1,7 @@
+import MadeWithLove from "./made-with-love.js";
+export const Default = {};
+const meta = {
+  title: 'DesignSystem/Organisms/MadeWithLove',
+  component: MadeWithLove
+};
+export default meta;

package/build/organisms/navigation/index.js

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

package/build/organisms/navigation/navigation-element-wrapper.js

@@ -0,0 +1,14 @@
+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 { NavigationElement } from "../../molecules/navigation-element/index.js";
+export const NavigationElementWrapper = props => {
+  const {
+    elements,
+    isOpen
+  } = props;
+  return /*#__PURE__*/React.createElement("li", null, /*#__PURE__*/React.createElement(NavigationElement, props), elements?.length && isOpen ? /*#__PURE__*/React.createElement("ul", null, elements.map((element, id) => /*#__PURE__*/React.createElement(NavigationElementWrapper, _extends({}, element, {
+    key: [id, element.href].join('-')
+  })))) : '');
+};
+NavigationElementWrapper.displayName = 'NavigationElementWrapper';
+export default NavigationElementWrapper;

package/build/organisms/navigation/navigation-props.js

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

package/build/organisms/navigation/navigation-styled.js

@@ -0,0 +1,14 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { themeGet } from "../../utils/index.js";
+export const StyledNavigation = styled(Box)`
+  ul ul > li {
+    a {
+      padding-left: ${themeGet('space', 'x3')};
+    }
+    &:last-child {
+      margin-bottom: ${themeGet('space', 'lg')};
+    }
+  }
+`;
+export default StyledNavigation;

package/build/organisms/navigation/navigation.doc.md

@@ -0,0 +1,126 @@
+<img src="components/navigation.png" />
+
+Component rendering entire navigation list
+
+### Usage
+
+```javascript
+import { Navigation } from '@adminjs/design-system'
+
+const navigationElements = [{
+  label: 'Dashboard',
+  icon: 'Dashboard',
+  isSelected: true,
+  href: '/',
+  onClick: () => {},
+  id: 'dashboard',
+}]
+
+return (
+  <Navigation
+    label: "Pages",
+    elements: navigationElements,
+  />
+)
+```
+
+### Prop types
+
+By default all the data are passed via {@link CurrentUserNavProps} - check them out below.
+
+
+### Example
+
+#### Full-featured example with all the props
+
+```reactComponent
+const MyComponent = () => {
+  const label = 'Navigation'
+
+  const [postgresOpen, setPostgresOpen] = React.useState(false)
+  const [mongooseOpen, setMongooseOpen] = React.useState(false)
+  
+  const handleClick = (event) => {
+    event.preventDefault()
+    console.log(event)
+  }
+  
+  const navigationElements = [{
+    label: 'Dashboard',
+    icon: 'Dashboard',
+    isSelected: true,
+    href: '/',
+    onClick: handleClick,
+    id: 'dashboard',
+  }, {
+    label: 'Postgres with long name and spaces',
+    icon: 'Sql',
+    onClick: (event) => {
+      event.preventDefault()
+      setPostgresOpen(!postgresOpen)
+    },
+    isOpen: postgresOpen,
+    elements: [{
+      label: 'Users',
+      href: '/resources/Users/list',
+      onClick: handleClick,
+      id: 'users',
+    }, {
+      label: 'Posts',
+      href: '/resources/Posts/list',
+      onClick: handleClick,
+      id: 'posts',
+    }, {
+      label: 'Messages',
+      href: '/resources/Messages/list',
+      onClick: handleClick,
+      id: 'messages',
+    }, {
+      label: 'Calendar',
+      href: '/resources/Calendar/list',
+      onClick: handleClick,
+      id: 'calendar',
+    }],
+  }, {
+    label: 'MongooseWithLongNameAndWithoutSpaces',
+    icon: 'Datastore',
+    isOpen: mongooseOpen,
+    onClick: (event) => {
+      event.preventDefault()
+      setMongooseOpen(!mongooseOpen)
+    },
+    elements: [{
+      label: 'Car',
+      href: '/resources/Cars/list',
+      onClick: handleClick,
+      id: 'car',
+    }, {
+      label: 'Dealers',
+      href: '/resources/Dealers/list',
+      onClick: handleClick,
+      id: 'dealers',
+    }, {
+      label: 'Owners',
+      href: '/resources/Owners/list',
+      onClick: handleClick,
+      id: 'owners',
+    }, {
+      label: 'Orders',
+      href: '/resources/Orders/list',
+      onClick: handleClick,
+      id: 'orders',
+    }],
+  }]
+
+  return (
+    <Box variant="grey" height="500px">
+      <Label>Navigation example</Label>
+      <Box width="sidebarWidth" border="bg" bg="white">
+        <Navigation elements={navigationElements} label={label} />
+      </Box>
+    </Box>
+  )
+}
+
+return <MyComponent />
+```

package/build/organisms/navigation/navigation.js

@@ -0,0 +1,34 @@
+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 { StyledNavigation } from "./navigation-styled.js";
+import { NavigationElementWrapper } from "./navigation-element-wrapper.js";
+import { Label } from "../../atoms/label/index.js";
+
+/**
+ * @load ./navigation.doc.md
+ * @component
+ * @subcategory Organisms
+ * @hideconstructor
+ * @see NavigationProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-organisms-navigation--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export const Navigation = props => {
+  const {
+    label,
+    elements
+  } = props;
+  return /*#__PURE__*/React.createElement(StyledNavigation, {
+    px: "xl",
+    py: "lg"
+  }, !!label?.length && /*#__PURE__*/React.createElement(Label, {
+    pl: "lg",
+    mb: "md",
+    uppercase: true
+  }, label), /*#__PURE__*/React.createElement("ul", null, elements.map((element, id) => /*#__PURE__*/React.createElement(NavigationElementWrapper, _extends({
+    key: [id, element.href].join('-')
+  }, element)))));
+};
+Navigation.displayName = 'Navigation';
+export default Navigation;

package/build/organisms/navigation/navigation.stories.js

@@ -0,0 +1,110 @@
+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, Label } from "../../index.js";
+import { Navigation } from "./index.js";
+export const Default = {
+  render: ({
+    onClick,
+    label
+  }) => {
+    const [postgresOpen, setPostgresOpen] = useState(false);
+    const [mongooseOpen, setMongooseOpen] = useState(false);
+    const handleClick = event => {
+      event.preventDefault();
+      onClick(event);
+    };
+    const props = {
+      label: 'Navigation',
+      elements: [{
+        label: 'Dashboard',
+        icon: 'Database',
+        isSelected: true,
+        href: '/',
+        onClick: handleClick,
+        id: 'dashboard'
+      }, {
+        label: 'Postgres with long name and spaces',
+        icon: 'Database',
+        onClick: event => {
+          event.preventDefault();
+          setPostgresOpen(!postgresOpen);
+        },
+        isOpen: postgresOpen,
+        elements: [{
+          label: 'Users',
+          href: '/resources/Users/list',
+          onClick: handleClick,
+          id: 'users'
+        }, {
+          label: 'Posts',
+          href: '/resources/Posts/list',
+          onClick: handleClick,
+          id: 'posts'
+        }, {
+          label: 'Messages',
+          href: '/resources/Messages/list',
+          onClick: handleClick,
+          id: 'messages'
+        }, {
+          label: 'Calendar',
+          href: '/resources/Calendar/list',
+          onClick: handleClick,
+          id: 'calendar'
+        }]
+      }, {
+        label: 'MongooseWithLongNameAndWithoutSpaces',
+        icon: 'Database',
+        isOpen: mongooseOpen,
+        onClick: event => {
+          event.preventDefault();
+          setMongooseOpen(!mongooseOpen);
+        },
+        elements: [{
+          label: 'Car',
+          href: '/resources/Cars/list',
+          onClick: handleClick,
+          id: 'car'
+        }, {
+          label: 'Dealers',
+          href: '/resources/Dealers/list',
+          onClick: handleClick,
+          id: 'dealers'
+        }, {
+          label: 'Owners',
+          href: '/resources/Owners/list',
+          onClick: handleClick,
+          id: 'owners'
+        }, {
+          label: 'Orders',
+          href: '/resources/Orders/list',
+          onClick: handleClick,
+          id: 'orders'
+        }]
+      }]
+    };
+    return /*#__PURE__*/React.createElement(Box, {
+      variant: "grey"
+    }, /*#__PURE__*/React.createElement(Label, null, "Navigation example"), /*#__PURE__*/React.createElement(Box, {
+      width: "sidebarWidth",
+      border: "bg",
+      bg: "white"
+    }, /*#__PURE__*/React.createElement(Navigation, _extends({}, props, {
+      label: label
+    }))));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Organisms/Navigation',
+  component: Navigation,
+  args: {
+    label: 'Navigation'
+  },
+  argTypes: {
+    label: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export default meta;