@onesy/ui-react 1.0.0

package/esm/Links/Links.js

@@ -0,0 +1,241 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["name", "short_description", "cover", "profile", "links", "share", "start", "end", "IconMore", "IconShare", "ShareProps", "ItemShareProps", "IconButtonProps", "IconProps", "NameProps", "ShortDescriptionProps", "LinkProps", "LinkTypeProps", "className"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { textToInnerHTML } from '@onesy/utils';
+import { classNames, style, useOnesyTheme } from '@onesy/style-react';
+import IconMaterialShare from '@amaui/icons-material-rounded-react/IconMaterialShareW100';
+import IconMaterialMoreVert from '@amaui/icons-material-rounded-react/IconMaterialMoreVertW100';
+import SectionElement from '../Section';
+import MenuElement from '../Menu';
+import ShareElement from '../Share';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import ButtonElement from '../Button';
+import MenuItemElement from '../MenuItem';
+import IconButtonElement from '../IconButton';
+import { useConfirm } from '../Confirm';
+import { staticClassName } from '../utils';
+const useStyle = style(theme => ({
+  root: {
+    padding: `${theme.methods.space.value(5, 'px')} ${theme.methods.space.value(3, 'px')}`
+  },
+  wrapper: {
+    maxWidth: '1024px'
+  },
+  profile: {
+    width: '140px',
+    height: '140px',
+    borderRadius: theme.methods.shape.radius.value(40, 'px'),
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    border: `4px solid ${theme.palette.light ? theme.palette.color.primary[99] : theme.palette.color.primary[5]}`,
+    cursor: 'default',
+    userSelect: 'none'
+  },
+  cover: {
+    height: '100vh',
+    maxHeight: '274px',
+    borderRadius: theme.methods.shape.radius.value(5, 'px'),
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+    backgroundRepeat: 'no-repeat',
+    cursor: 'default',
+    userSelect: 'none'
+  },
+  name: {
+    wordBreak: 'break-word'
+  },
+  summary: {
+    wordBreak: 'break-word',
+    maxWidth: '540px'
+  },
+  links: {
+    marginTop: '40px',
+    padding: `0 ${theme.methods.space.value(3, 'px')}`
+  },
+  linkWrapper: {
+    maxWidth: '740px'
+  },
+  link: {
+    '&.onesy-Button-root': {
+      whiteSpace: 'normal',
+      wordBreak: 'break-word',
+      flex: '1 1 auto !important'
+    }
+  },
+  more: {
+    flex: '0 0 auto'
+  }
+}), {
+  name: 'onesy-Links'
+});
+const Element = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLinks?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Section = React.useMemo(() => theme?.elements?.Section || SectionElement, [theme]);
+  const Menu = React.useMemo(() => theme?.elements?.Menu || MenuElement, [theme]);
+  const Share = React.useMemo(() => theme?.elements?.Share || ShareElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const Button = React.useMemo(() => theme?.elements?.Button || ButtonElement, [theme]);
+  const MenuItem = React.useMemo(() => theme?.elements?.MenuItem || MenuItemElement, [theme]);
+  const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
+  const {
+    classes
+  } = useStyle();
+  const {
+      name,
+      short_description,
+      cover,
+      profile,
+      links,
+      share = true,
+      start,
+      end,
+      IconMore = IconMaterialMoreVert,
+      IconShare = IconMaterialShare,
+      ShareProps,
+      ItemShareProps,
+      IconButtonProps,
+      IconProps,
+      NameProps,
+      ShortDescriptionProps,
+      LinkProps,
+      LinkTypeProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const confirm = useConfirm();
+  const onOpenLink = React.useCallback(async item => {
+    const confirmed = item.sensitivity && !['none'].includes(item.sensitivity) ? await confirm.open({
+      name: 'Sensitive URL',
+      description: `This is URL might contain sensitive information, confirm you are 18+ to continue.`
+    }) : true;
+    if (confirmed) {
+      window.open(item.url, 'blank');
+    }
+  }, []);
+  return /*#__PURE__*/React.createElement(Section, _extends({
+    ref: ref,
+    gap: 2,
+    align: "center",
+    maxWidth: false,
+    padding: false,
+    fullWidth: true,
+    className: classNames([staticClassName('Links', theme) && ['onesy-Links-root'], className, classes.root])
+  }, other), start, /*#__PURE__*/React.createElement(Line, {
+    gap: 1.4,
+    fullWidth: true,
+    className: classes.wrapper
+  }, (profile || cover) && /*#__PURE__*/React.createElement(Line, {
+    gap: 0,
+    align: "center",
+    fullWidth: true
+  }, cover && /*#__PURE__*/React.createElement(Line, {
+    fullWidth: true,
+    className: classes.cover,
+    style: {
+      backgroundImage: `url('${cover?.url || cover?.urlSmall}')`
+    }
+  }), profile && /*#__PURE__*/React.createElement(Line, {
+    fullWidth: true,
+    className: classes.profile,
+    style: {
+      marginTop: cover ? -71 : 0,
+      backgroundImage: `url('${profile?.urlSmall || profile?.url}')`
+    }
+  })), (name || short_description) && /*#__PURE__*/React.createElement(Line, {
+    gap: 0.5,
+    align: "center",
+    fullWidth: true
+  }, name && /*#__PURE__*/React.createElement(Type, _extends({
+    version: "h1",
+    weight: 400,
+    align: "center",
+    fullWidth: true,
+    dangerouslySetInnerHTML: {
+      __html: textToInnerHTML(name)
+    }
+  }, NameProps, {
+    className: classNames([staticClassName('Links', theme) && ['onesy-Links-name'], NameProps?.className, classes.name])
+  })), short_description && /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b1",
+    weight: 300,
+    align: "center",
+    fullWidth: true,
+    dangerouslySetInnerHTML: {
+      __html: textToInnerHTML(short_description)
+    }
+  }, ShortDescriptionProps, {
+    className: classNames([staticClassName('Links', theme) && ['onesy-Links-short-description'], ShortDescriptionProps?.className, classes.summary])
+  }))), !!links?.length && /*#__PURE__*/React.createElement(Line, {
+    gap: 1.4,
+    align: "center",
+    fullWidth: true,
+    className: classes.links
+  }, links.map((item, index) => /*#__PURE__*/React.createElement(Line, {
+    key: index,
+    gap: 1,
+    direction: "row",
+    align: "center",
+    justify: "center",
+    fullWidth: true,
+    className: classes.linkWrapper
+  }, /*#__PURE__*/React.createElement(Button, _extends({
+    tonal: true
+  }, item.props, {
+    version: [undefined, 'default'].includes(item.version) ? 'outlined' : 'filled',
+    elevation: item.version === 'primary',
+    color: item.version === 'primary' ? 'primary' : item.version === 'secondary' ? 'secondary' : 'default',
+    fullWidth: true,
+    onClick: () => onOpenLink(item)
+  }, LinkProps, {
+    className: classNames([`onesy-Links-link-version-${item.version}`, LinkProps?.className, item.props?.className, classes.link])
+  }), /*#__PURE__*/React.createElement(Type, _extends({
+    version: "b1",
+    weight: 300
+  }, LinkTypeProps), item.name || 'Link')), /*#__PURE__*/React.createElement(Menu, {
+    menuItems: [/*#__PURE__*/React.createElement(MenuItem, {
+      start: /*#__PURE__*/React.createElement(IconShare, _extends({
+        size: "small"
+      }, IconProps)),
+      startAlign: "center",
+      primary: /*#__PURE__*/React.createElement(Type, {
+        version: "b3"
+      }, "Share"),
+      menu: item.share ? /*#__PURE__*/React.createElement(Share, _extends({
+        version: "menu-items",
+        name: item.name,
+        url: item.url,
+        exclude: ['print']
+      }, ItemShareProps, {
+        ListItemProps: _objectSpread({
+          size: 'small',
+          noBackground: true
+        }, ItemShareProps?.ListItemProps)
+      })) : undefined,
+      MenuProps: {
+        ListProps: {
+          noChildrenTransform: true
+        }
+      },
+      size: "small",
+      button: true,
+      disabled: !item.share
+    })]
+  }, /*#__PURE__*/React.createElement(IconButton, _extends({
+    size: "regular",
+    disabled: !item.share
+  }, IconButtonProps, {
+    className: classNames([staticClassName('Links', theme) && ['onesy-Links-more'], IconButtonProps?.className, classes.more])
+  }), /*#__PURE__*/React.createElement(IconMore, _extends({
+    size: "large"
+  }, IconProps)))))))), share && /*#__PURE__*/React.createElement(Share, ShareProps), end);
+});
+Element.displayName = 'onesy-Links';
+export default Element;

