@onesy/ui-react 1.0.0

package/esm/RoundProgress/RoundProgress.js

@@ -0,0 +1,232 @@
+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", "version", "value", "noShrink", "thickness", "rounded", "pathProps", "pathBackgroundProps", "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 { staticClassName } from '../utils';
+const noShrinkStrokeDashOffset = 194;
+const useStyle = styleMethod(theme => ({
+  '@keyframes spin': {
+    '0%': {
+      transform: 'rotate(0deg)'
+    },
+    '100%': {
+      transform: 'rotate(360deg)'
+    }
+  },
+  '@keyframes shrink': {
+    '0%': {
+      strokeDashoffset: '240px'
+    },
+    '50%': {
+      strokeDashoffset: `${noShrinkStrokeDashOffset}px`,
+      transform: 'rotate(134deg)'
+    },
+    '100%': {
+      strokeDashoffset: '240px',
+      transform: 'rotate(360deg)'
+    }
+  },
+  root: {
+    display: 'inline-flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    pointerEvents: 'none',
+    fontSize: '3rem'
+  },
+  // Version
+  version_indeterminate: {
+    animation: `$spin 1.4s linear infinite`
+  },
+  version_determinate: {
+    transform: 'rotate(-90deg)'
+  },
+  // Size
+  size_extra_small: {
+    fontSize: '1rem'
+  },
+  size_small: {
+    fontSize: '1.5rem'
+  },
+  size_regular: {
+    fontSize: '3rem'
+  },
+  size_large: {
+    fontSize: '3.5rem'
+  },
+  // Color
+  color_default: {
+    color: theme.palette.text.default.primary
+  },
+  color_neutral: {
+    color: theme.palette.color.neutral.main
+  },
+  color_primary: {
+    color: theme.palette.color.primary.main
+  },
+  color_secondary: {
+    color: theme.palette.color.secondary.main
+  },
+  color_tertiary: {
+    color: theme.palette.color.tertiary.main
+  },
+  color_quaternary: {
+    color: theme.palette.color.quaternary.main
+  },
+  color_info: {
+    color: theme.palette.color.info.main
+  },
+  color_success: {
+    color: theme.palette.color.success.main
+  },
+  color_warning: {
+    color: theme.palette.color.warning.main
+  },
+  color_error: {
+    color: theme.palette.color.error.main
+  },
+  // Tonal
+  tonal_color_neutral: {
+    color: theme.methods.palette.color.value('neutral', 50)
+  },
+  tonal_color_primary: {
+    color: theme.methods.palette.color.value('primary', 50)
+  },
+  tonal_color_secondary: {
+    color: theme.methods.palette.color.value('secondary', 50)
+  },
+  tonal_color_tertiary: {
+    color: theme.methods.palette.color.value('tertiary', 50)
+  },
+  tonal_color_quaternary: {
+    color: theme.methods.palette.color.value('quaternary', 50)
+  },
+  tonal_color_info: {
+    color: theme.methods.palette.color.value('info', 50)
+  },
+  tonal_color_success: {
+    color: theme.methods.palette.color.value('success', 50)
+  },
+  tonal_color_warning: {
+    color: theme.methods.palette.color.value('warning', 50)
+  },
+  tonal_color_error: {
+    color: theme.methods.palette.color.value('error', 50)
+  },
+  svg: {
+    width: '1em',
+    height: '1em',
+    color: 'inherit',
+    stroke: 'currentcolor'
+  },
+  path: {
+    strokeLinecap: 'square',
+    transformOrigin: 'center',
+    strokeDasharray: '240px',
+    strokeDashoffset: '0px'
+  },
+  // Version
+  path_indeterminate: {
+    animation: `$shrink 1.4s ease-in-out infinite`
+  },
+  path_indeterminate_noShrink: {
+    strokeDashoffset: `${noShrinkStrokeDashOffset}px`,
+    animation: 'none'
+  },
+  path_determinate: {
+    strokeDasharray: '101',
+    strokeDashoffset: '0',
+    transition: theme.methods.transitions.make('stroke-dashoffset')
+  },
+  pathBackground: {
+    strokeLinecap: 'square',
+    strokeDasharray: '240px',
+    strokeDashoffset: '0px',
+    stroke: 'transparent'
+  }
+}), {
+  name: 'onesy-RoundProgress'
+});
+const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundProgress?.props?.default), props_), [props_]);
+  const {
+      tonal = true,
+      color = 'primary',
+      size = 'regular',
+      version = 'indeterminate',
+      value,
+      noShrink,
+      thickness = 2,
+      rounded: rounded_ = true,
+      pathProps = {},
+      pathBackgroundProps,
+      className,
+      style,
+      children
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  let rounded = rounded_;
+  const styles = {
+    root: {},
+    circle: {}
+  };
+  if (!classes[`size_${size}`]) styles.root.fontSize = is('number', size) ? `${size}px` : size;
+  if (!classes[`color_${color}`]) {
+    styles.root.color = color;
+    if (tonal) {
+      const palette = theme.methods.color(color);
+      styles.root.color = theme.methods.palette.color.value(undefined, 50, true, palette);
+    }
+  }
+  if (version === 'determinate') {
+    rounded = false;
+    pathProps['pathLength'] = 100;
+    styles.circle.strokeDashoffset = 101 - value;
+
+    // 0%
+    if (styles.circle.strokeDashoffset === 1) styles.circle.strokeDashoffset = 0;
+    other['aria-valuenow'] = value;
+    other['aria-valuemin'] = 0;
+    other['aria-valuemax'] = 100;
+    other['aria-valuetext'] = `${value}%`;
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    ref: ref,
+    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-root', `onesy-RoundedProgress-version-${version}`, `onesy-RoundedProgress-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`color_${color}`], classes[`version_${version}`], tonal && classes[`tonal_color_${color}`]])
+  }, /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 24 24",
+    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-svg'], classes.svg]),
+    style: _objectSpread(_objectSpread({}, styles.root), style)
+  }, other), /*#__PURE__*/React.createElement("circle", _extends({
+    fill: "none",
+    strokeWidth: thickness,
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }, !rounded && {
+    strokeLinecap: 'butt'
+  }, pathBackgroundProps, {
+    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-path-background'], pathBackgroundProps?.className, classes.pathBackground, classes[`path_${version}`]])
+  })), /*#__PURE__*/React.createElement("circle", _extends({
+    fill: "none",
+    strokeWidth: thickness,
+    cx: "12",
+    cy: "12",
+    r: "10"
+  }, !rounded && {
+    strokeLinecap: 'butt'
+  }, pathProps, {
+    className: classNames([staticClassName('RoundedProgress', theme) && ['onesy-RoundedProgress-path'], pathProps?.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
+    style: _objectSpread(_objectSpread({}, styles.circle), pathProps?.style)
+  }))), children);
+});
+RoundProgress.displayName = 'onesy-RoundProgress';
+export default RoundProgress;

