@bodynarf/react.components 1.7.2 → 1.7.4

package/dist/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@bodynarf/react.components",
+    "version": "1.7.4",
+    "author": {
+        "name": "Artem",
+        "email": "bodynar@gmail.com"
+    },
+    "repository": {
+        "url": "https://github.com/bodynar/bodynarf.react-components",
+        "type": "git"
+    },
+    "bugs": {
+        "url": "https://github.com/bodynar/bodynarf.react-components/issues",
+        "email": "bodynar@gmail.com"
+    },
+    "keywords": [
+        "ts",
+        "typescript",
+        "react",
+        "react component",
+        "bulma"
+    ],
+    "scripts": {
+        "build": "npx tsc && tsc-alias -p tsconfig.json",
+        "transfer": "copy package.json dist && copy readme.md dist",
+        "build_transfer": "npm run build && npm run transfer && cd dist",
+        "publish_pkg": "npm run build_transfer && npm publish --access=public"
+    },
+    "devDependencies": {
+        "@types/react": "^18.0.11",
+        "@types/react-dom": "^18.0.5",
+        "tsc-alias": "^1.8.6",
+        "typescript": "^4.7.3"
+    },
+    "peerDependencies": {
+        "@bodynarf/utils": "^1.1.1",
+        "bulma": "^0.9.4",
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0"
+    }
+}

package/dist/readme.md

