feat(picker-button): add compoonent PickerButton

packages/picker-button/package.json

@@ -0,0 +1,24 @@
+{
+    "name": "@alfalab/core-components-picker-button",
+    "version": "1.0.1",
+    "description": "Picker button component",
+    "keywords": [],
+    "license": "ISC",
+    "main": "dist/index.js",
+    "files": [
+        "dist"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0",
+        "react-dom": "^16.9.0"
+    },
+    "dependencies": {
+        "classnames": "^2.2.6",
+        "@alfalab/core-components-button": "^1.7.1",
+        "@alfalab/core-components-select": "^4.2.5",
+        "@alfalab/icons-glyph": "^1.70.0"
+    }
+}

packages/picker-button/src/Component.stories.mdx

@@ -0,0 +1,109 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { text, boolean, select } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { Container, Row, Col } from 'storybook/blocks/grid';
+import { ComponentHeader } from 'storybook/blocks/component-header';
+
+import { Button } from '../../button/src';
+import { PickerButton } from './Component';
+import { name, version } from '../package.json';
+
+export const options = [
+    { key: '1', content: 'Neptunium'},
+    { key: '2', content: 'Plutonium' },
+    { key: '3', content: 'Americium' },
+    { key: '4', content: 'Curium' },
+    { key: '5', content: 'Berkelium' },
+    { key: '6', content: 'Californium' },
+    { key: '7', content: 'Einsteinium' },
+    { key: '8', content: 'Fermium' },
+    { key: '9', content: 'Mendelevium' },
+    { key: '10', content: 'Nobelium' },
+    { key: '11', content: 'Lawrencium' },
+    { key: '12', content: 'Rutherfordium' },
+    { key: '13', content: 'Dubnium' },
+    { key: '14', content: 'Seaborgium' },
+    { key: '15', content: 'Bohrium' },
+];
+
+<Meta
+    title='Компоненты'
+    id='components/picker-button'
+    component={PickerButton}
+    parameters={{ 'theme-switcher': { themes: ['click'] } }}
+/>
+
+
+<!-- Canvas -->
+
+<Story name='Picker button'>
+    <PickerButton
+        options={options}
+        multiple={true}
+        allowUnselect={true}
+        label={text('label', 'some label')}
+        disabled={boolean('disabled', false)}
+        loading={boolean('loading', false)}
+        view={select('view', ['link', 'filled', 'primary', 'secondary', 'outlined', 'ghost'], 'primary')}
+        size={select('size', ['xs', 's', 'm'], 'm')}
+    />
+</Story>
+
+
+<!-- Docs -->
+
+<ComponentHeader
+    name='PickerButton'
+    version={version}
+    package='@alfalab/core-components-picker-button'
+    stage={1}
+/>
+
+```tsx
+import { PickerButton } from '@alfalab/core-components-picker-button';
+```
+
+Компонент PickerButton. Использует селект, но с кнопкой вместо стандартного Field.
+Кнопка содержит несколько команд, объединенных по смыслу. Используется для скрытия редких или одинаковых по контексту действий.
+
+<PickerButton options={options} label='Picker Button' />
+
+## Примеры
+
+PickerButton `size=xs`:
+<PickerButton label='Picker Button' options={options} size='xs' />
+<div style={{height: 32}} />
+
+PickerButton `size=s`:
+<PickerButton label='Picker Button' options={options} size='s' />
+<div style={{height: 32}} />
+
+PickerButton `size=m`:
+<PickerButton label='Picker Button' options={options} size='m' />
+<div style={{height: 32}} />
+
+PickerButton `disaled=tue`:
+<PickerButton label='Picker Button' options={options} disabled={true} />
+<div style={{height: 32}} />
+
+PickerButton `loading=true`:
+<PickerButton label='Picker Button' options={options} loading={true} />
+<div style={{height: 32}} />
+
+PickerButton `view=primary`:
+<PickerButton label='Picker Button' options={options} view='primary' />
+<div style={{height: 32}} />
+
+PickerButton `view=secondary`:
+<PickerButton label='Picker Button' options={options} view='secondary' />
+<div style={{height: 32}} />
+
+PickerButton `view=outlined`:
+<PickerButton label='Picker Button' options={options} view='outlined' />
+<div style={{height: 32}} />
+
+PickerButton `view=ghost`:
+<PickerButton label='Picker Button' options={options} view='ghost' />
+<div style={{height: 32}} />
+
+<Props of={PickerButton} />

