@salutejs/plasma-new-hope 0.133.2-canary.1396.10611246152.0 → 0.134.0-canary.1352.10609199302.0

package/emotion/es/examples/sds_engineer/components/Drawer/Drawer.stories.tsx

@@ -0,0 +1,218 @@
+import React, { useState } from 'react';
+import styled from '@emotion/styled';
+import type { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { Button } from '../Button/Button';
+import { WithTheme } from '../../../_helpers';
+import { Heading } from '../../../typograpy/components/Heading/Heading';
+import { IconDone } from '../../../../components/_Icon';
+import { SSRProvider } from '../../../../components/SSRProvider';
+import { PopupProvider } from '../Popup/Popup';
+import type { ClosePlacementType } from '../../../../components/Drawer';
+
+import { Drawer, DrawerContent, DrawerFooter, DrawerHeader } from './Drawer';
+
+export default {
+    title: 'sds_engineer/Drawer',
+    decorators: [WithTheme],
+    argTypes: {
+        placement: {
+            options: ['top', 'bottom', 'right', 'left'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'center' } },
+        },
+        offsetX: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        offsetY: {
+            control: {
+                type: 'number',
+            },
+            table: { defaultValue: { summary: 0 } },
+        },
+        closeOnEsc: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closeOnOverlayClick: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        withBlur: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: false } },
+        },
+        showHeader: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        showFooter: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        showActions: {
+            control: {
+                type: 'boolean',
+            },
+            table: { defaultValue: { summary: true } },
+        },
+        closePlacement: {
+            options: ['right', 'left'],
+            control: {
+                type: 'select',
+            },
+            table: { defaultValue: { summary: 'right' } },
+        },
+        borderRadius: {
+            options: ['none', 'default'],
+            control: {
+                type: 'select',
+            },
+        },
+    },
+} as Meta;
+
+type StoryDrawerProps = ComponentProps<typeof Drawer> & {
+    placement: string;
+    offsetX: number;
+    offsetY: number;
+    closeOnEsc: boolean;
+    closeOnOverlayClick: boolean;
+    showHeader: boolean;
+    showFooter: boolean;
+    showActions: boolean;
+    closePlacement: string;
+    hasClose: boolean;
+    asModal: boolean;
+};
+
+const StyledWrapper = styled.div`
+    height: 100%;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+`;
+
+const StyledContentWrapper = styled.div`
+    height: 80%;
+    display: flex;
+    flex-grow: 1;
+`;
+
+const StyledContent = styled.div`
+    background: #a8a875;
+    flex-grow: 1;
+    height: 100%;
+`;
+
+const StyledSection = styled.div`
+    background: #808080;
+    min-height: 20%;
+`;
+
+const StyledIconButton = styled(Button)`
+    position: relative;
+    width: 1.5rem;
+    height: 1.5rem;
+`;
+
+const StoryDrawerDemo = ({
+    showHeader,
+    showFooter,
+    showActions,
+    closePlacement,
+    offsetX,
+    offsetY,
+    ...rest
+}: StoryDrawerProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <SSRProvider>
+            <PopupProvider>
+                <StyledWrapper>
+                    <StyledSection>
+                        <Button text="Открыть панель" onClick={() => setIsOpen(true)} />
+                    </StyledSection>
+                    <StyledContentWrapper>
+                        <Drawer
+                            frame="theme-root"
+                            opened={isOpen}
+                            offset={[offsetX, offsetY]}
+                            onClose={() => setIsOpen(false)}
+                            {...rest}
+                        >
+                            <DrawerHeader
+                                closePlacement={closePlacement as ClosePlacementType}
+                                actions={
+                                    showActions && (
+                                        <StyledIconButton size="s" view="clear">
+                                            <IconDone size="s" />
+                                        </StyledIconButton>
+                                    )
+                                }
+                                onClose={() => setIsOpen(false)}
+                            >
+                                {showHeader && <Heading size="h3">Header</Heading>}
+                            </DrawerHeader>
+                            <DrawerContent>Content</DrawerContent>
+                            {showFooter && (
+                                <DrawerFooter>
+                                    <Heading size="h3">Footer</Heading>
+                                </DrawerFooter>
+                            )}
+                        </Drawer>
+                        <StyledContent>
+                            <Heading style={{ margin: '2rem' }} size="h2">
+                                Some basic content
+                            </Heading>
+                        </StyledContent>
+                    </StyledContentWrapper>
+                    <StyledSection />
+                </StyledWrapper>
+                <StyledContent>
+                    <Heading style={{ margin: '2rem' }} size="h2">
+                        Some basic content
+                    </Heading>
+                </StyledContent>
+            </PopupProvider>
+        </SSRProvider>
+    );
+};
+
+export const DrawerDemo: StoryObj<StoryDrawerProps> = {
+    args: {
+        placement: 'right',
+        withBlur: false,
+        closeOnEsc: true,
+        closeOnOverlayClick: true,
+        offsetX: 0,
+        offsetY: 0,
+        showHeader: true,
+        showFooter: true,
+        showActions: true,
+        hasClose: true,
+        asModal: true,
+        closePlacement: 'right',
+        width: '25vw',
+        height: '100dvh',
+        borderRadius: 'none',
+    },
+    render: (args) => <StoryDrawerDemo {...args} />,
+};

