@bigbinary/neetoui 3.2.71 → 3.3.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.71",
+  "version": "3.3.0-beta.0",
   "main": "./index.js",
   "author": "BigBinary",
   "license": "MIT",
@@ -22,7 +22,6 @@
   },
   "dependencies": {
     "@bigbinary/neeto-icons": "^1.8.17",
-    "@popperjs/core": "^2.9.2",
     "@reach/auto-id": "^0.15.0",
     "@tippyjs/react": "^4.2.5",
     "antd": "4.18.7",
@@ -34,7 +33,6 @@
     "react-hotkeys-hook": "^3.3.2",
     "react-linkify": "^1.0.0-alpha",
     "react-outside-click-handler": "^1.3.0",
-    "react-popper": "^2.2.5",
     "react-router-nav-prompt": "^0.4.1"
   },
   "devDependencies": {

package/.circleci/config.yml

@@ -1,31 +0,0 @@
-version: 2.1
-aliases:
-        - &test_environment
-            docker:
-              # replace with your preferred image
-              - image: circleci/node:14
-jobs:
-  "Snapshot Test":
-            <<: *test_environment
-            steps:
-             - checkout
-             - run: yarn install
-             - run:
-                  name: Run Snapshot Tests
-                  command: yarn chromatic test --exit-zero-on-changes --project-token $CHROMATIC_PROJECT_TOKEN
-  "Unit Test":
-          <<: *test_environment
-          steps:
-           - checkout
-           - run: yarn install
-           - run:
-                name: Run Unit Tests
-                command: yarn test
-
-workflows:
-  neetoui-tests:
-    jobs:
-      - "Snapshot Test"
-      - "Unit Test"
-
-

package/.eslint-rules/imports/enforced.js

@@ -1,20 +0,0 @@
-module.exports = {
-  rules: {
-    // not-auto-fixable: Prefer a default export if module exports a single name.
-    "import/prefer-default-export": "off",
-    // not-auto-fixable: Forbid a module from importing a module with a dependency path back to itself.
-    "import/no-cycle": ["error", { maxDepth: 1, ignoreExternal: true }],
-    // not-auto-fixable: Prevent unnecessary path segments in import and require statements.
-    "import/no-useless-path-segments": ["error", { noUselessIndex: true }],
-    // not-auto-fixable: Report any invalid exports, i.e. re-export of the same name.
-    "import/export": "error",
-    // not-auto-fixable: Forbid the use of mutable exports with var or let.
-    "import/no-mutable-exports": "error",
-    // not-auto-fixable: Ensure all imports appear before other statements.
-    "import/first": "error",
-    // not-auto-fixable: Ensure all exports appear after other statements.
-    "import/exports-last": "error",
-    // auto-fixable: Enforce a newline after import statements.
-    "import/newline-after-import": ["error", { count: 1 }]
-  }
-};

package/.eslint-rules/imports/order.js

@@ -1,15 +0,0 @@
-module.exports = {
-  rules: {
-    // auto-fixable: Enforce a convention in module import order - we enforce https://www.bigbinary.com/react-best-practices/sort-import-statements
-    "import/order": [
-      "error",
-      {
-        "newlines-between": "always",
-        alphabetize: { order: "asc", caseInsensitive: true },
-        warnOnUnassignedImports: true,
-        // Ignore react imports so that they're always ordered to the top of the file.
-        pathGroupsExcludedImportTypes: ["react", "react-native"],
-      },
-    ],
-  },
-};

package/.eslint-rules/overrides.js

@@ -1,12 +0,0 @@
-module.exports = {
-  // Currently we are using this section for excluding certain files from certain rules.
-  overrides: [
-    {
-      files: [".eslintrc.js", "*.json"],
-      rules: {
-        "import/order": "off",
-        "react-hooks/rules-of-hooks": "off",
-      },
-    },
-  ],
-};

package/.eslint-rules/react.js

@@ -1,34 +0,0 @@
-module.exports = {
-  rules: {
-    // not-auto-fixable: Prevent missing props validation in a React component definition.
-    "react/prop-types": "off",
-    // not-auto-fixable: Detect unescaped HTML entities, which might represent malformed tags.
-    "react/no-unescaped-entities": "off",
-    // not-auto-fixable: Prevent missing displayName in a React component definition. Useful when using React extensions in browser and checking for component name.
-    "react/display-name": "error",
-    // not-auto-fixable: Reports when this.state is accessed within setState.
-    "react/no-access-state-in-setstate": "error",
-    // not-auto-fixable: Prevent usage of dangerous JSX props. Currently jam3 plugin will take care of handling this.
-    "react/no-danger": "off",
-    // not-auto-fixable: Report when a DOM element is using both children and dangerouslySetInnerHTML.
-    "react/no-danger-with-children": "warn",
-    // not-auto-fixable: Prevent definitions of unused prop types.
-    "react/no-unused-prop-types": "error",
-    // not-auto-fixable: Report missing key props in iterators/collection literals. Important rule!
-    "react/jsx-key": "error",
-    // not-auto-fixable: Enforce no duplicate props.
-    "react/jsx-no-duplicate-props": "error",
-    // not-auto-fixable: Disallow undeclared variables in JSX.
-    "react/jsx-no-undef": "error",
-    // not-auto-fixable: Enforce PascalCase for user-defined JSX components.
-    "react/jsx-pascal-case": ["error", { allowNamespace: true }],
-    // not-auto-fixable: Prevent React to be incorrectly marked as unused.
-    "react/jsx-uses-react": "error",
-    // not-auto-fixable: Prevent variables used in JSX to be marked as unused.
-    "react/jsx-uses-vars": "error",
-    // not-auto-fixable: Ensures https://reactjs.org/docs/hooks-rules.html.
-    "react-hooks/rules-of-hooks": "error",
-    // not-auto-fixable: Ensures https://reactjs.org/docs/hooks-rules.html - Checks effect dependencies.
-    "react-hooks/exhaustive-deps": "warn",
-  },
-};

package/jest-setup.js

@@ -1,7 +0,0 @@
-import "@testing-library/jest-dom";
-
-
-// Fixes element.getTotalLength is not a function. Refer: https://github.com/framer/motion/issues/204
-if (!SVGElement.prototype.getTotalLength) {
-  SVGElement.prototype.getTotalLength = () => 1;
-}

package/tests/Accordion.test.js

@@ -1,103 +0,0 @@
-import React from "react";
-import { Accordion } from "../lib/components";
-import { render, waitForElementToBeRemoved } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-
-
-describe("Accordion", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Accordion>
-      <Accordion.Item title="Item 1">
-        <p>Content 1</p>
-      </Accordion.Item>
-    </Accordion>);
-    expect(getByText("Item 1")).toBeInTheDocument();
-  });
-
-  it("should not render content when accordion is closed", () => {
-    const { queryByText } = render(<Accordion>
-      <Accordion.Item title="Item 1">
-        <p>Content 1</p>
-      </Accordion.Item>
-    </Accordion>);
-    expect(queryByText("Content 1")).not.toBeInTheDocument();
-  });
-
-  it("should open accordion and render content when accordion title is clicked", () => {
-    const { getByText } = render(<Accordion>
-      <Accordion.Item title="Item 1">
-        <p>Content 1</p>
-      </Accordion.Item>
-    </Accordion>);
-    userEvent.click(getByText("Item 1"));
-    expect(getByText("Content 1")).toBeInTheDocument();
-  });
-
-  it("should toggle accordion when Enter or Space key is pressed", async () => {
-    const { getByText, queryByText } = render(<Accordion>
-      <Accordion.Item title="Item 1">
-        <p>Content 1</p>
-      </Accordion.Item>
-    </Accordion>);
-    userEvent.click(getByText("Item 1"));
-    expect(getByText("Content 1")).toBeInTheDocument();
-    userEvent.keyboard("{space}");
-    await waitForElementToBeRemoved(() => queryByText("Content 1"));
-    expect(queryByText("Content 1")).not.toBeInTheDocument();
-    userEvent.keyboard("{enter}");
-    expect(getByText("Content 1")).toBeInTheDocument();
-  });
-
-  it("should not toggle accordion when any other keys are pressed", () => {
-    const { getByText } = render(<Accordion>
-      <Accordion.Item title="Item 1">
-        <p>Content 1</p>
-      </Accordion.Item>
-    </Accordion>);
-    userEvent.click(getByText("Item 1"));
-    expect(getByText("Content 1")).toBeInTheDocument();
-    userEvent.type(getByText("Item 1"), "a");
-    expect(getByText("Content 1")).toBeInTheDocument();
-  });
-
-  it("should trigger onClick when title is clicked", () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<Accordion>
-      <Accordion.Item title="Item 1" onClick={onClick}>
-        <p>Content 1</p>
-      </Accordion.Item>
-    </Accordion>);
-    userEvent.click(getByText("Item 1"));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should only open one accordion at a time", async () => {
-    const { getByText, queryByText } = render(<Accordion>
-      <Accordion.Item title="Item 1">
-        <p>Content 1</p>
-      </Accordion.Item>
-      <Accordion.Item title="Item 2">
-        <p>Content 2</p>
-      </Accordion.Item>
-    </Accordion>);
-    userEvent.click(getByText("Item 1"));
-    expect(getByText("Content 1")).toBeInTheDocument();
-    userEvent.click(getByText("Item 2"));
-    await waitForElementToBeRemoved(() => queryByText("Content 1"));
-    expect(queryByText("Content 1")).not.toBeInTheDocument();
-    expect(getByText("Content 2")).toBeInTheDocument();
-  });
-
-  it("should open the the accordion when defaultActiveKey is provided", () => {
-    const { getByText } = render(<Accordion defaultActiveKey={1}>
-      <Accordion.Item title="Item 1">
-        <p>Content 1</p>
-      </Accordion.Item>
-      <Accordion.Item title="Item 2">
-        <p>Content 2</p>
-      </Accordion.Item>
-    </Accordion>);
-    expect(getByText("Content 2")).toBeInTheDocument();
-  });
-});

