@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/ValidationFormGroup/__snapshots__/ValidationFormGroup.test.jsx.snap

@@ -1,161 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ValidationFormGroup renders 1`] = `
-<div
-  className="form-group"
-  data-testid="validation-form-group"
->
-  <label
-    htmlFor="firstName"
-  >
-    First Name
-  </label>
-  <input
-    className="form-control"
-    id="firstName"
-    name="first-name"
-    onChange={[Function]}
-    type="text"
-    value="Adam"
-  />
-</div>
-`;
-
-exports[`ValidationFormGroup renders a valid message 1`] = `
-<div
-  className="form-group"
-  data-testid="validation-form-group"
->
-  <label
-    htmlFor="firstName"
-  >
-    First Name
-  </label>
-  <input
-    className="form-control"
-    id="firstName"
-    name="first-name"
-    onChange={[Function]}
-    type="text"
-    value="Adam"
-  />
-  <small
-    className="form-text text-muted"
-    id="firstName-help-text"
-  >
-    This is your first name.
-  </small>
-  <div
-    className="valid-feedback"
-    id="firstName-valid-feedback"
-  >
-    What a nice name.
-  </div>
-</div>
-`;
-
-exports[`ValidationFormGroup renders an invalid message 1`] = `
-<div
-  className="form-group"
-  data-testid="validation-form-group"
->
-  <label
-    htmlFor="firstName"
-  >
-    First Name
-  </label>
-  <input
-    className="form-control"
-    id="firstName"
-    name="first-name"
-    onChange={[Function]}
-    type="text"
-    value="Adam"
-  />
-  <small
-    className="form-text text-muted"
-    id="firstName-help-text"
-  >
-    This is your first name.
-  </small>
-  <strong
-    className="invalid-feedback"
-    id="firstName-invalid-feedback"
-  >
-    This is not your name.
-  </strong>
-</div>
-`;
-
-exports[`ValidationFormGroup renders an invalid message with a select input 1`] = `
-<div
-  className="form-group"
-  data-testid="validation-form-group"
->
-  <label
-    htmlFor="weatherToday"
-  >
-    How is the weather today?
-  </label>
-  <select
-    aria-describedby="weatherToday-help-text weatherToday-valid-feedback"
-    className="is-valid"
-    id="weatherToday"
-    name="weather"
-    onChange={[Function]}
-    value="Sunny"
-  >
-    <option>
-      Sunny
-    </option>
-    <option>
-      Cloudy
-    </option>
-    <option>
-      Rainy
-    </option>
-    <option>
-      Snowy
-    </option>
-  </select>
-  <small
-    className="form-text text-muted"
-    id="weatherToday-help-text"
-  >
-    Look out the window to see.
-  </small>
-  <div
-    className="valid-feedback"
-    id="weatherToday-valid-feedback"
-  >
-    Correct!
-  </div>
-</div>
-`;
-
-exports[`ValidationFormGroup renders with help text 1`] = `
-<div
-  className="form-group"
-  data-testid="validation-form-group"
->
-  <label
-    htmlFor="firstName"
-  >
-    First Name
-  </label>
-  <input
-    className="form-control"
-    id="firstName"
-    name="first-name"
-    onChange={[Function]}
-    type="text"
-    value="Adam"
-  />
-  <small
-    className="form-text text-muted"
-    id="firstName-help-text"
-  >
-    This is your first name.
-  </small>
-</div>
-`;

package/src/ValidationFormGroup/index.jsx

@@ -1,114 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import Input from '../Input';
-import { FormControl } from '../Form';
-
-const propTypes = {
-  /** Id of the form input that the validation is for */
-  for: PropTypes.string.isRequired,
-  /** Additional classnames for this component */
-  className: PropTypes.string,
-  /** Determines if invalid styles / message will be shown */
-  invalid: PropTypes.bool,
-  /** Determines if invalid styles / message will be shown */
-  valid: PropTypes.bool,
-  /** Message to display on valid input */
-  validMessage: PropTypes.node,
-  /** Message to display on invalid input */
-  invalidMessage: PropTypes.node,
-  /** Help text for the form input */
-  helpText: PropTypes.node,
-  /** Specifies contents of the component. */
-  children: PropTypes.node,
-};
-
-const defaultProps = {
-  invalid: undefined,
-  valid: undefined,
-  validMessage: undefined,
-  invalidMessage: undefined,
-  helpText: undefined,
-  children: undefined,
-  className: undefined,
-};
-
-function ValidationFormGroup(props) {
-  const {
-    className,
-    invalidMessage,
-    invalid,
-    valid,
-    validMessage,
-    helpText,
-    for: id,
-    children,
-  } = props;
-
-  const renderChildren = () => React.Children.map(children, (child) => {
-    // Any non-user input element should pass through unmodified
-    if (['input', 'textarea', 'select', Input, FormControl].indexOf(child.type) === -1) { return child; }
-
-    // Add validation class names and describedby values to input element
-    return React.cloneElement(child, {
-      className: classNames(child.props.className, {
-        'is-invalid': invalid,
-        'is-valid': valid,
-      }),
-      // This is a non-standard use of the classNames package, but it's exactly the same use case.
-      'aria-describedby': classNames(child.props['aria-describedby'], {
-        [`${id}-help-text`]: Boolean(helpText),
-        [`${id}-invalid-feedback`]: invalid && invalidMessage,
-        [`${id}-valid-feedback`]: valid && validMessage,
-      }),
-    });
-  });
-
-  const renderHelpText = (text) => {
-    if (!text) { return null; }
-    return <small id={`${id}-help-text`} className="form-text text-muted">{text}</small>;
-  };
-
-  /**
-   * The red text conveys semantic emphasis using color and font weight. For WCAG 2.1, the
-   * semantics need to be exposed programmatically as well. To do this, we use <strong/>
-   * elements and attach the formatting classes to them.
-   */
-  const renderInvalidFeedback = (message) => {
-    if (!message) { return null; }
-    return (
-      <strong
-        id={`${id}-invalid-feedback`}
-        className="invalid-feedback"
-      >
-        {message}
-      </strong>
-    );
-  };
-
-  const renderValidFeedback = (message) => {
-    if (!message) { return null; }
-    return (
-      <div
-        className="valid-feedback"
-        id={`${id}-valid-feedback`}
-      >
-        {message}
-      </div>
-    );
-  };
-
-  return (
-    <div className={classNames('form-group', className)} data-testid="validation-form-group">
-      {renderChildren()}
-      {renderHelpText(helpText)}
-      {renderInvalidFeedback(invalidMessage)}
-      {renderValidFeedback(validMessage)}
-    </div>
-  );
-}
-
-ValidationFormGroup.propTypes = propTypes;
-ValidationFormGroup.defaultProps = defaultProps;
-
-export default ValidationFormGroup;

package/src/utils/types/bootstrap.test.tsx

@@ -1,86 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
-import type { BsPropsWithAs, ComponentWithAsProp } from './bootstrap';
-
-// Note: these are type-only tests. They don't actually do much at runtime; the important checks are at transpile time.
-
-describe('BsPropsWithAs', () => {
-  interface Props<As extends React.ElementType = 'table'> extends BsPropsWithAs<As> {
-    otherProp?: number;
-  }
-
-  it('defines optional bsPrefix, className, and as but no other props', () => {
-    const checkProps = <As extends React.ElementType = 'table'>(_props: Props<As>) => {};
-    // These are all valid props per the prop definition:
-    checkProps({ });
-    checkProps({ bsPrefix: 'bs' });
-    checkProps({ className: 'foo bar' });
-    checkProps({ as: 'tr' });
-    checkProps({ className: 'foo bar', as: 'button', otherProp: 15 });
-    // But these are all invalid:
-    // @ts-expect-error
-    checkProps({ newProp: 10 });
-    // @ts-expect-error
-    checkProps({ onClick: () => {} });
-    // @ts-expect-error
-    checkProps({ id: 'id' });
-    // @ts-expect-error
-    checkProps({ children: <tr /> });
-  });
-});
-
-describe('ComponentWithAsProp', () => {
-  interface MyProps extends BsPropsWithAs {
-    customProp?: string;
-  }
-  const MyComponent: ComponentWithAsProp<'div', MyProps> = (
-    React.forwardRef<HTMLDivElement, MyProps>(
-      ({ as: Inner = 'div', ...props }, ref) => <Inner {...props} ref={ref} />,
-    )
-  );
-
-  // eslint-disable-next-line react/function-component-definition
-  const CustomComponent: React.FC<{ requiredProp: string }> = () => <span />;
-
-  it('is defined to wrap a <div> by default, and accepts related props', () => {
-    // This is valid - by default it is a DIV so accepts props and ref related to DIV:
-    const divClick: React.MouseEventHandler<HTMLDivElement> = () => {};
-    const divRef: React.RefObject<HTMLDivElement> = { current: null };
-    const valid = <MyComponent ref={divRef} onClick={divClick} customProp="foo" />;
-  });
-
-  it('is defined to wrap a <div> by default, and rejects unrelated props', () => {
-    const btnRef: React.RefObject<HTMLButtonElement> = { current: null };
-    // @ts-expect-error because the ref is to a <button> ref, but this is wrapping a <div>
-    const invalidRef = <MyComponent ref={btnRef} customProp="foo" />;
-
-    const btnClick: React.MouseEventHandler<HTMLButtonElement> = () => {};
-    // @ts-expect-error because the handler is for a <button> event, but this is wrapping a <div>
-    const invalidClick = <MyComponent onClick={btnClick} />;
-  });
-
-  it('can be changed to wrap a <canvas>, and accepts related props', () => {
-    const canvasClick: React.MouseEventHandler<HTMLCanvasElement> = () => {};
-    const canvasRef: React.RefObject<HTMLCanvasElement> = { current: null };
-    const valid = <MyComponent as="canvas" ref={canvasRef} onClick={canvasClick} customProp="foo" />;
-  });
-
-  it('can be changed to wrap a <canvas>, and rejects unrelated props', () => {
-    const btnRef: React.RefObject<HTMLButtonElement> = { current: null };
-    // @ts-expect-error because the ref is to a <button> ref, but this is wrapping an <canvas>
-    const invalidRef = <MyComponent as="canvas" ref={btnRef} customProp="foo" />;
-
-    const btnClick: React.MouseEventHandler<HTMLButtonElement> = () => {};
-    // @ts-expect-error because the handler is for a <button> event, but this is wrapping an <canvas>
-    const invalidClick = <MyComponent as="canvas" onClick={btnClick} />;
-  });
-
-  it('can be changed to wrap a custom component, and accepts related props', () => {
-    const valid = <MyComponent as={CustomComponent} requiredProp="hello" />;
-  });
-
-  it('can be changed to wrap a custom component, and rejects unrelated props', () => {
-    // @ts-expect-error The onClick prop has not been declared for our custom component.
-    const valid = <MyComponent as={CustomComponent} requiredProp="hello" onClick={() => {}} />;
-  });
-});

package/src/utils/types/bootstrap.ts

@@ -1,43 +0,0 @@
-/**
- * Types related to bootstrap components
- */
-import React from 'react';
-
-import type { BsPrefixProps, BsPrefixRefForwardingComponent } from 'react-bootstrap/esm/helpers';
-
-/**
- * Type helper for defining props of a component that wraps a bootstrap
- * component. This type defines three props:
- *    1. `className`: this component accepts additional CSS classes.
- *    2. `bsPrefix`: locally change the class name prefix used for this component.
- *    3. `as`: optionally specify which HTML element or Component is used, e.g. `"div"`
- *
- * This type assumes no `children` are allowed, but you can extend it to allow children.
- */
-export type BsPropsWithAs<As extends React.ElementType = React.ElementType> = BsPrefixProps<As>;
-
-/**
- * This is a helper that can be used to define the type of a Paragon component
- * that accepts an `as` prop.
- *
- * It:
- *   - assumes you are using `forwardRef`, and sets the type of the `ref` prop
- *     to match the type of the component passed in the `as` prop.
- *   - assumes you are passing all unused props to the component, so adds any
- *     props from the `as` component type to the props you specify as `Props`.
- *
- * Example;
- * ```
- * interface MyProps extends BsPropsWithAs {
- *   customProp?: string;
- * }
- * export const MyComponent: ComponentWithAsProp<'div', MyProps> = (
- *   React.forwardRef<HTMLDivElement, MyProps>(
- *     ({ as: Inner = 'div', ...props }, ref) => <Inner {...props} ref={ref} />,
- *   )
- * );
- * ```
- * Note that you need to define the default (e.g. `'div'`) in three different places.
- */
-export type ComponentWithAsProp<DefaultElementType extends React.ElementType, Props>
-  = BsPrefixRefForwardingComponent<DefaultElementType, Props>;