@progressiveui/react 2.0.3 → 2.0.4

package/src/components/Accordion/hooks/useAccordionProvider.ts

@@ -1,35 +0,0 @@
-import { useTransitionMap } from 'react-transition-state';
-import {
-  TransitionProp,
-  AccordionProviderOptions,
-  AccordionProviderValue,
-  ItemKey
-} from '../utils/constants';
-
-const getTransition = (
-  transition: TransitionProp | undefined,
-  name: 'enter' | 'exit' | 'preEnter' | 'preExit'
-): boolean => transition === true || !!(transition && transition[name]);
-
-const useAccordionProvider: (options?: AccordionProviderOptions) => AccordionProviderValue = ({
-  transition,
-  transitionTimeout,
-  ...rest
-} = {}) => {
-  const transitionMap = useTransitionMap<ItemKey>({
-    timeout: transitionTimeout,
-    enter: getTransition(transition, 'enter'),
-    exit: getTransition(transition, 'exit'),
-    preEnter: getTransition(transition, 'preEnter'),
-    preExit: getTransition(transition, 'preExit'),
-    ...rest
-  });
-
-  return {
-    mountOnEnter: !!rest.mountOnEnter,
-    initialEntered: !!rest.initialEntered,
-    ...transitionMap
-  };
-};
-
-export { useAccordionProvider };

package/src/components/Accordion/hooks/useAccordionState.ts

@@ -1,14 +0,0 @@
-import { ItemKey } from '../utils/constants';
-import { useAccordionContext, getItemState } from './useAccordionContext';
-
-const useAccordionState = () => {
-  const context = useAccordionContext();
-  return {
-    getItemState: (key: ItemKey, { initialEntered }: { initialEntered?: boolean } = {}) =>
-      getItemState(context, key, initialEntered),
-    toggle: context.toggle,
-    toggleAll: context.toggleAll
-  };
-};
-
-export { useAccordionState };

package/src/components/Accordion/index.ts

@@ -1,23 +0,0 @@
-export { Accordion } from "./components/Accordion";
-export { AccordionItem } from "./components/AccordionItem";
-export { AccordionProvider } from "./components/AccordionProvider";
-export { ControlledAccordion } from "./components/ControlledAccordion";
-export { withAccordionItem } from "./components/withAccordionItem";
-export { useAccordion } from "./hooks/useAccordion";
-export { useAccordionItem } from "./hooks/useAccordionItem";
-export { useAccordionItemEffect } from "./hooks/useAccordionItemEffect";
-export { useAccordionProvider } from "./hooks/useAccordionProvider";
-export { useAccordionState } from "./hooks/useAccordionState";
-export { useHeightTransition } from "../../hooks/useHeightTransition";
-export { useMergeRef } from "../../hooks/useMergeRef";
-export type { AccordionProps } from "./components/Accordion";
-export type { AccordionItemProps } from "./components/AccordionItem";
-export type { ControlledAccordionProps } from "./components/ControlledAccordion";
-export type { ItemStateProps } from "./components/withAccordionItem";
-export type {
-  AccordionProviderOptions,
-  AccordionProviderValue,
-  ItemState,
-  ItemStateOptions,
-  TransitionProp,
-} from "./utils/constants";

package/src/components/Accordion/utils/bem.ts

@@ -1,33 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { ClassNameProp, Modifiers } from './constants';
-
-/**
- * Generate className following BEM methodology: http://getbem.com/naming/
- * Modifier value can be one of the types: boolean, string
- */
-const bem =
-  (block: string, element?: string, modifiers?: Modifiers) =>
-  <P>(className?: ClassNameProp<P>, props?: P) => {
-    const blockElement = element ? `${block}__${element}` : block;
-
-    let classString = blockElement;
-    modifiers &&
-      Object.keys(modifiers).forEach((name) => {
-        const value = modifiers[name];
-        if (value)
-          classString += ` ${blockElement}--${
-            value === true ? name : `${name}-${value}`
-          }`;
-      });
-
-    let expandedClassName =
-      typeof className === 'function' ? className(props!) : className;
-    if (typeof expandedClassName === 'string') {
-      expandedClassName = expandedClassName.trim();
-      if (expandedClassName) classString += ` ${expandedClassName}`;
-    }
-
-    return classString;
-  };
-
-export { bem };

