@hellobetterdigitalnz/betterui 0.0.3-33 → 0.0.3-331

package/dist/main.d.ts

@@ -0,0 +1 @@
+

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@hellobetterdigitalnz/betterui",
-  "version": "0.0.3-33",
+  "version": "0.0.3-331",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "files": [
-    "/dist"
+    "dist",
+    "src/Components/**/*"
   ],
   "scripts": {
     "dev": "vite",
@@ -20,7 +21,15 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
-    "classnames": "^2.4.0"
+    "@hellobetterdigitalnz/betterui": "^0.0.3-272",
+    "@storybook/addon-docs": "^8.4.7",
+    "@tinymce/tinymce-react": "^4.3.2",
+    "@types/react-beautiful-dnd": "^13.1.8",
+    "classnames": "^2.4.0",
+    "date-fns": "^4.1.0",
+    "dhtmlx-gantt": "^9.0.14",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-loading-skeleton": "^3.5.0"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -31,16 +40,16 @@
     "@babel/preset-env": "^7.23.7",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@storybook/addon-essentials": "7.6.5",
-    "@storybook/addon-interactions": "7.6.5",
-    "@storybook/addon-links": "7.6.5",
-    "@storybook/addon-mdx-gfm": "7.6.5",
-    "@storybook/addon-onboarding": "1.0.10",
-    "@storybook/addon-styling-webpack": "0.0.5",
-    "@storybook/blocks": "7.6.5",
-    "@storybook/react": "7.6.5",
-    "@storybook/react-vite": "7.6.5",
-    "@storybook/test": "7.6.5",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/addon-mdx-gfm": "^8.4.2",
+    "@storybook/addon-onboarding": "^8.4.2",
+    "@storybook/addon-styling-webpack": "^1.0.0",
+    "@storybook/blocks": "^8.4.2",
+    "@storybook/react": "^8.4.2",
+    "@storybook/react-vite": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@types/babel__core": "^7",
     "@types/babel__preset-env": "^7",
     "@types/customize-cra": "^1",
@@ -51,24 +60,26 @@
     "@vitejs/plugin-react": "3.1.0",
     "babel-loader": "^9.1.3",
     "customize-cra": "^1.0.0",
-    "dev": "^0.1.3",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.2",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.10.1",
     "prettier": "^3.1.1",
-    "sass": "^1.69.5",
-    "storybook": "7.6.5",
+    "react": "^18.2.0",
+    "react-docgen-typescript-plugin": "^1.0.8",
+    "react-dom": "^18.2.0",
+    "sass": "^1.81.0",
+    "storybook": "^8.4.2",
     "ts-loader": "^9.5.1",
     "typescript": "^5.2.2",
-    "vite": "4.5.1",
+    "vite": "^6.0.3",
     "vite-plugin-babel": "^1.2.0",
+    "vite-plugin-copy": "^0.1.6",
     "vite-plugin-dts": "^3.7.0",
     "vite-plugin-require": "^1.1.14",
-    "vite-tsconfig-paths": "^4.2.3",
     "webpack": "^5.89.0"
   }
 }

package/src/Components/BetterUIProvider/BetterUIContext.tsx

@@ -0,0 +1,17 @@
+import { createContext, ReactNode } from "react";
+
+interface BetterUIContextType {
+  modalStack: ReactNode[];
+  openModal: (modal: React.ReactNode) => void;
+  closeModal: () => void;
+  closeAllModals: () => void;
+}
+
+const BetterUIContext = createContext<BetterUIContextType>({
+  modalStack: [],
+  openModal: () => {},
+  closeModal: () => {},
+  closeAllModals: () => {},
+});
+
+export default BetterUIContext;

package/src/Components/BetterUIProvider/BetterUIProvider.tsx

@@ -0,0 +1,46 @@
+import React, { FC, ReactNode, useState } from "react";
+import BetterUIContext from "./BetterUIContext";
+
+
+interface BetterUIProviderProps {
+  children: ReactNode;
+}
+
+const BetterUIProvider: FC<BetterUIProviderProps> = (props) => {
+  const { children } = props;
+
+  const [modalStack, setModalStack] = useState<React.ReactNode[]>([]);
+
+  const openModal = (modal: React.ReactNode) => {
+    setModalStack((prevStack) => [...prevStack, modal]);
+  };
+
+  const closeModal = () => {
+    setModalStack((prevStack) => prevStack.slice(0, -1));
+
+  };
+
+  const closeAllModals = () => {
+    setModalStack([]);
+  };
+
+  return (
+    <BetterUIContext.Provider
+      value={{
+        modalStack,
+        openModal,
+        closeModal,
+        closeAllModals,
+      }}
+    >
+        <>
+          {children}
+          {modalStack.map((modal, index) => (
+            <React.Fragment key={index}>{modal}</React.Fragment>
+          ))}
+        </>
+    </BetterUIContext.Provider>
+  );
+};
+
+export default BetterUIProvider;

