@bigbinary/neetoui 3.2.79 → 3.2.82

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neetoui",
-  "version": "3.2.79",
+  "version": "3.2.82",
   "main": "./index.js",
   "author": "BigBinary",
   "license": "MIT",

package/.circleci/config.yml

@@ -1,37 +0,0 @@
-version: 2.1
-aliases:
-        - &test_environment
-            docker:
-              # replace with your preferred image
-              - image: cimg/node:16.13.2
-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
-           - restore_cache:
-              key: dependency-cache-{{ checksum "yarn.lock" }}
-           - run: yarn install
-           - save_cache:
-              key: dependency-cache-{{ checksum "yarn.lock" }}
-              paths:
-                - ./node_modules
-           - run:
-                name: Run Unit Tests
-                command: yarn test --runInBand
-
-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,22 +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;
-}
-
-//Fixes ReferenceError: ResizeObserver is not defined
-global.ResizeObserver = require('resize-observer-polyfill')
-
-//Fixes TypeError: window.matchMedia is not a function
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-      matches: false,
-      media: query,
-      onchange: null,
-      addListener: jest.fn(), // Deprecated
-      removeListener: jest.fn(), // Deprecated
-    }
-  )),
-});

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/ActionDropdown.test.js

@@ -1,61 +0,0 @@
-import React from "react";
-import { ActionDropdown } from "../lib/components";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-
-describe("ActionDropdown", () => {
-  it("should render without error", () => {
-    render(
-      <ActionDropdown label="ActionDropdown">
-        <li>Option 1</li>
-        <li>Option 2</li>
-      </ActionDropdown>
-    );
-    expect(screen.getByText("ActionDropdown")).toBeInTheDocument();
-  });
-
-  it("should call onClick on button click", () => {
-    const onClick = jest.fn();
-    render(
-      <ActionDropdown label="ActionDropdown" onClick={onClick}>
-        <li>Option 1</li>
-        <li>Option 2</li>
-      </ActionDropdown>
-    );
-    const button = screen.getByTestId("action-dropdown-btn");
-    userEvent.click(button);
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-
-  it("should not call onClick on button click when disabled", () => {
-    const onClick = jest.fn();
-    render(
-      <ActionDropdown label="ActionDropdown" disabled>
-        <li>Option 1</li>
-        <li>Option 2</li>
-      </ActionDropdown>
-    );
-    userEvent.click(screen.getByText("ActionDropdown"));
-    expect(onClick).toHaveBeenCalledTimes(0);
-  });
-
-  it("should show options on clicking dropdown", async () => {
-    render(
-      <ActionDropdown
-        dropdownProps={{
-          buttonProps: {
-            "data-testid": "action-dropdown-dropdown",
-          },
-        }}
-        label="ActionDropdown"
-      >
-        <li>Option 1</li>
-        <li>Option 2</li>
-      </ActionDropdown>
-    );
-    const dropdown = screen.getByTestId("action-dropdown-dropdown");
-    userEvent.click(dropdown);
-    expect(await screen.findByText("Option 1")).toBeInTheDocument();
-    expect(await screen.findByText("Option 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();
-  });
-});