onekijs-ui 0.9.2 → 0.15.2

package/dist/theme/base.d.ts

@@ -0,0 +1,4 @@
+import { FCC } from 'onekijs-framework';
+import { Theme, ThemeProps } from '../styles/typings';
+export declare const baseTheme: (customTheme?: Partial<Theme>) => Theme;
+export declare const BaseTheme: FCC<ThemeProps>;

package/dist/theme/tailwind.d.ts

@@ -0,0 +1,5 @@
+import { FCC } from 'onekijs-framework';
+import { Palette, Theme, ThemeProps } from '../styles/typings';
+export declare const tailwindPalette: Palette;
+export declare const tailwindTheme: (customTheme?: Partial<Theme>) => Theme;
+export declare const TailwindTheme: FCC<ThemeProps>;

package/dist/utils/color.d.ts

@@ -1,7 +1,10 @@
-export declare const deriveColor: (color: string, gap: number, dark: boolean, newColorValue?: string | undefined) => string;
-export declare const hexToRgb: (hex: string) => {
-    r: number;
-    g: number;
-    b: number;
-} | null;
-export declare const rgbToHex: (r: number, g: number, b: number) => string;
+export declare const darken: (color: string, gap?: number, newColorValue?: string) => string;
+export declare const deriveColor: (color: string, gap: number | undefined, dark: boolean, newColorValue?: string) => string;
+export declare const lighten: (color: string, gap: number, newColorValue?: string) => string;
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+export declare const applyOpacity: (color: string, opacity: number | string) => string;

package/dist/utils/dom.d.ts

@@ -0,0 +1,9 @@
+import { CursorProperty } from 'csstype';
+export declare const clearSelection: () => void;
+export declare const forceCursor: (cursor?: CursorProperty) => void;
+export declare const getTranslateXY: (element: Element) => {
+    x: number;
+    y: number;
+};
+export declare const markBodyAsUnselectable: () => void;
+export declare const markBodyAsSelectable: () => void;

package/dist/utils/event.d.ts

@@ -1 +1,2 @@
-export declare const useClickOutside: (ref: React.MutableRefObject<HTMLElement> | HTMLElement | null, onClickOutside: (e: MouseEvent) => void) => void;
+export declare const useClickOutside: (ref: React.MutableRefObject<HTMLElement | null>, onClickOutside: (e: any) => void) => void;
+export declare const useFocusOutside: (ref: React.MutableRefObject<HTMLElement | null>, onFocusOutside: (e: FocusEvent) => void) => void;

package/dist/utils/formatter.d.ts

@@ -1,7 +1,7 @@
-import { AnonymousObject } from 'onekijs-core';
-import { Formatter } from '../styles/typings';
-export declare const booleanFormatter: Formatter<boolean>;
-export declare const themeFormatter: (category: string) => Formatter<string | number>;
-export declare const colorFormatter: (key: string, opacityKey?: string | undefined) => Formatter<string>;
-export declare const enumFormatter: <T>(values: AnonymousObject) => Formatter<T>;
-export declare const pxFormatter: Formatter<string | number>;
+import { AnonymousObject } from 'onekijs-framework';
+import { Formatter } from '../styles/typings';
+export declare const booleanFormatter: Formatter<boolean>;
+export declare const themeFormatter: (category: string) => Formatter<string | number>;
+export declare const colorFormatter: (key: string, opacityKey?: string) => Formatter<string>;
+export declare const enumFormatter: <T>(values: AnonymousObject) => Formatter<T>;
+export declare const pxFormatter: Formatter<string | number>;

package/dist/utils/popper.d.ts

@@ -1,4 +1,4 @@
-import { Modifier } from '@popperjs/core';
-export declare const sameWidthPopperModifier: Partial<Modifier<string, Record<string, unknown>>>;
-export declare const minWidthPopperModifier: Partial<Modifier<string, Record<string, unknown>>>;
-export declare const maxWidthPopperModifier: Partial<Modifier<string, Record<string, unknown>>>;
+import { Modifier } from '@popperjs/core';
+export declare const sameWidthPopperModifier: Partial<Modifier<string, Record<string, unknown>>>;
+export declare const minWidthPopperModifier: Partial<Modifier<string, Record<string, unknown>>>;
+export declare const maxWidthPopperModifier: Partial<Modifier<string, Record<string, unknown>>>;

package/dist/utils/size.d.ts

