@qiwi/pijma-desktop-extra 0.1.0

package/lib/es6/main/select/index.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon, styled } from '@qiwi/pijma-core';
+import { TextField } from '@qiwi/pijma-desktop';
+import { isEmpty } from 'lodash-es';
+import React, { Component } from 'react';
+import { Dropdown } from '../dropdown/index.js';
+const Container = styled('div')`
+  position: relative;
+  outline: none;
+`;
+const IconWrapper = styled('div')`
+  width: 24px;
+  height: 24px;
+  display: inline-block;
+`;
+export class Select extends Component {
+    onFocus() {
+        if (this.props.disabled) {
+            return;
+        }
+        clearTimeout(this._timeoutID);
+        this.setState({
+            isOpen: true
+        });
+    }
+    onBlur() {
+        if (this.props.disabled) {
+            return;
+        }
+        this._timeoutID = setTimeout(()=>{
+            this.setState({
+                isOpen: false
+            });
+        }, 10);
+    }
+    selectItem(el) {
+        clearTimeout(this._timeoutID);
+        if (this.props.onChange) {
+            if (this.props.multiSelect) {
+                this.props.onChange(el);
+                if (!el) {
+                    this.onBlur();
+                }
+            } else {
+                this.props.onChange(el.value);
+                this.onBlur();
+            }
+        }
+        if (!this.props.value) {
+            this.setState({
+                isOpen: false,
+                currentItem: el
+            });
+        }
+    }
+    render() {
+        const { items , title , defaultItem , value , error , multiSelect , mapping , emptyValue , renderItem ,  } = this.props;
+        const currentItem = items.find((el)=>el.value === value) || {
+            name: '',
+            value: ''
+        };
+        const valueName = currentItem.name || this.state.currentItem && this.state.currentItem.name || defaultItem;
+        let multiValue = valueName;
+        if (multiSelect && typeof value !== 'string') {
+            multiValue = value.map((el)=>mapping[el]);
+        }
+        return /*#__PURE__*/ _jsxs(Container, {
+            onFocus: this.onFocus,
+            tabIndex: 0,
+            ref: this.inputRef,
+            onBlur: this.onBlur,
+            children: [
+                /*#__PURE__*/ _jsx(TextField, {
+                    ...this.props,
+                    autoFocus: this.state.focus,
+                    title: title || '',
+                    onChange: ()=>{
+                    /* noop */ },
+                    onBlur: multiSelect ? ()=>{
+                    /* noop */ } : this.onBlur,
+                    value: !isEmpty(multiValue) ? [].concat(multiValue).join(', ') : emptyValue || '',
+                    hint: /*#__PURE__*/ _jsx(IconWrapper, {
+                        onClick: this.focusOnInput,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            name: "angle-small-down"
+                        })
+                    }),
+                    error: error
+                }),
+                /*#__PURE__*/ _jsx(Dropdown, {
+                    show: this.state.isOpen,
+                    items: items,
+                    value: multiSelect ? value : valueName,
+                    onChange: this.selectItem,
+                    focus: this.focusOnInput,
+                    multiSelect: multiSelect,
+                    renderItem: renderItem
+                })
+            ]
+        });
+    }
+    constructor(props){
+        super(props);
+        this.focusOnInput = ()=>{
+            this.inputRef.current.focus();
+        };
+        this.currentItem = this.props.value || this.props.defaultItem;
+        this.state = {
+            isOpen: false,
+            currentItem: this.props.items.find((el)=>el.value === this.currentItem) || {}
+        };
+        this.inputRef = /*#__PURE__*/ React.createRef();
+        this._timeoutID = -1;
+        this.onBlur = this.onBlur.bind(this);
+        this.onFocus = this.onFocus.bind(this);
+        this.selectItem = this.selectItem.bind(this);
+    }
+}

package/lib/es6/main/spinner/index.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Spinner } from '@qiwi/pijma-core';
+import React from 'react';
+import { COLOR, DIMEN } from '../theme/index.js';
+export const B2bSpinner = ()=>/*#__PURE__*/ _jsx(Spinner, {
+        color: COLOR.PRIMARY,
+        width: DIMEN.SPINNER_SIZE,
+        height: DIMEN.SPINNER_SIZE
+    });

package/lib/es6/main/spreader/index.js

@@ -0,0 +1,11 @@
+import { styled } from '@qiwi/pijma-core';
+export default styled('div')`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  max-width: 1280px;
+  min-width: 400px;
+  > * {
+    padding: 0 50px !important;
+  }
+`;