package/emotion/es/examples/sds_engineer/components/Grid/Grid.config.js

@@ -0,0 +1,16 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import { css } from '@emotion/react';
+import { getBaseGridView, gridTokens } from '../../../../components/Grid';
+export var config = {
+  defaults: {
+    view: 'default'
+  },
+  variations: {
+    view: {
+      "default": /*#__PURE__*/css( /*#__PURE__*/getBaseGridView( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty( /*#__PURE__*/_defineProperty({}, gridTokens.smallMMinWidth, 0), gridTokens.mediumSMinWidth, '35rem'), gridTokens.mediumMMinWidth, '49.125rem'), gridTokens.largeSMinWidth, '60rem'), gridTokens.largeMMinWidth, '75rem'), 'default'), ";", gridTokens.smallMColsCount, ":6;", gridTokens.smallMGap, ":0.5rem;", gridTokens.smallMMargin, ":1rem;", gridTokens.smallMMinWidth, ":0;", gridTokens.mediumSColsCount, ":12;", gridTokens.mediumSGap, ":0.5rem;", gridTokens.mediumSMargin, ":1.25rem;", gridTokens.mediumSMinWidth, ":35rem;", gridTokens.mediumMColsCount, ":18;", gridTokens.mediumMGap, ":0.5rem;", gridTokens.mediumMMargin, ":1.75rem;", gridTokens.mediumMMinWidth, ":49.125rem;", gridTokens.largeSColsCount, ":24;", gridTokens.largeSGap, ":0.5rem;", gridTokens.largeSMargin, ":2.5rem;", gridTokens.largeSMinWidth, ":60rem;", gridTokens.largeMColsCount, ":30;", gridTokens.largeMGap, ":0.5rem;", gridTokens.largeMMargin, ":4rem;", gridTokens.largeMMinWidth, ":75rem;;label:plasma-new-hope__default;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3Nkc19lbmdpbmVlci9jb21wb25lbnRzL0dyaWQvR3JpZC5jb25maWcudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBVXdCIiwiZmlsZSI6Ii4uLy4uLy4uLy4uLy4uLy4uL3NyYy1lbW90aW9uL2V4YW1wbGVzL3Nkc19lbmdpbmVlci9jb21wb25lbnRzL0dyaWQvR3JpZC5jb25maWcudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5cbmltcG9ydCB7IGdldEJhc2VHcmlkVmlldywgZ3JpZFRva2VucyB9IGZyb20gJy4uLy4uLy4uLy4uL2NvbXBvbmVudHMvR3JpZCc7XG5cbmV4cG9ydCBjb25zdCBjb25maWcgPSB7XG4gICAgZGVmYXVsdHM6IHtcbiAgICAgICAgdmlldzogJ2RlZmF1bHQnLFxuICAgIH0sXG4gICAgdmFyaWF0aW9uczoge1xuICAgICAgICB2aWV3OiB7XG4gICAgICAgICAgICBkZWZhdWx0OiBjc3NgXG4gICAgICAgICAgICAgICAgJHtnZXRCYXNlR3JpZFZpZXcoXG4gICAgICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgICAgICAgIFtncmlkVG9rZW5zLnNtYWxsTU1pbldpZHRoXTogMCxcbiAgICAgICAgICAgICAgICAgICAgICAgIFtncmlkVG9rZW5zLm1lZGl1bVNNaW5XaWR0aF06ICczNXJlbScsXG4gICAgICAgICAgICAgICAgICAgICAgICBbZ3JpZFRva2Vucy5tZWRpdW1NTWluV2lkdGhdOiAnNDkuMTI1cmVtJyxcbiAgICAgICAgICAgICAgICAgICAgICAgIFtncmlkVG9rZW5zLmxhcmdlU01pbldpZHRoXTogJzYwcmVtJyxcbiAgICAgICAgICAgICAgICAgICAgICAgIFtncmlkVG9rZW5zLmxhcmdlTU1pbldpZHRoXTogJzc1cmVtJyxcbiAgICAgICAgICAgICAgICAgICAgfSxcbiAgICAgICAgICAgICAgICAgICAgJ2RlZmF1bHQnLFxuICAgICAgICAgICAgICAgICl9O1xuXG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLnNtYWxsTUNvbHNDb3VudH06IDY7XG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLnNtYWxsTUdhcH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMuc21hbGxNTWFyZ2lufTogMXJlbTtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMuc21hbGxNTWluV2lkdGh9OiAwO1xuXG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLm1lZGl1bVNDb2xzQ291bnR9OiAxMjtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubWVkaXVtU0dhcH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubWVkaXVtU01hcmdpbn06IDEuMjVyZW07XG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLm1lZGl1bVNNaW5XaWR0aH06IDM1cmVtO1xuXG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLm1lZGl1bU1Db2xzQ291bnR9OiAxODtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubWVkaXVtTUdhcH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubWVkaXVtTU1hcmdpbn06IDEuNzVyZW07XG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLm1lZGl1bU1NaW5XaWR0aH06IDQ5LjEyNXJlbTtcblxuICAgICAgICAgICAgICAgICR7Z3JpZFRva2Vucy5sYXJnZVNDb2xzQ291bnR9OiAyNDtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubGFyZ2VTR2FwfTogMC41cmVtO1xuICAgICAgICAgICAgICAgICR7Z3JpZFRva2Vucy5sYXJnZVNNYXJnaW59OiAyLjVyZW07XG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLmxhcmdlU01pbldpZHRofTogNjByZW07XG5cbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubGFyZ2VNQ29sc0NvdW50fTogMzA7XG4gICAgICAgICAgICAgICAgJHtncmlkVG9rZW5zLmxhcmdlTUdhcH06IDAuNXJlbTtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubGFyZ2VNTWFyZ2lufTogNHJlbTtcbiAgICAgICAgICAgICAgICAke2dyaWRUb2tlbnMubGFyZ2VNTWluV2lkdGh9OiA3NXJlbTtcbiAgICAgICAgICAgIGAsXG4gICAgICAgIH0sXG4gICAgfSxcbn07XG4iXX0= */"))
+    }
+  }
+};