@@ -0,0 +1,3 @@
+import { GridSize } from '../components/grid/typings';
+export declare const calcSize: (size: string, fn: (size: number) => number) => string;
+export declare const gridSize: (size: GridSize) => string;

package/dist/utils/style.d.ts

@@ -1,7 +1,9 @@
-import { AnonymousObject } from 'onekijs-core';
-import { FlattenInterpolation, ThemeProps } from 'styled-components';
-import { CssProperty, Formatter } from '../styles/typings';
-export declare const toCss: <T>(property: string | null, formatter: Formatter<T> | undefined, value: T, variants: AnonymousObject) => FlattenInterpolation<ThemeProps<any>>;
-export declare const cssProperty: <T>(property: string | null, formatter?: Formatter<T> | undefined) => CssProperty<T>;
-export declare const preflight: () => FlattenInterpolation<ThemeProps<any>>;
-export declare const addClassname: (classname: string, existing?: string | undefined, after?: boolean) => string;
+import { AnonymousObject } from 'onekijs-framework';
+import { CSSProperties } from 'react';
+import { FlattenInterpolation, ThemeProps } from 'styled-components';
+import { CssProperty, Formatter } from '../styles/typings';
+export declare const toCss: <T>(property: string | null, formatter: Formatter<T> | undefined, value: T, variants: AnonymousObject) => FlattenInterpolation<ThemeProps<any>>;
+export declare const cssProperty: <T>(property: string | null, formatter?: Formatter<T> | undefined) => CssProperty<T>;
+export declare const preflight: () => FlattenInterpolation<ThemeProps<any>>;
+export declare const addClassname: (classname: string, existing?: string, after?: boolean) => string;
+export declare const addStyle: (style: CSSProperties, existing?: CSSProperties) => CSSProperties;

package/package.json

