onekijs-ui 0.9.2 → 0.15.2

package/src/components/table/typings.ts

@@ -0,0 +1,322 @@
+import {
+  Collection,
+  CollectionBroker,
+  CollectionBy,
+  CollectionProxy,
+  FormFieldProps,
+  Item,
+  ItemAdaptee,
+  QueryFilterOrCriteria,
+  QuerySortBy,
+  UseCollectionOptions,
+  ValidationStatus,
+} from 'onekijs-framework';
+import React, { FC } from 'react';
+import { TshirtSize } from '../../styles/typings';
+import { CheckboxProps } from '../checkbox/typings';
+import { FieldLayoutProps } from '../field/typings';
+import { InputProps } from '../input/typings';
+import { ListItemProps, ListItems, ListNotFoundProps, ListState, UseListOptions } from '../list/typings';
+import { SelectItem, SelectProps } from '../select/typings';
+
+export type ArrayTableProps<T = any, I extends TableItem<T> = TableItem<T>> = TableConfig<T, I> & {
+  adapter?: TableItemAdapter<T>;
+  columns?: TableColumn<T, I>[];
+  dataSource?: string | T[];
+  fetchOnce?: boolean;
+  selected?: T[];
+};
+
+export type ControllerTableProps<
+  T = any,
+  I extends TableItem<T> = TableItem<T>,
+  S extends TableState<T, I> = TableState<T, I>,
+  C extends TableController<T, I, S> = TableController<T, I, S>,
+> = TableConfig<T, I> & {
+  controller: CollectionProxy<T, I, S, C>;
+};
+
+export type FormTableProps<
+  T = any,
+  I extends TableItem<T> = TableItem<T>,
+  S extends TableState<T, I> = TableState<T, I>,
+  C extends TableController<T, I, S> = TableController<T, I, S>,
+> = ControllerTableProps<T, I, S, C> &
+  FormFieldProps &
+  FieldLayoutProps & {
+    addLabel?: string;
+    format?: 'id' | 'object' | 'auto';
+    defaultValue?: T[];
+    FieldComponent?: React.FC<FormTableProps<T, I, S, C>>;
+    value?: T[];
+    onFocus?: () => void;
+    onBlur?: () => void;
+    onChange?: (value: T[]) => void;
+    status?: ValidationStatus;
+    size?: TshirtSize;
+  };
+
+export type FormTableContext<T = any> = {
+  tableName: string;
+  onSelect: (item: TableItem<T>, selected: boolean) => void;
+  addLabel: string;
+  required?: boolean;
+  maxLength?: number;
+  minLength?: number;
+};
+
+export type TableBodyCellProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  className?: string;
+  colIndex: number;
+  column: TableColumn<T, I>;
+  rowId?: string | number;
+  rowIndex: number;
+  item: I;
+  data: T;
+};
+
+export type Cell<T = any, I extends TableItem<T> = TableItem<T>> = FC<TableBodyCellProps<T, I>>;
+
+export type TableBodyProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  className?: string;
+  columns: TableColumn<T, I>[];
+  items: (I | undefined)[];
+  contentRef: React.RefObject<HTMLDivElement>;
+  tableRef: React.RefObject<HTMLDivElement>;
+};
+
+export type TableBodyRowProps<T = any, I extends TableItem<T> = TableItem<T>> = Omit<
+  ListItemProps<T, I>,
+  'CellComponent'
+> & {
+  className?: string;
+  CellComponent?: React.FC<Omit<TableBodyCellProps<T, I>, 'data'>>;
+  columns: TableColumn<T, I>[];
+  onExpand?: (item: I | undefined, index: number) => void;
+  onExpanding?: (item: I | undefined, index: number) => void;
+  onExpanded?: (item: I | undefined, index: number) => void;
+  onCollapse?: (item: I | undefined, index: number) => void;
+  onCollapsing?: (item: I | undefined, index: number) => void;
+  onCollapsed?: (item: I | undefined, index: number) => void;
+};
+
+export type TableConfig<T = any, I extends TableItem<T> = TableItem<T>> = {
+  bodyClassName?: string;
+  BodyComponent?: React.FC<TableBodyProps<T, I>>;
+  className?: string;
+  ExpandedComponent?: React.FC<TableExpandedProps<T, I>>;
+  filterable?: boolean;
+  fit?: boolean;
+  fixHeader?: boolean;
+  footer?: boolean;
+  footerClassName?: string;
+  FooterComponent?: React.FC<TableFooterProps<T, I>>;
+  grow?: string;
+  header?: boolean;
+  headerClassName?: string;
+  HeaderComponent?: React.FC<TableHeaderProps<T, I>>;
+  height?: string;
+  highlightRow?: boolean;
+  increment?: number;
+  LoadingComponent?: React.FC;
+  LoadingRowComponent?: React.FC;
+  NotFoundComponent?: React.FC<TableNotFoundProps> | null;
+  onRowClick?: TableRowHandler<T, I>;
+  onRowEnter?: TableRowHandler<T, I>;
+  onRowLeave?: TableRowHandler<T, I>;
+  onRowOver?: TableRowHandler<T, I>;
+  onRowOut?: TableRowHandler<T, I>;
+  preload?: number;
+  rowClassName?: string | ((item: I | undefined, rowIndex: number, columns: TableColumn<T, I>[]) => string);
+  RowComponent?: React.FC<TableBodyRowProps<T, I>>;
+  sortable?: boolean;
+  stripRows?: boolean;
+};
+
+export type TableController<
+  T = any,
+  I extends TableItem<T> = TableItem<T>,
+  S extends TableState<T, I> = TableState<T, I>,
+> = Collection<T, I, S> & {
+  addColumn(column: TableColumn<T, I>, position?: number): void;
+  addSelected<B extends keyof CollectionBy<T, I>>(by: B, target: CollectionBy<T, I>[B] | CollectionBy<T, I>[B][]): I[];
+  columns: TableColumn<T, I>[];
+  initCell(
+    rowIndex: number | 'header-title' | 'header-filter' | 'footer',
+    colId: string,
+    ref: React.RefObject<HTMLDivElement>,
+  ): void;
+  removeColumn(id: string): void;
+  removeSelected<B extends keyof CollectionBy<T, I>>(
+    by: B,
+    target: CollectionBy<T, I>[B] | CollectionBy<T, I>[B][],
+  ): I[];
+  setSelected<B extends keyof CollectionBy<T, I>>(by: B, target: CollectionBy<T, I>[B] | CollectionBy<T, I>[B][]): I[];
+  toggle(item: I): void;
+};
+
+export type TableColumn<T, I extends TableItem<T> = TableItem<T>> = TableColumnSpec<T, I> & {
+  computedWidth?: TableColumnComputedWidth;
+};
+
+export type TableColumnSpec<T, I extends TableItem<T> = TableItem<T>> = {
+  className?: string | ((item: I, column: TableColumn<T, I>, rowIndex: number) => string);
+  CellComponent?: Cell<T, I>;
+  footerClassName?: string | ((column: TableColumn<T, I>) => string);
+  FooterComponent?: React.FC<TableFooterCellProps<T, I>>;
+  filterable?: boolean;
+  FilterComponent?: React.FC<TableHeaderCellProps<T, I>>;
+  headerClassName?: string | ((column: TableColumn<T, I>) => string);
+  id: string;
+  maxWidth?: string;
+  minWidth?: string;
+  sortable?: boolean;
+  title?: string;
+  TitleComponent?: React.FC<TableHeaderCellProps<T, I>>;
+  weight?: number;
+  width?: string;
+};
+
+export type TableColumnWidth = {
+  auto?: boolean;
+  grow?: boolean;
+  force?: boolean;
+  unit?: 'px' | '%';
+  value?: number;
+};
+
+export type TableColumnComputedWidth = {
+  width?: string;
+  minWidth?: string;
+};
+
+export type TableExpandedProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  item: I;
+  rowId?: string | number;
+  rowIndex: number;
+};
+
+export type TableFooterCellProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  className?: string;
+  colIndex: number;
+  column: TableColumn<T, I>;
+};
+
+export type TableFooterProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  className?: string;
+  columns: TableColumn<T, I>[];
+};
+
+export type TableHeaderCellProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  className?: string;
+  colIndex: number;
+  column: TableColumn<T, I>;
+  filter?: QueryFilterOrCriteria;
+  filterable: boolean;
+  sort?: QuerySortBy;
+  sortable: boolean;
+};
+
+export type TableHeaderProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  className?: string;
+  columns: TableColumn<T, I>[];
+};
+
+export type TableItem<T = any> = Item<T> & {
+  expanded?: boolean;
+};
+
+export type TableItemAdaptee = ItemAdaptee;
+
+export type TableItemAdapter<T = any> = (data: T) => TableItemAdaptee;
+
+export type TableRowHandler<T = any, I extends TableItem<T> = TableItem<T>> = (item: I, index: number) => void;
+
+export type TableItems<T = any> = ListItems<T>;
+
+export type TableNotFoundProps = ListNotFoundProps;
+
+export type TableProps<
+  T = any,
+  I extends TableItem<T> = TableItem<T>,
+  S extends TableState<T, I> = TableState<T, I>,
+  C extends TableController<T, I, S> = TableController<T, I, S>,
+> = TableConfig<T, I> & {
+  adapter?: TableItemAdapter<T>;
+  controller?: CollectionProxy<T, I, S, C>;
+  columns?: TableColumn<T, I>[];
+  dataSource?: string | T[];
+  fetchOnce?: boolean;
+  selected?: T[];
+};
+
+export type TableSortProps<T = any, I extends TableItem<T> = TableItem<T>> = {
+  column: TableColumn<T, I>;
+  sort?: QuerySortBy;
+};
+
+export type TableState<T = any, I extends TableItem<T> = TableItem<T>> = ListState<T, I> & {
+  adapter?: TableItemAdapter<T>;
+  columns: TableColumn<T, I>[];
+  dataSource?: T[] | string;
+  selected?: string[];
+};
+
+export type TableColumnsState<T = any, I extends TableItem<T> = TableItem<T>> = {
+  columns: TableColumn<T, I>[];
+};
+
+export type CheckboxColumn<T = any, I extends TableItem<T> = TableItem<T>> = TableColumn<T, I>;
+
+export type InputColumn<T = any, I extends TableItem<T> = TableItem<T>> = TableColumn<T, I>;
+
+export type SelectColumn<T = any, I extends TableItem<T> = TableItem<T>> = TableColumn<T, I> & {
+  broker: CollectionBroker<T, I>;
+};
+
+export type UseLinkColumnOptions<T = any, I extends TableItem<T> = TableItem<T>> = Omit<
+  TableColumnSpec<T, I>,
+  'CellComponent'
+> & {
+  href: string | ((item: I) => string);
+};
+
+export type UseCheckboxColumnOptions<T = any, I extends TableItem<T> = TableItem<T>> = Omit<
+  TableColumnSpec<T, I>,
+  'CellComponent'
+> &
+  Omit<FormFieldProps, 'name'> &
+  Omit<CheckboxProps, 'className' | 'onFocus' | 'onChange' | 'onBlur' | 'defaultValue'> & {
+    CellComponent?: (options: UseCheckboxColumnOptions<T, I>) => React.FC<TableBodyCellProps<T, I>>;
+    defaultValue?: boolean;
+  };
+
+export type UseInputColumnOptions<T = any, I extends TableItem<T> = TableItem<T>> = Omit<
+  TableColumnSpec<T, I>,
+  'CellComponent'
+> &
+  Omit<FormFieldProps, 'name'> &
+  Omit<InputProps, 'className' | 'onFocus' | 'onChange' | 'onBlur'> & {
+    CellComponent?: (options: UseInputColumnOptions<T, I>) => React.FC<TableBodyCellProps<T, I>>;
+  };
+
+export type UseSelectColumnOptions<
+  T = any,
+  I extends TableItem<T> = TableItem<T>,
+  F = any,
+  FI extends SelectItem<F> = SelectItem<F>,
+> = Omit<TableColumnSpec<T, I>, 'CellComponent'> &
+  Omit<SelectProps, 'className' | 'onFocus' | 'onChange' | 'onBlur' | 'items'> &
+  Omit<FormFieldProps, 'name'> &
+  UseCollectionOptions<F, FI> & {
+    dataSource: string | F[];
+    CellComponent?: (
+      options: UseSelectColumnOptions<F, FI>,
+      broker: CollectionBroker<F, FI>,
+    ) => React.FC<TableBodyCellProps<T, I>>;
+  };
+
+export type UseTableOptions<T = any, I extends TableItem<T> = TableItem<T>> = UseListOptions<T, I> & {
+  adapter?: TableItemAdapter<T>;
+  selected?: T[];
+};