package/tests/Alert.test.js

@@ -1,126 +0,0 @@
-import React from "react";
-import { Alert } from "../lib/components";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("Alert", () => {
-  it("should render without error", () => {
-    const { getByText } = render(
-      <Alert title="Alert title" message="Alert message" isOpen />
-    );
-    expect(getByText("Alert title")).toBeInTheDocument();
-    expect(getByText("Alert message")).toBeInTheDocument();
-  });
-
-  it("should not display content when isOpen is false", () => {
-    const { queryByText } = render(
-      <Alert title="Alert title" message="Alert message" isOpen={false} />
-    );
-    expect(queryByText("Alert title")).not.toBeInTheDocument();
-    expect(queryByText("Alert message")).not.toBeInTheDocument();
-  });
-
-  it("should call onClose when close button is clicked", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(
-      <Alert
-        title="Alert title"
-        message="Alert message"
-        isOpen
-        onClose={onClose}
-      />
-    );
-    userEvent.click(getByTestId("close-button"));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("should call onSubmit when submit button is clicked", () => {
-    const onSubmit = jest.fn();
-    const { getByText } = render(
-      <Alert
-        title="Alert title"
-        message="Alert message"
-        isOpen
-        onSubmit={onSubmit}
-        submitButtonLabel="Submit"
-      />
-    );
-    userEvent.click(getByText("Submit"));
-    expect(onSubmit).toHaveBeenCalledTimes(1);
-  });
-
-  it("should call onClose when cancel button is clicked", () => {
-    const onClose = jest.fn();
-    const { getByText } = render(
-      <Alert
-        title="Alert title"
-        message="Alert message"
-        isOpen
-        onClose={onClose}
-        cancelButtonLabel="Cancel"
-      />
-    );
-    userEvent.click(getByText("Cancel"));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("should close the alert when Esc key is pressed", () => {
-    const onClose = jest.fn();
-    const { container } = render(
-      <Alert
-        title="Alert title"
-        message="Alert message"
-        isOpen
-        onClose={onClose}
-        closeOnEsc
-      />
-    );
-    userEvent.type(container, "{esc}");
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not close the alert when Esc key is pressed when closeOnEsc is false", () => {
-    const onClose = jest.fn();
-    const { container } = render(
-      <Alert
-        title="Alert title"
-        message="Alert message"
-        isOpen
-        onClose={onClose}
-        closeOnEsc={false}
-      />
-    );
-    userEvent.type(container, "{esc}");
-    expect(onClose).not.toHaveBeenCalled();
-  });
-
-  it("should close alert when clicking outside", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(
-      <Alert
-        title="Alert title"
-        message="Alert message"
-        isOpen
-        onClose={onClose}
-        closeOnOutsideClick
-      />
-    );
-    userEvent.click(getByTestId("backdrop"));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not close alert when clicking outside when closeOnOutsideClick is false", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(
-      <Alert
-        title="Alert title"
-        message="Alert message"
-        isOpen
-        onClose={onClose}
-        closeOnOutsideClick={false}
-      />
-    );
-    userEvent.click(getByTestId("backdrop"));
-    expect(onClose).not.toHaveBeenCalled();
-  });
-});

package/tests/Button.test.js

@@ -1,73 +0,0 @@
-import React from "react";
-import { Button } from "../lib/components";
-import { render } from "@testing-library/react";
-import { BrowserRouter } from "react-router-dom";
-import userEvent from "@testing-library/user-event";
-
-describe("Button", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Button label="Button" />);
-    expect(getByText("Button")).toBeInTheDocument();
-  });
-
-  it("should call onClick on button click", () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<Button label="Button" onClick={onClick} />);
-    userEvent.click(getByText("Button"));
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not call onClick on button click when disabled", () => {
-    const onClick = jest.fn();
-    const { getByText } = render(
-      <Button label="Button" onClick={onClick} disabled />
-    );
-    userEvent.click(getByText("Button"));
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-
-  it("should not call onClick on button click when loading", () => {
-    const onClick = jest.fn();
-    const { getByText } = render(
-      <Button label="Button" onClick={onClick} loading />
-    );
-    userEvent.click(getByText("Button"));
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-
-  it("should show tooltip when button is hovered", () => {
-    const { getByText } = render(
-      <Button label="Button" tooltipProps={{ content: "Tooltip" }} />
-    );
-    userEvent.hover(getByText("Button"));
-    expect(getByText("Tooltip")).toBeInTheDocument();
-  });
-
-  it("should show icon when icon string is provided", () => {
-    const { getByTestId } = render(<Button icon="check" />);
-    expect(getByTestId("class-icon")).toBeInTheDocument();
-  });
-
-  it("should show icon when icon component is provided", () => {
-    const { getByTestId } = render(
-      <Button icon={() => <svg data-testid="svg-icon" />} />
-    );
-    expect(getByTestId("svg-icon")).toBeInTheDocument();
-  });
-
-  it("should render a link when `href` prop is given", () => {
-    const { getByRole } = render(
-      <Button label="Link" href="https://example.com" />
-    );
-    expect(getByRole("link")).toHaveAttribute("href", "https://example.com");
-  });
-
-  it("should render a router link when `to` prop is given", () => {
-    const { getByRole } = render(
-      <BrowserRouter>
-        <Button label="Router Link" to="/some-path" />
-      </BrowserRouter>
-    );
-    expect(getByRole("link")).toHaveAttribute("href", "/some-path");
-  });
-});

