npm - @hellobetterdigitalnz/betterui - Versions diffs - 0.0.0 - Mend

@hellobetterdigitalnz/betterui 0.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (230) hide show

package/.editorconfig ADDED Viewed

@@ -0,0 +1,17 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# http://editorconfig.org/
+root = true
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+[*.md]
+trim_trailing_whitespace = false

package/.eslintrc.cjs ADDED Viewed

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'plugin:react-hooks/recommended', 'plugin:storybook/recommended'],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

package/.storybook/main.ts ADDED Viewed

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+const config: StorybookConfig = {
+  stories: [
+    "../tokens/**/*.mdx",
+    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
+  ],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@storybook/addon-mdx-gfm"
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts ADDED Viewed

@@ -0,0 +1,17 @@
+import type { Preview } from "@storybook/react";
+import '../src/global.scss';
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+export default preview;

package/README.md ADDED Viewed

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

package/index.html ADDED Viewed

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,45 @@
+{
+  "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"
+  }
+}

package/public/image/table-image.png ADDED Viewed

Binary file

package/public/vite.svg ADDED Viewed

@@ -0,0 +1 @@

+ <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/App.tsx ADDED Viewed

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

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

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

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

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

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -0,0 +1,56 @@
+.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 {
+    h4 {
+      font-size: var(--font-size-h4);
+      line-height: var(--line-height-h4);
+      font-weight: var(--font-weight-h4);
+    }
+  }
+  .icon {
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+    padding-left: var(--spacing-1);
+    svg{
+      width: 24px;
+      height: 24px;
+    }
+  }
+  .body {
+    height: 0;
+    overflow: hidden;
+  }
+  .bodyOpened {
+    height: auto;
+  }
+  .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 ADDED Viewed

@@ -0,0 +1,44 @@
+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"],
+      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',
+  },
+};
+export const InProgress: Story = {
+  args: {
+    label: 'In Progress',
+    status:'inProgress',
+  },
+};
+export const Complete: Story = {
+  args: {
+    label: 'Complete',
+    status:'complete',
+  },
+};

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

@@ -0,0 +1,32 @@
+import BadgeProps from "./BadgeProps.tsx";
+import cx from 'classnames';
+import styles from './badge.module.scss';
+const Badge = (props : BadgeProps) => {
+  const {
+    status,
+    label
+  } = props;
+  let statusClass = styles.circlePending;
+  if (status === 'inProgress') {
+    statusClass = styles.circleInProgress;
+  } if (status === 'complete') {
+    statusClass = styles.circleComplete;
+  }
+  return <div className={styles.badge}>
+    <div className={styles.wrapper}>
+      {!!label && <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 ADDED Viewed

@@ -0,0 +1,6 @@
+interface BadgeProps {
+  status?: "pending" | "inProgress" | "complete";
+  label: string;
+}
+export default BadgeProps

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

@@ -0,0 +1,42 @@
+.badge {
+  min-height: 24px;
+  border-radius: 4px;
+  border: 1px solid var(--color-gray-200);
+  background: var(--color-lite);
+  .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-gray-300);
+    }
+    &InProgress{
+      background: var(--color-inprogress);
+    }
+    &Complete{
+      background: var(--color-success);
+    }
+  }
+  .title{
+    span{
+      color: var(--color-gray-900);
+      font-size: var(--font-size-body-sm);
+      font-weight:var(--font-weight-body-sm) ;
+    }
+  }
+}

package/src/Components/DataDisplay/Cards/BannerCard/BannerCard.stories.tsx ADDED Viewed

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { BannerCard } from './BannerCard.tsx';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+  title: 'Data Display / Card',
+  component: BannerCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof BannerCard>;
+export default meta;
+type Story = StoryObj<typeof BannerCard>;
+export const Example: Story = {
+  args: {
+    title:'Lorem ipsum',
+    description:'Sed fringilla magna facilisis auctor venenatis. Duis ut vestibulum risus. Nunc a finibus dui. Donec hendrerit tristique odio, ac porta dui maximus et. ',
+    image:'',
+    btnTitle:'Button text',
+    btnScheme:'primary',
+    btnSize:'default',
+    btnStyle:'solid',
+  },
+};