package/esm/Links/index.js

@@ -0,0 +1 @@
+export { default } from './Links';

package/esm/List/List.js

@@ -0,0 +1,137 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["tonal", "color", "size", "elevation", "menu", "menuOpen", "noMaxWidth", "indent", "paddingHorizontal", "paddingVertical", "noBackground", "noChildrenTransform", "onMenuDesktopClose", "SurfaceProps", "Component", "className", "style", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import SurfaceElement from '../Surface';
+import LineElement from '../Line';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    // Reset
+    margin: '0',
+    listStyle: 'none',
+    width: '100%',
+    position: 'relative',
+    borderRadius: `${theme.shape.radius.unit / 2}px`
+  },
+  padding_vertical_both: {
+    paddingBlock: theme.methods.space.value('sm', 'px')
+  },
+  padding_vertical_start: {
+    paddingBlockStart: theme.methods.space.value('sm', 'px')
+  },
+  padding_vertical_end: {
+    paddingBlockEnd: theme.methods.space.value('sm', 'px')
+  },
+  padding_vertical_none: {
+    paddingBlock: '0'
+  },
+  padding_horizontal_both: {
+    paddingInline: theme.methods.space.value('rg', 'px')
+  },
+  padding_horizontal_start: {
+    paddingInlineStart: theme.methods.space.value('rg', 'px')
+  },
+  padding_horizontal_end: {
+    paddingInlineEnd: theme.methods.space.value('rg', 'px')
+  },
+  padding_horizontal_none: {
+    paddingInline: '0'
+  },
+  menu: {},
+  noMaxWidth: {
+    maxWidth: 'unset'
+  },
+  noBackground: {
+    '&.onesy-Surface-root': {
+      background: 'none'
+    }
+  }
+}), {
+  name: 'onesy-List'
+});
+const List = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyList?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Surface = React.useMemo(() => theme?.elements?.Surface || SurfaceElement, [theme]);
+  const {
+      tonal = true,
+      color = 'themed',
+      size: size_,
+      elevation = props.menu && theme.palette.light ? 2 : 0,
+      menu,
+      menuOpen,
+      noMaxWidth,
+      indent,
+      paddingHorizontal = 'none',
+      paddingVertical = 'both',
+      noBackground,
+      noChildrenTransform,
+      onMenuDesktopClose,
+      SurfaceProps,
+      Component = 'ul',
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    root: React.useRef(undefined)
+  };
+  const mobile = useMediaQuery('(max-width: 767px)', {
+    element: refs.root.current
+  });
+  const size = size_ !== undefined ? size_ : mobile ? 'small' : 'regular';
+  const styles = {
+    root: {}
+  };
+  if (indent !== undefined) styles.root.paddingInlineStart = `${indent * theme.space.unit}px`;
+  return /*#__PURE__*/React.createElement(Surface, _extends({
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    },
+    tonal: tonal,
+    color: color,
+    elevation: elevation,
+    gap: 0,
+    direction: "column",
+    align: "flex-start",
+    role: "listbox",
+    Component: Line,
+    AdditionalProps: {
+      Component
+    }
+  }, SurfaceProps, {
+    className: classNames([staticClassName('List', theme) && ['onesy-List-root', `onesy-List-size-${size}`], SurfaceProps?.className, className, classes.root, classes[`padding_vertical_${paddingVertical}`], classes[`padding_horizontal_${paddingHorizontal}`], menu && classes.menu, noMaxWidth && classes.noMaxWidth, noBackground && classes.noBackground]),
+    style: _objectSpread(_objectSpread({}, style), styles.root)
+  }), noChildrenTransform ? children : React.Children.toArray(children).map((item, index) => {
+    return /*#__PURE__*/React.cloneElement(item, _objectSpread(_objectSpread(_objectSpread({
+      key: index,
+      menuItem: menu,
+      menuOpen,
+      tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+      color: item.props.color !== undefined ? item.props.color : color,
+      size: item.props.size !== undefined ? item.props.size : size
+    }, other), item.props), {}, {
+      onClick: event => {
+        if (is('function', onMenuDesktopClose) && item.props.menuCloseOnClick) onMenuDesktopClose();
+        if (is('function', item.props.onClick)) item.props.onClick(event);
+      }
+    }));
+  }));
+});
+List.displayName = 'onesy-List';
+export default List;

package/esm/List/index.js

@@ -0,0 +1 @@
+export { default } from './List';