@websolutespa/bom-mixer-ui 0.4.0 → 0.4.1

package/CHANGELOG.md

@@ -1,44 +1,50 @@
-# @websolutespa/bom-mixer-ui
-
-## 0.4.0
-
-### Minor Changes
-
-- Added: splat routes.
-- Added: variants.
-
-## 0.3.0
-
-### Minor Changes
-
-- Added: @websolutespa/bom-core.
-
-## 0.2.0
-
-### Minor Changes
-
-- Modified: ITheme, LazyLoader.
-
-## 0.1.0
-
-### Minor Changes
-
-- mock refactor.
-
-## 0.0.3
-
-### Patch Changes
-
-- Modified: assets.
-
-## 0.0.2
-
-### Patch Changes
-
-- Modified: assets.
-
-## 0.0.1
-
-### Patch Changes
-
-- Added: first release.
+# @websolutespa/bom-mixer-ui
+
+## 0.4.1
+
+### Patch Changes
+
+- Added: source files.
+
+## 0.4.0
+
+### Minor Changes
+
+- Added: splat routes.
+- Added: variants.
+
+## 0.3.0
+
+### Minor Changes
+
+- Added: @websolutespa/bom-core.
+
+## 0.2.0
+
+### Minor Changes
+
+- Modified: ITheme, LazyLoader.
+
+## 0.1.0
+
+### Minor Changes
+
+- mock refactor.
+
+## 0.0.3
+
+### Patch Changes
+
+- Modified: assets.
+
+## 0.0.2
+
+### Patch Changes
+
+- Modified: assets.
+
+## 0.0.1
+
+### Patch Changes
+
+- Added: first release.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@websolutespa/bom-mixer-ui",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "description": "Mixer UI module of the BOM Repository",
   "keywords": [
     "bom",
@@ -69,7 +69,7 @@
   "sideEffects": false,
   "prepack": {
     "types": "./dist/types/index.d.ts",
-    "main": "./dist/cjs/index.js",
+    "main": "./dist/esm/index.js",
     "module": "./dist/esm/index.js",
     "source": "./src/index.ts"
   },
@@ -78,7 +78,7 @@
     "main": "./src/index.ts"
   },
   "types": "./dist/types/index.d.ts",
-  "main": "./dist/cjs/index.js",
+  "main": "./dist/esm/index.js",
   "module": "./dist/esm/index.js",
   "source": "./src/index.ts"
 }

package/src/__tests/example.test.ts

@@ -0,0 +1,8 @@
+import '@testing-library/jest-dom';
+
+describe('Example', () => {
+  it('passes', async () => {
+    const value = 'test';
+    expect(value).toEqual(value);
+  });
+});

package/src/components/accordion/accordion-context.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+
+const defaultContext = {
+  values: [],
+};
+
+export type AccordionConfig = {
+  values: Array<number>;
+  updateValues?: (currentIndex: number, nextState: boolean) => unknown;
+};
+
+export const AccordionContext = React.createContext<AccordionConfig>(defaultContext);
+
+export const useAccordionContext = (): AccordionConfig => React.useContext<AccordionConfig>(AccordionContext);

package/src/components/accordion/accordion-group.tsx

@@ -0,0 +1,82 @@
+import { getClassNames } from '@websolutespa/bom-core';
+import { useCurrentState } from '@websolutespa/bom-mixer-hooks';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+import { setChildrenIndex } from '../popover/popover-collections';
+import { Accordion } from './accordion';
+import { AccordionConfig, AccordionContext } from './accordion-context';
+
+type Props = {
+  accordion?: boolean;
+  className?: string;
+};
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+
+export type AccordionGroupProps = Props & NativeAttrs;
+
+const StyledAccordionGroup = styled.div`
+  /*
+  width: auto;
+  height: auto;
+  padding: 0 0.6rem;
+  margin: 0;
+  */
+
+  /*
+  & > :global(div + div) {
+    border-top: none;
+  }
+  */
+`;
+
+export const AccordionGroup: React.FC<React.PropsWithChildren<AccordionGroupProps>> = ({
+  accordion = true,
+  className = '',
+  children,
+  ...props
+}: React.PropsWithChildren<AccordionGroupProps>) => {
+
+  const [state, setState, stateRef] = useCurrentState<Array<number>>([]);
+
+  const updateValues = (index: number, visible: boolean) => {
+    const hasChild = stateRef.current.find(x => x === index);
+
+    if (accordion) {
+      if (visible) {
+        return setState([index]);
+      }
+      return setState([]);
+    }
+
+    if (visible) {
+      // In a few cases, the user will set Accordion Component state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+      /* istanbul ignore if */
+      if (hasChild) {
+        return;
+      }
+      return setState([...stateRef.current, index]);
+    }
+    setState(stateRef.current.filter(item => item !== index));
+  };
+
+  const initialValue = useMemo<AccordionConfig>(() => ({
+    values: state,
+    updateValues,
+  }), [state.join(',')]);
+
+  const indexedChildren = useMemo(() => setChildrenIndex(children, [Accordion]), [children]);
+
+  const classNames = getClassNames('accordion-group', className);
+
+  return (
+    <AccordionContext.Provider value={initialValue}>
+      <StyledAccordionGroup className={classNames} {...props}>
+        {indexedChildren}
+      </StyledAccordionGroup>
+    </AccordionContext.Provider>
+  );
+};
+
+AccordionGroup.displayName = 'AccordionGroup';

