@hyphen/hyphen-components 2.9.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Hyphen AI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,70 @@
+<p align="center">
+  <a href="https://hyphen.ai" rel="noopener" target="_blank"><img width="150" src="./public/images/logo.png" alt="Hyphen logo"></a></p>
+</p>
+
+<h1 align="center" style="border-bottom: none;">Hyphen Component Library</h1>
+<h3 align="center">
+
+  A [React](https://reactjs.org/) component library to power all Hyphen UI
+
+</h3>
+
+## Quick Start
+
+### 1. Install
+
+`npm install @hyphen/hyphen-components`
+
+### 2. Import Global CSS
+
+```jsx
+import '@hyphen/hyphen-components/dist/css/utilities.css'; // Utility classes -- REQUIRED
+import '@hyphen/hyphen-components/dist/css/variables.css'; // CSS Variables -- REQUIRED
+import '@hyphen/hyphen-components/dist/css/index.css'; // Component CSS -- REQUIRED
+import '@hyphen/hyphen-components/dist/css/fonts.css'; // Included Font files -- OPTIONAL BUT ENCOURAGED
+```
+
+We recommend importing our global reset in order to maintain a consistent
+look of all components across applications.
+
+```jsx
+import '@hyphen/hyphen-components/dist/css/reset.css' // A Basic CSS Reset -- OPTIONAL BUT ENCOURAGED.
+```
+
+### 3. Usage
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { Box } from '@hyphen/hyphen-components';
+
+function App() {
+  return <Box>Hello World</Box>;
+}
+
+ReactDOM.render(<App />, document.querySelector('#app'));
+```
+
+## Documentation
+
+[SEE FULL DOCS HERE](https://ux.hyphen.ai)
+
+## Contributing
+
+Issues and PRs welcome! See [HERE](./CONTRIBUTING.md) for our Contribution Guide.
+
+## Raising an Issue
+
+When raising an issue:
+
+* Make sure the issue hasn't been raised yet.
+* Tag issue accordingly using your best judgement. Do NOT create new tags. If you feel a new one is needed, raise it in your issue.
+* If your issue is a bug, include **screenshots** or animated GIFs in your issue whenever needed (if issue is visual in nature).
+* If your issue is a bug, include steps to reproduce, or link to reproducible issue, e.g.: Code Sandbox or similar. Please also provide any additional details including device, OS, browser, browser version etc.
+
+[Issues can be raised here](https://github.com/hyphen/hyphen-components/issues).
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](./LICENSE).

package/package.json

@@ -0,0 +1,138 @@
+{
+  "name": "@hyphen/hyphen-components",
+  "version": "2.9.0",
+  "license": "MIT",
+  "author": {
+    "name": "@hyphen"
+  },
+  "description": "A React component library to power all Hyphen UI.",
+  "main": "dist/index.js",
+  "module": "dist/hyphen-components.esm.js",
+  "typings": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "cross-env-shell BABEL_ENV=build IS_PUBLISHING=true \"dts build && webpack --config webpack.config.js\"",
+    "rollup": "cross-env-shell BABEL_ENV=build IS_PUBLISHING=true \"dts build\"",
+    "build-storybook": "storybook build",
+    "build-storybook-docs": "storybook build --docs",
+    "storybook-docs": "storybook dev --docs",
+    "lint": "dts lint",
+    "lint-fix": "dts lint --fix",
+    "size": "size-limit",
+    "start": "dts watch",
+    "storybook": "storybook dev -p 6006",
+    "test": "dts test --passWithNoTests",
+    "test-watch": "dts test --watch",
+    "semantic-release": "semantic-release",
+    "chromatic": "npx chromatic --project-token=chpt_8fddffb5556f0b7 --only-changed"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "dts lint"
+    }
+  },
+  "prettier": {
+    "printWidth": 80,
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "es5"
+  },
+  "jest": {
+    "testEnvironment": "jsdom"
+  },
+  "peerDependencies": {
+    "react": ">=16"
+  },
+  "engines": {
+    "node": ">=12"
+  },
+  "size-limit": [
+    {
+      "path": "dist/hyphen-components.cjs.production.min.js",
+      "limit": "10 KB"
+    },
+    {
+      "path": "dist/hyphen-components.esm.js",
+      "limit": "10 KB"
+    }
+  ],
+  "devDependencies": {
+    "@babel/core": "^7.23.7",
+    "@chromatic-com/storybook": "^1.3.3",
+    "@semantic-release/commit-analyzer": "^11.1.0",
+    "@size-limit/preset-small-lib": "^11.0.1",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-mdx-gfm": "^8.0.9",
+    "@storybook/addon-themes": "^8.0.9",
+    "@storybook/blocks": "^8.0.9",
+    "@storybook/manager-api": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-vite": "^8.0.9",
+    "@storybook/theming": "^8.0.9",
+    "@testing-library/jest-dom": "^6.2.1",
+    "@testing-library/react": "^14.1.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@tsconfig/recommended": "^1.0.3",
+    "@tsconfig/vite-react": "^3.0.0",
+    "@types/react": "^18.2.47",
+    "@types/react-datepicker": "^6.2.0",
+    "@types/react-dom": "^18.2.18",
+    "@types/react-modal": "^3.16.3",
+    "autoprefixer": "^10.4.17",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^11.3.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "cross-env": "^7.0.3",
+    "css-loader": "^6.9.0",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "cssnano": "^6.0.3",
+    "csstype": "^3.1.3",
+    "dts-cli": "^2.0.4",
+    "husky": "^8.0.3",
+    "identity-obj-proxy": "^3.0.0",
+    "jest-preview": "^0.3.1",
+    "mini-css-extract-plugin": "^2.7.7",
+    "postcss-loader": "^7.3.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-scss": "^4.0.0",
+    "sass": "^1.69.7",
+    "sass-loader": "^13.3.3",
+    "semantic-release": "^23.0.0",
+    "size-limit": "^11.0.1",
+    "storybook": "^8.0.9",
+    "ts-jest": "^29.1.2",
+    "tslib": "^2.6.2",
+    "typescript": "^5.3.3",
+    "url-loader": "^4.1.1",
+    "vite": "^5.1.6",
+    "webpack": "^5.89.0",
+    "webpack-cli": "^5.1.4",
+    "webpack-fix-style-only-entries": "^0.6.1"
+  },
+  "optionalDependencies": {
+    "@rollup/rollup-linux-x64-gnu": "^4.9.6"
+  },
+  "dependencies": {
+    "@hyphen/hyphen-design-tokens": "^4.4.1",
+    "@popperjs/core": "^2.11.8",
+    "@types/react-modal": "^3.16.3",
+    "classnames": "^2.5.1",
+    "date-fns": "^2.16.1",
+    "focus-trap-react": "^10.2.3",
+    "formik": "^2.4.5",
+    "react-datepicker": "^6.3.0",
+    "react-focus-lock": "^2.11.2",
+    "react-modal": "^3.16.1",
+    "react-popper": "^2.3.0",
+    "react-remove-scroll": "^2.5.9",
+    "react-router-dom": "^6.22.3",
+    "react-select": "^5.8.0",
+    "react-select-event": "^5.5.1"
+  }
+}

package/src/components/Alert/Alert.constants.ts

@@ -0,0 +1,19 @@
+import { IconName } from '../../types';
+import { AlertVariant } from './Alert.types';
+
+// eslint-disable-next-line import/prefer-default-export
+export const ALERT_VARIANTS: AlertVariant[] = [
+  'info',
+  'success',
+  'warning',
+  'danger',
+  'default',
+];
+
+export const ALERT_ICONS_MAP: { [key in AlertVariant]: { icon: IconName } } = {
+  default: { icon: 'c-warning' },
+  info: { icon: 'c-info' },
+  success: { icon: 'c-check' },
+  warning: { icon: 't-warning' },
+  danger: { icon: 'c-remove' },
+};

package/src/components/Alert/Alert.mdx

@@ -0,0 +1,29 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Alert } from './Alert';
+import * as Stories from './Alert.stories';
+
+<Meta of={Stories} />
+
+# Overview
+
+Use alerts to display feedback for users about specific actions, or states of an application.
+
+<Canvas of={Stories.Overview} />
+
+## Props
+
+<ArgTypes of={Alert} />
+
+## Variants
+
+Alerts come in different variants based on the kind of feedback being delivered to the user. Additionally, a combination of icon, title, and message can be used depending on your content needs.
+
+<Canvas of={Stories.Variants} />
+
+## Closable
+
+The alert can be made closable by passing the `isClosable` prop. Note that this only controls the presence of
+the close icon, but closing actually happens programmatically with a callback passed to the `onClose` prop.
+If you need custom close text, pass it in the `closeText` prop.
+
+<Canvas of={Stories.Closable} />

package/src/components/Alert/Alert.module.scss

@@ -0,0 +1,74 @@
+.alert {
+  border-width: var(--size-border-width-sm);
+  border-style: solid;
+  box-shadow: var(--size-box-shadow-0);
+  font-family: var(--assets-font-family-body);
+
+  .close-icon {
+    > button {
+      border: 0;
+      background: none;
+      cursor: pointer;
+      padding: 0;
+      color: inherit;
+      font: inherit;
+
+      &:hover {
+        color: var(--color-base-grey-600);
+      }
+    }
+  }
+}
+
+.alert-heading {
+  line-height: var(--size-line-height-heading);
+}
+
+.alert__default {
+  color: var(--color-base-grey-500);
+  background: var(--color-base-grey-100);
+  border-color: var(--color-base-grey-200);
+}
+
+.alert__info {
+  color: var(--color-base-grey-500);
+  background: var(--color-base-blue-50);
+  border-color: var(--color-base-blue-200);
+}
+
+.alert__success {
+  color: var(--color-base-grey-500);
+  background: var(--color-base-green-50);
+  border-color: var(--color-base-green-200);
+}
+
+.alert__warning {
+  color: var(--color-base-grey-500);
+  background: var(
+    --alert-warning-background-color,
+    var(--color-base-yellow-50)
+  );
+  border-color: var(--color-base-yellow-200);
+}
+
+.alert__danger {
+  color: var(--color-base-grey-500);
+  background: var(--color-base-red-50);
+  border-color: var(--color-base-red-200);
+}
+
+.alert__icon__default {
+  color: var(--color-base-grey-600);
+}
+.alert__icon__info {
+  color: var(--color-base-blue-500);
+}
+.alert__icon__success {
+  color: var(--color-base-green-500);
+}
+.alert__icon__warning {
+  color: var(--color-base-yellow-500);
+}
+.alert__icon__danger {
+  color: var(--color-base-red-500);
+}

package/src/components/Alert/Alert.stories.tsx

@@ -0,0 +1,102 @@
+import { Alert } from './Alert';
+import { AlertVariant } from './Alert.types';
+import { Button } from '../Button/Button';
+
+import type { Meta } from '@storybook/react';
+import React from 'react';
+import { useState } from 'react';
+
+const meta: Meta<typeof Alert> = {
+  title: 'Components/Alert',
+  component: Alert,
+};
+
+export default meta;
+
+export const Overview = () => (
+  <Alert
+    title="Contact Created"
+    message="The contact was saved on December 3, 2020 at 6:10pm PDT"
+    variant="success"
+    isClosable
+    hasIcon
+  />
+);
+
+export const Variants = () =>
+  (() => {
+    const variants: AlertVariant[] = [
+      'default',
+      'info',
+      'success',
+      'warning',
+      'danger',
+    ];
+    const message = (variant: AlertVariant) => `
+        This is a ${variant} alert. It also has longer text to see what these alerts
+        can look like when broken into multiple lines. This one will definitely
+        break into multiple lines in most standard screen resolutions.
+      `;
+    return (
+      <>
+        {variants.map((variant: AlertVariant) => (
+          <Alert
+            message={message(variant)}
+            key={variant}
+            title={variant.charAt(0).toUpperCase() + variant.slice(1)}
+            variant={variant}
+            hasIcon
+            className="m-bottom-md"
+          />
+        ))}
+      </>
+    );
+  })();
+
+export const Closable = () => {
+  const [isAlertTwoShowing, setAlertTwoShowing] = useState(true);
+  const [isAlertThreeShowing, setAlertThreeShowing] = useState(true);
+
+  return (
+    <>
+      <Alert
+        title="Won't Close"
+        message="Closable, but with no onClose callback so nothing happens when clicked."
+        variant="warning"
+        isClosable
+        className="m-bottom-md"
+      />
+      {isAlertTwoShowing ? (
+        <Alert
+          title="Closable"
+          message="This one works!"
+          variant="info"
+          isClosable
+          onClose={() => setAlertTwoShowing(false)}
+          className="m-bottom-md"
+        />
+      ) : (
+        <div className="m-bottom-md">
+          <Button onClick={() => setAlertTwoShowing(true)} size="sm">
+            Give me the second alert back!
+          </Button>
+        </div>
+      )}
+      {isAlertThreeShowing ? (
+        <Alert
+          message="With custom close text!"
+          variant="info"
+          isClosable
+          onClose={() => setAlertThreeShowing(false)}
+          closeText="Close me!"
+        />
+      ) : (
+        <div className="m-bottom-md">
+          <Button onClick={() => setAlertThreeShowing(true)} size="sm">
+            Give me the third alert back!
+          </Button>
+        </div>
+      )}
+    </>
+  );
+};

package/src/components/Alert/Alert.test.tsx

@@ -0,0 +1,187 @@
+import React, { ReactNode } from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Alert } from './Alert';
+import { ALERT_VARIANTS } from './Alert.constants';
+
+describe('Alert', () => {
+  describe('Default', () => {
+    test('It renders an alert with a simple text message', () => {
+      const message = 'Hello world!';
+      render(<Alert message={message} />);
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      const alertMessage = screen.getByText(message);
+      expect(alertMessage).toBeInTheDocument();
+    });
+  });
+
+  describe('Variants', () => {
+    ALERT_VARIANTS.map((variant, index) =>
+      test(`renders variant background color ${ALERT_VARIANTS[index]}`, () => {
+        const { getByRole } = render(
+          <Alert variant={variant} message={variant} key={variant} />
+        );
+        expect(getByRole('alert').classList).toContain(`alert__${variant}`);
+      })
+    );
+  });
+
+  describe('Custom Class', () => {
+    test('It renders with a custom class if provided', () => {
+      const message = 'Hello world!';
+      render(<Alert message={message} className="custom-class" />);
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('custom-class');
+    });
+  });
+
+  describe('With Icon', () => {
+    test('It shows a relevant icon when passed the `hasIcon` prop', () => {
+      const message = 'Hello world!';
+      const variants = [
+        'info' as const,
+        'success' as const,
+        'warning' as const,
+        'danger' as const,
+      ];
+
+      const { rerender } = render(<Alert message={message} />);
+
+      variants.forEach((variant) => {
+        rerender(<Alert message={message} variant={variant} hasIcon />);
+        const alertIcon = screen.getByTestId(`alert-icon-${variant}-test-id`);
+        expect(alertIcon).toBeInTheDocument();
+      });
+    });
+  });
+
+  describe('With Title', () => {
+    test('It renders an alert with a title if passed', () => {
+      const message = 'Hello world!';
+      const title = 'title';
+      render(<Alert title={title} message={message} />);
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toBeInTheDocument();
+      const alertTitle = screen.getByText(title);
+      expect(alertTitle).toBeInTheDocument();
+    });
+  });
+
+  describe('With Custom JSX', () => {
+    test('It renders custom JSX if passed to the message prop', () => {
+      const jsxMessage: ReactNode = (
+        <button type="button">I am a button!</button>
+      );
+
+      render(<Alert message={jsxMessage} />);
+
+      const alertButton = screen.getByRole('button');
+      expect(alertButton).toBeInTheDocument();
+      expect(alertButton.textContent).toBe('I am a button!');
+    });
+
+    test('It renders custom JSX if a render prop is passed with a render function', () => {
+      const jsxRenderProp = (): ReactNode => (
+        <button type="button">I am a button!</button>
+      );
+
+      render(<Alert render={jsxRenderProp} />);
+
+      const alertButton = screen.getByRole('button');
+      expect(alertButton).toBeInTheDocument();
+      expect(alertButton.textContent).toBe('I am a button!');
+    });
+
+    test('Render prop supersedes message prop', () => {
+      const jsxRenderProp = (): ReactNode => (
+        <button type="button">I am a button!</button>
+      );
+      const message = 'Hello world!';
+
+      render(<Alert render={jsxRenderProp} message={message} />);
+
+      const alertButton = screen.getByRole('button');
+      expect(alertButton).toBeInTheDocument();
+      expect(alertButton.textContent).toBe('I am a button!');
+
+      expect(screen.queryByText(message)).not.toBeInTheDocument();
+    });
+  });
+
+  describe('Closable Alert', () => {
+    test('It renders a close icon if `isClosable` prop is passed', () => {
+      const message = 'I am closable!';
+      const { rerender } = render(<Alert message={message} />);
+
+      const noCloseButton = screen.queryByTestId('alert-close-icon-test-id');
+      expect(noCloseButton).not.toBeInTheDocument();
+
+      rerender(<Alert message={message} isClosable />);
+      const closeButton = screen.queryByTestId('alert-close-icon-test-id');
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    test('It renders with custom close text if closeText prop is passed', () => {
+      const message = 'I am closable too!';
+      render(<Alert message={message} isClosable closeText="Close me!" />);
+
+      const closeButton = screen.queryByText('Close me!');
+      expect(closeButton).toBeInTheDocument();
+    });
+
+    test('It fires a callback if onClose prop is passed', () => {
+      const message = 'I am closable too!';
+      const mockOnClose = jest.fn();
+
+      const { rerender } = render(
+        <Alert message={message} isClosable onClose={mockOnClose} />
+      );
+
+      const closeButton = screen.queryByTestId('alert-close-icon-test-id');
+      if (closeButton) fireEvent.click(closeButton);
+      expect(mockOnClose).toBeCalledTimes(1);
+      mockOnClose.mockReset();
+
+      rerender(
+        <Alert
+          message={message}
+          isClosable
+          onClose={mockOnClose}
+          closeText="close"
+        />
+      );
+      const closeButtonSpan = screen.getByText('close');
+      if (closeButtonSpan) {
+        fireEvent.click(closeButtonSpan); // 1
+        fireEvent.keyUp(closeButtonSpan, { keyCode: 13 }); // 2
+        fireEvent.keyUp(closeButtonSpan, { keyCode: 13 }); // 3
+        fireEvent.keyUp(closeButtonSpan, { keyCode: 30 }); // No-op
+        fireEvent.keyUp(closeButtonSpan, { keyCode: 30 }); // No-op
+      }
+      expect(mockOnClose).toBeCalledTimes(3);
+      mockOnClose.mockReset();
+
+      rerender(<Alert message={message} isClosable closeText="close" />);
+      const closeButtonNotClickable = screen.getByText('close');
+      if (closeButtonNotClickable) {
+        fireEvent.click(closeButtonSpan); // No-op
+        fireEvent.keyUp(closeButtonSpan, { keyCode: 13 }); // No-op
+        fireEvent.keyUp(closeButtonSpan, { keyCode: 30 }); // No-op
+      }
+      expect(mockOnClose).toBeCalledTimes(0);
+    });
+  });
+
+  describe('Compact', () => {
+    test('It renders with the compact class when isCompact prop is true', () => {
+      const message = 'Hello world!';
+      render(<Alert message={message} isCompact />);
+
+      const alert = screen.getByRole('alert');
+      expect(alert).toHaveClass('p-xs');
+    });
+  });
+});