package/src/components/table/util.ts

@@ -0,0 +1,52 @@
+import { isQueryFilterCriteria, QueryFilterOrCriteria } from 'onekijs-framework';
+import { CSSProperties } from 'react';
+import { TableColumn, TableItem } from './typings';
+
+export const getCellWidth = (column: TableColumn<any, TableItem<any>>, fit?: boolean, grow?: string): CSSProperties => {
+  const style: CSSProperties = {};
+  if (column.computedWidth) {
+    return column.computedWidth;
+  } else if (column.width) {
+    return { width: column.width };
+  } else {
+    const minWidth = column.minWidth;
+    if (minWidth) {
+      if (fit) {
+        style.width = minWidth;
+      } else {
+        style.minWidth = minWidth;
+      }
+    }
+
+    if (grow === column.id) {
+      style.flexGrow = 1;
+    } else if (!grow) {
+      style.flexGrow = column.weight || 1;
+      style.flexBasis = (column.weight || 1) + 'px';
+    } else {
+      style.flexBasis = (column.weight || 1) + 'px';
+    }
+
+    if (column.width) {
+      if (fit) {
+        style.width = column.width;
+      } else {
+        style.minWidth = column.width;
+      }
+    }
+    return style;
+  }
+};
+
+export const getValueFromFilter = (filter?: QueryFilterOrCriteria): string => {
+  if (filter === undefined) {
+    return '';
+  }
+  if (isQueryFilterCriteria(filter)) {
+    return `${filter.value || ''}`;
+  }
+  if (isQueryFilterCriteria(filter.criterias[0])) {
+    return `${filter.criterias[0].value || ''}`;
+  }
+  return '';
+};