package/esm/RoundProgress/index.js

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

package/esm/ScatterChart/ScatterChart.js

@@ -0,0 +1,40 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+const _excluded = ["values", "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 { is } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import ChartElement from '../Chart';
+import ScatterChartItemElement from '../ScatterChartItem';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {}
+}), {
+  name: 'onesy-ScatterChart'
+});
+const ScatterChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChart?.props?.default), props_), [props_]);
+  const Chart = React.useMemo(() => theme?.elements?.Chart || ChartElement, [theme]);
+  const ScatterChartItem = React.useMemo(() => theme?.elements?.ScatterChartItem || ScatterChartItemElement, [theme]);
+  const {
+      values,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  return /*#__PURE__*/React.createElement(Chart, _extends({
+    ref: ref,
+    values: values,
+    className: classNames([staticClassName('ScatterChart', theme) && ['onesy-ScatterChart-root'], className, classes.root])
+  }, other), is('array', values) && values.map((item, index) => /*#__PURE__*/React.createElement(ScatterChartItem, _extends({
+    key: index
+  }, item))));
+});
+ScatterChart.displayName = 'onesy-ScatterChart';
+export default ScatterChart;

package/esm/ScatterChart/index.js

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

package/esm/ScatterChartItem/ScatterChartItem.js

