@ainias42/react-bootstrap-mobile 0.1.7

package/src/Components/TopBar/TopBar.tsx

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { ComponentType, ReactElement, useCallback, useMemo, useRef, useState } from 'react';
+import { Container } from '../Layout/Container';
+import { TopBarButton } from './TopBarButton';
+import { RbmComponentProps } from '../RbmComponentProps';
+import { ActionSheet, ActionSheetAction } from '../ActionSheet/ActionSheet';
+import { Icon, IconSource } from '../Icon/Icon';
+import { MoreButton } from './MoreButton';
+
+import styles from './topBar.scss';
+
+import { withMemo } from '../../helper/withMemo';
+import classNames from 'classnames';
+import { Block } from '../Layout/Block';
+import { Text } from '../Text/Text';
+import { Flex } from '../Layout/Flex';
+import { Inline } from '../Layout/Inline';
+import { View } from '../Layout/View';
+
+export type TopBarActionButtonType = {
+    title: string;
+    icon?: IconSource;
+    action: () => void;
+    disabled?: boolean;
+    key?: string;
+};
+
+export type TopBarComponentButtonType = Partial<TopBarActionButtonType> & {
+    component: ComponentType<Record<string, any>>;
+};
+
+export type TopBarButtonType = TopBarComponentButtonType | TopBarActionButtonType;
+
+export type TopBarProps = RbmComponentProps<{
+    title?: string;
+    leftButtons?: TopBarButtonType[];
+    rightButtons?: TopBarButtonType[];
+    hiddenButtons?: TopBarButtonType[];
+    transparent?: boolean;
+    drawBehind?: boolean;
+}>;
+
+function getButtonComponents(buttons: TopBarButtonType[]) {
+    return buttons.map((button, index) => {
+        const key = button.key ?? String(index);
+        if ('component' in button) {
+            const Component = button.component;
+            return <Component {...button} key={key} onClick={button.action} />;
+        }
+        let child: string | ReactElement | undefined = button.title;
+        if (button.icon) {
+            child = <Icon icon={button.icon} />;
+        }
+        return (
+            <TopBarButton key={key} onClick={button.action} disabled={button.disabled} __allowChildren="all">
+                {child}
+            </TopBarButton>
+        );
+    });
+}
+
+function TopBar({
+    title = '',
+    rightButtons = [],
+    leftButtons = [],
+    hiddenButtons = [],
+    className,
+    transparent = false,
+    drawBehind = false,
+    ...rbmProps
+}: TopBarProps) {
+    const [isHiddenMenuOpen, setIsHiddenMenuOpen] = useState(false);
+
+    if (isHiddenMenuOpen) {
+        transparent = false;
+    }
+
+    const actionSheetRef = useRef<React.ElementRef<typeof ActionSheet>>(null);
+
+    const toggleHiddenMenu = useCallback(() => {
+        setIsHiddenMenuOpen((isOpen) => {
+            if (isOpen) {
+                actionSheetRef.current?.hide();
+                return false;
+            }
+            actionSheetRef.current?.show();
+            return true;
+        });
+    }, [actionSheetRef]);
+
+    const onActionSheetClose = useCallback(() => setIsHiddenMenuOpen(false), [setIsHiddenMenuOpen]);
+
+    rightButtons = useMemo(() => {
+        if (hiddenButtons.length > 0) {
+            return [
+                ...rightButtons,
+                {
+                    title: '...',
+                    component: MoreButton,
+                    action: toggleHiddenMenu,
+                },
+            ];
+        }
+        return rightButtons;
+    }, [rightButtons, hiddenButtons.length, toggleHiddenMenu]);
+
+    hiddenButtons = useMemo(
+        () =>
+            hiddenButtons.map((button) => ({
+                ...button,
+                action: () => {
+                    setIsHiddenMenuOpen(false);
+                    actionSheetRef.current?.hide();
+                    if (button.action) {
+                        button.action();
+                    }
+                },
+            })),
+        [hiddenButtons]
+    );
+
+    const rightButtonComponents = getButtonComponents(rightButtons);
+    const leftButtonComponents = getButtonComponents(leftButtons);
+    const hiddenButtonComponents = getButtonComponents(hiddenButtons.map(({ icon: _, ...button }) => button));
+
+    const actions: ActionSheetAction<any>[] = useMemo(
+        () =>
+            hiddenButtons.map((button) => ({
+                action: button.action!,
+                name: button.title!,
+                icon: button.icon,
+            })),
+        [hiddenButtons]
+    );
+
+    return (
+        <nav
+            {...rbmProps}
+            className={classNames(
+                styles.topBar,
+                {
+                    [styles.transparent]: transparent,
+                    [styles.drawBehind]: drawBehind,
+                },
+                className
+            )}
+        >
+            <Container fluid="xxl" className={styles.container}>
+                <Flex grow={true} className={classNames(styles.buttonContainer, styles.left)} horizontal={true}>
+                    {leftButtonComponents}
+                </Flex>
+                <Block className={styles.titleContainer}>
+                    <Text className={styles.title}>{title}</Text>
+                </Block>
+                <Flex grow={true} className={classNames(styles.buttonContainer, styles.right)} horizontal={true}>
+                    {rightButtonComponents}
+                </Flex>
+                {hiddenButtons.length > 0 && isHiddenMenuOpen ? (
+                    <Inline className={styles.hiddenContainer}>
+                        <View aria-hidden={true} className={styles.hiddenCloseCurtain} onClick={toggleHiddenMenu} />
+                        <View className={styles.hiddenMenu}>{hiddenButtonComponents}</View>
+                    </Inline>
+                ) : null}
+                <ActionSheet
+                    actions={actions}
+                    ref={actionSheetRef}
+                    className={styles.hiddenActionMenu}
+                    onClose={onActionSheetClose}
+                />
+            </Container>
+        </nav>
+    );
+}
+
+const TopBarMemo = withMemo(TopBar, styles);
+export { TopBarMemo as TopBar };

