@skbkontur/react-ui 0.0.0-2eafa74fd6 → 0.0.0-30619a873c

package/.creevey/tests/ZIndex.ts

@@ -1,179 +0,0 @@
-import { expect } from 'chai';
-import { By } from 'selenium-webdriver';
-
-const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
-
-describe('ZIndex', function() {
-  describe('Loader covers tooltip', function() {
-    it('Loader covers Tooltip', async function() {
-      const element = await this.browser.findElement(By.css('#test-element'));
-      await expect(await element.takeScreenshot()).to.matchImage('Loader covers Tooltip');
-    });
-  });
-  describe('Modal With Tooltip In Loader', function() {
-    it('Loader covers children', async function() {
-      const element = await this.browser.findElement(By.css('[data-comp-name~="Loader"]'));
-      await expect(await element.takeScreenshot()).to.matchImage('Loader covers children');
-    });
-  });
-  describe('Nested elements in loader', function() {
-    it('Loader covers children', async function() {
-      const element = await this.browser.findElement(By.css('[data-comp-name~="Loader"]'));
-      await expect(await element.takeScreenshot()).to.matchImage('Loader covers children');
-    });
-  });
-  describe('Tooltip near Loader', function() {
-    it('Tooltip covers Loader', async function() {
-      const element = await this.browser.findElement(By.css('#test-element'));
-      await expect(await element.takeScreenshot()).to.matchImage('Tooltip covers Loader');
-    });
-  });
-  describe('Hint and modal', function() {
-    it('Modal covers hint', async function() {
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('button')))
-        .perform();
-
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('.modalBody button')))
-        .perform();
-
-      const modal = await this.browser.findElement(By.css('[class^="Modal-module-root"]'));
-      await expect(await modal.takeScreenshot()).to.matchImage('Modal covers hint');
-    });
-  });
-  describe('Loader in Modal', function() {
-    it('Footer covers loader', async function() {
-      const modal = await this.browser.findElement(By.css('[class^="Modal-module-window"]'));
-      await expect(await modal.takeScreenshot()).to.matchImage('Footer covers loader');
-    });
-  });
-  describe('Big modal with Loader', function() {
-    it('Header covers Loader', async function() {
-      const modal = await this.browser.findElement(By.css('[class^="Modal-module-root"]'));
-
-      await this.browser.executeScript(function() {
-        const sidePage = window.document.querySelector('[class^="Modal-module-container"]') as HTMLElement;
-
-        if (sidePage) {
-          sidePage.scrollTop = sidePage.offsetHeight / 3;
-        }
-      });
-
-      await expect(await modal.takeScreenshot()).to.matchImage('Header covers Loader');
-    });
-  });
-  describe('Tooltip and Select', function() {
-    it('Menu covers tooltip', async function() {
-      const element = await this.browser.findElement(By.css('.container'));
-
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('button')))
-        .sendKeys('q')
-        .perform();
-
-      await expect(await element.takeScreenshot()).to.matchImage('Modal covers hint');
-    });
-  });
-  describe('Loader in SidePage.Body', function() {
-    it('is covered by Header and Footer', async function() {
-      const element = await this.browser.findElement(By.css('[class^="SidePage-module-root"]'));
-
-      await this.browser.executeScript(function() {
-        const sidePage = window.document.querySelector('[class^="SidePage-module-container"]') as HTMLElement;
-
-        if (sidePage) {
-          sidePage.scrollTop = sidePage.offsetHeight;
-        }
-      });
-
-      await delay(500);
-
-      await expect(await element.takeScreenshot()).to.matchImage('is covered by Header and Footer');
-    });
-  });
-  describe('Sidepage and Select', function() {
-    it('SidePage covers Select and Tooltip', async function() {
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('.select-container button')))
-        .sendKeys('q')
-        .perform();
-
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('.open-sidepage-container button')))
-        .perform();
-
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('.sidepage-select-continer button')))
-        .sendKeys('q')
-        .perform();
-
-      const element = await this.browser.findElement(By.css('[class^="SidePage-module-container"]'));
-      await expect(await element.takeScreenshot()).to.matchImage('SidePage covers Select and Tooltip');
-    });
-  });
-  describe('Toast and Loader', function() {
-    it('Toast covers Loader', async function() {
-      const element = await this.browser.findElement(By.css('#test-element'));
-      await expect(await element.takeScreenshot()).to.matchImage('Toast covers Loader');
-    });
-  });
-  describe('Elements in Loader in Modal', function() {
-    it('Open Dropdown while Loader is inactive', async function() {
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('[data-comp-name~="Select"]')))
-        .perform();
-
-      await expect(await this.browser.takeScreenshot()).to.matchImage('Open Dropdown while Loader is inactive');
-    });
-    it('Hide Hint on active Loader', async function() {
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('[data-comp-name~="Toggle"]')))
-        .perform();
-
-      await delay(500);
-
-      await expect(await this.browser.takeScreenshot()).to.matchImage('Hide Hint on active Loader');
-    });
-  });
-  describe('Loader and SidePage', function() {
-    it('SidePage shadow cover Loader', async function() {
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('[data-comp-name~="Toggle"]')))
-        .perform();
-
-      await expect(await this.browser.takeScreenshot()).to.matchImage('SidePage shadow cover Loader');
-    });
-  });
-  describe('Modal in Loader and Modal', function() {
-    it('Modal cover Loader in Modal', async function() {
-      await expect(await this.browser.takeScreenshot()).to.matchImage('Modal cover Loader in Modal');
-    });
-  });
-  describe('Sticky and Loader', function() {
-    it('Sticky covers sibling Loader', async function() {
-      await expect(await this.browser.takeScreenshot()).to.matchImage('Sticky covers sibling Loader');
-    });
-  });
-  describe('Sticky and Tooltips', function() {
-    it('Sticky covers outside Popup and DropdownContainer', async function() {
-      await this.browser
-        .actions({ bridge: true })
-        .click(this.browser.findElement(By.css('[data-comp-name~="Select"]')))
-        .perform();
-
-      await expect(await this.browser.takeScreenshot()).to.matchImage(
-        'Sticky covers outside Popup and DropdownContainer',
-      );
-    });
-  });
-});

