@onesy/ui-react 1.0.0

package/esm/Keyframes/Keyframes.js

@@ -0,0 +1,183 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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, wait } from '@onesy/utils';
+import OnesySubscription from '@onesy/subscription';
+import { classNames, useOnesyTheme } from '@onesy/style-react';
+import KeyframesContext from './Context';
+import { reflow } from '../utils';
+const Keyframes = props_ => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyKeyframes?.props?.default), props_), [props_]);
+  const {
+    ref,
+    append,
+    update,
+    timeout: timeout_,
+    appendStatusPost,
+    add: add_,
+    runOnEnter,
+    removeOnEnd,
+    keyframes,
+    prefix,
+    onKeyframes,
+    onAppended,
+    onAdd,
+    onAdding,
+    onAdded,
+    onRemoved,
+    className,
+    children
+  } = props;
+  const [init, setInit] = React.useState(false);
+  const [status, setStatus] = React.useState(() => {
+    let statusNew = '';
+    if (append) statusNew = 'appended';
+    return statusNew;
+  });
+  const subs = React.useRef({
+    status: new OnesySubscription()
+  });
+  const refs = {
+    root: React.useRef(undefined),
+    status: React.useRef(status)
+  };
+  React.useEffect(() => {
+    initMethod();
+  }, []);
+
+  // Anytime update updates
+  // keyframes are ran
+  // meaning you can update
+  // keyframes between reruns
+  // and have any version of
+  // animation based on those points
+  // ie. Switch ui on and off animation
+  React.useEffect(() => {
+    if (init) run();
+  }, [update]);
+  const initMethod = async () => {
+    // Appended
+    if (status === 'appended') updateStatus(appendStatusPost);
+
+    // Add
+    if (add_ || status === 'add') await add();
+
+    // Run the method
+    // to run the keyframes
+    if (runOnEnter) await run();
+
+    // Init
+    setInit(true);
+  };
+  const run = async () => {
+    // Run all keyframes
+    if (is('array', keyframes)) for (const keyframe of keyframes) await runKeyframe(keyframe);
+    if (removeOnEnd) {
+      // So exited status has
+      // enough time to apply some value
+      setStatus('removed');
+
+      // Subscriptions
+      subs.current.status.emit('removed');
+    }
+  };
+  const runKeyframe = async value_ => {
+    if (value_) {
+      const {
+        name,
+        timeout: timeout__
+      } = value_;
+      updateStatus(name);
+      await wait(timeout__ || 0);
+    }
+  };
+  const timeout = async status_ => {
+    let duration = timeout_;
+    if (is('string', timeout_) && theme.transitions.duration[timeout_] !== undefined) duration = theme.transitions.duration[timeout_];
+    if (is('object', timeout_)) duration = timeout_[status_] !== undefined ? timeout_[status_] : timeout_.default;
+    if (!is('number', duration)) duration = theme.transitions.duration.rg;
+    await wait(duration);
+  };
+  const add = async () => {
+    updateStatus('add');
+
+    // Reflow
+    reflow(refs.root.current);
+
+    // Add adding class for animation
+    setTimeout(() => updateStatus('adding'));
+    await timeout('add');
+    updateStatus('added');
+    await wait(0);
+  };
+  const updateStatus = function () {
+    let status_ = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : status;
+    // Update
+    setStatus(status_);
+
+    // Subscriptions
+    subs.current.status.emit(status_);
+    switch (status_) {
+      case 'appended':
+        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if (is('function', onAppended)) onAppended(refs.root.current);
+        break;
+      case 'add':
+        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if (is('function', onAdd)) onAdd(refs.root.current);
+        break;
+      case 'adding':
+        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if (is('function', onAdding)) onAdding(refs.root.current);
+        break;
+      case 'added':
+        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if (is('function', onAdded)) onAdded(refs.root.current);
+        break;
+      case 'removed':
+        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        if (is('function', onRemoved)) onRemoved(refs.root.current);
+        break;
+      default:
+        if (is('function', onKeyframes)) onKeyframes(refs.root.current, status_);
+        break;
+    }
+
+    // Add className
+    if (className && is('element', refs.root.current)) {
+      let className_ = classNames([refs.root.current.className.split(' ')]);
+
+      // Remove all previous state classes
+      className_ = className_.replace(new RegExp(`${prefix || ''}(add)(ed|ing)?`, 'g'), '');
+
+      // Remove all previous keyframes classes
+      if (is('array', keyframes)) {
+        const regex = new RegExp(`${keyframes.reduce((result, item, index) => result += `${index !== 0 ? '|' : ''}${item}`, '')}`, 'g');
+        className_ = className_.replace(regex, '');
+      }
+
+      // Add
+      className_ += ` ${prefix || ''}${status_}`;
+      className_ = className_.replace(/ +/g, ' ').trim();
+      refs.root.current.className = className_;
+    }
+  };
+  if (status === 'removed') return null;
+  const value = {
+    status
+  };
+  return /*#__PURE__*/React.createElement(KeyframesContext.Provider, {
+    value: value
+  }, is('function', children) ? children(status, refs.root) : /*#__PURE__*/React.cloneElement(children, {
+    ref: item => {
+      if (ref) {
+        if (is('function', ref)) ref(item);else ref.current = item;
+      }
+      refs.root.current = item;
+    }
+  }));
+};
+Keyframes.displayName = 'onesy-Keyframes';
+export default Keyframes;

