@clement_lores/admin-design-system 1.0.0

package/build/molecules/form-group/form-group.js

@@ -0,0 +1,184 @@
+import { space } from 'styled-system';
+import { styled, css } from "../../../build/utils/styled.js";
+import { Label } from "../../atoms/label/index.js";
+import { Button } from "../../atoms/button/index.js";
+import { Input } from "../../atoms/input/index.js";
+import { CurrencyInput } from "../../atoms/currency-input/index.js";
+import { Link } from "../../atoms/link/index.js";
+import InputGroup from "./input-group.js";
+const formGroupDisabledCSS = css`
+  color: ${({
+  theme
+}) => theme.colors.grey40};
+`;
+const formGroupWithErrorCSS = css`
+  color: ${({
+  theme
+}) => theme.colors.error};
+  ${Input}, ${CurrencyInput} {
+    color: ${({
+  theme
+}) => theme.colors.error};
+    border-color: ${({
+  theme
+}) => theme.colors.error};
+  }
+  &&& ${Label} {
+    color: ${({
+  theme
+}) => theme.colors.error};
+    &:before {
+      color: ${({
+  theme
+}) => theme.colors.error};
+    }
+  }
+  &&& ${Label}, &&& ${Button}, &&& ${Link} {
+    border-color: ${({
+  theme
+}) => theme.colors.error};
+  }
+`;
+
+/**
+ * Props for FormGroup. Apart from props defined here FormGroup supports also all {@link SpaceProps}
+ * @alias FormGroupProps
+ * @memberof FormGroup
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/form-group.png" />
+ *
+ * FormGroup comes with other, from-related components like: FormMessage and InputGroup.
+ * Together they allow you to build form elements.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { FormGroup, FormGroupProps, InputGroup, FormMessage } from '@adminjs/design-system'
+ * ```
+ *
+ * @hideconstructor
+ * @component
+ * @see FormGroupProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-formgroup--default Storybook}
+ * @subcategory Molecules
+ * @example <caption>Example 1: input with all sorts of buttons</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup>
+ *     <Label required>Name</Label>
+ *     <InputGroup>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *       <Input />
+ *       <Label>100 KM</Label>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *     </InputGroup>
+ *     <FormMessage>And the optional message</FormMessage>
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 2: the same input with errors</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup error>
+ *     <Label required>Name</Label>
+ *     <InputGroup>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *       <Input />
+ *       <Label>100 KM</Label>
+ *       <Button variant="contained" size="icon">
+ *         <Icon icon="ChevronRight" />
+ *       </Button>
+ *     </InputGroup>
+ *     <FormMessage>And the optional message</FormMessage>
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 3: disabled field</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup disabled>
+ *     <Label>Disabled field</Label>
+ *     <InputGroup>
+ *       <Input disabled />
+ *     </InputGroup>
+ *     <FormMessage />
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @example <caption>Example 4: with a link</caption>
+ * return (
+ * <Box py="xl">
+ *   <FormGroup>
+ *     <Label>Some form data with button link</Label>
+ *     <InputGroup>
+ *       <Input />
+ *       <Link href="#someHref">This is link</Link>
+ *     </InputGroup>
+ *     <FormMessage />
+ *   </FormGroup>
+ * </Box>
+ * )
+ * @section design-system
+ */
+export const FormGroup = styled.div`
+  width: 100%;
+  ${({
+  error
+}) => error ? formGroupWithErrorCSS : ''};
+  ${({
+  disabled
+}) => disabled ? formGroupDisabledCSS : ''};
+  ${space};
+
+  & > ${Input}, & > ${CurrencyInput} {
+    width: 100%;
+  }
+
+  & ${Input}, & ${CurrencyInput} {
+    ${({
+  variant,
+  theme
+}) => variant === 'filter' ? `border-color: ${theme.colors.inputBorder}` : ''};
+    ${({
+  variant,
+  theme
+}) => variant === 'filter' ? `color: ${theme.colors.text}` : ''};
+  }
+
+  & ${InputGroup} {
+    ${Label}, ${Button}:last-child, ${Link}:last-child {
+      ${({
+  variant,
+  theme
+}) => variant === 'filter' ? `border-color: ${theme.colors.inputBorder}` : ''};
+    }
+  }
+
+  & [class*="DatePicker"] > .react-datepicker-wrapper {
+    ${({
+  variant,
+  theme
+}) => variant === 'filter' ? `border-color: ${theme.colors.inputBorder}` : ''};
+  }
+  & [class*="DatePicker"] > .react-datepicker-wrapper input {
+    ${({
+  variant,
+  theme
+}) => variant === 'filter' ? `color: ${theme.colors.text}` : ''};
+  }
+`;
+FormGroup.defaultProps = {
+  mb: 'lg'
+};
+FormGroup.displayName = 'FormGroup';
+export default FormGroup;

