onekijs-ui 0.9.2 → 0.15.2

package/src/components/tab/TabsService.ts

@@ -0,0 +1,192 @@
+import { ContainerValidation, DefaultService, reducer, service, ucfirst, ValidationCode } from 'onekijs-framework';
+import { ReactNode } from 'react';
+import { TabsState, TabState } from './typings';
+
+@service
+export class TabsService<
+  M extends TabState = TabState,
+  S extends TabsState<M> = TabsState<M>,
+> extends DefaultService<S> {
+  @reducer
+  activate(uid: string): void {
+    const currentMember = this.state.members[this.getCurrentActiveIndex()];
+    if (currentMember) {
+      this.touched(currentMember.uid);
+    }
+    const member = this.getMember(uid);
+    if (member) {
+      this.state.members.forEach((t) => {
+        t.active = false;
+      });
+      member.active = true;
+      this.state.active = uid;
+      this.touching(this.state.active);
+    }
+  }
+
+  @reducer
+  disable(uid: string): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.disabled = true;
+    }
+  }
+
+  @reducer
+  enable(uid: string): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.disabled = false;
+    }
+  }
+
+  getCurrentActiveIndex(): number {
+    return this.state.members.findIndex((m) => m.uid === this.state.active);
+  }
+
+  getMember(uid: string): M | undefined {
+    return this.state.members[this.state.membersIndex[uid]];
+  }
+
+  @reducer
+  hide(uid: string): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.visible = false;
+    }
+  }
+
+  @reducer
+  initMember(state: M): void {
+    if (!Object.keys(this.state.membersIndex).includes(state.uid)) {
+      const firstTab = this.state.members.length === 0;
+      this.state.membersIndex[state.uid] = this.state.members.length;
+      this.state.members.push(state);
+      if (!state.disabled && state.visible && (state.active || firstTab)) {
+        this.activate(state.uid);
+      }
+    }
+  }
+
+  @reducer
+  onValidationChange(uid: string, touchedValidation: ContainerValidation, allValidation: ContainerValidation): void {
+    const member = this.getMember(uid);
+    if (!member) return;
+
+    this._onValidationChange(uid, touchedValidation, true);
+    this._onValidationChange(uid, allValidation, false);
+  }
+
+  @reducer
+  remove(uid: string): void {
+    const index = this.state.membersIndex[uid];
+    delete this.state.membersIndex[uid];
+    this.state.members.splice(index, 1);
+  }
+
+  @reducer
+  setClosable(uid: string, closable: boolean): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.closable = closable;
+    }
+  }
+
+  @reducer
+  setError(uid: string, message: string | null): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.error = message === null ? undefined : message;
+    }
+  }
+
+  @reducer
+  setIcon(uid: string, icon?: ReactNode): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.icon = icon;
+    }
+  }
+
+  @reducer
+  setLoading(uid: string, loading: boolean): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.loading = loading;
+    }
+  }
+
+  @reducer
+  setTitle(uid: string, title: string): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.title = title;
+    }
+  }
+
+  @reducer
+  setWarning(uid: string, message: string | null): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.warning = message === null ? undefined : message;
+    }
+  }
+
+  @reducer
+  show(uid: string): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.visible = true;
+    }
+  }
+
+  @reducer
+  touched(uid: string): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.touched = true;
+    }
+  }
+
+  @reducer
+  touching(uid: string): void {
+    const member = this.getMember(uid);
+    if (member) {
+      member.touching = true;
+    }
+  }
+
+  _onValidationChange(uid: string, validation: ContainerValidation, touching: boolean): void {
+    const getProp = (name: string): string => {
+      return touching ? `touching${ucfirst(name)}` : name;
+    };
+
+    const member = this.getMember(uid);
+    if (!member) return;
+
+    const error = getProp('error') as 'error' | 'touchingError';
+    const warning = getProp('warning') as 'warning' | 'touchingWarning';
+
+    switch (validation.code) {
+      case ValidationCode.Loading:
+        if (!touching) member.loading = true;
+        break;
+      case ValidationCode.Error:
+        if (!touching) member.loading = false;
+        member[error] = validation.message;
+        break;
+      case ValidationCode.Warning:
+        if (!touching) member.loading = false;
+        member[error] = undefined;
+        member[warning] = validation.message;
+        break;
+      case ValidationCode.Ok:
+      case ValidationCode.None:
+        if (!touching) member.loading = false;
+        member[error] = undefined;
+        member[warning] = undefined;
+        if (!touching) member.success = true;
+        break;
+    }
+  }
+}

