feat(plasma-new-hope): Add ViewContainer and examples

packages/plasma-new-hope/.storybook/decoratorViewContainer.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { ViewContainer } from '../src/examples/plasma_b2c/components/ViewContainer/ViewContainer';
+
+import { ThemeType, themes } from '../src/examples/themes';
+
+export const withViewContainer = (Story, context) => {
+    const themeType = context.globals.theme as keyof ThemeType;
+    const themeName = context.title.split('/')[0];
+
+    return (
+        <div id="theme-root" className={themes?.[themeName]?.[themeType]}>
+            <div id="theme-root-popup-1" style={{ border: '1px solid coral' }}>
+                <h3>Default view</h3>
+                <ViewContainer>
+                    <Story {...context} />
+                </ViewContainer>
+            </div>
+            <div id="theme-root-popup-2" style={{ border: '1px solid coral', background: 'black', color: 'white' }}>
+                <h3>OnDark view</h3>
+                <ViewContainer view="onDark">
+                    <Story {...context} />
+                </ViewContainer>
+            </div>
+            <div id="theme-root-popup-3" style={{ border: '1px solid coral', background: 'white', color: 'black' }}>
+                <h3>OnLight view</h3>
+                <ViewContainer view="onLight">
+                    <Story {...context} />
+                </ViewContainer>
+            </div>
+        </div>
+    );
+};

packages/plasma-new-hope/.storybook/preview.ts

@@ -1,9 +1,11 @@
 import type { Preview } from '@storybook/react';