package/build/molecules/form-group/form-group.stories.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import { Box, Button, DropDown, DropDownMenu, DropDownTrigger, Icon, Input, Label } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { FormGroup, FormMessage, InputGroup } from "./index.js";
+export const FullFeaturedFormGroup = () => /*#__PURE__*/React.createElement(FormGroup, null, /*#__PURE__*/React.createElement(Label, {
+  required: true
+}, "Name"), /*#__PURE__*/React.createElement(InputGroup, null, /*#__PURE__*/React.createElement(DropDown, null, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(Button, {
+  variant: "text",
+  size: "icon"
+}, "==")), /*#__PURE__*/React.createElement(DropDownMenu, {
+  top: "xxl"
+}, /*#__PURE__*/React.createElement(Button, {
+  variant: "text",
+  size: "icon"
+}, '>='), /*#__PURE__*/React.createElement(Button, {
+  variant: "text",
+  size: "icon"
+}, '<='), /*#__PURE__*/React.createElement(Button, {
+  variant: "text",
+  size: "icon"
+}, '><'))), /*#__PURE__*/React.createElement(Input, null), /*#__PURE__*/React.createElement(Label, null, "100 KM"), /*#__PURE__*/React.createElement(Button, {
+  size: "icon"
+}, /*#__PURE__*/React.createElement(Icon, {
+  icon: "ArrowRight"
+}))), /*#__PURE__*/React.createElement(FormMessage, null, "With an message below"));
+export const Full = () => /*#__PURE__*/React.createElement(Box, {
+  width: 1
+}, /*#__PURE__*/React.createElement(StoryWrapper, {
+  label: "Full featured FormGroup"
+}, /*#__PURE__*/React.createElement(FullFeaturedFormGroup, null)));
+const meta = {
+  title: 'DesignSystem/Molecules/FormGroup',
+  component: FormGroup
+};
+export default meta;

package/build/molecules/form-group/form-message.js

@@ -0,0 +1,23 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Text } from "../../atoms/text/index.js";
+
+/**
+ * @component
+ * @private
+ */
+const FormMessage = styled(Text)`
+  box-sizing: border-box;
+  vertical-align: middle;
+  height: ${({
+  theme
+}) => theme.space.xl};
+  margin: ${({
+  theme
+}) => theme.space.sm} 0 0;
+  font-weight: normal;
+  font-size: ${({
+  theme
+}) => theme.fontSizes.sm};
+`;
+FormMessage.displayName = 'FormMessage';
+export default FormMessage;

package/build/molecules/form-group/index.js

@@ -0,0 +1,3 @@
+export * from "./form-group.js";
+export { default as InputGroup } from "./input-group.js";
+export { default as FormMessage } from "./form-message.js";

package/build/molecules/form-group/input-group.js

@@ -0,0 +1,68 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Button } from "../../atoms/button/index.js";
+import { Input } from "../../atoms/input/index.js";
+import { Label } from "../../atoms/label/index.js";
+import { Link } from "../../atoms/link/index.js";
+
+/**
+ * @component
+ * @private
+ */
+const InputGroup = styled.div`
+  position: relative;
+  display: flex;
+  width: 100%;
+  ${Input} {
+    flex-grow: 1;
+  }
+  ${Input}:not(:last-child) {
+    border-right: none;
+  }
+  ${Label}, & > ${Button}, & > ${Link}:last-child {
+    padding: ${({
+  theme
+}) => theme.space.sm};
+    border: solid ${({
+  theme
+}) => theme.colors.inputBorder};
+    border-width: 1px 1px 1px 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin: 0;
+    color: ${({
+  theme
+}) => theme.colors.grey40};
+  }
+
+  ${Label}, ${Button}, ${Link} {
+    flex-shrink: 0;
+    flex-grow: 0;
+  }
+
+  ${Label}, ${Link} {
+    line-height: ${({
+  theme
+}) => theme.lineHeights.lg};
+  }
+
+  ${Button}:first-child, ${Link}:first-child {
+    border-right: 0;
+  }
+
+  ${Input}:hover {
+    & + ${Label}, & + ${Button}, & + ${Link} {
+      border-color: ${({
+  theme
+}) => theme.colors.grey60};
+    }
+  } 
+  ${Input}:focus {
+    & + ${Label}, & + ${Button}, & + ${Link} {
+      border-color: ${({
+  theme
+}) => theme.colors.primary100};
+    }
+  }
+`;
+InputGroup.displayName = 'InputGroup';
+export default InputGroup;

package/build/molecules/index.js

