@twreporter/react-components 9.4.4 → 9.5.0-rc.0

package/lib/side-bar/index.d.ts

@@ -0,0 +1,81 @@
+export default decorateSideBar;
+export function AnchorWrapper({ children }: {
+    children: any;
+}): any;
+export namespace AnchorWrapper {
+    namespace defaultProps {
+        let anchorLabel: string;
+        let showAnchor: boolean;
+    }
+    namespace propTypes {
+        export let anchorId: any;
+        let anchorLabel_1: any;
+        export { anchorLabel_1 as anchorLabel };
+        let showAnchor_1: any;
+        export { showAnchor_1 as showAnchor };
+        export let children: any;
+    }
+}
+/**
+ * `decorateSideBar`
+ * returns a High Order Component adding the side bar functionalities onto `DecoratedComponent`.
+ * It passes props such as `currentAnchorId`, `handleClickAnchor` to the `DecoratedComponent`.
+ * `DecoratedSideBar` will map the anchor ids to the sections which are passed as React children,
+ * `currentAnchorId` indicates which section is in the viewport right now.
+ * `handleClickAnchor` is a function which can be used to scroll to the certain section.
+ *
+ * For example,
+ * ```
+ * // react component to render side bar
+ * const SideBar = ({anchors, currentAnchorId, handleClickAnchor}) => {
+ *  const anchorsJSX = []
+ *  anchors.ForEach((anchor) => {
+ *     anchorsJSX.push(
+ *      <div
+ *        key={anchor.id}
+ *        onClick={(e) => handleClickAnchor(anchor.id, e)}
+ *        style={{color: currentAnchorId === anchor.id ? 'black' : 'white'}}
+ *      >
+ *        {anchor.label}
+ *      </div>
+ *    )
+ *  })
+ *  return (
+ *    <div>
+ *      {anchorsJSX}
+ *    </div>
+ *  )
+ * }
+ *
+ * const DecoratedSideBar = decoratedSideBar(SideBar)
+ *
+ * const SideBarWithContent = () => {
+ *  return (
+ *    <DecoratedSideBar>
+ *      <AnchorWrapper anchorId="section-1" anchorLabel="Section One">
+ *        <SectionOne />
+ *      </AnchorWrapper>
+ *      <AnchorWrapper anchorId="section-2" anchorLabel="Section Two">
+ *        <SectionTwo />
+ *      </AnchorWrapper>
+ *      <AnchorWrapper anchorId="section-3" anchorLabel="Section Three">
+ *        <SectionThree />
+ *      </AnchorWrapper>
+ *    </DecoratedSideBar>
+ *  )
+ * }
+ *
+ *
+ * The above codes will render three sections and side bar on the same page.
+ * When the section, like `SectionTwo`, scrolls into the viewport,
+ * the anchor of that section(`Section Two`) will be black, and others will be white.
+ *
+ * And when user click the anchor, say if `Secetion Two`, the browser will auto scroll to `SectionTwo`,
+ * and anchor `Section Two` will be black.
+ *
+ * ```
+ *
+ * @param {Object} DecoratedComponent A React component wants to have side bar functionality
+ * @returns {Object} A React component with side bar functionalities
+ */
+declare function decorateSideBar(DecoratedComponent: any): any;

package/lib/simple-header/index.d.ts

@@ -0,0 +1,2 @@
+export function SimpleHeader(props: any): JSX.Element;
+export default SimpleHeader;

package/lib/simple-header/simpleHeader.stories.d.ts

@@ -0,0 +1,9 @@
+declare namespace _default {
+    export let title: string;
+    export { SimpleHeader as component };
+}
+export default _default;
+export namespace simpleHeader {
+    let args: {};
+}
+import SimpleHeader from '.';

package/lib/snack-bar/components/snack-bar.d.ts

@@ -0,0 +1,13 @@
+export default SnackBar;
+declare function SnackBar({ text, theme }: {
+    text?: string;
+    theme?: "normal";
+}): JSX.Element;
+declare namespace SnackBar {
+    export namespace propTypes {
+        let text: any;
+        let theme: any;
+    }
+    export { THEME };
+}
+import { THEME } from '@twreporter/core/lib/constants/theme';