package/lib/es6/main/step/StepProps.js

@@ -0,0 +1 @@
+export { };

package/lib/es6/main/step/StepStyle.js

@@ -0,0 +1,36 @@
+import { styled } from '@qiwi/pijma-core';
+export default styled.button`
+  width: 40px;
+  height: 40px;
+  border: 1px solid;
+  border-radius: 50%;
+  color: ${({ variant , theme  })=>{
+    switch(variant){
+        case 'active':
+            return theme.color.brand;
+        case 'focus':
+            return theme.color.white;
+        default:
+            return theme.color.black;
+    }
+}};
+  border-color: ${({ variant , theme  })=>{
+    switch(variant){
+        case 'active':
+            return theme.color.brand;
+        case 'focus':
+            return 'transparent';
+        default:
+    }
+}};
+  background-color: ${({ variant , theme  })=>{
+    switch(variant){
+        case 'active':
+            return theme.color.white;
+        case 'focus':
+            return theme.color.brand;
+        default:
+            return '#e6e6e6';
+    }
+}};
+`;

package/lib/es6/main/step/index.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ButtonControl, Typo } from '@qiwi/pijma-core';
+import { Text } from '@qiwi/pijma-desktop';
+import React from 'react';
+import StepButton from './StepStyle.js';
+const Step = (props)=>{
+    const { icon , text , variant ='default' , ...rest } = props;
+    return /*#__PURE__*/ _jsx(ButtonControl, {
+        ...rest,
+        children: ({ active , focus , hover , ...events })=>/*#__PURE__*/ _jsx(StepButton, {
+                variant: variant,
+                ...events,
+                children: /*#__PURE__*/ _jsx(Text, {
+                    children: /*#__PURE__*/ _jsx(Typo, {
+                        css: {
+                            overflowWrap: 'normal'
+                        },
+                        children: icon || text
+                    })
+                })
+            })
+    });
+};
+export { Step };

package/lib/es6/main/step/interfaces.js

@@ -0,0 +1 @@
+export { };

package/lib/es6/main/stepper/StepperControl.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useMemo } from 'react';
+const StepperControl = ({ step , steps , children  })=>{
+    const stepsArray = useMemo(()=>Array.from(new Array(steps)), [
+        steps
+    ]);
+    return /*#__PURE__*/ _jsx(_Fragment, {
+        children: stepsArray.map((_, index)=>{
+            const currentStep = index + 1;
+            const variant = currentStep === step ? 'focus' : currentStep < step ? 'active' : 'default';
+            return children({
+                currentStep,
+                variant
+            });
+        })
+    });
+};
+export default StepperControl;

package/lib/es6/main/stepper/StepperControlProps.js

@@ -0,0 +1 @@
+export { };

package/lib/es6/main/stepper/StepperProps.js

@@ -0,0 +1 @@
+export { };

package/lib/es6/main/stepper/index.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, FlexItem } from '@qiwi/pijma-core';
+import React, { Fragment } from 'react';
+import { Divider } from '../divider/index.js';
+import { Step } from '../step/index.js';
+import StepperControl from './StepperControl.js';
+const Stepper = ({ step =1 , steps , dividerWidth =25 , onChange ,  })=>{
+    if (!steps || steps <= 1) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx(Flex, {
+        align: "center",
+        children: /*#__PURE__*/ _jsx(StepperControl, {
+            steps: steps,
+            step: step,
+            children: ({ variant , currentStep  })=>/*#__PURE__*/ _jsxs(Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(FlexItem, {
+                            children: /*#__PURE__*/ _jsx(Step, {
+                                variant: variant,
+                                text: currentStep,
+                                onClick: ()=>onChange && onChange(currentStep)
+                            })
+                        }),
+                        currentStep < steps && /*#__PURE__*/ _jsx(FlexItem, {
+                            width: dividerWidth,
+                            px: 3,
+                            children: /*#__PURE__*/ _jsx(Divider, {
+                                active: variant === 'active'
+                            })
+                        })
+                    ]
+                }, currentStep)
+        })
+    });
+};
+export { Stepper };

package/lib/es6/main/table/column.js

@@ -0,0 +1,16 @@
+export function columnFactory(el, mapping) {
+    switch(typeof el){
+        case 'string':
+            return mapping[el] || {
+                accessor: el
+            };
+        case 'number':
+            return {
+                width: el
+            };
+        case 'object':
+            return el;
+        default:
+            throw new Error(`unsupported table column type: ${typeof el}`);
+    }
+}