package/.eslintignore

@@ -1,12 +0,0 @@
-node_modules
-/docs/dist/
-/docs/src/components/DemoPage.js
-/testing/react-devtools/
-coverage
-gemini-report
-styleguide
-storybook-static
-build
-lib/**/*.js
-components/**/*.js
-*.d.ts

package/.eslintrc

@@ -1,10 +0,0 @@
-{
-  "overrides": [
-    {
-      "files": ["**/*.stories.tsx"],
-      "rules": {
-        "import/no-default-export": 0
-      }
-    }
-  ]
-}

package/.storybook/addons.js

@@ -1,2 +0,0 @@
-import '@storybook/addon-actions/register';
-import '@storybook/addon-links/register';

package/.storybook/config.js

@@ -1,19 +0,0 @@
-import { addDecorator, configure } from '@storybook/react';
-import { withCreevey } from 'creevey';
-import React from 'react';
-import { ThemeProvider } from '../components/ThemeProvider';
-import { FLAT_THEME } from '../lib/theming/themes/FlatTheme';
-
-addDecorator(withCreevey({ skip: 'Story tests migration process' }));
-
-addDecorator(story => (
-  <div id="test-element" style={{ display: 'inline-block', padding: 4 }}>
-    {story()}
-  </div>
-));
-
-if (process.env.STORYBOOK_FLAT_UI) {
-  addDecorator(story => <ThemeProvider value={FLAT_THEME}>{story()}</ThemeProvider>);
-}
-
-configure(require.context('../components', true, /.stories.tsx?$/), module);

package/.storybook/preview-head.html

@@ -1,21 +0,0 @@
-<style>
-  @font-face {
-    font-family: 'Segoe UI';
-    font-weight: 400;
-    src: local('Segoe UI'), local('SegoeUI'),
-    url('//c.s-microsoft.com/static/fonts/segoe-ui/cyrillic/normal/latest.woff') format('woff');
-  }
-
-  html,
-  body {
-    min-height: 100%;
-  }
-
-  body {
-    font-family: 'Segoe UI', 'Helvetica Neue', Roboto, Arial, sans-serif;
-    font-size: 14px;
-    margin: 0;
-    background: white;
-    color: rgba(0, 0, 0, 0.87);
-  }
-</style>

package/.storybook/webpack.config.js