package/src/Components/BetterUIProvider/index.ts

@@ -0,0 +1,2 @@
+export { default as BetterUIProvider } from './BetterUIProvider.tsx';
+export { default as BetterUIContext } from './BetterUIContext.tsx';

package/src/Components/DataDisplay/Accordion/Accordion.stories.tsx

@@ -0,0 +1,57 @@
+import {Meta, StoryObj} from '@storybook/react';
+import Accordion from './Accordion.tsx';
+import AccordionItem from './AccordionItem.tsx';
+
+const meta: Meta = {
+  title: 'Data Display / Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const AccordionTemplate: Story = {
+  render: ({items, ...args}) => {
+    return (
+      <Accordion {...args}>
+        {items.map((item: any) => (
+          <AccordionItem index={item.index} title={item.title}  >
+            {item.children}
+          </AccordionItem>
+        ))}
+      </Accordion>
+    );
+  },
+};
+
+export const Example = {
+  ...AccordionTemplate,
+  args: {
+    allowMultiple:true,
+    items: [
+      {
+        index:'1',
+        title: 'Lorem ipsum dolor',
+        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+      },
+      {
+        index:'2',
+        title: 'Lorem ipsum dolor',
+        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+      },
+      {
+        index:'3',
+        title: 'Lorem ipsum dolor',
+        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+      },
+      {
+        index:'4',
+        title: 'Lorem ipsum dolor',
+        children: 'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. Duis vestibulum velit eget erat fermentum, fermentum mollis tortor tincidunt. Integer lacinia lacinia urna scelerisque mattis. Fusce vestibulum felis eget magna placerat faucibus id et tellus. Sed rutrum mi sed leo viverra tempus. Nunc eu congue tellus, sed dapibus dui.'
+      },
+    ],
+  },
+};
+

package/src/Components/DataDisplay/Accordion/Accordion.tsx

@@ -0,0 +1,14 @@
+import AccordionProvider from "./AccordionProvider";
+import AccordionProps from "./AccordionProps.tsx";
+
+const Accordion = (props: AccordionProps) => {
+  const {children, allowMultiple} = props
+
+  return <AccordionProvider allowMultiple={allowMultiple ? allowMultiple : false}>
+    <>
+      {children}
+    </>
+  </AccordionProvider>
+};
+
+export default Accordion;

package/src/Components/DataDisplay/Accordion/AccordionContext.tsx

@@ -0,0 +1,11 @@
+import {createContext} from "react";
+import AccordionContextInterface from "./AccordionContextInterface.tsx";
+
+const AccordionContext = createContext<AccordionContextInterface>({
+  handleClick: (index: number) => { console.log(`Handling click for index ${index}`); },
+  isOpened: (index: number) => { console.log(`Handle index ${index} is opened`); return false; },
+  allowMultiple: false,
+  openedList: []
+});
+
+export default AccordionContext;

package/src/Components/DataDisplay/Accordion/AccordionContextInterface.tsx

@@ -0,0 +1,8 @@
+interface AccordionContextInterface {
+  handleClick: (index: number) => void;
+  isOpened: (index: number) => boolean;
+  allowMultiple?: boolean;
+  openedList: any[];
+}
+
+export default AccordionContextInterface

package/src/Components/DataDisplay/Accordion/AccordionItem.tsx

