@clement_lores/admin-design-system 1.0.0

package/src/organisms/button-group/button-group.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react'
+
+import { BUTTON_IN_GROUP_CLASS_NAME, StyledButtonGroup } from './button-group.styled.jsx'
+import { ButtonGroupProps } from './button-group.types.js'
+import { ButtonInGroup } from './button-in-group.jsx'
+
+/**
+ * @load ./button-group.doc.md
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-button-group--default Storybook}
+ * @component
+ * @subcategory Organisms
+ * @section design-system
+ * @new in version 3.3
+ */
+export const ButtonGroup: React.FC<ButtonGroupProps> = (props) => {
+  const { buttons, size, rounded } = props
+
+  if (!buttons || !buttons.length) {
+    return null
+  }
+
+  return (
+    <StyledButtonGroup {...props}>
+      {buttons.map((button, i) => (
+        <ButtonInGroup
+          key={`${button.label || ''}-${i}`}
+          size={size}
+          rounded={rounded}
+          {...button}
+          className={BUTTON_IN_GROUP_CLASS_NAME}
+        />
+      )) }
+    </StyledButtonGroup>
+  )
+}
+
+ButtonGroup.displayName = 'ButtonGroup'
+
+export default ButtonGroup

package/src/organisms/button-group/button-group.types.ts

@@ -0,0 +1,61 @@
+import type { ButtonProps } from '../../atoms/button/index.js'
+import type { IconProps } from '../../atoms/icon/index.js'
+import type { VariantType } from '../../theme.js'
+
+/**
+ * Props of buttons in {@link ButtonGroup}
+ *
+ * @memberof ButtonGroup
+ */
+export type ButtonInGroupProps = Omit<ButtonProps, 'onClick'> & {
+  /** Icon of a button */
+  icon?: IconProps['icon'];
+  /** Label, when set to null, with icon given, button will adjust it's margin */
+  label?: string | null;
+  /** Variant compatible with Button variant */
+  variant?: VariantType;
+  /** Variant href */
+  href?: string;
+  /**
+   * Button source - if set, this will be passed to onClick handler. It can be useful if when
+   * you have one handler function for all the buttons.
+   */
+  source?: any;
+  /**
+   * On click handler invoked when button has been clicked.
+   */
+  onClick?: (event, source: any) => any | Promise<any>;
+  /**
+   * Array of nested buttons.
+   */
+  buttons?: Array<ButtonInGroupProps>
+  /**
+   * CSS Selector
+   */
+  'data-css'?: string;
+} & {
+  className?: string
+}
+
+type ButtonPropsSize = ButtonProps['size']
+type ButtonPropsRounded = ButtonProps['rounded']
+
+/**
+ * Props passed to ButtonGroup element.
+ *
+ * @memberof ButtonGroup
+ */
+export type ButtonGroupProps = {
+  /**
+   * Default size for all buttons. The same as {@link ButtonProps}.size
+   */
+  size?: ButtonPropsSize,
+  /**
+   * Default rounded property for all buttons. The same as {@link ButtonProps}.rounded
+   */
+  rounded?: ButtonPropsRounded;
+  /**
+   * Array of top level buttons.
+   */
+  buttons: Array<ButtonInGroupProps>,
+}

package/src/organisms/button-group/button-in-group.tsx

@@ -0,0 +1,38 @@
+import React from 'react'
+
+import {
+  DropDown,
+  DropDownMenu,
+  DropDownTrigger,
+} from '../../molecules/drop-down/index.js'
+import { SingleButtonInGroup } from './single-button-in-group.jsx'
+import { DropDownItemWithButtons } from './drop-down-item-with-buttons.jsx'
+import { ButtonInGroupProps } from './button-group.types.js'
+
+export const ButtonInGroup: React.FC<ButtonInGroupProps> = (props) => {
+  const { buttons, className, ...buttonProps } = props
+
+  if (buttons && buttons.length) {
+    return (
+      <DropDown stick="right" className={className}>
+        <DropDownTrigger>
+          <SingleButtonInGroup {...props} />
+        </DropDownTrigger>
+        <DropDownMenu>
+          {buttons.map((button) => (
+            <DropDownItemWithButtons
+              {...button}
+              key={`${button.label}-${button.icon}`}
+            />
+          ))}
+        </DropDownMenu>
+      </DropDown>
+    )
+  }
+
+  return <SingleButtonInGroup {...buttonProps} className={className} />
+}
+
+ButtonInGroup.displayName = 'ButtonInGroup'
+
+export default ButtonInGroup

package/src/organisms/button-group/drop-down-item-with-buttons.tsx