package/tests/Callout.test.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { Callout } from "../lib/components";
-import { Check } from "@bigbinary/neeto-icons";
-import { render } from "@testing-library/react";
-
-describe("Callout", () => {
-  it("should render without error", () => {
-    const { getByText } = render(
-      <Callout>
-        <p>Tesing Callout</p>
-      </Callout>
-    );
-    expect(getByText("Tesing Callout")).toBeInTheDocument();
-  });
-
-  it("should show icon when icon component is provided", () => {
-    const { getByTestId } = render(<Callout icon={Check} />);
-    expect(getByTestId("callout-icon")).toBeInTheDocument();
-  });
-});

package/tests/Checkbox.test.js

@@ -1,43 +0,0 @@
-import React from "react";
-import { Checkbox } from "../lib/components";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("Checkbox", () => {
-  it("should render without error", () => {
-    const { getByRole } = render(<Checkbox label="Checkbox" />);
-    expect(getByRole("checkbox")).toBeInTheDocument();
-  });
-
-  it("should call onChange when checkbox value is changed", () => {
-    const onChange = jest.fn();
-    const { getByRole } = render(
-      <Checkbox label="Checkbox" onChange={onChange} />
-    );
-    userEvent.click(getByRole("checkbox"));
-    expect(onChange).toHaveBeenCalledTimes(1);
-  });
-
-  it("should display error message", () => {
-    const { getByText } = render(
-      <Checkbox label="Checkbox" error="Error message" />
-    );
-    expect(getByText("Error message")).toBeInTheDocument();
-  });
-
-  it("should be unchecked by default", () => {
-    const { getByRole } = render(
-      <Checkbox label="Checkbox"/>
-    );
-    expect(getByRole("checkbox")).not.toBeChecked();
-  });
-
-  it("should be checked on clicking the checkbox", () => {
-    const { getByRole } = render(
-      <Checkbox label="Checkbox"/>
-    );
-    const checkbox = getByRole("checkbox");
-    userEvent.click(checkbox);
-    expect(checkbox).toBeChecked();
-  });
-});