package/src/Components/TopBar/TopBarButton.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { useCallback } from 'react';
+import { RbmComponentProps } from '../RbmComponentProps';
+
+import styles from './topBar.scss';
+import classNames from 'classnames';
+import { withMemo } from '../../helper/withMemo';
+
+export type TopBarButtonProps = RbmComponentProps<{
+    disabled?: boolean;
+    onClick?: () => void;
+}>;
+
+function TopBarButton({ disabled = false, onClick, className, children, ...rbmProps }: TopBarButtonProps) {
+    const cb = useCallback(() => (onClick ? onClick() : null), [onClick]);
+    return (
+        <a
+            role="button"
+            {...rbmProps}
+            onClick={cb}
+            className={classNames(styles.button, { [styles.disabled]: disabled }, className)}
+        >
+            {children}
+        </a>
+    );
+}
+
+const TopBarButtonMemo = withMemo(TopBarButton, styles);
+export { TopBarButtonMemo as TopBarButton };

package/src/Components/TopBar/topBar.scss

@@ -0,0 +1,124 @@
+@import "../../scss/variables";
+@import "../../scss/designMixin";
+
+.topBar {
+  // navbar-expand
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+
+  // navbar
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+
+  background: white;
+  height: 56px;
+
+  .container {
+    display: flex;
+    flex-wrap: inherit;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .button {
+    display: block;
+    padding: 0.5rem 1rem;
+    color: #0d3efd; // TODO change color
+    text-decoration: none;
+    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
+
+    &.disabled {
+      color: #6c757d; // TODO change color
+      pointer-events: none;
+      cursor: default;
+    }
+  }
+
+  &.transparent {
+    opacity: 0.65;
+    z-index: 1;
+  }
+
+  &.drawBehind {
+    position: absolute;
+    left: 0;
+    right: 0;
+  }
+
+  .titleContainer {
+    overflow: hidden;
+
+    .title {
+      color: rgba(0, 0, 0, 0.55); // TODO Change color
+      padding-bottom: 0.5rem;
+      padding-top: 0.5rem;
+
+      white-space: nowrap;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  .buttonContainer {
+    white-space: nowrap;
+    display: flex;
+    flex: 1;
+    min-width: -webkit-min-content;
+
+    &.right {
+      justify-content: flex-end;
+    }
+
+    &.left {
+      justify-content: flex-start;
+    }
+  }
+
+  .hiddenContainer {
+    position: relative;
+
+    .hiddenCloseCurtain {
+      position: fixed;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 998;
+    }
+
+    .hiddenMenu {
+      position: absolute;
+      right: 0;
+      white-space: nowrap;
+      display: flex;
+      min-width: -webkit-min-content;
+      justify-content: flex-start;
+      flex-direction: column;
+      z-index: 999;
+      background-color: white;
+      border: 1px solid var(--border-strong);
+    }
+  }
+
+  @include design($material) {
+    box-shadow: 0 1px 5px rgb(0 0 0 / 30%);
+
+    .hiddenActionMenu {
+      display: none;
+    }
+  }
+  @include design($flat) {
+    background-size: 100% 1px;
+    background-repeat: no-repeat;
+    background-position: bottom;
+    background-image: linear-gradient(0deg, #b2b2b2, #b2b2b2 100%);
+
+    .hiddenContainer {
+      display: none;
+    }
+  }
+}

package/src/StyleProvider.ts

@@ -0,0 +1,4 @@
+import StyleContext from 'isomorphic-style-loader/StyleContext';
+
+const provider = StyleContext.Provider;
+export { provider as StyleProvider };

package/src/TypeHelpers.ts

@@ -0,0 +1,4 @@
+export type Override<T1, T2> = Omit<T1, keyof T2> & T2;
+export type Conditional<T1, T2> = Partial<T1> | (T1 & T2);
+export type ValueOf<T> = T[keyof T];
+export type Recursive<T> = T | T[] | Recursive<T>[];

package/src/WindowContext/WindowContext.ts

@@ -0,0 +1,8 @@
+import React, { useContext } from 'react';
+
+export const WindowContext = React.createContext<Window | undefined>(undefined);
+WindowContext.displayName = 'WindowContext';
+
+export function useWindow() {
+    return useContext(WindowContext) ?? (typeof window !== 'undefined' ? window : undefined);
+}

package/src/WrongChildError.ts

@@ -0,0 +1,19 @@
+export class WrongChildError extends Error {
+    public childValue: any;
+
+    constructor(expectedType: string, gotType: string, child: any, component: string) {
+        const value =
+            typeof child === 'object' && child !== null
+                ? `${child.toString()} - (${
+                      child.displayName ?? child.name ?? child.type?.displayName ?? child.type?.name ?? child.type
+                  })`
+                : child;
+        super(
+            `Expected Children of type '${expectedType}' but got type '${gotType}' in component ${component}. Value of child is '${value}'`
+        );
+        this.name = 'WrongChildError';
+        this.childValue = child;
+
+        console.log('LOG-d stack', this.stack);
+    }
+}

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="styled-jsx" />

package/src/helper/Characters.ts

@@ -0,0 +1,5 @@
+export const Characters = {
+    NBSP: '\u00A0',
+    PATH_DELIMITER: '/',
+    MIDDLE_DOT: '\u00B7',
+};

package/src/helper/DistributiveOmit.ts

@@ -0,0 +1 @@
+export type DistributiveOmit<T, K extends keyof T> = T extends any ? Omit<T, K> : never;

package/src/helper/EmptyProps.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line @typescript-eslint/ban-types
+export type EmptyProps = {};

package/src/helper/memoComparator.ts

@@ -0,0 +1,18 @@
+import { JsonHelper } from '@ainias42/js-helper';
+
+export function memoComparator(prevProps: Readonly<any>, nextProps: Readonly<any>) {
+    const keysPrev = Object.keys(prevProps);
+    const keysNext = Object.keys(nextProps);
+
+    if (keysPrev.length !== keysNext.length) {
+        return false;
+    }
+
+    return keysPrev.every((key) => {
+        if (key === 'style') {
+            return JsonHelper.deepEqual(prevProps[key], nextProps[key]);
+        }
+
+        return prevProps[key] === nextProps[key];
+    });
+}

package/src/helper/nonEmptyString.ts

@@ -0,0 +1,8 @@
+import { Characters } from './Characters';
+
+export function nonEmptyString(str: string | undefined | null, other = Characters.NBSP) {
+    if (!str) {
+        return other;
+    }
+    return str;
+}

package/src/helper/withForwardRef.ts

@@ -0,0 +1,28 @@
+import React, { ForwardedRef, ForwardRefRenderFunction, PropsWithoutRef, ReactElement, RefAttributes } from 'react';
+import withStyles from 'isomorphic-style-loader/withStyles';
+import { RESTRICT_CHILDREN, withRestrictedChildren } from './withRestrictedChildren';
+import { memoComparator } from './memoComparator';
+
+export interface RefComponent<PropTypes, ForwardedRefType> {
+    (props: PropsWithoutRef<PropTypes> & RefAttributes<ForwardedRefType>): ReactElement | null;
+
+    displayName?: string | undefined;
+}
+
+export function withForwardRef<PropTypes, ForwardedRefType>(
+    component: ForwardRefRenderFunction<ForwardedRefType, PropTypes>,
+    styles?: any,
+    defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']
+) {
+    const forwarded = React.forwardRef(component);
+    forwarded.displayName = component.displayName ?? component.name;
+    const forwardedComp = React.forwardRef(withRestrictedChildren(forwarded, defaultAllowChildren));
+    const c: (props: PropTypes, ref: ForwardedRef<ForwardedRefType>) => ReactElement = styles
+        ? withStyles(styles)(forwardedComp)
+        : forwardedComp;
+
+    const memoizedComponent = React.memo(c, memoComparator) as RefComponent<PropTypes, ForwardedRefType>;
+    memoizedComponent.displayName = `Memoized-Forwarded(${component.displayName || component.name})`;
+
+    return memoizedComponent;
+}

package/src/helper/withMemo.ts

@@ -0,0 +1,16 @@
+import React, { ComponentType } from 'react';
+import withStyles from 'isomorphic-style-loader/withStyles';
+import { RESTRICT_CHILDREN, withRestrictedChildren } from './withRestrictedChildren';
+import { memoComparator } from './memoComparator';
+
+export function withMemo<C extends ComponentType<any>>(
+    component: C,
+    styles?: any,
+    defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']
+) {
+    const withNoStrings = withRestrictedChildren(component, defaultAllowChildren);
+    const c = styles ? withStyles(styles)(withNoStrings) : withNoStrings;
+    const memoizedComponent = React.memo(c, memoComparator) as unknown as C;
+    memoizedComponent.displayName = `Memoized(${component.displayName || component.name})`;
+    return memoizedComponent;
+}

package/src/helper/withRenderBrowserOnly.tsx

@@ -0,0 +1,30 @@
+import React, { ComponentType, ForwardedRef, useEffect, useState } from 'react';
+
+export function withRenderBrowserOnly<C extends ComponentType<any>>(Component: C) {
+    type RefType = React.ComponentRef<C>;
+    type Props = React.ComponentProps<C>;
+
+    const displayName = `WithRenderBrowserOnly(${Component.displayName || Component.name})`;
+
+    const HocComponent = ({ children, ...props }: Props, ref?: ForwardedRef<RefType>) => {
+        const [isBrowser, setIsBrowser] = useState(false);
+
+        useEffect(() => setIsBrowser(true), []);
+        if (!isBrowser) {
+            return null;
+        }
+
+        const newProps: Record<string, any> = props;
+        if (ref && Object.keys(ref).length > 0) {
+            newProps.ref = ref;
+        }
+
+        return (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            <Component {...(newProps as Props)}>{children}</Component>
+        );
+    };
+    HocComponent.displayName = displayName;
+    return HocComponent as C;
+}

package/src/helper/withRestrictedChildren.tsx

@@ -0,0 +1,57 @@
+import React, { ComponentType, ForwardedRef, ReactElement } from 'react';
+import { RbmComponentProps } from '../Components/RbmComponentProps';
+import { WrongChildError } from '../WrongChildError';
+
+export const RESTRICT_CHILDREN = {
+    allowChildren: undefined as undefined | 'all' | 'html' | 'text',
+};
+
+export function withRestrictedChildren<C extends ComponentType<RbmComponentProps<Record<string, any>>>>(
+    Component: C,
+    defaultAllowChildren?: typeof RESTRICT_CHILDREN['allowChildren']
+) {
+    type RefType = React.ComponentRef<C>;
+    type Props = React.ComponentProps<C>;
+
+    const displayName = `WithRestrictedChildren(${Component.displayName || Component.name})`;
+
+    const hocComponent = (
+        { children, __allowChildren = defaultAllowChildren ?? RESTRICT_CHILDREN.allowChildren, ...otherProps }: Props,
+        ref?: ForwardedRef<RefType>
+    ) => {
+        if (__allowChildren !== 'all') {
+            if (__allowChildren !== 'html') {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                React.Children.forEach(children, (c) => {
+                    if (c && typeof c === 'object' && 'type' in c && typeof c.type === 'string') {
+                        throw new WrongChildError('No HTML Elements', 'HTML Elements', c, displayName);
+                    }
+                });
+            }
+            if (__allowChildren !== 'text') {
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                React.Children.forEach(children, (c) => {
+                    if (typeof c === 'string') {
+                        throw new WrongChildError('Not String', 'string', c, displayName);
+                    }
+                });
+            }
+        }
+
+        const newProps: Record<string, any> = otherProps;
+
+        if ((ref && Object.keys(ref).length > 0) || typeof ref === 'function') {
+            newProps.ref = ref;
+        }
+
+        return (
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            <Component {...(newProps as Props)}>{children}</Component>
+        );
+    };
+    hocComponent.displayName = displayName;
+    return hocComponent as (props: Props, ref: ForwardedRef<RefType>) => ReactElement;
+}

package/src/scss/_animations.scss

@@ -0,0 +1,46 @@
+@keyframes material-new-site {
+  0% {
+    transform: translate(0, 100%);
+    z-index: 1;
+  }
+  100% {
+    transform: translate(0, 0);
+    z-index: 1;
+  }
+}
+
+@keyframes flat-new-site {
+  0% {
+    transform: translate(100%, 0);
+    z-index: 1;
+  }
+  100% {
+    transform: translate(0, 0);
+    z-index: 1;
+  }
+}
+
+.animation-new-site {
+  background: green;
+  @include design($material) {
+    animation: material-new-site;
+    animation-duration: $animationDurationMaterial;
+  }
+  @include design($flat) {
+    animation: flat-new-site;
+    animation-duration: $animationDurationMaterial;
+  }
+}
+
+.animation-end-site {
+  @include design($material) {
+    animation: material-new-site;
+    animation-duration: $animationDurationMaterial;
+    animation-direction: reverse;
+  }
+  @include design($flat) {
+    animation: flat-new-site;
+    animation-duration: $animationDurationMaterial;
+    animation-direction: reverse;
+  }
+}

package/src/scss/_baseClasses.scss

@@ -0,0 +1,27 @@
+.full-height {
+  height: 100%;
+}
+
+.full-min-height {
+  min-height: 100%;
+}
+
+.scrollable {
+  overflow-y: auto;
+}
+
+.full-width {
+  width: 100%;
+}
+
+.flat-hidden {
+  @include design($flat) {
+    display: none;
+  }
+}
+
+.material-hidden {
+  @include design($material) {
+    display: none;
+  }
+}

package/src/scss/_colors.scss

@@ -0,0 +1,13 @@
+@include design($material) {
+  --flavor-accent: #37474f;
+  --flavor-focus: var(--flavor-accent);
+}
+
+:root {
+  --border-light: #cecece;
+  --border-strong: #717171;
+}
+
+@include design($flat) {
+  --flavor-accent: #0076ff;
+}

package/src/scss/_default.scss

@@ -0,0 +1,17 @@
+* {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+}
+
+@include design($material) {
+  * {
+    font-family: "Roboto", "Noto", sans-serif;
+  }
+}
+
+@include design($flat) {
+  * {
+    font-family: -apple-system, "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
+  }
+}

package/src/scss/_designMixin.scss

@@ -0,0 +1,13 @@
+@use 'sass:selector';
+
+@mixin design($designName) {
+  @if & {
+    @at-root #{selector.nest(':global(.'+$designName+")", &)} {
+      @content
+    }
+  } @else {
+    :global(.#{$designName}) {
+      @content
+    }
+  }
+}