onekijs-ui 0.9.2 → 0.15.2

package/src/components/tree/typings.ts

@@ -0,0 +1,126 @@
+import {
+  Collection,
+  CollectionProxy,
+  CollectionState,
+  Item,
+  ItemAdaptee,
+  UseCollectionOptions,
+} from 'onekijs-framework';
+import React, { ReactNode } from 'react';
+import { ListItemHandler, ListItemProps, StandardListProps, VirtualListProps } from '../list/typings';
+
+export type ArrayTreeProps<T = any, I extends TreeItem<T> = TreeItem<T>> = TreeConfig<T, I> & {
+  adapter?: TreeItemAdapter<T>;
+  dataSource?: string | T[];
+  fetchOnce?: boolean;
+  selected?: T[];
+};
+
+export type ControllerTreeProps<
+  T = any,
+  I extends TreeItem<T> = TreeItem<T>,
+  S extends TreeState<T, I> = TreeState<T, I>,
+  C extends TreeController<T, I, S> = TreeController<T, I, S>
+> = TreeConfig<T, I> & {
+  controller: CollectionProxy<T, I, S, C>;
+};
+
+export type TreeConfig<T = any, I extends TreeItem<T> = TreeItem<T>> = {
+  className?: string;
+  height?: number;
+  itemClassName?: string | ((item: I) => string);
+  ItemComponent?: React.FC<TreeItemProps<T, I>>;
+  IconComponent?: React.FC<TreeItemProps<T, I>>;
+  TogglerComponent?: React.FC<TreeItemToggleProps>;
+  onActivate?: TreeItemHandler<T, I>;
+  onSelect?: TreeItemHandler<T, I>;
+  virtual?: boolean;
+  gap?: number;
+  paddingLeft?: number;
+  paddingRight?: number;
+  animate?: boolean;
+};
+
+export type TreeController<
+  T = any,
+  I extends TreeItem<T> = TreeItem<T>,
+  S extends TreeState<T, I> = TreeState<T, I>
+> = Collection<T, I, S> & {
+  collapse: TreeItemHandler<T, I>;
+  collapsing: TreeItemHandler<T, I>;
+  collpased: TreeItemHandler<T, I>;
+  expand: TreeItemHandler<T, I>;
+  expanding: TreeItemHandler<T, I>;
+  expanded: TreeItemHandler<T, I>;
+};
+
+export type TreeItem<T = any> = Item<T> & {
+  activable?: boolean;
+  children?: string[];
+  collapsing?: boolean;
+  expanded?: boolean;
+  expanding?: boolean;
+  icon?: ReactNode;
+  level: number;
+  parent?: string;
+  selectable?: boolean;
+  type?: 'folder' | 'leaf';
+};
+
+export type TreeItemAdaptee<T> = ItemAdaptee & {
+  children?: T[];
+  icon?: ReactNode;
+  selectable?: boolean;
+  selected?: boolean;
+  type?: 'folder' | 'leaf';
+  expanded?: boolean;
+};
+
+export type TreeItemAdapter<T> = (data: T) => TreeItemAdaptee<T>;
+
+export type TreeItemHandler<T = any, I extends TreeItem<T> = TreeItem<T>> = ListItemHandler<T, I>;
+
+export type TreeItemProps<T = any, I extends TreeItem<T> = TreeItem<T>> = ListItemProps<T, I> & {
+  className?: string;
+  onCollapse: TreeItemHandler<T, I>;
+  onExpand: TreeItemHandler<T, I>;
+};
+
+export type TreeItemToggleProps<T = any, I extends TreeItem<T> = TreeItem<T>> = Pick<
+  TreeItemProps<T, I>,
+  'item' | 'onExpand' | 'onCollapse' | 'index'
+>;
+
+export type TreeListProps<T = any, I extends TreeItem<T> = TreeItem<T>> = StandardListProps<T, I>;
+
+export type TreeProps<
+  T = any,
+  I extends TreeItem<T> = TreeItem<T>,
+  S extends TreeState<T, I> = TreeState<T, I>,
+  C extends TreeController<T, I, S> = TreeController<T, I, S>
+> = TreeConfig<T, I> & {
+  adapter?: TreeItemAdapter<T>;
+  controller?: CollectionProxy<T, I, S, C>;
+  dataSource?: string | T[];
+  fetchOnce?: boolean;
+  selected?: T[];
+};
+
+export type TreeState<T = any, I extends TreeItem<T> = TreeItem<T>> = CollectionState<T, I> & {
+  active?: string[];
+  adapter?: TreeItemAdapter<T>;
+  dataSource?: T[] | string;
+  collapsing?: string[];
+  expanded?: string[];
+  expanding?: string[];
+  selected?: string[];
+};
+
+export type UseTreeOptions<T = any, I extends TreeItem<T> = TreeItem<T>> = UseCollectionOptions<T, I> & {
+  active?: T[];
+  adapter?: TreeItemAdapter<T>;
+  dataSource?: T[] | string;
+  selected?: T[];
+};
+
+export type VirtualTreeListProps<T = any, I extends TreeItem<T> = TreeItem<T>> = VirtualListProps<T, I>;