package/lib/snack-bar/hooks/use-snack-bar.d.ts

@@ -0,0 +1,9 @@
+export default useSnackBar;
+declare function useSnackBar(): {
+    toastr: ({ text, timeout }: {
+        text?: string;
+        timeout?: number;
+    }) => void;
+    showSnackBar: boolean;
+    snackBarText: string;
+};

package/lib/snack-bar/index.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    export { SnackBar };
+    export { useSnackBar };
+}
+export default _default;
+import SnackBar from './components/snack-bar';
+import useSnackBar from './hooks/use-snack-bar';
+export { SnackBar, useSnackBar };

package/lib/snack-bar/stories/snackBar.stories.d.ts

@@ -0,0 +1,28 @@
+declare namespace _default {
+    export let title: string;
+    export { SnackBar as component };
+    export namespace argTypes {
+        export { THEME_STORYBOOK_ARG_TYPE as theme };
+    }
+}
+export default _default;
+export namespace snackBar {
+    namespace args {
+        let text: string;
+        let theme: "normal";
+    }
+}
+export namespace clickToShow {
+    export function render(props: any): JSX.Element;
+    export namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+    export namespace args_1 {
+        let timeout: number;
+    }
+    export { args_1 as args };
+}
+import SnackBar from '../components/snack-bar';
+import { THEME_STORYBOOK_ARG_TYPE } from '../../storybook/constants';

package/lib/snack-bar/utils/theme.d.ts

@@ -0,0 +1,11 @@
+export function getSnackBarTheme(theme: any): {
+    color: "#404040";
+    bgColor: "#e2e2e2";
+} | {
+    color: "#ffffff";
+    bgColor: "#404040";
+};
+declare namespace _default {
+    export { getSnackBarTheme };
+}
+export default _default;

package/lib/storybook/constants/index.d.ts

@@ -0,0 +1,21 @@
+export namespace BRANCH_STORYBOOK_ARG_TYPE {
+    let defaultValue: string;
+    let options: string[];
+    namespace control {
+        let type: string;
+    }
+}
+export const THEME_STORYBOOK_ARG_TYPE: {
+    defaultValue: any;
+    options: any[];
+    control: {
+        type: string;
+    };
+};
+export const SIZE_STORYBOOK_ARG_TYPE: {
+    defaultValue: any;
+    options: any[];
+    control: {
+        type: string;
+    };
+};

package/lib/storybook/utils/get-enum-arg.d.ts

@@ -0,0 +1,7 @@
+export function getRadioArg(enumObject: any, defaultValue: any): {
+    defaultValue: any;
+    options: any[];
+    control: {
+        type: string;
+    };
+};

package/lib/table-of-contents/index.d.ts