@@ -1,44 +1,56 @@
 {
   "name": "onekijs-ui",
-  "version": "0.9.2",
   "private": false,
-  "description": "Widgets for Oneki.js library",
-  "author": "oneki",
-  "license": "MIT",
-  "repository": "oneki/onekijs",
+  "version": "0.15.2",
+  "description": "Opiniated React framework built on top of Next.js",
+  "source": "src/index.ts",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
   "engines": {
-    "node": ">=10",
-    "npm": ">=5"
+    "node": ">=10"
   },
-  "scripts": {
-    "start": "tsdx watch",
-    "build": "tsdx build",
-    "test": "tsdx test --passWithNoTests",
-    "lint": "tsdx lint",
-    "prepare": "tsdx build"
+  "exports": {
+    ".": {
+      "import": "./dist/index.module.js",
+      "require": "./dist/index.js"
+    }
   },
-  "peerDependencies": {
-    "react": ">=16",
-    "react-dom": ">=16"
+  "module": "dist/index.module.js",
+  "unpkg": "dist/index.umd.js",
+  "scripts": {
+    "clean": "rimraf dist",
+    "build": "rimraf dist && rollup --config rollup.config.js",
+    "start": "rollup -w --config rollup.config.js"
   },
+  "author": "Oneki",
+  "license": "MIT",
   "dependencies": {
+    "@clr/city": "^1.1.0",
     "@popperjs/core": "^2.4.4",
-    "onekijs-core": "^0.9.2",
+    "onekijs-framework": "^0.15.2",
+    "react-icons": "^4.2.0",
     "react-popper": "^2.2.3",
-    "react-transition-group": "^4.4.1",
-    "react-virtual": "^2.2.1",
+    "react-popper-tooltip": "^4.2.0",
+    "react-virtual": "^2.10.0",
     "react-virtualized-auto-sizer": "^1.0.2",
     "react-window": "^1.8.5",
     "react-window-infinite-loader": "^1.0.5",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.3.5"
   },
-  "sideEffects": false,
   "devDependencies": {
-    "@types/react-transition-group": "^4.4.0",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
-    "@types/react-window": "^1.8.2"
+    "@types/react-window": "^1.8.2",
+    "microbundle": "^0.13.3",
+    "rollup": "^2.77.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   },
-  "gitHead": "04dfcd73015106f597a67138c1f8749708af9fe0"
+  "sideEffects": false,
+  "gitHead": "52e896d4a85be300f6d0a75b8b08f0aefefb416b"
 }

package/src/components/accordion/AccordionService.ts

@@ -0,0 +1,36 @@
+import { DefaultService, reducer, service } from 'onekijs-framework';
+import { AccordionState } from './typings';
+
+@service
+export class AccordionService extends DefaultService<AccordionState> {
+  @reducer
+  initPanel(uid: string, initialActive = false): void {
+    if (this.state.panels[uid] === undefined) {
+      this.state.panels[uid] = {
+        uid,
+        active: initialActive,
+      };
+    }
+  }
+
+  @reducer
+  collapse(uid: string): void {
+    const panel = this.state.panels[uid];
+    if (panel) {
+      panel.active = false;
+    }
+  }
+
+  @reducer
+  expand(uid: string): void {
+    const panel = this.state.panels[uid];
+    if (panel) {
+      if (!this.state.multiActive) {
+        Object.keys(this.state.panels).forEach((uid) => {
+          this.state.panels[uid].active = false;
+        });
+      }
+      panel.active = true;
+    }
+  }
+}

package/src/components/accordion/components/AccordionComponent.tsx

@@ -0,0 +1,37 @@
+import { FCC, useService } from 'onekijs-framework';
+import React from 'react';
+import { AccordionService } from '../AccordionService';
+import { AccordionServiceContext } from '../hooks/useAccordionService';
+import { AccordionStateContext } from '../hooks/useAccordionState';
+import { AccordionProps, AccordionState } from '../typings';
+import AccordionContainer from './AccordionContainer';
+
+/**
+ * This is the comment for AccordionComponent 2
+ *
+ * @example
+ * ```tsx
+ * <AccordionComponent multiActive="true" />
+ * ```
+ *
+ * @group Accordion
+ * @category Components
+ * @remarks #notStyled#
+ */
+const AccordionComponent: FCC<AccordionProps> = ({ Component = AccordionContainer, ...props }) => {
+  const [state, service] = useService(AccordionService, {
+    multiActive: props.multiActive,
+    panels: {},
+    animate: props.animate ?? 150,
+  } as AccordionState);
+
+  return (
+    <AccordionServiceContext.Provider value={service}>
+      <AccordionStateContext.Provider value={state}>
+        <Component {...props} />
+      </AccordionStateContext.Provider>
+    </AccordionServiceContext.Provider>
+  );
+};
+
+export default AccordionComponent;

package/src/components/accordion/components/AccordionContainer.tsx

@@ -0,0 +1,11 @@
+import { FCC } from 'onekijs-framework';
+import { AccordionProps } from '../typings';
+import React from 'react';
+import { addClassname } from '../../../utils/style';
+
+const AccordionContainer: FCC<Omit<AccordionProps, 'Component'>> = ({ className, children }) => {
+  const classNames = addClassname('o-accordion-container', className);
+  return <div className={classNames}>{children}</div>;
+};
+
+export default AccordionContainer;

package/src/components/accordion/components/AccordionPanel.tsx

@@ -0,0 +1,74 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import { CSSTransition } from 'react-transition-group';
+import useAccordionPanel from '../hooks/useAccordionPanel';
+import useAccordionService from '../hooks/useAccordionService';
+import { useAccordionState } from '../hooks/useAccordionState';
+import { AccordionPanelProps } from '../typings';
+import AccordionPanelTitle from './AccordionPanelTitle';
+
+const AccordionPanel: FCC<AccordionPanelProps<any>> = ({
+  title,
+  initialActive,
+  children,
+  Component = AccordionPanelTitle,
+}) => {
+  const panel = useAccordionPanel(initialActive);
+  const service = useAccordionService();
+  const { animate } = useAccordionState();
+
+  const toggle = () => {
+    if (!panel) return;
+    if (panel.active) {
+      service.collapse(panel.uid);
+    } else {
+      service.expand(panel.uid);
+    }
+  };
+
+  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);
+  };
+
+  if (!panel) {
+    return null;
+  }
+
+  return (
+    <div className={`o-accordion-panel${panel.active ? ' o-accordion-panel-active' : ''}`}>
+      <Component title={title} active={panel.active} onClick={toggle} />
+      <CSSTransition
+        in={panel.active}
+        classNames="o-accordion-animate"
+        timeout={animate}
+        mountOnEnter={false}
+        appear={false}
+        unmountOnExit={true}
+        onExiting={onExiting}
+        onEntering={onEntering}
+        onEntered={onEntered}
+      >
+        <div>
+          <div className="o-accordion-content">{children}</div>
+        </div>
+      </CSSTransition>
+    </div>
+  );
+};
+
+export default AccordionPanel;

package/src/components/accordion/components/AccordionPanelTitle.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import TogglerIcon from '../../icon/TogglerIcon';
+import { AccordionPanelTitleProps } from '../typings';
+
+const AccordionPanelTitle: FC<AccordionPanelTitleProps<any>> = ({ title, active, onClick }) => {
+  return (
+    <div className="o-accordion-panel-title" onClick={onClick}>
+      <TogglerIcon open={active} />
+      <span>{`${title}`}</span>
+    </div>
+  );
+};
+
+export default AccordionPanelTitle;

package/src/components/accordion/hooks/useAccordionPanel.ts

@@ -0,0 +1,19 @@
+import { useEffect, useId } from 'react';
+import { AccordionPanelState } from '../typings';
+import useAccordionService from './useAccordionService';
+import { useAccordionState } from './useAccordionState';
+
+const useAccordionPanel = (initialActive = false): AccordionPanelState | undefined => {
+  const uid = useId();
+  const service = useAccordionService();
+  const state = useAccordionState();
+  const panel = state.panels[uid];
+  useEffect(() => {
+    if (panel === undefined) {
+      service.initPanel(uid, initialActive);
+    }
+  });
+  return panel;
+};
+
+export default useAccordionPanel;

package/src/components/accordion/hooks/useAccordionService.ts

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

package/src/components/accordion/hooks/useAccordionState.ts

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

package/src/components/accordion/index.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+import AccordionComponent from './components/AccordionComponent';
+import { accordionStyle } from './style';
+
+/**
+ * Test Description
+ *
+ * @group Accordion
+ * @cateogry Components
+ *
+ * @example
+ * ```tsx
+ * <Accordion multiActive="true" />
+ * ```
+ *
+ * @see AccordionComponent
+ * @remarks #styled#
+ */
+const Accordion = styled(AccordionComponent)`
+  ${accordionStyle}
+`;
+
+export default Accordion;

package/src/components/accordion/style.ts

@@ -0,0 +1,72 @@
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import {
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  borderBottomWidth,
+  borderColor,
+  borderStyle,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderWidth,
+} from '../../styles/border';
+import { display } from '../../styles/display';
+import { iconHeight, iconWidth } from '../../styles/icon';
+import { cursor } from '../../styles/interactivity';
+import { overflowY } from '../../styles/overflow';
+import { marginTop, paddingX, paddingY } from '../../styles/spacing';
+import { transitionDuration, transitionProperty, transitionTimingFunction } from '../../styles/transition';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize, fontWeight } from '../../styles/typography';
+import { AccordionProps } from './typings';
+
+export const accordionStyle: ComponentStyle<AccordionProps> = ({ border = false, animate = 150, theme }) => {
+  const t = theme.accordion;
+  const bWidth = border ? t.borderWidth : 0;
+  return css`
+    .o-accordion-animate-enter-active, .o-accordion-animate-exit-active {
+      ${overflowY('hidden')}
+      ${transitionDuration(`${animate}ms`)}
+      ${transitionProperty('height,opacity')}
+      ${transitionTimingFunction('ease-in-out')}
+    }
+    .o-accordion-panel {
+      ${borderWidth(bWidth)}
+      ${borderTopLeftRadius(0, { 'first-child': t.borderRadius })}
+      ${borderTopRightRadius(0, { 'first-child': t.borderRadius })}
+      ${borderBottomLeftRadius(0, { 'last-child': t.borderRadius })}
+      ${borderBottomRightRadius(0, { 'last-child': t.borderRadius })}
+      ${borderBottomWidth(0, { 'last-child': bWidth })}
+      ${borderStyle(t.borderStyle)}
+      ${borderColor(t.borderColor)}
+    }
+
+    .o-accordion-panel-active {
+      .o-accordion-panel-title {
+        ${backgroundColor(t.activeBgColor, { hover: t.hoverBgColor })}
+        ${color(t.activeFontColor, { hover: t.activeFontColor })}
+      }
+      .o-accordion-content {
+        ${backgroundColor(t.activeBgColor, { hover: t.activeBgColor })}
+      }
+    }
+
+    .o-accordion-panel-title {
+      ${display('flex')}
+      ${alignItems('center')}
+      ${fontWeight(t.fontWeight)}
+      ${color(t.fontColor, { hover: t.hoverFontColor })}
+      ${fontSize(t.fontSize)}
+      ${cursor('pointer')}
+      ${paddingX(t.paddingX)}
+      ${paddingY(t.paddingY)}
+      ${backgroundColor(t.bgColor, { hover: t.hoverBgColor })}
+      .o-toggler-icon-container {
+        ${iconHeight(t.togglerIconHeight)};
+        ${iconWidth(t.togglerIconWidth)};
+        ${marginTop('-2px')}
+      }
+    }
+  `;
+};