@@ -1,68 +0,0 @@
-const path = require('path');
-const webpack = require('webpack');
-const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
-
-const enableReactTesting = process.env.enableReactTesting;
-
-module.exports = async ({ config, mode }) => {
-  config.devtool = 'eval-source-map';
-
-  if (enableReactTesting) {
-    // needs to be inserted before React (i.e. config.js)
-    config.entry.unshift('react-ui-testing/react-selenium-testing');
-  }
-  config.entry.unshift('core-js/stable');
-
-  config.resolve.extensions.unshift('.ts', '.tsx');
-
-  config.module.rules = [
-    {
-      test: /\.(j|t)sx?$/,
-      loader: 'babel-loader',
-      exclude: /node_modules/,
-      options: {
-        babelrc: false,
-        envName: 'development',
-        extends: path.join(__dirname, '../.babelrc.js'),
-      },
-    },
-    {
-      test: /\.(css|less)$/,
-      loaders: [
-        'style-loader',
-        {
-          loader: 'dts-css-modules-loader',
-          options: {
-            namedExport: false,
-          },
-        },
-        {
-          loader: 'css-loader',
-          options: {
-            modules: {
-              mode: 'global',
-              localIdentName: '[name]-[local]-[hash:base64:4]',
-            },
-          },
-        },
-        'less-loader',
-      ],
-    },
-    { test: /\.(woff|woff2|eot)$/, loader: 'file-loader' },
-    { test: /\.(jpe?g|png|gif|svg)$/i, loader: 'url-loader' },
-  ];
-
-  config.plugins.push(
-    new webpack.DefinePlugin({
-      'process.env.enableReactTesting': JSON.stringify(enableReactTesting),
-    }),
-    new ForkTsCheckerWebpackPlugin({
-      tsconfig: path.resolve(__dirname, '../prod.tsconfig.json'),
-    }),
-  );
-
-  // NOTE Need to allow write tests inside stories for Creevey
-  config.node = { __filename: true };
-
-  return config;
-};

package/.styleguide/build.js

@@ -1,48 +0,0 @@
-const path = require('path');
-const { execSync } = require('child_process');
-const { copySync, removeSync, emptyDirSync } = require('fs-extra');
-const { getPackageInfo, TAGS } = require('../scripts/package');
-const { distTag, publishVersion } = getPackageInfo();
-const { LATEST, LTS, UNSTABLE, OLD } = TAGS;
-const { ROOT_DIR, VERSION_DIR } = require('./helpers');
-
-const ROOT_CONFIG = path.join(__dirname, 'config/root.config.js');
-const VERSION_CONFIG = path.join(__dirname, 'config/version.config.js');
-
-const buildConfig = config => {
-  execSync(`yarn styleguidist build --config ${config}`, {
-    shell: true,
-  });
-};
-
-const buildStyleguideRoot = () => {
-  buildConfig(ROOT_CONFIG);
-};
-
-const buildStyleguideVersion = tag => {
-  const BUILD_DIR = VERSION_DIR;
-  const FINAL_DIR = {
-    [LATEST]: path.join(ROOT_DIR, publishVersion),
-    [LTS]: path.join(ROOT_DIR, 'lts'),
-    [UNSTABLE]: path.join(ROOT_DIR, 'unstable', publishVersion),
-    [OLD]: path.join(ROOT_DIR, publishVersion),
-  };
-
-  buildConfig(VERSION_CONFIG);
-
-  if (BUILD_DIR !== FINAL_DIR[tag]) {
-    copySync(BUILD_DIR, FINAL_DIR[tag], { overwrite: true });
-    console.log(`Style guide copied to: ${FINAL_DIR[tag]}`);
-  }
-
-  if (tag === UNSTABLE) {
-    removeSync(BUILD_DIR);
-    console.log(`Style guide removed from: ${BUILD_DIR}`);
-  }
-};
-
-buildStyleguideVersion(distTag);
-
-if (distTag === LATEST) {
-  buildStyleguideRoot();
-}

