feat: Add sdds-dfa-docs

.github/workflows/documentation-deploy-prod.yml

@@ -57,6 +57,11 @@ jobs:
         run: |
           npm run build --prefix="./website/sdds-serv-docs"
           cp -R ./website/sdds-serv-docs/build ./s3_build/next-${{ github.sha }}/sdds-serv
+
+      - name: SDDS-DFA Docs
+        run: |
+          npm run build --prefix="./website/sdds-dfa-docs"
+          cp -R ./website/sdds-dfa-docs/build ./s3_build/next-${{ github.sha }}/sdds-dfa
 
       - name: CALDERA-ONLINE Docs
         run: |

.github/workflows/documentation-deploy-stage-demo.yml

@@ -43,6 +43,11 @@ jobs:
           npm run build --prefix="./website/sdds-serv-docs"
           cp -R ./website/sdds-serv-docs/build ./s3_build/sdds-serv
 
+      - name: SDDS DFA Docs
+        run: |
+          npm run build --prefix="./website/sdds-dfa-docs"
+          cp -R ./website/sdds-dfa-docs/build ./s3_build/sdds-dfa
+
       - name: CALDERA-ONLINE Docs
         run: |
           npm run build --prefix="./website/caldera-online-docs"

.github/workflows/documentation-deploy-stage-dev.yml

@@ -46,6 +46,11 @@ jobs:
           npm run build --prefix="./website/sdds-serv-docs"
           cp -R ./website/sdds-serv-docs/build ./s3_build/next-${{ github.sha }}/sdds-serv
 
+      - name: Plasma SDDS DFA Docs
+        run: |
+          npm run build --prefix="./website/sdds-dfa-docs"
+          cp -R ./website/sdds-dfa-docs/build ./s3_build/next-${{ github.sha }}/sdds-dfa
+
       - name: Plasma UI Storybook
         run: |
           npm run storybook:build --prefix="./packages/plasma-ui"

packages/plasma-new-hope/src/components/DatePicker/DatePicker.template-doc.mdx

@@ -13,16 +13,16 @@ import { PropsTable, Description } from '@site/src/components';
 Компонент `DatePicker` представляет собой поле ввода даты с выпадающим календарем.
 
 Размер `DatePicker` задаётся с помощью свойства `size`. 
-Возможные значения свойтсва: `"l"`, `"m"`, `"s"`, `"xs"`.
+Возможные значения свойства: `"l"`, `"m"`, `"s"`, `"xs"`.
 
 ```tsx live
-import React, {useState} from 'react';
-import { DatePicker, IconButton } from '@salutejs/{{ package }}';
+import React from 'react';
+import { DatePicker } from '@salutejs/{{ package }}';
 import { IconDone } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div style={{ height: "450px" }}>
+        <div style=\{{ height: "450px" }}>
             <DatePicker
                 label="Лейбл"
                 leftHelper="Подсказка к полю"
@@ -41,13 +41,13 @@ export function App() {
 Свойство `maskWithFormat` позволяет маскировать ввод:
 
 ```tsx live
