PLASMA-3817: add PLASMA-GIGA

.eslintignore

@@ -43,6 +43,9 @@ packages/plasma-typo/*
 packages/**/jest.config.*
 examples/**
 
+packages/plasma-giga/*
+!packages/plasma-giga/src
+
 packages/plasma-asdk/*
 !packages/plasma-asdk/src
 

.github/config-ci.json

@@ -10,6 +10,7 @@
         "sdds-dfa",
         "sdds-cs",
         "sdds-finportal",
-        "sdds-insol"
+        "sdds-insol",
+        "plasma-giga"
     ]
 }

.github/meta-prod.js

@@ -9,6 +9,9 @@ const commonScope = [
 ];
 
 module.exports = {
+    'plasma-giga': {
+        scope: [...commonScope, 'plasma-themes', 'plasma-core'],
+    },
     'plasma-asdk': {
         scope: [...commonScope, 'plasma-tokens-b2b', 'plasma-themes', 'plasma-core'],
     },

.github/meta.js

@@ -8,6 +8,11 @@ const commonScope = [
 ];
 
 module.exports = {
+    'plasma-giga': {
+        scope: [...commonScope, 'plasma-themes', 'plasma-new-hope'],
+        required: ['plasma-new-hope', 'plasma-core', 'core-themes'],
+        themes: 'plasma-themes',
+    },
     'plasma-asdk': {
         scope: [...commonScope, 'plasma-tokens-b2b', 'plasma-typo', 'plasma-themes', 'plasma-new-hope'],
         required: ['plasma-core'],

.prettierignore

@@ -16,6 +16,7 @@ packages/sdds-dfa/api/
 packages/sdds-cs/api/
 packages/sdds-finportal/api/
 packages/sdds-insol/api/
+packages/plasma-giga/api/
 
 utils/plasma-cy-utils/lib
 

packages/plasma-giga/.babelrc.js

@@ -0,0 +1 @@
+../../.babelrc.js

packages/plasma-giga/.gitignore

@@ -0,0 +1,27 @@
+/components
+/es
+/cjs
+/hocs
+/hooks
+/mixins
+/node_modules
+/tokens
+/themes
+/types
+/utils
+/index.*
+/helpers
+/_virtual
+src-sc
+src-linaria
+src-emotion
+emotion/cjs
+emotion/es
+styled-components/cjs
+styled-components/es
+linaria/cjs
+linaria/es
+build-sb
+
+css/*
+!css/package.json

packages/plasma-giga/.npmignore

@@ -0,0 +1,9 @@
+/components/**/*.component-test*
+/es/components/**/*.component-test*
+src
+.storybook
+/package-lock.json
+/index.d.ts.map
+/index.js.map
+/jest.config.js
+/tsconfig.json

packages/plasma-giga/.npmrc

@@ -0,0 +1 @@
+../../.npmrc

packages/plasma-giga/.storybook/decoratorThemes.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { Decorator } from '@storybook/react';
+import { createGlobalStyle } from 'styled-components';
+import { plasma_giga__light, plasma_giga__dark } from '@salutejs/plasma-themes';
+
+import { ViewContainer } from '../src/components/ViewContainer/ViewContainer';
+
+const DocumentStyle = createGlobalStyle`
+    html:root {
+        min-height: 100vh;
+        background-color: var(--surface-solid-primary);
+    }
+
+    a {
+        color: var(--text-primary);
+        text-decoration: underline;
+
+        &:hover {
+            color: lighten(var(--text-primary), 30%);
+        }
+
+        &:active {
+            color: darken(var(--text-primary), 30%);
+        }
+    }
+`;
+/* stylelint-enable */
+
+export const PLASMA_GIGA_LIGHT_THEME = 'plasma-giga:light';
+export const PLASMA_GIGA_DARK_THEME = 'plasma-giga:dark';
+export const DEFAULT_MODE = 'default';
+export const ON_DARK_MODE = 'onDark';
+export const ON_LIGHT_MODE = 'onLight';
+
+const themes = {
+    [PLASMA_GIGA_LIGHT_THEME]: createGlobalStyle(plasma_giga__light),
+    [PLASMA_GIGA_DARK_THEME]: createGlobalStyle(plasma_giga__dark),
+};
+
+type ViewType = {
+    style?: object;
+    view?: 'onDark' | 'onLight';
+};
+
+const viewMap: Record<string, ViewType> = {
+    default: {
+        style: undefined,
+        view: undefined,
+    },
+    onDark: {
+        style: {
+            background: '#1a1a1a',
+            color: 'white',
+            margin: '3rem',
+            'border-radius': '1rem',
+        },
+        view: 'onDark',
+    },
+    onLight: {
+        style: {
+            background: '#ededed',
+            color: 'black',
+            margin: '3rem',
+            'border-radius': '1rem',
+        },
+        view: 'onLight',
+    },
+};
+
+export const withTheme: Decorator = (Story, context) => {
+    const theme = context.globals.theme;
+    const viewContainerType = viewMap[context.globals.viewContainer];
+
+    const Theme = themes[theme];
+
+    return (
+        <div style={viewContainerType.style}>
+            <ViewContainer view={viewContainerType.view}>
+                <Theme />
+                <DocumentStyle />
+                <Story {...context} />
+            </ViewContainer>
+        </div>
+    );
+};

packages/plasma-giga/.storybook/decoratorToast.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { Decorator } from '@storybook/react';
+import { ToastProvider } from '../src/components/Toast';
+
+export const withToast: Decorator = (Story) => (
+    <ToastProvider>
+        <Story />
+    </ToastProvider>
+);