package/.styleguide/components/IssueList/IssueList.tsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-// @ts-ignore
-import Styled from 'react-styleguidist/lib/rsg-components/Styled';
-import { Spinner } from '../../../components/Spinner';
-import { Link } from '../../../components/Link';
-import { Gapped } from '../../../components/Gapped';
-import { fetch } from '../../../lib/net/fetch-cors';
-
-interface GithubIssue {
-  id: string;
-  html_url: string;
-  title: string;
-}
-
-interface Classes {
-  root: React.CSSProperties;
-  issues: React.CSSProperties;
-}
-
-interface IssueListProps {
-  classes: { [name: string]: string };
-  componentPath: string;
-}
-
-interface IssueListState {
-  issueList: GithubIssue[];
-  isFetching: boolean;
-  hasGuidesLink: boolean;
-  componentExistsInGuide: boolean;
-}
-
-const styles = ({ baseBackground, color }): Classes => ({
-  root: {
-    color: color.base,
-    backgroundColor: baseBackground,
-  },
-  issues: {
-    height: '20px',
-    lineHeight: '1.5',
-    marginBottom: '10px',
-    outline: 'none',
-  },
-});
-
-const CREATE_ISSUE_LINK = 'https://github.com/skbkontur/retail-ui/issues/new';
-const API_URL = 'https://guides.kontur.ru/github';
-const GUIDES_LINK = 'https://guides.kontur.ru/components/';
-
-export class IssueList extends React.Component<IssueListProps, IssueListState> {
-  public static propTypes = {
-    classes: PropTypes.object.isRequired,
-  };
-
-  public state: IssueListState = {
-    issueList: [],
-    isFetching: true,
-    hasGuidesLink: false,
-    componentExistsInGuide: false,
-  };
-
-  public componentDidMount = async () => {
-    try {
-      const component = this.getComponentName();
-
-      await this.getIssueList(component);
-      await this.checkGuideForComponent(component);
-    } catch (error) {
-      console.error(error);
-    } finally {
-      this.setState({ isFetching: false });
-    }
-  };
-
-  public checkGuideForComponent = (component: string) => {
-    return fetch(`${GUIDES_LINK}${component}`).then(response =>
-      this.setState({ componentExistsInGuide: response.status === 200 }),
-    );
-  };
-
-  public getIssueList = (component: string) => {
-    return fetch(`${API_URL}/${component}`)
-      .then(response => response.json())
-      .then((issueList: GithubIssue[]) => this.setState({ issueList }));
-  };
-
-  public getComponentName = () => {
-    const componentPathArray = this.props.componentPath.split(/(\\|\/)/);
-    const component = componentPathArray[componentPathArray.length - 1];
-    const componentName = component.split('.')[0];
-
-    return componentName.toLowerCase();
-  };
-
-  public getCreateNewIssueLink = () => {
-    let componentName = this.getComponentName();
-    componentName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
-
-    return `${CREATE_ISSUE_LINK}?title=[${componentName}]&labels=bug,${componentName}`;
-  };
-
-  public render() {
-    const { classes } = this.props;
-    const { issueList, isFetching, componentExistsInGuide } = this.state;
-    const componentName = this.getComponentName();
-
-    return (
-      <div className={classes.root}>
-        <div>
-          <details>
-            <summary className={classes.issues}>
-              {isFetching ? <Spinner type="mini" caption="Загрузка issues" /> : 'Список связанных issues:'}
-            </summary>
-            <ul>
-              {issueList.map(issue => {
-                return (
-                  <li key={issue.id}>
-                    <Link href={issue.html_url} target="_blank">
-                      {issue.title}
-                    </Link>
-                  </li>
-                );
-              })}
-            </ul>
-          </details>
-        </div>
-        <Gapped gap={20}>
-          {componentExistsInGuide && (
-            <Link target="_blank" href={`${GUIDES_LINK}${componentName}`}>
-              Компонент в гайдах
-            </Link>
-          )}
-          <Link target="_blank" href={this.getCreateNewIssueLink()}>
-            Создать задачу
-          </Link>
-        </Gapped>
-      </div>
-    );
-  }
-}
-
-export default Styled(styles)(IssueList);

package/.styleguide/components/Pathline/PathlineRenderer.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import IssueList from '../IssueList/IssueList';
-// @ts-ignore
-import OriginalPathlineRenderer from 'react-styleguidist/lib/rsg-components/Pathline/PathlineRenderer';
-
-interface Props {
-  children: string;
-}
-
-export const PathlineRenderer = (props: Props) => {
-  const path = props.children;
-  return (
-    <div>
-      <OriginalPathlineRenderer>{path}</OriginalPathlineRenderer>
-      <IssueList componentPath={path} />
-    </div>
-  );
-};