@squiz/resource-browser 1.35.1-alpha.6 → 1.38.1-alpha.1

package/src/ResourceItem/ResourceItem.spec.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import ResourceItem from './ResourceItem';
-
-const mockOnSelect = jest.fn();
-const mockOnDrillDown = jest.fn();
-const previewModalState = jest.fn();
-
-const defaultProps: any = {
-  id: '123',
-  selected: false,
-  label: 'My Resource',
-  type: 'site',
-  childCount: 0,
-  previewModalState: previewModalState,
-  onSelect: mockOnSelect,
-  onDrillDown: mockOnDrillDown,
-  className: '',
-};
-
-describe('ResourceItem', () => {
-  it('should render the component with the correct label', () => {
-    const { getByText } = render(<ResourceItem {...defaultProps} />);
-    const labelElement = getByText('My Resource');
-
-    expect(labelElement).toBeInTheDocument();
-  });
-
-  it('should call the onSelect function when the button is pressed', () => {
-    const { getByRole } = render(<ResourceItem {...defaultProps} />);
-    const buttonElement = getByRole('button');
-    fireEvent.click(buttonElement);
-
-    expect(mockOnSelect).toHaveBeenCalledTimes(1);
-  });
-
-  it('should call the onDrillDown function when the drill down button is pressed', () => {
-    const { getByLabelText } = render(<ResourceItem {...defaultProps} childCount={1} />);
-    const drillDownButtonElement = getByLabelText('Drill down to My Resource children');
-    fireEvent.click(drillDownButtonElement);
-
-    expect(mockOnDrillDown).toHaveBeenCalledTimes(1);
-  });
-
-  it('should disable the button when the allowedTypes prop is not in the list of allowedItems', () => {
-    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['page']} />);
-    const buttonElement = getByRole('button');
-
-    expect(buttonElement).toBeDisabled();
-  });
-
-  it('should not disable the button when the allowedTypes prop is in the list of allowedItems', () => {
-    const { getByRole } = render(<ResourceItem {...defaultProps} allowedTypes={['site']} />);
-    const buttonElement = getByRole('button');
-
-    expect(buttonElement).not.toBeDisabled();
-  });
-
-  it('should not disable the button when the allowedTypes is undefined', () => {
-    const { getByRole } = render(<ResourceItem {...defaultProps} />);
-    const buttonElement = getByRole('button');
-
-    expect(buttonElement).not.toBeDisabled();
-  });
-});

package/src/ResourceItem/ResourceItem.tsx

@@ -1,84 +0,0 @@
-import React from 'react';
-import { DOMAttributes, FocusableElement } from '@react-types/shared';
-import { useOverlayTrigger } from 'react-aria';
-import { OverlayTriggerState } from 'react-stately';
-
-import Icon, { IconOptions } from '../Icons/Icon';
-import ModalOpeningButton from '../Modal/ModalOpeningButton';
-
-interface ResourceItem<T> {
-  item: T;
-  selected?: boolean;
-  label: string;
-  type: string;
-  childCount?: number;
-  previewModalState: OverlayTriggerState;
-  onSelect: (node: T, overlayProps: DOMAttributes<FocusableElement>) => void;
-  onDrillDown?: (node: T) => void;
-  className: string;
-  allowedTypes?: string[] | undefined;
-}
-
-const ResourceItem = <T,>({
-  item,
-  selected,
-  label,
-  type,
-  childCount,
-  previewModalState,
-  onSelect,
-  onDrillDown,
-  className,
-  allowedTypes,
-}: ResourceItem<T>) => {
-  const { triggerProps, overlayProps } = useOverlayTrigger({ type: 'dialog' }, previewModalState);
-  const isDisabled = allowedTypes !== undefined && !allowedTypes.includes(type);
-  const title = isDisabled ? "You can't select this item" : label;
-
-  return (
-    <li className={`flex items-stretch p-1 bg-white border-1 border-grey-200 min-h-[64px] ${className}`}>
-      <ModalOpeningButton
-        type="button"
-        {...triggerProps}
-        isDisabled={isDisabled}
-        onPress={() => onSelect(item, overlayProps)}
-        aria-label={childCount === undefined ? `Drill down to ${label} children` : ''}
-        className={`
-          relative grow flex items-center px-4 py-2 rounded outline-0 ${selected ? 'bg-blue-100 text-blue-400' : ''} ${
-          childCount !== undefined && childCount > 0 ? 'mr-2' : ''
-        } ${isDisabled ? 'font-normal text-gray-600 cursor-not-allowed' : 'hover:bg-gray-50 focus:bg-gray-50'}
-        `}
-        title={title}
-      >
-        <Icon
-          icon={type as IconOptions}
-          resourceSource="matrix"
-          aria-label={type}
-          className={`mr-4 shrink-0 ${isDisabled && 'opacity-40'}`}
-        />
-        <span className={`relative  flex items-center ${selected ? 'mr-8' : ''}`}>
-          <span className="line-clamp-2 text-left break-word">{label}</span>
-          {selected && <Icon icon={'selected' as IconOptions} aria-label="selected" className="absolute -right-8" />}
-        </span>
-        {childCount === undefined && <Icon icon={'arrow-right' as IconOptions} className="absolute right-5" />}
-      </ModalOpeningButton>
-      {childCount !== undefined && childCount > 0 && onDrillDown && (
-        <button
-          type="button"
-          aria-label={`Drill down to ${label} children`}
-          onClick={() => onDrillDown(item)}
-          className={`relative shrink-0 flex items-center p-4 rounded outline-0 before:w-px before:h-[calc(100%-0.75rem)] before:bg-gray-200 before:absolute before:top-1.5 before:-left-1 hover:bg-gray-50 focus:bg-gray-50`}
-        >
-          <span className="ml-auto flex items-center">
-            <span className="truncate w-14 text-right" title={String(childCount)}>
-              {childCount}
-            </span>
-            <Icon icon={'arrow-right' as IconOptions} className="ml-1" />
-          </span>
-        </button>
-      )}
-    </li>
-  );
-};
-
-export default ResourceItem;