package/esm/Keyframes/index.js

@@ -0,0 +1,4 @@
+export { default as KeyframesContext } from './Context';
+export { default as useKeyframes } from './useKeyframes';
+export * from './Keyframes';
+export { default } from './Keyframes';

package/esm/Keyframes/useKeyframes.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import KeyframesContext from './Context';
+export default function useKeyframes() {
+  const value = React.useContext(KeyframesContext);
+  return value;
+}

package/esm/Label/Label.js

@@ -0,0 +1,161 @@
+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", "colorUnchecked", "version", "position", "size", "input", "name", "label", "valueDefault", "checkedDefault", "checked", "onChange", "error", "helperText", "footer", "disabled", "LabelProps", "TypeProps", "TextProps", "Component", "className", "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 TypeElement from '../Type';
+import LineElement from '../Line';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {
+    cursor: 'pointer',
+    userSelect: 'none'
+  },
+  text_disabled: {
+    opacity: theme.palette.visual_contrast.default.opacity.disabled
+  },
+  error_color: {
+    color: [theme.palette.light ? theme.palette.color.error[40] : theme.palette.color.error[80], '!important']
+  },
+  footer: {
+    marginTop: '4px',
+    paddingInline: theme.methods.space.value(2, 'px')
+  },
+  footer_version_text: {
+    paddingInline: '0'
+  },
+  helperText: {
+    display: 'inline-flex',
+    color: theme.palette.text.default.secondary,
+    userSelect: 'none'
+  },
+  disabled: {
+    cursor: 'default',
+    pointerEvents: 'none'
+  }
+}), {
+  name: 'onesy-Label'
+});
+const Label = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLabel?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      tonal = true,
+      color,
+      colorUnchecked,
+      version,
+      position: position_,
+      size = 'regular',
+      input,
+      name,
+      label: label_,
+      valueDefault: valueDefault_,
+      checkedDefault: checkedDefault_,
+      checked: checked_,
+      onChange,
+      error,
+      helperText,
+      footer: footer_,
+      disabled,
+      LabelProps,
+      TypeProps,
+      TextProps,
+      Component = 'label',
+      className,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
+  const checked = checked_;
+  const [value, setValue] = React.useState((checkedDefault !== undefined ? checkedDefault : checked) || false);
+  const refs = {
+    value: React.useRef(undefined),
+    ids: {
+      label: React.useId()
+    }
+  };
+  refs.value.current = value;
+  const label = name !== undefined ? name : label_;
+  const onUpdate = (value__, event) => {
+    if (!disabled && event) {
+      // Inner controlled checkbox
+      if (!props.hasOwnProperty('checked')) setValue(event.target.checked);
+      if (is('function', onChange)) onChange(event.target.checked, event);
+    }
+  };
+  React.useEffect(() => {
+    if (checked !== undefined && checked !== refs.value.current) setValue(checked);
+  }, [checked]);
+  let position = position_;
+  const children = React.Children.toArray(children_);
+  const Input = input !== undefined ? input : children[0];
+  const Text = label !== undefined ? label : name !== undefined ? name : children.slice(1);
+  const inlineElement = ['checkbox', 'radio', 'switch'].some(item => Input?.type?.displayName?.toLowerCase().includes(item)) || Input?.type?.displayName === undefined;
+  let align = 'center';
+  const justify = 'center';
+  if (position === undefined) position = inlineElement ? 'start' : 'bottom';
+  if (!inlineElement && !['start', 'end'].includes(position)) align = 'flex-start';
+  const footer = footer_ || helperText;
+  let gap = size === 'small' ? 1 : size === 'regular' ? 1.5 : 2;
+  if (version === 'text') gap = size === 'small' ? 0.25 : size === 'regular' ? 0.5 : 0.75;
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 0,
+    direction: "column"
+  }, other), /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    gap: gap,
+    direction: ['top', 'bottom'].includes(position) ? position === 'bottom' ? 'column-reverse' : 'column' : position === 'end' ? 'row-reverse' : 'row',
+    align: align,
+    justify: justify,
+    role: "group",
+    "aria-labelledby": refs.ids.label,
+    "aria-disabled": disabled,
+    disabled: disabled,
+    Component: Component
+  }, LabelProps, {
+    className: classNames([staticClassName('Label', theme) && ['onesy-Label-root', `onesy-Label-version-${version}`, `onesy-Label-size-${size}`, disabled && `onesy-Label-disabled`], LabelProps?.className, className, classes.root, disabled && classes.disabled])
+  }), Input && /*#__PURE__*/React.cloneElement(Input, {
+    className: classNames([staticClassName('Label', theme) && ['onesy-Label-input'], classes.input]),
+    tonal: Input?.props?.tonal !== undefined ? Input.props.tonal : tonal,
+    color: Input?.props?.color !== undefined ? Input.props.color : color,
+    colorUnchecked: Input?.props?.colorUnchecked !== undefined ? Input.props.colorUnchecked : colorUnchecked,
+    version: Input?.props?.version !== undefined ? Input.props.version : version,
+    size: Input?.props?.size !== undefined ? Input.props.size : size,
+    onChange: onUpdate,
+    checked: value,
+    disabled
+  }), Text?.length === 1 && is('simple', Text[0]) ? /*#__PURE__*/React.createElement(Type, _extends({
+    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3',
+    id: refs.ids.label
+  }, TypeProps, TextProps, {
+    className: classNames([staticClassName('Label', theme) && ['onesy-Label-text'], TextProps?.className, TypeProps?.className, classes.text, disabled && classes.text_disabled])
+  }), Text[0]) : /*#__PURE__*/React.createElement(Line, _extends({
+    direction: "row",
+    id: refs.ids.label
+  }, TextProps, {
+    className: classNames([staticClassName('Label', theme) && ['onesy-Label-text-wrapper'], TextProps?.className])
+  }), Text?.map((item, index) => is('simple', item) ? /*#__PURE__*/React.createElement(Type, {
+    version: size === 'large' ? 'b1' : size === 'regular' ? 'b2' : 'b3'
+  }, item) : /*#__PURE__*/React.cloneElement(item, {
+    key: index
+  })))), footer && /*#__PURE__*/React.createElement(React.Fragment, null, helperText !== undefined && /*#__PURE__*/React.createElement(Line, {
+    gap: 2,
+    direction: "row",
+    justify: "space-between",
+    className: classNames([staticClassName('Label', theme) && ['onesy-Label-footer'], classes.footer])
+  }, helperText && /*#__PURE__*/React.createElement(Type, {
+    version: "b3",
+    className: classNames([staticClassName('Label', theme) && ['onesy-Label-helper-text', error && 'onesy-Label-error'], classes.helperText, error && classes.error_color])
+  }, helperText)), footer_));
+});
+Label.displayName = 'onesy-Label';
+export default Label;