@@ -0,0 +1,56 @@
+import React, { useState, useMemo } from 'react'
+
+import { Icon } from '../../atoms/icon/index.js'
+import {
+  DropDownMenu,
+  DropDownItem,
+} from '../../molecules/drop-down/index.js'
+import { StyledDropDownItemAction } from './button-group.styled.jsx'
+import { ButtonInGroupProps } from './button-group.types.js'
+
+export const DropDownItemWithButtons: React.FC<ButtonInGroupProps> = (props) => {
+  const { variant, onClick, href, icon, label, buttons, source, ...rest } = 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 (
+    <DropDownItem
+      colorVariant={variant}
+      p={0}
+    >
+      <StyledDropDownItemAction
+        onClick={onClickHandler}
+        href={href}
+        as="a"
+        hasLabel={!!label}
+        {...rest}
+      >
+        {buttons && buttons.length ? (
+          <Icon icon="ChevronLeft" ml="-24px" mr="0" />
+        ) : ''}
+        {!loading && !icon ? '' : <Icon key={iconName?.toString()} icon={iconName} spin={loading} />}
+        {label}
+      </StyledDropDownItemAction>
+      {buttons && buttons.length ? (
+        <DropDownMenu>
+          {buttons.map((button) => (
+            <DropDownItemWithButtons {...button} key={button.label} />
+          ))}
+        </DropDownMenu>
+      ) : ''}
+    </DropDownItem>
+  )
+}
+
+DropDownItemWithButtons.displayName = 'DropDownItemWithButtons'
+
+export default DropDownItemWithButtons

package/src/organisms/button-group/index.ts

@@ -0,0 +1,6 @@
+export * from './button-group.jsx'
+export * from './button-group.styled.jsx'
+export * from './button-group.types.js'
+export * from './button-in-group.jsx'
+export * from './drop-down-item-with-buttons.jsx'
+export * from './single-button-in-group.jsx'

package/src/organisms/button-group/single-button-in-group.tsx

@@ -0,0 +1,42 @@
+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.jsx'
+import { ButtonInGroupProps } from './button-group.types.js'
+
+export const SingleButtonInGroup: React.FC<ButtonInGroupProps> = (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 (
+    <StyledSingleButton
+      as="a"
+      hasLabel={!!label}
+      onClick={onClickHandler}
+      {...buttonProps}
+    >
+      {!loading && !icon ? '' : <Icon key={iconName?.toString()} icon={iconName} spin={loading} />}
+      {label}
+      {buttons && buttons.length && label ? (
+        <Box as="span" mr="-8px" ml="md">
+          <Icon icon="ChevronDown" />
+        </Box>
+      ) : ''}
+    </StyledSingleButton>
+  )
+}
+
+SingleButtonInGroup.displayName = 'SingleButtonInGroup'
+
+export default SingleButtonInGroup

package/src/organisms/current-user-nav/current-user-nav-props.ts

@@ -0,0 +1,39 @@
+import type { IconProps } from '../../atoms/icon/index.js'
+
+/**
+ * Action element passed to CurrentUserNavProps
+ *
+ * @memberof CurrentUserNav
+ * @alias CurrentUserNavAction
+ */
+export type CurrentUserNavAction = {
+  /** action label */
+  label: string
+  /** action OnClick handler - taking event as a param */
+  onClick?: (event: any) => void
+  /** Action icon */
+  icon?: IconProps['icon']
+  /** indicates if action is active */
+  isActive?: string
+  /** href for an action */
+  href?: string
+}
+
+/**
+ * Props passed to {@link CurrentUserNav} component
+ *
+ * @memberof CurrentUserNav
+ * @alias CurrentUserNavProps
+ */
+export type CurrentUserNavProps = {
+  /** User name */
+  name: string
+  /** User title - visible below the name */
+  title?: string
+  /** Avatar url */
+  avatarUrl?: string
+  /** Array of all the actions visible on hover */
+  dropActions?: Array<CurrentUserNavAction>
+  /** Array of all the actions visible by the user name */
+  lineActions?: Array<CurrentUserNavAction>
+}

package/src/organisms/current-user-nav/current-user-nav-styled.ts