@@ -0,0 +1,15 @@
+export * from "./date-picker/index.js";
+export * from "./drawer/index.js";
+export * from "./drop-down/index.js";
+export * from "./drop-zone/index.js";
+export * from "./form-group/index.js";
+export * from "./info-box/index.js";
+export * from "./message-box/index.js";
+export * from "./modal/index.js";
+export * from "./navigation-element/index.js";
+export * from "./pagination/index.js";
+export * from "./rich-text-editor/index.js";
+export * from "./tinymce-editor/index.js";
+export * from "./select/index.js";
+export * from "./stepper/index.js";
+export * from "./value-group/index.js";

package/build/molecules/info-box/index.js

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

package/build/molecules/info-box/info-box.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { styled } from "../../../build/utils/styled.js";
+import { Illustration } from "../../atoms/illustration/index.js";
+import { Box } from "../../atoms/box/index.js";
+import { H4 } from "../../atoms/typography/index.js";
+import { cssClass } from "../../utils/css-class.js";
+const StyledInfoBox = styled(Box)`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+`;
+
+/**
+ * @memberof InfoBox
+ * @alias InfoBoxProps
+ */
+
+/**
+ * @classdesc
+ *
+ * <img src="components/info-box.png" />
+ *
+ * Used for all type of information like:
+ *
+ * > you don't have x - please add first one"
+ *
+ * in the system.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { InfoBox, InfoBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-infobox--default Storybook}
+ * @see InfoBoxProps
+ * @example
+ * return (
+ * <InfoBox title="There are no cars in the system">
+ *   <Text>Currently there are no cars in the system</Text>
+ *   <Text>To create first click</Text>
+ *   <Button mt="lg"><Icon icon="Plus" />Create</Button>
+ * </InfoBox>
+ * )
+ * @section design-system
+ */
+const InfoBox = ({
+  children,
+  title,
+  illustration,
+  variant = 'transparent',
+  testId
+}) => /*#__PURE__*/React.createElement(StyledInfoBox, {
+  "data-testid": testId,
+  variant: variant,
+  className: cssClass('InfoBox')
+}, illustration && typeof illustration === 'string' ? /*#__PURE__*/React.createElement(Illustration, {
+  variant: illustration
+}) : illustration, title && /*#__PURE__*/React.createElement(H4, {
+  mb: "lg"
+}, title), children);
+InfoBox.displayName = 'InfoBox';
+export { InfoBox };
+export default InfoBox;

package/build/molecules/info-box/info-box.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Button, Icon, Text } from "../../index.js";
+import { InfoBox } from "./info-box.js";
+export const Default = () => /*#__PURE__*/React.createElement(InfoBox, {
+  title: "There are no cars in the system",
+  illustration: "Accept"
+}, /*#__PURE__*/React.createElement(Text, null, "Currently there are no cars in the system"), /*#__PURE__*/React.createElement(Text, null, "To create first click"), /*#__PURE__*/React.createElement(Button, {
+  variant: "contained",
+  mt: "lg"
+}, /*#__PURE__*/React.createElement(Icon, {
+  icon: "Plus"
+}), "Create"));
+const meta = {
+  title: 'DesignSystem/Molecules/InfoBox',
+  component: InfoBox
+};
+export default meta;

package/build/molecules/message-box/index.js

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

package/build/molecules/message-box/message-box.js