package/src/components/tab/components/ControlledTabsComponent.tsx

@@ -0,0 +1,18 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import { TabsServiceContext } from '../hooks/useTabsService';
+import { TabsStateContext } from '../hooks/useTabsState';
+import { ControlledTabsProps } from '../typings';
+import TabsContainer from './TabsContainer';
+
+const ControlledTabsComponent: FCC<ControlledTabsProps> = ({ Component = TabsContainer, controller, ...props }) => {
+  return (
+    <TabsServiceContext.Provider value={controller}>
+      <TabsStateContext.Provider value={controller.state}>
+        <Component {...props} />
+      </TabsStateContext.Provider>
+    </TabsServiceContext.Provider>
+  );
+};
+
+export default ControlledTabsComponent;

package/src/components/tab/components/Tab.tsx

@@ -0,0 +1,55 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import useTab from '../hooks/useTab';
+import { useTabsState } from '../hooks/useTabsState';
+import { TabProps } from '../typings';
+
+const Tab: FCC<TabProps> = ({
+  title,
+  active = false,
+  disabled = false,
+  visible = true,
+  closable = false,
+  children,
+  icon,
+  uid,
+}) => {
+  const tab = useTab({
+    title,
+    active,
+    disabled,
+    visible,
+    closable,
+    icon,
+    loading: false,
+    touched: false,
+    touching: false,
+    uid: uid === undefined ? title : uid,
+  });
+
+  const onEnter = (node: HTMLElement) => {
+    node.style.opacity = '0';
+  };
+
+  const { animate } = useTabsState();
+
+  const onEntering = (node: HTMLElement) => {
+    setTimeout(() => {
+      node.style.opacity = '1';
+      node.style.transition = `opacity ${animate}ms ease-in-out`;
+    }, 0);
+  };
+
+  if (!tab || !tab.active) {
+    return null;
+  }
+
+  return (
+    <CSSTransition in={true} timeout={animate} appear={true} onEnter={onEnter} onEntering={onEntering}>
+      <div className="o-tab">{children}</div>
+    </CSSTransition>
+  );
+};
+
+export default Tab;

package/src/components/tab/components/TabTitle.tsx

@@ -0,0 +1,18 @@
+import React, { FC } from 'react';
+import { TabTitleProps } from '../typings';
+
+const TabTitle: FC<TabTitleProps> = ({ member, onActivate }) => {
+  return (
+    <div
+      className={`o-tab${member.active ? ' o-tab-active' : ' o-tab-inactive'}${
+        member.disabled ? ' o-tab-disabled' : ' o-tab-enabled'
+      }${member.visible ? ' o-tab-visible' : ' o-tab-hidden'}`}
+      onClick={() => onActivate(member)}
+    >
+      {member.icon}
+      <span className="o-tab-title">{`${member.title}`}</span>
+    </div>
+  );
+};
+
+export default TabTitle;

package/src/components/tab/components/TabsComponent.tsx

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

package/src/components/tab/components/TabsContainer.tsx

@@ -0,0 +1,36 @@
+import { FCC } from 'onekijs-framework';
+import React, { useCallback } from 'react';
+import { addClassname } from '../../../utils/style';
+import useTabsService from '../hooks/useTabsService';
+import { useTabsState } from '../hooks/useTabsState';
+import { TabsProps, TabState } from '../typings';
+import TabTitle from './TabTitle';
+
+const TabsContainer: FCC<Omit<TabsProps, 'Component'>> = ({ className, children, TitleComponent = TabTitle }) => {
+  const classNames = addClassname('o-tabs', className);
+  const state = useTabsState();
+  const service = useTabsService();
+
+  const activate = useCallback(
+    (tab: TabState) => {
+      if (!tab || tab.disabled) return;
+      if (!tab.active) {
+        service.activate(tab.uid);
+      }
+    },
+    [service],
+  );
+
+  return (
+    <div className={classNames}>
+      <div className="o-tabs-title">
+        {state.members.map((tab) => {
+          return <TitleComponent key={tab.uid} member={tab} onActivate={activate} />;
+        })}
+      </div>
+      <div className="o-tabs-content">{children}</div>
+    </div>
+  );
+};
+
+export default TabsContainer;