package/src/components/accordion/accordion-icon.tsx

@@ -0,0 +1,37 @@
+import { getClassNames } from '@websolutespa/bom-core';
+import React, { SVGProps } from 'react';
+import styled from 'styled-components';
+
+type Props = {
+  active?: boolean;
+};
+
+const DownArrowSvg = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...props}>
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+);
+
+const DownArrow = styled(DownArrowSvg)`
+  flex-shrink: 0;
+  width: 1em;
+  height: 1em;
+  margin-left: -2.8rem;
+  align-self: center;
+  pointer-events: none;
+  transition: all 200ms ease;
+  transition: color 200ms ease, transform 200ms ease;
+
+  &.active {
+    transform: rotate(180deg);
+  }
+`;
+
+const AccordionIcon_: React.FC<Props> = ({ active }) => {
+  const classNames = getClassNames({ active });
+  return (
+    <DownArrow className={classNames} />
+  );
+};
+
+export const AccordionIcon = React.memo(AccordionIcon_);

package/src/components/accordion/accordion.tsx

@@ -0,0 +1,132 @@
+import { consoleWarn, getClassNames, withSchema } from '@websolutespa/bom-core';
+import { useCurrentState } from '@websolutespa/bom-mixer-hooks';
+import React, { useEffect } from 'react';
+import styled from 'styled-components';
+import { Expand } from '../../components';
+import { useAccordionContext } from './accordion-context';
+import { AccordionGroup } from './accordion-group';
+import { AccordionIcon } from './accordion-icon';
+
+type Props = {
+  title: React.ReactNode | string
+  subtitle?: React.ReactNode | string
+  initialVisible?: boolean
+  shadow?: boolean
+  className?: string
+  index?: number
+};
+
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+
+export type AccordionProps = Props & NativeAttrs;
+
+const StyledAccordion = styled.div`
+  width: auto;
+  height: auto;
+  margin: 0;
+  padding: 1.2rem 0;
+  border-top: 1px solid var(--color-neutral-200);
+  border-bottom: 1px solid var(--color-neutral-200);
+
+  .shadow {
+    box-shadow: var(--shadow-sm);
+    border: none;
+    border-radius: var(--border-radius);
+    padding: var(--grid-column-gap);
+  }
+
+  .view {
+    outline: none;
+    cursor: pointer;
+  }
+
+  .title {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    // color: var(--color-neutral-900);
+    user-select: none;
+    /*
+    & > span {
+      margin: 0;
+      font-size: 1.5em;
+    }
+    */
+  }
+
+  .subtitle {
+    // color: var(--color-primary-500);
+    margin: 0;
+
+    & > :global(*) {
+      margin: 0;
+    }
+  }
+
+  .content {
+    font-size: inherit;
+    line-height: 1.6em;
+    padding: 1.2rem 0;
+
+    & > :global(*:first-child) {
+      margin-top: 0;
+    }
+
+    & > :global(*:last-child) {
+      margin-bottom: 0;
+    }
+  }
+`;
+
+const AccordionBase: React.FC<React.PropsWithChildren<AccordionProps>> = ({
+  className = '',
+  shadow = false,
+  initialVisible = false,
+  index = -1,
+  children,
+  title,
+  subtitle,
+  ...props
+}: React.PropsWithChildren<AccordionProps>) => {
+
+  const { values, updateValues } = useAccordionContext();
+
+  const [visible, setVisible, visibleRef] = useCurrentState<boolean>(initialVisible);
+
+  if (!title) {
+    consoleWarn('"title" is required.', 'Accordion');
+  }
+
+  useEffect(() => {
+    if (!values.length) {
+      return;
+    }
+    const visible = !!values.find(item => item === index);
+    setVisible(visible);
+  }, [values.join(',')]);
+
+  const onClick = () => {
+    const visible = !visibleRef.current;
+    setVisible(visible);
+    updateValues && updateValues(index, visible);
+  };
+
+  const classNames = getClassNames('accordion', { shadow }, className);
+
+  return (
+    <StyledAccordion className={classNames} {...props}>
+      <div className="view" role="button" onClick={onClick}>
+        <div className="title">
+          <span>{title}</span> <AccordionIcon active={visible} />
+        </div>
+        {subtitle && <div className="subtitle">{subtitle}</div>}
+      </div>
+      <Expand isExpanded={visible}>{children}</Expand>
+    </StyledAccordion>
+  );
+};
+
+export const Accordion = withSchema(AccordionBase, {
+  Group: AccordionGroup,
+  displayName: 'Accordion',
+});