package/src/components/tag/components/TagComponent.tsx

@@ -0,0 +1,15 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import { addClassname } from '../../../utils/style';
+import { TagProps } from '../typings';
+
+const TagComponent: FCC<TagProps> = ({ className, children, onClick, icon }) => {
+  return (
+    <div className={addClassname('o-tag', className)} onClick={onClick}>
+      {icon && <span className="o-tag-icon">{icon}</span>}
+      {children}
+    </div>
+  );
+};
+
+export default TagComponent;

package/src/components/tag/index.tsx

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

package/src/components/tag/style.ts

@@ -0,0 +1,62 @@
+import { PaddingProperty } from 'csstype';
+import { css } from 'styled-components';
+import { alignItems } from '../../styles/alignment';
+import { backgroundColor } from '../../styles/background';
+import { borderRadius } from '../../styles/border';
+import { display } from '../../styles/display';
+import { cursor } from '../../styles/interactivity';
+import { marginBottom, marginLeft, marginRight, marginTop, paddingTop, paddingX } from '../../styles/spacing';
+import { ComponentStyle, SpacingPropertyTheme, TLength } from '../../styles/typings';
+import { color, fontSize, lineHeight } from '../../styles/typography';
+import { TagProps } from './typings';
+
+export const tagStyle: ComponentStyle<TagProps> = ({
+  theme,
+  kind,
+  bgColor = 'primary',
+  fontColor = 'white',
+  size = 'small',
+  onClick,
+  marginBottom: mb = 0,
+  marginLeft: ml = 0,
+  marginRight: mr = 0,
+  marginTop: mt = 0,
+}) => {
+  let fSize = 'sm';
+  let lHeight = 'md';
+  let pX = 'md';
+  let radius = 'sm';
+  const pt: SpacingPropertyTheme | PaddingProperty<TLength> = '2xs';
+  if (size === 'small') {
+    fSize = 'xs';
+    lHeight = 'xs';
+    radius = 'xs';
+    pX = 'sm';
+  }
+  if (size === 'large') {
+    fSize = 'md';
+    lHeight = 'lg';
+  }
+
+  return css`
+    ${display('inline-flex')}
+    ${alignItems('center')}
+    ${backgroundColor(kind ? theme.buttons[kind].bgColor : bgColor)}
+    ${marginLeft(ml)}
+    ${marginRight(mr)}
+    ${marginBottom(mb)}
+    ${marginTop(mt)}
+    ${lineHeight(lHeight)}
+    ${paddingX(pX)}
+    ${paddingTop(pt)}
+    ${color(kind ? theme.buttons[kind].color : fontColor)}
+    ${fontSize(fSize)}
+    ${cursor(onClick ? 'pointer' : 'inherit')}
+    ${borderRadius(radius)}
+    .o-tag-icon {
+      ${marginRight('xs')}
+      ${display('inline-flex')}
+      ${alignItems('center')}
+    }
+  `;
+};

