PLASMA-6300: add SDDS Sber OS package

.eslintignore

@@ -54,6 +54,9 @@ packages/plasma-asdk/*
 packages/sdds-serv/*
 !packages/sdds-serv/src
 
+packages/sdds-sber-os/*
+!packages/sdds-sber-os/src
+
 packages/sdds-dfa/*
 !packages/sdds-dfa/src
 

.github/config-ci.json

@@ -16,7 +16,8 @@
         "sdds-netology",
         "sdds-scan",
         "sdds-bizcom",
-        "sdds-platform-ai"
+        "sdds-platform-ai",
+        "sdds-sber-os"
     ],
     "PACKAGES_TYPESENSE": [
         "plasma-b2c",

.github/meta-prod.js

@@ -87,4 +87,7 @@ module.exports = {
     'sdds-platform-ai': {
         scope: [...commonScope, 'sdds-themes', 'plasma-core', 'sdds-platform-ai-docs', 'plasma-docs-ui'],
     },
+    'sdds-sber-os': {
+        scope: [...commonScope, 'sdds-themes', 'plasma-core'],
+    },
 };

.github/meta.js

@@ -113,4 +113,9 @@ module.exports = {
         required: ['plasma-sb-utils', 'plasma-new-hope', 'plasma-core', 'core-themes', 'sdds-themes'],
         themes: 'sdds-themes',
     },
+    'sdds-sber-os': {
+        scope: [...commonScope, 'sdds-themes', 'plasma-new-hope'],
+        required: ['plasma-sb-utils', 'plasma-new-hope', 'plasma-core', 'core-themes', 'sdds-themes'],
+        themes: 'sdds-themes',
+    },
 };

.prettierignore

@@ -18,6 +18,7 @@ packages/sdds-finportal/api/
 packages/sdds-clfd-auto/api/
 packages/sdds-insol/api/
 packages/plasma-giga/api/
+packages/sdds-sber-os/api/
 
 utils/plasma-cy-utils/lib
 

package.json

@@ -81,7 +81,8 @@
     "bootstrap:sdds-insol": "npx lerna bootstrap --scope='@salutejs/sdds-insol' --scope='@salutejs/{plasma-sb-utils,plasma-tokens,plasma-tokens-utils,core-themes,plasma-typo,plasma-new-hope,plasma-colors,sdds-themes,plasma-core,plasma-docs-ui,sdds-insol-docs}'",
     "bootstrap:sdds-crm:dev": "npx lerna bootstrap --scope='@salutejs/sdds-crm' --scope='@salutejs/{core-themes,plasma-new-hope,sdds-themes,plasma-core,plasma-docs-ui,sdds-crm-docs}'",
     "bootstrap:sdds-netology:dev": "npx lerna bootstrap --scope='@salutejs/sdds-netology' --scope='@salutejs/{core-themes,plasma-new-hope,plasma-themes,plasma-core,plasma-docs-ui,sdds-netology-docs}'",
-    "bootstrap:sdds-scan:dev": "npx lerna bootstrap --scope='@salutejs/sdds-scan' --scope='@salutejs/{core-themes,plasma-new-hope,plasma-core,plasma-docs-ui,sdds-scan-docs}'"
+    "bootstrap:sdds-scan:dev": "npx lerna bootstrap --scope='@salutejs/sdds-scan' --scope='@salutejs/{core-themes,plasma-new-hope,plasma-core,plasma-docs-ui,sdds-scan-docs}'",
+    "bootstrap:sdds-sber-os:dev": "npx lerna bootstrap --scope='@salutejs/sdds-sber-os' --scope='@salutejs/{core-themes,plasma-new-hope,plasma-core}'"
   },
   "devDependencies": {
     "@actions/core": "1.2.7",

packages/sdds-sber-os/.babelrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+    presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
+    plugins: [
+        '@babel/plugin-proposal-class-properties',
+        'babel-plugin-annotate-pure-calls',
+        '@babel/plugin-transform-react-constant-elements',
+    ],
+    ignore: ['**/*.d.ts', '**/helpers', '**/__helpers', '**/*.stories.tsx'],
+};

packages/sdds-sber-os/.gitignore

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

packages/sdds-sber-os/.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/sdds-sber-os/.npmrc

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

packages/sdds-sber-os/.storybook/decoratorThemes.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import type { Decorator } from '@storybook/react-vite';
+import { createGlobalStyle } from 'styled-components';
+import { sdds_serv__light, sdds_serv__dark } from '@salutejs/sdds-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 SDDS_SBER_OS_LIGHT_THEME = 'sdds-sber-os:light';
+export const SDDS_SBER_OS_DARK_THEME = 'sdds-sber-os:dark';
+export const DEFAULT_MODE = 'default';
+export const ON_DARK_MODE = 'onDark';
+export const ON_LIGHT_MODE = 'onLight';
+
+const themes = {
+    [SDDS_SBER_OS_LIGHT_THEME]: createGlobalStyle(sdds_serv__light),
+    [SDDS_SBER_OS_DARK_THEME]: createGlobalStyle(sdds_serv__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/sdds-sber-os/.storybook/docsPage.tsx

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

packages/sdds-sber-os/.storybook/main.ts

@@ -0,0 +1,63 @@
+import { mergeConfig } from 'vite';
+import type { StorybookConfig } from '@storybook/react-vite';
+import linaria from '@linaria/vite';
+import * as path from 'node:path';
+
+const stories = ['../README.mdx', '../src/**/*.stories.tsx'];
+
+const config: StorybookConfig = {
+    staticDirs: ['public'],
+    stories,
+    addons: ['@storybook/addon-docs'],
+    framework: {
+        name: '@storybook/react-vite',
+        options: {},
+    },
+    core: {
+        disableTelemetry: true,
+    },
+    docs: {
+        defaultName: 'Docs',
+    },
+    typescript: {
+        reactDocgen: false,
+    },
+    async viteFinal(config) {
+        return mergeConfig(config, {
+            base: '',
+            resolve: {
+                dedupe: ['react', 'react-dom', 'styled-components'],
+                preserveSymlinks: true,
+                alias: {
+                    '@salutejs/plasma-sb-utils': path.resolve('../../utils/plasma-sb-utils/src'),
+                },
+            },
+            build: {
+                sourcemap: false,
+            },
+            plugins: [
+                /* Plugin that fixes a bug in Storybook@10 - https://github.com/storybookjs/storybook/issues/21716 */
+                {
+                    name: 'fix-mdx-react-shim',
+                    enforce: 'pre',
+                    resolveId(source) {
+                        if (source.startsWith('file://') && source.includes('mdx-react-shim.js')) {
+                            // Convert file:///... path to normal filesystem path for Vite
+                            return new URL(source).pathname;
+                        }
+                        return null;
+                    },
+                },
+                linaria({
+                    exclude: ['../../../'],
+                    displayName: true,
+                    babelOptions: {
+                        presets: ['@babel/preset-typescript', '@babel/preset-react'],
+                    },
+                }),
+            ],
+        });
+    },
+};
+
+export default config;

packages/sdds-sber-os/.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/sdds-sber-os/.storybook/manager.js

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

packages/sdds-sber-os/.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>