Merge pull request #103 from perimetre/feat/add-time-picker

Adds select stack component

CHANGELOG.md

@@ -25,6 +25,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [10.0.0] 2023-04-12
+
+### **Breaking changes**
+
+- Fix: made sure all buttons are of `type=button` unless stated otherwise. To fix issues where buttons would accidentally submit forms.
+
+### Added
+
+- Added `SelectStack` component
+
 ## [9.5.0] 2023-04-12
 
 ### Added

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "9.5.0",
+  "version": "10.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

src/components/Drawer/index.tsx

@@ -204,12 +204,12 @@ export const Drawer: React.FC<PropsWithChildren<DrawerProps>> = ({
       <div className={classnames('flex items-center', { 'justify-between': onBack, 'justify-end': !onBack })}>
         {/* If there's the back button, display it */}
         {onBack && (
-          <button className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={onBack}>
+          <button type="button" className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={onBack}>
             {/* Adds a back icon */}
             <BackIcon className="pui-animate-scaleHover-target" />
           </button>
         )}
-        <button className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={() => onOpen(false)}>
+        <button type="button" className="pui-btn-icon text-pui-paragraph-900 p-4" onClick={() => onOpen(false)}>
           {/* Adds a close icon */}
           <CrossIcon className="pui-animate-scaleHover-target" />
         </button>

src/components/EventCard/index.tsx

@@ -135,6 +135,7 @@ export const EventCard: React.FC<EventCardProps> = ({
             />
           </div>
           <button
+            type="button"
             onClick={onPressButton}
             className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >

src/components/HorizontalResizeablePanel/index.tsx

@@ -147,13 +147,15 @@ export const HorizontalResizeablePanel: React.FC<HorizontalResizeablePanelProps>
     <div {...props} className={classNames('relative', props.className)} ref={ref}>
       {resizeLeft && (
         <button
+          type="button"
           className="absolute h-full inset-y-0 w-2 cursor-col-resize"
           style={{ left: '-4px' }}
           onMouseDown={(e) => onMove(e, 'left')}
         />
       )}
       {resizeRight && (
         <button
+          type="button"
           className="absolute h-full inset-y-0 w-2 cursor-col-resize"
           style={{ right: '-4px' }}
           onMouseDown={(e) => onMove(e, 'right')}

src/components/Modal/index.tsx

@@ -116,7 +116,7 @@ export const Modal: React.FC<PropsWithChildren<ModalProps>> = ({
             <h3 className={classnames(removePadding ? 'p-0' : 'p-4')}>{title}</h3>
             {/* Adds a close icon */}
             {isClosable && (
-              <button className="pui-btn-icon text-pui-paragraph-900 px-6 py-4" onClick={onToggle}>
+              <button type="button" className="pui-btn-icon text-pui-paragraph-900 px-6 py-4" onClick={onToggle}>
                 <CrossIcon className="pui-animate-scaleHover-target" />
               </button>
             )}

src/components/ModuleCard/index.tsx

@@ -114,6 +114,7 @@ export const ModuleCard: React.FC<ModuleCardProps> = ({
         <div className={classnames('text-base mb-6 font-normal', classNameContent)}>{content}</div>
         <div className="flex-1 inline-flex justify-end items-end w-full">
           <button
+            type="button"
             onClick={onPressButton}
             className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >

src/components/ProgramCard/index.tsx

@@ -116,6 +116,7 @@ export const ProgramCard: React.FC<ProgramCardProps> = ({
         </div>
         <div className="inline-flex justify-end items-center w-full">
           <button
+            type="button"
             onClick={onPressButton}
             className="inline-flex items-center pui-chip-bordered h-8 justify-items-end cursor-pointer font-bold focus:outline-none"
           >

src/components/SelectStack/SelectStack.stories.tsx

@@ -0,0 +1,49 @@
+// also exported from '@storybook/react' if you can deal with breaking changes in 6.1
+import { Meta, Story } from '@storybook/react/types-6-0';
+import React, { useState } from 'react';
+import { SelectStack, SelectStackProps } from '.';
+
+const items = ['Option 1', 'Option 2', 'Option 3'];
+
+export default {
+  title: 'Components/Inputs/SelectStack',
+  component: SelectStack,
+  argTypes: {
+    disabled: {
+      control: {
+        type: 'boolean'
+      }
+    },
+    className: {
+      control: {
+        type: 'text'
+      }
+    },
+    items: { defaultValue: items },
+    onClick: { action: 'onClick' }
+  }
+} as Meta;
+
+/**
+ * A story that displays a SelectStack example
+ *
+ * @param props the story props
+ * @param props.onClick On click event handler
+ */
+const Template: Story<SelectStackProps & { onClick?: () => void }> = ({ onClick, ...props }) => {
+  const [activeItem, setActiveItem] = useState(items[0]);
+
+  return (
+    <SelectStack
+      {...props}
+      onClick={(item, e) => {
+        setActiveItem(item);
+
+        onClick?.(item, e);
+      }}
+      activeItem={activeItem}
+    />
+  );
+};
+
+export const Default = Template.bind({});

src/components/SelectStack/index.tsx

@@ -0,0 +1,61 @@
+import classNames from 'classnames';
+import React from 'react';
+
+export type SelectStackProps = Omit<
+  React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>,
+  'onClick'
+> & {
+  /** The items to display */
+  items?: string[];
+  /** The active item */
+  activeItem?: string;
+  /**The container class name */
+  containerClassName?: string;
+  /** On click event handler */
+  onClick?: (item: string, e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+};
+
+/**
+ * A stack of selectable buttons
+ *
+ * @param props The component props
+ * @param props.items The items to display
+ * @param props.activeItem The active item
+ * @param props.onClick On click event handler
+ * @param props.containerClassName The container class name
+ */
+export const SelectStack: React.FC<SelectStackProps> = ({
+  items,
+  activeItem,
+  onClick,
+  containerClassName,
+  ...props
+}) => {
+  return (
+    <div className={classNames('mb-2 flex items-center', containerClassName)}>
+      {items?.map((item, index) => {
+        const active = item === activeItem;
+        return (
+          <button
+            key={index}
+            type="button"
+            {...props}
+            onClick={onClick ? (e) => onClick(item, e) : undefined}
+            className={classNames(
+              'border border-black px-4 py-1 rounded-full transition-colors ',
+              {
+                'rounded-l-none': index > 0, // All BUT first
+                'rounded-r-none border-r-0': index < items.length - 1 // All BUT last,
+              },
+              active ? (!props.disabled ? 'text-pui-placeholder-color' : 'text-gray-500') : 'text-gray-400',
+              !props.disabled ? 'hover:bg-gray-100' : 'border-gray-300 bg-gray-50',
+              props.className
+            )}
+          >
+            {item}
+          </button>
+        );
+      })}
+    </div>
+  );
+};

src/components/WYSIWYGInput/Toolbar/Section/Item/index.tsx

@@ -66,6 +66,7 @@ export const SectionItems: React.FC<SectionItemsProps> = ({
             const isActive = item.isActive(editorState);
             return (
               <button
+                type="button"
                 key={item.name}
                 className={classnames(
                   'pui-btn-icon p-0 h-8 w-8 flex items-center justify-center border border-gray-200',