package/src/components/tag/typings.ts

@@ -0,0 +1,17 @@
+import { BackgroundColorProperty, ColorProperty, MarginProperty } from 'csstype';
+import { ReactNode } from 'react';
+import { ColorPropertyTheme, SpacingPropertyTheme, TLength } from '../../styles/typings';
+
+export type TagProps = {
+  kind?: ColorPropertyTheme;
+  bgColor?: ColorPropertyTheme | BackgroundColorProperty;
+  fontColor?: ColorPropertyTheme | ColorProperty;
+  size?: 'small' | 'medium' | 'large';
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+  className?: string;
+  marginLeft?: SpacingPropertyTheme | MarginProperty<TLength>;
+  marginRight?: SpacingPropertyTheme | MarginProperty<TLength>;
+  marginTop?: SpacingPropertyTheme | MarginProperty<TLength>;
+  marginBottom?: SpacingPropertyTheme | MarginProperty<TLength>;
+  icon?: ReactNode;
+};

package/src/components/tooltip/components/TooltipComponent.tsx

@@ -0,0 +1,38 @@
+import { FCC } from 'onekijs-framework';
+import React from 'react';
+import { usePopperTooltip } from 'react-popper-tooltip';
+import { addClassname } from '../../../utils/style';
+import { TooltipProps } from '../typings';
+
+const TooltipComponent: FCC<TooltipProps> = (props) => {
+  const { content, className, popperOptions, children, delayHide = 300, ...tooltipConfig } = props;
+  const tooltipOptions = Object.assign(
+    {
+      interactive: true,
+      delayHide,
+    },
+    tooltipConfig,
+  );
+  const { getArrowProps, getTooltipProps, setTooltipRef, setTriggerRef, visible } = usePopperTooltip(
+    tooltipOptions,
+    popperOptions,
+  );
+
+  const { style: containerStyle, ...containerProps } = getTooltipProps({ className: 'o-tooltip-container' });
+  const { style: arrowStyle, ...arrowProps } = getArrowProps({ className: 'o-tooltip-arrow' });
+  const classNames = addClassname('o-tooltip', className);
+
+  return (
+    <div className={classNames} ref={setTriggerRef}>
+      {children}
+      {visible && content && (
+        <div ref={setTooltipRef} style={containerStyle as React.CSSProperties} {...containerProps}>
+          <div style={arrowStyle as React.CSSProperties} {...arrowProps} />
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TooltipComponent;

package/src/components/tooltip/index.tsx

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

package/src/components/tooltip/style.ts

@@ -0,0 +1,153 @@
+import { css } from 'styled-components';
+import { backgroundColor } from '../../styles/background';
+import {
+  borderBottomColor,
+  borderColor,
+  borderLeftColor,
+  borderRadius,
+  borderRightColor,
+  borderStyle,
+  borderTopColor,
+  borderWidth,
+  boxShadow
+} from '../../styles/border';
+import { display } from '../../styles/display';
+import { cursor, pointerEvents } from '../../styles/interactivity';
+import { bottom, left, position, right, top, zIndex } from '../../styles/position';
+import { height, width } from '../../styles/size';
+import { margin, marginBottom, marginLeft, marginRight, marginTop, padding } from '../../styles/spacing';
+import { transition } from '../../styles/transition';
+import { ComponentStyle } from '../../styles/typings';
+import { color, fontSize } from '../../styles/typography';
+import { TooltipProps } from './typings';
+
+const tooltipStyle: ComponentStyle<TooltipProps> = ({ kind = 'secondary', theme }) => {
+  const t = theme.tooltip[kind];
+  const bgColor = t.bgColor;
+  const fColor = t.color;
+  const bColor = t.borderColor;
+  return css`
+    ${cursor('pointer')}
+    ${display('inline-flex')}
+    .o-tooltip-container {
+      ${backgroundColor(bgColor)}
+      ${borderRadius(t.borderRadius)}
+      ${borderWidth(t.borderWidth)}
+      ${borderStyle(t.borderStyle)}
+      ${borderColor(bColor)}
+      ${boxShadow(t.boxShadow)}
+      ${color(fColor)}
+      ${transition('opacity 0.3s')}
+      ${zIndex(9999)}
+      ${padding(t.padding)}
+      ${fontSize(t.fontSize)}
+      a {
+        ${color(t.linkColor)}
+      }
+      &[data-popper-interactive='false'] {
+        ${pointerEvents('none')}
+      }
+      &[data-popper-placement*='bottom'] {
+        .o-tooltip-arrow {
+          ${left(0)}
+          ${marginTop('-0.4rem')}
+          ${top(0)}
+          &::before {
+            ${borderColor('transparent')}
+            ${borderBottomColor(bColor)}
+            ${borderWidth('0 0.5rem 0.4rem 0.5rem')}
+            ${position('absolute')}
+            ${top('-1px')}
+          }
+          &::after {
+            ${borderColor('transparent')}
+            ${borderBottomColor(bgColor)}
+            ${borderWidth('0 0.5rem 0.4rem 0.5rem')}
+          }
+        }
+      }
+      &[data-popper-placement*='top'] {
+        .o-tooltip-arrow {
+          ${left(0)}
+          ${marginBottom('-1rem')}
+          ${bottom(0)}
+          &::before {
+            ${borderColor('transparent')}
+            ${borderTopColor(bColor)}
+            ${borderWidth('0.4rem 0.5rem 0 0.5rem')}
+            ${position('absolute')}
+            ${top('1px')}
+          }
+          &::after {
+            ${borderColor('transparent')}
+            ${borderTopColor(bgColor)}
+            ${borderWidth('0.4rem 0.5rem 0 0.5rem')}
+          }
+        }
+      }
+
+      &[data-popper-placement*='right'] {
+        .o-tooltip-arrow {
+          ${left(0)}
+          ${marginLeft('-0.7rem')}
+          &::before {
+            ${borderColor('transparent')}
+            ${borderRightColor(bColor)}
+            ${borderWidth('0.5rem 0.4rem 0.5rem 0')}
+          }
+          &::after {
+            ${borderColor('transparent')}
+            ${borderRightColor(bgColor)}
+            ${borderWidth('0.5rem 0.4rem 0.5rem 0')}
+            ${left('6px')}
+            ${top(0)}
+          }
+        }
+      }
+
+      &[data-popper-placement*='left'] {
+        .o-tooltip-arrow {
+          ${right(0)}
+          ${marginRight('-0.7rem')}
+          &::before {
+            ${borderColor('transparent')}
+            ${borderLeftColor(bColor)}
+            ${borderWidth('0.5rem 0 0.5rem 0.4em')}
+          }
+          &::after {
+            ${borderColor('transparent')}
+            ${borderLeftColor(bgColor)}
+            ${borderWidth('0.5rem 0 0.5rem 0.4em')}
+            ${left('3px')}
+            ${top(0)}
+          }
+        }
+      }
+    }
+    .o-tooltip-arrow {
+      ${height('1rem')}
+      ${width('1rem')}
+      ${position('absolute')}
+      ${pointerEvents('none')}
+      &::before {
+        ${borderStyle('solid')}
+        content: '';
+        ${display('block')}
+        ${height(0)}
+        ${width(0)}
+        ${margin('auto')}
+      }
+      &::after {
+        ${borderStyle('solid')}
+        content: '';
+        ${display('block')}
+        ${height(0)}
+        ${width(0)}
+        ${margin('auto')}
+        ${position('absolute')}
+      }
+    }
+  `;
+};
+
+export default tooltipStyle;

package/src/components/tooltip/typings.ts

@@ -0,0 +1,10 @@
+import { Config, PopperOptions } from 'react-popper-tooltip';
+import { ColorPropertyTheme } from '../../styles/typings';
+
+export interface TooltipProps extends Config {
+  content?: string | JSX.Element;
+  className?: string;
+  popperOptions?: PopperOptions;
+  kind?: ColorPropertyTheme;
+  delayHide?: number;
+}