package/src/components/Accordion/utils/constants.ts

@@ -1,82 +0,0 @@
-import { createContext, HTMLAttributes } from "react";
-import {
-  TransitionState,
-  TransitionMapResult,
-  TransitionMapOptions,
-  TransitionOptions,
-} from "react-transition-state";
-
-export const ACCORDION_BLOCK = "szh-accordion";
-export const ACCORDION_PREFIX = "szh-adn";
-export const ACCORDION_ATTR = `data-${ACCORDION_PREFIX}`;
-export const ACCORDION_BTN_ATTR = `data-${ACCORDION_PREFIX}-btn`;
-
-export type Modifiers = {
-  readonly [index: string]: boolean | string;
-};
-export type ClassNameProp<P> = string | ((props: P) => string);
-export interface ElementProps<E extends HTMLElement, P = undefined>
-  extends Omit<HTMLAttributes<E>, "className" | "children"> {
-  className?: P extends undefined ? string : ClassNameProp<P>;
-  "data-testid"?: string | number;
-}
-
-export type ItemKey = Element | string | number;
-export type TransitionProp =
-  | boolean
-  | {
-      enter?: boolean;
-      exit?: boolean;
-      preEnter?: boolean;
-      preExit?: boolean;
-    };
-
-export interface ItemState {
-  readonly state: TransitionState;
-  readonly toggle: (toEnter?: boolean) => void;
-  disabled?: boolean;
-}
-
-export interface ItemStateOptions {
-  itemKey?: string | number;
-  initialEntered?: boolean;
-  disabled?: boolean;
-}
-
-export interface AccordionProviderOptions
-  extends Omit<
-    TransitionMapOptions<ItemKey>,
-    "enter" | "exit" | "preEnter" | "preExit" | "timeout"
-  > {
-  /**
-   * The transition behavior for the accordion.
-   * It can take a TransitionProp type which specifies the type of transition.
-   */
-  transition?: TransitionProp;
-
-  /**
-   *  Set the timeout duration for transitions.
-   * It uses the 'timeout' type from TransitionOptions to specify the duration in milliseconds.
-   */
-  transitionTimeout?: TransitionOptions["timeout"];
-}
-
-export interface AccordionProviderValue extends TransitionMapResult<ItemKey> {
-  /**
-   * Determines whether the accordion item should be mounted
-   * in the DOM only when it enters. A true value means the item will only mount when
-   * it is opened (entered state).
-   */
-  mountOnEnter: boolean;
-
-  /**
-   * Indicates whether the accordion item should be in the
-   * entered (or opened) state initially. This can be used to display the accordion item
-   * as open by default when the component is first rendered.
-   */
-  initialEntered: boolean;
-}
-
-export const AccordionContext = createContext<Partial<AccordionProviderValue>>(
-  {}
-);

package/src/components/Accordion/utils/mergeProps.ts

@@ -1,24 +0,0 @@
-/* eslint-disable */
-// @ts-nocheck
-
-const mergeProps = (target, source) => {
-  if (!source) return target;
-
-  const result = { ...target };
-  Object.keys(source).forEach((key) => {
-    const targetProp = target[key];
-    const sourceProp = source[key];
-    if (typeof sourceProp === 'function' && targetProp) {
-      result[key] = (...e) => {
-        targetProp(...e);
-        sourceProp(...e);
-      };
-    } else {
-      result[key] = sourceProp;
-    }
-  });
-
-  return result;
-};
-
-export { mergeProps };

package/src/components/Accordion/utils/useIsomorphicLayoutEffect.ts