package/src/ResourcePicker/ResetButton.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
-
-export type ResetButtonProps = {
-  onClick: () => void;
-  isDisabled?: boolean;
-};
-
-export const ResetButton = ({ onClick, isDisabled }: ResetButtonProps) => (
-  <button
-    type="button"
-    aria-label={`Remove selection`}
-    title={`Remove selection`}
-    className="text-gray-500 hover:text-gray-800 focus:text-gray-800 w-6 h-6 disabled:text-gray-500 disabled:cursor-not-allowed"
-    disabled={isDisabled}
-    onClick={onClick}
-  >
-    <CloseRoundedIcon />
-  </button>
-);

package/src/ResourceState/ResourceState.spec.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import ResourceState from './ResourceState';
-
-const defaultProps: any = {
-  state: 'error',
-  message: 'This is a test error!',
-  handleReload: jest.fn(),
-};
-
-describe('ResourceError', () => {
-  it('should render the component with the correct error message', () => {
-    const { getByText } = render(<ResourceState {...defaultProps} />);
-    const errorMessage = getByText(defaultProps.message);
-
-    expect(errorMessage).toBeInTheDocument();
-  });
-
-  it('should call the reload function when the button is pressed', () => {
-    const { getByRole } = render(<ResourceState {...defaultProps} />);
-    const buttonElement = getByRole('button');
-    fireEvent.click(buttonElement);
-
-    expect(defaultProps.handleReload).toHaveBeenCalledTimes(1);
-  });
-});

package/src/ResourceState/ResourceState.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import ResourceState from './ResourceState';
-
-export default {
-  title: 'Resource State',
-  component: ResourceState,
-} as Meta<typeof ResourceState>;
-
-const Template: StoryFn<typeof ResourceState> = ({ state, message }) => (
-  <ResourceState state={state} message={message} handleReload={() => alert('Resource browser reload')} />
-);
-
-export const Error = Template.bind({});
-Error.args = {
-  state: 'error',
-  message: 'This is a resource browser error!',
-};
-
-export const Empty = Template.bind({});
-Empty.args = {
-  state: 'empty',
-};

package/src/ResourceState/ResourceState.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import Icon, { IconOptions } from '../Icons/Icon';
-
-interface ResourceState {
-  state: 'error' | 'empty';
-  message?: string;
-  handleReload: () => void;
-}
-
-const ResourceState = function ({ state, message, handleReload }: ResourceState) {
-  return (
-    <div className="flex flex-col items-center rounded-lg py-8 bg-white h-204 gap-3">
-      <Icon icon={state as IconOptions} aria-hidden />
-      {/* Message */}
-      <span className="text-md text-gray-800 font-semibold leading-5">
-        {state === 'empty' ? 'There are no items to display' : message}
-      </span>
-      {/* Retry button */}
-      <button
-        type="button"
-        onClick={handleReload}
-        className="flex flex-row items-center justify-center gap-3 bg-black bg-opacity-10 h-9 mt-3 rounded text-md font-bold text-gray-700 py-2 px-3"
-      >
-        <Icon icon={state === 'empty' ? 'back' : 'retry'} aria-hidden />
-        {state === 'empty' ? 'Back to source list' : 'Try again'}
-      </button>
-    </div>
-  );
-};
-
-export default ResourceState;

package/src/Skeleton/List/SkeletonList.spec.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-
-import { SkeletonList } from './SkeletonList';
-
-describe('SkeletonList', () => {
-  it('Should render the skeleton list', async () => {
-    render(<SkeletonList itemCount={17} />);
-
-    expect(screen.getByLabelText('Skeleton loader list')).toBeInTheDocument();
-  });
-
-  it('Should list out the amount of items we set as the count', async () => {
-    render(<SkeletonList itemCount={5} />);
-
-    expect(screen.getAllByRole('listitem')).toHaveLength(5);
-  });
-});