@@ -0,0 +1,56 @@
+# About
+Small library with react components based on Bulma CSS framework&nbsp; <a href="https://bulma.io" title="Bulma css framework">
+	<img
+    	src="https://bulma.io/images/made-with-bulma.png"
+    	alt="Made with Bulma"
+    	width="128"
+    	height="24"/>
+</a>
+
+## Installation
+1. Install [React](https://reactjs.org/)
+2. Install [Bulma](https://bulma.io/)
+3. Make sure you imported bulma styles in parent container
+4. *(Optional)* To use **Icon** component - install [Bootstrap Icons](https://icons.getbootstrap.com/) and make sure you imported these styles in parent container
+5. *(Optional)* To use **Checkbox** component - install [bulma-checkradio](https://www.npmjs.com/package/bulma-checkradio) and make sure you imported these styles in parent container
+
+## Description
+
+Mostly all components have root class with `bbr-` prefix. BBR - Bodynarf Bulma React
+### Simple components
+Simple react components based on html elements.
+
+ - **Date** - date input;
+ - **Multiline** - multiline text input;
+ - **Text**- single line text input;
+ - **Anchor**
+ - **Button**
+ - **Number**
+ - **Password** - single line password input (requires icon, see *p.4*)
+ - **Icon** - *see p.4 of installation*
+ - **Dropdown** - custom dropdown component, based on html div elements & css. Allows to use icon in elements
+ - **Checkbox** - (*see p.5 of installation*) Checkbox component based on [bulma-checkradio](https://wikiki.github.io/form/checkradio)
+
+### Complex components
+Complex components is set of components built via combining simple components or represent complex logical component
+ - **Search** - Search bar with optional button to perform search
+ - **Paginator** - Pagination elements to navigate through paged list
+  
+	Example:
+	```tsx
+		const [{ currentPage, pagesCount, onPageChange }, paginate] = usePagination(items.length, ITEMS_PER_PAGE);
+		const pageItems = useMemo(() => paginate(items), [paginate, items]);
+
+		// ...
+
+		<Paginator
+			count={pagesCount}
+			currentPage={currentPage}
+			onPageChange={onPageChange}
+		/>
+	```
+ 
+### Hooks
+
+ - **useComponentOutsideClick** - Attach watcher for mouse clicks and emmit event when click was outside of component
+ - **usePagination** - Create a pagination config to easily manipulate with Paginator component

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.7.2",
+    "version": "1.7.4",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -22,7 +22,9 @@
     ],
     "scripts": {
         "build": "npx tsc && tsc-alias -p tsconfig.json",
-        "publish": "npx tsc && copy package.json dist && copy readme.md dist && cd dist && npm publish --access=public"
+        "transfer": "copy package.json dist && copy readme.md dist",
+        "build_transfer": "npm run build && npm run transfer && cd dist",
+        "publish_pkg": "npm run build_transfer && npm publish --access=public"
     },
     "devDependencies": {
         "@types/react": "^18.0.11",
@@ -30,7 +32,7 @@
         "tsc-alias": "^1.8.6",
         "typescript": "^4.7.3"
     },
-    "dependencies": {
+    "peerDependencies": {
         "@bodynarf/utils": "^1.1.1",
         "bulma": "^0.9.4",
         "react": "^18.1.0",

package/src/common.scss

@@ -0,0 +1,3 @@
+.help.m-help {
+    white-space: pre-line;
+}

package/src/components/accordion/component/index.tsx

@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { getClassName, isNullOrUndefined } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { ElementSize } from "@bbr/components";
+import Icon from "@bbr/components/icon";
+
+import { mapDataAttributes } from "@bbr/utils";
+
+import { AccordionProps } from "@bbr/components/accordion";
+
+/** Accordion panel */
+const Accordion = ({
+    children, caption,
+    style, size, defaultExpanded,
+    onToggle,
+    className, data, title,
+}: AccordionProps): JSX.Element => {
+    const expandablePanelRef = useRef<HTMLDivElement>(null);
+    const [isExpanded, setIsExpanded] = useState(defaultExpanded ?? false);
+    const [maxHeight, setMaxHeight] = useState<number | undefined>(defaultExpanded === true ? undefined : 0);
+
+    const toggleCollapse = useCallback(
+        () => setMaxHeight(isExpanded ? 0 : expandablePanelRef.current!.scrollHeight),
+        [isExpanded]
+    );
+
+    useEffect(() => {
+        if (defaultExpanded === true && !isNullOrUndefined(expandablePanelRef.current)) {
+            setMaxHeight(expandablePanelRef.current!.scrollHeight);
+        }
+    }, [defaultExpanded]);
+
+    useEffect(() => setIsExpanded(maxHeight !== 0), [maxHeight]);
+    useEffect(() => {
+        onToggle?.call(undefined, !isExpanded);
+    }, [isExpanded, onToggle]);
+
+    const elClassName = getClassName([
+        "bbr-accordion",
+        "message",
+        isNullOrUndefined(style) ? "" : `is-${style}`,
+        isNullOrUndefined(size) ? "" : `is-${size}`,
+        className,
+    ]);
+
+    const dataAttributes = isNullOrUndefined(data)
+        ? undefined
+        : mapDataAttributes(data!);
+
+    return (
+        <article
+            className={elClassName}
+            aria-expanded={isExpanded}
+            {...dataAttributes}
+        >
+            <div
+                className="message-header is-unselectable"
+                onClick={toggleCollapse}
+            >
+                <span title={title}>
+                    {caption}
+                </span>
+                <Icon
+                    name="arrow-down"
+                    size={size ?? ElementSize.Medium}
+                />
+            </div>
+            <div
+                className="message-body"
+                ref={expandablePanelRef}
+                style={{ maxHeight: `${maxHeight}px` }}
+            >
+                <div className="message-body__content">
+                    {children}
+                </div>
+            </div>
+        </article>
+    );
+};
+
+export default Accordion;

package/src/components/accordion/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/src/components/accordion/types.ts

@@ -0,0 +1,22 @@
+import { BaseElementProps, ElementColor, ElementSize } from "@bbr/components";
+
+/** Accordion panel props type */
+export interface AccordionProps extends BaseElementProps {
+    /** Content that should be collapsed inside */
+    children: React.ReactNode;
+
+    /** Collapsible panel caption */
+    caption: string;
+
+    /** Default expanded state */
+    defaultExpanded?: boolean;
+
+    /** Panel size */
+    size?: ElementSize;
+
+    /** Color */
+    style?: ElementColor;
+
+    /** Extra handler for toggling visibility. Doesn't affect component logic */
+    onToggle?: (collapsed: boolean) => void;
+}

package/src/components/anchor/component/index.tsx

@@ -0,0 +1,40 @@
+import { isNullOrUndefined, isNullOrEmpty, getClassName } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { AnchorProps, ElementIcon } from "@bbr/components";
+
+import { SimpleAnchor } from "@bbr/components/anchor/components/simpleAnchor";
+import { AnchorWithIcon } from "@bbr/components/anchor/components/anchorWithIcon";
+
+/** Anchor component */
+export default function Anchor(props: AnchorProps): JSX.Element {
+    if (isNullOrUndefined(props.caption) && isNullOrUndefined(props.icon)) {
+        throw new Error("No anchor content provided");
+    }
+
+    const className: string = getClassName([
+        "bbr-anchor",
+        !isNullOrEmpty(props.className) ? ` ${props.className}` : "",
+        props.disableHovering === true ? " bbr-anchor--unhoverable" : ""
+    ]);
+
+    if (isNullOrUndefined(props.icon)) {
+        return (
+            <SimpleAnchor
+                {...props}
+                className={className}
+                onClick={props.onClick}
+            />
+        );
+    }
+
+    return (
+        <AnchorWithIcon
+            {...props}
+            className={className}
+            onClick={props.onClick}
+            icon={props.icon as ElementIcon}
+        />
+    );
+}

package/src/components/anchor/component/style.scss

@@ -0,0 +1,15 @@
+.bbr-anchor {
+    text-decoration: none;
+    color: inherit;
+
+    transition: 0.15s ease-in-out color;
+
+    &:not(&--unhoverable):hover {
+        text-decoration: underline;
+        color: #3273dc;
+    }
+
+    .bbr-icon {
+        transition: none;
+    }
+}

package/src/components/anchor/components/anchorWithIcon/index.tsx

@@ -0,0 +1,45 @@
+import { isNullOrEmpty } from "@bodynarf/utils";
+
+import Icon from "@bbr/components/icon";
+
+import { AnchorWithIconProps } from "@bbr/components/anchor";
+
+/** Anchor with icon component */
+export const AnchorWithIcon = ({ href, className, onClick, caption, title, target, icon }: AnchorWithIconProps): JSX.Element => {
+    const iconPosition = icon.position || "left";
+
+    const iconClassName: string | undefined = isNullOrEmpty(caption)
+        ? icon.className
+        : iconPosition === "left"
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
+
+
+    if (iconPosition === "left") {
+        return (
+            <a
+                href={href}
+                className={className}
+                title={title}
+                target={target}
+                onClick={onClick}
+            >
+                <Icon {...icon} className={iconClassName} />
+                {caption}
+            </a>
+        );
+    }
+
+    return (
+        <a
+            href={href}
+            className={className}
+            title={title}
+            target={target}
+            onClick={onClick}
+        >
+            {caption}
+            <Icon {...icon} className={iconClassName} />
+        </a>
+    );
+};

package/src/components/anchor/components/simpleAnchor/index.tsx

@@ -0,0 +1,16 @@
+import { SimpleAnchorProps } from "@bbr/components/anchor";
+
+/** Simple anchor component, without icon */
+export const SimpleAnchor = ({ href, className, onClick, caption, title, target }: SimpleAnchorProps): JSX.Element => {
+    return (
+        <a
+            className={className}
+            href={href}
+            title={title}
+            target={target}
+            onClick={onClick}
+        >
+            {caption}
+        </a>
+    );
+};

package/src/components/anchor/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/src/components/anchor/types.ts

@@ -0,0 +1,54 @@
+import { ElementIcon } from "@bbr/components";
+
+/** Anchor component props type */
+export interface AnchorProps {
+    /** Link destination */
+    href?: string;
+
+    /** Link caption  */
+    caption?: string;
+
+    /** Click handler */
+    onClick?: () => void;
+
+    /** Configuration od inner icon */
+    icon?: ElementIcon;
+
+    /** Title of anchor */
+    title?: string;
+
+    /** Where to open the linked document */
+    target?: "_blank" | "_top";
+
+    /** Additional class names */
+    className?: string;
+
+    /** Should css hovering effects be disabled */
+    disableHovering?: boolean;
+}
+
+export interface SimpleAnchorProps {
+    /** Link destination */
+    href?: string;
+
+    /** Class names */
+    className: string;
+
+    /** Click handler */
+    onClick?: () => void;
+
+    /** Link caption  */
+    caption?: string;
+
+    /** Title of anchor */
+    title?: string;
+
+    /** Where to open the linked document */
+    target?: "_blank" | "_top";
+}
+
+export interface AnchorWithIconProps extends SimpleAnchorProps {
+    /** Configuration of icon */
+    icon: ElementIcon;
+}
+

package/src/components/button/component/index.tsx

@@ -0,0 +1,58 @@
+import { isNullOrEmpty, isNullOrUndefined, getClassName } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import { ButtonProps, ElementIcon } from "@bbr/components";
+
+import { mapDataAttributes } from "@bbr/utils";
+
+import { ButtonWithIcon } from "@bbr/components/button/components/buttonWithIcon";
+import { SimpleButton } from "@bbr/components/button/components/simpleButton";
+
+/**
+ * Button component
+ * @throws Caption is not defined and icon configuration is not defined at the same time
+ */
+export default function Button(props: ButtonProps): JSX.Element {
+    if (isNullOrEmpty(props.caption) && isNullOrUndefined(props.icon)) {
+        throw new Error("No button content provided.");
+    }
+
+    const className: string = getClassName([
+        "button",
+        "bbr-button",
+        props.className,
+        `is-${props.type}`,
+        props.light === true ? "is-light" : "",
+        !isNullOrUndefined(props.size) ? `is-${props.size}` : "",
+        props.outlined === true ? "is-outlined" : "",
+        props.rounded === true ? "is-rounded" : "",
+        props.isLoading === true ? "is-loading" : "",
+        props.static === true ? "is-static" : "",
+    ]);
+
+    const data = isNullOrUndefined(props.data)
+        ? undefined
+        : mapDataAttributes(props.data!);
+
+    if (!isNullOrUndefined(props.icon)) {
+        return (
+            <ButtonWithIcon
+                {...props}
+                className={className}
+                onClick={props.onClick}
+                icon={props.icon as ElementIcon}
+                data={data}
+            />
+        );
+    } else {
+        return (
+            <SimpleButton
+                {...props}
+                className={className}
+                onClick={props.onClick}
+                data={data}
+            />
+        );
+    }
+}

package/src/components/button/component/style.scss

@@ -0,0 +1,12 @@
+.bbr-button {
+    transition: 0.15s ease-in-out;
+    transition-property: background-color, border-color;
+
+    &--icon-only {
+        padding: 0.55rem !important;
+    }
+
+    &.is-warning.is-outlined:not([disabled]):hover {
+        color: #000 !important;
+    }
+}

package/src/components/button/components/buttonWithIcon/index.tsx

@@ -0,0 +1,53 @@
+import { isNullOrEmpty } from "@bodynarf/utils";
+
+import Icon from "@bbr/components/icon";
+
+import { ButtonWithIconProps } from "@bbr/components/button";
+
+/** Button with icon component */
+export const ButtonWithIcon = ({
+    className, disabled,
+    onClick,
+    caption, title, icon,
+    data,
+}: ButtonWithIconProps): JSX.Element => {
+    const iconPosition = icon.position || "left";
+
+    const iconClassName: string | undefined = isNullOrEmpty(caption)
+        ? icon.className
+        : iconPosition === "left"
+            ? `${icon.className} bbr-icon--left`
+            : `${icon.className} bbr-icon--right`;
+
+    className = isNullOrEmpty(caption)
+        ? `${className} bbr-button--icon-only`
+        : className;
+
+    if (iconPosition === "left") {
+        return (
+            <button
+                className={className}
+                disabled={disabled}
+                onClick={onClick}
+                title={title}
+                {...data}
+            >
+                <Icon {...icon} className={iconClassName} />
+                {caption}
+            </button>
+        );
+    }
+
+    return (
+        <button
+            className={className}
+            disabled={disabled}
+            onClick={onClick}
+            title={title}
+            {...data}
+        >
+            {caption}
+            <Icon {...icon} className={iconClassName} />
+        </button>
+    );
+};

package/src/components/button/components/simpleButton/index.tsx

@@ -0,0 +1,21 @@
+import { SimpleButtonProps } from "@bbr/components/button";
+
+/** Simple button component, without icon */
+export const SimpleButton = ({
+    className, disabled,
+    onClick,
+    caption, title,
+    data
+}: SimpleButtonProps): JSX.Element => {
+    return (
+        <button
+            className={className}
+            disabled={disabled}
+            onClick={onClick}
+            title={title}
+            {...data}
+        >
+            {caption}
+        </button>
+    );
+};

package/src/components/button/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./component";
+export * from "./types";

package/src/components/button/types.ts

@@ -0,0 +1,64 @@
+import { BaseElementProps, ElementIcon, ElementSize } from "@bbr/components";
+
+export interface ButtonProps extends BaseElementProps {
+    /** Button displaying text */
+    caption?: string;
+
+    /** Type of button (color)  */
+    type: ButtonType;
+
+    /** Configuration of inner icon */
+    icon?: ElementIcon;
+
+    /** Button size  */
+    size?: ElementSize;
+
+    /** Is button uses light version of color  */
+    light?: boolean;
+
+    /** Is button outlined */
+    outlined?: boolean;
+
+    /** Should button corners be rounded  */
+    rounded?: boolean;
+
+    /** Display loading icon */
+    isLoading?: boolean;
+
+    /** Is button disabled */
+    disabled?: boolean;
+
+    /** Is non-interactive button */
+    static?: boolean;
+
+    /** Click action handler */
+    onClick?: () => void;
+};
+
+/** Button types according to Bulma framework */
+export type ButtonType =
+    "default" /** color: transparent */
+    | "primary" /** color: sea-wave green */
+    | "link" /** color: blue-violet */
+    | "info" /** color: sky-blue */
+    | "success" /** color: green */
+    | "warning" /** color: yellow */
+    | "danger" /** color: red */
+    | "white" /** color: white */
+    | "light" /** color: light-gray */
+    | "dark" /** color: dark-gray */
+    | "black" /** color: black */
+    | "text" /** Underline text with color: gray */
+    | "ghost" /** Blue underline text with color: transparent */
+    ;
+
+/** Simple button props type */
+export interface SimpleButtonProps extends Omit<ButtonProps, 'className'> {
+    /** Button class name*/
+    className: string;
+};
+
+export interface ButtonWithIconProps extends SimpleButtonProps {
+    /** Icon configuration */
+    icon: ElementIcon;
+};

package/src/components/dropdown/component/index.tsx

@@ -0,0 +1,20 @@
+import { isNullOrUndefined } from "@bodynarf/utils";
+
+import "./style.scss";
+
+import DropdownWithLabel from "@bbr/components/dropdown/components/withLabel";
+import DropdownCompact from "@bbr/components/dropdown/components/compact";
+
+import { DropdownProps } from "@bbr/components/dropdown";
+
+/** Dropdown component */
+const Dropdown = (props: DropdownProps): JSX.Element => {
+    if (!isNullOrUndefined(props.label)) {
+        return <DropdownWithLabel {...props} />;
+    } else {
+        return <DropdownCompact {...props} />;
+    }
+};
+
+export default Dropdown;
+