package/src/components/tab/components/UncontrolledTabsComponent.tsx

@@ -0,0 +1,13 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import useTabsController from '../hooks/useTabsController';
+import { TabsProps } from '../typings';
+import ControlledTabsComponent from './ControlledTabsComponent';
+
+const UncontrolledTabsComponent: FCC<TabsProps> = (props) => {
+  const controller = useTabsController({ animate: props.animate });
+
+  return <ControlledTabsComponent {...props} controller={controller} />;
+};
+
+export default UncontrolledTabsComponent;

package/src/components/tab/hooks/useTab.ts

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

package/src/components/tab/hooks/useTabsController.ts

@@ -0,0 +1,15 @@
+import { useService } from 'onekijs-framework';
+import { TabsService } from '../TabsService';
+import { TabsState, UseTabsController } from '../typings';
+
+const useTabsController: UseTabsController = ({ animate }) => {
+  const [_, service] = useService<TabsState, TabsService>(TabsService, {
+    members: [],
+    membersIndex: {},
+    animate: animate ?? 300,
+  } as TabsState);
+
+  return service;
+};
+
+export default useTabsController;

package/src/components/tab/hooks/useTabsService.ts

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

package/src/components/tab/hooks/useTabsState.ts

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

package/src/components/tab/index.tsx

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

package/src/components/tab/style.ts

@@ -0,0 +1,78 @@
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import {
+  borderBottomColor,
+  borderBottomStyle,
+  borderBottomWidth,
+  borderRightColor,
+  borderRightStyle,
+  borderRightWidth,
+} from '../../styles/border';
+import { display } from '../../styles/display';
+import { flexDirection } from '../../styles/flex';
+import { cursor } from '../../styles/interactivity';
+import { marginBottom, marginLeft, marginRight, marginTop, paddingTop, paddingX, paddingY } from '../../styles/spacing';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize, fontWeight } from '../../styles/typography';
+import { TabsProps } from './typings';
+
+export const tabsStyle: ComponentStyle<TabsProps> = ({ layout = 'horizontal', theme }) => {
+  const t = theme.tab;
+  const borderWidthFn = layout === 'horizontal' ? borderBottomWidth : borderRightWidth;
+  const borderStyleFn = layout === 'horizontal' ? borderBottomStyle : borderRightStyle;
+  const borderColorFn = layout === 'horizontal' ? borderBottomColor : borderRightColor;
+  const marginBeforeFn = layout === 'horizontal' ? marginLeft : marginTop;
+  const marginAfterFn = layout === 'horizontal' ? marginRight : marginBottom;
+  const marginSideFn = layout === 'horizontal' ? marginBottom : marginRight;
+  return css`
+    ${display('flex')}
+    ${flexDirection(layout === 'horizontal' ? 'column' : 'row')}
+    .o-tabs-title {
+      ${display('flex')}
+      ${flexDirection(layout === 'horizontal' ? 'row' : 'column')}
+      ${alignItems(layout === 'horizontal' ? 'flex-end' : 'flex-start')}
+      ${borderStyleFn(t.borderStyle)}
+      ${borderWidthFn(t.borderWidth)}
+      ${borderColorFn(t.borderColor)}
+    }
+
+    .o-tab {
+      ${paddingX(t.paddingX)}
+      ${paddingY(t.paddingY)}
+      ${marginBeforeFn(t.marginBefore)}
+      ${marginAfterFn(t.marginAfter)}
+      ${marginSideFn(`-${t.borderWidth}`)}
+      &.o-tab-active {
+        ${borderWidthFn(t.activeBorderWidth)}
+        ${borderStyleFn(t.activeBorderStyle)}
+        ${borderColorFn(t.activeBorderColor)}
+        ${color(t.activeFontColor)}
+        ${fontWeight(t.activeFontWeight)}
+        ${fontSize(t.activeFontSize)}
+        &.o-tab-enabled {
+          ${cursor('default')}
+        }
+      }
+      &.o-tab-inactive {
+        ${borderWidthFn(t.activeBorderWidth)}
+        ${borderStyleFn(t.activeBorderStyle)}
+        ${borderColorFn('transparent', { hover: t.hoverBorderColor })}
+        ${color(t.fontColor)}
+        ${fontWeight(t.fontWeight)}
+        ${fontSize(t.fontSize)}
+        ${backgroundColor(t.bgColor, { hover: t.hoverBgColor })}
+      }
+      &.o-tab-enabled {
+        ${cursor(t.cursor)}
+      }
+    }
+
+    .o-tabs-content {
+      ${paddingTop('lg')}
+    }
+
+
+
+  `;
+};

