@papillonarts/components 0.10.0 → 0.12.0

package/build/primer/Grid/FlexGrid/FlexGrid.tsx

@@ -1,274 +0,0 @@
-import { Fragment } from 'react'
-import cx from 'classnames'
-import { v1 as uuidv1 } from 'uuid'
-import { getCapizalizedString } from '@papillonarts/library/string'
-import { sortOrder } from '@papillonarts/library/sort'
-import displayStyles from '@papillonarts/css/build/primer/utilities/visibility-display.scss'
-import flexboxStyles from '@papillonarts/css/build/primer/utilities/flexbox.scss'
-import borderStyles from '@papillonarts/css/build/primer/utilities/borders.scss'
-import paddingStyles from '@papillonarts/css/build/primer/utilities/padding.scss'
-import marginStyles from '@papillonarts/css/build/primer/utilities/margin.scss'
-import typographyStyles from '@papillonarts/css/build/primer/utilities/typography.scss'
-import layoutStyles from '@papillonarts/css/build/primer/utilities/layout.scss'
-import colorStyles from '@papillonarts/css/build/primer/utilities/colors.scss'
-import truncateStyles from '@papillonarts/css/build/primer/truncate/index.scss'
-import gridStyles from '../../Layout/grid.scss'
-import { FlexGridProps, defaultProps, flexGridSelection, flexGridState } from './FlexGrid.prop'
-import styles from './FlexGrid.scss'
-import { Radio } from '../../Form/Radio'
-import { Checkbox } from '../../Form/Checkbox'
-import { Icon, iconName, iconSize } from '../../Icon'
-
-export function FlexGrid({
-  className = defaultProps.className,
-  items,
-  idIndex = defaultProps.idIndex,
-  isSelectedIndex = defaultProps.isSelectedIndex,
-  selection = defaultProps.selection,
-  sort,
-  onChange = defaultProps.onChange,
-  onClick = defaultProps.onClick,
-  onDoubleClick = defaultProps.onDoubleClick,
-  iconColor = defaultProps.iconColor,
-  state = defaultProps.state,
-}: FlexGridProps) {
-  return (
-    <div
-      className={cx(className, {
-        [styles['flexGrid-inactive']]: state === flexGridState.inactive,
-      })}
-    >
-      <div
-        className={cx(displayStyles['d-flex'], flexboxStyles['flex-row'], flexboxStyles['flex-items-start'], colorStyles['bg-blue-light'], {
-          [borderStyles.border]: items?.[0],
-        })}
-      >
-        {items?.[0]?.names?.map((name, nameIndex) => {
-          const isIdColumn = nameIndex === idIndex
-          const isSelectedColumn = nameIndex === isSelectedIndex
-          const isSelectedComponent =
-            selection === flexGridSelection.radio ? null : (
-              <Checkbox
-                ariaAttr={{ describedBy: name.toString() }}
-                isChecked={items.map((item) => item.values[1]).every((isSelected) => isSelected === true)}
-                onChange={(event) => {
-                  const newItems = items
-                    ?.map(({ values }) =>
-                      values?.map((value, valueIndex) => (valueIndex === isSelectedIndex ? event.target.checked : value)),
-                    )
-                    .map((newItem) => ({
-                      id: newItem[idIndex],
-                      isSelected: newItem[isSelectedIndex],
-                    }))
-                  // @ts-ignore
-                  onChange(newItems)
-                }}
-              />
-            )
-
-          let sortComponent
-
-          if (sort.index === nameIndex && sort.value === name) {
-            if (sort.order === sortOrder.ascending) {
-              sortComponent = <Icon icon={iconName.TriangleUp16} size={iconSize.small} fill={iconColor.sort} />
-            } else {
-              sortComponent = <Icon icon={iconName.TriangleDown16} size={iconSize.small} fill={iconColor.sort} />
-            }
-          }
-
-          return (
-            <Fragment key={uuidv1()}>
-              {!isIdColumn && (
-                <div
-                  className={cx(
-                    typographyStyles.h6,
-                    displayStyles['d-flex'],
-                    flexboxStyles['flex-row'],
-                    paddingStyles['p-2'],
-                    truncateStyles['css-truncate'],
-                    truncateStyles['css-truncate-overflow'],
-                    styles.item,
-                    {
-                      [gridStyles['col-2']]: isSelectedColumn,
-                      [gridStyles['col-12']]: !isSelectedColumn,
-                      [flexboxStyles['flex-justify-center']]: isSelectedColumn,
-                      [flexboxStyles['flex-justify-between']]: !isSelectedColumn,
-                    },
-                  )}
-                  onClick={() => {
-                    if (!isSelectedColumn) {
-                      // @ts-ignore
-                      onClick({
-                        index: nameIndex,
-                        value: name,
-                        order: sort.order,
-                      })
-                    }
-                  }}
-                  onKeyPress={() => {}}
-                  role="button"
-                  tabIndex={0}
-                >
-                  {isSelectedColumn ? (
-                    isSelectedComponent
-                  ) : (
-                    <div className={cx(displayStyles['d-flex'], flexboxStyles['flex-justify-between'], layoutStyles['width-full'])}>
-                      <div className={cx(truncateStyles['css-truncate'], truncateStyles['css-truncate-overflow'])}>
-                        {getCapizalizedString({ string: name })}
-                      </div>
-                      <div className={cx(displayStyles['d-flex'], flexboxStyles['flex-items-start'], marginStyles['ml-1'])}>
-                        {sortComponent}
-                        {nameIndex < items?.[0]?.names.length - 1 ? ( // eslint-disable-line no-unsafe-optional-chaining
-                          <span className={cx(marginStyles['ml-1'], colorStyles['text-gray-light'])}> |</span>
-                        ) : null}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </Fragment>
-          )
-        })}
-      </div>
-      {items?.map((item, itemIndex) => (
-        <div
-          key={uuidv1()}
-          className={cx(
-            displayStyles['d-flex'],
-            flexboxStyles['flex-row'],
-            flexboxStyles['flex-items-start'],
-            borderStyles.border,
-            styles.item,
-            styles.row,
-          )}
-          onClick={() => {
-            let bubleUpNewItems = true
-
-            const newItems = items
-              ?.map(({ values }, newItemIndex) =>
-                values?.map((newValue, newValueIndex) => {
-                  if (typeof newValue === 'object' && ['FileDirectory16', 'File16'].includes(newValue?.icon)) {
-                    bubleUpNewItems = false
-                  }
-                  return newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? !newValue : newValue
-                }),
-              )
-              .map((newItem) => ({
-                id: newItem[idIndex],
-                isSelected: newItem[isSelectedIndex],
-              }))
-            if (bubleUpNewItems) {
-              // @ts-ignore
-              onChange(newItems)
-            }
-          }}
-          onKeyPress={() => {}}
-          role="button"
-          tabIndex={0}
-          onDoubleClick={() => {
-            // @ts-ignore
-            onDoubleClick(itemIndex)
-          }}
-        >
-          {item.values.map((value, valueIndex) => {
-            const isIdColumn = valueIndex === idIndex
-            const isSelectedColumn = valueIndex === isSelectedIndex
-            const isSelectedComponent =
-              selection === flexGridSelection.radio ? (
-                <Radio
-                  name="isSelected"
-                  isChecked={item.values[isSelectedIndex] === true}
-                  onChange={(event) => {
-                    const newItems = items?.map(({ names, values }, newItemIndex) => ({
-                      names,
-                      values: values.map((newValue, newValueIndex) => {
-                        if (newItemIndex === itemIndex && newValueIndex === isSelectedIndex) {
-                          return event.target.checked
-                        }
-
-                        if (newItemIndex === itemIndex && newValueIndex !== isSelectedIndex) {
-                          return newValue
-                        }
-
-                        if (newItemIndex !== itemIndex && newValueIndex === isSelectedIndex) {
-                          return false
-                        }
-
-                        if (newItemIndex !== itemIndex && newValueIndex !== isSelectedIndex) {
-                          return newValue
-                        }
-
-                        return newValue
-                      }),
-                    }))
-                    // @ts-ignore
-                    onChange(newItems)
-                  }}
-                />
-              ) : (
-                <Checkbox
-                  ariaAttr={{ describedBy: 'isSelected' }}
-                  isChecked={item.values[isSelectedIndex] === true}
-                  onChange={(event) => {
-                    const newItems = items
-                      ?.map(({ values }, newItemIndex) =>
-                        values?.map((newValue, newValueIndex) =>
-                          newItemIndex === itemIndex && newValueIndex === isSelectedIndex ? event.target.checked : newValue,
-                        ),
-                      )
-                      .map((newItem) => ({
-                        id: newItem[idIndex],
-                        isSelected: newItem[isSelectedIndex],
-                      }))
-                    // @ts-ignore
-                    onChange(newItems)
-                  }}
-                />
-              )
-            const iconComponent = value?.icon ? <Icon icon={iconName[value.icon]} size={iconSize.small} fill={iconColor.object} /> : null
-
-            return (
-              <Fragment key={uuidv1()}>
-                {!isIdColumn && (
-                  <div
-                    key={uuidv1()}
-                    className={cx(
-                      displayStyles['d-flex'],
-                      flexboxStyles['flex-row'],
-                      paddingStyles['p-2'],
-                      truncateStyles['css-truncate'],
-                      truncateStyles['css-truncate-overflow'],
-                      typographyStyles['no-wrap'],
-                      {
-                        [gridStyles['col-2']]: isSelectedColumn,
-                        [gridStyles['col-12']]: !isSelectedColumn,
-                        [flexboxStyles['flex-justify-center']]: isSelectedColumn,
-                        [flexboxStyles['flex-justify-start']]: !isSelectedColumn,
-                      },
-                    )}
-                  >
-                    {isSelectedColumn ? (
-                      isSelectedComponent
-                    ) : (
-                      <div className={cx(truncateStyles['css-truncate'], truncateStyles['css-truncate-overflow'])}>
-                        {value?.icon && (
-                          <Fragment>
-                            {iconComponent}
-                            <span className={marginStyles['ml-2']}>{value.value}</span>
-                          </Fragment>
-                        )}
-                        {value instanceof Date && `${value.toLocaleDateString()} ${value.toLocaleTimeString()}`}
-                        {Array.isArray(value) && value.find(({ isSelected }) => isSelected === true).text}
-                        {!value?.icon && !(value instanceof Date) && !Array.isArray(value) && value?.toString()}
-                      </div>
-                    )}
-                  </div>
-                )}
-              </Fragment>
-            )
-          })}
-        </div>
-      ))}
-    </div>
-  )
-}

package/build/primer/Grid/FlexGrid/__tests__/FlexGrid.int.data.ts

@@ -1,289 +0,0 @@
-export const filesObjects = [
-  {
-    contents: null,
-    'date-created': 'Wed May 13 2015',
-    'date-modified': 'Fri Feb 03 2017',
-    id: 'file-169a4ad0-ceaa-4a3b-9ee8-056f96c44953',
-    isSelected: false,
-    kind: 'PostScript file',
-    name: {
-      icon: 'File16',
-      value: 'y8P.ps',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'file-169a4ad0-ceaa-4a3b-9ee8-056f96c44953',
-        isSelected: false,
-        text: 'y8P.ps',
-      },
-    ],
-    size: '37.72 exabyte (EB)',
-  },
-  {
-    contents: null,
-    'date-created': 'Fri May 01 2020',
-    'date-modified': 'Mon Dec 31 2018',
-    id: 'file-26ea87eb-26e8-4f05-aec2-4c686ff7e2ec',
-    isSelected: false,
-    kind: 'Perl script file',
-    name: {
-      icon: 'File16',
-      value: 'Pj9m.cgi',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'file-26ea87eb-26e8-4f05-aec2-4c686ff7e2ec',
-        isSelected: false,
-        text: 'Pj9m.cgi',
-      },
-    ],
-    size: '339 gigabyte (GB)',
-  },
-  {
-    contents: null,
-    'date-created': 'Mon Oct 31 2016',
-    'date-modified': 'Tue Feb 21 2017',
-    id: 'file-bd9da022-f0c1-47ad-b4c4-c2f7176c4535',
-    isSelected: false,
-    kind: 'PSD image',
-    name: {
-      icon: 'File16',
-      value: 'mRGfhp.psd',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'file-bd9da022-f0c1-47ad-b4c4-c2f7176c4535',
-        isSelected: false,
-        text: 'mRGfhp.psd',
-      },
-    ],
-    size: '325.6 kilobyte (KB)',
-  },
-  {
-    contents: null,
-    'date-created': 'Wed Mar 11 2020',
-    'date-modified': 'Sun Aug 26 2018',
-    id: 'file-75c01598-a68d-43c5-bbe6-2d76678466ba',
-    isSelected: false,
-    kind: 'Active Server Page file',
-    name: {
-      icon: 'File16',
-      value: 'FBrXhyh736LIV.aspx',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'file-75c01598-a68d-43c5-bbe6-2d76678466ba',
-        isSelected: false,
-        text: 'FBrXhyh736LIV.aspx',
-      },
-    ],
-    size: '716 terabyte (TB)',
-  },
-  {
-    contents: [
-      {
-        contents: null,
-        'date-created': 'Sun May 18 2014',
-        'date-modified': 'Tue Feb 25 2020',
-        id: 'file-ad02e6c0-24aa-47cd-b65f-c3127dc01259',
-        isSelected: false,
-        kind: 'PostScript file',
-        name: {
-          icon: 'File16',
-          value: 'OJNhlbZ8WMjuly.ps',
-        },
-        path: [
-          {
-            href: 'Files',
-            isSelected: true,
-            text: 'Files',
-          },
-          {
-            href: 'directory-56a0c7dc-dc95-4fd8-b079-256708e84e46',
-            isSelected: false,
-            text: 'beylpO7v',
-          },
-          {
-            href: 'file-ad02e6c0-24aa-47cd-b65f-c3127dc01259',
-            isSelected: false,
-            text: 'OJNhlbZ8WMjuly.ps',
-          },
-        ],
-        size: '580.5 exabyte (EB)',
-      },
-    ],
-    'date-created': 'Fri Mar 21 2014',
-    'date-modified': 'Wed Mar 04 2015',
-    id: 'directory-56a0c7dc-dc95-4fd8-b079-256708e84e46',
-    isSelected: false,
-    kind: 'Folder',
-    name: {
-      icon: 'FileDirectory16',
-      value: 'beylpO7v',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'directory-56a0c7dc-dc95-4fd8-b079-256708e84e46',
-        isSelected: false,
-        text: 'beylpO7v',
-      },
-    ],
-    size: '--',
-  },
-  {
-    contents: null,
-    'date-created': 'Sun Oct 20 2019',
-    'date-modified': 'Fri Feb 08 2019',
-    id: 'file-3be9cb1a-8744-438b-9506-99ef88a7480a',
-    isSelected: false,
-    kind: 'Database file',
-    name: {
-      icon: 'File16',
-      value: 'aD9iiQhkj.db',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'file-3be9cb1a-8744-438b-9506-99ef88a7480a',
-        isSelected: false,
-        text: 'aD9iiQhkj.db',
-      },
-    ],
-    size: '913.5 bit (b)',
-  },
-  {
-    contents: null,
-    'date-created': 'Fri Mar 11 2016',
-    'date-modified': 'Thu May 02 2019',
-    id: 'file-bbe22783-ec56-4ea3-8edb-a9e4cee48d9e',
-    isSelected: false,
-    kind: 'Apple Mail e-mail file',
-    name: {
-      icon: 'File16',
-      value: '9kcUYOj65.emlx',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'file-bbe22783-ec56-4ea3-8edb-a9e4cee48d9e',
-        isSelected: false,
-        text: '9kcUYOj65.emlx',
-      },
-    ],
-    size: '921.8 zettabyte (ZB)',
-  },
-  {
-    contents: [
-      {
-        contents: null,
-        'date-created': 'Sat May 07 2016',
-        'date-modified': 'Fri Sep 05 2014',
-        id: 'file-b4dddd05-fc2d-4fbe-b3f0-a69a6cab321c',
-        isSelected: false,
-        kind: 'Internet security certificate',
-        name: {
-          icon: 'File16',
-          value: 'DTmnIjnVyaK.cer',
-        },
-        path: [
-          {
-            href: 'Files',
-            isSelected: true,
-            text: 'Files',
-          },
-          {
-            href: 'directory-8e2504aa-f428-441e-be2c-83c4a9c3219a',
-            isSelected: false,
-            text: '7',
-          },
-          {
-            href: 'file-b4dddd05-fc2d-4fbe-b3f0-a69a6cab321c',
-            isSelected: false,
-            text: 'DTmnIjnVyaK.cer',
-          },
-        ],
-        size: '760 terabyte (TB)',
-      },
-    ],
-    'date-created': 'Sun Oct 25 2015',
-    'date-modified': 'Thu Apr 11 2019',
-    id: 'directory-8e2504aa-f428-441e-be2c-83c4a9c3219a',
-    isSelected: false,
-    kind: 'Folder',
-    name: {
-      icon: 'FileDirectory16',
-      value: '7',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'directory-8e2504aa-f428-441e-be2c-83c4a9c3219a',
-        isSelected: false,
-        text: '7',
-      },
-    ],
-    size: '--',
-  },
-  {
-    contents: null,
-    'date-created': 'Tue Jan 20 2015',
-    'date-modified': 'Tue Oct 15 2013',
-    id: 'file-16db577b-1167-4add-bb79-9eab8c9b9217',
-    isSelected: false,
-    kind: 'Microsoft Excel file with macros',
-    name: {
-      icon: 'File16',
-      value: '1NplEr0hHjFnTmW.xlsm',
-    },
-    path: [
-      {
-        href: 'Files',
-        isSelected: true,
-        text: 'Files',
-      },
-      {
-        href: 'file-16db577b-1167-4add-bb79-9eab8c9b9217',
-        isSelected: false,
-        text: '1NplEr0hHjFnTmW.xlsm',
-      },
-    ],
-    size: '474.53 petabyte (PB)',
-  },
-]