@@ -0,0 +1,197 @@
+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", "name", "values", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "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 { is, percentageFromValueWithinRange, unique, valueFromPercentageWithinRange } from '@onesy/utils';
+import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
+import PathElement from '../Path';
+import LineElement from '../Line';
+import TypeElement from '../Type';
+import useMediaQuery from '../useMediaQuery';
+import { staticClassName, valueBreakpoints } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {},
+  legend_item: {
+    userSelect: 'none'
+  },
+  legend_icon: {
+    width: '8px',
+    height: '8px',
+    borderRadius: theme.methods.shape.radius.value(40, 'px')
+  }
+}), {
+  name: 'onesy-ScatterChartItem'
+});
+const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChartItem?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Path = React.useMemo(() => theme?.elements?.Path || PathElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      name,
+      values,
+      refs: refs_,
+      rects,
+      updateDefs,
+      updateLegend,
+      minMax,
+      animate: animate_,
+      animateTimeout: animateTimeout_,
+      PathProps,
+      BackgroundProps,
+      BorderProps,
+      LegendItemProps,
+      className
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const refs = {
+    minMax: React.useRef(undefined),
+    path: React.useRef(undefined),
+    theme: React.useRef(undefined),
+    pathStyle: React.useRef({}),
+    animate: React.useRef(undefined),
+    animateTimeout: React.useRef(),
+    init: React.useRef(undefined)
+  };
+  const keys = React.useMemo(() => {
+    const result = [];
+    const items = [animate_, animateTimeout_];
+    items.forEach(item => {
+      if (is('object', item)) Object.keys(item).filter(key => theme.breakpoints.media[key]).forEach(key => result.push(key));
+    });
+    return unique(result);
+  }, [animate_, animateTimeout_]);
+  const breakpoints = {};
+  keys.forEach(key => {
+    breakpoints[key] = useMediaQuery(theme.breakpoints.media[key], {
+      element: refs.path.current
+    });
+  });
+  const animate = valueBreakpoints(animate_, true, breakpoints, theme);
+  const animateTimeout = valueBreakpoints(animateTimeout_, 140, breakpoints, theme);
+  const [value, setValue] = React.useState();
+  const [init, setInit] = React.useState();
+  refs.theme.current = theme;
+  refs.animate.current = animate;
+  refs.animateTimeout.current = animateTimeout;
+  refs.init.current = init;
+  const LegendItem = React.useCallback(() => {
+    return /*#__PURE__*/React.createElement(Line, _extends({
+      gap: 1,
+      direction: "row",
+      align: "center"
+    }, LegendItemProps, {
+      className: classNames([staticClassName('ScatterChartItem', theme) && ['onesy-ScatterChartItem-legend-item'], LegendItemProps?.className, classes.legend_item])
+    }), /*#__PURE__*/React.createElement("span", {
+      className: classNames([staticClassName('ScatterChartItem', theme) && ['onesy-ScatterChartItem-legend-icon'], classes.legend_icon]),
+      style: {
+        background: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']
+      }
+    }), /*#__PURE__*/React.createElement(Type, {
+      version: "b3"
+    }, name));
+  }, [theme]);
+  const make = () => {
+    // Make values into x, y, coordinates
+    // normalized in rect width, height values
+
+    // invert y so 0, 0 is at bottom left
+    if (rects?.wrapper && values) {
+      const {
+        width,
+        height
+      } = rects.wrapper;
+      const values_ = values
+      // Sort for x from smallest to largest
+      .sort((a, b) => a[0] - b[0]).map(itemValue => {
+        const [x, y] = itemValue;
+        const values__ = {
+          x: percentageFromValueWithinRange(x, minMax.min.x, minMax.max.x),
+          y: percentageFromValueWithinRange(y, minMax.min.y, minMax.max.y)
+        };
+        values__.x = valueFromPercentageWithinRange(values__.x, 0, width);
+        values__.y = valueFromPercentageWithinRange(values__.y, 0, height);
+        return [values__.x, height - values__.y].map(item_ => Math.abs(item_));
+      });
+      const element = /*#__PURE__*/React.createElement("g", {
+        ref: refs.path
+      }, values_.map((item, index) => /*#__PURE__*/React.createElement(Path, _extends({
+        key: index,
+        cx: item[0],
+        cy: item[1],
+        r: 4,
+        fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
+        stroke: "none"
+      }, PathProps, {
+        Component: "circle",
+        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
+          opacity: 0,
+          transform: 'scale(0)'
+        }), {}, {
+          transformBox: 'fill-box',
+          transformOrigin: 'center'
+        }, refs.pathStyle.current)
+      }))));
+
+      // Legend item
+      if (is('function', updateLegend)) {
+        updateLegend(previous => {
+          const newValues = [...(previous || [])];
+          if (!newValues.find(itemLegend => itemLegend.item?.name === name)) {
+            newValues.push({
+              item: {
+                name,
+                values
+              },
+              element: /*#__PURE__*/React.createElement(LegendItem, null)
+            });
+          }
+          return newValues;
+        });
+      }
+
+      // Value
+      setValue(element);
+    }
+  };
+  const initMethod = React.useCallback(() => {
+    if (animate) {
+      if (!init) {
+        refs.pathStyle.current = {
+          transition: theme.methods.transitions.make(['transform', 'opacity'], {
+            timing_function: 'decelerated'
+          })
+        };
+        setInit(true);
+        setTimeout(() => {
+          refs.pathStyle.current = _objectSpread(_objectSpread({}, refs.pathStyle.current), {}, {
+            opacity: 1,
+            transform: 'scale(1)'
+          });
+          setInit('animated');
+        }, refs.animateTimeout.current);
+      }
+    }
+  }, [init, animate]);
+  React.useEffect(() => {
+    make();
+    initMethod();
+  }, [values, theme, animate, init]);
+  React.useEffect(() => {
+    make();
+  }, [rects?.wrapper]);
+  return value && /*#__PURE__*/React.cloneElement(value, _objectSpread({
+    className
+  }, other));
+});
+ScatterChartItem.displayName = 'onesy-ScatterChartItem';
+export default ScatterChartItem;

package/esm/ScatterChartItem/index.js

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