@@ -0,0 +1,31 @@
+import { styled } from '@styled-components'
+
+import { cssClass, themeGet } from '../../utils/index.js'
+import { Box, BoxProps } from '../../atoms/box/index.js'
+
+export const StyledCurrentUserNav = styled(Box)<BoxProps>`
+  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/src/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/src/organisms/current-user-nav/current-user-nav.stories.tsx

@@ -0,0 +1,53 @@
+import React from 'react'
+import { Meta, StoryObj } from '@storybook/react'
+
+import { Box } from '../../index.js'
+import StoryWrapper from '../../utils/story-wrapper.jsx'
+import { CurrentUserNav, CurrentUserNavAction, CurrentUserNavProps } from './index.js'
+
+export const Default: StoryObj<CurrentUserNavProps & { onClick: (e) => void }> = {
+  render: ({ onClick, ...props }) => {
+    const handleClick = (event) => {
+      event.preventDefault()
+      onClick(event)
+    }
+
+    const dropActions: CurrentUserNavAction[] = [
+      { label: 'My Profile', onClick: handleClick, icon: 'User' },
+      { label: 'Log out', onClick: handleClick, icon: 'LogOut' },
+    ]
+
+    const lineActions: CurrentUserNavAction[] = [
+      { label: 'Notification', onClick: handleClick, icon: 'Bell' },
+      { label: 'Settings', onClick: handleClick, icon: 'Settings' },
+    ]
+
+    return (
+      <StoryWrapper label="Current user navigation">
+        <Box height="250px">
+          <Box border="default" flex flexDirection="row-reverse" height="navbarHeight">
+            <CurrentUserNav {...props} dropActions={dropActions} lineActions={lineActions} />
+          </Box>
+        </Box>
+      </StoryWrapper>
+    )
+  },
+}
+
+const meta: Meta<typeof CurrentUserNav> = {
+  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/src/organisms/current-user-nav/current-user-nav.tsx

@@ -0,0 +1,72 @@
+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 { CurrentUserNavProps } from './current-user-nav-props.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: React.FC<CurrentUserNavProps> = (props) => {
+  const { name = '', title = '', avatarUrl, dropActions, lineActions } = props
+
+  return (
+    <StyledCurrentUserNav>
+      {lineActions && lineActions.length && (
+        <Box flex flexDirection="row" alignItems="center">
+          {lineActions.map((action) => (
+            <Button
+              size="icon"
+              variant="text"
+              title={action.label}
+              key={action.label}
+              href={action.href}
+              as="a"
+              className="line-action"
+              onClick={action.onClick}
+            >
+              {action.icon && <Icon icon={action.icon} />}
+            </Button>
+          ))}
+        </Box>
+      )}
+      <DropDown stick="right" display="flex">
+        <DropDownTrigger>
+          <Box flex flexDirection="row" px="xl" alignItems="center" height="navbarHeight">
+            <Box>
+              <Title>{name}</Title>
+              {title && <SmallText>{title}</SmallText>}
+            </Box>
+            <Avatar src={avatarUrl} alt={name} marginLeft="lg">{name.slice(0, 1).toUpperCase()}</Avatar>
+          </Box>
+        </DropDownTrigger>
+        {dropActions && dropActions.length && (
+          <DropDownMenu minWidth="100%">
+            {dropActions.map((action) => (
+              <DropDownItem key={action.label} as="a" onClick={action.onClick} href={action.href}>
+                {action.icon && <Icon icon={action.icon} />}
+                {action.label}
+              </DropDownItem>
+            ))}
+          </DropDownMenu>
+        )}
+      </DropDown>
+    </StyledCurrentUserNav>
+  )
+}
+
+CurrentUserNav.displayName = 'CurrentUserNav'
+
+export default CurrentUserNav

package/src/organisms/current-user-nav/index.ts

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

package/src/organisms/index.ts

@@ -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/src/organisms/made-with-love/index.ts

@@ -0,0 +1 @@
+export * from './made-with-love.jsx'

package/src/organisms/made-with-love/made-with-love.stories.tsx

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import MadeWithLove from './made-with-love.jsx'
+
+export const Default: StoryObj = {}
+
+const meta: Meta<typeof MadeWithLove> = {
+  title: 'DesignSystem/Organisms/MadeWithLove',
+  component: MadeWithLove,
+}
+
+export default meta

package/src/organisms/made-with-love/made-with-love.tsx

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

package/src/organisms/navigation/index.ts

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

package/src/organisms/navigation/navigation-element-wrapper.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { NavigationElement } from '../../molecules/navigation-element/index.js'
+import { NavigationElementWithChildrenProps } from './navigation-props.js'
+
+export const NavigationElementWrapper: React.FC<NavigationElementWithChildrenProps> = (props) => {
+  const { elements, isOpen } = props
+  return (
+    <li>
+      <NavigationElement {...props} />
+      {elements?.length && isOpen ? (
+        <ul>
+          {elements.map((element, id) => (
+            <NavigationElementWrapper
+              {...element}
+              key={[id, element.href].join('-')}
+            />
+          ))}
+        </ul>
+      ) : ''}
+    </li>
+  )
+}
+
+NavigationElementWrapper.displayName = 'NavigationElementWrapper'
+
+export default NavigationElementWrapper

package/src/organisms/navigation/navigation-props.ts

@@ -0,0 +1,26 @@
+import { PropsWithChildren } from 'react'
+
+import {
+  NavigationElementProps,
+} from '../../molecules/navigation-element/navigation-element-props.js'
+
+/**
+ * Array of navigation elements. Extending {@link NavigationElementProps}
+ *
+ * @memberof Navigation
+ * @alias NavigationElementWithChildrenProps
+ */
+export type NavigationElementWithChildrenProps = NavigationElementProps & {
+  elements?: Array<NavigationElementWithChildrenProps>,
+}
+
+/**
+ * Props passed to {@link Navigation} component
+ *
+ * @memberof Navigation
+ * @alias NavigationProps
+ */
+export type NavigationProps = {
+  label?: string;
+  elements: Array<NavigationElementWithChildrenProps>;
+} & PropsWithChildren

package/src/organisms/navigation/navigation-styled.tsx

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