feat: implement initial components

Author: amje

.storybook/decorators/withTheme.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Story as StoryType, StoryContext} from '@storybook/react';
+import {useTheme} from '@yandex-cloud/uikit';
+
+export function withTheme(Story: StoryType, context: StoryContext) {
+    const themeValue = context.globals.theme;
+    const [theme, setTheme] = useTheme();
+
+    React.useEffect(() => {
+        if (theme !== themeValue) {
+            setTheme(themeValue);
+        }
+    }, [theme, themeValue, setTheme]);
+
+    return <Story {...context} />;
+}

.storybook/main.js

@@ -0,0 +1,17 @@
+module.exports = {
+    stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+    addons: ['@storybook/preset-scss', '@storybook/addon-essentials'],
+    typescript: {
+        check: true,
+        checkOptions: {},
+        reactDocgen: 'react-docgen-typescript',
+        reactDocgenTypescriptOptions: {
+            setDisplayName: false,
+            shouldExtractLiteralValuesFromEnum: true,
+            compilerOptions: {
+                allowSyntheticDefaultImports: true,
+                esModuleInterop: true,
+            },
+        },
+    },
+};

.storybook/preview.js

@@ -0,0 +1,49 @@
+import '@yandex-cloud/uikit/styles/styles.scss';
+
+import React from 'react';
+import {ThemeProvider} from '@yandex-cloud/uikit';
+import {withTheme} from './decorators/withTheme';
+
+const withContextProvider = (Story, context) => {
+    const theme = context.globals.theme;
+
+    context.parameters.backgrounds.default = theme;
+    context.globals.backgrounds = {
+        value: theme === 'light' ? 'white' : 'black',
+    };
+
+    context.globals.background = theme;
+
+    return (
+        <ThemeProvider>
+            <Story {...context} />
+        </ThemeProvider>
+    );
+};
+
+export const decorators = [withTheme, withContextProvider];
+
+export const parameters = {
+    jsx: {showFunctions: true},
+    backgrounds: {
+        default: 'light',
+        values: [
+            {name: 'light', value: 'white'},
+            {name: 'dark', value: 'rgba(45, 44, 51, 1)'},
+        ],
+    },
+};
+
+export const globalTypes = {
+    theme: {
+        name: 'Theme',
+        description: 'Global theme for components',
+        defaultValue: 'light',
+        toolbar: {
+            items: [
+                {value: 'light', icon: 'circlehollow', title: 'Light'},
+                {value: 'dark', icon: 'circle', title: 'Dark'},
+            ],
+        },
+    },
+};

package-lock.json

@@ -5,16 +5,37 @@
   "license": "MIT",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "start-storybook -p 7002"
+  },
+  "dependencies": {
+    "bem-cn-lite": "^4.1.0"
   },
   "devDependencies": {
+    "@storybook/addon-essentials": "^6.4.19",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^6.4.19",
+    "@types/react-treeview": "^0.4.3",
     "@yandex-cloud/eslint-config": "^1.0.0",
     "@yandex-cloud/prettier-config": "^1.0.0",
     "@yandex-cloud/stylelint-config": "^1.1.0",
     "@yandex-cloud/tsconfig": "^1.0.0",
+    "@yandex-cloud/uikit": "^1.8.0",
+    "css-loader": "^5.2.7",
     "eslint": "^8.11.0",
     "prettier": "^2.5.1",
+    "react": "^16.14.0",
+    "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^16.14.0",
+    "react-treeview": "^0.4.7",
+    "sass": "^1.49.9",
+    "sass-loader": "^10.2.1",
+    "style-loader": "^2.0.0",
     "stylelint": "^14.5.3",
     "typescript": "^4.6.2"
+  },
+  "peerDependencies": {
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
   }
 }

package.json

@@ -0,0 +1,4 @@
+.ydb-navigation-tree-view-empty {
+    color: var(--yc-color-text-secondary);
+    font-style: italic;
+}

src/components/NavigationTree/EmptyView/EmptyView.scss

@@ -0,0 +1,12 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+
+import {TreeView} from '../../TreeView/TreeView';
+
+import './EmptyView.scss';
+
+const b = block('ydb-navigation-tree-view-empty');
+
+export function EmptyView() {
+    return <TreeView name={<span className={b()}>Нет данных</span>} />;
+}

src/components/NavigationTree/EmptyView/EmptyView.tsx

@@ -0,0 +1,3 @@
+.ydb-navigation-tree-view-error {
+    color: var(--yc-color-text-danger);
+}

src/components/NavigationTree/ErrorView/ErrorView.scss

@@ -0,0 +1,12 @@
+import React from 'react';
+import block from 'bem-cn-lite';
+
+import {TreeView} from '../../TreeView/TreeView';
+
+import './ErrorView.scss';
+
+const b = block('ydb-navigation-tree-view-error');
+
+export function ErrorView() {
+    return <TreeView name={<span className={b()}>Ошибка</span>} />;
+}

src/components/NavigationTree/ErrorView/ErrorView.tsx

@@ -0,0 +1,7 @@
+.ydb-navigation-tree-view-loader {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 24px;
+}