package/esm/Label/index.js

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

package/esm/Labels/Labels.js

@@ -0,0 +1,114 @@
+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", "colorUnchecked", "version", "size", "name", "label", "direction", "align", "justify", "valueDefault", "checkedDefault", "value", "checked", "onChange", "disabled", "WrapperProps", "LabelProps", "Component", "className", "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 TypeElement from '../Type';
+import LineElement from '../Line';
+import { staticClassName } from '../utils';
+const useStyle = styleMethod(theme => ({
+  root: {},
+  label_disabled: {
+    opacity: theme.palette.visual_contrast.default.opacity.disabled
+  },
+  disabled: {
+    cursor: 'default',
+    userSelect: 'none'
+  }
+}), {
+  name: 'onesy-Labels'
+});
+const Labels = /*#__PURE__*/React.forwardRef((props_, ref) => {
+  const theme = useOnesyTheme();
+  const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyLabels?.props?.default), props_), [props_]);
+  const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
+  const Type = React.useMemo(() => theme?.elements?.Type || TypeElement, [theme]);
+  const {
+      tonal = true,
+      color = 'primary',
+      colorUnchecked,
+      version = 'text',
+      size = 'regular',
+      name,
+      label: label_,
+      direction = 'column',
+      align = 'center',
+      justify = 'center',
+      valueDefault: valueDefault_,
+      checkedDefault: checkedDefault_,
+      value: value_,
+      checked: checked_,
+      onChange,
+      disabled,
+      WrapperProps,
+      LabelProps,
+      Component = 'div',
+      className,
+      children: children_
+    } = props,
+    other = _objectWithoutProperties(props, _excluded);
+  const {
+    classes
+  } = useStyle();
+  const checkedDefault = valueDefault_ !== undefined ? valueDefault_ : checkedDefault_;
+  const checked = value_ !== undefined ? value_ : checked_;
+  const valueDefault__ = (checkedDefault !== undefined ? checkedDefault : value_) || [];
+  const [value, setValue] = React.useState(is('array', valueDefault__) ? valueDefault__ : [valueDefault__]);
+  const refs = {
+    value: React.useRef(undefined),
+    ids: {
+      label: React.useId()
+    }
+  };
+  refs.value.current = value;
+  const label = name !== undefined ? name : label_;
+  React.useEffect(() => {
+    if (checked !== undefined && checked !== refs.value.current) setValue(checked);
+  }, [checked]);
+  const children = React.Children.toArray(children_);
+  const onUpdate = React.useCallback(valueNew_ => {
+    const valueNew = valueNew_;
+    const value__ = [...refs.value.current];
+    const index = value__.findIndex(item => item === valueNew);
+    if (index > -1) value__.splice(index, 1);else value__.push(valueNew);
+    if (!props.hasOwnProperty('value')) setValue(value__);
+    if (is('function', onChange)) onChange(value__);
+  }, []);
+  return /*#__PURE__*/React.createElement(Line, _extends({
+    ref: ref,
+    gap: 1,
+    direction: direction,
+    align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start',
+    justify: justify,
+    role: "radiogroup",
+    "aria-labelledby": refs.ids.label,
+    Component: Component,
+    className: classNames([staticClassName('Labels', theme) && ['onesy-Labels-root', `onesy-Labels-version-${version}`, `onesy-Labels-size-${size}`, `onesy-Labels-version-${version}`, disabled && `onesy-Labels-disabled`], className, classes.root, disabled && classes.disabled])
+  }, other), label && /*#__PURE__*/React.createElement(Type, _extends({
+    version: size === 'regular' ? 'l2' : size === 'large' ? 'l1' : 'l3',
+    id: refs.ids.label
+  }, LabelProps, {
+    className: classNames([staticClassName('Labels', theme) && ['onesy-Labels-label'], LabelProps?.className, classes.label, disabled && classes.label_disabled])
+  }), label), /*#__PURE__*/React.createElement(Line, _extends({
+    gap: 1,
+    direction: direction,
+    align: props.align !== undefined ? props.align : props.direction === 'row' ? 'center' : 'flex-start',
+    justify: justify
+  }, WrapperProps), children.map((item, index) => (/*#__PURE__*/React.cloneElement(item, {
+    key: index,
+    checked: value.includes(item.props.value),
+    onChange: () => onUpdate(item.props.value),
+    tonal: item.props.tonal !== undefined ? item.props.tonal : tonal,
+    color: item.props.color !== undefined ? item.props.color : color,
+    colorUnchecked: item.props.colorUnchecked !== undefined ? item.props.colorUnchecked : colorUnchecked,
+    version: item.props.version !== undefined ? item.props.version : version,
+    size: item.props.size !== undefined ? item.props.size : size,
+    disabled: item.props.disabled !== undefined ? item.props.disabled : disabled
+  })))));
+});
+Labels.displayName = 'onesy-Labels';
+export default Labels;

package/esm/Labels/index.js

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