@squiz/generic-browser-lib 1.35.1-alpha.34

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,15 @@
+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

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

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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,15 @@
+.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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,16 @@
+import React, { ReactElement } from 'react';
+import clsx from 'clsx';
+
+export type SpinnerProps = {
+  size?: 'sm' | 'md';
+  className?: string;
+  label?: string;
+};
+
+export 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>
+  );
+};

package/src/Spinner/_spinner.scss

@@ -0,0 +1,14 @@
+.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;
+  }
+}

package/src/index.scss

@@ -0,0 +1,22 @@
+/* Tailwind base styles, but scoped to the editor */
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+// Components
+@import './Spinner/spinner';
+@import './Skeleton/skeleton';
+
+*,
+button {
+  @apply antialiased;
+  letter-spacing: -0.02em;
+}
+
+svg {
+  @apply text-gray-600;
+}
+
+.p-4\.5 {
+  padding: 18px;
+}

package/src/index.stories.tsx

@@ -0,0 +1,26 @@
+import { StoryFn } from '@storybook/react';
+import { ResourceItem } from '../src/ResourceItem/ResourceItem';
+export default {
+  title: 'Resource Item',
+};
+const Template: StoryFn<any> = (props) => {
+  return <ResourceItem {...props}></ResourceItem>;
+};
+export const Primary = Template.bind({});
+
+Primary.args = {
+  item: {},
+  selected: true,
+  label: 'Test',
+  type: 'Folder',
+  childCount: 3,
+  previewModalState: () => {
+    return;
+  },
+  onSelect: () => {
+    return;
+  },
+  onDrillDown: () => {
+    return;
+  },
+};

package/src/index.ts

@@ -0,0 +1,20 @@
+export * from './Icons/Icon';
+
+export * from './Spinner/Spinner';
+
+export * from './Modal/Modal';
+export * from './Modal/ModalTrigger';
+export * from './Modal/ModalOpeningButton';
+
+export * from './Skeleton/List/SkeletonList';
+
+export * from './ResourceItem/ResourceItem';
+
+export * from './ResourceState/ResourceState';
+
+export * from './PreviewPanel/PreviewPanel';
+export * from './PreviewPanel/PreviewPanelHOC';
+
+export * from './Hooks/useAsync';
+
+export * from './ResetButton/ResetButton';

package/tailwind.config.cjs

@@ -0,0 +1,89 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}', './node_modules/flowbite/**/*.js'],
+  theme: {
+    extend: {
+      borderWidth: {
+        // We shouldn't use ".border" class and instead use ".border-1".
+        // ".border" has !important styling defined in Matrix so overrides anything various border styling if used.
+        1: '1px',
+      },
+      borderRadius: {
+        DEFAULT: '4px',
+        md: '6px',
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
+      fontWeight: {
+        normal: '400',
+        medium: '500',
+        semibold: '600',
+        bold: '700',
+      },
+      fontSize: {
+        xlg: '1.125rem',
+        lg: '1rem',
+        md: '0.875rem',
+        sm: '0.8125rem',
+        base: '1rem',
+        'heading-1': ['1.625rem', '2rem'],
+        'heading-2': ['1.25rem', '1.5rem'],
+        'heading-3': ['1.125rem', '1.375rem'],
+        'heading-4': ['1rem', '1.25rem'],
+      },
+      fontFamily: {
+        base: 'Open Sans, Arial, sans-serif',
+      },
+      boxShadow: {
+        outline: '0 0 0 1px rgba(0,0,0,0.10)',
+        sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
+        DEFAULT: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        md: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 12px 4px rgba(0,0,0,0.12)',
+        lg: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 24px 12px rgba(0,0,0,0.12)',
+        inner: 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
+        none: 'none',
+      },
+      width: {
+        'modal-sm': '25rem',
+        'modal-md': '37.5rem',
+        'modal-lg': '50rem',
+        'modal-xl': '62.5rem',
+      },
+      spacing: {
+        1: '0.25rem', // 4px
+        2: '0.5rem', // 8px
+        3: '0.75rem', // 12px
+        4: '1rem', // 16px
+        5: '1.25rem', // 20px
+        6: '1.5rem', // 24px
+        7: '1.75rem', // 28px
+        8: '2rem', // 32px
+        169: '169px', // 169px
+      },
+      colors: {
+        gray: {
+          50: '#F7F7F7',
+          100: '#F5F5F5',
+          200: '#ededed',
+          300: '#e0e0e0',
+          400: '#BABABA',
+          500: '#949494',
+          600: '#707070',
+          700: '#4F4F4F',
+          800: '#3D3D3D',
+          900: '#2B2B2B',
+        },
+        blue: {
+          100: '#e6f1fa',
+          200: '#8FC0EB',
+          300: '#0774d2',
+          400: '#044985',
+        },
+        red: {
+          300: '#d72321',
+        },
+      },
+    },
+  },
+};

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "experimentalDecorators": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "CommonJS",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "declaration": true,
+    "outDir": "./lib"
+  },
+  "files": ["./src/index.ts"]
+}