+import { withViewContainer } from './decoratorViewContainer';
 
 const LIGHT_THEME = 'light';
 const DARK_THEME = 'dark';
 
 const preview: Preview = {
+    decorators: [withViewContainer],
     parameters: {
         docs: {
             source: { type: 'code', language: 'tsx' },

packages/plasma-new-hope/src/components/Accordion/ui/AccordionItem/AccordionItem.tsx

@@ -57,10 +57,10 @@ export const AccordionItem: React.FC<HTMLAttributesOmitOnChange & AccordionItemP
 
     const StyledAnimationPLus = () => (
         <StyledPlus>
-            <StyledMinus size="xs" color="inhert" />
+            <StyledMinus size="xs" color="inherit" />
             <StyledMinus
                 size="xs"
-                color="inhert"
+                color="inherit"
                 className={openedBodyClass ?? classes.accordionPlusAnimationElement}
             />
         </StyledPlus>
@@ -69,7 +69,7 @@ export const AccordionItem: React.FC<HTMLAttributesOmitOnChange & AccordionItemP
     const accordionBorderRadius = convertRoundnessMatrix(pin, `var(${tokens.accordionItemBorderRadius})`, '1.5rem');
     const disabledClass = disabled ? classes.accordionDisabled : '';
 
-    const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size="xs" color="inhert" /> : undefined);
+    const leftContent = contentLeft ?? (type === 'arrow' ? <StyledArrow size="xs" color="inherit" /> : undefined);
     const leftContentRotate = type === 'arrow' && value ? classes.accordionItemShowBody : undefined;
 
     const rightContent = contentRight ?? (type === 'sign' ? <StyledAnimationPLus /> : undefined);

packages/plasma-new-hope/src/components/ViewContainer/ViewContainer.tsx

@@ -0,0 +1,42 @@
+import React, { forwardRef } from 'react';
+import { css } from '@linaria/core';
+
+import type { RootProps } from '../../engines/types';
+
+import { base as viewCSS } from './_view/base';
+
+const base = css`
+    position: relative;
+`;
+
+export type ViewContainerCustomProps = {
+    /**
+     * Вид компонента.
+     */
+    view?: string;
+};
+
+type ViewContainerProps = React.HTMLAttributes<HTMLDivElement> & ViewContainerCustomProps;
+
+export const viewContainerRoot = (Root: RootProps<HTMLAnchorElement, ViewContainerProps>) =>
+    forwardRef<HTMLAnchorElement, ViewContainerProps>((props, ref) => {
+        const { children, ...rest } = props;
+
+        return (
+            <Root ref={ref} {...rest}>
+                {children}
+            </Root>
+        );
+    });
+
+export const viewContainerConfig = {
+    name: 'ViewContainer',
+    tag: 'div',
+    layout: viewContainerRoot,
+    base,
+    variations: {
+        view: {
+            css: viewCSS,
+        },
+    },
+};

packages/plasma-new-hope/src/components/ViewContainer/_view/base.ts

@@ -0,0 +1,3 @@
+import { css } from '@linaria/core';
+
+export const base = css``;

packages/plasma-new-hope/src/components/ViewContainer/_view/tokens.json

@@ -0,0 +1 @@
+[]

packages/plasma-new-hope/src/components/ViewContainer/index.ts

@@ -0,0 +1 @@
+export { viewContainerRoot, viewContainerConfig } from './ViewContainer';

packages/plasma-new-hope/src/examples/_helpers.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
-import type { ArgTypes, StoryContext, Decorator } from '@storybook/react';
+import type { ArgTypes, Decorator } from '@storybook/react';
 
 import { ComponentConfig } from '../engines';
 import type { HTMLAttributesOmitOnChange, HTMLTagList, PropsType, Variants } from '../engines/types';
 
-import { ThemeType, themes } from './themes';
+// import { ThemeType, themes } from './themes';
 
-export const WithTheme: Decorator = (Story, context: StoryContext) => {
-    const themeType = context.globals.theme as keyof ThemeType;
-    const themeName = context.title.split('/')[0];
+export const WithTheme: Decorator = (Story) => {
+    // const themeType = context.globals.theme as keyof ThemeType;
+    // const themeName = context.title.split('/')[0];
 
     return (
         <div
-            id="theme-root"
-            className={themes?.[themeName]?.[themeType]}
-            style={{ padding: '1rem', height: '100vh', boxSizing: 'border-box' }}
+            // id="theme-root"
+            // className={themes?.[themeName]?.[themeType]}
+            // style={{ padding: '1rem', height: '100vh', boxSizing: 'border-box' }}
+            style={{ padding: '1rem' }}
         >
             <Story />
         </div>

packages/plasma-new-hope/src/examples/plasma_b2c/components/IconButton/IconButton.stories.tsx

@@ -65,7 +65,7 @@ export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
     argTypes: { ...disableProps(['children']) },
     render: (args) => (
         <IconButton {...args}>
-            <IconChevronLeft size={getSizeForIcon(args.size)} />
+            <IconChevronLeft color="inherit" size={getSizeForIcon(args.size)} />
         </IconButton>
     ),
 };

packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.config.ts

@@ -0,0 +1,18 @@
+import { css } from '@linaria/core';
+
+// здесь будет импорт непосредственно из темы, например
+// import { containerTokens } from '@salutejs/plasma-themes/tokens';
+import { containerTokens } from './tokens';
+
+export const config = {
+    variations: {
+        view: {
+            onDark: css`
+                ${containerTokens.onDark}
+            `,
+            onLight: css`
+                ${containerTokens.onLight}
+            `,
+        },
+    },
+};

packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.stories.tsx

@@ -0,0 +1,57 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+
+import { WithTheme } from '../../../_helpers';
+import { Heading } from '../../../typograpy/components/Heading/Heading';
+import { Button } from '../../components/Button/Button';
+
+import { ViewContainer } from './ViewContainer';
+
+type StoryViewProps = ComponentProps<typeof ViewContainer>;
+
+const meta: Meta<StoryViewProps> = {
+    title: 'plasma_b2c/ViewContainer',
+    decorators: [WithTheme],
+};
+
+export default meta;
+
+type Story = StoryObj<StoryViewProps>;
+
+const backgroundPrimary = '--background-primary';
+const textPrimary = '--text-primary';
+
+const ViewExample = ({ view }: StoryViewProps) => {
+    return (
+        <>
+            <Heading size="h4">view: {view}</Heading>
+            <div>
+                <ViewContainer
+                    view={view}
+                    style={{ background: `var(${backgroundPrimary})`, color: `var(${textPrimary})` }}
+                >
+                    <Heading size="h3">Inside ViewContainer</Heading>
+                    <Button text="default Button" />
+                    <Button view="accent" text="Accent Button" />
+                </ViewContainer>
+            </div>
+        </>
+    );
+};
+
+export const Default: Story = {
+    render: () => {
+        return (
+            <>
+                <ViewExample />
+                <br />
+                <ViewExample view="onDark" />
+                <br />
+                <ViewExample view="onLight" />
+                <br />
+                <h3>Inverse in progress</h3>
+                <br />
+            </>
+        );
+    },
+};

packages/plasma-new-hope/src/examples/plasma_b2c/components/ViewContainer/ViewContainer.ts

@@ -0,0 +1,8 @@
+import { viewContainerConfig } from '../../../../components/ViewContainer';
+import { component, mergeConfig } from '../../../../engines';
+
+import { config } from './ViewContainer.config';
+
+const mergedConfig = mergeConfig(viewContainerConfig, config);
+
+export const ViewContainer = component(mergedConfig);