polpo 0.1.0

package/src/components/modals/modal/modal.tsx

@@ -0,0 +1,132 @@
+import React, { ForwardedRef, forwardRef, useEffect, useMemo } from 'react';
+import ReactDOM from 'react-dom';
+import { useTheme } from 'styled-components';
+
+import { ModalOverlayStyle } from './modal.style';
+
+import { useConstant } from '@polpo/hooks';
+
+export enum ModalBackdrop {
+  OPAQUE = 'opaque',
+  TRANSPARENT = 'transparent',
+  BLUR = 'blur',
+  NONE = 'none',
+}
+
+export type ModalCommonProps = {
+  isOpen: boolean;
+  children: React.ReactNode;
+  id: string;
+};
+
+export type ModalNoOverlayProps = ModalCommonProps & {
+  opacity?: never;
+  backdrop?: never;
+  onClick?: never;
+  zIndex?: never;
+  className?: never;
+  style?: never;
+};
+
+export type ModalOverlayProps = ModalCommonProps & {
+  opacity?: number;
+  backdrop?: `${ModalBackdrop}`;
+  onClick?: () => void;
+  zIndex?: React.CSSProperties['zIndex'];
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export type ModalProps = ModalOverlayProps | ModalNoOverlayProps;
+
+export const ModalComponent = (
+  {
+    isOpen,
+    children,
+    id,
+    opacity = 0.6,
+    backdrop = ModalBackdrop.BLUR,
+    onClick,
+    zIndex,
+    className = '',
+    style = {},
+  }: ModalProps,
+  ref: ForwardedRef<HTMLElement>,
+) => {
+  const containerID = useConstant(`modal-${id}`);
+  const theme = useTheme();
+
+  useEffect(() => {
+    let modalContainer = document.getElementById(containerID);
+
+    if (!modalContainer) {
+      modalContainer = document.createElement('div');
+      modalContainer.setAttribute('id', containerID);
+
+      if (typeof ref === 'function') {
+        ref(modalContainer);
+      } else if (ref) {
+        ref.current = modalContainer;
+      }
+
+      document.body.appendChild(modalContainer);
+    }
+
+    /*
+     * return () => {
+     *   if (modalContainer.parentNode === document.body) {
+     *     document.body.removeChild(modalContainer);
+     *   }
+     * };
+     */
+  }, [containerID, ref]);
+
+  const backgroundStyles = useMemo(() => {
+    switch (backdrop) {
+      case ModalBackdrop.OPAQUE:
+        return {
+          background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
+        };
+      case ModalBackdrop.TRANSPARENT:
+        return {
+          background: 'transparent',
+        };
+      case ModalBackdrop.BLUR:
+        return {
+          background: `${theme.colors.background.paper}${(opacity * 255)?.toString(16)}`,
+          backdropFilter: 'blur(5px)',
+        };
+      case ModalBackdrop.NONE:
+        return {
+          display: 'none',
+        };
+      default:
+        return {};
+    }
+  }, [backdrop, theme.colors.background.paper, opacity]);
+
+  const root = document.getElementById(containerID);
+
+  if (!isOpen || !root) {
+    return null;
+  }
+
+  return ReactDOM.createPortal(
+    <>
+      <ModalOverlayStyle
+        tabIndex={-1}
+        onClick={onClick}
+        className={className}
+        style={{
+          zIndex,
+          ...backgroundStyles,
+          ...style,
+        }}
+      />
+      {children}
+    </>,
+    root,
+  );
+};
+
+export const Modal = forwardRef(ModalComponent);

package/src/components/ripple/index.ts

@@ -0,0 +1 @@
+export * from './ripple';

package/src/components/ripple/ripple.stories.tsx

@@ -0,0 +1,38 @@
+import { Ripple } from './ripple';
+
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta: Meta<typeof Ripple> = {
+  title: 'Ripple',
+  component: Ripple,
+  argTypes: {
+    color: { control: 'color' },
+    duration: { control: { type: 'range', min: 500, max: 5000, step: 100 } },
+    timingFunction: { options: ['ease', 'ease-out', 'ease-in', 'ease-in-out', 'cubic-bezier(0.81, -0.52, 0.42, 2.5)'] },
+    times: { control: { type: 'range', min: 1, max: 5 } },
+    className: { control: false },
+    style: { control: false },
+  },
+  args: {
+    color: '#FFFFFF',
+  },
+  render: args => (
+    <section
+      style={{
+        background: 'linear-gradient(35deg, rgba(230,96,255,1) 0%, rgba(91,170,255,1) 100%)',
+        width: '300px',
+        height: '300px',
+        borderRadius: '10px',
+      }}
+    >
+      <Ripple {...args} />
+    </section>
+  ),
+};
+
+export default meta;
+type Story = StoryObj<typeof Ripple>;
+
+export const Default: Story = {
+  args: {},
+};

package/src/components/ripple/ripple.style.ts

@@ -0,0 +1,33 @@
+import styled from 'styled-components';
+
+export const RippleStyle = styled.span`
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+  border-radius: inherit;
+  z-index: 1;
+
+  .ripple-effect {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    border-radius: 50%;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    animation: ripple-effect infinite;
+    opacity: 0.4;
+  }
+
+  @keyframes ripple-effect {
+    to {
+      width: 300px;
+      height: 300px;
+      opacity: 0;
+      filter: blur(5px);
+    }
+  }
+`;

package/src/components/ripple/ripple.tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useRef } from 'react';
+
+import { RippleStyle } from './ripple.style';
+
+type RippleProps = {
+  color?: string;
+  duration?: number;
+  timingFunction?: React.CSSProperties['animationTimingFunction'];
+  times?: number;
+  className?: string;
+  style?: React.CSSProperties;
+};
+
+export const Ripple = ({
+  color,
+  duration = 1000,
+  timingFunction = 'ease-out',
+  times = 1,
+  className = '',
+  style = {},
+}: RippleProps) => {
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (!ref.current?.parentElement) {
+      return;
+    }
+
+    const computedPosition = getComputedStyle(ref.current.parentElement).position;
+
+    if (!['absolute', 'fixed', 'sticky', 'relative'].includes(computedPosition)) {
+      ref.current.parentElement.style.position = 'relative';
+    }
+  }, []);
+
+  const handleClick = (e: React.MouseEvent<HTMLSpanElement>) => {
+    const { pageX, pageY, currentTarget } = e;
+
+    const rect = currentTarget.getBoundingClientRect();
+
+    const x = ((pageX - rect.left) * 100) / rect.width;
+    const y = ((pageY - rect.top) * 100) / rect.height;
+
+    const ripple = document.createElement('span');
+    ripple.classList.add('ripple-effect');
+    color && (ripple.style.background = color);
+    ripple.style.animationDuration = `${duration}ms`;
+    ripple.style.animationTimingFunction = timingFunction;
+    ripple.style.left = `${x}%`;
+    ripple.style.top = `${y}%`;
+
+    currentTarget.appendChild(ripple);
+
+    setTimeout(
+      () => {
+        ripple.remove();
+      },
+      Math.max(duration, 500) * Math.max(times, 1),
+    );
+  };
+
+  return <RippleStyle ref={ref} onMouseDown={handleClick} className={className} style={style} />;
+};