@@ -0,0 +1,173 @@
+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 max-len */
+import { styled } from "../../../build/utils/styled.js";
+import React from 'react';
+import { variant as styledVariant } from 'styled-system';
+import { Box } from "../../atoms/box/index.js";
+import { Button } from "../../atoms/button/index.js";
+import { Icon } from "../../atoms/icon/index.js";
+import { Text } from "../../atoms/text/index.js";
+import { cssClass } from "../../utils/css-class.js";
+
+/**
+ * Prop Types of a MessageBox component.
+ * Apart from those defined below it extends all {@link SpaceProps}
+ *
+ * @memberof MessageBox
+ * @alias MessageBoxProps
+ */
+
+const sizeVariants = styledVariant({
+  prop: 'size',
+  variants: {
+    sm: {
+      boxShadow: 'none',
+      [`& > ${cssClass('Button')}`]: {
+        margin: '0px'
+      }
+    }
+  }
+});
+const StyledMessageBox = styled(Box)`
+  line-height: ${({
+  theme
+}) => theme.lineHeights.default};
+  border-radius: 4px;
+  color: ${({
+  theme
+}) => theme.colors.text};
+  padding: 12px 22px;
+  white-space: pre-wrap;
+
+  & .${cssClass('Icon')} {
+    display: flex;
+  }
+
+  ${sizeVariants};
+`;
+
+/**
+ * @classdesc
+ *
+ * <img src="components/message-box.png" />
+ *
+ * Component responsible for rendering standard danger/info/success
+ * messages.
+ *
+ * It has 2 size versions: default and small. Also it can either contain or
+ * don't contain children, which causes different look.
+ *
+ * ### Usage
+ *
+ * ```javascript
+ * import { MessageBox, MessageBoxProps } from '@adminjs/design-system'
+ * ```
+ *
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see MessageBoxProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-messagebox--default Storybook}
+ * @example <caption>Different variants</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox message="Some default message" onCloseClick={() => alert('close clicked')} />
+ *   <MessageBox message="Error message" mt="default" variant="danger" onCloseClick={() => alert('close clicked')} />
+ *   <MessageBox message="Info message" mt="default" variant="info" onCloseClick={() => alert('close clicked')} />
+ *  </Box>
+ * )
+ * @example <caption>Different variants with children</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox message="Some default message" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *   <MessageBox message="Error message" mt="default" variant="danger" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *   <MessageBox message="Info message" mt="default" variant="info" onCloseClick={() => alert('close clicked')}>
+ *     With inside text
+ *   </MessageBox>
+ *  </Box>
+ * )
+ * @example <caption>Small with an icon and inside text</caption>
+ * return (
+ *  <Box py="lg">
+ *   <MessageBox
+ *     size="sm"
+ *     message="Info message"
+ *     mt="default"
+ *     variant="info"
+ *     icon="MessageCircle"
+ *     onCloseClick={() => alert('close clicked')}
+ *   >
+ *     With inside text
+ *   </MessageBox>
+ *  </Box>
+ * )
+ * @section design-system
+ */
+export const MessageBox = props => {
+  const {
+    onCloseClick,
+    message,
+    icon,
+    children,
+    variant = 'info',
+    size,
+    ...other
+  } = props;
+  const variantIcon = {
+    success: 'Check',
+    danger: 'XCircle',
+    info: 'Info',
+    warning: 'AlertCircle'
+  };
+  const variantBg = {
+    success: 'successLight',
+    danger: 'errorLight',
+    info: 'infoLight',
+    warning: 'warningLight'
+  };
+  const variantIconBg = {
+    success: 'success',
+    danger: 'error',
+    info: 'info',
+    warning: 'warning'
+  };
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    className: cssClass('MessageBox')
+  }, other), /*#__PURE__*/React.createElement(StyledMessageBox, {
+    as: "div",
+    bg: variantBg[variant],
+    size: size
+  }, /*#__PURE__*/React.createElement(Box, {
+    flex: true,
+    alignItems: "center"
+  }, variantIcon && /*#__PURE__*/React.createElement(Icon, {
+    icon: icon || variantIcon[variant],
+    bg: variantIconBg[variant],
+    color: "white",
+    p: "sm",
+    marginRight: "xl",
+    borderRadius: "50%"
+  }), /*#__PURE__*/React.createElement(Box, {
+    as: "div",
+    flexGrow: 1
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontWeight: children ? 500 : 400
+  }, message)), onCloseClick && /*#__PURE__*/React.createElement(Button, {
+    variant: "text",
+    size: "icon",
+    onClick: onCloseClick,
+    rounded: true,
+    color: variant,
+    ml: "xl"
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: "X"
+  }))), /*#__PURE__*/React.createElement(Box, {
+    marginLeft: "x3"
+  }, /*#__PURE__*/React.createElement(Text, null, children))));
+};
+MessageBox.displayName = 'MessageBox';
+export default MessageBox;

package/build/molecules/message-box/message-box.stories.js

@@ -0,0 +1,43 @@
+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 { MessageBox } from "./message-box.js";
+export const Default = {
+  render: ({
+    withInsideText,
+    ...props
+  }) => /*#__PURE__*/React.createElement(Box, {
+    py: "lg"
+  }, /*#__PURE__*/React.createElement(MessageBox, _extends({
+    onCloseClick: () => {/** noop */}
+  }, props), withInsideText && 'With inside text'))
+};
+const meta = {
+  title: 'DesignSystem/Molecules/MessageBox',
+  component: MessageBox,
+  args: {
+    variant: 'info',
+    size: 'sm',
+    message: 'Some message'
+  },
+  argTypes: {
+    variant: {
+      options: ['danger', 'info', 'success', 'warning'],
+      control: {
+        type: 'select'
+      }
+    },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: {
+        type: 'select'
+      }
+    },
+    message: {
+      control: {
+        type: 'text'
+      }
+    }
+  }
+};
+export default meta;

package/build/molecules/modal/index.js

@@ -0,0 +1,4 @@
+export * from "./modal-inline.js";
+export * from "./modal-props.js";
+export * from "./modal-styled.js";
+export * from "./modal.js";