package/lib/es6/main/table/constants.js

@@ -0,0 +1,4 @@
+import { themes } from '@qiwi/pijma-core';
+export const borderColor = themes.orange.color.gray.light;
+export const tableHoverColor = 'rgba(0, 0, 0, 0.05)';
+export const activeBackground = '#fbe9b8bd';

package/lib/es6/main/table/index.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '@qiwi/pijma-core';
+import React from 'react';
+import { useTable } from 'react-table';
+import { activeBackground, borderColor, tableHoverColor } from './constants.js';
+const TrWrapper = styled('tr')`
+  background-color: ${(props)=>props.active ? activeBackground : 'none'};
+  ${(props)=>props.cursor ? 'cursor: ' + props.cursor + ';' : ''};
+`;
+const TableWrapper = styled.div`
+  width: 100%;
+  table {
+    width: 100%;
+    border-spacing: 0;
+    font-family: 'Museo Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    font-size: 10pt;
+    text-overflow: ellipsis;
+
+    overflow: hidden;
+    overflow-wrap: break-word;
+    thead {
+      tr th {
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        font-size: 10pt;
+        font-weight: 150;
+        color: rgb(102, 102, 102);
+        text-align: start;
+        user-select: none;
+        :first-child {
+          padding-left: 32px;
+        }
+        :last-child {
+          padding-right: 20px;
+        }
+      }
+      font-weight: 300;
+      border-bottom: 1px solid ${borderColor};
+    }
+
+    tbody {
+      tr {
+        :hover {
+          background-color: ${tableHoverColor};
+          cursor: pointer;
+        }
+        :last-child {
+          td {
+            border-bottom: 0;
+          }
+        }
+        td {
+          :first-child {
+            padding-left: 32px;
+          }
+          :last-child {
+            padding-right: 20px;
+          }
+        }
+      }
+    }
+
+    th,
+    td {
+      margin: 0;
+      padding: 0.25rem 12px;
+
+      :last-child {
+        border-right: 0;
+      }
+    }
+  }
+`;
+export const Table = ({ columns , data , onSelect , rowCursor , isActive  })=>{
+    // Use the state and functions returned from useTable to build your UI
+    const { getTableProps , getTableBodyProps , headerGroups , rows , prepareRow  } = useTable({
+        columns,
+        data
+    });
+    // Render the UI for your table
+    return /*#__PURE__*/ _jsx(TableWrapper, {
+        children: /*#__PURE__*/ _jsxs("table", {
+            ...getTableProps(),
+            children: [
+                /*#__PURE__*/ _jsx("thead", {
+                    children: headerGroups.map((headerGroup, i)=>/*#__PURE__*/ _jsx("tr", {
+                            ...headerGroup.getHeaderGroupProps(),
+                            children: headerGroup.headers.map((column, i)=>/*#__PURE__*/ _jsx("th", {
+                                    ...column.getHeaderProps(),
+                                    children: column.render('Header')
+                                }, i))
+                        }, i))
+                }),
+                /*#__PURE__*/ _jsx("tbody", {
+                    ...getTableBodyProps(),
+                    children: rows.map((row, i)=>{
+                        prepareRow(row);
+                        return /*#__PURE__*/ _jsx(TrWrapper, {
+                            "data-cy": 'table-row',
+                            ...row.getRowProps(),
+                            active: isActive ? isActive(row.original) : false,
+                            cursor: rowCursor,
+                            children: row.cells.map((cell, i)=>{
+                                return /*#__PURE__*/ _jsx("td", {
+                                    onClick: ()=>typeof onSelect === 'function' && onSelect(row.original),
+                                    ...cell.getCellProps(),
+                                    children: cell.render('Cell')
+                                }, i);
+                            })
+                        }, i);
+                    })
+                })
+            ]
+        })
+    });
+};
+export { columnFactory } from './column.js';

package/lib/es6/main/theme/color.js