package/tests/Collapse.test.js

@@ -1,19 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import Collapse from "../lib/components/Accordion/Collapse";
-
-describe("Collapse", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Collapse open>
-      <p>Content</p>
-    </Collapse>);
-    expect(getByText("Content")).toBeInTheDocument();
-  });
-
-  it("should not display content when collapsed", () => {
-    const { queryByText } = render(<Collapse>
-      <p>Content</p>
-    </Collapse>);
-    expect(queryByText("Content")).not.toBeInTheDocument();
-  });
-});

package/tests/Spinner.test.js

@@ -1,10 +0,0 @@
-import React from "react";
-import { Spinner } from "../lib/components";
-import { render } from "@testing-library/react";
-
-describe("Spinner", () => {
-  it("should render without error", () => {
-    const { getByTestId } = render(<Spinner/>);
-    expect(getByTestId("spinner")).toBeInTheDocument();
-  });
-});

package/tests/Tag.test.js

@@ -1,40 +0,0 @@
-import React from "react";
-import { Tag } from "../lib/components";
-import { render } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("Tag", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Tag label="Tag" />);
-    expect(getByText("Tag")).toBeInTheDocument();
-  });
-
-  it("should show icon when icon string is provided", () => {
-    const { getByTestId } = render(<Tag icon="check" />);
-    expect(getByTestId("class-icon")).toBeInTheDocument();
-  });
-
-  it("should show indicator when indicatorColor is provided", () => {
-    const { getByTestId } = render(<Tag indicatorColor="green" />);
-    expect(getByTestId("tag-indicator")).toBeInTheDocument();
-  });
-
-  it("should show close button if onClose function is provided", () => {
-    const { getByTestId } = render(<Tag onClose={() => {}} />);
-    expect(getByTestId("tag-close-button")).toBeInTheDocument();
-  });
-
-  it("should call onClose on button click", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(<Tag onClose={onClose} />);
-    userEvent.click(getByTestId("tag-close-button"));
-    expect(onClose).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not call onClose function if tag is disabled", () => {
-    const onClose = jest.fn();
-    const { getByTestId } = render(<Tag onClose={onClose} disabled />);
-    userEvent.click(getByTestId("tag-close-button"));
-    expect(onClose).toHaveBeenCalledTimes(0);
-  });
-});