@@ -0,0 +1,200 @@
+declare namespace _default {
+    export { TOCManager as Manager };
+    export namespace React {
+        export { Anchor };
+        export { TableOfContents };
+    }
+}
+export default _default;
+/**
+ *  TOCManager is a bridge between `Anchor` and `TableOfContents`.
+ *  It provides APIs to make them communicate with each others.
+ *  For instances, `TOCManager` provides `Anchor`s for `TableOfContents`,
+ *  hence, `TableOfContents` could know how to render correspoding labels and
+ *  know how to handle those labels clicked(scroll to that `Anchor`).
+ */
+declare class TOCManager {
+    static position: {
+        above: string;
+        below: string;
+        inside: string;
+        invisible: string;
+    };
+    /**
+     *  @constructs
+     *  @param {Object} props
+     *  @param {Anchor[]} [props.anchors=[]] - anchors of table of contents
+     *  @param {Anchor} [props.highlightAnchor=null] - it indicates which anchor is entering the viewport and should be highlighted
+     *  @param {TableOfContents} [props.toc=null] - table of contents
+     *  @param {boolean} [props.toStopAutoUpdateHighlightAnchor=false] - it stops automatically updating highlight anchor
+     */
+    constructor({ anchors, highlightAnchor, toc, toStopAutoUpdateHighlightAnchor, }?: {
+        anchors?: Anchor[];
+        highlightAnchor?: Anchor;
+        toc?: TableOfContents;
+        toStopAutoUpdateHighlightAnchor?: boolean;
+    });
+    _anchors: Anchor[];
+    _highlightAnchor: Anchor;
+    _toc: TableOfContents;
+    _toStopAutoUpdateHighlightAnchor: boolean;
+    /**
+     *  use `Array.concat` to add `Anchor` into array
+     *
+     *  @method
+     *  @param {Anchor} anchor - an instance of `Anchor`
+     *  @returns
+     */
+    addAnchor(anchor: Anchor): void;
+    /**
+     *  Re-render `TableOfContents` if needed.
+     *  Use debounce for optimizing rendering performance.
+     *  @returns
+     */
+    renderTOC: any;
+    /**
+     *  Update highlight anchor.
+     *  Use debounce for optimizing rendering performance.
+     *  @returns
+     */
+    updateHighlightAnchor: any;
+    /**
+     *  This is a setter function.
+     *  It indicates which anchor is entering the viewport
+     *  and should be highlighted in the table of contents.
+     *  @method
+     *  @param {Anchor} anchor - an instance of `Anchor`
+     *  @returns
+     */
+    set highlightAnchor(anchor: Anchor);
+    /**
+     *  This a getter function.
+     *  @method
+     *  @return {Anchor} - the anchor is highlighted
+     */
+    get highlightAnchor(): Anchor;
+    /**
+     *  Sort anchors by the distance to viewport top in ascending order.
+     *  @param {Anchor[]} anchors
+     *  @returns {Anchor[]}
+     */
+    sortAnchorsByViewportTop(anchors: Anchor[]): Anchor[];
+    /**
+     *  Use memoize to improve performance
+     */
+    memoizeSortAnchorsByViewportTop: any;
+    /**
+     *  This is a setter function.
+     *  @method
+     *  @return {undefined}
+     */
+    set anchors(anchors: Anchor[]);
+    /**
+     *  This is a getter function.
+     *  @method
+     *  @returns {Anchor[]}
+     */
+    get anchors(): Anchor[];
+    /**
+     *  This is a setter function.
+     *  @method
+     *  @returns
+     */
+    set toc(toc: TableOfContents);
+    /**
+     *  This is a getter function.
+     *  @method
+     *  @returns {TableOfContents}
+     */
+    get toc(): TableOfContents;
+    /**
+     *  This is a setter function.
+     *  @method
+     *  @returns
+     */
+    set toStopAutoUpdateHighlightAnchor(toStopAutoUpdateHighlightAnchor: boolean);
+    /**
+     *  This is a getter function.
+     *  @method
+     *  @returns {boolean}
+     */
+    get toStopAutoUpdateHighlightAnchor(): boolean;
+}
+declare class Anchor {
+    static propTypes: {
+        className: any;
+        children: any;
+        manager: any;
+        id: any;
+        label: any;
+        bottomOffset: any;
+        topOffset: any;
+    };
+    static defaultProps: {
+        className: string;
+        bottomOffset: string;
+        topOffset: string;
+    };
+    constructor(props: any);
+    _ref: any;
+    getViewportTop: any;
+    handleOnPositionChange: any;
+    currentPosition: string;
+    /**
+     *  @returns {number} - the distance between the top edge of anchor and the top of window
+     */
+    _getViewportTop(): number;
+    /**
+     *  @param {Object} [posObj={}]
+     *  @param {string} [posObj.currentPosition=''] - it could be one of
+     *  Waypoint.below, Waypoint.above, Waypoint.inside and Waypoint.invisible
+     *
+     *  @returns
+     */
+    _handleOnPositionChange(posObj?: {
+        currentPosition?: string;
+    }): void;
+    /**
+     *  This is a getter function.
+     *  @method
+     *  @returns {string} - id of anchor
+     */
+    get anchorID(): string;
+    /**
+     *  This is a getter function.
+     *  @method
+     *  @returns {string} - label of anchor
+     */
+    get anchorLable(): string;
+    render(): JSX.Element;
+}
+declare class TableOfContents {
+    static propTypes: {
+        manager: any;
+        /**
+         *  @callback
+         *  @param {Anchor[]} anchors
+         *  @param {?Anchor} highlightAnchor
+         *  @param {Function} handleAnchorClick - callback function for handling clicking anchor
+         */
+        render: any;
+        scrollDuration: any;
+    };
+    constructor(props: any);
+    state: {
+        highlightAnchor: any;
+    };
+    setHighlightAnchor: any;
+    handleAnchorClick: any;
+    /**
+     *  @param {Anchor} anchor - anchor to highlight
+     *  @returns
+     */
+    _setHighlightAnchor(anchor: Anchor): void;
+    /**
+     *  @param {string} anchorID - id of clicked anchor
+     *  @returns
+     */
+    _handleAnchorClick(anchorID: string, callback: any): void;
+    render(): any;
+}

