@factoringplus/pl-components-pack-v3 2.0.0-pre-optimized-20-icons → 2.0.0-pre-optimized-21-icons

package/.editorconfig

@@ -0,0 +1,10 @@
+[*.{js,jsx,ts,tsx,vue,css}]
+indent_style = space
+indent_size = 2
+editor.tabSize = 4
+end_of_line = lf
+trim_trailing_whitespace = false
+insert_final_newline = true
+max_line_length = 120
+editor.insertSpaces = false
+editor.detectIndentation = false

package/.eslintrc.cjs

@@ -0,0 +1,9 @@
+module.exports = {
+  extends: [require.resolve('@factoringplus/frontend-configs/eslint')],
+  rules: {
+    '@typescript-eslint/ban-types': 'off',
+    '@typescript-eslint/no-var-requires': 'off',
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/explicit-function-return-type': 'off',
+  },
+};

package/.github/workflows/gh-pages.yml

@@ -0,0 +1,30 @@
+name: GitHub Pages
+on:
+  push:
+    branches:
+      - main
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '14.x'
+
+      - name: Install Dependencies
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      - name: Deploy
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          force_orphan: true

package/.gitlab-ci.yml

@@ -0,0 +1,27 @@
+variables:
+  COMMIT: $CI_COMMIT_MESSAGE
+  TEST: 'TRUE'
+  # EXTRA_COMMAND: cp -r rowi-ui/* ./
+  REMOTE_REPO_URL: 'https://gitlab.service.rowi.tech/utils/vitepress.git'
+  # SUBMODULE_NAME: 'rowi-ui'
+  SERVICES_LIST:
+    value: 'https://gitlab.service.rowi.tech/utils/vitepress.git'
+    description: 'List of services and it repo urls, where ROWI-UI is submodule.'
+
+stages:
+  - playwright-test
+  - allure
+  - screenshot-download
+  - ensure_branch
+  - create_jobs_yml
+  - trigger_project_init
+
+include:
+  - project: 'global/templates'
+    file: 'stages/git/check-branch.yml'
+
+  - project: 'global/templates'
+    file: 'stages/git/trigger-project.yml'
+
+  - project: 'global/templates'
+    file: '/tests/e2e/playwright-nodejs.yml'

package/.husky/post-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+# git stash pop stash@{0}
+# git checkout .gitignore

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx lint-staged

package/.prettierignore

@@ -0,0 +1,2 @@
+/docs/core/logs/index.md
+/docs/components/data/pl-table-plus/index.md

package/.prettierrc.cjs

@@ -0,0 +1,5 @@
+const prettierConfig = require('@factoringplus/frontend-configs/prettier/index.js');
+
+module.exports = {
+	...prettierConfig,
+};

package/.prettierrc.json

@@ -0,0 +1,10 @@
+{
+  "printWidth": 100,
+  "useTabs": false,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "endOfLine": "auto"
+}

package/.prettierrc.mjs

@@ -0,0 +1,5 @@
+import prettierConfig from '@factoringplus/frontend-configs/prettier/index.js';
+
+export default {
+	...prettierConfig,
+};

package/.stylelintignore

@@ -0,0 +1,4 @@
+dist
+build
+
+src/styles/tokens_scss/*.scss

package/.stylelintrc.json

@@ -0,0 +1,24 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-recess-order"],
+  "overrides": [
+    {
+      "extends": ["stylelint-config-html/vue"],
+      "files": ["**/*.vue"]
+    },
+    {
+      "extends": ["stylelint-config-html/html"],
+      "files": ["**/*.html"]
+    }
+  ],
+  "rules": {
+    "no-descending-specificity": null,
+    "selector-class-pattern": null,
+    "scss/dollar-variable-pattern": null,
+    "font-family-no-missing-generic-family-keyword": null,
+    "custom-property-pattern": null,
+    "selector-pseudo-class-no-unknown": null,
+    "selector-id-pattern": null,
+    "value-keyword-case": null,
+    "scss/at-extend-no-missing-placeholder": null
+  }
+}

package/.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["johnsoncodehk.volar"]
+}

