@papillonarts/components 0.8.0 → 0.9.0

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

@@ -0,0 +1,27 @@
+import { withTests } from '@storybook/addon-jest'
+import { filesObjects } from './DisplayTable.int.data'
+import results from '../../../../../../../.jest-test-results.json'
+
+const DisplayTable =
+  process.env.NODE_ENV === 'develop' || process.env.NODE_ENV === 'test'
+    ? require('../../../../index').primer.Grid.DisplayTable
+    : require('../../../../../build').primer.Grid.DisplayTable
+
+export default {
+  title: 'Primer/Atom/Grid/DisplayTable',
+  component: DisplayTable,
+  decorators: [withTests({ results })],
+  parameters: { jest: ['DisplayTable.int.test.js'] },
+  excludeStories: ['custom'],
+}
+
+export function regular() {
+  const items = filesObjects.map((filesObject) =>
+    (({ contents, path, id, isSelected, ...otherProperties }) => ({
+      names: Object.keys({ id, isSelected, ...otherProperties }),
+      values: Object.values({ id, isSelected, ...otherProperties }),
+    }))(filesObject),
+  )
+
+  return <DisplayTable items={items} idIndex={0} isSelectedIndex={1} />
+}

package/build/primer/Grid/DisplayTable/__tests__/DisplayTable.int.test.ts

@@ -0,0 +1,9 @@
+import { regular } from './DisplayTable.int.story'
+
+describe('<DisplayTable />', () => {
+  describe('Render', () => {
+    test('must match regular()', () => {
+      expect(global.renderToJSON(regular())).toMatchSnapshot()
+    })
+  })
+})

package/build/primer/Grid/DisplayTable/index.ts

@@ -0,0 +1 @@
+export { DisplayTable } from './DisplayTable'

package/build/primer/Grid/FlexGrid/FlexGrid.prop.ts

@@ -0,0 +1,59 @@
+export const flexGridState = {
+  active: 'active',
+  inactive: 'inactive',
+}
+
+export const flexGridSelection = {
+  checkbox: 'checkbox',
+  radio: 'radio',
+}
+
+export const defaultProps = {
+  className: null,
+  idIndex: -1,
+  isSelectedIndex: -1,
+  selection: flexGridSelection.checkbox,
+  onChange: () => {},
+  onClick: () => {},
+  onDoubleClick: () => {},
+  iconColor: {
+    sort: '#990000',
+    object: '#79b8ff',
+  },
+  state: flexGridState.active,
+}
+
+export interface ValueType {
+  value: React.ReactNode
+  icon: React.ReactNode
+}
+
+export interface ItemType {
+  names: React.ReactNode[]
+  values: ValueType[] | React.ReactNode[]
+}
+
+export interface SortType {
+  index: number
+  value: string
+  order: string
+}
+
+export interface IconColorType {
+  sort: string
+  object: string
+}
+
+export interface FlexGridProps {
+  className?: string
+  items: ItemType[]
+  idIndex?: number
+  isSelectedIndex?: number
+  selection?: typeof flexGridSelection.checkbox | typeof flexGridSelection.radio
+  sort: SortType
+  onChange?: (value) => void
+  onClick?: (value) => void
+  onDoubleClick?: (value) => void
+  iconColor?: IconColorType
+  state?: typeof flexGridState.active | typeof flexGridState.inactive
+}

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

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

@@ -0,0 +1,289 @@
+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)',
+  },
+]