package/src/components/smart-table/index.ts

@@ -0,0 +1 @@
+export * from './smart-table';

package/src/components/smart-table/smart-table.column.tsx

@@ -0,0 +1,63 @@
+import { useMemo } from 'react';
+import { useTheme } from 'styled-components';
+
+import { Grid } from '../../layouts';
+import { Icon } from '../icon';
+import { Ripple } from '../ripple';
+import { Typography } from '../typography';
+
+import { SmartColumnStyle } from './smart-table.style';
+import { ColumnData, Order, RowDataObject } from './smart-table.types';
+
+import { useClassNames } from '@polpo/hooks';
+
+type SmartTableColumnProps<RowData extends RowDataObject> = ColumnData<RowData> & {
+  toggleSortField: (field: ColumnData<RowData>['sortBy']) => void;
+  sortField: ColumnData<RowData>['sortBy'] | null;
+  orderField: Order | null;
+};
+
+export const SmartTableColumn = <RowData extends RowDataObject>({
+  header,
+  sortBy,
+  icon,
+  width,
+  field,
+  toggleSortField,
+  sortField,
+  orderField,
+}: SmartTableColumnProps<RowData>) => {
+  const theme = useTheme();
+  const sortByKey = sortBy || field;
+
+  const columnClassName = useClassNames({
+    'sort-on-click': Boolean(sortByKey),
+  });
+
+  const columnOnClick = sortByKey && (() => toggleSortField(sortByKey));
+
+  const sortIcon = useMemo(() => {
+    if (!sortByKey) return null;
+
+    return (
+      <span className='sort-icon'>
+        {Boolean(sortField) && sortField === sortByKey && (
+          <Icon name={orderField === 'asc' ? 'arrow-down' : 'arrow-up'} />
+        )}
+      </span>
+    );
+  }, [sortByKey, sortField, orderField]);
+
+  return (
+    <SmartColumnStyle style={{ width }} className={columnClassName} onClick={columnOnClick}>
+      <Grid flow='column' gap='0.5em' jc='space-between' ai='center'>
+        {icon && <Icon name={icon} />}
+        <Typography variant='label' noPadding>
+          {header}
+        </Typography>
+        {sortIcon}
+      </Grid>
+      <Ripple color={theme.colors.text.main} />
+    </SmartColumnStyle>
+  );
+};

