@clement_lores/admin-design-system 1.0.0

package/build/molecules/stepper/stepper.stories.js

@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { Box, Button } from "../../index.js";
+import { Step, Stepper } from "./index.js";
+const steps = [{
+  number: 1,
+  label: 'Do this first'
+}, {
+  number: 2,
+  label: "Don't forget this"
+}, {
+  number: 3,
+  label: 'And finally this'
+}];
+export const clickableSteps = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  return /*#__PURE__*/React.createElement(Stepper, null, steps.map(({
+    number,
+    label
+  }) => /*#__PURE__*/React.createElement(Step, {
+    key: number,
+    active: currentStep === number,
+    completed: currentStep > number,
+    onClick: idx => setCurrentStep(idx),
+    number: number
+  }, label)));
+};
+export const stepsWithBottomNavigation = () => {
+  const [currentStep, setCurrentStep] = useState(1);
+  return /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Stepper, null, steps.map(({
+    number,
+    label
+  }) => /*#__PURE__*/React.createElement(Step, {
+    key: number,
+    active: currentStep === number,
+    completed: currentStep > number,
+    onClick: idx => setCurrentStep(idx),
+    number: number
+  }, label))), /*#__PURE__*/React.createElement(Box, {
+    mt: "xl"
+  }, /*#__PURE__*/React.createElement(Button, {
+    disabled: currentStep === 1,
+    mr: "default",
+    onClick: () => setCurrentStep(currentStep - 1)
+  }, "Previous Step"), /*#__PURE__*/React.createElement(Button, {
+    disabled: currentStep === 3,
+    variant: "primary",
+    onClick: () => setCurrentStep(currentStep + 1)
+  }, "Next Step")));
+};
+const meta = {
+  title: 'DesignSystem/Molecules/Stepper',
+  component: Stepper
+};
+export default meta;

package/build/molecules/tinymce-editor/index.js

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

package/build/molecules/tinymce-editor/tinymce-editor.js