@@ -0,0 +1,79 @@
+// The main QIWI color
+export const PRIMARY = '#ff8c00';
+export const HOVER = '#FF8200';
+export const BRAND = {
+    Primary: PRIMARY,
+    Secondary1: '#FF9E16',
+    Secondary2: '#FFB242',
+    Visa: '#1A1F71'
+};
+export const BACKGROUND = {
+    Primary: '#FFF',
+    Accented: '#F5F5F5',
+    Undercoat: '#F9F9F9',
+    Shadow: '#DDD',
+    Reject: '#f0dfcb',
+    Approved: '#dff0cb',
+    Pending: '#ffff99',
+    Balance: '#eff4fa',
+    ErrorLimit: '#fcf2f3',
+    REJECTBLOCK: '#fff6e9'
+};
+export const TEXT = {
+    Primary: '#000',
+    Secondary1: '#666',
+    Secondary2: '#999',
+    Secondary3: '#CCC',
+    Secondary4: '#EEE',
+    Error: '#D0021B',
+    Error2: '#9f2636',
+    Error1: '#ED4848',
+    Success: '#4BBD5C',
+    Success1: '#55D467'
+};
+export const LINK = {
+    Primary: '#0023A0'
+};
+export const LABEL = {};
+export const STATUS = {
+    NEW: '#000',
+    ERROR: '#D0021B',
+    REJECTED: '#945623',
+    APPROVAL_PENDING: '#ff8f11',
+    COMPLETED: '#4BBD5C',
+    CASHIER_APPROVAL_PENDING: '#dd6d00',
+    ACCOUNTANT_APPROVAL_PENDING: '#ff8f11',
+    ACCOUNTANT_APPROVED: '#4BBD5C',
+    PAYMENT_PENDING: '#ff8f11'
+};
+export const BACKGROUND_COMMENT = {
+    NEW: '#ddd',
+    ERROR: '#fae6e9',
+    REJECTED: '#d0bba9',
+    APPROVAL_PENDING: '#ff8f11',
+    COMPLETED: '#4BBD5C',
+    CASHIER_APPROVAL_PENDING: '#fff2e2',
+    ACCOUNTANT_APPROVAL_PENDING: '#ff8f11',
+    ACCOUNTANT_APPROVED: '#4BBD5C',
+    PAYMENT_PENDING: '#ff8f11'
+};
+export const USER_STATUS = {
+    DRAFT: '#666',
+    INVITED: '#4566aa',
+    INVITE_EXPIRED: '#4566aa',
+    PHONE_CONFIRMED: '#4a7c11',
+    INVITE_PHONE_CONFIRMED: '#4a7c11',
+    VERIFIED: '#4a7c11',
+    BLOCKED: '#d0021b',
+    PHONE_NOT_CONFIRMED: '#ff9d26'
+};
+export const POINT_STATUS = {
+    ACTIVE: '#19aa11',
+    BLOCKED: '#666'
+};
+export const SHADOW = {
+    Z1: ' 0px 1px 2px rgba(0, 0, 0, 0.12)',
+    Z2: ' 0px 8px 16px rgba(0, 0, 0, 0.8)',
+    Z3: ' 0px 14px 32px rgba(0, 0, 0, 0.16)',
+    Z4: ' 0px 28px 52px rgba(0, 0, 0, 0.16)'
+};

package/lib/es6/main/theme/dimen.js

@@ -0,0 +1,8 @@
+export const SITE_WIDTH = '1180px';
+export const SITE_INVITE_WIDTH = '780px';
+export const SPINNER_SIZE = '50px';
+export default {
+    SITE_WIDTH,
+    SITE_INVITE_WIDTH,
+    SPINNER_SIZE
+};

package/lib/es6/main/theme/grid.js

@@ -0,0 +1 @@
+export const PRIMARY_OFFSET = '40px';

package/lib/es6/main/theme/index.js

@@ -0,0 +1,3 @@
+export * as COLOR from './color.js';
+export * as TEXT from './text.js';
+export * as DIMEN from './dimen.js';

package/lib/es6/main/theme/text.js

@@ -0,0 +1,12 @@
+export const FONT_SIZE = {
+    Big: 24,
+    Medium: 20,
+    Normal: 17,
+    Small: 16,
+    XSmall: 10
+};
+export const LINE_HEIGHT = 1.4;
+export default {
+    FONT_SIZE,
+    LINE_HEIGHT
+};

package/lib/es6/main/trinary-check-icon/TrinaryCheckboxProps.js

@@ -0,0 +1 @@
+export { };

