onekijs-ui 0.9.2 → 0.15.2

package/src/components/button/components/DropdownButtonComponent.tsx

@@ -0,0 +1,82 @@
+import React, { FC, useRef } from 'react';
+import Button from '..';
+import { useClickOutside } from '../../../utils/event';
+import { addClassname } from '../../../utils/style';
+import useDropdown from '../../dropdown/hooks/useDropdown';
+import TogglerIcon from '../../icon/TogglerIcon';
+import { DropDownButtonProps } from '../typings';
+
+const DropdownButtonComponent: FC<DropDownButtonProps> = ({
+  animationTimeout = 200,
+  attachDropdownToBody = false,
+  distance = 0,
+  placement = 'bottom',
+  className,
+  children,
+  listElement,
+  open,
+  skidding,
+  onClick,
+  onDrop,
+  onDropStart,
+  onDropping,
+  onDropDone,
+  onCollapse,
+  onCollapseStart,
+  onCollapseDone,
+  onCollapsing,
+  onUpdate,
+  widthModifier,
+  zIndex = 1000,
+  ...buttonProps
+}) => {
+  const classNames = addClassname('o-button-dropdown', className);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  const [Dropdown, triggerRef] = useDropdown();
+
+  useClickOutside(ref, () => onCollapse());
+
+  return (
+    <span ref={ref}>
+      <Button
+        {...buttonProps}
+        className={classNames}
+        onClick={onClick ? undefined : open ? onCollapse : onDrop}
+        ref={triggerRef}
+      >
+        <span className="o-button-dropdown-content" onClick={onClick}>
+          {children}
+        </span>
+        <span className="o-button-dropdown-icon">
+          <TogglerIcon
+            width="16px"
+            height="16px"
+            open={open}
+            closeArrowPosition="s"
+            openArrowPosition="n"
+            onClick={onClick ? (open ? onCollapse : onDrop) : undefined}
+          />
+        </span>
+      </Button>
+      <Dropdown
+        attachToBody={attachDropdownToBody}
+        skidding={skidding}
+        onUpdate={onUpdate}
+        onDropStart={onDropStart}
+        onDropping={onDropping}
+        onDropDone={onDropDone}
+        onCollapseStart={onCollapseStart}
+        widthModifier={widthModifier}
+        zIndex={zIndex}
+        open={open}
+        placement={placement}
+        animationTimeout={animationTimeout}
+      >
+        {listElement}
+      </Dropdown>
+    </span>
+  );
+};
+
+export default DropdownButtonComponent;

package/src/components/button/index.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import ButtonComponent from './component';
+import ButtonComponent from './components/ButtonComponent';
 import buttonStyle from './style';
 
 const Button = styled(ButtonComponent)`

package/src/components/button/style.ts

@@ -1,20 +1,96 @@
+import { get, ucfirst } from 'onekijs-framework';
 import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
 import { backgroundColor } from '../../styles/background';
-import { paddingX, paddingY } from '../../styles/spacing';
+import { borderColor, borderRadius, borderStyle, borderWidth } from '../../styles/border';
+import { display } from '../../styles/display';
+import { opacity } from '../../styles/effects';
+import { cursor, outline } from '../../styles/interactivity';
+import { position } from '../../styles/position';
+import { marginLeft, paddingLeft, paddingX, paddingY } from '../../styles/spacing';
 import { ComponentStyle } from '../../styles/typings';
-import { color, fontWeight } from '../../styles/typography';
+import {
+  color,
+  fontSize,
+  fontWeight,
+  letterSpacing,
+  lineHeight,
+  textOverflow,
+  textTransform,
+  whiteSpace,
+} from '../../styles/typography';
 import { ButtonProps } from './typings';
 
-const buttonStyle: ComponentStyle<ButtonProps> = ({ kind = 'primary', theme }) => {
-  const t = theme.button[kind];
+const getColor = (key: string, pattern: 'solid' | 'outline' | 'flat'): string => {
+  return `${key}${pattern === 'solid' ? '' : ucfirst(pattern)}`;
+};
+
+const buttonStyle: ComponentStyle<ButtonProps> = ({
+  kind = 'primary',
+  pattern = 'solid',
+  disabled,
+  IconComponent,
+  theme,
+}) => {
+  const t = theme.buttons[kind];
+  const bgColor = get(t, getColor('bgColor', pattern));
+  const hoverBgColor = get(t, getColor('hoverBgColor', pattern));
+  const fontColor = get(t, getColor('color', pattern));
+  const hoverFontColor = get(t, getColor('hoverColor', pattern));
+  const bColor = get(t, getColor('borderColor', pattern));
+  const hoverBorderColor = get(t, getColor('hoverBorderColor', pattern));
+
   return css`