package/src/components/accordion/typings.ts

@@ -0,0 +1,50 @@
+import { AnonymousObject, AnyFunction, FCC } from 'onekijs-framework';
+
+export type AccordionPanelProps<T = string> = {
+  initialActive?: boolean;
+  title: T;
+  Component?: FCC<AccordionPanelTitleProps<T>>;
+};
+
+export type AccordionPanelTitleProps<T = string> = {
+  title: T;
+  active: boolean;
+  onClick: AnyFunction;
+};
+
+export type AccordionPanelState = {
+  active: boolean;
+  uid: string;
+  collapsing?: boolean;
+  expanding?: boolean;
+};
+
+/**
+ * @group Accordion
+ * @category types
+ */
+export type AccordionProps = {
+  /**
+   * a flag to indicate if the border is visible or not
+   *
+   * @example test
+   * @defaultValue true
+   */
+  border?: boolean;
+  Component?: FCC<Omit<AccordionProps, 'Component'>>;
+  className?: string;
+  /**
+   * @defaultValue false
+   */
+  multiActive?: boolean;
+  /**
+   * @defaultValue 150
+   */
+  animate?: number;
+};
+
+export type AccordionState = {
+  panels: AnonymousObject<AccordionPanelState>;
+  multiActive?: boolean;
+  animate: number;
+};

