@reactivers/generic-ui 0.1.0

package/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@reactivers/generic-ui",
+  "version": "0.1.0",
+  "mainiife": "dist/index.iife.js",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "source": "src/index.js",
+  "private": false,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "history": "^5.0.0",
+    "rc-dialog": "^8.5.1",
+    "rc-field-form": "^1.18.1",
+    "rc-notification": "^4.5.4",
+    "rc-upload": "^3.3.4",
+    "react-color": "^2.19.3",
+    "react-flexbox-grid": "^2.1.2",
+    "react-router-dom": "^5.2.0"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.12.10",
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@rollup/plugin-babel": "^5.2.2",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.2.4",
+    "rollup": "^2.38.0",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-delete": "^2.0.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.0"
+  },
+  "peerDependencies": {
+    "@reactivers/use-utils": "1.0.0",
+    "moment": "^2.29.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "build-watch": "rollup -c -w",
+    "dev": "npm-run-all --parallel build-watch",
+    "prepublishOnly": "npm run build",
+    "prepare": "npm run build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

package/rollup.config.js

@@ -0,0 +1,36 @@
+import babel from '@rollup/plugin-babel';
+import external from 'rollup-plugin-peer-deps-external';
+import del from 'rollup-plugin-delete';
+import pkg from './package.json';
+import path from 'path'
+import resolve from "rollup-plugin-node-resolve";
+import postcss from 'rollup-plugin-postcss'
+
+export default {
+    input: pkg.source,
+    output: [
+        {file: pkg.main, format: 'cjs'},
+        {file: pkg.module, format: 'esm'}
+    ],
+    watch: {
+        include: [pkg.source, "src/*"],
+        exclude: 'node_modules/**'
+    },
+    plugins: [
+        external({
+            includeDependencies: true
+        }),
+        resolve(),
+        postcss({
+            minimize: true,
+            extensions: ['.css'],
+            extract: path.resolve('dist/bundle.css')
+        }),
+        babel({
+            exclude: 'node_modules/**',
+            extensions: ['.js', '.jsx', '.ts', '.tsx']
+        }),
+        del({targets: ['dist/*']}),
+    ],
+    external: Object.keys(pkg.peerDependencies || {})
+};

package/src/components/Badge/index.js

@@ -0,0 +1,19 @@
+import React from 'react'
+
+const Badge = props => {
+    const {title, children} = props;
+    return (
+        <div style={{position: 'relative'}}>
+            <div style={{
+                position: 'absolute',
+                right: 0,
+                top: 0,
+                borderRadius: 10,
+                backgroundColor: '#eee'
+            }}>{title}</div>
+            {children}
+        </div>
+    )
+}
+
+export default Badge

package/src/components/Button/index.js

@@ -0,0 +1,63 @@
+import { coalasce, takeIf } from "@reactivers/use-utils";
+import { useCallback } from 'react';
+import appStyles from "../../utils/styles";
+import Show from "../Show";
+
+const Button = props => {
+    const {
+        style,
+        icon,
+        title,
+        className: _className,
+        iconSize: _iconSize,
+        onClick: _onClick,
+        htmlType: _htmlType,
+        children,
+    } = props;
+
+    const iconSize = coalasce(_iconSize, 32);
+    const htmlType = coalasce(_htmlType, "button");
+    const iconButton = !children && !title;
+
+    let className = `no-select `
+
+    const onClick = useCallback((e) => {
+        if (htmlType !== 'submit') e.preventDefault()
+        if (_onClick) _onClick(e);
+    }, [htmlType, _onClick])
+
+    if (_className) className += ` ${_className || ""}`
+
+    return (
+        <button style={{
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: takeIf(iconButton, iconSize),
+            minWidth: takeIf(iconButton, iconSize),
+            height: takeIf(iconButton, iconSize),
+            minHeight: takeIf(iconButton, iconSize),
+            borderRadius: takeIf(iconButton, "50%"),
+            ...(style || {}),
+        }}
+            type={htmlType}
+            onClick={onClick}
+            className={className}>
+            <Show condition={icon}>
+                <div style={{
+                    marginRight: takeIf(!iconButton, 8),
+                    fontSize: takeIf(iconButton, 18, 12),
+                    width: takeIf(iconButton, "100%", 12),
+                    height: takeIf(iconButton, "100%", 12),
+                    ...appStyles.center,
+                }}>
+                    {icon}
+                </div>
+            </Show>
+            <div>
+                {children || title}
+            </div>
+        </button>
+    )
+}
+
+export default Button;

package/src/components/Card/index.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import ListItem from "../ListItem";
+import appStyles from "../../utils/styles";
+import Show from "../Show";
+
+const Card = props => {
+    const {
+        style,
+        avatar,
+        title,
+        titleRenderer,
+        titleStyle,
+        headerStyle,
+        titleContainerStyle,
+        description,
+        onHeaderClick,
+        subtitle,
+        onTitleClick,
+        className,
+        cardStyle,
+        childrenContainerStyle,
+        children
+    } = props;
+    return (
+        <div style={{borderRadius: 10, padding: 16, ...(style || {})}} className={className}>
+            <Show condition={avatar || title || titleRenderer || description || subtitle}>
+                <ListItem
+                    avatar={avatar}
+                    title={title}
+                    titleRenderer={titleRenderer}
+                    style={{margin: 0, padding: 0, ...(titleContainerStyle || {})}}
+                    titleContainerStyle={headerStyle}
+                    titleStyle={{fontSize: 18, ...(titleStyle || {})}}
+                    description={description}
+                    subtitle={subtitle}
+                    onTitleClick={onTitleClick}
+                    onClick={onHeaderClick}
+                />
+            </Show>
+            <Show condition={children}>
+                <div style={{...appStyles.card, ...(cardStyle || {})}}>
+                    <div style={{...(childrenContainerStyle || {})}}>
+                        {children}
+                    </div>
+                </div>
+            </Show>
+        </div>
+    )
+}
+
+export default Card

package/src/components/ColorPicker/index.js

@@ -0,0 +1,44 @@
+import React, {useCallback} from 'react';
+import {SwatchesPicker} from "react-color";
+import Popover from "../Popover";
+import Show from "../Show";
+
+const ColorPicker = props => {
+    const {
+        label,
+        value: _value,
+        onChange: _onChange,
+        title,
+        inputClassName,
+        colorClassName,
+        children,
+    } = props;
+
+    const onChange = useCallback(({hex}) => {
+        _onChange(hex)
+    }, [_onChange])
+
+    return (
+        <Popover overlay={
+            <div style={{backgroundColor: 'white', padding: 16}}>
+                <h3>{title || "Renk"}</h3>
+                <SwatchesPicker onChange={onChange}/>
+            </div>
+        }>
+            <>
+                <Show condition={children}>
+                    {children}
+                </Show>
+                <Show condition={!children}>
+                    <div className={inputClassName}>
+                        <p style={{fontWeight: 500}}>{label}</p>
+                        <div className={colorClassName} style={{backgroundColor: _value, height: 32, width: '100%'}}/>
+                    </div>
+                </Show>
+            </>
+        </Popover>
+    )
+}
+
+
+export default ColorPicker;

package/src/components/EmptyResult/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import appStyles from "../../utils/styles";
+
+const EmptyResult = props => {
+    const {icon, title, style, iconClassName, size: _size} = props;
+    const size = _size || 120
+    return (
+        <div style={{...(style || {})}}>
+            <div style={{
+                width: '100%',
+                ...appStyles.centerInColumn,
+            }}>
+                <div className={iconClassName} style={{...appStyles.center, ...appStyles.rounded(size)}}>
+                    {icon}
+                </div>
+            </div>
+            <div>
+                <p style={{
+                    textAlign: 'center',
+                    fontWeight: '100',
+                    fontSize: 24,
+                    whiteSpace: 'pre-wrap',
+                    color: 'black',
+                    marginTop: 16
+                }}>{title}</p>
+            </div>
+        </div>
+    )
+}
+export default EmptyResult;

package/src/components/FadeAnimation/index.js

@@ -0,0 +1,35 @@
+import React, {useEffect, useState} from "react";
+
+const FadeAnimation = props => {
+    const {style, type: _type, duration: _duration, delay: _delay, onAnimationComplete, children} = props;
+    const duration = _duration || 100
+    const delay = _delay || 0
+    const type = _type || "in";
+    const [opacity, setOpacity] = useState(type === "in" ? 0 : 1);
+    const toValue = type === "in" ? 1 : 0;
+
+    useEffect(() => {
+        if (opacity === toValue && onAnimationComplete) {
+            setTimeout(() => {
+                onAnimationComplete()
+            }, duration + delay)
+        }
+    }, [opacity])
+
+    useEffect(() => {
+        if (type === "in") {
+            setOpacity(toValue)
+        } else {
+            setOpacity(toValue)
+        }
+    }, [type])
+
+
+    return (
+        <div style={{opacity: opacity, transition: `${duration}`, transitionDelay: delay, ...(style || {})}}>
+            {children}
+        </div>
+    )
+}
+
+export default FadeAnimation;

package/src/components/Form/index.js

@@ -0,0 +1,25 @@
+import { isNullOrUndefined } from '@reactivers/use-utils';
+import Form, { Field as FField, useForm } from "rc-field-form";
+
+const Field = props => {
+    const { style, name, children } = props;
+
+    return (
+        <div style={{ width: '100%', margin: '16px 0', ...(style || {}) }}>
+            <FieldOrChildren name={name} parentProps={props}>
+                {children}
+            </FieldOrChildren>
+        </div>
+    )
+}
+
+const FieldOrChildren = props => {
+    const { name, parentProps, children } = props;
+    if (isNullOrUndefined(name)) {
+        return children
+    }
+    return <FField {...parentProps} />
+}
+
+export { Form, Field, useForm };
+

package/src/components/Grid/index.js

@@ -0,0 +1 @@
+export { Grid, Row, Col } from 'react-flexbox-grid';

package/src/components/Header/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import appStyles from "../../utils/styles";
+import Show from "../Show";
+
+const Header = (props) => {
+    const {title, titleRenderer, style, titleStyle, rightContent} = props;
+
+    return (
+        <div style={{...appStyles.row, alignItems: 'center', minHeight: 48, ...(style || {})}}>
+            <div style={{flex: 1, ...(titleStyle || {})}}>
+                <Show condition={titleRenderer}>
+                    <div style={{margin: 0, ...appStyles.cardTitle}}>{title}</div>
+                </Show>
+            </div>
+            {rightContent}
+        </div>
+    )
+}
+
+export default Header

package/src/components/Image/index.js

@@ -0,0 +1,63 @@
+import { coalasce, takeIf } from "@reactivers/use-utils";
+import { useCallback, useState } from 'react';
+import appStyles from '../../utils/styles';
+import Show from "../Show";
+
+const Image = props => {
+    const {
+        style,
+        className,
+        hidePlaceholder,
+        src,
+        alt,
+        onLoad: _onLoad,
+        placeholder: _placheholder,
+        size: _size,
+        ...rest
+    } = props;
+
+    const [loaded, setLoaded] = useState(false);
+
+    const size = takeIf(_size, { width: _size, height: _size, borderRadius: '50%' }, {});
+    const placeholder = coalasce(_placheholder, "P");
+    const fontSize = takeIf(isNaN(_size / 2), 24, _size / 2);
+    const displayImage = takeIf(loaded, undefined, 'none');
+
+    const onLoad = useCallback(() => {
+        setLoaded(true)
+        if (_onLoad)
+            _onLoad()
+    }, [_onLoad])
+
+    return (
+        <div style={{
+            ...size,
+            ...appStyles.defaultShadow,
+            ...appStyles.center,
+            backgroundColor: "#eee",
+            overflow: "hidden",
+            ...style,
+        }} className={className}>
+            <Show condition={src}>
+                <img
+                    onLoad={onLoad}
+                    src={src}
+                    alt={alt}
+                    style={{
+                        ...appStyles.roundedImage,
+                        ...style,
+                        display: displayImage
+                    }}
+                    {...rest}
+                />
+            </Show>
+            <Show condition={!loaded && !hidePlaceholder}>
+                <div style={{ width: '100%', height: '100%', ...appStyles.center }}>
+                    <p style={{ margin: 0, fontSize, fontWeight: 'bold', padding: 4 }}>{placeholder}</p>
+                </div>
+            </Show>
+        </div>
+    )
+}
+
+export default Image;

package/src/components/IncDecField/index.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import Button from "../Button";
+import appStyles from "../../utils/styles";
+
+const IncDecField = props => {
+    const {value, onChange, minusIcon, plusIcon, size: _size, style, minusDisabled, plusDisabled, children} = props;
+    return (
+        <div style={{
+            marginVertical: 16,
+            ...appStyles.row,
+            ...appStyles.spreadHorizontally,
+            ...(style || {})
+        }}>
+            <Button icon={minusIcon}
+                    disabled={minusDisabled}
+                    type='primary'
+                    style={{
+                        borderRadius: 10,
+                    }}
+                    onClick={() => onChange(value - 1)}
+            />
+            {children}
+            <Button icon={plusIcon}
+                    disabled={plusDisabled}
+                    type='primary'
+                    style={{
+                        borderRadius: 10,
+                    }}
+                    onClick={() => onChange(value + 1)}
+            />
+        </div>
+    )
+}
+
+export default IncDecField;

package/src/components/InfiniteScroll/index.js

@@ -0,0 +1,150 @@
+import { useApi } from "@reactivers/use-utils";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import Mapper from "../Mapper";
+import Show from "../Show";
+
+const InfiniteScrollView = forwardRef((props, ref) => {
+    const {
+        style,
+        endpoint,
+        apiOptions: _apiOptions,
+        shimmer,
+        onDataChange,
+        render,
+        pageSize: _pageSize,
+        empty,
+        reload,
+        filterOptions,
+        onReload,
+        loadingRenderer
+    } = props;
+    const apiOptions = _apiOptions || {};
+    const { method, params, onSuccess: apiOptionsOnSuccess } = apiOptions;
+
+    const pageSize = _pageSize || 5;
+    const [page, setPage] = useState(1);
+    const [data, setData] = useState([]);
+    const [filter, setFilter] = useState({});
+    const reloaderRef = useRef(null)
+
+
+    const updateDataByIndex = (index, item) => {
+        setData(oldData => {
+            oldData[index] = item;
+            return oldData;
+        })
+    }
+
+    useImperativeHandle(ref, () => ({
+        updateDataByIndex
+    }))
+
+    const containerView = useRef(null);
+
+    const onSuccess = response => {
+        if (apiOptionsOnSuccess) {
+            apiOptionsOnSuccess(response)
+        }
+        setData(oldData => {
+            const newData = response.data.currentPage === 1 ? response.data.results || [] : [...oldData, ...(response.data.results || [])]
+            if (onDataChange)
+                onDataChange(newData)
+            return newData;
+        })
+    }
+
+    const { fetched, firstTimeFetched, load: apiLoad, response } = useApi({ onSuccess })
+    const { pageCount } = response.data || {};
+    const hasNextPage = (page || 1) < (pageCount || 2);
+
+    const load = useCallback(() => {
+        const hasNextPage = (page || 1) <= (pageCount || 2);
+        if (!hasNextPage) return;
+
+        const _endpoint = `${endpoint}/${page}/${pageSize}`;
+        const _method = method || (filterOptions ? "POST" : "GET");
+        const _params = params || (filterOptions ? filter : undefined);
+
+        apiLoad({ endpoint: _endpoint, method: _method, params: _params })
+
+    }, [page, pageCount, endpoint, pageSize, method, params, filterOptions, apiLoad, filter])
+
+    const nextPage = useCallback(() => {
+        if (fetched && hasNextPage) {
+            setPage(oldPage => oldPage + 1);
+        }
+    }, [fetched, hasNextPage])
+
+    const onRefresh = useCallback(() => {
+        if (page === 1) {
+            load()
+        } else {
+            setPage(1)
+        }
+    }, [load, page]);
+
+    const shouldFetchNextPage = useCallback(() => {
+        if (!reloaderRef.current)
+            return false;
+        const reloaderRects = reloaderRef.current.getClientRects();
+        const reloaderOffsetY = reloaderRects[0].top;
+        const shouldFetch = reloaderOffsetY - 20 <= window.innerHeight
+        return shouldFetch;
+    }, [reloaderRef])
+
+    const onScroll = useCallback((event) => {
+        if (shouldFetchNextPage()) {
+            nextPage()
+        }
+    }, [shouldFetchNextPage, nextPage])
+
+    useEffect(() => {
+        if (shouldFetchNextPage())
+            nextPage()
+    }, [shouldFetchNextPage, nextPage])
+
+    useEffect(() => {
+        load()
+    }, [load])
+
+    useEffect(() => {
+        const appLayout = document.getElementsByTagName("body")[0];
+        appLayout.onscroll = onScroll
+    }, [onScroll])
+
+    useEffect(() => {
+        if (reload) {
+            onRefresh();
+            onReload()
+        }
+    }, [onRefresh, onReload, reload])
+
+    if (!firstTimeFetched) {
+        return shimmer ? <props.shimmer /> : <props.loadingRenderer />
+    }
+    const hasData = !!data.length
+
+    return (
+        <div style={{ padding: 16, ...(style || {}) }}
+            ref={containerView}>
+            <Show condition={hasData}>
+                <Mapper items={data} map={(item, index) => render(item, index, { page, pageSize })} />
+                <Show condition={hasNextPage}>
+                    <div ref={reloaderRef}>
+                        <Show condition={shimmer}>
+                            <props.shimmer />
+                        </Show>
+                        <Show condition={loadingRenderer}>
+                            <props.loadingRenderer style={{ marginTop: 16 }} />
+                        </Show>
+                    </div>
+                </Show>
+            </Show>
+            <Show condition={!hasData}>
+                {empty}
+            </Show>
+        </div>
+    )
+})
+
+export default InfiniteScrollView;