@@ -0,0 +1,89 @@
+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, { useRef, useCallback } from 'react';
+import { Editor } from '@tinymce/tinymce-react';
+import { EditorWrapper } from "./tinymce-editor.styled.js";
+
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+const TinyMCE = props => {
+  const editorRef = useRef(null);
+  const {
+    onChange,
+    value,
+    options = {}
+  } = props;
+  const {
+    plugins = null,
+    toolbar = null,
+    init = null,
+    contentStyle = null,
+    height = null,
+    ...otherProps
+  } = options;
+  const handleUpdate = useCallback(newValue => {
+    onChange(newValue);
+  }, []);
+  const handleInit = (_evt, editor) => {
+    editorRef.current = editor;
+  };
+  const filePickerCallback = cb => {
+    const input = document.createElement('input');
+    input.setAttribute('type', 'file');
+    input.setAttribute('accept', 'image/*');
+
+    /*
+      Note: In modern browsers input[type="file"] is functional without
+      even adding it to the DOM, but that might not be the case in some older
+      or quirky browsers like IE, so you might want to add it to the DOM
+      just in case, and visually hide it. And do not forget do remove it
+      once you do not need it anymore.
+    */
+
+    input.onchange = function fpOnChange(e) {
+      // eslint-disable-next-line react/no-this-in-sfc
+      const file = e.target?.files?.[0];
+      const reader = new FileReader();
+      reader.onload = function fpOnLoad() {
+        /*
+          Note: Now we need to register the blob in TinyMCEs image blob
+          registry. In the next release this part hopefully won't be
+          necessary, as we are looking to handle it internally.
+        */
+        const id = `blobid${new Date().getTime()}`;
+        const {
+          blobCache
+        } = window.tinymce?.activeEditor?.editorUpload ?? {};
+        const base64 = reader.result?.split?.(',')?.[1];
+        const blobInfo = blobCache.create(id, file, base64);
+        blobCache.add(blobInfo);
+
+        /* call the callback and populate the Title field with the file name */
+        cb(blobInfo.blobUri(), {
+          title: file.name
+        });
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  };
+  const defaultPlugins = ['image', 'code', 'table', 'link', 'media', 'codesample'];
+  const defaultToolbar = ['undo redo formatselect bold italic backolor alignleft aligncenter alignright alignjustify bullist numlist outdent indent removeformat link image'];
+  const defaultInit = {
+    height: height !== null ? height : 500,
+    menubar: true,
+    plugins: plugins !== null ? plugins : defaultPlugins,
+    toolbar: toolbar !== null ? toolbar : defaultToolbar,
+    file_picker_types: 'file image media',
+    file_picker_callback: filePickerCallback,
+    content_style: contentStyle !== null ? contentStyle : 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
+  };
+  return /*#__PURE__*/React.createElement(EditorWrapper, null, /*#__PURE__*/React.createElement(Editor, _extends({
+    tinymceScriptSrc: "https://cdn.jsdelivr.net/npm/tinymce@8.6.0/tinymce.min.js",
+    onInit: handleInit,
+    onEditorChange: handleUpdate,
+    value: value,
+    init: init !== null ? init : defaultInit
+  }, otherProps)));
+};
+export { TinyMCE };
+export default TinyMCE;

package/build/molecules/tinymce-editor/tinymce-editor.styled.js

@@ -0,0 +1,15 @@
+import { styled } from "../../../build/utils/styled.js";
+import { Text } from "../../atoms/text/index.js";
+import { cssClass } from "../../utils/index.js";
+export const EditorWrapper = styled(Text)`
+  position: relative;
+  z-index: 1;
+
+  & .tox-tinymce {
+    padding: 8px 4px;
+    border-width: 1.5px;
+  }
+`;
+EditorWrapper.defaultProps = {
+  className: cssClass('EditorWrapper')
+};

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

@@ -0,0 +1,2 @@
+export * from "./value-group.js";
+export * from "./value-group-props.js";

package/build/molecules/value-group/value-group-props.js

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

package/build/molecules/value-group/value-group.doc.md

@@ -0,0 +1,67 @@
+<img src="components/value-group.png" />
+
+ValueGroup is the way of styling all {key: value} properties from your database. It
+maintains paddings and adds errors.
+
+### Usage
+
+```javascript
+import { ValueGroup } from '@adminjs/design-system'
+
+return (
+  <ValueGroup
+    value={'wojciech.krysiak@softwarebrothers.co'}
+    label={'email address'}
+  />
+)
+```
+
+### Prop types
+
+By default all the data are passed via {@link ValueGroupProps} - check them out below.
+
+
+### Example
+
+#### Example styling for a form with headers and ValueGroup
+
+```reactComponent
+    const Bio = (
+    <div>
+    <p>
+      Co-founder and CTO at Software Brothers He graduated from 2 faculties at 2008: Electronic followed by Marketing and Management.
+    </p>
+    <p>
+      He's been working in IT industry since then. During that time he've built dozens of products for biggest brands, such as Coca-Cola or Canal+.
+    </p>
+    <p>He also created solutions for different international startups having hundreds of thousands of users. Now, apart from being a CTO of Software Brothers, Wojtek focuses on teaching developers how to code by giving keynotes, providing open source solutions on GitHub and running a jscasts.tv youtube channel.
+    </p>
+    </div>
+  )
+  
+  const values = [
+    { label: "Email", value: 'wojciech.krysiak@softwarebrothers.co' },
+    { label: "Name", value: 'Wojciech' },
+    { label: "Surname", value: 'Krysiak' },
+    { label: "Gender", value: 'Male' },
+    { label: "Age", value: 'You wish you know' },
+  ]
+
+  return (
+    <Box width={[1, 3/4]} margin="auto">
+      <Header.H3>User Data</Header.H3>
+      <Box flex>
+        <Box width={2/5}>
+          {values.map( val => (
+            <ValueGroup key={val.label} {...val} />
+          ))}
+        </Box>
+        <Box width={3/5}>
+          <ValueGroup label="Bio">
+            <Text>{Bio}</Text>
+          </ValueGroup>
+        </Box>
+      </Box>
+    </Box>
+  )
+```

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Box } from "../../atoms/box/index.js";
+import { Label } from "../../atoms/label/index.js";
+import { Text } from "../../atoms/text/index.js";
+/**
+ * @load ./value-group.doc.md
+ * @component
+ * @subcategory Molecules
+ * @hideconstructor
+ * @see ValueGroupProps
+ * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-molecules-value-group--default Storybook}
+ * @new In version 3.3
+ * @section design-system
+ */
+export const ValueGroup = props => {
+  const {
+    label,
+    value,
+    children
+  } = props;
+  return /*#__PURE__*/React.createElement(Box, {
+    mb: "xl"
+  }, /*#__PURE__*/React.createElement(Label, {
+    variant: "light"
+  }, label), value ? /*#__PURE__*/React.createElement(Text, null, value) : '', children);
+};
+ValueGroup.displayName = 'ValueGroup';
+export default ValueGroup;

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

@@ -0,0 +1,41 @@
+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, CardTitle, Text } from "../../index.js";
+import StoryWrapper from "../../utils/story-wrapper.js";
+import { ValueGroup } from "./index.js";
+export const Default = {
+  render: ({
+    onClick
+  }) => {
+    const handleClick = event => {
+      event.preventDefault();
+      onClick(event);
+    };
+    const objects = [{
+      label: 'First Name',
+      onClick: handleClick,
+      value: 'Wojtek'
+    }, {
+      label: 'Last Name',
+      onClick: handleClick,
+      value: 'Krysiak'
+    }];
+    return /*#__PURE__*/React.createElement(StoryWrapper, {
+      label: "ValueGroup default settings"
+    }, /*#__PURE__*/React.createElement(Box, null, objects.map(field => /*#__PURE__*/React.createElement(ValueGroup, _extends({
+      key: field.label
+    }, field))), /*#__PURE__*/React.createElement(ValueGroup, {
+      label: "value with styled children"
+    }, /*#__PURE__*/React.createElement(CardTitle, null, "With children which are wrapped with CardTitle")), /*#__PURE__*/React.createElement(ValueGroup, {
+      label: "With Multiline Content"
+    }, /*#__PURE__*/React.createElement(Box, {
+      variant: "white",
+      border: "default"
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement("h4", null, "I am header"), /*#__PURE__*/React.createElement("p", null, "And I am content"))))));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Molecules/ValueGroup',
+  component: ValueGroup
+};
+export default meta;

package/build/organisms/button-group/button-group.doc.md

@@ -0,0 +1,92 @@
+<img src="components/button-group.png" />
+
+The component which renders Buttons in a group. It allows you to handle an array of actions.
+
+### Usage
+
+```javascript
+import { ButtonGroup } from '@adminjs/design-system'
+```
+
+### Props
+
+ButtonGroup can be configured with the default props like `size` or `rounded` passed to all
+the Buttons via {@link ButtonInProps}. These props can be changed for each button by using
+{@link ButtonInGroupProps}
+
+### Full featured example
+
+This is a full featured example with lots of buttons.
+
+```reactComponent
+
+const rounded = false
+const size = 'default'
+
+const handleClick = (event, source) => {
+  alert('clicked')
+}
+
+const buttons = [{
+  label: 'Edit',
+  onClick: handleClick,
+  icon: 'Edit',
+}, {
+  label: 'Not Clickable',
+  source: 'thisWillGoBack',
+  icon: 'Copy',
+  variant: 'light',
+  buttons: [{
+    label: 'Option 1',
+    onClick: handleClick,
+    icon: 'Copy',
+    variant: 'primary',
+  }, {
+    label: 'Option 2',
+    onClick: handleClick,
+    icon: 'Copy',
+    buttons: [{
+      label: 'Option 2.1',
+      onClick: handleClick,
+      icon: 'Copy',
+    }, {
+      label: 'Option 2.2',
+      onClick: handleClick,
+      icon: 'Copy',
+    }],
+  }, {
+    label: 'Option 3',
+    icon: 'Copy',
+  }],
+}, {
+  label: 'Delete',
+  onClick: handleClick,
+  variant: 'danger',
+  icon: 'TrashCan',
+}, {
+  label: null,
+  variant: 'light',
+  icon: 'MenuHorizontal',
+  buttons: [{
+    label: 'Edit',
+    onClick: handleClick,
+    icon: 'Edit',
+    variant: 'light',
+  }, {
+    label: 'Duplicate',
+    onClick: handleClick,
+    icon: 'Copy',
+  }, {
+    label: 'Delete',
+    onClick: handleClick,
+    variant: 'danger',
+    icon: 'TrashCan',
+  }],
+}]
+
+return (
+  <Box height={200}>
+    <ButtonGroup buttons={buttons} rounded={rounded} size={size} />
+  </Box>
+)
+```

package/build/organisms/button-group/button-group.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); }
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import { BUTTON_IN_GROUP_CLASS_NAME, StyledButtonGroup } from "./button-group.styled.js";
+import { ButtonInGroup } from "./button-in-group.js";
+
+/**
+ * @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 = props => {
+  const {
+    buttons,
+    size,
+    rounded
+  } = props;
+  if (!buttons || !buttons.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledButtonGroup, props, buttons.map((button, i) => /*#__PURE__*/React.createElement(ButtonInGroup, _extends({
+    key: `${button.label || ''}-${i}`,
+    size: size,
+    rounded: rounded
+  }, button, {
+    className: BUTTON_IN_GROUP_CLASS_NAME
+  }))));
+};
+ButtonGroup.displayName = 'ButtonGroup';
+export default ButtonGroup;