package/src/components/button/DropdownButton.tsx

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

package/src/components/button/SubmitButton.tsx

@@ -0,0 +1,58 @@
+import { AnonymousObject, FCC, useSubmit, ValidationCode } from 'onekijs-framework';
+import React from 'react';
+import Button from '.';
+import Tooltip from '../tooltip';
+import { SubmitButtonProps } from './typings';
+
+const TooltipContent: React.FC<{ code: ValidationCode; fields: AnonymousObject<string> }> = ({ code, fields }) => {
+  if (code <= ValidationCode.Error) {
+    return (
+      <>
+        <div>Some fields are in {code === ValidationCode.Error ? 'in error' : 'loading'}</div>
+        {Object.keys(fields).map((fieldName, index) => (
+          <div key={`error-${index}`}>
+            <b>{fieldName}</b>: {fields[fieldName]}
+          </div>
+        ))}
+      </>
+    );
+  }
+  return null;
+};
+
+const SubmitButton: FCC<SubmitButtonProps> = React.memo((opts) => {
+  const { submitting, code, fields } = useSubmit();
+  const { showErrors, type = 'submit', ...props } = opts;
+  let disabled = props.disabled || false;
+
+  let errors = [];
+  if (code <= ValidationCode.Error) {
+    disabled = true;
+    if (showErrors) {
+      errors = Object.keys(fields);
+    }
+  }
+
+  // eslint-disable-next-line react/prop-types
+  let children = props.children;
+  if (submitting) {
+    children = <>Loading...</>;
+    disabled = true;
+  }
+
+  return (
+    <Tooltip
+      content={errors.length > 0 ? <TooltipContent code={code} fields={fields} /> : undefined}
+      placement="top"
+      kind="danger"
+      delayHide={0}
+    >
+      <Button {...props} disabled={disabled} type={type}>
+        {children ? children : 'Submit'}
+      </Button>
+    </Tooltip>
+  );
+});
+
+SubmitButton.displayName = 'SubmitButton';
+export default SubmitButton;

package/src/components/button/components/ButtonComponent.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { addClassname } from '../../../utils/style';
+import { ButtonProps } from '../typings';
+
+const ButtonComponent = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
+  const { kind, pattern, className, loading, IconComponent, onClick, ...buttonProps } = props;
+  let classNames = addClassname('o-button', className);
+  if (loading) {
+    classNames = addClassname('o-button-loading', classNames);
+  }
+  if (props.disabled) {
+    classNames = addClassname('o-button-disabled', classNames);
+  }
+  return (
+    <span className={classNames} onClick={onClick}>
+      {IconComponent && <IconComponent {...props} onClick={undefined} className="o-button-icon" />}
+      <button {...buttonProps} ref={ref} className="o-button-content" />
+    </span>
+  );
+});
+
+ButtonComponent.displayName = 'Button';
+
+export default ButtonComponent;