package/src/components/backdrop/backdrop.tsx

@@ -0,0 +1,156 @@
+import { getClassNames } from '@websolutespa/bom-core';
+import { useCurrentState } from '@websolutespa/bom-mixer-hooks';
+import React, { MouseEvent } from 'react';
+import styled from 'styled-components';
+import { UIComponentProps } from '../../components/types';
+import { Transition } from '../transition/transition';
+
+type Props = {
+  visible?: boolean
+  width?: string
+  onClick?: (event: MouseEvent<HTMLElement>) => void
+  onContentClick?: (event: MouseEvent<HTMLElement>) => void
+  backdropClassName?: string
+  positionClassName?: string
+  layerClassName?: string
+};
+
+export type BackdropProps = UIComponentProps<Props>;
+
+const defaultProps = {
+  onClick: () => { },
+  visible: false,
+  onContentClick: () => { },
+  backdropClassName: '',
+  positionClassName: '',
+  layerClassName: '',
+};
+
+const StyledBackdrop = styled.div`
+  box-sizing: border-box;
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: auto;
+  z-index: 2000;
+  -webkit-overflow-scrolling: touch;
+  text-align: center;
+
+  &:before {
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  .position {
+    position: relative;
+    z-index: 2001;
+    outline: none;
+    max-width: 90%;
+    margin: 20px auto;
+    vertical-align: middle;
+    display: inline-block;
+  }
+
+  .position--full {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    top: 0;
+    margin: 0;
+    max-width: 100%;
+    width: 100%;
+    height: 100%;
+  }
+
+  .layer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
+    z-index: 2000;
+    opacity: var(--backdrop-opacity);
+  }
+
+  &.backdrop-wrapper-enter .layer {
+    opacity: 0;
+  }
+
+  &.backdrop-wrapper-enter-active .layer {
+    opacity: var(--backdrop-opacity);
+  }
+
+  &.backdrop-wrapper-leave .layer {
+    opacity: var(--backdrop-opacity);
+  }
+
+  &.backdrop-wrapper-leave-active .layer {
+    opacity: 0;
+  }
+`;
+
+export const Backdrop: React.FC<React.PropsWithChildren<BackdropProps | any>> = React.memo(
+  ({
+    children,
+    onClick,
+    visible,
+    width,
+    onContentClick,
+    backdropClassName,
+    layerClassName,
+    positionClassName,
+    ...props
+  }: React.PropsWithChildren<BackdropProps> & typeof defaultProps) => { // !!! any
+
+    const [, setIsContentMouseDown, IsContentMouseDownRef] = useCurrentState(false);
+
+    const clickHandler = (event: MouseEvent<HTMLElement>) => {
+      if (IsContentMouseDownRef.current) {
+        return;
+      }
+      if (onClick) {
+        onClick(event);
+      }
+    };
+
+    const mouseUpHandler = () => {
+      if (!IsContentMouseDownRef.current) return;
+      const timer = setTimeout(() => {
+        setIsContentMouseDown(false);
+        clearTimeout(timer);
+      }, 0);
+    };
+
+    const backdropClassNames = getClassNames('backdrop', backdropClassName);
+    const layerClassNames = getClassNames('layer', layerClassName);
+    const positionClassNames = getClassNames('position', positionClassName);
+
+    // !!! todo backdrop position styled component with css responsive.
+
+    return (
+      <Transition name="backdrop-wrapper" visible={visible} clearTime={300}>
+        <StyledBackdrop className={backdropClassNames} onClick={clickHandler} onMouseUp={mouseUpHandler}
+          {...props}>
+          <div className={layerClassNames} />
+          <div className={positionClassNames} style={{ width }} onClick={onContentClick} onMouseDown={() => setIsContentMouseDown(true)}>
+            {children}
+          </div>
+        </StyledBackdrop>
+      </Transition>
+    );
+  },
+);
+
+Backdrop.defaultProps = defaultProps;
+Backdrop.displayName = 'Backdrop';

