@hellobetterdigitalnz/betterui 0.0.0 → 0.0.2

package/README.md

@@ -1,30 +1,23 @@
-# React + TypeScript + Vite
-
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
-
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-  // other rules...
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-    project: ['./tsconfig.json', './tsconfig.node.json'],
-    tsconfigRootDir: __dirname,
-  },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+# BetterUI
+
+A reusable Rect component library by [Hello Better](https://hellobetterdigital.com).
+
+We at Hello Better builds many web applications using React + Typescript and headless APIs. We make use of Figma design systems and have our own component library that we have shared here. 
+
+## Installation
+
+To install simply use
+
+```
+npm install @hellobetterdigitalnz/betteru
+```
+
+or if you are using yarn 
+
+```
+yarn add @hellobetterdigitalnz/betteru
+```
+
+## Using components
+
+Components are used from the libraries root entry. 

package/package.json

@@ -1,45 +1,48 @@
-{
-  "name": "@hellobetterdigitalnz/betterui",
-  "private": false,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "dependencies": {
-    "@floating-ui/react": "^0.26.4",
-    "classnames": "^2.4.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@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",
-    "@types/react": "^18.2.37",
-    "@types/react-dom": "^18.2.15",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
-    "@vitejs/plugin-react": "^4.2.0",
-    "eslint": "^8.53.0",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.4",
-    "eslint-plugin-storybook": "^0.6.15",
-    "sass": "^1.69.5",
-    "storybook": "7.6.5",
-    "typescript": "^5.2.2",
-    "vite": "^5.0.0"
-  }
-}
+{
+  "name": "@hellobetterdigitalnz/betterui",
+  "private": false,
+  "version": "0.0.2",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.26.4",
+    "classnames": "^2.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@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",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
+    "@vitejs/plugin-react": "^4.2.0",
+    "eslint": "^8.53.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.4",
+    "eslint-plugin-storybook": "^0.6.15",
+    "sass": "^1.69.5",
+    "storybook": "7.6.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.0.0"
+  },
+  "files": [
+    "src/"
+  ]
+}

package/src/App.tsx

@@ -1,30 +1,30 @@
-import { useState } from 'react'
-import viteLogo from '/vite.svg'
-
-function App() {
-  const [count, setCount] = useState(0)
-
-  return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.tsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
-
-export default App
+import { useState } from 'react'
+import viteLogo from '/vite.svg'
+
+function App() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <>
+      <div>
+        <a href="https://vitejs.dev" target="_blank">
+          <img src={viteLogo} className="logo" alt="Vite logo" />
+        </a>
+      </div>
+      <h1>Vite + React</h1>
+      <div className="card">
+        <button onClick={() => setCount((count) => count + 1)}>
+          count is {count}
+        </button>
+        <p>
+          Edit <code>src/App.tsx</code> and save to test HMR
+        </p>
+      </div>
+      <p className="read-the-docs">
+        Click on the Vite and React logos to learn more
+      </p>
+    </>
+  )
+}
+
+export default App

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

@@ -1,57 +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.'
-      },
-    ],
-  },
-};
-
+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

@@ -1,14 +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;
+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

@@ -1,11 +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;
+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

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

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

@@ -1,62 +1,62 @@
-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,
-  } = 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}>
-      <div onClick={() => handleClick()} className={styles.header}>
-        <div className={styles.title}>
-          <h4>{title}</h4>
-        </div>
-        <div className={styles.icon}>
-          {context.isOpened(itemIndex) ? <CaretUp /> : <CaretDown />}
-        </div>
-      </div>
-      <div
-        className={`${styles.body} ${
-          context.isOpened(itemIndex) ? `${styles.bodyOpened}` : ``
-        }`}>
-        <div className={`${styles.bodyInner}`}>{children}</div>
-      </div>
-    </div>
-  );
-};
-
-export default AccordionItem;
+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,
+  } = 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}>
+      <div onClick={() => handleClick()} className={styles.header}>
+        <div className={styles.title}>
+          <h4>{title}</h4>
+        </div>
+        <div className={styles.icon}>
+          {context.isOpened(itemIndex) ? <CaretUp /> : <CaretDown />}
+        </div>
+      </div>
+      <div
+        className={`${styles.body} ${
+          context.isOpened(itemIndex) ? `${styles.bodyOpened}` : ``
+        }`}>
+        <div className={`${styles.bodyInner}`}>{children}</div>
+      </div>
+    </div>
+  );
+};
+
+export default AccordionItem;

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

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

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

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