uikit-react-public 0.11.13

package/lib/components/Overlay/Overlay.stories.tsx

@@ -0,0 +1,218 @@
+import { useRef } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { css } from '@emotion/css';
+import Overlay from './Overlay';
+
+const meta = {
+  title: 'Components/Utilities/Overlay',
+  component: Overlay,
+  parameters: {
+    controls: { exclude: ['reference'] },
+  },
+  argTypes: {
+    children: {
+      control: 'text',
+    },
+    placement: {
+      description:
+        'Which side of the anchor element the Overlay appears on. https://floating-ui.com/docs/placement',
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+    },
+    blanket: {
+      description:
+        'Add a blanket component behind the Overlay. https://floating-ui.com/docs/blanket',
+      control: {
+        type: 'boolean',
+      },
+    },
+    flip: {
+      description:
+        'Changes the placement of the Overlay to the opposite side of its anchor element to keep it in view. https://floating-ui.com/docs/flip',
+      control: 'boolean',
+    },
+    shift: {
+      description:
+        'Shifts the placement of the Overlay along the side of its anchor element to keep it in view. https://floating-ui.com/docs/shift',
+      control: 'boolean',
+    },
+    offset: {
+      description:
+        'The distance between the Overlay and its anchor element: https://floating-ui.com/docs/offset',
+      control: 'number',
+    },
+  },
+  args: {
+    children: 'Default overlay text',
+    reference: undefined,
+  },
+  decorators: [
+    (Story) => {
+      const outerScrollAreaStyle = css`
+        position: relative;
+        width: 400px;
+        height: 300px;
+        overflow: scroll;
+        place-items: center;
+      `;
+
+      const innerScrollAreaStyle = css`
+        width: 800px;
+        height: 600px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      `;
+
+      return (
+        <>
+          <div
+            className={outerScrollAreaStyle}
+            style={{ resize: 'both', overflow: 'auto' }}
+          >
+            <div className={innerScrollAreaStyle}>
+              <Story />
+            </div>
+          </div>
+        </>
+      );
+    },
+  ],
+} satisfies Meta<typeof Overlay>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: (args) => {
+    const ref = useRef(null);
+
+    return (
+      <>
+        <div ref={ref}>Anchor point</div>
+        <Overlay
+          reference={ref}
+          placement={args.placement}
+          blanket={args.blanket}
+          flip={args.flip} // https://floating-ui.com/docs/flip
+          shift={args.shift} // https://floating-ui.com/docs/shift
+          offset={args.offset} // https://floating-ui.com/docs/offset
+          // arrow={args.arrow}
+        >
+          {args.children}
+        </Overlay>
+      </>
+    );
+  },
+};
+
+// Implements Floating UI props
+export const PlacementTop: Story = {
+  name: 'Placement: top',
+  args: {
+    placement: 'top',
+  },
+  render: (args) => {
+    const ref = useRef(null);
+
+    return (
+      <>
+        <div ref={ref}>Anchor point</div>
+        <Overlay
+          reference={ref}
+          placement={args.placement}
+          blanket={args.blanket}
+          flip={args.flip}
+          shift={args.shift}
+          offset={args.offset}
+        >
+          {args.children}
+        </Overlay>
+      </>
+    );
+  },
+};
+
+export const WithBackgroundAndBorders: Story = {
+  name: '(With background & borders)',
+  render: (args) => {
+    const ref = useRef(null);
+
+    const anchorPointElementStyle = css`
+      padding: 2rem;
+      background-color: grey;
+      color: white;
+      border: 5px solid black;
+    `;
+
+    const overlayStyle = css`
+      padding: 0.75rem;
+      background-color: grey;
+      color: white;
+      border: 5px solid black;
+    `;
+
+    return (
+      <>
+        <div
+          ref={ref}
+          className={anchorPointElementStyle}
+        >
+          Anchor point
+        </div>
+        <Overlay
+          reference={ref}
+          placement={args.placement}
+          blanket={args.blanket}
+          flip={args.flip}
+          shift={args.shift}
+          offset={args.offset}
+          className={overlayStyle}
+        >
+          {args.children}
+        </Overlay>
+      </>
+    );
+  },
+};
+
+export const WithABlanket: Story = {
+  name: 'With a blanket',
+  args: {
+    blanket: true,
+  },
+  render: (args) => {
+    const ref = useRef(null);
+
+    return (
+      <>
+        <div ref={ref}>Anchor point</div>
+        <Overlay
+          reference={ref}
+          placement={args.placement}
+          blanket={args.blanket}
+          flip={args.flip}
+          shift={args.shift}
+          offset={args.offset}
+          onBlanketClick={() => alert('Blanket clicked')}
+        >
+          {args.children}
+        </Overlay>
+      </>
+    );
+  },
+};

