onekijs-ui 0.9.2 → 0.15.2

package/src/components/icon/TogglerIcon.tsx

@@ -0,0 +1,126 @@
+import React, { FC } from 'react';
+import styled, { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import { display, visibility } from '../../styles/display';
+import { color } from '../../styles/typography';
+import { addClassname } from '../../utils/style';
+import LoadingIcon from './LoadingIcon';
+import { TogglerIconProps } from './typings';
+
+const toDegree = (position: 'n' | 's' | 'w' | 'e'): string => {
+  switch (position) {
+    case 'e':
+      return '90';
+    case 'w':
+      return '270';
+    case 's':
+      return '180';
+    case 'n':
+      return '0';
+  }
+};
+
+const IconComponent: FC<TogglerIconProps> = ({
+  className,
+  onClick,
+  open,
+  loading,
+  model = 'arrow',
+  closeArrowPosition = 'e',
+  openArrowPosition = 's',
+}) => {
+  const iconClassName = addClassname('o-toggler-icon-container', className);
+  if (!loading) {
+    return (
+      <div className={iconClassName} onClick={onClick}>
+        <div className="o-toggler-icon">
+          {model === 'arrow' && (
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              transform={`rotate(${open ? toDegree(openArrowPosition) : toDegree(closeArrowPosition)})`}
+              className="o-toggler-arrow"
+            >
+              <polyline points="18 15 12 9 6 15"></polyline>
+            </svg>
+          )}
+          {model === 'plus' && (
+            <div className={`o-toggler-plus${open ? ' o-toggler-plus-active' : ''}`}>
+              <span></span>
+              <span></span>
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  } else {
+    return (
+      <div className="o-toggler-icon-container">
+        <LoadingIcon />
+      </div>
+    );
+  }
+};
+
+const TogglerIcon = styled(IconComponent)`
+  ${({ width = '24px', height = '24px', color: cssColor = 'inherit', visible = true }) => css`
+    width: ${width};
+    height: ${height};
+    ${display('inline-flex')};
+    ${alignItems('center')};
+    ${color(cssColor)}
+    .o-toggler-icon {
+      display: inline-flex;
+      width: 100%;
+      height: 100%;
+      ${visibility(visible)}
+      .o-toggler-arrow {
+        stroke-width: 2;
+        stroke: currentColor;
+        fill: none;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        transition: all 150ms ease-in-out;
+      }
+      .o-toggler-plus {
+        border: 0;
+        position: relative;
+        width: 100%;
+        height: 100%;
+        span {
+          position: absolute;
+          transition: 300ms;
+          ${backgroundColor(cssColor)}
+          border-radius: 2px;
+        }
+
+        span:first-child {
+          top: 25%;
+          bottom: 25%;
+          width: 10%;
+          left: 45%;
+        }
+
+        span:last-child {
+          left: 25%;
+          right: 25%;
+          height: 10%;
+          top: 45%;
+        }
+
+        &.o-toggler-plus-active span {
+          transform: rotate(90deg);
+        }
+
+        &.o-toggler-plus-active span:last-child {
+          left: 50%;
+          right: 50%;
+        }
+      }
+    }
+  `}
+`;
+
+export default TogglerIcon;

package/src/components/icon/typings.ts

@@ -0,0 +1,15 @@
+import { ColorProperty } from 'csstype';
+import { ColorPropertyTheme } from '../../styles/typings';
+
+export type IconProps = React.InputHTMLAttributes<HTMLDivElement> & {
+  color?: ColorPropertyTheme | ColorProperty;
+};
+
+export type TogglerIconProps = IconProps & {
+  open?: boolean;
+  loading?: boolean;
+  visible?: boolean;
+  model?: 'arrow' | 'plus';
+  closeArrowPosition?: 'e' | 'w' | 'n' | 's';
+  openArrowPosition?: 'e' | 'w' | 'n' | 's';
+};

package/src/components/input/FormInput.tsx

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

package/src/components/input/components/InputComponent.tsx

@@ -0,0 +1,46 @@
+import React, { FC, useState } from 'react';
+import { addClassname } from '../../../utils/style';
+import { InputProps } from '../typings';
+
+const InputComponent: FC<InputProps> = (props) => {
+  const {
+    className,
+    size = 'medium',
+    status,
+    PrefixComponent,
+    SuffixComponent,
+    onFocus: forwardFocus,
+    onBlur: forwardBlur,
+    ...inputProps
+  } = props;
+
+  const [focus, setFocus] = useState(false);
+
+  const classNames = addClassname(
+    `o-input o-input-size-${size}${focus ? ' o-input-focus' : ''}${
+      status ? ' o-input-status-' + status.toLowerCase() : ''
+    }`,
+    className,
+  );
+
+  const onFocus = (e: React.FocusEvent<HTMLInputElement, Element>) => {
+    setFocus(true);
+    forwardFocus && forwardFocus(e);
+  };
+
+  const onBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {
+    setFocus(false);
+    forwardBlur && forwardBlur(e);
+  };
+
+  return (
+    <div className={classNames}>
+      {PrefixComponent && <PrefixComponent {...props} className="o-input-prefix" />}
+      <input className="o-input-field" {...inputProps} onFocus={onFocus} onBlur={onBlur} />
+      {SuffixComponent && <SuffixComponent {...props} className="o-input-suffix" />}
+    </div>
+  );
+};
+
+InputComponent.displayName = 'InputComponent';
+export default InputComponent;

package/src/components/input/index.tsx

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

package/src/components/input/style.ts

@@ -0,0 +1,85 @@
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import { borderColor, borderRadius, borderStyle, borderWidth } from '../../styles/border';
+import { display } from '../../styles/display';
+import { flexGrow } from '../../styles/flex';
+import { appearance, boxSizing, cursor, outline } from '../../styles/interactivity';
+import { width } from '../../styles/size';
+import { padding, paddingX, paddingY } from '../../styles/spacing';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize } from '../../styles/typography';
+import { InputProps } from './typings';
+
+const inputStyle: ComponentStyle<InputProps> = ({ theme, disabled }) => {
+  const t = theme.input;
+  return css`
+    ${boxSizing('border-box')}
+    ${width(t.width)}
+    ${backgroundColor(disabled ? 'lighter' : t.bgColor)}
+    ${display('flex')}
+    ${alignItems('center')}
+    ${borderWidth(t.borderWidth)}
+    ${borderColor(t.borderColor)}
+    ${borderRadius(t.borderRadius)}
+    ${borderStyle(t.borderStyle)}
+    ${padding('1px')}
+    ${cursor(disabled ? 'not-allowed' : 'auto')}
+    input {
+      ${cursor(disabled ? 'not-allowed' : 'auto')}
+    }
+    &.o-input-focus {
+      ${borderColor(t.borderFocusColor)}
+      ${borderWidth(t.borderFocusWidth)}
+      ${padding(0)}
+    }
+    .o-input-field {
+      ${width('full')}
+      ${flexGrow(1)}
+      ${paddingX(t.paddingX)}
+      ${paddingY(t.paddingY)}
+      ${appearance(t.appearance)}
+      ${outline(t.outline)}
+      ${borderWidth(0)}
+      ${backgroundColor('inherit')}
+      ${color(t.fontColor, { placeholder: t.placeholderColor })}
+    }
+
+    &.o-input-size-xsmall input {
+      ${paddingY(0)}
+      ${fontSize('sm')}
+    }
+    &.o-input-size-small input {
+      ${paddingY('xs')}
+      ${fontSize('sm')}
+    }
+    &.o-input-size-medium input {
+      ${paddingY('sm')}
+      ${fontSize('default')}
+    }
+
+    &.o-input-size-large input {
+      ${paddingY('md')}
+      ${fontSize('default')}
+    }
+
+    &.o-input-size-xlarge input {
+      ${paddingY('lg')}
+      ${fontSize('lg')}
+    }
+
+    &.o-input-status-error {
+      ${borderColor('danger')}
+    }
+
+    &.o-input-status-warning {
+      ${borderColor('warning')}
+    }
+
+    &.o-input-status-success {
+      ${borderColor('success')}
+    }
+  `;
+};
+
+export default inputStyle;

package/src/components/input/typings.ts

@@ -0,0 +1,17 @@
+import { FormFieldProps, ValidationStatus } from 'onekijs-framework';
+import { TshirtSize } from '../../styles/typings';
+import { FieldLayoutProps } from '../field/typings';
+
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> & {
+  PrefixComponent?: React.FC<InputProps>;
+  SuffixComponent?: React.FC<InputProps>;
+  status?: ValidationStatus;
+  size?: TshirtSize;
+};
+
+export type FormInputProps = InputProps &
+  FormFieldProps &
+  FieldLayoutProps & {
+    defaultValue?: string;
+    FieldComponent?: React.FC<InputProps>;
+  };

package/src/components/label/components/LabelComponent.tsx

@@ -0,0 +1,39 @@
+import React, { LabelHTMLAttributes } from 'react';
+import { addClassname } from '../../../utils/style';
+import FieldHelp from '../../field/FieldHelp';
+import { LabelProps } from '../typings';
+
+const LabelComponent: React.FC<LabelProps> = React.memo(
+  ({ className, htmlFor, help, HelpComponent = FieldHelp, layout = 'vertical', required, text, size }) => {
+    const classNames = addClassname(`o-label o-label-${layout}${size ? ` o-label-${size}` : ''}`, className);
+    const labelProps: LabelHTMLAttributes<HTMLLabelElement> = {
+      className: 'o-label-text',
+    };
+    if (htmlFor) {
+      labelProps.htmlFor = `${htmlFor}`;
+    }
+
+    if (layout === 'vertical') {
+      return (
+        <div className={classNames}>
+          <label {...labelProps}>{text}</label>
+          {required && <span className="o-marker-required">*</span>}
+          <HelpComponent content={help} visible={help ? true : false} size={size} layout={layout} />
+        </div>
+      );
+    } else if (layout === 'horizontal') {
+      return (
+        <div className={classNames}>
+          {<HelpComponent content={help} visible={help ? true : false} layout={layout} />}
+          <label {...labelProps}>{text}</label>
+          <span className={`o-marker-${required ? 'required' : 'optional'}`}>*</span>
+        </div>
+      );
+    }
+    return null;
+  },
+);
+
+LabelComponent.displayName = 'LabelComponent';
+
+export default LabelComponent;

package/src/components/label/index.tsx

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

package/src/components/label/style.ts

@@ -0,0 +1,64 @@
+import { css } from 'styled-components';
+import { alignItems, justifyContent } from '../../styles/alignment';
+import { display, visibility } from '../../styles/display';
+import { marginLeft, marginRight, marginY, paddingY } from '../../styles/spacing';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize, fontWeight, letterSpacing, textTransform } from '../../styles/typography';
+import { LabelProps } from './typings';
+
+const labelStyle: ComponentStyle<LabelProps> = ({ theme }) => {
+  const t = theme.label;
+  return css`
+      ${display('flex')}
+      .o-label-text {
+        ${fontWeight(t.fontWeight)}
+        ${t.fontCase === 'uppercase' ? textTransform('uppercase') : ''}
+        ${color(t.fontColor)}
+        ${fontSize(t.fontSize)}
+        ${letterSpacing(t.letterSpacing)}
+      }
+      &.o-label-vertical {
+        ${alignItems('center')}
+      }
+      &.o-label-horizontal {
+        ${justifyContent('flex-end')}
+        ${alignItems('center')}
+        ${marginY('2px')}
+        &.o-label-xsmall {
+          ${paddingY(0)}
+        }
+        &.o-label-small {
+          ${paddingY('xs')}
+        }
+        &.o-label-medium {
+          ${paddingY('sm')}
+        }
+        &.o-label-large {
+          ${paddingY('md')}
+        }
+        &.o-label-xlarge {
+          ${paddingY('lg')}
+        }
+        .o-marker-required, .o-marker-optional {
+          ${marginRight('lg')}
+        }
+      }
+      .o-marker-required, .o-marker-optional {
+        ${color(t.requiredColor)}
+        ${fontWeight(t.requiredWeight)}
+        ${marginLeft(t.requiredMarginLeft)}
+      }
+      .o-marker-optional {
+        ${visibility(false)}
+      }
+
+      .o-helper-icon {
+        ${fontSize('xl')}
+        ${color(t.helperIconColor)}
+        ${marginLeft(t.helperMarginLeft)}
+      }
+
+    `;
+};
+
+export default labelStyle;

package/src/components/label/typings.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { FormLayout } from 'onekijs-framework';
+import { FieldDescriptionProps, FieldHelpProps } from '../field/typings';
+import { TshirtSize } from '../../styles/typings';
+
+export interface LabelProps {
+  className?: string;
+  description?: string | JSX.Element;
+  DescriptionComponent?: React.FC<FieldDescriptionProps>;
+  htmlFor?: string | number;
+  help?: string | JSX.Element;
+  HelpComponent?: React.FC<FieldHelpProps>;
+  layout?: FormLayout;
+  required?: boolean;
+  text: string;
+  size?: TshirtSize;
+}

package/src/components/list/components/ArrayListComponent.tsx

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import useListController from '../hooks/useListController';
+import { ArrayListProps } from '../typings';
+import CollectionListComponent from './CollectionListComponent';
+
+const ArrayListComponent: FC<ArrayListProps> = (props) => {
+  const controller = useListController(props.dataSource, { adapter: props.adapter, fetchOnce: props.fetchOnce });
+  return <CollectionListComponent {...props} controller={controller} />;
+};
+
+export default ArrayListComponent;

package/src/components/list/components/CollectionListComponent.tsx

@@ -0,0 +1,77 @@
+import React, { FC, useRef } from 'react';
+import { addClassname } from '../../../utils/style';
+import { ListServiceContext } from '../hooks/useListService';
+import { ListStateContext } from '../hooks/useListState';
+import useListView from '../hooks/useListView';
+import { CollectionListProps } from '../typings';
+import ListBodyComponent from './ListBodyComponent';
+import ListItemComponent, { ListItemContent } from './ListItemComponent';
+import LoadingItem from './LoadingItem';
+
+const CollectionListComponent: FC<CollectionListProps> = ({
+  className,
+  controller,
+  height,
+  ItemComponent = ListItemComponent,
+  ItemLoadingComponent = LoadingItem,
+  ItemContentComponent = ListItemContent,
+  NotFoundComponent,
+  itemHeight,
+  preload,
+  keyboardNavigable,
+  increment,
+  multiSelect,
+  onItemActivate,
+  onItemHighlight,
+  onItemSelect,
+  onItemDeactivate,
+  onItemUnhighlight,
+  onItemUnselect,
+  virtual,
+  style,
+}) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const { items, isVirtual, totalSize, virtualItems, scrollToIndex } = useListView({
+    controller,
+    height,
+    itemHeight,
+    preload,
+    increment,
+    ref,
+    virtual,
+  });
+
+  return (
+    <ListServiceContext.Provider value={controller.asService()}>
+      <ListStateContext.Provider value={controller.state}>
+        <ListBodyComponent
+          className={addClassname('o-list', className)}
+          height={height}
+          ItemLoadingComponent={ItemLoadingComponent}
+          ItemComponent={ItemComponent}
+          ItemContentComponent={ItemContentComponent}
+          NotFoundComponent={NotFoundComponent}
+          items={items}
+          keyboardNavigable={keyboardNavigable}
+          bodyRef={ref}
+          onItemActivate={onItemActivate}
+          onItemDeactivate={onItemDeactivate}
+          onItemHighlight={onItemHighlight}
+          onItemUnhighlight={onItemUnhighlight}
+          onItemSelect={onItemSelect}
+          onItemUnselect={onItemUnselect}
+          multiSelect={multiSelect}
+          scrollToIndex={scrollToIndex}
+          service={controller.asService()}
+          state={controller.state}
+          style={style}
+          totalSize={totalSize}
+          virtualItems={isVirtual ? virtualItems : undefined}
+        />
+      </ListStateContext.Provider>
+    </ListServiceContext.Provider>
+  );
+};
+
+export default CollectionListComponent;