package/src/components/wizard/WizardModal.ts

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

package/src/components/wizard/WizardService.ts

@@ -0,0 +1,123 @@
+import { reducer, saga, SagaEffect, service } from 'onekijs-framework';
+import { TabsService } from '../tab/TabsService';
+import { StepState, WizardState } from './typings';
+
+@service
+export class WizardService<
+  M extends StepState = StepState,
+  S extends WizardState<M> = WizardState<M>,
+> extends TabsService<M, S> {
+  @reducer
+  activateNext(): void {
+    const nextStep = this.getNextStep();
+    if (nextStep) {
+      this.activate(nextStep.uid);
+    }
+  }
+
+  @reducer
+  activatePrevious(): void {
+    const previousStep = this.getPreviousStep();
+    if (previousStep) {
+      this.activate(previousStep.uid);
+    }
+  }
+
+  getCurrentStep(): M | undefined {
+    return this.state.members[this.getCurrentActiveIndex()];
+  }
+
+  getNextStep(): M | undefined {
+    for (let i = this.getCurrentActiveIndex() + 1; i < this.state.members.length; i++) {
+      const step = this.state.members[i];
+      if (step && step.visible && !step.disabled) {
+        return step;
+      }
+    }
+    return undefined;
+  }
+
+  getPreviousStep(): M | undefined {
+    for (let i = this.getCurrentActiveIndex() - 1; i >= 0; i--) {
+      const step = this.state.members[i];
+      if (step && step.visible && !step.disabled) {
+        return step;
+      }
+    }
+    return undefined;
+  }
+
+  isFirstStep(): boolean {
+    if (this.state.active) {
+      return this.state.members.filter((m) => m.visible)[0]?.uid === this.state.active;
+    }
+    return false;
+  }
+
+  isLastStep(): boolean {
+    if (this.state.active) {
+      return this.state.members.filter((m) => m.visible && !m.disabled).slice(-1)[0]?.uid === this.state.active;
+    }
+    return false;
+  }
+
+  isCurrentStepInError(): boolean {
+    if (this.state.active) {
+      const currentStep = this.getMember(this.state.active);
+      return currentStep?.error !== undefined;
+    }
+    return false;
+  }
+
+  isCurrentStepInVisibleError(): boolean {
+    if (this.state.active) {
+      const currentStep = this.getMember(this.state.active);
+      return currentStep?.touchingError !== undefined;
+    }
+    return false;
+  }
+
+  @saga(SagaEffect.Leading)
+  // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+  *done() {
+    yield this.setSubmitting(true);
+    if (this.state.onDone) {
+      yield this.state.onDone();
+    }
+    yield this.setSubmitting(false);
+  }
+
+  @reducer
+  next(): void {
+    if (this.isCurrentStepInError()) {
+      const currentStep = this.getCurrentStep();
+      if (currentStep) {
+        this.touched(currentStep.uid);
+      }
+    } else {
+      let result = true;
+      if (this.state.onNext) {
+        result = this.state.onNext(this.getCurrentStep() as M, this.getNextStep() as M);
+      }
+      if (result) {
+        this.activateNext();
+      }
+    }
+  }
+
+  @reducer
+  previous(): void {
+    let result = true;
+    if (this.state.onPrevious) {
+      result = this.state.onPrevious(this.getCurrentStep() as M, this.getPreviousStep() as M);
+    }
+    if (result) {
+      this.activatePrevious();
+    }
+  }
+
+  @reducer
+  setSubmitting(submitting: boolean): void {
+    this.state.submitting = submitting;
+  }
+}