package/lib/es6/main/trinary-check-icon/index.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Path, Rect, Svg } from '@qiwi/pijma-core';
+import React from 'react';
+export const TrinaryCheckIcon = ({ focused , disabled , value  })=>{
+    return /*#__PURE__*/ _jsxs(Svg, {
+        viewBox: "0 0 24 24",
+        width: "24px",
+        height: "24px",
+        children: [
+            /*#__PURE__*/ _jsx(Rect, {
+                width: "18",
+                height: "18",
+                x: "3",
+                y: "3",
+                rx: "3",
+                ry: "3",
+                fill: "#e6e6e6",
+                transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
+            }),
+            /*#__PURE__*/ _jsx(Path, {
+                d: "M6 3h12a3 3 0 0 1 3 3v12a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3V6a3 3 0 0 1 3-3zm1 2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2H7z",
+                fill: focused && !disabled ? '#ff8c00' : 'transparent',
+                transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
+            }),
+            /*#__PURE__*/ _jsx(Rect, {
+                width: "10",
+                height: "3",
+                x: "7",
+                y: "10.5",
+                fillRule: "nonzero",
+                rx: "1.5",
+                fill: value === 1 ? disabled ? '#ccc' : '#000' : 'transparent',
+                transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
+            }),
+            /*#__PURE__*/ _jsx(Path, {
+                d: "M7.553 8.732a1.5 1.5 0 1 0-2.106 2.136l4.565 4.5a1.5 1.5 0 0 0 2.156-.051l9.957-10.8a1.5 1.5 0 1 0-2.206-2.034l-8.905 9.66-3.461-3.411z",
+                fill: value === 2 || value === true ? disabled ? '#ccc' : '#000' : 'transparent',
+                transition: "all 100ms cubic-bezier(0.4, 0.0, 0.2, 1)"
+            })
+        ]
+    });
+};
+export default TrinaryCheckIcon;

package/lib/es6/main/user-profile/UserProfileProps.js

@@ -0,0 +1 @@
+export { };

package/lib/es6/main/user-profile/index.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Flex, Icon, styled } from '@qiwi/pijma-core';
+import React, { Component } from 'react';
+const IconWrapper = styled('div')`
+  width: 24px;
+  height: 24px;
+  float: left;
+  margin-left: 20px;
+  cursor: pointer;
+`;
+const ProfileWrapper = styled('div')``;
+const Username = styled('div')``;
+export class UserProfile extends Component {
+    render() {
+        const { onClick , userName  } = this.props;
+        return /*#__PURE__*/ _jsx(ProfileWrapper, {
+            children: /*#__PURE__*/ _jsxs(Flex, {
+                children: [
+                    /*#__PURE__*/ _jsx(Username, {
+                        children: userName
+                    }),
+                    /*#__PURE__*/ _jsx(IconWrapper, {
+                        onClick: onClick,
+                        children: /*#__PURE__*/ _jsx(Icon, {
+                            name: "logout"
+                        })
+                    })
+                ]
+            })
+        });
+    }
+}

package/lib/es6/test/amount.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Amount } from '../main/index.js';
+describe('Amount', ()=>{
+    it('is properly exported from lib index', ()=>{
+        expect(Amount).not.toBeUndefined();
+    });
+    it('renders correctly', ()=>{
+        const amount = renderer.create(/*#__PURE__*/ _jsx(Amount, {
+            value: "100000",
+            currency: "RUB"
+        })).toJSON();
+        expect(amount).toMatchSnapshot();
+    });
+});

package/lib/es6/test/checkbox.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { Checkbox } from '../main/index.js';
+describe('Checkbox', ()=>{
+    it('is properly exported from lib index', ()=>{
+        expect(Checkbox).not.toBeUndefined();
+    });
+    it('renders correctly unchecked value in trinary mode', ()=>{
+        const checkbox = renderer.create(/*#__PURE__*/ _jsx(Checkbox, {
+            value: 0,
+            trinary: true
+        })).toJSON();
+        expect(checkbox).toMatchSnapshot();
+    });
+    it('renders correctly half-checked value in trinary mode', ()=>{
+        const checkbox = renderer.create(/*#__PURE__*/ _jsx(Checkbox, {
+            value: 1,
+            trinary: true
+        })).toJSON();
+        expect(checkbox).toMatchSnapshot();
+    });
+    it('renders correctly checked value in trinary mode', ()=>{
+        const checkbox = renderer.create(/*#__PURE__*/ _jsx(Checkbox, {
+            value: 2,
+            trinary: true
+        })).toJSON();
+        expect(checkbox).toMatchSnapshot();
+    });
+    it('renders correctly unchecked value', ()=>{
+        const checkbox = renderer.create(/*#__PURE__*/ _jsx(Checkbox, {
+            value: false
+        })).toJSON();
+        expect(checkbox).toMatchSnapshot();
+    });
+    it('renders correctly checked value', ()=>{
+        const checkbox = renderer.create(/*#__PURE__*/ _jsx(Checkbox, {
+            value: true
+        })).toJSON();
+        expect(checkbox).toMatchSnapshot();
+    });
+});