package/src/components/smart-table/smart-table.helpers.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { Typography } from '../typography';
+
+import { SmartCellStyle } from './smart-table.style';
+import { ColumnData, Order, Primitive, RowDataObject } from './smart-table.types';
+
+const renderRowColumn = <RowData extends RowDataObject>(
+  data: RowData,
+  { field, render, Component }: ColumnData<RowData>,
+  rowKey: React.Key,
+): React.ReactNode => {
+  if (field && data[field])
+    return (
+      <Typography noPadding nowrap>
+        {data[field] as Primitive}
+      </Typography>
+    );
+
+  if (render) return render(data, rowKey);
+
+  if (Component) return <Component data={data} rowKey={rowKey} />;
+};
+
+export const renderRow = <RowData extends RowDataObject>(
+  data: RowData,
+  columns: Array<ColumnData<RowData>>,
+  rowKey: React.Key,
+) => columns.map((column, key) => <SmartCellStyle key={key}>{renderRowColumn(data, column, rowKey)}</SmartCellStyle>);
+
+export const sortData = <RowData extends RowDataObject>(
+  data: Array<RowData>,
+  sortBy: ColumnData<RowData>['sortBy'] | null,
+  order: Order | null,
+) => {
+  if (sortBy) {
+    return data.toSorted((a, b) => {
+      const fieldA = a[sortBy];
+      const fieldB = b[sortBy];
+
+      if (
+        ['number', 'boolean', 'string'].includes(typeof fieldA) &&
+        ['number', 'boolean', 'string'].includes(typeof fieldB)
+      ) {
+        if (fieldA === fieldB) return 0;
+
+        if (order === 'asc') {
+          return fieldA > fieldB ? 1 : -1;
+        }
+
+        return fieldA > fieldB ? -1 : 1;
+      }
+
+      return 0;
+    });
+  }
+
+  return data;
+};

package/src/components/smart-table/smart-table.hooks.ts

@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+
+import { ColumnData, Order, RowDataObject } from './smart-table.types';
+
+export const useSort = <RowData extends RowDataObject>() => {
+  const [[sortBy, order], setSortField] = useState<[ColumnData<RowData>['sortBy'] | null, Order | null]>([null, null]);
+
+  const toggleSortField = useCallback((sortByField: ColumnData<RowData>['sortBy']) => {
+    setSortField(([sortBy, order]) => {
+      if (sortByField !== sortBy) {
+        return [sortByField, 'asc'];
+      }
+
+      if (order === 'asc') {
+        return [sortByField, 'desc'];
+      }
+
+      return [null, null];
+    });
+  }, []);
+
+  return {
+    sortBy,
+    order,
+    toggleSortField,
+  };
+};

package/src/components/smart-table/smart-table.row.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { renderRow } from './smart-table.helpers';
+import { SmartRowStyle } from './smart-table.style';
+import { ColumnData, RowDataObject } from './smart-table.types';
+
+import { useClassNames } from '@polpo/hooks';
+
+type SmartTableRowProps<RowData extends RowDataObject> = {
+  data: RowData;
+  columns: Array<ColumnData<RowData>>;
+  isSelected: boolean;
+  selectable: boolean;
+  rowKey: React.Key;
+};
+
+export const SmartTableRow = <RowData extends RowDataObject>({
+  data,
+  columns,
+  isSelected = false,
+  selectable = false,
+  rowKey,
+}: SmartTableRowProps<RowData>) => {
+  const rowClassName = useClassNames({
+    'row-selected': selectable && isSelected,
+  });
+
+  return <SmartRowStyle className={rowClassName}>{renderRow(data, columns, rowKey)}</SmartRowStyle>;
+};