-    ${backgroundColor(t.backgroundColor, {
-      hover: t.hoverBackgroundColor,
+    ${display('inline-flex')}
+    ${alignItems('center')}
+    ${backgroundColor(bgColor, {
+      hover: disabled ? bgColor : hoverBgColor,
+    })}
+    ${color(fontColor, {
+      hover: disabled ? fontColor : hoverFontColor,
     })}
-    ${color(t.color)}
-    ${fontWeight(t.fontWeight)}
     ${paddingX(t.paddingX)}
     ${paddingY(t.paddingY)}
+    ${borderRadius(t.borderRadius)}
+    ${borderStyle(t.borderStyle)}
+    ${borderWidth(t.borderWidth)}
+    ${borderColor(bColor, {
+      hover: disabled ? bColor : hoverBorderColor,
+    })}
+    ${cursor(disabled ? t.cursorDisabled : t.cursor)}
+    button {
+      ${cursor(disabled ? t.cursorDisabled : t.cursor)}
+      ${backgroundColor('inherit')}
+      ${color('inherit')}
+      ${fontWeight(t.fontWeight)}
+      ${whiteSpace(t.whiteSpace)}
+      ${textOverflow(t.textOverflow)}
+      ${textTransform(t.textTransform)}
+      ${letterSpacing(t.letterSpacing)}
+      ${lineHeight(t.lineHeight)}
+      ${fontSize(t.fontSize)}
+      ${opacity(disabled ? 0.6 : 1)}
+      ${marginLeft(IconComponent ? 'xs' : 'none')}
+      ${outline('none')}
+    }
+  `;
+};
+
+export const dropdownButtonStyle: ComponentStyle<ButtonProps> = () => {
+  return css`
+    ${cursor('pointer')}
+    ${display('inline-flex')}
+    ${position('relative')}
+    ${alignItems('center')}
+    button {
+      ${display('inline-flex')}
+      ${alignItems('center')}
+    }
+    .o-button-dropdown-icon {
+      ${paddingLeft('xs')}
+      ${display('inline-flex')}
+      ${alignItems('center')}
+    }
   `;
 };
 

package/src/components/button/typings.ts

@@ -1,5 +1,22 @@
-import { KindTheme } from '../../styles/typings';
+import { AnyFunction } from 'onekijs-framework';
+import { ReactNode } from 'react';
+import { ColorPropertyTheme } from '../../styles/typings';
+import { DropdownProps } from '../dropdown/typings';
 
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  kind?: KindTheme;
+  kind?: ColorPropertyTheme;
+  pattern?: 'solid' | 'outline' | 'flat';
+  IconComponent?: React.FC<ButtonProps>;
+  loading?: boolean;
+}
+
+export interface SubmitButtonProps extends ButtonProps {
+  showErrors?: boolean;
+}
+
+export interface DropDownButtonProps extends ButtonProps, DropdownProps {
+  attachDropdownToBody?: boolean;
+  listElement: ReactNode;
+  onDrop: AnyFunction;
+  onCollapse: AnyFunction;
 }

package/src/components/card/FormCard.tsx

@@ -0,0 +1,24 @@
+import { FCC, useForm, useFormDecorator, useFormMetadata } from 'onekijs-framework';
+import React from 'react';
+import Card from '.';
+import { FormCardProps } from './typings';
+
+const FormCard: FCC<FormCardProps> = ({ name, disabled, visible, ...cardProps }) => {
+  const decorator = useFormDecorator(name);
+  const form = useForm();
+  const metadata = useFormMetadata(decorator.name);
+
+  if (metadata.visible === false) {
+    return null;
+  }
+
+  return (
+    <Card
+      {...cardProps}
+      open={!metadata.disabled}
+      onToggle={() => (metadata.disabled ? form.enable(decorator.name) : form.disable(decorator.name))}
+    />
+  );
+};
+
+export default FormCard;

package/src/components/card/components/CardComponent.tsx

@@ -0,0 +1,83 @@
+import { FCC } from 'onekijs-framework';
+import React, { useState } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import { addClassname } from '../../../utils/style';
+import { CardProps } from '../typings';
+import CardTitle from './CardTitle';
+
+const CardComponent: FCC<CardProps> = ({
+  TitleComponent = CardTitle,
+  open = true,
+  className,
+  title,
+  animate = 150,
+  icon,
+  collapsable = true,
+  children,
+  onToggle,
+}) => {
+  const classNames = addClassname('o-card', className);
+
+  // if onToggle is undefined, the component is not controlled.
+  // we use this useState to do the action
+  const [internalOpen, setOpen] = useState(open);
+  const toggle = () => {
+    if (collapsable) {
+      if (onToggle !== undefined) {
+        onToggle();
+      } else {
+        setOpen(!internalOpen);
+      }
+    }
+  };
+
+  const onEntering = (node: HTMLElement) => {
+    const currentHeight = node.getBoundingClientRect().height;
+    node.style.height = '0px';
+    setTimeout(() => {
+      node.style.height = `${currentHeight}px`;
+    }, 0);
+  };
+
+  const onEntered = (node: HTMLElement) => {
+    node.style.height = '';
+  };
+
+  const onExiting = (node: HTMLElement) => {
+    node.style.height = `${node.getBoundingClientRect().height}px`;
+    setTimeout(() => {
+      node.style.height = '0px';
+    }, 0);
+  };
+
+  return (
+    <div className={classNames}>
+      <TitleComponent
+        title={title}
+        icon={icon}
+        onToggle={toggle}
+        open={onToggle ? open : internalOpen}
+        collapsable={collapsable}
+        animate={animate}
+      />
+
+      <CSSTransition
+        in={onToggle ? open : internalOpen}
+        appear={false}
+        classNames="o-card-animate"
+        timeout={animate}
+        mountOnEnter={true}
+        unmountOnExit={true}
+        onExiting={onExiting}
+        onEntering={onEntering}
+        onEntered={onEntered}
+      >
+        <div>
+          <div className="o-card-content">{children}</div>
+        </div>
+      </CSSTransition>
+    </div>
+  );
+};
+
+export default CardComponent;

package/src/components/card/components/CardTitle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import TogglerIcon from '../../icon/TogglerIcon';
+import { CardTitleProps } from '../typings';
+
+const CardTitle: React.FC<CardTitleProps> = ({ collapsable = true, open, title, onToggle }) => {
+  return (
+    <div className="o-card-title-container" onClick={onToggle}>
+      {collapsable && <TogglerIcon open={open} />}
+      <span className="o-card-title">{title}</span>
+    </div>
+  );
+};
+
+export default CardTitle;

package/src/components/card/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import CardComponent from './components/CardComponent';
+import { cardStyle } from './style';
+
+const Card = styled(CardComponent)`
+  ${cardStyle}
+`;
+
+export default Card;

package/src/components/card/style.ts

@@ -0,0 +1,68 @@
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import {
+  borderBottomColor,
+  borderBottomStyle,
+  borderBottomWidth,
+  borderColor,
+  borderRadius,
+  borderStyle,
+  borderWidth,
+  boxShadow,
+} from '../../styles/border';
+import { display } from '../../styles/display';
+import { cursor, userSelect } from '../../styles/interactivity';
+import { overflow } from '../../styles/overflow';
+import { marginLeft, paddingX, paddingY } from '../../styles/spacing';
+import { transitionDuration, transitionProperty, transitionTimingFunction } from '../../styles/transition';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize, fontWeight, letterSpacing, textTransform } from '../../styles/typography';
+import { CardProps } from './typings';
+
+export const cardStyle: ComponentStyle<CardProps> = ({
+  theme,
+  collapsable = true,
+  animate = 150,
+  bordered = true,
+  open,
+}) => {
+  const t = theme.card;
+  return css`
+    ${backgroundColor(t.bgColor)}
+    ${borderWidth(bordered ? t.borderWidth : 0)}
+    ${borderColor(t.borderColor)}
+    ${borderStyle(t.borderStyle)}
+    ${borderRadius(t.borderRadius)}
+    ${boxShadow(bordered ? t.shadow : 'none')}
+    .o-card-animate-enter-active, .o-card-animate-exit-active {
+      ${overflow('hidden')}
+      ${transitionDuration(`${animate}ms`)}
+      ${transitionProperty('height,opacity')}
+      ${transitionTimingFunction('linear')}
+    }
+    .o-card-title-container {
+      ${display('flex')}
+      ${alignItems('center')}
+      ${cursor(collapsable ? 'pointer' : 'default')}
+      ${color(t.fontColor)}
+      ${textTransform(t.fontCase)}
+      ${fontWeight(t.fontWeight)}
+      ${fontSize(t.fontSize)}
+      ${borderBottomWidth(t.titleBorderBottomWidth)}
+      ${borderBottomColor(bordered || open ? t.borderColor : 'transparent')}
+      ${borderBottomStyle(t.borderStyle)}
+      ${paddingX(t.paddingX)}
+      ${paddingY(t.paddingY)}
+      ${letterSpacing(t.letterSpacing)}
+      .o-card-title {
+        ${marginLeft('sm')}
+      }
+      ${userSelect('none')}
+    }
+    .o-card-content {
+      ${paddingX(t.paddingX)}
+      ${paddingY(t.paddingY)}
+    }
+  `;
+};

package/src/components/card/typings.ts

@@ -0,0 +1,28 @@
+import { FormDecoratorOptions } from 'onekijs-framework';
+import { FC, ReactNode } from 'react';
+
+export type CardProps = {
+  bordered?: boolean;
+  className?: string;
+  collapsable?: boolean;
+  animate?: number;
+  title: string;
+  TitleComponent?: FC<CardTitleProps>;
+  icon?: ReactNode;
+  open?: boolean;
+  onToggle?: () => void;
+};
+
+export type CardTitleProps = {
+  title: string;
+  icon?: ReactNode;
+  onToggle: () => void;
+  open: boolean;
+  collapsable: boolean;
+  animate?: number;
+};
+
+export type FormCardProps = CardProps &
+  FormDecoratorOptions & {
+    name: string;
+  };

package/src/components/checkbox/FormCheckbox.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import Checkbox from '.';
+import FieldLayout from '../field/FieldLayout';
+import useFieldLayout from '../field/hooks/useFieldLayout';
+import { CheckboxProps, FormCheckboxProps } from './typings';
+
+const FormCheckbox: FC<FormCheckboxProps> = React.memo((props) => {
+  const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<CheckboxProps>(
+    Object.assign(
+      {
+        defaultValue: props.defaultValue === undefined ? false : props.defaultValue,
+      },
+      props,
+    ),
+  );
+  const Component = props.FieldComponent || Checkbox;
+
+  return (
+    <FieldLayout {...fieldLayoutProps} required={props.required}>
+      <Component {...fieldComponentProps} />
+    </FieldLayout>
+  );
+});
+
+FormCheckbox.displayName = 'FormCheckbox';
+export default FormCheckbox;

package/src/components/checkbox/components/CheckboxComponent.tsx

@@ -0,0 +1,42 @@
+import React, { ChangeEvent, FC, useId } from 'react';
+import { addClassname } from '../../../utils/style';
+import { CheckboxProps } from '../typings';
+
+const CheckboxComponent: FC<CheckboxProps> = ({
+  label,
+  className = '',
+  onChange,
+  value = false,
+  bordered = true,
+  status,
+  ...checkboxProps
+}) => {
+  const id = useId();
+
+  const onChecked = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange && onChange(e.target.checked);
+  };
+
+  return (
+    <div className={addClassname(`o-checkbox${status ? ' o-checkbox-status-' + status.toLowerCase() : ''}`, className)}>
+      <label htmlFor={id} onClick={(e) => e.stopPropagation()}>
+        <div className="o-checkbox-container">
+          <svg className="o-checkbox-svg" viewBox="-281 373 48 48">
+            <path className="o-checkbox-svg-stroke" d="M-273.2,398.2l10,9.9 l22.4-22.3" />
+          </svg>
+          <input
+            {...checkboxProps}
+            onChange={onChecked}
+            checked={value}
+            id={id}
+            type="checkbox"
+            className="o-checkbox-input"
+          />
+        </div>
+        {label && <span className="o-checkbox-label">{label}</span>}
+      </label>
+    </div>
+  );
+};
+
+export default CheckboxComponent;

package/src/components/checkbox/index.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import CheckboxComponent from './components/CheckboxComponent';
+import checkboxStyle from './style';
+
+const Checkbox = styled(CheckboxComponent)`
+  ${checkboxStyle}
+`;
+
+export default Checkbox;

package/src/components/checkbox/style.ts

@@ -0,0 +1,103 @@
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { borderColor, borderRadius, borderStyle, borderWidth } from '../../styles/border';
+import { display } from '../../styles/display';
+import { opacity } from '../../styles/effects';
+import { cursor } from '../../styles/interactivity';
+import { position, top } from '../../styles/position';
+import { height, width } from '../../styles/size';
+import { marginLeft } from '../../styles/spacing';
+import { fill, stroke } from '../../styles/svg';
+import { ComponentStyle } from '../../styles/typings';
+import { CheckboxProps } from './typings';
+
+const checkboxStyle: ComponentStyle<CheckboxProps> = ({
+  height: cssHeight = '20px',
+  width: cssWidth = '20px',
+  theme,
+  color: cssColor,
+  value,
+  bordered = true,
+}) => {
+  const t = theme.checkbox;
+  const checkboxColor = cssColor ?? t.color;
+  const checkboxHeight = isNaN(cssHeight as any) ? `${cssHeight}` : `${cssHeight}px`;
+  const checkboxWidth = isNaN(cssHeight as any) ? `${cssWidth}` : `${cssWidth}px`;
+
+  return css`
+    ${display('inline-flex')}
+    ${alignItems('center')}
+    .o-checkbox-container {
+      ${position('relative')}
+      ${height(checkboxHeight)};
+      ${width(checkboxWidth)};
+      ${display('inline-block')}
+      ${borderWidth(bordered ? '2px' : 0)}
+      ${borderStyle('solid')}
+      ${borderColor(checkboxColor)}
+      ${borderRadius('4px')}
+    }
+
+    .o-checkbox-input {
+      ${position('absolute')}
+      ${top(0)}
+      ${opacity(0)}
+      ${height('full')};
+      ${width('full')};
+      ${cursor('pointer')}
+    }
+
+    .o-checkbox-svg {
+      ${position('absolute')}
+      ${width('full')};
+    }
+
+    .o-checkbox-svg-stroke {
+      ${stroke(checkboxColor)}
+      ${fill('none')}
+      stroke-width: 6;
+      stroke-linecap: round;
+      stroke-dasharray: 100% 200%;
+      stroke-dashoffset: ${() => (value ? '0' : '100%')};
+      transition: stroke-dashoffset 100ms ease-in-out;
+    }
+
+    label {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      .o-checkbox-label {
+        ${marginLeft('md')}
+      }
+    }
+
+    &.o-checkbox-status-error {
+      .o-checkbox-container {
+        ${borderColor('danger')}
+      }
+      .o-checkbox-svg-stroke {
+        ${stroke('danger')}
+      }
+    }
+
+    &.o-checkbox-status-warning {
+      .o-checkbox-container {
+        ${borderColor('warning')}
+      }
+      .o-checkbox-svg-stroke {
+        ${stroke('warning')}
+      }
+    }
+
+    &.o-checkbox-status-success {
+      .o-checkbox-container {
+        ${borderColor('success')}
+      }
+      .o-checkbox-svg-stroke {
+        ${stroke('success')}
+      }
+    }
+  `;
+};
+
+export default checkboxStyle;

package/src/components/checkbox/typings.ts

@@ -0,0 +1,18 @@
+import { FormFieldProps, ValidationStatus } from 'onekijs-framework';
+import { FieldLayoutProps } from '../field/typings';
+
+export interface CheckboxProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange' | 'value' | 'checked'> {
+  label?: string;
+  onChange?: (checked: boolean) => void;
+  value?: boolean;
+  bordered?: boolean;
+  status?: ValidationStatus;
+}
+
+export type FormCheckboxProps = CheckboxProps &
+  FormFieldProps &
+  FieldLayoutProps & {
+    defaultValue?: boolean;
+    FieldComponent?: React.FC<CheckboxProps>;
+  };