@@ -1,15 +0,0 @@
-import { useEffect, useLayoutEffect } from 'react';
-
-// Get around a warning when using useLayoutEffect on the server.
-// https://github.com/reduxjs/react-redux/blob/b48d087d76f666e1c6c5a9713bbec112a1631841/src/utils/useIsomorphicLayoutEffect.js#L12
-// https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
-// https://github.com/facebook/react/issues/14927#issuecomment-549457471
-
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' &&
-  typeof window.document !== 'undefined' &&
-  typeof window.document.createElement !== 'undefined'
-    ? useLayoutEffect
-    : useEffect;
-
-export { useIsomorphicLayoutEffect as useLayoutEffect };

package/src/components/AnchorNavigation/AnchorNavigation-test.js

@@ -1,48 +0,0 @@
-import React from 'react';
-import AnchorNavigation from './AnchorNavigation';
-import Link from '../Link';
-import { shallow } from 'enzyme';
-
-describe('AnchorNavigation', () => {
-    describe('renders as expected', ()=>{
-        const wrapper = shallow(
-        <AnchorNavigation title="title">
-            <Link href="#">
-                Item two
-            </Link>
-            <Link href="#">
-                Item three
-            </Link>
-        </AnchorNavigation>)
-
-        const anchorWrapper = () => wrapper.find('div.wfp--anchor-navigation');
-
-        describe('anchorWrapper', () => {
-            it('renders as expected', () => {
-                expect(anchorWrapper().props().children.length).toBe(2)
-            })
-            it('renders classes as expected', () => {
-                expect(anchorWrapper().hasClass('wfp--anchor-navigation')).toEqual(true)
-            })
-        })
-
-        const titleWrapper = () => wrapper.find('div.wfp--anchor-header-title');
-
-        describe('titleWrapper', () => {
-            it('renders as expected', () => {
-                expect(titleWrapper().length).toBe(1)
-            })
-            it('renders classes as expected', () => {
-                expect(titleWrapper().hasClass('wfp--anchor-header-title')).toEqual(true)
-            })
-        })
-
-        const contentWrapper = () => wrapper.find('div.wfp--anchor-content');
-
-        describe('contentWrapper', () => {
-            it('renders classes as expected', () => {
-                expect(contentWrapper().hasClass('wfp--anchor-content')).toEqual(true)
-            })
-        })
-    })
-})

package/src/components/AnchorNavigation/AnchorNavigation.stories.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import markdown from './README.mdx';
-import AnchorNavigation from './AnchorNavigation';
-import Link from '../Link';
-
-export default {
-  title: 'Components/Navigation/AnchorNavigation',
-  component: AnchorNavigation,
-  parameters: {
-    componentSubtitle: 'Component',
-    status: 'experimental',
-    mdx: markdown,
-  },
-};
-
-export const RegularAnchorNavigation = (args) => (
-  <AnchorNavigation {...args}>
-    <Link href="#">Item one</Link>
-    <Link href="#">Item two</Link>
-    <Link href="#">Item three</Link>
-    <Link href="#">Item four</Link>
-  </AnchorNavigation>
-);
-
-RegularAnchorNavigation.args = {
-  title: 'Title',
-};
-
-const anchorsourcecode = `
-import { AnchorNavigation, Link } from "@un/ui";
-
-<AnchorNavigation title="Title">
-  <Link href="#">
-    Item one
-  </Link>
-  <Link href="#">
-    Item two
-  </Link>
-  <Link href="#">
-    Item three
-  </Link>
-  <Link href="#">
-    Item four
-  </Link>
-</AnchorNavigation>
-`;
-
-RegularAnchorNavigation.story = {
-  parameters: {
-    docs: {
-      source: {
-        code: anchorsourcecode,
-      },
-    },
-  },
-};

