@veeqo/ui 0.0.1 → 0.0.4

package/lib/tempIcons/ArrowDownIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ArrowDownIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/ArrowUpIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ArrowUpIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/AttentionIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const AttentionIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/CalendarIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CalanderIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/ClipboardIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ClipboardIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/CrossIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CrossIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/DoubleArrowAscIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DoubleArrowAscIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/DoubleArrowDescIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DoubleArrowDescIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/DoubleArrowIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DoubleArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/DoubleArrowIconIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DoubleArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/DownArrowIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DownArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/DropdownIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const DropdownIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/EditIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EditIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/EndArrowIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const EndArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/FailIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const FailIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/HelpIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const HelpIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/InfoIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const InfoIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/LeftArrowIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const LeftArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/MergeIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MergeIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/MoreHorizIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const MoreHorizIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/ReorderIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ReorderIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/RightArrowIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const RightArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/SearchIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SearchIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/StartArrowIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const StartArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/SuccessIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const SuccessIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/UpArrowIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const UpArrowIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/VisibilityIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VisiblityIcon: (props: any) => React.JSX.Element;

package/lib/tempIcons/VisibilityOffIcon.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VisiblityOffIcon: (props: any) => React.JSX.Element;

package/lib/theme/index.d.ts

@@ -1,4 +1,4 @@
-import { shadows } from './modules/shadows';
+import { Shadows } from './modules/shadows';
 export declare const theme: {
     breakpoints: {
         readonly mobile: "640px";
@@ -136,7 +136,7 @@ export declare const theme: {
         lg: string;
         full: string;
     };
-    shadows: typeof shadows;
+    shadows: typeof Shadows;
     sizes: import("./modules/sizes").SizeScale;
     text: {
         headingXXL: {

package/lib/theme/modules/shadows.d.ts

@@ -1,4 +1,4 @@
-export declare enum shadows {
+export declare enum Shadows {
     sm = "0px 1px 3px rgba(55, 66, 77, 0.15)",
     base = "0px 4px 6px rgba(27, 33, 38, 0.2)",
     md = "0px 10px 15px rgba(27, 33, 38, 0.2)",

package/lib/utils/buildClassnames.d.ts

@@ -0,0 +1 @@
+export declare const buildClassnames: (names: (string | undefined)[]) => string;

package/lib/utils/color.d.ts

@@ -0,0 +1,13 @@
+/**
+ * A function to convert hex color to rgb.
+ */
+export declare const hexToRgb: (hex: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * A function to get a hex color with opacity, after converting to `rgba`.
+ * @param hex color in hex format
+ */
+export declare const getOpaqueHexColor: (hex: string, opacity: number) => string;

package/lib/utils/generateId.d.ts

@@ -0,0 +1 @@
+export declare const generateId: (prefix: string) => string;

package/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+export { buildClassnames } from './buildClassnames';
+export { getOpaqueHexColor, hexToRgb } from './color';
+export { generateId } from './generateId';

package/lib/utils/paginationList.d.ts

@@ -0,0 +1,4 @@
+export declare const paginationDefaultRangeList: {
+    label: string;
+    value: number;
+}[];

package/lib/utils/setupIntersectionObserverMock.d.ts

@@ -0,0 +1,18 @@
+/**
+ * https://stackoverflow.com/a/58651649
+ *
+ * Utility function that mocks the `IntersectionObserver` API. Necessary for components that rely
+ * on it, otherwise the tests will crash. Recommended to execute inside `beforeEach`.
+ * @param intersectionObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the intersection observer, but its methods.
+ */
+export declare function setupIntersectionObserverMock({ root, rootMargin, thresholds, disconnect, observe, takeRecords, unobserve, }?: {
+    root?: null | undefined;
+    rootMargin?: string | undefined;
+    thresholds?: never[] | undefined;
+    disconnect?: (() => null) | undefined;
+    observe?: (() => null) | undefined;
+    takeRecords?: (() => never[]) | undefined;
+    unobserve?: (() => null) | undefined;
+}): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veeqo/ui",
-  "version": "0.0.1",
+  "version": "0.0.4",
   "description": "New optimised component library for Veeqo.",
   "author": "Robert Wealthall",
   "license": "UNLICENSED",
@@ -12,13 +12,27 @@
     "lib": "lib"
   },
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+    "test": "jest",
+    "test:watch": "jest --watch",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "build": "rollup -c",
-    "release": "release-it && npm publish"
+    "lint": "eslint --quiet src/* --ext .ts,.tsx",
+    "lint:fix": "eslint --quiet src/* --ext .ts,.tsx --fix",
+    "patch": "npm version patch && npm run changelog:update",
+    "minor": "npm version minor && npm run changelog:update",
+    "major": "npm version major && npm run changelog:update",
+    "changelog:update": "auto-changelog -p && git add CHANGELOG.md",
+    "posttest": "npm run lint",
+    "prepublishOnly": "npm run test && npm run build"
+  },
+  "auto-changelog": {
+    "issueUrl": "https://sim.amazon.com/issues/{id}",
+    "issuePattern": "VQCL-[0-9]+"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.22.15",
+    "@popperjs/core": "^2.11.8",
     "@rollup/plugin-node-resolve": "^15.2.1",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/plugin-typescript": "^11.1.3",
@@ -30,23 +44,63 @@
     "@storybook/react": "^7.4.1",
     "@storybook/react-vite": "^7.4.1",
     "@storybook/testing-library": "^0.2.0",
-    "@types/react": "^18.2.21",
-    "framer-motion": "^10.16.4",
+    "@testing-library/jest-dom": "~5.16.5",
+    "@testing-library/react": "~11.2.7",
+    "@testing-library/user-event": "~13.1.9",
+    "@types/jest": "^29.5.5",
+    "@types/jest-axe": "^3.5.6",
+    "@types/lodash.throttle": "^4.1.7",
+    "@types/react": "^17.0.5",
+    "@types/react-dom": "^16.9.12",
+    "@types/react-transition-group": "^4.4.6",
+    "@types/styled-components": "^5.1.27",
+    "@typescript-eslint/eslint-plugin": "^6.7.3",
+    "@typescript-eslint/parser": "^6.7.3",
+    "auto-changelog": "^2.4.0",
+    "eslint": "^8.44.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jest": "^27.4.0",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "framer-motion": "^3.10.6",
+    "jest": "~29.0.3",
+    "jest-axe": "~6.0.0",
+    "jest-cli": "~29.0.3",
+    "jest-environment-jsdom": "~29.0.3",
+    "jest-styled-components": "~7.1.1",
+    "lodash.throttle": "^4.1.1",
     "prettier": "^3.0.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "release-it": "^16.1.5",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-popper": "^2.2.5",
+    "react-scrolllock-configurable": "^4.0.5",
+    "react-transition-group": "^4.3.0",
+    "react-use": "^14.0.0",
+    "resize-observer-polyfill": "^1.5.1",
     "rollup": "^3.29.2",
     "rollup-plugin-dts": "^6.0.2",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "storybook": "^7.4.1",
-    "styled-components": "^6.0.8",
+    "styled-components": "^5.1.1",
+    "ts-jest": "^29.1.1",
     "typescript": "^5.2.2"
   },
   "peerDependencies": {
-    "framer-motion": "^10.16.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "styled-components": "^6.0.8"
+    "@popperjs/core": "^2.11.8",
+    "framer-motion": "^3.10.6",
+    "lodash.throttle": "^4.1.1",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0",
+    "react-popper": "^2.2.5",
+    "react-scrolllock-configurable": "^4.0.5",
+    "react-transition-group": "^4.3.0",
+    "react-use": "^14.0.0",
+    "resize-observer-polyfill": "^1.5.1",
+    "styled-components": "^5.1.1"
   }
-}
+}

package/rollup.config.mjs

@@ -1,4 +1,3 @@
-import typescriptEngine from 'typescript';
 import dts from 'rollup-plugin-dts';
 import terser from '@rollup/plugin-terser';
 import peerDepsExternal from 'rollup-plugin-peer-deps-external';
@@ -9,7 +8,7 @@ import packageJson from './package.json' assert { type: 'json' };
 
 export default [
   {
-    input: 'src/index.ts',
+    input: './src/index.ts',
     output: [
       {
         file: packageJson.main,
@@ -19,31 +18,19 @@ export default [
       {
         file: packageJson.module,
         format: 'esm',
+        exports: 'named',
         sourcemap: true,
       },
     ],
     plugins: [
-      peerDepsExternal(), // Don't include peer dependencies, should be given by client.
-      resolve(), // Resolve paths
       typescript({
         tsconfig: './tsconfig.json',
-        typescript: typescriptEngine,
-        sourceMap: true,
-        exclude: [
-          '**/__snapshots__/*',
-          '**/__tests__',
-          '**/*.test.ts+(|x)',
-          '**/*.story.ts+(|x)',
-          '**/*.stories.ts+(|x)',
-          '**/*.mdx',
-        ],
+        sourceMap: false,
+        exclude: ['**/__snapshots__/*', '**/*.test.ts+(|x)', '**/*.stories.ts+(|x)', '**/*.mdx'],
       }),
+      peerDepsExternal(), // Don't include peer dependencies, should be given by client.
+      resolve(), // Resolve paths
       terser(),
     ],
   },
-  {
-    input: 'lib/index.d.ts',
-    output: [{ file: 'lib/index.d.ts', format: 'esm' }],
-    plugins: [dts()],
-  },
 ];

package/setupJestMock.js

@@ -0,0 +1,5 @@
+jest.mock('./src/utils/generateId', () => ({
+  generateId: jest.fn(() => 'test-id'),
+}));
+
+global.ResizeObserver = require('resize-observer-polyfill');

package/setupTests.js

@@ -0,0 +1,6 @@
+require('@testing-library/jest-dom');
+require('jest-styled-components');
+require('@testing-library/jest-dom/extend-expect');
+const { toHaveNoViolations } = require('jest-axe');
+
+expect.extend(toHaveNoViolations);

package/src/components/Accordion/Accordion.stories.mdx

@@ -0,0 +1,41 @@
+import { Meta, Canvas, Props } from '@storybook/addon-docs/blocks';
+import Accordion from './Accordion';
+import Integration from '../../common/Integration';
+
+<Meta title="Components/UI/Accordion" component={Accordion} />
+
+# Accordion
+
+<Canvas>
+  <div style={{ width: 328, display: 'flex', flexDirection: 'column', gap: '20px' }}>
+    <Accordion label="Label">
+      Content goes here...
+    </Accordion>
+    <Accordion label="Label" glyphName="info" glyphColor="#37424D">
+      Content goes here...
+    </Accordion>
+    <Accordion label="Label" accessorySlot={<Integration name="fedex" style={{ marginRight: '12px', width: '40px', height: '40px' }} />}>
+      Content goes here...
+    </Accordion>
+  </div>
+</Canvas>
+
+## Usage
+
+```jsx
+import { VeeqoUI, VeeqoCommon } from '@veeqo/components';s
+const { Accordion } = VeeqoUI;
+
+<Accordion label="Label">
+  Content goes here...
+</Accordion>
+
+// With an accessorySlot
+<Accordion label="Label" accessorySlot={<VeeqoCommon.Glyph name="info" />}>
+  Content goes here...
+</Accordion>
+```
+
+## Props
+
+<Props of={Accordion} />

package/src/components/Accordion/Accordion.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Accordion } from '.';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+
+const meta = {
+  title: 'Components/UI/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    label: 'Label text',
+    children: 'Accordion content',
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    label: 'Label text',
+    iconSlot: <CrossIcon />,
+    children: 'Accordion content',
+  },
+};

package/src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Accordion } from '.';
+
+describe('Accordion', () => {
+  it('renders correctly', () => {
+    const { container } = render(
+      <Accordion label="test-label">
+        <p>Accordion content</p>
+      </Accordion>,
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('hides content on mount', () => {
+    render(
+      <Accordion label="test-label">
+        <p>Test content</p>
+      </Accordion>,
+    );
+    const content = screen.queryByText('Test content');
+    expect(content).toBeNull();
+  });
+
+  it('shows content on mount when overidden', () => {
+    render(
+      <Accordion label="test-label" shouldOpenOnMount>
+        <p>Test content</p>
+      </Accordion>,
+    );
+    const content = screen.queryByText('Test content');
+    expect(content).toBeVisible();
+  });
+});

package/src/components/Accordion/Accordion.tsx

@@ -0,0 +1,62 @@
+import React, { FC, ReactNode, useState, useCallback, useEffect } from 'react';
+import { CSSTransition } from 'react-transition-group';
+
+import { Content, TapBar, Top, Text, Arrow, Left, Right, Description } from './styled';
+import { BaseContainer } from '../BaseContainer';
+
+export interface AccordionProps {
+  children: ReactNode;
+  label: string;
+  iconSlot?: ReactNode;
+  className?: string;
+  timeout?: number;
+  transitionClassnames?: string;
+  description?: string;
+  shouldOpenOnMount?: boolean;
+}
+
+export const Accordion: FC<AccordionProps> = ({
+  className,
+  children,
+  label,
+  iconSlot,
+  timeout = 350,
+  transitionClassnames = 'content',
+  description,
+  shouldOpenOnMount,
+}: AccordionProps) => {
+  const [shouldOpen, setShouldOpen] = useState(false);
+  const handleOpen = useCallback(() => setShouldOpen(!shouldOpen), [shouldOpen]);
+
+  useEffect(() => {
+    if (!shouldOpenOnMount) return;
+    if (shouldOpenOnMount === shouldOpen) return;
+    setShouldOpen(shouldOpenOnMount);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <BaseContainer className={className}>
+      <TapBar shouldOpen={shouldOpen} onClick={handleOpen}>
+        <Top>
+          <Left>
+            {iconSlot}
+            <Text variant="body">{label}</Text>
+          </Left>
+          <Right>
+            <Arrow name="downArrow" shouldOpen={shouldOpen} />
+          </Right>
+        </Top>
+        {description && <Description variant="hintText">{description}</Description>}
+      </TapBar>
+      <CSSTransition
+        in={shouldOpen}
+        timeout={timeout}
+        classNames={transitionClassnames}
+        unmountOnExit
+      >
+        <Content>{children}</Content>
+      </CSSTransition>
+    </BaseContainer>
+  );
+};