package/build/organisms/button-group/button-group.stories.js

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Box, CardTitle, Label } from "../../index.js";
+import { ButtonGroup } from "./index.js";
+export const Default = {
+  render: ({
+    onClick,
+    size,
+    rounded
+  }) => {
+    const handleClick = (event, source) => {
+      event.preventDefault();
+      onClick(event, source);
+    };
+    const buttons = [{
+      label: 'Edit',
+      onClick: handleClick,
+      icon: 'Edit'
+    }, {
+      label: 'Not Clickable',
+      source: 'thisWillGoBack',
+      icon: 'Copy',
+      variant: 'light',
+      buttons: [{
+        label: 'Option 1',
+        onClick: handleClick,
+        icon: 'Copy',
+        variant: 'primary'
+      }, {
+        label: 'Option 2',
+        onClick: handleClick,
+        icon: 'Copy',
+        buttons: [{
+          label: 'Option 2.1',
+          onClick: handleClick,
+          icon: 'Copy'
+        }, {
+          label: 'Option 2.2',
+          onClick: handleClick,
+          icon: 'Copy'
+        }]
+      }, {
+        label: 'Option 3',
+        icon: 'Copy'
+      }]
+    }, {
+      label: 'Delete',
+      onClick: handleClick,
+      variant: 'danger',
+      icon: 'Trash2'
+    }, {
+      label: null,
+      variant: 'light',
+      icon: 'MenuHorizontal',
+      buttons: [{
+        label: 'Edit',
+        onClick: handleClick,
+        icon: 'Edit',
+        variant: 'light'
+      }, {
+        label: 'Duplicate',
+        onClick: handleClick,
+        icon: 'Copy'
+      }, {
+        label: 'Delete',
+        onClick: handleClick,
+        variant: 'danger',
+        icon: 'Trash2'
+      }]
+    }];
+    return /*#__PURE__*/React.createElement(Box, {
+      variant: "grey"
+    }, /*#__PURE__*/React.createElement(Label, null, "ButtonGroup"), /*#__PURE__*/React.createElement(Box, {
+      variant: "card",
+      mb: "xxl"
+    }, /*#__PURE__*/React.createElement(CardTitle, null, "Big buttons"), /*#__PURE__*/React.createElement(ButtonGroup, {
+      buttons: buttons,
+      size: size,
+      rounded: rounded
+    })));
+  }
+};
+const meta = {
+  title: 'DesignSystem/Organisms/ButtonGroup',
+  component: ButtonGroup,
+  args: {
+    size: 'default',
+    rounded: false
+  },
+  argTypes: {
+    size: {
+      options: ['sm', 'default', 'lg'],
+      control: {
+        type: 'select'
+      }
+    },
+    rounded: {
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+};
+export default meta;

package/build/organisms/button-group/button-group.styled.js

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { styled, css } from "../../../build/utils/styled.js";
+import { Box } from "../../atoms/box/index.js";
+import { Button } from "../../atoms/button/index.js";
+import { cssClass, themeGet } from "../../utils/index.js";
+import { DropDownItemAction } from "../../molecules/drop-down/index.js";
+export const BUTTON_IN_GROUP_CLASS_NAME = cssClass('ButtonGroupItem');
+export const buttonMargin = props => {
+  const {
+    size
+  } = props;
+  const margin = size === 'sm' ? 'md' : 'lg';
+  return css`
+    & > .${BUTTON_IN_GROUP_CLASS_NAME} {
+      margin-right: ${themeGet('space', margin)};
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  `;
+};
+export const hasHandler = props => {
+  if (!props.onClick && !props.href) {
+    return css`
+      &&& {
+        cursor: default;
+      }
+    `;
+  }
+  return '';
+};
+export const hasLabel = props => {
+  if (!props.hasLabel) {
+    return css`
+      border: none;
+      padding-left: ${themeGet('space', 'md')};
+      padding-right: ${themeGet('space', 'md')};
+      & > .${cssClass('Icon')} {
+        margin-right: 0;
+      }
+    `;
+  }
+  return '';
+};
+export const StyledSingleButton = styled(Button)`
+  ${hasLabel};
+  ${hasHandler};
+`;
+export const StyledDropDownItemAction = styled(DropDownItemAction)`
+  ${hasLabel};
+`;
+export const StyledButtonGroup = styled(Box)`
+  ${buttonMargin};
+`;

package/build/organisms/button-group/button-group.types.js

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

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

@@ -0,0 +1,25 @@
+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 { DropDown, DropDownMenu, DropDownTrigger } from "../../molecules/drop-down/index.js";
+import { SingleButtonInGroup } from "./single-button-in-group.js";
+import { DropDownItemWithButtons } from "./drop-down-item-with-buttons.js";
+export const ButtonInGroup = props => {
+  const {
+    buttons,
+    className,
+    ...buttonProps
+  } = props;
+  if (buttons && buttons.length) {
+    return /*#__PURE__*/React.createElement(DropDown, {
+      stick: "right",
+      className: className
+    }, /*#__PURE__*/React.createElement(DropDownTrigger, null, /*#__PURE__*/React.createElement(SingleButtonInGroup, props)), /*#__PURE__*/React.createElement(DropDownMenu, null, buttons.map(button => /*#__PURE__*/React.createElement(DropDownItemWithButtons, _extends({}, button, {
+      key: `${button.label}-${button.icon}`
+    })))));
+  }
+  return /*#__PURE__*/React.createElement(SingleButtonInGroup, _extends({}, buttonProps, {
+    className: className
+  }));
+};
+ButtonInGroup.displayName = 'ButtonInGroup';
+export default ButtonInGroup;

package/build/organisms/button-group/drop-down-item-with-buttons.js

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

package/build/organisms/button-group/index.js

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