package/tests/Textarea.test.js

@@ -1,51 +0,0 @@
-import React from "react";
-import { render } from "@testing-library/react";
-import { Textarea } from "../lib/components";
-import userEvent from "@testing-library/user-event";
-
-describe("Textarea", () => {
-  it("should render without error", () => {
-    const { getByLabelText } = render(<Textarea id="text" label="Textarea" />);
-    expect(getByLabelText("Textarea")).toBeInTheDocument();
-  });
-
-  it("should update value on input when uncontrolled", () => {
-    const { getByLabelText } = render(<Textarea id="text" label="Textarea" />);
-    const textarea = getByLabelText("Textarea");
-    userEvent.type(textarea, "Test");
-    expect(textarea).toHaveValue("Test");
-  });
-
-  it("should call onChange when textarea value changes", () => {
-    const onChange = jest.fn();
-    const { getByLabelText } = render(
-      <Textarea id="text" label="Textarea" onChange={onChange} />
-    );
-    userEvent.type(getByLabelText("Textarea"), "Test");
-    expect(onChange).toHaveBeenCalledTimes(4);
-  });
-
-  it("should display helpText", () => {
-    const { getByText } = render(<Textarea id="text" label="Textarea" helpText="Help text" />);
-    expect(getByText("Help text")).toBeInTheDocument();
-  });
-
-  it("should display error message", () => {
-    const { getByText } = render(
-      <Textarea id="text" label="Textarea" error="Error message" />
-    );
-    expect(getByText("Error message")).toBeInTheDocument();
-  });
-
-  it("should properly handle maxLength", () => {
-    const { getByLabelText, getByText } = render(
-      <Textarea id="text" label="Textarea" maxLength={5} />
-    );
-    expect(getByText("0 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Textarea")).toHaveAttribute("maxLength", "5");
-
-    userEvent.type(getByLabelText("Textarea"), "Testing maxLength");
-    expect(getByText("5 / 5")).toBeInTheDocument();
-    expect(getByLabelText("Textarea")).toHaveValue("Testi");
-  });
-});

package/tests/Typography.test.js

@@ -1,20 +0,0 @@
-import React from "react";
-import { Typography } from "../lib/components";
-import { render } from "@testing-library/react";
-
-describe("Typography", () => {
-  it("should render without error", () => {
-    const { getByText } = render(<Typography style="body1">Typography</Typography>);
-    expect(getByText("Typography")).toBeInTheDocument();
-  });
-
-  it("should render a heading when style is of heading type", () => {
-    const { getByRole } = render(<Typography style="h1">Typography</Typography>);
-    expect(getByRole("heading", { level: 1 })).toBeInTheDocument();
-  });
-
-  it("should override default tag when component prop is given", () => {
-    const { getByRole } = render(<Typography style="h1" component="h2">Typography</Typography>);
-    expect(getByRole("heading", { level: 2 })).toBeInTheDocument();
-  });
-});