package/.vscode/launch.json

@@ -0,0 +1,15 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.1",
+  "configurations": [
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Storybook",
+      "url": "http://localhost:6006",
+      "webRoot": "${workspaceFolder}/"
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "css.validate": false,
+  "scss.validate": false,
+  "stylelint.validate": ["vue", "scss", "css", "html"],
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll.stylelint": "explicit"
+  },
+  "cSpell.words": ["helpertext", "пропа"]
+}

package/buildStyles.cjs

@@ -0,0 +1,108 @@
+/* eslint-disable */
+
+const StyleDictionaryPackage = require('style-dictionary');
+
+StyleDictionaryPackage.registerFormat({
+  name: `custom-scss/variables`,
+  formatter: ({ dictionary }) =>
+    `${dictionary.allTokens
+      .map((token) => {
+        let value = token.value;
+        if (token.type === 'boxShadow') {
+          value = `${token.value.x}px ${token.value.y}px ${token.value.blur}px ${token.value.color}`;
+        }
+        if (token.type === 'sizing' || token.type === 'borderRadius' || token.type === 'spacing') {
+          value = `${token.original.value}px`;
+        }
+        return `$${token.name}: ${value};`;
+      })
+      .join(`\n`)}`,
+});
+
+StyleDictionaryPackage.registerFormat({
+  name: `custom-scss/color-variables`,
+  formatter: ({ dictionary }) => `:root {
+  ${dictionary.allTokens
+    .map((token) => {
+      let value = token.value;
+
+      if (token.name.includes('gradient')) {
+        value = `${token.original.value}`;
+      }
+      return `--${token.name}: ${value};`;
+    })
+    .join(`\n  `)}
+}`,
+});
+
+const getStyleDictionaryConfig = (platform) => {
+  return {
+    source: [`src/styles/tokens_json/${platform}.json`],
+    platforms: {
+      shadows: {
+        transformGroup: 'scss',
+        buildPath: `src/styles/tokens_scss/`,
+        prefix: 'token',
+        files: [
+          {
+            destination: 'shadows.scss',
+            format: 'custom-scss/variables',
+          },
+        ],
+      },
+      color: {
+        transformGroup: 'scss',
+        buildPath: `src/styles/tokens_scss/`,
+        prefix: 'token',
+        files: [
+          {
+            destination: 'color.css',
+            format: 'custom-scss/color-variables',
+          },
+        ],
+      },
+      radius: {
+        transformGroup: 'scss',
+        buildPath: `src/styles/tokens_scss/`,
+        prefix: 'token',
+        files: [
+          {
+            destination: 'radius.scss',
+            format: 'custom-scss/variables',
+          },
+        ],
+      },
+      spacing: {
+        transformGroup: 'scss',
+        buildPath: `src/styles/tokens_scss/`,
+        prefix: 'token',
+        files: [
+          {
+            destination: 'spacing.scss',
+            format: 'custom-scss/variables',
+          },
+        ],
+      },
+      size: {
+        transformGroup: 'scss',
+        buildPath: `src/styles/tokens_scss/`,
+        prefix: 'token',
+        files: [
+          {
+            destination: 'size.scss',
+            format: 'custom-scss/variables',
+          },
+        ],
+      },
+    },
+  };
+};
+
+const camelToKebabCase = (str) => str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+
+const platforms = ['color', 'radius', 'spacing', 'size', 'shadows'];
+
+platforms.map((platform) => {
+  const StyleDictionary = StyleDictionaryPackage.extend(getStyleDictionaryConfig(platform));
+  StyleDictionary.buildPlatform(platform);
+});

package/component-tests/basic/pl-button-dropdown.spec.ts