package/src/components/AnchorNavigation/AnchorNavigation.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-import classNames from "classnames";
-import useSettings from "../../hooks/useSettings";
-
-interface AnchorNavigationProps extends React.ComponentPropsWithRef<"div"> {
-  /*
-   * The title of the anchor navigation
-   */
-  title?: string;
-}
-
-const AnchorNavigation: React.FC<AnchorNavigationProps> = ({
-  title,
-  children,
-  className,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-
-  const wrapperClasses = classNames(`${prefix}--anchor-navigation`, className);
-  return (
-    <div className={wrapperClasses} {...other}>
-      <div className={`${prefix}--anchor-header-title`}>{title}</div>
-      <div className={`${prefix}--anchor-content`}>{children}</div>
-    </div>
-  );
-};
-
-export default AnchorNavigation;

package/src/components/AnchorNavigation/index.ts

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

package/src/components/AuthLayout/AuthLayout-test.js

@@ -1,46 +0,0 @@
-import React from 'react';
-import AuthLayout from './AuthLayout';
-import { shallow } from 'enzyme';
-
-describe('AuthLayout', () => {
-    describe('renders as expected', ()=>{
-        const wrapper = shallow(
-        <AuthLayout>
-            <div>This is image content</div>
-            <div>Auth content </div>
-        </AuthLayout>)
-
-        const authWrapper = () => wrapper.find('div.wfp--auth-wrapper');
-
-        describe('authWrapper', () => {
-            it('renders as expected', () => {
-                expect(authWrapper().props().children.length).toBe(2)
-            })
-            it('renders classes as expected', () => {
-                expect(authWrapper().hasClass('wfp--auth-wrapper')).toEqual(true)
-            })
-        })
-
-        const backgroundWrapper = () => wrapper.find('div.wfp--auth-background-wrapper');
-
-        describe('backgroundWrapper', () => {
-            it('renders as expected', () => {
-                expect(backgroundWrapper().length).toBe(1)
-            })
-            it('renders classes as expected', () => {
-                expect(backgroundWrapper().hasClass('wfp--auth-background-wrapper')).toEqual(true)
-            })
-        })
-
-        const contentWrapper = () => wrapper.find('div.wfp--auth-content-wrapper');
-
-        describe('contentWrapper', () => {
-            it('renders as expected', () => {
-                expect(contentWrapper().length).toBe(1)
-            })
-            it('renders classes as expected', () => {
-                expect(contentWrapper().hasClass('wfp--auth-content-wrapper')).toEqual(true)
-            })
-        })
-    })
-})

package/src/components/AuthLayout/AuthLayout.stories.tsx

@@ -1,146 +0,0 @@
-import React from "react";
-import markdown from "./README.mdx";
-import { AuthLayout, BackgroundContent } from "./AuthLayout";
-import Button from "../Button";
-import TextInput from "../TextInput";
-import Text from "../Text";
-import Link from "../Link";
-import FormGroup from "../FormGroup";
-// import Icon from './../Icon';
-import { ArrowLeft, WfpLogoStandardBlackEn } from "@progressiveui/icons-react";
-
-export default {
-  title: "Components/Content Related/AuthLayout",
-  component: AuthLayout,
-  subcomponents: { BackgroundContent },
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-    mdx: markdown,
-  },
-};
-
-export const Regular = (args) => {
-  return (
-    <AuthLayout
-      {...args}
-      backgroundContent={
-        <BackgroundContent
-          style={{
-            background: "#007DBC",
-            color: "#fff",
-            padding: "3rem",
-          }}
-        >
-          Image can be placed here or just give a background with content like
-          this
-        </BackgroundContent>
-      }
-    >
-      <div>Forms will be here</div>
-    </AuthLayout>
-  );
-};
-
-// TODO
-export const RegularNoImage = (args) => (
-  <AuthLayout {...args}>
-    <FormGroup style={{ width: "80%" }}>
-      <Button
-        icon={ArrowLeft}
-        iconReverse
-        kind="secondary"
-        style={{ marginBottom: "3rem" }}
-      >
-        Back to lorem
-      </Button>
-      <TextInput
-        labelText="The labelText"
-        name="inputname"
-        placeholder="placeholder"
-      />
-      <TextInput
-        labelText="The labelText"
-        name="inputname"
-        placeholder="placeholder"
-      />
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-end",
-          alignItems: "center",
-        }}
-      >
-        <Link href="https://www.wfp.org">Another link</Link>
-        <Button kind="primary" style={{ marginLeft: "2rem" }}>
-          Register
-        </Button>
-      </div>
-    </FormGroup>
-  </AuthLayout>
-);
-
-RegularNoImage.args = {
-  backgroundContent: (
-    <BackgroundContent
-      style={{
-        background: "linear-gradient(0.13deg, #357DB6 0.17%, #5DB2C2 99.95%)",
-        color: "#fff",
-        padding: "3rem",
-      }}
-    >
-      <WfpLogoStandardBlackEn
-        description="WFP"
-        fill="#fff"
-        style={{ marginBottom: "4rem" }}
-      />
-      <Text kind="h1">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr,diam nonumy
-        eirmod.
-      </Text>
-
-      <p style={{ marginTop: "2rem" }}>- Author</p>
-    </BackgroundContent>
-  ),
-};
-
-export const WithImage = (args) => (
-  <AuthLayout {...args}>
-    <FormGroup style={{ width: "80%" }}>
-      <Button
-        icon={ArrowLeft}
-        iconReverse
-        kind="secondary"
-        style={{ marginBottom: "3rem" }}
-      >
-        Back to lorem
-      </Button>
-      <TextInput
-        labelText="The labelText"
-        name="inputname"
-        placeholder="placeholder"
-      />
-      <TextInput
-        labelText="The labelText"
-        name="inputname"
-        placeholder="placeholder"
-      />
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "flex-end",
-          alignItems: "center",
-        }}
-      >
-        <Link href="https://www.wfp.org">Another link</Link>
-        <Button kind="primary" style={{ marginLeft: "2rem" }}>
-          Register
-        </Button>
-      </div>
-    </FormGroup>
-  </AuthLayout>
-);
-
-WithImage.args = {
-  image: "http://www1.wfp.org/sites/default/files/images/yemen-hero-min.jpg",
-};