@@ -0,0 +1,68 @@
+import {useContext} from "react";
+import AccordionContext from "./AccordionContext";
+import AccordionItemProps from "./AccordionItemProps.tsx";
+import styles from './accordion.module.scss';
+import CaretUp from "../../Icons/Arrows/CaretUp/CaretUp";
+import CaretDown from "../../Icons/Arrows/CaretDown/CaretDown";
+
+
+const AccordionItem = (props: AccordionItemProps) => {
+  const {
+    index,
+    title,
+    children,
+    onAfterOpened,
+    onAfterClosed,
+    onBeforeClosed,
+    extraClass,
+    accordionClass,
+    icon
+  } = props;
+
+  const itemIndex = typeof index === 'string' ? parseInt(index) : index;
+  const context = useContext(AccordionContext);
+
+  const handleClick = () => {
+    if (context.isOpened(itemIndex)) {
+      let canClose = true;
+      if (onBeforeClosed) {
+        canClose = onBeforeClosed();
+      }
+      if (canClose) {
+        context.handleClick(itemIndex);
+      }
+      if (onAfterClosed) {
+        onAfterClosed();
+      }
+    } else {
+      context.handleClick(itemIndex);
+      if (onAfterOpened) {
+        onAfterOpened();
+      }
+    }
+  };
+
+  return (
+    <div className={`${styles.accordion} ${extraClass}`}>
+      <div onClick={() => handleClick()} className={`${styles.header} accordionHeader`}>
+        <div className={styles.title}>
+          {icon && <div className={`${styles.accordionIcon} ${accordionClass}`}>
+            {icon}
+          </div>}
+          <h4>{title}</h4>
+        </div>
+        <div className={`${styles.icon} accordionIcon`}>
+          {context.isOpened(itemIndex) ? <CaretUp/> : <CaretDown/>}
+        </div>
+      </div>
+      {context.isOpened(itemIndex) && (
+        <div
+          className={`accordionBody`}>
+          <div className={`${styles.bodyInner} accordionBodyInner`}>{children}</div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default AccordionItem;

package/src/Components/DataDisplay/Accordion/AccordionItemProps.tsx

@@ -0,0 +1,15 @@
+import {ReactNode} from "react";
+
+interface AccordionItemProps {
+  index: string | number;
+  title: string;
+  children: string | ReactNode;
+  onAfterOpened?: () => void;
+  onAfterClosed?: () => void;
+  onBeforeClosed?: () => boolean;
+  extraClass?:string;
+  accordionClass?:string;
+  icon?:ReactNode;
+}
+
+export default AccordionItemProps;

package/src/Components/DataDisplay/Accordion/AccordionProps.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface AccordionProps {
+  allowMultiple?: boolean;
+  children: ReactNode;
+}
+
+export default AccordionProps;

package/src/Components/DataDisplay/Accordion/AccordionProvider.tsx

@@ -0,0 +1,65 @@
+import {useState} from "react";
+import AccordionContext from "./AccordionContext";
+import AccordionProviderInterface from "./AccordionProviderInterface.tsx";
+
+const AccordionProvider = (props: AccordionProviderInterface) => {
+
+  const {
+    children,
+    allowMultiple
+  } = props;
+
+  const [openedList, setOpenedList] = useState<any[]>([]);
+
+  const isOpened = (key: number|string) => {
+    return openedList.indexOf(key) >= 0;
+  }
+
+  const openItem = (key: number|string) => {
+    if (allowMultiple) {
+      const list = [...openedList];
+      list.push(key);
+      setOpenedList(list);
+    } else {
+      setOpenedList([key])
+    }
+  }
+
+  const closeItem = (key: number|string) => {
+    if (allowMultiple) {
+      const list = [...openedList];
+      list.splice(list.indexOf(key), 1)
+      setOpenedList(list);
+    } else {
+      setOpenedList([]);
+    }
+  }
+
+  const openCloseItem = (key: number|string) => {
+    if (allowMultiple) {
+      if (isOpened(key)) {
+        closeItem(key);
+      } else {
+        openItem(key)
+      }
+    } else {
+      if (!isOpened(key)) {
+        openItem(key);
+      } else {
+        closeItem(key);
+      }
+    }
+  }
+
+  return <AccordionContext.Provider value={{
+    handleClick: openCloseItem,
+    isOpened: isOpened,
+    allowMultiple: allowMultiple ? allowMultiple : false,
+    openedList: openedList
+  }}>
+    {children}
+  </AccordionContext.Provider>
+
+}
+
+export default AccordionProvider;

package/src/Components/DataDisplay/Accordion/AccordionProviderInterface.tsx

@@ -0,0 +1,8 @@
+import {ReactNode} from "react";
+
+interface AccordionProviderInterface {
+  children: ReactNode,
+  allowMultiple?: boolean
+}
+
+export default AccordionProviderInterface

package/src/Components/DataDisplay/Accordion/accordion.module.scss

@@ -0,0 +1,65 @@
+.accordion {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border-bottom: 1px solid var(--color-gray-300);
+
+  .header {
+    display: flex;
+    //justify-content: space-between;
+    align-items: center;
+    min-height: 58px;
+    background-color: var(--color-white);
+    cursor: pointer;
+    border-bottom: 1px solid var(--border);
+    padding: var(--spacing-1) var(--spacing-2);
+  }
+
+  .title {
+    flex: 1;
+    display: flex;
+    align-items: center;
+
+    h4 {
+      flex: 1;
+      font-size: var(--font-size-h4);
+      line-height: var(--line-height-h4);
+      font-weight: var(--font-weight-h4);
+    }
+
+    .accordionIcon{
+      display: flex;
+      align-items: center;
+      margin-right: 4px;
+
+      svg{
+        width: 24px;
+        height: 24px;
+      }
+    }
+
+  }
+
+
+  .icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-left: var(--spacing-1);
+
+    svg{
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+
+  .bodyInner {
+    background: var(--color-white);
+    padding: var(--spacing-1\/2) var(--spacing-2) var(--spacing-2) var(--spacing-2);
+  }
+
+}
+
+
+

package/src/Components/DataDisplay/Badge/Badge.stories.tsx

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Badge from './Badge';
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Data Display / Badge',
+  component: Badge,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    status: {
+      options: ["pending" , "inProgress" , "complete", "draft" , "custom"],
+      control: { type: 'select' },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof Badge>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Pending: Story = {
+  args: {
+    label: 'Pending',
+    status:'pending',
+    clickable: false,
+  },
+};
+
+export const InProgress: Story = {
+  args: {
+    label: 'In Progress',
+    status:'inProgress',
+    onClick: () => {console.log('click')},
+  },
+};
+
+export const Complete: Story = {
+  args: {
+    label: 'Complete',
+    status:'complete',
+  },
+};
+
+export const Custom: Story = {
+  args: {
+    label: 'Custom',
+    status:'custom',
+  },
+};

package/src/Components/DataDisplay/Badge/Badge.tsx

@@ -0,0 +1,41 @@
+import BadgeProps from "./BadgeProps";
+import cx from 'classnames';
+import styles from './badge.module.scss';
+
+const Badge = (props: BadgeProps) => {
+
+  const {
+    status,
+    label,
+    onClick,
+    extraClass,
+    clickable = true
+  } = props;
+
+  let statusClass = styles.circlePending;
+  if (status === 'inProgress') {
+    statusClass = styles.circleInProgress;
+  } else if (status === 'complete') {
+    statusClass = styles.circleComplete;
+  }else if (status === 'draft'){
+    statusClass = styles.circleDraft
+  }else if (status === 'custom'){
+    statusClass = styles.circleCustom
+  }
+
+  return (
+    <div className={`${styles.badge} ${extraClass} ${clickable ? styles.clickable : ''}`} onClick={onClick}>
+      <div className={styles.wrapper}>
+        {!!status && <div className={cx(
+          styles.circle,
+          statusClass
+        )}></div>}
+        <div className={styles.title}>
+          <span>{label}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default Badge;

package/src/Components/DataDisplay/Badge/BadgeProps.tsx

@@ -0,0 +1,10 @@
+interface BadgeProps {
+  status?: "pending" | "inProgress" | "complete" | 'draft' | "custom";
+  label: string;
+  clickable?: boolean;
+  onClick?: () => void;
+  extraClass?: string;
+}
+
+
+export default BadgeProps;

package/src/Components/DataDisplay/Badge/badge.module.scss

@@ -0,0 +1,57 @@
+.badge {
+  min-height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--color-gray-200);
+  background: var(--color-lite);
+
+  &.clickable {
+    cursor: pointer;
+    user-select: none;
+  }
+
+
+  .wrapper {
+    display: flex;
+    align-items: center;
+    padding:0 var(--spacing-1\/2) ;
+  }
+
+  .circle{
+    width: 12px;
+    height: 12px;
+    border-radius: 100%;
+    flex-shrink: 1;
+    margin-right: 6px;
+
+    &Pending{
+      background: var(--color-pending);
+    }
+
+    &InProgress{
+      background: var(--color-inprogress);
+    }
+
+    &Complete{
+      background: var(--color-success);
+    }
+
+    &Draft {
+      background: var(--color-draft);
+    }
+
+    &Custom {
+      background: var(--color-custom);
+    }
+
+
+  }
+
+  .title{
+    span{
+      color: var(--color-gray-900);
+      font-size: var(--font-size-body-sm);
+      font-weight:var(--font-weight-body-sm) ;
+    }
+  }
+
+}