packages/picker-button/src/Component.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from 'react';
+import { ButtonProps } from '@alfalab/core-components-button';
+
+import {
+    BaseSelectProps,
+    OptionsList as DefaultOptionsList,
+    Option as DefaultOption,
+    Optgroup as DefaultOptgroup,
+    BaseSelect,
+} from '@alfalab/core-components-select';
+
+import { Field as DefaultField } from './field';
+
+export type PickerButtonProps = Omit<
+    BaseSelectProps,
+    'Field' | 'placeholder' | 'Arrow' | 'autocomplete'
+> &
+    Pick<ButtonProps, 'view' | 'loading'>;
+
+export const PickerButton = forwardRef<HTMLInputElement, PickerButtonProps>(
+    (
+        {
+            OptionsList = DefaultOptionsList,
+            Optgroup = DefaultOptgroup,
+            Option = DefaultOption,
+            closeOnSelect = false,
+            view,
+            loading,
+            ...restProps
+        },
+        ref,
+    ) => (
+        <BaseSelect
+            ref={ref}
+            closeOnSelect={closeOnSelect}
+            Option={Option}
+            Field={DefaultField}
+            fieldProps={{
+                view,
+                loading,
+            }}
+            Optgroup={Optgroup}
+            OptionsList={OptionsList}
+            {...restProps}
+        />
+    ),
+);

packages/picker-button/src/field/Component.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import cn from 'classnames';
+import { Button, ButtonProps } from '@alfalab/core-components-button';
+import { FieldProps as BaseFieldProps } from '@alfalab/core-components-select/src/typings';
+import { ChevronDownMIcon } from '@alfalab/icons-glyph';
+
+import styles from './index.module.css';
+
+type FieldProps = BaseFieldProps & ButtonProps;
+
+export const Field = ({
+    size = 'm',
+    open,
+    multiple,
+    error,
+    hint,
+    label,
+    placeholder,
+    selected,
+    rightAddons,
+    Arrow,
+    innerProps,
+    className,
+    ...restProps
+}: FieldProps) => {
+    return (
+        // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        // @ts-ignore
+        <Button
+            rightAddons={
+                <span className={cn(styles[size], styles.iconContainer, open && styles.open)}>
+                    <ChevronDownMIcon className={styles.icon} />
+                </span>
+            }
+            block={true}
+            size={size}
+            {...restProps}
+            {...innerProps}
+        >
+            {label}
+        </Button>
+    );
+};

packages/picker-button/src/field/index.module.css

@@ -0,0 +1,28 @@
+@import '../../../themes/src/default.css';
+
+.iconContainer {
+    display: flex;
+    transition: transform 0.2s ease;
+    transform: rotateZ(0deg);
+
+    & svg {
+        height: inherit;
+    }
+}
+
+.icon {
+    width: '100%';
+}
+.xs {
+    width: 18px;
+}
+
+.s,
+.m,
+.l {
+    width: 24px;
+}
+
+.open {
+    transform: rotateZ(180deg);
+}

packages/picker-button/src/field/index.ts

@@ -0,0 +1 @@
+export * from './Component';

packages/picker-button/src/index.ts

@@ -0,0 +1 @@
+export * from './Component';

packages/picker-button/tsconfig.json

@@ -0,0 +1,13 @@
+{
+    "include": ["src", "../../typings"],
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "outDir": "dist",
+        "rootDirs": ["src"],
+        "baseUrl": ".",
+        "paths": {
+            "@alfalab/core-components-*": ["../*/src"]
+        }
+    },
+    "references": [{ "path": "../select" }, { "path": "../button" }]
+}