package/src/components/wizard/components/ControlledWizardComponent.tsx

@@ -0,0 +1,22 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import { WizardServiceContext } from '../hooks/useWizardService';
+import { WizardStateContext } from '../hooks/useWizardState';
+import { ControlledWizardProps } from '../typings';
+import WizardContainer from './WizardContainer';
+
+const ControlledWizardComponent: FCC<ControlledWizardProps> = ({
+  Component = WizardContainer,
+  controller,
+  ...props
+}) => {
+  return (
+    <WizardServiceContext.Provider value={controller}>
+      <WizardStateContext.Provider value={controller.state}>
+        <Component {...props} />
+      </WizardStateContext.Provider>
+    </WizardServiceContext.Provider>
+  );
+};
+
+export default ControlledWizardComponent;

package/src/components/wizard/components/Step.tsx

@@ -0,0 +1,82 @@
+import { FCC, FormContext, useFieldContainer } from 'onekijs-framework';
+import React, { useEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
+import useStep from '../hooks/useStep';
+import useWizardService from '../hooks/useWizardService';
+import { useWizardState } from '../hooks/useWizardState';
+import { StepProps } from '../typings';
+
+const Step: FCC<StepProps> = ({
+  title,
+  active = false,
+  disabled = false,
+  visible = true,
+  closable = false,
+  children,
+  icon,
+  uid,
+  optional = false,
+  showTitle = true,
+}) => {
+  const { animate, forwardOnly } = useWizardState();
+  const service = useWizardService();
+
+  const step = useStep({
+    title,
+    active,
+    disabled,
+    visible,
+    closable,
+    icon,
+    loading: false,
+    optional,
+    touched: !forwardOnly,
+    touching: !forwardOnly,
+    uid: uid === undefined ? title : uid,
+  });
+
+  const fieldContainer = useFieldContainer({
+    onValidationChange: (_field, _validation, touchedValidation, allValidation) => {
+      if (step) {
+        service.onValidationChange(step.uid, touchedValidation, allValidation);
+      }
+    },
+  });
+
+  const touched = step?.touched;
+  const touchAllFields = fieldContainer.touchAllFields;
+
+  const onEnter = (node: HTMLElement) => {
+    node.style.opacity = '0';
+  };
+
+  const onEntering = (node: HTMLElement) => {
+    setTimeout(() => {
+      node.style.opacity = '1';
+      node.style.transition = `opacity ${animate}ms ease-in-out`;
+    }, 0);
+  };
+
+  useEffect(() => {
+    if (touched) {
+      touchAllFields();
+    }
+  }, [touched, touchAllFields]);
+
+  if (!step || !step.active) {
+    return null;
+  }
+
+  return (
+    <FormContext.Provider value={fieldContainer.context}>
+      <CSSTransition in={true} timeout={animate} appear={true} onEnter={onEnter} onEntering={onEntering}>
+        <div className="o-step-content">
+          {showTitle && <div className="o-step-content-title">{title}</div>}
+          {children}
+        </div>
+      </CSSTransition>
+    </FormContext.Provider>
+  );
+};
+
+export default Step;

package/src/components/wizard/components/StepTitle.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import { StepTitleProps } from '../typings';
+
+const StepTitle: FC<StepTitleProps> = ({ member, onActivate, index }) => {
+  return (
+    <div
+      className={`o-step${member.active ? ' o-step-active' : ' o-step-inactive'}${
+        member.disabled ? ' o-step-disabled' : ' o-step-enabled'
+      }${member.visible ? ' o-step-visible' : ' o-step-hidden'}${
+        member.touched || member.touching ? ' o-step-touched' : ' o-step-untouched'
+      }${member.success ? ' o-step-success' : ''}${
+        member.touchingWarning || (member.touched && member.warning) ? ' o-step-warning' : ''
+      }${member.touchingError || (member.touched && member.error) ? ' o-step-error' : ''}${
+        member.loading ? ' o-step-loading' : ''
+      }`}
+      onClick={() => onActivate(member)}
+    >
+      {member.icon}
+      <span className="o-step-title">
+        {index}. {`${member.title}`}
+      </span>
+    </div>
+  );
+};
+
+export default StepTitle;

package/src/components/wizard/components/UncontrolledWizardComponent.tsx

@@ -0,0 +1,13 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import useWizardController from '../hooks/useWizardController';
+import { WizardProps } from '../typings';
+import ControlledWizardComponent from './ControlledWizardComponent';
+
+const UncontrolledWizardComponent: FCC<WizardProps> = (props) => {
+  const controller = useWizardController(props);
+
+  return <ControlledWizardComponent {...props} controller={controller} />;
+};
+
+export default UncontrolledWizardComponent;

package/src/components/wizard/components/WizardComponent.tsx

@@ -0,0 +1,15 @@
+import { FCC } from 'onekijs-framework';
+import { WizardProps } from '../typings';
+import React from 'react';
+import ControlledWizardComponent from './ControlledWizardComponent';
+import UncontrolledWizardComponent from './UncontrolledWizardComponent';
+
+const WizardComponent: FCC<WizardProps> = (props) => {
+  if (props.controller) {
+    return <ControlledWizardComponent {...props} controller={props.controller} />;
+  } else {
+    return <UncontrolledWizardComponent {...props} />;
+  }
+};
+
+export default WizardComponent;

package/src/components/wizard/components/WizardContainer.tsx

@@ -0,0 +1,134 @@
+import { FCC } from 'onekijs-framework';
+import React, { useCallback, useRef } from 'react';
+import { addClassname } from '../../../utils/style';
+import Button from '../../button';
+import SubmitButton from '../../button/SubmitButton';
+import Col from '../../grid/Col';
+import Row from '../../grid/Row';
+import { GridSize } from '../../grid/typings';
+import useWizardService from '../hooks/useWizardService';
+import { useWizardState } from '../hooks/useWizardState';
+import { StepState, WizardProps } from '../typings';
+import StepTitle from './StepTitle';
+
+type Error = {
+  stepIndex: number;
+  stepTitle: string;
+  errorMessage: string;
+};
+
+const WizardContainer: FCC<Omit<WizardProps, 'Component'>> = ({
+  cancelLabel = 'Cancel',
+  className,
+  children,
+  doneLabel = 'Submit',
+  nextLabel = 'Next',
+  onCancel,
+  onDone,
+  previousLabel = 'Previous',
+  title,
+  stepSize = 3,
+  TitleComponent = StepTitle,
+}) => {
+  const classNames = addClassname('o-wizard', className);
+  const state = useWizardState();
+  const service = useWizardService();
+
+  const activate = useCallback(
+    (step: StepState) => {
+      if (!step || step.disabled) return;
+      if (!step.active) {
+        service.activate(step.uid);
+      }
+    },
+    [service],
+  );
+
+  const errorRef = useRef<Error[]>([]);
+  errorRef.current = [];
+
+  const indexRef = useRef(0);
+  indexRef.current = 0;
+
+  return (
+    <Row className={classNames}>
+      <Col size={stepSize} className="o-wizard-step-panel">
+        {title && <div className="o-wizard-title">{title}</div>}
+        {state.members.map((step) => {
+          if (step.visible) {
+            indexRef.current++;
+          }
+          if (step.error !== undefined) {
+            errorRef.current.push({
+              stepIndex: indexRef.current,
+              stepTitle: step.title,
+              errorMessage: step.error,
+            });
+          }
+          return (
+            <TitleComponent
+              key={`step-title-${step.uid}`}
+              member={step}
+              onActivate={activate}
+              index={indexRef.current}
+            />
+          );
+        })}
+      </Col>
+      <Col size={(12 - stepSize) as GridSize} className="o-wizard-content-panel">
+        <div className="o-wizard-content">{children}</div>
+        <div className="o-wizard-control">
+          {onCancel && (
+            <Button
+              kind="primary"
+              pattern="flat"
+              className="o-wizard-control-button"
+              type="button"
+              onClick={() => onCancel()}
+            >
+              {cancelLabel}
+            </Button>
+          )}
+          {!service.isFirstStep() && (
+            <Button
+              kind="primary"
+              pattern="outline"
+              className="o-wizard-control-button"
+              onClick={() => service.previous()}
+              type="button"
+            >
+              {previousLabel}
+            </Button>
+          )}
+          {!service.isLastStep() && (
+            <Button
+              kind={service.isCurrentStepInVisibleError() ? 'danger' : 'primary'}
+              pattern="solid"
+              className="o-wizard-control-button"
+              disabled={service.isCurrentStepInVisibleError()}
+              onClick={() => service.next()}
+              type="button"
+            >
+              {nextLabel}
+            </Button>
+          )}
+          {service.isLastStep() && (
+            <SubmitButton
+              kind={errorRef.current.length > 0 ? 'danger' : 'success'}
+              pattern="solid"
+              className="o-wizard-control-button"
+              disabled={errorRef.current.length > 0}
+              onClick={onDone}
+              type="button"
+              showErrors={true}
+            >
+              {doneLabel}
+            </SubmitButton>
+          )}
+        </div>
+      </Col>
+    </Row>
+  );
+};
+
+export default WizardContainer;

package/src/components/wizard/components/WizardModalComponent.tsx

@@ -0,0 +1,15 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import Wizard from '..';
+import Modal from '../../modal';
+import { WizardModalProps } from '../typings';
+
+const WizardModalComponent: FCC<WizardModalProps> = ({ title, doneLabel = 'Submit', ...props }) => {
+  return (
+    <Modal {...props}>
+      <Wizard {...props} title={title} doneLabel={doneLabel} />
+    </Modal>
+  );
+};
+
+export default WizardModalComponent;

package/src/components/wizard/hooks/useStep.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+import { StepState } from '../typings';
+import useWizardService from './useWizardService';
+import { useWizardState } from './useWizardState';
+
+const useStep = (props: StepState & { uid: string }): StepState | undefined => {
+  const service = useWizardService();
+  const state = useWizardState();
+  const step = state.members[state.membersIndex[props.uid]];
+  useEffect(() => {
+    if (step === undefined) {
+      service.initMember(Object.assign({ uid: props.uid }, props));
+    }
+  }, [props, service, step]);
+  return step;
+};
+
+export default useStep;

package/src/components/wizard/hooks/useWizardController.ts

@@ -0,0 +1,27 @@
+import { useService } from 'onekijs-framework';
+import { UseWizardController, WizardState } from '../typings';
+import { WizardService } from '../WizardService';
+
+const useWizardController: UseWizardController = ({
+  animate = 300,
+  forwardOnly = true,
+  onCancel,
+  onDone,
+  onNext,
+  onPrevious,
+}) => {
+  const [_, service] = useService<WizardState, WizardService>(WizardService, {
+    members: [],
+    membersIndex: {},
+    animate,
+    forwardOnly,
+    onCancel,
+    onDone,
+    onNext,
+    onPrevious,
+  } as WizardState);
+
+  return service;
+};
+
+export default useWizardController;

package/src/components/wizard/hooks/useWizardService.ts

@@ -0,0 +1,11 @@
+import React, { useContext } from 'react';
+import { WizardService } from '../WizardService';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+export const WizardServiceContext = React.createContext<WizardService>(null!);
+
+const useWizardService = (): WizardService => {
+  return useContext(WizardServiceContext);
+};
+
+export default useWizardService;

package/src/components/wizard/hooks/useWizardState.ts

@@ -0,0 +1,7 @@
+import React, { useContext } from 'react';
+import { WizardState } from '../typings';
+
+export const WizardStateContext = React.createContext<WizardState>(null!);
+export const useWizardState = (): WizardState => {
+  return useContext(WizardStateContext);
+};

package/src/components/wizard/index.tsx

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