@@ -0,0 +1,142 @@
+import { test, expect } from '../fixtures';
+import PlButtonDropdown from '@/components/basic/pl-button-dropdown/pl-button-dropdown.vue';
+
+test('Button dropdown is shown', async ({ mount }) => {
+  const component = await mount(PlButtonDropdown, {
+    props: {
+      options: [
+        { label: 'Option 1', value: 'opt1' },
+        { label: 'Option 2', value: 'opt2' },
+      ],
+      modelValue: 'opt1',
+    },
+    slots: {
+      default: 'Primary',
+    },
+  });
+
+  const locator = component.getByTestId(/button-dropdown/);
+  await expect(locator).toBeVisible();
+  await expect(locator).toContainText('Primary');
+});
+
+test('opens dropdown on click and shows options', async ({ mount, page }) => {
+  const component = await mount(PlButtonDropdown, {
+    props: {
+      options: [
+        { label: 'Option 1', value: 'opt1' },
+        { label: 'Option 2', value: 'opt2' },
+      ],
+    },
+    slots: { default: 'Dropdown' },
+  });
+
+  await component.getByTestId('button-dropdown').click();
+  const dropdown = page.getByTestId('dropdown');
+  await expect(dropdown).toBeVisible();
+  await expect(dropdown).toContainText('Option 1');
+  await expect(dropdown).toContainText('Option 2');
+});
+
+
+test('emits update:modelValue and select-value on option click', async ({ mount, page }) => {
+  const emitted: any[] = [];
+  const component = await mount(PlButtonDropdown, {
+    props: {
+      options: [
+        { label: 'Option 1', value: 'opt1' },
+        { label: 'Option 2', value: 'opt2' },
+      ],
+      onSelectValue: (option) => emitted.push(['select-value', option]),
+      'onUpdate:modelValue': (val) => emitted.push(['update:modelValue', val]),
+    },
+    slots: { default: 'Dropdown' },
+  });
+
+  await component.getByTestId('button-dropdown').click();
+  const dropdown = page.getByTestId('dropdown');
+
+  await dropdown.getByText('Option 2').click();
+
+  expect(emitted).toEqual([
+    ['select-value', { label: 'Option 2', value: 'opt2' }],
+    ['update:modelValue', 'opt2'],
+  ]);
+});
+
+test('does not render icon when noIcon prop is true', async ({ mount, page }) => {
+  const component = await mount(PlButtonDropdown, {
+    props: {
+      options: [{ label: 'Option 1', value: 'opt1' }],
+      noIcon: true,
+    },
+    slots: { default: 'Dropdown' },
+  });
+
+  const locator = component.getByTestId(/button-dropdown/);
+  await expect(locator).toBeVisible();
+
+  const icon = page.getByTestId(/icon-right/);
+  await expect(icon).not.toBeAttached();
+});
+
+test('mobile version shows title from sheetTitle prop when width = 375', async ({ mount, page }) => {
+  await page.setViewportSize({ width: 375, height: 800 });
+
+  const component = await mount(PlButtonDropdown, {
+    props: {
+      options: [{ label: 'Option 1', value: 'opt1' }],
+      sheetTitle: 'My Sheet Title',
+    },
+    slots: { default: 'Dropdown' },
+  });
+
+  const button = component.getByTestId(/button-dropdown/);
+  await button.click();
+
+  const dialog = page.getByTestId(/dialog-title/);
+  await expect(dialog).toBeVisible();
+
+  await expect(dialog).toContainText('My Sheet Title');
+});
+
+
+test('dropdown positions correctly based on position right', async ({ mount }) => {
+  const component = await mount(PlButtonDropdown, {
+    props: {
+      options: [{ label: 'Option 1', value: 'opt1' }],
+      position: 'right',
+    },
+    slots: { default: 'Dropdown' },
+  });
+
+  const button = component.getByTestId(/button-dropdown/);
+  const dropdown = component.getByTestId(/dropdown/);
+
+  await button.click();
+  await expect(dropdown).toBeVisible();
+
+  const buttonBox = await button.evaluate(el => el.getBoundingClientRect());
+  const dropdownBox = await dropdown.evaluate(el => el.getBoundingClientRect());
+
+  expect(Math.abs(dropdownBox.right - buttonBox.right)).toBeLessThan(2);
+});
+
+test('dropdown is aligned to the left when position left', async ({ mount }) => {
+  const component = await mount(PlButtonDropdown, {
+    props: {
+      options: [{ label: 'Option 1', value: 'opt1' }],
+      position: 'left',
+    },
+    slots: { default: 'Dropdown' },
+  });
+
+  const button = component.getByTestId(/button-dropdown/);
+  const dropdown = component.getByTestId(/dropdown/);
+  await button.click();
+
+  const buttonBox = await button.evaluate(el => el.getBoundingClientRect());
+  const dropdownBox = await dropdown.evaluate(el => el.getBoundingClientRect());
+
+  expect(Math.abs(dropdownBox.left - buttonBox.left)).toBeLessThan(2);
+});