package/build/primer/Grid/FlexGrid/__tests__/FlexGrid.int.story.tsx

@@ -1,146 +0,0 @@
-import { action } from 'storybook/actions'
-import { withTests } from '@storybook/addon-jest'
-import { sortDefault } from '@papillonarts/library/sort'
-import { flexGridSelection, flexGridState } from '../FlexGrid.prop'
-import { filesObjects } from './FlexGrid.int.data'
-import results from '../../../../../../../.jest-test-results.json'
-
-const FlexGrid =
-  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
-    ? require('../../../../index').primer.Grid.FlexGrid
-    : require('../../../../../build').primer.Grid.FlexGrid
-
-export default {
-  title: 'Primer/Molecule/Grid/FlexGrid',
-  component: FlexGrid,
-  decorators: [withTests({ results })],
-  parameters: { jest: ['FlexGrid.int.test.js'] },
-  excludeStories: ['ariaAttr', 'text', 'custom'],
-}
-
-const radioItemsWithSelection = filesObjects.map((filesObject) =>
-  (({ contents, path, id, isSelected, ...otherProperties }) => ({
-    names: Object.keys({ id, isSelected, ...otherProperties }),
-    values: Object.values({ id, isSelected, ...otherProperties }),
-  }))(filesObject),
-)
-
-const radioItemsWithoutSelection = filesObjects.map((filesObject) =>
-  (({ contents, path, id, isSelected, ...otherProperties }) => ({
-    names: Object.keys({ id, ...otherProperties }),
-    values: Object.values({ id, ...otherProperties }),
-  }))(filesObject),
-)
-
-const checkboxItemsWithSelection = filesObjects.map((filesObject) =>
-  (({ contents, path, id, isSelected, ...otherProperties }) => ({
-    names: Object.keys({ id, isSelected, ...otherProperties }),
-    values: Object.values({ id, isSelected, ...otherProperties }),
-  }))(filesObject),
-)
-
-const checkboxItemsWithoutSelection = filesObjects.map((filesObject) =>
-  (({ contents, path, id, isSelected, ...otherProperties }) => ({
-    names: Object.keys({ id, ...otherProperties }),
-    values: Object.values({ id, ...otherProperties }),
-  }))(filesObject),
-)
-
-export function radioWithSelection() {
-  return (
-    <FlexGrid
-      items={radioItemsWithSelection}
-      idIndex={0}
-      isSelectedIndex={1}
-      selection={flexGridSelection.radio}
-      sort={sortDefault}
-      onChange={action('onChange')}
-      onDoubleClick={action('onDoubleClick')}
-    />
-  )
-}
-
-export function radioWithSelectionInactive() {
-  return (
-    <FlexGrid
-      items={radioItemsWithSelection}
-      idIndex={0}
-      isSelectedIndex={1}
-      selection={flexGridSelection.radio}
-      sort={sortDefault}
-      onChange={action('onChange')}
-      onDoubleClick={action('onDoubleClick')}
-      state={flexGridState.inactive}
-    />
-  )
-}
-
-export function radioWithoutSelection() {
-  return <FlexGrid idIndex={0} items={radioItemsWithoutSelection} sort={sortDefault} onChange={action('onChange')} />
-}
-
-export function radioWithoutSelectionInactive() {
-  return (
-    <FlexGrid
-      idIndex={0}
-      items={radioItemsWithoutSelection}
-      sort={sortDefault}
-      onChange={action('onChange')}
-      state={flexGridState.inactive}
-    />
-  )
-}
-
-export function checkboxWithSelection() {
-  return (
-    <FlexGrid
-      items={checkboxItemsWithSelection}
-      idIndex={0}
-      isSelectedIndex={1}
-      selection={flexGridSelection.checkbox}
-      sort={sortDefault}
-      onChange={action('onChange')}
-      onDoubleClick={action('onDoubleClick')}
-    />
-  )
-}
-
-export function checkboxWithSelectionInactive() {
-  return (
-    <FlexGrid
-      items={checkboxItemsWithSelection}
-      idIndex={0}
-      isSelectedIndex={1}
-      selection={flexGridSelection.checkbox}
-      sort={sortDefault}
-      onChange={action('onChange')}
-      onDoubleClick={action('onDoubleClick')}
-      state={flexGridState.inactive}
-    />
-  )
-}
-
-export function checkboxWithoutSelection() {
-  return (
-    <FlexGrid
-      idIndex={0}
-      items={checkboxItemsWithoutSelection}
-      sort={sortDefault}
-      onChange={action('onChange')}
-      onDoubleClick={action('onDoubleClick')}
-    />
-  )
-}
-
-export function checkboxWithoutSelectionInactive() {
-  return (
-    <FlexGrid
-      idIndex={0}
-      items={checkboxItemsWithoutSelection}
-      sort={sortDefault}
-      onChange={action('onChange')}
-      onDoubleClick={action('onDoubleClick')}
-      state={flexGridState.inactive}
-    />
-  )
-}