code cleanup per review

Author: Mat Jones

src/assets/scss/6-components/molecules/_drag-and-drop-list-box.scss

@@ -1,10 +1,4 @@
 .c-drag-and-drop-list-box {
-    &.-dragging-container {
-        .c-button {
-            display: none !important;
-        }
-    }
-
     .c-list-box__item {
         &.-dragging {
             @include box-shadow(0px, 7px, 20px, get-color-neutral("30"));

src/molecules/lists/drag-and-drop-list-box.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import DragAndDropListBox from "./drag-and-drop-list-box";
+import { DragAndDropListBox } from "./drag-and-drop-list-box";
 import { ListBoxItem } from "./list-box";
 import { Paragraph } from "../../atoms/typography/paragraph";
 

src/molecules/lists/drag-and-drop-list-box.tsx

@@ -9,7 +9,7 @@ import {
     DroppableProvided,
     DroppableStateSnapshot,
 } from "react-beautiful-dnd";
-import { CollectionUtils } from "andculturecode-javascript-core";
+import { CollectionUtils, StringUtils } from "andculturecode-javascript-core";
 import uuid from "uuid";
 import {
     ListBoxProps,
@@ -38,7 +38,7 @@ const COMPONENT_CLASS = `${ListBoxBaseClassName} c-drag-and-drop-list-box`;
 // #region Interfaces
 // -------------------------------------------------------------------------------------------------
 
-export interface DragAndDropListBoxProps<T extends any>
+export interface DragAndDropListBoxProps<T extends string | number = string>
     extends Omit<ListBoxProps<T>, "children" | "items"> {
     droppableId: string;
     items: Array<ListBoxItem<T>>;
@@ -51,14 +51,14 @@ export interface DragAndDropListBoxProps<T extends any>
 // #region Component
 // -------------------------------------------------------------------------------------------------
 
-const DragAndDropListBox = <T extends any>(
+export const DragAndDropListBox = <T extends string | number = string>(
     props: DragAndDropListBoxProps<T>
 ): ReactElement<ListBoxProps<T>> | null => {
     const items = props.items;
     const hasItems = CollectionUtils.hasValues(items);
 
     // Short-circuit if no items in collection
-    if (items != null && !hasItems) {
+    if (!hasItems) {
         if (props.hideWhenNoItems) {
             return null;
         }
@@ -118,7 +118,7 @@ const DragAndDropListBox = <T extends any>(
             <React.Fragment>
                 {itemProps.items.map((item: ListBoxItem<T>, index: number) => (
                     <Draggable
-                        draggableId={`${item.id}`}
+                        draggableId={item.id.toString()}
                         index={index}
                         key={uuid.v4()}>
                         {(
@@ -128,19 +128,19 @@ const DragAndDropListBox = <T extends any>(
                             <div
                                 {...provided.draggableProps}
                                 {...provided.dragHandleProps}
-                                ref={provided.innerRef}
                                 className={`${ListBoxItemClassName} ${cssIsDragging(
                                     snapshot
                                 )}`}
+                                ref={provided.innerRef}
                                 style={provided.draggableProps.style}>
                                 <div className="-drag-handle">
                                     <Icon
-                                        type={Icons.DragAndDrop}
                                         size={IconSizes.Large}
+                                        type={Icons.DragAndDrop}
                                     />
                                 </div>
                                 {// if
-                                item.label != null && (
+                                StringUtils.hasValue(item.label) && (
                                     <div
                                         className={`${ListBoxItemClassName}__label`}>
                                         {item.label}
@@ -153,7 +153,6 @@ const DragAndDropListBox = <T extends any>(
                                 {// if
                                 props.onActionClick != null && (
                                     <Button
-                                        type={ButtonTypes.Button}
                                         cssClassName={`${ListBoxItemClassName}__action`}
                                         onClick={() =>
                                             props.onActionClick!(
@@ -162,7 +161,8 @@ const DragAndDropListBox = <T extends any>(
                                             )
                                         }
                                         size={ButtonSizes.Small}
-                                        style={ButtonStyles.TertiaryAlt}>
+                                        style={ButtonStyles.TertiaryAlt}
+                                        type={ButtonTypes.Button}>
                                         {props.actionText ?? "Action"}
                                     </Button>
                                 )}
@@ -187,10 +187,10 @@ const DragAndDropListBox = <T extends any>(
                 ) => (
                     <div
                         {...provided.droppableProps}
-                        ref={provided.innerRef}
                         className={`${COMPONENT_CLASS} ${cssIsDragging(
                             snapshot
-                        )}`}>
+                        )}`}
+                        ref={provided.innerRef}>
                         {// if
                         hasItems && <DraggableItemList items={items} />}
                         {provided.placeholder}
@@ -202,11 +202,3 @@ const DragAndDropListBox = <T extends any>(
 };
 
 // #endregion Component
-
-// -------------------------------------------------------------------------------------------------
-// #region Exports
-// -------------------------------------------------------------------------------------------------
-
-export default DragAndDropListBox;
-
-// #endregion Exports

src/molecules/lists/list-box.stories.tsx

@@ -1,7 +1,8 @@
 import { boolean, object, text } from "@storybook/addon-knobs";
 import React from "react";
 import { ToastContainer, ToastPosition, Zoom } from "react-toastify";
-import ListBox, { ListBoxItem } from "./list-box";
+import { ListBox, ListBoxItem } from "./list-box";
+import { ToastManager } from "../../utilities/toast-manager";
 
 export default {
     title: "Molecules | Lists / ListBox",
@@ -33,15 +34,15 @@ export const listBoxDefault = () => {
     const actionText = text("Action Button Text", "Click Me!");
 
     const handleActionClick = (id: number) =>
-        window.alert(`Clicked item ${id}!`);
+        ToastManager.success(`Clicked item ${id}!`);
 
     return (
         <React.Fragment>
             <ListBox
-                items={itemsKnob}
+                actionText={actionText}
                 hideWhenNoItems={hideWhenNoItems}
+                items={itemsKnob}
                 onActionClick={hasAction ? handleActionClick : undefined}
-                actionText={actionText}
             />
             <ToastContainer
                 draggable={false}

src/molecules/lists/list-box.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement } from "react";
-import { CollectionUtils } from "andculturecode-javascript-core";
+import { CollectionUtils, StringUtils } from "andculturecode-javascript-core";
 import { Button } from "../../atoms/buttons/button";
 import { ButtonTypes } from "../../atoms/constants/button-types";
 import { ButtonSizes } from "../../atoms/constants/button-sizes";
@@ -19,14 +19,14 @@ export const ListBoxItemClassName = `${ListBoxBaseClassName}__item`;
 // #region Interfaces
 // -------------------------------------------------------------------------------------------------
 
-export interface ListBoxItem<T extends any> {
+export interface ListBoxItem<T extends string | number = string> {
     customAction?: React.ReactNode | React.ReactNodeArray;
     id: T;
     label?: string;
     text: string | React.ReactNode | React.ReactNodeArray;
 }
 
-export interface ListBoxProps<T extends any> {
+export interface ListBoxProps<T extends string | number = string> {
     actionText?: string;
     children?: React.ReactNode | React.ReactNodeArray;
     hideWhenNoItems?: boolean;
@@ -40,7 +40,7 @@ export interface ListBoxProps<T extends any> {
 // #region Component
 // -------------------------------------------------------------------------------------------------
 
-const ListBox = <T extends any>(
+export const ListBox = <T extends string | number = string>(
     props: ListBoxProps<T>
 ): ReactElement<ListBoxProps<T>> | null => {
     if (props.items != null && CollectionUtils.isEmpty(props.items)) {
@@ -61,7 +61,7 @@ const ListBox = <T extends any>(
                 props.items!.map((item: ListBoxItem<T>) => (
                     <div className={ListBoxItemClassName} key={`${item.id}`}>
                         {// if
-                        item.label != null && (
+                        StringUtils.hasValue(item.label) && (
                             <div className={`${ListBoxItemClassName}__label`}>
                                 {item.label}
                             </div>
@@ -72,11 +72,11 @@ const ListBox = <T extends any>(
                         {// if
                         props.onActionClick != null && (
                             <Button
-                                type={ButtonTypes.Button}
                                 cssClassName={`${ListBoxItemClassName}__action`}
                                 onClick={() => props.onActionClick!(item.id)}
                                 size={ButtonSizes.Small}
-                                style={ButtonStyles.TertiaryAlt}>
+                                style={ButtonStyles.TertiaryAlt}
+                                type={ButtonTypes.Button}>
                                 {props.actionText ?? "Action"}
                             </Button>
                         )}
@@ -89,11 +89,3 @@ const ListBox = <T extends any>(
 };
 
 // #endregion Component
-
-// -------------------------------------------------------------------------------------------------
-// #region Exports
-// -------------------------------------------------------------------------------------------------
-
-export default ListBox;
-
-// #endregion Exports