@bodynarf/react.components 1.7.4 → 1.7.5

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@bodynarf/react.components",
-    "version": "1.7.4",
+    "version": "1.7.5",
     "author": {
         "name": "Artem",
         "email": "bodynar@gmail.com"
@@ -23,8 +23,9 @@
     "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"
+        "build_transfer": "npm run build && npm run transfer",
+        "prepublish": "npm run build_transfer && cd dist && npm pack --dry-run",
+        "publish_pkg": "npm run build_transfer && cd dist && npm publish --access=public"
     },
     "devDependencies": {
         "@types/react": "^18.0.11",
@@ -38,4 +39,4 @@
         "react": "^18.1.0",
         "react-dom": "^18.1.0"
     }
-}
+}

package/dist/package.json

@@ -1,41 +0,0 @@
-{
-    "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

@@ -1,56 +0,0 @@
-# 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/src/common.scss

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

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

@@ -1,84 +0,0 @@
-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

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

package/src/components/accordion/types.ts

@@ -1,22 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,15 +0,0 @@
-.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

@@ -1,45 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

package/src/components/anchor/types.ts

@@ -1,54 +0,0 @@
-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

@@ -1,58 +0,0 @@
-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

@@ -1,12 +0,0 @@
-.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

@@ -1,53 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

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

package/src/components/button/types.ts

@@ -1,64 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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;
-