package/src/components/AuthLayout/AuthLayout.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import type { PropsWithChildren } from 'react';
-import classNames from 'classnames';
-import useSettings from '../../hooks/useSettings';
-
-type AuthLayoutProps = PropsWithChildren<{
-  /**
-   * The CSS class name to be placed on the wrapping element.
-   */
-  className?: string;
-  /**
-   * The image is set as background on the left section when provided
-   */
-  image?: React.ReactNode;
-  /**
-   * This usually consist of `<BackgroundContent/>` if you wish to provide content and background color instead of an image
-   */
-  backgroundContent?: React.ReactNode;
-}>;
-
-const AuthLayout: React.FC<AuthLayoutProps> = ({
-  image,
-  backgroundContent,
-  children,
-  className,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  const style = image
-    ? {
-        backgroundImage: `url(${image})`,
-      }
-    : {};
-
-  const wrapperClasses = classNames(`${prefix}--auth-background-wrapper`, {
-    [`${prefix}--auth-background-image`]: image,
-    [`${className}`]: className,
-  });
-
-  return (
-    <div className={`${prefix}--auth-wrapper`} {...other}>
-      <div className={wrapperClasses} style={style}>
-        {backgroundContent}
-      </div>
-      <div className={`${prefix}--auth-content-wrapper`}>{children}</div>
-    </div>
-  );
-};
-
-type BackgroundContentProps = React.ComponentPropsWithRef<'div'>;
-
-const BackgroundContent: React.FC<BackgroundContentProps> = ({
-  children,
-  ...other
-}) => {
-  const { prefix } = useSettings();
-  return (
-    <div {...other} className={`${prefix}--auth-background-content`}>
-      {children}
-    </div>
-  );
-};
-
-export { BackgroundContent, AuthLayout };

package/src/components/AuthLayout/index.ts

@@ -1 +0,0 @@
-export { AuthLayout, BackgroundContent } from './AuthLayout';

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import Avatar from ".";
-
-export default {
-  title: "Components/UI Elements/Avatar",
-  component: User,
-  parameters: {
-    componentSubtitle: "Component",
-    status: "released",
-  },
-};
-
-export const AvatarDefault = (args) => <Avatar {...args} />;
-
-AvatarDefault.args = {
-  children: "Max Mustermann",
-  image:
-    "https://www.wfp.org/sites/default/files/styles/page_accordion/public/images/ourwork_humanitarian.jpg?itok=R0ymBwxH",
-};