-import React, {useState} from 'react';
-import { DatePicker, IconButton } from '@salutejs/{{ package }}';
+import React from 'react';
+import { DatePicker } from '@salutejs/{{ package }}';
 import { IconDone } from '@salutejs/plasma-icons';
 
 export function App() {
     return (
-        <div style={{ height: "450px" }}>
+        <div style=\{{ height: "450px" }}>
             <DatePicker
                 label="Лейбл"
                 leftHelper="Подсказка к полю"
@@ -67,7 +67,7 @@ export function App() {
 
 ```tsx live
 import React, {useState} from 'react';
-import { DatePicker, IconButton } from '@salutejs/{{ package }}';
+import { DatePicker } from '@salutejs/{{ package }}';
 import { IconDone } from '@salutejs/plasma-icons';
 
 export function App() {
@@ -89,7 +89,7 @@ export function App() {
     };
 
     return (
-        <div style={{ height: "450px" }}>
+        <div style=\{{ height: "450px" }}>
             <DatePicker
                 isOpen={isOpen}
                 label="Лейбл"
@@ -120,7 +120,7 @@ export function App() {
 Календарь может быть одиночным или двойным. За это отвечает свойство `isDoubleCalendar`.
 
 ```tsx live
-import React, {useState} from 'react';
+import React from 'react';
 import { DatePickerRange, IconButton } from '@salutejs/{{ package }}';
 import { IconDone } from '@salutejs/plasma-icons';
 
@@ -134,7 +134,7 @@ export function App() {
     };
 
     return (
-        <div style={{ height: "500px" }}>
+        <div style=\{{ height: "500px" }}>
             <DatePickerRange
                 size="l"
                 label="Лейбл"
@@ -147,4 +147,4 @@ export function App() {
         </div>
     );
 }
-```
+```

packages/plasma-new-hope/src/components/Header/Header.template-doc.mdx

@@ -0,0 +1,78 @@
+---
+id: header
+title: Header
+---
+
+import { PropsTable, Description } from '@site/src/components';
+
+## Компоненты для собственной сборки шапки
+Рекомендуется использовать компонент `Header`.
+Если вам нужно больше контроля за версткой шапки,
+используйте составные части, где корневым узлом будет `HeaderRoot`.
+
+### HeaderRoot
+<Description name="HeaderRoot" />
+<PropsTable name="HeaderRoot" />
+
+### HeaderArrow
+<Description name="HeaderArrow" />
+<PropsTable name="HeaderArrow" />
+
+### HeaderLogo
+<Description name="HeaderLogo" />
+<PropsTable name="HeaderLogo" />
+
+### Пример
+
+```tsx live
+import React from 'react';
+import {
+    HeaderRoot,
+    HeaderLogo,
+    HeaderTitle,
+    HeaderContent,
+    HeaderArrow,
+} from '@salutejs/{{ package }}';
+
+export function App() {
+    const [isBack, setIsBack] = useState(true);
+
+    const onBackClick = () => {
+        setIsBack(false);
+    };
+
+    const onMinimizeClick = () => {
+        setIsBack(true);
+    };
+
+    const props = {
+        view: 'default',
+        size: 'm',
+        title: 'Header title text',
+        subtitle: 'Subtitle text',
+        label: 'Label text',
+        gradientColor: '#F69555',
+        contentItemsNumber: 3,
+        enableIcons: true,
+    };
+
+    return (
+       <div style=\{{ position: 'relative', display: 'block', padding: '0 16px' }}>
+            <HeaderRoot {...props} style=\{{ marginLeft: '40px' }}>
+                {isBack ? (
+                    <HeaderArrow onClick={onBackClick} />
+                ) : (
+                    <HeaderArrow arrow="minimize" onClick={onMinimizeClick} />
+                )}
+                <HeaderLogo src="/{{ package }}/images/320_320_12.jpg" alt="Logo" />
+                <HeaderTitle>{props.title}</HeaderTitle>
+                <HeaderContent>
+                    <div>This is content</div>
+                </HeaderContent>
+            </HeaderRoot>
+        </div>
+    );
+}
+```
+
+

packages/plasma-new-hope/src/components/Popover/Popover.template-doc.mdx

@@ -18,24 +18,6 @@ import { Popover, Button } from '@salutejs/{{ package }}';
 export function App() {
     const [isOpen, setIsOpen] = React.useState(false);
 
-    const StyledArrow = styled.div`
-        visibility: hidden;
-
-        &,
-        &::before {
-            position: absolute;
-            width: 0.5rem;
-            height: 0.5rem;
-            background: ${surfaceSolidTertiary};
-        }
-
-        &::before {
-            visibility: visible;
-            content: '';
-            transform: rotate(45deg);
-        }
-    `;
-
     const StyledContent = styled.div`
         background: ${surfaceSolidTertiary};
         padding: 1rem;
@@ -54,7 +36,7 @@ export function App() {
                 id="popover"
                 target={<Button>Target</Button>}
                 offset={[0, 6]}
-                arrow={<StyledArrow/>}
+                hasArrow
                 placement='bottom'
                 trigger='click'
                 closeOnOverlayClick

packages/plasma-new-hope/src/components/Skeleton/Skeleton.template-doc.mdx

@@ -18,7 +18,7 @@ import { LineSkeleton } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <LineSkeleton size="headline3" />
+        <LineSkeleton size="h3" />
     );
 }
 ```
@@ -48,7 +48,7 @@ import { TextSkeleton } from '@salutejs/{{ package }}';
 
 export function App() {
     return (
-        <TextSkeleton size="paragraph1" lines={4} />
+        <TextSkeleton size="textM" lines={4} />
     );
 }
 ```

packages/sdds-dfa/README.md

@@ -14,7 +14,7 @@
 
 ```bash
 $ npm install --save react react-dom
-$ npm install --save styled-components@5.1.1
+$ npm install --save styled-components@5.3.1
 $ npm install --save @salutejs/sdds-dfa @salutejs/sdds-themes
 ```
 
@@ -42,7 +42,7 @@ export const GlobalStyle = () => (
 -   Если вы используете [Create React App](https://create-react-app.dev), делайте вызов внутри `src/index.tsx`.
 -   Если вы используете [Next.js](https://nextjs.org/), создайте файл `pages/_app.tsx` и подключите стили в нем.
 
-Для корректной работы dfaer side rendering приложение нужно обернуть `SSRProvider` (доступен в sdds-dfa);
+Для корректной работы `SSR - server side rendering` - приложение нужно обернуть в `SSRProvider` (доступен в `sdds-dfa`);
 
 ### Использование компонентов
 

packages/sdds-dfa/api/sdds-dfa.api.md

@@ -101,11 +101,7 @@ import { h4 } from '@salutejs/sdds-themes/tokens';
 import { h4Bold } from '@salutejs/sdds-themes/tokens';
 import { h5 } from '@salutejs/sdds-themes/tokens';
 import { h5Bold } from '@salutejs/sdds-themes/tokens';
-import { HeaderContent } from '@salutejs/plasma-new-hope/styled-components';
-import { HeaderLogoProps } from '@salutejs/plasma-new-hope/styled-components';
-import { HeaderTitle } from '@salutejs/plasma-new-hope/styled-components';
 import { HTMLAttributes } from 'react';
-import { HtmlHTMLAttributes } from 'react';
 import { ImageProps } from '@salutejs/plasma-new-hope/styled-components';
 import { ImgHTMLAttributes } from 'react';
 import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components';
@@ -158,8 +154,6 @@ import { SegmentGroupProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentItemProps } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentProvider } from '@salutejs/plasma-new-hope/styled-components';
 import { SegmentProviderProps } from '@salutejs/plasma-new-hope/styled-components';
-import { SelectPrimitiveValue } from '@salutejs/plasma-new-hope/styled-components';
-import { SelectProps } from '@salutejs/plasma-new-hope/styled-components';
 import { sheetClasses } from '@salutejs/plasma-new-hope/styled-components';
 import { SheetProps } from '@salutejs/plasma-new-hope/styled-components';
 import { ShowToastArgs } from '@salutejs/plasma-new-hope/styled-components';
@@ -1043,43 +1037,6 @@ export { h5 }
 
 export { h5Bold }
 
-// @public (undocumented)
-export const HeaderArrow: FunctionComponent<PropsType<Variants> & ButtonHTMLAttributes<HTMLButtonElement> & {
-arrow?: "back" | "minimize" | undefined;
-iconSize?: "xxl" | "s" | "m" | "xs" | "l" | "xxs" | "xl" | undefined;
-} & RefAttributes<HTMLDivElement>>;
-
-export { HeaderContent }
-
-// @public (undocumented)
-export const HeaderLogo: FunctionComponent<PropsType<Variants> & HeaderLogoProps & RefAttributes<HTMLDivElement>>;
-
-// @public (undocumented)
-export const HeaderRoot: FunctionComponent<PropsType<    {
-view: {
-default: PolymorphicClassName;
-};
-size: {
-m: PolymorphicClassName;
-};
-}> & HtmlHTMLAttributes<HTMLDivElement> & {
-size?: string | undefined;
-gradientColor?: string | undefined;
-view?: string | undefined;
-} & RefAttributes<HTMLDivElement>>;
-
-export { HeaderTitle }
-
-// @public (undocumented)
-export const HeaderTitleWrapper: FunctionComponent<PropsType<Variants> & HTMLAttributes<HTMLDivElement> & {
-label?: string | undefined;
-title?: string | undefined;
-subTitle?: string | undefined;
-caption?: string | undefined;
-children?: ReactNode;
-withBigTitle?: boolean | undefined;
-} & RefAttributes<HTMLDivElement>>;
-
 // @public
 export const IconButton: FunctionComponent<PropsType<    {
 view: {
@@ -1590,39 +1547,6 @@ export { SegmentProvider }
 
 export { SegmentProviderProps }
 
-// @public (undocumented)
-export const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
-
-// @public (undocumented)
-export const SelectDivider: FunctionComponent<PropsType<Variants> & HTMLAttributes<HTMLDivElement> & {
-id?: string | undefined;
-size?: string | undefined;
-view?: string | undefined;
-} & RefAttributes<HTMLDivElement>>;
-
-// @public (undocumented)
-export const SelectItem: FunctionComponent<PropsType<Variants> & Omit<HTMLAttributes<HTMLDivElement>, "onSelect"> & {
-id?: string | undefined;
-disabled?: boolean | undefined;
-label?: ReactNode;
-role?: string | undefined;
-contentLeft?: string | number | boolean | ReactFragment | ReactPortal | ReactElement<any, string | JSXElementConstructor<any>> | FunctionComponent<any> | ComponentClass<any, any> | null | undefined;
-contentRight?: string | number | boolean | ReactFragment | ReactPortal | ReactElement<any, string | JSXElementConstructor<any>> | FunctionComponent<any> | ComponentClass<any, any> | null | undefined;
-name?: string | undefined;
-checked?: boolean | undefined;
-text?: string | undefined;
-value?: string | number | boolean | undefined;
-isSelected?: boolean | undefined;
-onClick?: ((event: MouseEvent_2<HTMLDivElement, MouseEvent>) => void) | undefined;
-onSelect?: ((value?: any, text?: any) => void) | undefined;
-size?: string | undefined;
-view?: string | undefined;
-} & RefAttributes<HTMLDivElement>>;
-
-export { SelectPrimitiveValue }
-
-export { SelectProps }
-
 // @public
 export const Sheet: FunctionComponent<PropsType<    {
 view: {

packages/sdds-dfa/package.json

@@ -25,7 +25,7 @@
   "peerDependencies": {
     "react": ">=16.13.1",
     "react-dom": ">=16.13.1",
-    "styled-components": "^5.1.1"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
     "@babel/cli": "7.24.1",
@@ -95,4 +95,4 @@
     "Anton Vinogradov"
   ],
   "sideEffects": false
-}
+}