package/src/Skeleton/List/SkeletonList.stories.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { SkeletonList, SkeletonListProps } from './SkeletonList';
-
-export default {
-  title: 'Global/Skeleton/List',
-  component: SkeletonList,
-} as Meta<typeof SkeletonList>;
-
-const Template: StoryFn<SkeletonListProps> = (args: SkeletonListProps) => <SkeletonList {...args} />;
-
-export const Default = Template.bind({});
-
-Default.args = {};

package/src/Skeleton/List/SkeletonList.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { SkeletonListItem } from '../ListItem/SkeletonListItem';
-import clsx from 'clsx';
-
-export type SkeletonListProps = {
-  itemCount: number;
-  className?: string;
-};
-
-export const SkeletonList = ({ itemCount = 8, className }: SkeletonListProps) => (
-  <ul className={clsx(`flex flex-col px-7 my-4`, className)} aria-label="Skeleton loader list">
-    {[...Array(itemCount)].map((_item, index: number) => {
-      return <SkeletonListItem key={index} />;
-    })}
-  </ul>
-);

package/src/Skeleton/ListItem/SkeletonListItem.stories.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import { SkeletonListItem } from './SkeletonListItem';
-
-export default {
-  title: 'Global/Skeleton/List item',
-  component: SkeletonListItem,
-} as Meta<typeof SkeletonListItem>;
-
-const Template: StoryFn<typeof SkeletonListItem> = () => <SkeletonListItem />;
-
-export const Default = Template.bind({});
-
-Default.args = {};

package/src/Skeleton/ListItem/SkeletonListItem.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-export const SkeletonListItem = () => (
-  <li className="flex items-center p-1 first:mt-0 bg-white border-1 border-b-0 border-grey-200 first:rounded-t-lg last:rounded-b-lg last:border-b">
-    <div className="animate-skeleton-pulse grid grid-cols-[24px_1fr_45px] w-full flex items-center p-4 rounded">
-      <span className="w-6 h-6 bg-gray-200 rounded-full" />
-      <div className="w-full d-flex flex-col mx-4">
-        <div className="mb-1 w-3/4 h-2 bg-gray-200 rounded" />
-        <div className="w-1/2 h-2 bg-gray-200 rounded" />
-      </div>
-      <div className="ml-auto mx-4 w-12 h-2 bg-gray-200 rounded" />
-    </div>
-  </li>
-);

package/src/Skeleton/_skeleton.scss

@@ -1,15 +0,0 @@
-.animate-skeleton-pulse {
-  animation: pulse 2s linear infinite;
-
-  @keyframes pulse {
-    0% {
-      opacity: 1;
-    }
-    50% {
-      opacity: 0.45;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-}

package/src/Spinner/Spinner.spec.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { screen, render } from '@testing-library/react';
-
-import Spinner from './Spinner';
-
-describe('Spinner', () => {
-  it('Should render the spinner', async () => {
-    render(<Spinner />);
-
-    expect(screen.getByLabelText('Loading')).toBeInTheDocument();
-  });
-
-  it('Should render the loading spinner with the custom aria label', async () => {
-    render(<Spinner label="Loading sources" />);
-
-    expect(screen.getByLabelText('Loading sources')).toBeInTheDocument();
-  });
-});

package/src/Spinner/Spinner.stories.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { StoryFn, Meta } from '@storybook/react';
-
-import Spinner, { SpinnerProps } from './Spinner';
-
-export default {
-  title: 'Global/Spinner',
-  component: Spinner,
-} as Meta<typeof Spinner>;
-
-const Template: StoryFn<SpinnerProps> = (args: SpinnerProps) => <Spinner {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {};
-
-export const Large = Template.bind({});
-Large.args = {
-  ...Default.args,
-  size: 'md',
-};
-
-export const Custom = Template.bind({});
-Custom.args = {
-  ...Default.args,
-  className: 'text-blue-300 m-3',
-};

package/src/Spinner/Spinner.tsx

@@ -1,18 +0,0 @@
-import React, { ReactElement } from 'react';
-import clsx from 'clsx';
-
-export type SpinnerProps = {
-  size?: 'sm' | 'md';
-  className?: string;
-  label?: string;
-};
-
-const Spinner = ({ size = 'sm', className, label = 'Loading' }: SpinnerProps): ReactElement => {
-  return (
-    <div className="spinner__wrapper text-gray-600" aria-label={label}>
-      <div className={clsx('spinner', size && `spinner--${size}`, className)} role="status" />
-    </div>
-  );
-};
-
-export default Spinner;

package/src/Spinner/_spinner.scss

@@ -1,14 +0,0 @@
-.spinner {
-  @apply inline-block rounded-full;
-  @apply border-2 border-solid border-current border-r-transparent;
-  @apply animate-spin align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite];
-  height: 20px;
-  width: 20px;
-  &__wrapper {
-    @apply flex items-center justify-center;
-  }
-  &--md {
-    height: 32px;
-    width: 32px;
-  }
-}