package/emotion/es/examples/sds_engineer/components/Grid/Grid.js

@@ -0,0 +1,6 @@
+import { gridConfig } from '../../../../components/Grid';
+import { component, mergeConfig } from '../../../../engines';
+import { config } from './Grid.config';
+export { Row, Col } from '../../../../components/Grid';
+var mergedConfig = /*#__PURE__*/mergeConfig(gridConfig, config);
+export var Grid = /*#__PURE__*/component(mergedConfig);

package/emotion/es/examples/sds_engineer/components/Grid/Grid.stories.tsx

@@ -0,0 +1,122 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import type { Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Col, Grid, Row } from './Grid';
+
+const meta: Meta = {
+    title: 'sds_engineer/Grid',
+    decorators: [WithTheme],
+};
+
+export default meta;
+
+const StyledContent = styled.div`
+    height: 10rem;
+    width: 100%;
+    background: #f5f5dc;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--inverse-text-primary);
+`;
+
+export const Default = {
+    args: {
+        colsCount: 6,
+    },
+    render: ({ colsCount }) => (
+        <>
+            <Grid>
+                <Row>
+                    {Array(colsCount)
+                        .fill(true)
+                        .map((_, i) => (
+                            <Col size={1} key={colsCount + i}>
+                                <StyledContent>{i + 1}</StyledContent>
+                            </Col>
+                        ))}
+                </Row>
+            </Grid>
+        </>
+    ),
+};
+
+export const CustomColsPosition = {
+    render: () => (
+        <Grid>
+            <Row>
+                <Col
+                    smallM={{
+                        size: 1,
+                    }}
+                    mediumS={{
+                        size: 2,
+                    }}
+                    mediumM={{
+                        size: 3,
+                        offset: 1,
+                    }}
+                    largeS={{
+                        size: 4,
+                        offset: 1,
+                    }}
+                    largeM={{
+                        size: 5,
+                        offset: 2,
+                    }}
+                >
+                    <StyledContent>1</StyledContent>
+                </Col>
+                <Col
+                    smallM={{
+                        size: 1,
+                        offset: 1,
+                    }}
+                    mediumS={{
+                        size: 2,
+                        offset: 1,
+                    }}
+                    mediumM={{
+                        size: 4,
+                    }}
+                    largeS={{
+                        size: 4,
+                        offset: 3,
+                    }}
+                    largeM={{
+                        size: 5,
+                        offset: 1,
+                    }}
+                >
+                    <StyledContent>2</StyledContent>
+                </Col>
+                <Col
+                    smallM={{
+                        size: 1,
+                    }}
+                    mediumS={{
+                        size: 2,
+                        offset: 1,
+                    }}
+                    mediumM={{
+                        size: 2,
+                        offset: 2,
+                    }}
+                    largeS={{
+                        size: 3,
+                        offset: 4,
+                    }}
+                    largeM={{
+                        size: 6,
+                        offset: 3,
+                    }}
+                >
+                    <StyledContent>3</StyledContent>
+                </Col>
+            </Row>
+        </Grid>
+    ),
+};