package/lib/components/Overlay/Overlay.tsx

@@ -0,0 +1,197 @@
+import {
+  HTMLAttributes,
+  forwardRef,
+  memo,
+  useLayoutEffect,
+  useRef,
+  RefObject,
+  useImperativeHandle,
+  ReactElement,
+  cloneElement,
+} from 'react';
+
+import {
+  useFloating,
+  flip as fuiFlip,
+  shift as fuiShift,
+  offset as fuiOffset,
+  autoUpdate,
+  Placement,
+  // Strategy,
+} from '@floating-ui/react-dom';
+
+import { css, cx } from '@emotion/css';
+
+import Blanket from '../Blanket';
+
+export const NAME = 'ucl-overlay';
+
+export interface OverlayProps
+  extends HTMLAttributes<HTMLDivElement> {
+  reference: RefObject<HTMLElement | null>;
+  placement?: Placement;
+  blanket?: boolean;
+  flip?: boolean;
+  shift?: boolean;
+  offset?: number;
+  arrow?: ReactElement;
+  arrowClassName?: string;
+  onBlanketClick?: (
+    ev: React.MouseEvent<HTMLDivElement>
+  ) => void;
+}
+
+export type Ref = HTMLDivElement | null;
+
+const Overlay = forwardRef<Ref, OverlayProps>(
+  (
+    {
+      reference,
+      placement = 'bottom',
+      blanket = false,
+      flip = true,
+      shift = true,
+      offset = 0,
+      arrow,
+      className,
+      arrowClassName,
+      onBlanketClick,
+      children,
+      ...props
+    }: OverlayProps,
+    forwardedRef
+  ) => {
+    const ref = useRef(null);
+    const arrowRef = useRef<HTMLElement>(null);
+
+    useImperativeHandle<Ref, Ref>(
+      forwardedRef,
+      () => ref.current
+    );
+
+    const fuiMiddleware = [];
+    if (flip) fuiMiddleware.push(fuiFlip());
+    if (shift) fuiMiddleware.push(fuiShift());
+    if (offset) fuiMiddleware.push(fuiOffset(offset));
+
+    const {
+      x,
+      y,
+      refs,
+      strategy,
+      placement: currentPlacement,
+    } = useFloating({
+      open: true,
+      middleware: fuiMiddleware,
+      placement,
+      // strategy: 'absolute',
+      whileElementsMounted: autoUpdate,
+    });
+
+    const overlayPlacement = currentPlacement.split(
+      '-'
+    )[0] as 'left' | 'right' | 'top' | 'bottom';
+
+    useLayoutEffect(() => {
+      refs.setReference(reference.current);
+    }, [reference, refs]);
+
+    const { width: arrowWidth, height: arrowHeight } =
+      arrowRef?.current?.getBoundingClientRect?.() || {
+        width: 0,
+        height: 0,
+      };
+
+    const baseStyle = css`
+      z-index: 1000;
+    `;
+
+    const style = cx(NAME, baseStyle, className);
+
+    const arrowBaseStyle = cx(
+      css`
+        position: absolute;
+      `,
+      overlayPlacement === 'left' &&
+        css`
+          top: 50%;
+        `,
+      overlayPlacement === 'right' &&
+        css`
+          top: 50%;
+        `,
+      overlayPlacement === 'top' &&
+        css`
+          left: 50%;
+        `,
+      overlayPlacement === 'bottom' &&
+        css`
+          left: 50%;
+        `,
+      arrowClassName
+    );
+
+    let arrowStyle;
+    let ArrowComp = null;
+
+    if (arrow) {
+      const arrowElement = arrow as ReactElement<
+        HTMLAttributes<HTMLElement>
+      >;
+
+      arrowStyle = cx(
+        arrowBaseStyle,
+        overlayPlacement === 'left' &&
+          css`
+            right: -${arrowWidth}px;
+            margin-top: -${arrowHeight / 2}px;
+          `,
+        overlayPlacement === 'right' &&
+          css`
+            left: -${arrowWidth}px;
+            margin-top: -${arrowHeight / 2}px;
+            transform: rotate(180deg);
+          `,
+        overlayPlacement === 'top' &&
+          css`
+            bottom: -${arrowHeight}px;
+            margin-left: -${arrowWidth / 2}px;
+            transform: rotate(180deg);
+          `,
+        overlayPlacement === 'bottom' &&
+          css`
+            top: -${arrowHeight}px;
+            margin-left: -${arrowWidth / 2}px;
+          `,
+        arrowElement.props.className
+      );
+
+      ArrowComp = cloneElement(arrowElement, {
+        className: arrowStyle,
+        // @ts-expect-error ref typing - todo
+        ref: arrowRef,
+      });
+    }
+
+    return (
+      <>
+        {blanket && <Blanket onClick={onBlanketClick} />}
+        <div
+          ref={refs.setFloating}
+          className={style}
+          style={{
+            position: strategy,
+            left: x ?? 0,
+            top: y ?? 0,
+          }}
+          {...props}
+        >
+          {children}
+          {ArrowComp}
+        </div>
+      </>
+    );
+  }
+);
+
+export default memo(Overlay);