package/lib/text/constants/headline-type.d.ts

@@ -0,0 +1,4 @@
+export const TYPE_FONT_FAMILY: Readonly<{
+    default: string;
+    article: string;
+}>;

package/lib/text/enums/index.d.ts

@@ -0,0 +1,9 @@
+export const Type: Readonly<{
+    DEFAULT: "default";
+    ARTICLE: "article";
+}>;
+export const Weight: Readonly<{
+    EXTRA_LIGHT: "extraLight";
+    NORMAL: "normal";
+    BOLD: "bold";
+}>;

package/lib/text/headline.d.ts

@@ -0,0 +1,60 @@
+export function H1({ text, type, className, ...props }: {
+    [x: string]: any;
+    text?: string;
+    type?: "default";
+    className?: string;
+}): JSX.Element;
+export namespace H1 {
+    export let displayName: string;
+    export namespace propTypes {
+        let text: any;
+        let type: any;
+        let className: any;
+    }
+    export { Type };
+}
+export function H1({ text, type, className, ...props }: {
+    [x: string]: any;
+    text?: string;
+    type?: "default";
+    className?: string;
+}): JSX.Element;
+export namespace H1 { }
+export function H1({ text, type, className, ...props }: {
+    [x: string]: any;
+    text?: string;
+    type?: "default";
+    className?: string;
+}): JSX.Element;
+export namespace H1 { }
+export function H1({ text, type, className, ...props }: {
+    [x: string]: any;
+    text?: string;
+    type?: "default";
+    className?: string;
+}): JSX.Element;
+export namespace H1 { }
+export function H1({ text, type, className, ...props }: {
+    [x: string]: any;
+    text?: string;
+    type?: "default";
+    className?: string;
+}): JSX.Element;
+export namespace H1 { }
+export function H1({ text, type, className, ...props }: {
+    [x: string]: any;
+    text?: string;
+    type?: "default";
+    className?: string;
+}): JSX.Element;
+export namespace H1 { }
+declare namespace _default {
+    export { H1 };
+    export { H2 };
+    export { H3 };
+    export { H4 };
+    export { H5 };
+    export { H6 };
+}
+export default _default;
+import { Type } from './enums';

package/lib/text/paragraph.d.ts