package/emotion/es/examples/sds_engineer/components/Image/Image.js

@@ -0,0 +1,4 @@
+import { imageConfig } from '../../../../components/Image';
+import { component, mergeConfig } from '../../../../engines';
+var mergedConfig = /*#__PURE__*/mergeConfig(imageConfig);
+export var Image = /*#__PURE__*/component(mergedConfig);

package/emotion/es/examples/sds_engineer/components/Image/Image.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';
+
+import { Image } from './Image';
+import type { ImageProps, Ratio } from './Image';
+
+const bases = ['div', 'img'];
+
+const ratios = ['1/1', '3/4', '4/3', '9/16', '16/9', '1/2', '2/1'];
+
+const meta: Meta<ImageProps> = {
+    title: 'sds_engineer/Image',
+    component: Image,
+    decorators: [InSpacingDecorator],
+    argTypes: {
+        base: {
+            options: bases,
+            control: {
+                type: 'inline-radio',
+            },
+        },
+        ratio: {
+            options: ratios,
+            control: {
+                type: 'select',
+            },
+        },
+        ...disableProps(['src', 'alt', 'customRatio']),
+    },
+};
+
+export default meta;
+
+export const Default: StoryObj<ImageProps & { ratio: Ratio }> = {
+    args: {
+        base: 'div',
+        src: './images/320_320_9.jpg',
+        alt: 'картинка для примера фоном',
+        width: '200px',
+        height: '200px',
+    },
+    render: (args) => (
+        <div style={{ maxWidth: '10rem' }}>
+            <Image {...args} />
+        </div>
+    ),
+};