package/lib/components/Overlay/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Overlay';
+export type { OverlayProps } from './Overlay';

package/lib/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Pagination from './Pagination';
+
+const meta = {
+  title: 'Components/Work in progress/Pagination',
+  component: Pagination,
+  parameters: {
+    docs: {
+      story: 'Default',
+    },
+  },
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// Default Dialog Story
+export const Default: Story = {
+  args: {
+    offset: 60,
+    limit: 20,
+    total: 763,
+    children: (
+      <>
+        <Pagination.Controls />
+        <Pagination.Info />
+      </>
+    ),
+  },
+};
+
+export const FewPages: Story = {
+  args: {
+    offset: 20,
+    limit: 20,
+    total: 95,
+    children: (
+      <>
+        <Pagination.Controls />
+        <Pagination.Info />
+      </>
+    ),
+  },
+};
+
+export const ItemsInfo: Story = {
+  args: {
+    offset: 60,
+    limit: 20,
+    total: 763,
+    children: (
+      <>
+        <Pagination.Controls />
+        <Pagination.Info
+          format='items'
+          itemsPluralName='files'
+        />
+      </>
+    ),
+  },
+};

package/lib/components/Pagination/Pagination.tsx

@@ -0,0 +1,81 @@
+import { HTMLAttributes, createContext } from 'react';
+import { css, cx } from '@emotion/css';
+import PaginationControls from './PaginationControls';
+import PaginationInfo from './PaginationInfo';
+import marginsStyle, { MarginProps } from '../common/marginsStyle';
+import { useTheme } from '../../theme';
+
+export const NAME = 'ucl-uikit-pagination';
+
+interface PaginationContextValue {
+  offset: number;
+  limit: number;
+  total: number;
+  onPageChange?: (page: number) => void;
+}
+
+export const PaginationContext = createContext<
+  PaginationContextValue | undefined
+>(undefined);
+
+export interface PaginationBaseProps extends HTMLAttributes<HTMLDivElement> {
+  offset: number;
+  limit: number;
+  total: number;
+  onPageChange?: (newOffset: number) => void;
+  testId?: string;
+}
+
+export type PaginationProps = PaginationBaseProps & MarginProps;
+
+const Pagination = ({
+  offset,
+  limit,
+  total,
+  onPageChange,
+  testId,
+  className,
+  children,
+  ...props
+}: PaginationProps) => {
+  const [theme] = useTheme();
+
+  const contextValue: PaginationContextValue = {
+    offset,
+    limit,
+    total,
+    onPageChange,
+  };
+
+  const baseStyle = css`
+    margin-left: auto;
+    margin-right: auto;
+  `;
+
+  const style = cx(NAME, baseStyle, marginsStyle(props, theme), className);
+
+  return (
+    <PaginationContext.Provider value={contextValue}>
+      <div
+        data-testid={testId}
+        className={style}
+        {...props}
+      >
+        {children}
+      </div>
+    </PaginationContext.Provider>
+  );
+};
+
+export interface PaginationSubComponents {
+  Controls: typeof PaginationControls;
+  Info: typeof PaginationInfo;
+}
+
+const PaginationWithSubComponents = Pagination as typeof Pagination &
+  PaginationSubComponents;
+
+PaginationWithSubComponents.Controls = PaginationControls;
+PaginationWithSubComponents.Info = PaginationInfo;
+
+export default PaginationWithSubComponents;