packages/plasma-giga/.storybook/docsPage.tsx

@@ -0,0 +1,11 @@
+import { Description, Primary, Subtitle, Title, Controls } from '@storybook/addon-docs';
+
+export const docsPage = () => (
+    <>
+        <Title />
+        <Subtitle />
+        <Description />
+        <Primary />
+        <Controls />
+    </>
+);

packages/plasma-giga/.storybook/main.ts

@@ -0,0 +1,50 @@
+import { mergeConfig } from 'vite';
+import type { StorybookConfig } from '@storybook/react-vite';
+import linaria from '@linaria/vite';
+
+const USE_EMOTION_COMPONENTS = process.env.USE_EMOTION_COMPONENTS || false;
+
+const storyMap = {
+    'styled-components': ['../src/**/*.stories.tsx'],
+    emotion: ['../src-emotion/**/*.stories.tsx'],
+};
+
+const stories = ['../README.stories.mdx'];
+
+if (USE_EMOTION_COMPONENTS) {
+    stories.push(...storyMap['emotion']);
+} else {
+    // default
+    stories.push(...storyMap['styled-components']);
+}
+
+const config: StorybookConfig = {
+    staticDirs: ['public'],
+    stories,
+    addons: ['@storybook/addon-essentials'],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    core: {
+        disableTelemetry: true,
+    },
+    docs: {
+        autodocs: true,
+        defaultName: 'Docs',
+    },
+    async viteFinal(config) {
+        return mergeConfig(config, {
+            base: '',
+            resolve: {
+                dedupe: ['react', 'react-dom', 'styled-components'],
+                preserveSymlinks: true,
+            },
+            build: {
+                sourcemap: false,
+            },
+        });
+    },
+};
+
+export default config;

packages/plasma-giga/.storybook/manager-head.html

@@ -0,0 +1,11 @@
+<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css">
+<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css">
+<link rel="icon" href="sb-favicon.png"/>
+
+<style>
+    body {
+        font-family: 'SB Sans Text', Helvetica, Arial, sans-serif;
+        margin: 0;
+        padding: 0;
+    }
+</style>

packages/plasma-giga/.storybook/manager.js

@@ -0,0 +1,6 @@
+import { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+    theme,
+});

packages/plasma-giga/.storybook/preview-head.html

@@ -0,0 +1,30 @@
+<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansText.0.2.0.css">
+<link rel="stylesheet" href="https://cdn-app.sberdevices.ru/shared-static/0.0.0/styles/SBSansDisplay.0.2.0.css">
+<style>
+    /* stylelint-disable-next-line selector-nested-pattern */
+    body {
+        margin: 0;
+        padding: 0 !important;
+
+        /* stylelint-disable-next-line string-quotes */
+        font-family: "SB Sans Text", Helvetica, Arial, sans-serif;
+    }
+
+    .docblock-source {
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    .docblock-argstable tbody {
+        box-shadow: inset rgba(0, 0, 0, 0.16),
+                    0px 1px 4px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    .sbdocs-preview {
+        background: var(--background-primary) !important;
+        box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.05) !important;
+    }
+
+    .sbdocs-table {
+        color: #080808;
+    }
+</style>

packages/plasma-giga/.storybook/preview.tsx

@@ -0,0 +1,87 @@
+import type { Preview } from '@storybook/react';
+
+import storybookTheme from './theme';
+import { docsPage } from './docsPage';
+import {
+    withTheme,
+    PLASMA_GIGA_LIGHT_THEME,
+    PLASMA_GIGA_DARK_THEME,
+    DEFAULT_MODE,
+    ON_DARK_MODE,
+    ON_LIGHT_MODE,
+} from './decoratorThemes';
+import { withToast } from './decoratorToast';
+
+// Workaround: to make VoiceOver read russian text properly
+if (typeof document !== 'undefined') {
+    document.documentElement.setAttribute('lang', 'ru');
+}
+
+const preview: Preview = {
+    decorators: [withTheme, withToast],
+    globalTypes: {
+        theme: {
+            description: 'Global theme for components',
+            defaultValue: PLASMA_GIGA_LIGHT_THEME,
+            toolbar: {
+                title: 'Theme',
+                items: [PLASMA_GIGA_LIGHT_THEME, PLASMA_GIGA_DARK_THEME],
+            },
+        },
+        viewContainer: {
+            description: 'ViewContainer mode for components',
+            defaultValue: DEFAULT_MODE,
+            toolbar: {
+                title: 'ViewContainer',
+                items: [DEFAULT_MODE, ON_DARK_MODE, ON_LIGHT_MODE],
+            },
+        },
+    },
+    parameters: {
+        docs: {
+            page: docsPage,
+            theme: storybookTheme,
+            source: { type: 'code' },
+        },
+        options: {
+            storySort: {
+                method: 'alphabetical',
+                order: ['About', 'Layout', '*', 'Hooks'],
+            },
+        },
+        viewport: {
+            viewports: {
+                '375': {
+                    name: '375x812',
+                    styles: {
+                        width: '375px',
+                        height: '812px',
+                    },
+                },
+                '768': {
+                    name: '768x576',
+                    styles: {
+                        width: '768px',
+                        height: '576px',
+                    },
+                },
+                '1024': {
+                    name: '1024x768',
+                    styles: {
+                        width: '1024px',
+                        height: '768px',
+                    },
+                },
+                '1920': {
+                    name: '1920x1080',
+                    styles: {
+                        width: '1920px',
+                        height: '1080px',
+                    },
+                },
+            },
+        },
+    },
+};
+
+export default preview;