package/src/components/background/background.tsx

@@ -0,0 +1,35 @@
+import styled from 'styled-components';
+import { UIStyledComponentProps } from '../../components/types';
+import { getCssResponsive } from '../../components/utils';
+
+type Props = {
+};
+
+export type BackgroundProps = UIStyledComponentProps<Props>;
+
+export const Background = styled.div<BackgroundProps>`
+  position: absolute;
+  top: 0;
+  left: 0;
+  // background: var(--color-neutral-900);
+
+  &, & > * {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & > * > * {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+
+  ${props => getCssResponsive(props)}
+`;
+
+Background.defaultProps = {
+  className: 'background',
+};

package/src/components/badge/badge.tsx

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+import { UIStyledComponentProps } from '../types';
+import { getCssResponsive } from '../utils';
+
+type Props = {
+};
+
+export type BadgeProps = UIStyledComponentProps<Props>;
+
+export const Badge = styled.div<BadgeProps>`
+  display: inline-block;
+  line-height: 1;
+  padding: 0.3em 0.5em;
+  border-radius: 0.65em;
+  font-size: 0.7rem;
+  min-width: 1.2em;
+  text-align: center;
+  background: var(--color-neutral-700);
+  color: var(--color-neutral-100);
+  ${props => getCssResponsive(props)}
+`;

package/src/components/box/box.tsx

@@ -0,0 +1,12 @@
+import styled from 'styled-components';
+import { UIStyledComponentProps } from '../../components/types';
+import { getCssResponsive } from '../../components/utils';
+
+type Props = {
+};
+
+export type BoxProps = UIStyledComponentProps<Props>;
+
+export const Box = styled.div<BoxProps>`
+  ${props => getCssResponsive(props)}
+`;

package/src/components/breadcrumb/breadcrumb-item.tsx

@@ -0,0 +1,53 @@
+import { getClassNames } from '@websolutespa/bom-core';
+import React, { ReactNode, useMemo } from 'react';
+import { Link, LinkBaseProps } from '../link/link';
+import { pickChild } from '../popover/popover-collections';
+import { BreadcrumbSeparator } from './breadcrumb-separator';
+
+type Props = {
+  href?: string
+  nextLink?: boolean
+  onClick?: (event: React.MouseEvent) => void
+  className?: string,
+  children?: ReactNode,
+};
+
+type NativeAttrs = Omit<React.AnchorHTMLAttributes<any>, keyof Props>;
+
+type NativeLinkAttrs = Omit<NativeAttrs, keyof LinkBaseProps>;
+
+export type BreadcrumbItemProps = Props & NativeLinkAttrs;
+
+export const BreadcrumbItem = React.forwardRef<HTMLAnchorElement, React.PropsWithChildren<BreadcrumbItemProps>>(({
+  nextLink = false,
+  className = '',
+  href,
+  onClick,
+  children,
+  ...props
+}: BreadcrumbItemProps, ref: React.Ref<HTMLAnchorElement>) => {
+  const isLink = useMemo(() => href !== undefined || nextLink, [href, nextLink]);
+  const [withoutSepChildren] = pickChild(children, BreadcrumbSeparator);
+
+  const clickHandler = (event: React.MouseEvent) => {
+    onClick && onClick(event);
+  };
+
+  const classNames = getClassNames('breadcrumb-item', className);
+
+  if (!isLink) {
+    return (
+      <span className={classNames} onClick={clickHandler}>
+        {withoutSepChildren}
+      </span>
+    );
+  }
+
+  return (
+    <Link className={classNames} href={href} onClick={clickHandler} ref={ref} {...props}>
+      {withoutSepChildren}
+    </Link>
+  );
+});
+
+BreadcrumbItem.displayName = 'BreadcrumbItem';