@4alldigital/foundation-ui--core 3.0.0

package/src/components/FormField/FormField.tsx

@@ -0,0 +1,258 @@
+import { useState } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import cx from 'classnames';
+import { FIELD_TYPES, Props } from './FormField.types';
+import TextInput from '../TextInput';
+import { InputType } from '../TextInput/TextInput.types';
+import Checkbox from '../Checkbox';
+import Label from '../Label';
+import FormSelect from '../FormSelect';
+import RadioGroup from '../Radio';
+import Switch from '../Switch';
+import Copy from '../Copy';
+import { COPY_SIZE } from '../Copy/Copy.types';
+import FileUpload from '../FileUpload';
+import Icon from '../Icon';
+
+const FormField = ({
+  name,
+  type,
+  label,
+  required,
+  className,
+  icon,
+  options,
+  disabled,
+  description,
+  showPasswordLabel,
+  hidePasswordLabel,
+  validations = {},
+  fileUploadCallback = () => {},
+  autoComplete,
+}: Props) => {
+  const [passwordShowStatus, setPasswordShow] = useState(false);
+  const { control, formState } = useFormContext();
+
+  const { errors } = formState;
+
+  const renderType = (type: string, field: any) => {
+    switch (type) {
+      case FIELD_TYPES.HIDDEN:
+        return <input type={InputType.HIDDEN} disabled={disabled} {...field} />;
+      case FIELD_TYPES.TEXT:
+        return (
+          <TextInput
+            type={InputType.TEXT}
+            required={required || Boolean(validations.required)}
+            icon={icon}
+            className={className}
+            disabled={disabled}
+            autoComplete={autoComplete}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.PASSWORD: {
+        const toggleType = passwordShowStatus ? InputType.TEXT : InputType.PASSWORD;
+        const btnClass = 'appearance-none border-none bg-transparent flex items-center';
+        return (
+          <div className="relative">
+            <span
+              className="absolute right-0 top-0 flex items-center justify-center h-full z-10 pr-2"
+              onClick={() => setPasswordShow((pS) => !pS)}
+              role="button"
+              tabIndex={0}>
+              {passwordShowStatus ? (
+                <button type="button" aria-label={hidePasswordLabel} className={cx(btnClass, 'form-icon')}>
+                  <Icon name="mdi:eye-off" size={24} />
+                </button>
+              ) : (
+                <button type="button" aria-label={showPasswordLabel} className={cx(btnClass, 'form-icon')}>
+                  <Icon name="mdi:eye" size={24} />
+                </button>
+              )}
+            </span>
+            <TextInput
+              type={toggleType as InputType}
+              required={required || Boolean(validations.required)}
+              icon={icon}
+              className={className}
+              disabled={disabled}
+              autoComplete={autoComplete}
+              {...field}
+            />
+          </div>
+        );
+      }
+      case FIELD_TYPES.TEXTAREA:
+        return (
+          <TextInput
+            type={InputType.TEXTAREA}
+            required={required || Boolean(validations.required)}
+            icon={icon}
+            className={className}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.EMAIL:
+        return (
+          <TextInput
+            type={InputType.EMAIL}
+            required={required || Boolean(validations.required)}
+            icon={icon}
+            className={className}
+            disabled={disabled}
+            autoComplete={autoComplete}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.DATE:
+        return (
+          <TextInput
+            type={InputType.DATE}
+            required={required || Boolean(validations.required)}
+            icon={icon}
+            className={className}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.DATETIME:
+        return (
+          <TextInput
+            type={InputType.DATETIME}
+            required={required || Boolean(validations.required)}
+            icon={icon}
+            className={className}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.NUMBER:
+        return (
+          <TextInput
+            type={InputType.NUMBER}
+            required={required || Boolean(validations.required)}
+            icon={icon}
+            className={className}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.CHECKBOX:
+        return (
+          <Checkbox
+            required={required || Boolean(validations.required)}
+            id={name}
+            className={className}
+            label={label}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.RADIO:
+        return (
+          <RadioGroup
+            required={required || Boolean(validations.required)}
+            id={name}
+            className={className}
+            options={options}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.SWITCH:
+        return (
+          <Switch
+            id={name}
+            required={required || Boolean(validations.required)}
+            className={className}
+            disabled={disabled}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.SELECT:
+        return (
+          <FormSelect
+            required={required || Boolean(validations.required)}
+            id={name}
+            className={className}
+            disabled={disabled}
+            label={label}
+            options={options}
+            {...field}
+          />
+        );
+      case FIELD_TYPES.FILE:
+        return (
+          <FileUpload
+            required={required || Boolean(validations.required)}
+            id={name}
+            className={className}
+            disabled={disabled}
+            onChangeCallback={(event) => {
+              fileUploadCallback(event);
+            }}
+            {...field}
+          />
+        );
+      default:
+        return (
+          <TextInput
+            type={InputType.TEXT}
+            required={required || Boolean(validations.required)}
+            disabled={disabled}
+            icon={icon}
+            className={className}
+            {...field}
+          />
+        );
+    }
+  };
+
+  // TODO: HELPER CLASSES : data-[invalid=true]:bg-error data-[valid]:bg-success
+  const showLabel = label && type !== FIELD_TYPES.CHECKBOX;
+  const labelWithAsterisk = required || Boolean(validations.required) ? `${label} *` : label;
+  return (
+    <div className="relative">
+      <div data-testid="FormField" className="mb-4">
+        {showLabel && (
+          <div className="flex items-baseline justify-between">
+            <Label id={name}>{labelWithAsterisk}</Label>
+          </div>
+        )}
+        <div className="mb-1">
+          <Controller
+            // https://stackoverflow.com/questions/47012169/a-component-is-changing-an-uncontrolled-input-of-type-text-to-be-controlled-erro
+            defaultValue={''}
+            name={name}
+            control={control}
+            rules={validations}
+            render={({ field }) => {
+              return renderType(type, field);
+            }}
+          />
+        </div>
+        {description && (
+          <div className="formfield-description">
+            <Copy size={COPY_SIZE.SMALL} className="mb-0">
+              {description}
+            </Copy>
+          </div>
+        )}
+        {errors[name] && (
+          <div className="formfield-error text-error italic">
+            <Copy size={COPY_SIZE.SMALL} className="mb-0">
+              {errors?.[name]?.message?.toString()}
+            </Copy>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+FormField.displayName = 'FormField';
+
+export default FormField;
+export type { Props };

package/src/components/FormField/FormField.types.ts

@@ -0,0 +1,89 @@
+import { OptionsType } from '../FormSelect/FormSelect.types';
+
+export enum FIELD_TYPES {
+  TEXT = 'text',
+  TEXTAREA = 'textarea',
+  SELECT = 'select',
+  CHECKBOX = 'checkbox',
+  RADIO = 'radio',
+  SWITCH = 'switch',
+  DATE = 'date',
+  TIME = 'time',
+  DATETIME = 'datetime',
+  FILE = 'file',
+  PASSWORD = 'password',
+  EMAIL = 'email',
+  NUMBER = 'number',
+  TEL = 'tel',
+  URL = 'url',
+  SEARCH = 'search',
+  HIDDEN = 'hidden',
+  // MONTH = 'month',
+  // WEEK = 'week',
+  // HIDDEN = 'hidden',
+  // COLOR = 'color',
+  // RANGE = 'range',
+  // CURRENCY = 'currency',
+  // PERCENT = 'percent',
+}
+
+export interface Props {
+  type: FIELD_TYPES;
+  name: string;
+  className?: string;
+  label?: string | React.ReactNode[];
+  required?: boolean;
+  icon?: string;
+  options?: Array<OptionsType>;
+  disabled?: boolean;
+  description?: string;
+  showPasswordLabel?: string;
+  hidePasswordLabel?: string;
+  onChange?: (e: any) => void;
+  validations?: any;
+  fileUploadCallback?: (file: any) => void;
+  autoComplete?:
+    | 'off'
+    | 'full-name'
+    | 'honorific-prefix'
+    | 'given-name'
+    | 'additional-name'
+    | 'family-name'
+    | 'honorific-suffix'
+    | 'nickname'
+    | 'email'
+    | 'username'
+    | 'new-password'
+    | 'current-password'
+    | 'one-time-code'
+    | 'organization-title'
+    | 'organization'
+    | 'street-address'
+    | 'address-line1'
+    | 'address-line2'
+    | 'address-line3'
+    | 'address-level4'
+    | 'address-level3'
+    | 'address-level2'
+    | 'address-level1'
+    | 'country'
+    | 'country-name'
+    | 'postal-code'
+    | 'cc-name'
+    | 'cc-given-name'
+    | 'cc-additional-name'
+    | 'cc-family-name'
+    | 'cc-number'
+    | 'cc-exp'
+    | 'cc-exp-month'
+    | 'cc-exp-year'
+    | 'cc-csc'
+    | 'cc-type'
+    | 'transaction-currency'
+    | 'transaction-amount'
+    | 'language'
+    | 'bday'
+    | 'bday-day'
+    | 'bday-month'
+    | 'bday-year';
+}

package/src/components/FormField/index.ts

@@ -0,0 +1 @@
+export { default } from './FormField';

package/src/components/FormSelect/FormSelect.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import FormSelect from '.';
+
+const meta: Meta<typeof FormSelect> = {
+  title: 'MOLECULES/FormSelect',
+  component: FormSelect,
+};
+
+type Story = StoryObj<typeof FormSelect>;
+
+export const Default: Story = {};
+
+Default.args = {
+  options: [
+    { value: 'value-1', label: 'Option one' },
+    { value: 'value-2', label: 'Option two' },
+    { value: 'value-3', label: 'Option three' },
+    { value: 'value-4', label: 'Option four' },
+    { value: 'value-5', label: 'Option five' },
+    { value: 'value-6', label: 'Option six' },
+    { value: 'value-7', label: 'Option seven' },
+  ],
+  label: 'Select',
+  required: false,
+};
+
+export default meta;

package/src/components/FormSelect/FormSelect.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import cx from 'classnames';
+import { Props } from './FormSelect.types';
+import Icon from '../Icon';
+
+const FormSelect = React.forwardRef(function MyInput(
+  { id, name, options, required, className, disabled, ...rest }: Props,
+  ref: any,
+) {
+  if (!options) {
+    throw new Error('FormSelect requires options prop');
+  }
+
+  return (
+    <div id={id} className={cx('pb-2 min-w-20', className)}>
+      <div className="relative">
+        <select
+          ref={ref}
+          // id={id}
+          name={name}
+          disabled={disabled}
+          required={required}
+          className="form-item text-input pr-10"
+          {...rest}>
+          {options.map((option, index) => (
+            <option
+              key={`${option?.value?.toString()}--${index}`}
+              value={option?.value?.toString()}
+              disabled={option.disabled}
+              className="bg-body-bg dark:bg-body-bg-dark">
+              {option.label}
+            </option>
+          ))}
+        </select>
+        <div className="form-icon absolute inset-0 z-10 pointer-events-none h-full w-12 items-center justify-center top-0 right-0 left-auto flex">
+          <Icon name="mdi:chevron-down" size={24} className="pointer-events-none" />
+        </div>
+      </div>
+    </div>
+  );
+});
+
+FormSelect.displayName = 'FormSelect';
+
+export default FormSelect;
+export type { Props };

package/src/components/FormSelect/FormSelect.types.ts

@@ -0,0 +1,45 @@
+import { FilterValue } from '@elastic/search-ui';
+
+export type OptionsType = {
+  value: string | FilterValue;
+  label: string;
+  /** The selected option's value. */
+  defaultValue?: string;
+  disabled?: boolean;
+};
+
+export interface Props {
+  /** The selected option's value. */
+  options?: Array<OptionsType>;
+  /** Unique id for the field, required for a11y. */
+  id: string;
+  /** The select visible default label value. */
+  label?: string | React.ReactNode[];
+  /** Is field required. */
+  required?: boolean;
+  /** Additional classes. */
+  className?: string;
+  /** Dropdown icon color. */
+  iconColor?: string;
+  /** Dropdown icon color. */
+  itemIcon?: string;
+  /** Additional wrapper CSS classes. */
+  wrapperStyles?: string;
+  /** Select Up Icon. */
+  selectIconUp?: string;
+  /** Select Down Icon. */
+  selectIconDown?: string;
+  /** Select Form Item Name. */
+  name?: string;
+  /** Is field disabled. */
+  disabled?: boolean;
+  /** The selected option's value. */
+  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+}
+
+export interface ItemProps {
+  children: React.ReactNode;
+  value: string;
+  itemIcon: string;
+  iconColor?: string;
+}

package/src/components/FormSelect/index.ts

@@ -0,0 +1 @@
+export { default } from './FormSelect';

package/src/components/FullContentBackgroundImage/FullContentBackgroundImage.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import FullContentBackgroundImage from '.';
+
+const meta: Meta<typeof FullContentBackgroundImage> = {
+  title: 'UI/FullContentBackgroundImage',
+  component: FullContentBackgroundImage,
+};
+
+type Story = StoryObj<typeof FullContentBackgroundImage>;
+
+export const Default: Story = {
+  args: {
+    image: 'https://picsum.photos/1600/800',
+    children: <div>Content</div>,
+  },
+};
+
+export default meta;

package/src/components/FullContentBackgroundImage/FullContentBackgroundImage.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Props } from './FullContentBackgroundImage.types';
+
+const FullContentBackgroundImage = ({ testID, children, image, imageMob }: Props) => {
+  if (!image && !imageMob) {
+    return <div>{children}</div>;
+  }
+
+  return (
+    <div
+      data-testid={testID || '"FullContentBackgroundImage"'}
+      className="bg-center bg-no-repeat bg-cover min-h-screen w-screen overflow-hidden fixed top-0 left-0 right-0 bottom-0 z-0">
+      <span
+        className="absolute h-screen w-screen top-0 left-0 right-0 bottom-0 opacity-30 bg-cover bg-center blur-md"
+        style={{
+          backgroundImage: `url(${image})`,
+        }}></span>
+      {children}
+    </div>
+  );
+};
+
+FullContentBackgroundImage.displayName = 'FullContentBackgroundImage';
+
+export default FullContentBackgroundImage;
+export type { Props };

package/src/components/FullContentBackgroundImage/FullContentBackgroundImage.types.ts

@@ -0,0 +1,6 @@
+export interface Props {
+  testID?: string;
+  image: string;
+  imageMob?: string;
+  children?: React.ReactNode;
+}

package/src/components/FullContentBackgroundImage/index.ts

@@ -0,0 +1 @@
+export { default } from './FullContentBackgroundImage';

package/src/components/FullScreenVideoModal/FullScreenVideoModal.stories.tsx

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import FullScreenVideoModal from '.';
+
+const meta: Meta<typeof FullScreenVideoModal> = {
+  title: 'UI/FullScreenVideoModal',
+  component: FullScreenVideoModal,
+};
+
+type Story = StoryObj<typeof FullScreenVideoModal>;
+
+export const Default: Story = {
+  // parameters: {
+  //   layout: 'fullscreen',
+  // },
+  args: {
+    videoProps: {
+      sources: [
+        {
+          src: 'https://d227lq76md6ahr.cloudfront.net/6f931020-437f-4484-a966-82e40c6a4e8c/hls/livestream--upper-body-blast--05-05-2024.m3u8',
+          type: 'application/x-mpegURL',
+        },
+      ],
+      options: {
+        poster: 'https://assets.nrgbarrebody.app/2021-05/202103%20NBP%20-%20NRG%20BarreBody-67-min.jpg',
+        autoplay: true,
+        muted: false,
+        fluid: false,
+      },
+      isModal: true,
+    },
+  },
+};
+
+export default meta;

package/src/components/FullScreenVideoModal/FullScreenVideoModal.tsx

@@ -0,0 +1,41 @@
+import React, { useEffect, useState } from 'react';
+import { Props } from './FullScreenVideoModal.types';
+import Modal from 'react-modal';
+import Video from '../Video';
+import Button from '../Button';
+
+const FullScreenVideoModal = ({
+  testID,
+  modalOpen = true,
+  videoProps,
+  ariaHideApp = false,
+  onCloseCallback = () => {},
+}: Props) => {
+  const [modalIsOpen, setModalIsOpen] = useState(false);
+
+  useEffect(() => {
+    if (modalOpen) {
+      setModalIsOpen(true);
+    }
+  }, [modalOpen]);
+
+  return (
+    <Modal
+      isOpen={modalIsOpen}
+      onRequestClose={onCloseCallback}
+      className="absolute bg-none top-1/2 left-1/2 right-auto bottom-auto mr-[-50%] transform translate-x-[-50%] translate-y-[-50%] w-full h-full p-0"
+      overlayClassName="fixed top-0 left-0 right-0 bottom-0 bg-black bg-opacity-100 z-50"
+      ariaHideApp={ariaHideApp} // Only use in development, adjust for production use
+      data-testid={testID || 'FullScreenVideoModal'}>
+      <div className="h-full relative">
+        <Button rounded icon="mdi:close" onClick={onCloseCallback} className="absolute top-4 right-4 z-50" />
+        <Video {...videoProps} />
+      </div>
+    </Modal>
+  );
+};
+
+FullScreenVideoModal.displayName = 'FullScreenVideoModal';
+
+export default FullScreenVideoModal;
+export type { Props };

package/src/components/FullScreenVideoModal/FullScreenVideoModal.types.ts

@@ -0,0 +1,9 @@
+import { Props as VideoProps } from '../Video/Video.types';
+
+export interface Props {
+  testID?: string;
+  videoProps: VideoProps;
+  ariaHideApp?: boolean;
+  modalOpen?: boolean;
+  onCloseCallback?: () => void;
+}

package/src/components/FullScreenVideoModal/index.ts

@@ -0,0 +1 @@
+export { default } from './FullScreenVideoModal';

package/src/components/Header/Header.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+import Header from '.';
+import React from 'react';
+
+const meta: Meta<typeof Header> = {
+  title: 'LAYOUTS/Header',
+  component: Header,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+type Story = StoryObj<typeof Header>;
+
+export const Default: Story = {
+  args: {
+    testID: 'header-story',
+    userPicture: 'https://dpyu2eix72mhm.cloudfront.net/1723117330741-CB12A65C-FBBD-4F91-89F4-1AE8BB9AC72F.jpg',
+  },
+  render: props => {
+    const [isLoggedIn, setIsLoggedIn] = React.useState(false);
+
+    return (
+      <div>
+        <Header
+          {...props}
+          loginCallback={() => setIsLoggedIn(true)}
+          logoutCallback={() => setIsLoggedIn(false)}
+          isAuthenticated={isLoggedIn}
+        />
+      </div>
+    );
+  },
+};
+
+export const LogoOnly: Story = {
+  args: {
+    testID: 'header-story',
+    logoOnly: true,
+  },
+  render: props => {
+
+    return (
+      <div>
+        <Header {...props} />
+      </div>
+    );
+  },
+};
+
+export default meta;