@@ -0,0 +1,49 @@
+export function P1({ text, weight, className, children, ...props }: {
+    [x: string]: any;
+    text?: string;
+    weight?: "normal";
+    className?: string;
+    children: any;
+}): JSX.Element;
+export namespace P1 {
+    export let displayName: string;
+    export namespace propTypes {
+        let text: any;
+        let weight: any;
+        let className: any;
+        let children: any;
+    }
+    export { Weight };
+}
+export function P1({ text, weight, className, children, ...props }: {
+    [x: string]: any;
+    text?: string;
+    weight?: "normal";
+    className?: string;
+    children: any;
+}): JSX.Element;
+export namespace P1 { }
+export function P1({ text, weight, className, children, ...props }: {
+    [x: string]: any;
+    text?: string;
+    weight?: "normal";
+    className?: string;
+    children: any;
+}): JSX.Element;
+export namespace P1 { }
+export function P1({ text, weight, className, children, ...props }: {
+    [x: string]: any;
+    text?: string;
+    weight?: "normal";
+    className?: string;
+    children: any;
+}): JSX.Element;
+export namespace P1 { }
+declare namespace _default {
+    export { P1 };
+    export { P2 };
+    export { P3 };
+    export { P4 };
+}
+export default _default;
+import { Weight } from './enums';

package/lib/text/stories/headline.stories.d.ts

@@ -0,0 +1,112 @@
+declare namespace _default {
+    export let title: string;
+    export { H1 as component };
+    export namespace argTypes {
+        let type: {
+            defaultValue: any;
+            options: any[];
+            control: {
+                type: string;
+            };
+        };
+    }
+}
+export default _default;
+export namespace h1 {
+    namespace args {
+        export { defaultText as text };
+        export { defaultType as type };
+    }
+    namespace parameters {
+        namespace controls {
+            let exclude: string[];
+        }
+    }
+}
+export namespace h2 {
+    export function render(args: any): JSX.Element;
+    export namespace args_1 {
+        export { defaultText as text };
+        export { defaultType as type };
+    }
+    export { args_1 as args };
+    export namespace parameters_1 {
+        export namespace controls_1 {
+            let exclude_1: string[];
+            export { exclude_1 as exclude };
+        }
+        export { controls_1 as controls };
+    }
+    export { parameters_1 as parameters };
+}
+export namespace h3 {
+    export function render_1(args: any): JSX.Element;
+    export { render_1 as render };
+    export namespace args_2 {
+        export { defaultText as text };
+        export { defaultType as type };
+    }
+    export { args_2 as args };
+    export namespace parameters_2 {
+        export namespace controls_2 {
+            let exclude_2: string[];
+            export { exclude_2 as exclude };
+        }
+        export { controls_2 as controls };
+    }
+    export { parameters_2 as parameters };
+}
+export namespace h4 {
+    export function render_2(args: any): JSX.Element;
+    export { render_2 as render };
+    export namespace args_3 {
+        export { defaultText as text };
+        export { defaultType as type };
+    }
+    export { args_3 as args };
+    export namespace parameters_3 {
+        export namespace controls_3 {
+            let exclude_3: string[];
+            export { exclude_3 as exclude };
+        }
+        export { controls_3 as controls };
+    }
+    export { parameters_3 as parameters };
+}
+export namespace h5 {
+    export function render_3(args: any): JSX.Element;
+    export { render_3 as render };
+    export namespace args_4 {
+        export { defaultText as text };
+        export { defaultType as type };
+    }
+    export { args_4 as args };
+    export namespace parameters_4 {
+        export namespace controls_4 {
+            let exclude_4: string[];
+            export { exclude_4 as exclude };
+        }
+        export { controls_4 as controls };
+    }
+    export { parameters_4 as parameters };
+}
+export namespace h6 {
+    export function render_4(args: any): JSX.Element;
+    export { render_4 as render };
+    export namespace args_5 {
+        export { defaultText as text };
+        export { defaultType as type };
+    }
+    export { args_5 as args };
+    export namespace parameters_5 {
+        export namespace controls_5 {
+            let exclude_5: string[];
+            export { exclude_5 as exclude };
+        }
+        export { controls_5 as controls };
+    }
+    export { parameters_5 as parameters };
+}
+import { H1 } from '../headline';
+declare const defaultText: "\u6A19\u984C\u300C\u6A19\u984C\u300D\uFF1A\u6A19\u984C\uFF0C\u300A\u6A19\u984C\u300B\u6A19\u984CEnglish\u6A19\u984C123\u6A19\u984C\uFF1F";
+declare const defaultType: "default";