package/component-tests/basic/pl-button.spec.ts

@@ -0,0 +1,140 @@
+import { test, expect } from '../fixtures';
+import PlButton from '@/components/basic/pl-button/pl-button.vue';
+
+test('Button is shown', async ({ mount }) => {
+  const component = await mount(PlButton, {
+    props: { size: 'large' },
+    slots: { default: 'Primary' },
+  });
+
+  await expect(component).toBeVisible();
+  await expect(component).toContainText('Primary');
+});
+
+test('emits click when enabled', async ({ mount }) => {
+  let clicked = false;
+  const component = await mount(PlButton, {
+    props: {
+      size: 'large',
+      onClick: () => {
+        clicked = true;
+      },
+    },
+    slots: { default: 'Click me' },
+  });
+
+  await component.click();
+  expect(clicked).toBe(true);
+});
+
+test('does not emit click when disabled', async ({ mount }) => {
+  let clicked = false;
+  const component = await mount(PlButton, {
+    props: {
+      disabled: true,
+      onClick: () => {
+        clicked = true;
+      },
+    },
+    slots: { default: 'Disabled' },
+  });
+
+  await expect(component).toHaveAttribute('disabled');
+  await component.click({ force: true });
+  expect(clicked).toBe(false);
+});
+
+
+test.describe('PlButton iconPosition', () => {
+  for (const { position, testId } of [
+    { position: 'left', testId: 'Cube24' },
+    { position: 'right', testId: 'Cube24' },
+  ] as const) {
+    test(`shows ${position} icon when iconPosition = ${position}`, async ({ mount }) => {
+      const component = await mount(PlButton, {
+        props: {
+          icon: 'Cube24',
+          iconPosition: position,
+        },
+        slots: { default: 'With Icon' },
+      });
+
+      await expect(component.getByTestId(testId)).toBeVisible();
+    });
+  }
+});
+
+test('shows spinner when loading without icon', async ({ mount }) => {
+  const component = await mount(PlButton, {
+    props: { loading: true },
+    slots: { default: 'Loading' },
+  });
+
+  const spinner = component.locator('svg');
+  await expect(spinner).toBeVisible();
+});
+
+test('shows spinner next to icon when loading and icon present', async ({ mount }) => {
+  const component = await mount(PlButton, {
+    props: {
+      icon: 'Cube24',
+      iconPosition: 'left',
+      loading: true,
+    },
+    slots: { default: 'Loading Icon' },
+  });
+
+  await expect(component.getByTestId('spinner-with-icon-left')).toBeVisible();
+});
+
+
+test('button has class full-width', async ({ mount }) => {
+  const component = await mount(PlButton, {
+    props: { fullWidth: true },
+    slots: { default: 'Full Width' },
+  });
+
+  await expect(component).toHaveClass(/full-width/);
+});
+
+test.describe('type classes', () => {
+  const types = ['alternative', 'secondary', 'error', 'empty'] as const;
+
+  for (const type of types) {
+    test(`button has correct class for type="${type}"`, async ({ mount }) => {
+      const component = await mount(PlButton, {
+        props: { type },
+        slots: { default: type },
+      });
+
+      await expect(component).toHaveClass(new RegExp(`button-${type}`));
+    });
+  }
+});
+
+test.describe('size paddings', () => {
+  const sizes = {
+    large: { paddingLeft: '8px', paddingRight: '8px' },
+    medium: { paddingLeft: '4px', paddingRight: '4px' },
+    small: {},
+  } as const;
+
+  for (const [size, expected] of Object.entries(sizes)) {
+    test(`button has correct paddings for size="${size}"`, async ({ mount }) => {
+      const component = await mount(PlButton, {
+        props: { size },
+        slots: { default: size },
+      });
+
+      const locator = component.getByTestId('button');
+      const styles = await locator.evaluate(el => ({
+        paddingLeft: getComputedStyle(el).paddingLeft,
+        paddingRight: getComputedStyle(el).paddingRight,
+      }));
+
+      for (const [side, value] of Object.entries(expected)) {
+        expect(styles[side as keyof typeof styles]).toBe(value);
+      }
+    });
+  }
+});