package/src/components/tab/typings.ts

@@ -0,0 +1,59 @@
+import { AnonymousObject, AnyFunction, FCC } from 'onekijs-framework';
+import { ReactNode } from 'react';
+import { TabsService } from './TabsService';
+
+export type TabProps = {
+  active?: boolean;
+  title: string;
+  visible?: boolean;
+  closable?: boolean;
+  disabled?: boolean;
+  icon?: ReactNode;
+  uid?: string;
+};
+
+export type TabTitleProps<M extends TabState = TabState> = {
+  member: M;
+  onActivate: (member: M) => void;
+};
+
+export type TabState = {
+  active: boolean;
+  closable: boolean;
+  disabled: boolean;
+  error?: string;
+  icon?: ReactNode;
+  loading: boolean;
+  success?: boolean;
+  title: string;
+  touching: boolean;
+  touched: boolean;
+  touchingError?: string;
+  touchingWarning?: string;
+  uid: string;
+  visible: boolean;
+  warning?: string;
+};
+
+export type TabsProps = {
+  Component?: FCC<Omit<TabsProps, 'Component'>>;
+  TitleComponent?: React.FC<TabTitleProps>;
+  className?: string;
+  animate?: number;
+  controller?: TabsService;
+  onAdd?: AnyFunction;
+  layout?: 'horizontal' | 'vertical';
+};
+
+export type ControlledTabsProps = TabsProps & {
+  controller: TabsService;
+};
+
+export type TabsState<M extends TabState = TabState> = {
+  members: M[];
+  membersIndex: AnonymousObject<number>;
+  animate: number;
+  active?: string;
+};
+
+export type UseTabsController = (props: { animate?: number }) => TabsService;

package/src/components/table/FormTable.tsx

@@ -0,0 +1,38 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+import FieldLayout from '../field/FieldLayout';
+import useFieldLayout from '../field/hooks/useFieldLayout';
+import FormTableComponent from './components/FormTableComponent';
+import { tableStyle } from './style';
+import { FormTableProps, TableItem } from './typings';
+
+const StyledFormTableComponent = styled(FormTableComponent)`
+  ${tableStyle}
+`;
+
+const FormTable: FC<FormTableProps<any, TableItem<any>>> = React.memo((props) => {
+  const [fieldLayoutProps, fieldComponentProps] = useFieldLayout<FormTableProps<any, TableItem<any>>>(
+    Object.assign(
+      {
+        defaultValue: props.defaultValue === undefined ? [] : props.defaultValue,
+      },
+      props,
+    ),
+  );
+  const Component = props.FieldComponent || StyledFormTableComponent;
+
+  return (
+    <FieldLayout {...fieldLayoutProps} required={props.required}>
+      <Component
+        {...fieldComponentProps}
+        name={props.name}
+        required={props.required}
+        minLength={props.minLength ?? props.min}
+        maxLength={props.maxLength ?? props.max}
+      />
+    </FieldLayout>
+  );
+});
+
+FormTable.displayName = 'FormTable';
+export default FormTable;