package/component-tests/basic/pl-dialog.spec.ts

@@ -0,0 +1,12 @@
+import { test, expect } from '../fixtures';
+import PlDialogPlus from '@/components/basic/pl-dialog/pl-dialog-plus.vue';
+
+test('Dialog is shown', async ({ mount }) => {
+  const component = await mount(PlDialogPlus, {
+    props: { modelValue: true, title: 'Heading' },
+    slots: {
+      default: 'Content',
+    },
+  });
+  await expect(component).toHaveCount(1);
+});

package/component-tests/basic/pl-link.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from '../fixtures';
+import PlLink from '@/components/basic/pl-link/pl-link.vue';
+
+test('Link is shown', async ({ mount }) => {
+  const component = await mount(PlLink, {
+    props: { href: 'https://rowi.tech/' },
+    slots: { default: 'Default' },
+  });
+
+  await expect(component).toBeVisible();
+  await expect(component).toContainText('Default');
+});
+
+test('link has type classes on wrapper (<span>)', async ({ mount }) => {
+  const cases: Record<string, string | null> = {
+    default: null,
+    success: 'pl-success-link',
+    warning: 'pl-warning-link',
+    error: 'pl-error-link',
+    gradient: 'pl-gradient-link',
+  };
+
+  for (const [type, expectedClass] of Object.entries(cases)) {
+    const component = await mount(PlLink, {
+      props: { href: '#', type },
+      slots: { default: type },
+    });
+
+    if (expectedClass) {
+      await expect(component).toHaveClass(new RegExp(expectedClass));
+    } else {
+      await expect(component).not.toHaveClass(/pl-(success|warning|error|gradient)-link/);
+    }
+  }
+});
+
+
+test('disabled adds wrapper class (current behavior)', async ({ mount }) => {
+  const component = await mount(PlLink, {
+    props: { href: '#', disabled: true },
+    slots: { default: 'Disabled' },
+  });
+
+  await expect(component).toHaveClass(/pl-link-disabled/);
+});
+
+test('uses target attr and allows overriding', async ({ mount }) => {
+  const c1 = await mount(PlLink, { props: { href: '#' }, slots: { default: 'A' } });
+  await expect(c1.getByTestId('pl-link')).toHaveAttribute('target', '_blank');
+
+  const c2 = await mount(PlLink, { props: { href: '#', target: '_self' }, slots: { default: 'B' } });
+  await expect(c2.getByTestId('pl-link')).toHaveAttribute('target', '_self');
+});
+
+
+// TODO: 'проверить типы через скриншоты в будущем'
+
+

package/component-tests/basic/pl-scrollbar.spec.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '../fixtures';
+import PlScrollbar from '@/components/basic/pl-scrollbar/pl-scrollbar.vue';
+
+test('Scrollbar is shown', async ({ mount }) => {
+  const component = await mount(PlScrollbar, {
+    props: { height: '300' },
+  });
+
+  await expect(component).toBeVisible();
+});

package/component-tests/basic/pl-tooltip.spec.ts

@@ -0,0 +1,13 @@
+import { test, expect } from '../fixtures';
+import PlTooltipPlus from '@/components/basic/pl-tooltip-plus/pl-tooltip-plus.vue';
+
+test('Tooltip is shown', async ({ mount }) => {
+  const component = await mount(PlTooltipPlus, {
+    props: { width: '100px' },
+    slots: {
+      default: 'Content',
+    },
+  });
+
+  await expect(component).toBeVisible();
+});