@semcore/ui 11.1.1 → 11.2.0

package/CHANGELOG.md

@@ -1,3 +1,60 @@
+## [11.2.0] - 2022-04-26
+
+### @semcore/animation
+
+- **Added** Added `preserveNode` property.
+
+### @semcore/chart
+
+- **Fixed** Fixed lost typings of `@semcore/chart/utils/colors` utility.
+
+### @semcore/d3-chart
+
+- **Added** Added `<RadialTree />` chart.
+- **Fixed** Fixed left and right `<Axis.Title />` unexpected horizontal transition based on title characters count.
+
+### @semcore/data-table
+
+- **Fixed** Fixed package lost typings.
+- **Changed** Fixed grouped rows hover highlight.
+- **Added** Virtual scroll support.
+- **Changed** Internal enhances, rewritten from js to ts, render algorithmic performance increased.
+- **Fixed** Fixed uninitialized columns width from fixed size to equal flex-boxes.
+
+### @semcore/inline-edit
+
+- **Added** Introduced `<InlineEdit />` component.
+
+### @semcore/inline-input
+
+- **Changed** Changed `<InlineInput />` api to make it more consistent with other components.
+
+### @semcore/input-tags
+
+- **Changed** Deprecated `onAdd` callback property in favor of new `onAppend` one.
+- **Changed** Provided SyntheticEvents to second callbacks argument.
+
+### @semcore/pagination
+
+- **Fixed** Fixed displaying of 2, 3 and 4 digit page number in focused pagination input.
+
+### @semcore/scroll-area
+
+- **Fixed** Made `onScroll` property optional.
+- **Added** Added `onScroll` property.
+
+### @semcore/slider
+
+- **Fixed** Fixed types for `Slider.Knob` and `Slider.Bar`
+
+### @semcore/spin-container
+
+- **Fixed** Fixed scollable spin-container (e.g. in `data-table`).
+
+### @semcore/widget-empty
+
+- **Added** Added `radial-tree-chart` illustration.
+
 ## [11.1.1] - 2022-04-03
 
 ### @semcore/animation
@@ -14,7 +71,7 @@
 
 ### @semcore/textarea
 
-- **Fix** Fixed wrong resize of controlled textarea when value is significantly changes in parent controller.
+- **Fixed** Fixed wrong resize of controlled textarea when value is significantly changes in parent controller.
 
 ## [11.1.0] - 2022-03-30
 

package/README.md

@@ -6,7 +6,10 @@ CLI commands should be run in repo root dir.
 
 - Run `yarn build`
 - Add new components to `./semcore/ui/components.json`
-- `yarn workspace @semcore/ui generate`
+- `cd semcore/ui`
+- `yarn install`
+- `yarn generate`
+- `cd ../..`
 - `yarn update-release-changelog`
 - Check out CHANGELOG.md and fix if needed
 - Run `yarn pub --package ui --no-check-changelog`

package/accordion/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/accordion');

package/accordion/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/accordion';
+export * from '@semcore/accordion';

package/animation/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/animation');

package/animation/index.mjs

@@ -0,0 +1 @@
+export * from '@semcore/animation';

package/badge/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/badge');

package/badge/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/badge';
+export * from '@semcore/badge';

package/base-trigger/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/base-trigger');

package/base-trigger/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/base-trigger';
+export * from '@semcore/base-trigger';

package/breadcrumbs/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/breadcrumbs');

package/breadcrumbs/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/breadcrumbs';
+export * from '@semcore/breadcrumbs';

package/breakpoints/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/breakpoints');

package/breakpoints/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/breakpoints';
+export * from '@semcore/breakpoints';

package/button/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/button');

package/button/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/button';
+export * from '@semcore/button';

package/card/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/card');

package/card/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/card';
+export * from '@semcore/card';

package/carousel/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/carousel');

package/carousel/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/carousel';
+export * from '@semcore/carousel';

package/chart/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/chart');

package/chart/index.mjs

@@ -0,0 +1 @@
+export * from '@semcore/chart';

package/checkbox/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/checkbox');

package/checkbox/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/checkbox';
+export * from '@semcore/checkbox';

package/core/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/core');

package/core/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/core';
+export * from '@semcore/core';

package/counter/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/counter');

package/counter/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/counter';
+export * from '@semcore/counter';

package/d3-chart/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/d3-chart');

package/d3-chart/index.mjs

@@ -0,0 +1 @@
+export * from '@semcore/d3-chart';

package/data-table/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/data-table');

package/data-table/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/data-table';
+export * from '@semcore/data-table';

package/date-picker/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/date-picker');

package/date-picker/index.mjs

@@ -0,0 +1 @@
+export * from '@semcore/date-picker';

package/divider/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/divider');

package/divider/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/divider';
+export * from '@semcore/divider';

package/dot/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/dot');

package/dot/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/dot';
+export * from '@semcore/dot';

package/drag-and-drop/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/drag-and-drop');

package/drag-and-drop/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/drag-and-drop';
+export * from '@semcore/drag-and-drop';

package/dropdown/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/dropdown');

package/dropdown/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/dropdown';
+export * from '@semcore/dropdown';

package/dropdown-menu/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/dropdown-menu');

package/dropdown-menu/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/dropdown-menu';
+export * from '@semcore/dropdown-menu';

package/email/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/email');

package/email/index.mjs

@@ -0,0 +1 @@
+export * from '@semcore/email';

package/errors/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/errors');

package/errors/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/errors';
+export * from '@semcore/errors';

package/feature-popover/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/feature-popover');

package/feature-popover/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/feature-popover';
+export * from '@semcore/feature-popover';

package/feedback-form/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/feedback-form');

package/feedback-form/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/feedback-form';
+export * from '@semcore/feedback-form';

package/flags/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/flags');

package/flags/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/flags';
+export * from '@semcore/flags';

package/flex-box/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/flex-box');

package/flex-box/index.mjs

@@ -0,0 +1 @@
+export * from '@semcore/flex-box';

package/format-text/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/format-text');

package/format-text/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/format-text';
+export * from '@semcore/format-text';

package/fullscreen-modal/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/fullscreen-modal');

package/fullscreen-modal/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/fullscreen-modal';
+export * from '@semcore/fullscreen-modal';

package/generate.ts

@@ -1,7 +1,7 @@
 import { execSync } from 'child_process';
 import path from 'path';
 import fs from 'fs-extra';
-import glob from 'glob';
+import glob from 'fast-glob';
 import { fileURLToPath } from 'url';
 import { createRequire } from 'module';
 
@@ -21,19 +21,48 @@ const removeDirectory = async () => {
 };
 
 const installComponents = (packages: string[]) => {
-  execSync(`npm_config_registry=${REGISTRY_URL} yarn add ${packages.join(' ')} -E`, {
+  execSync(`npm_config_registry=${REGISTRY_URL} yarn add ${packages.join(' ')} --exact`, {
     stdio: 'inherit',
     cwd: dirname,
   });
 
-  const node_modules = execSync(
-    'mkdir -p ./node_modules/@semcore && find ./node_modules/@semcore -name "node_modules" -type d',
-    {
-      cwd: dirname,
-    },
-  ).toString();
-
-  if (node_modules) throw new Error(`DUPLICATES FOUND ${node_modules}`);
+  const nestedNodeModulesAllowList = {
+    // remove after external theme update (https://github.com/semrush/intergalactic/tree/feature/restyling) will be merged (approx may 10 2022)
+    './node_modules/@semcore/project-create/node_modules/final-form': '4.18.7',
+    './node_modules/@semcore/project-create/node_modules/react-final-form': '6.3.5',
+    './node_modules/@semcore/utils/node_modules/classnames': '2.3.1',
+    './node_modules/@semcore/chart/node_modules/@upsetjs/venn.js': '1.4.2',
+    // Exclude @semcore/chart from @semcore/ui and remove followings
+    './node_modules/@semcore/chart/node_modules/d3-selection': '3.0.0',
+    './node_modules/@semcore/d3-chart/node_modules/d3-array': '3.1.6',
+    './node_modules/@semcore/d3-chart/node_modules/d3-color': '3.1.0',
+    './node_modules/@semcore/d3-chart/node_modules/d3-interpolate': '3.0.1',
+    './node_modules/@semcore/d3-chart/node_modules/internmap': '2.0.3',
+  };
+
+  const nestedNodeModules = glob
+    .sync('**/node_modules/**/package.json', {
+      cwd: path.resolve(dirname, 'node_modules/@semcore'),
+    })
+    .map(
+      (packageFilePath) =>
+        './node_modules/@semcore/' +
+        packageFilePath.substring(0, packageFilePath.length - '/package.json'.length),
+    )
+    .map((relativePath) => {
+      const { version } = fs.readJsonSync(path.resolve(dirname, relativePath, 'package.json'));
+
+      return `${relativePath} @${version}`;
+    })
+    .filter((dependency) => {
+      const [relativePath, version] = dependency.split(' @');
+      if (!nestedNodeModulesAllowList[relativePath]) return true;
+      return nestedNodeModulesAllowList[relativePath] !== version;
+    });
+
+  if (nestedNodeModules.length > 0) {
+    throw new Error(`Nested node_modules found:\n- ${nestedNodeModules.join('\n- ')}\n`);
+  }
 };
 
 const hasExportDefault = async (dependency: string) => {
@@ -55,12 +84,38 @@ const hasExportDefault = async (dependency: string) => {
   }
 };
 
-const EXPORT_TEMPLATES = {
-  LIB_DEFAULT: (lib: string, component: string) =>
-    `export { default } from '${lib}/lib/${component}';\nexport * from '${lib}/lib/${component}';`,
-  LIB_NAMED: (lib: string, component: string) => `export * from '${lib}/lib/${component}';`,
-  DEFAULT: (lib: string) => `export { default } from '${lib}';\nexport * from '${lib}';`,
-  NAMED: (lib: string) => `export * from '${lib}';`,
+type ExportExtensions = 'js' | 'd.ts' | 'cjs' | 'mjs';
+const exportExtensions: ExportExtensions[] = ['js', 'd.ts', 'cjs', 'mjs'];
+
+const EXPORT_TEMPLATES: {
+  [extention in ExportExtensions]: {
+    LIB_DEFAULT: (lib: string, component: string) => string;
+    LIB_NAMED: (lib: string, component: string) => string;
+    DEFAULT: (lib: string) => string;
+    NAMED: (lib: string) => string;
+  };
+} = {
+  cjs: {
+    LIB_DEFAULT: (lib: string, component: string) =>
+      `module.exports = require('${lib}/lib/${component}');`,
+    LIB_NAMED: (lib: string, component: string) =>
+      `module.exports = require('${lib}/lib/${component}');`,
+    DEFAULT: (lib: string) => `module.exports = require('${lib}');`,
+    NAMED: (lib: string) => `module.exports = require('${lib}');`,
+  },
+  mjs: {
+    LIB_DEFAULT: (lib: string, component: string) =>
+      `export { default } from '${lib}/lib/${component}';\nexport * from '${lib}/lib/${component}';`,
+    LIB_NAMED: (lib: string, component: string) => `export * from '${lib}/lib/${component}';`,
+    DEFAULT: (lib: string) => `export { default } from '${lib}';\nexport * from '${lib}';`,
+    NAMED: (lib: string) => `export * from '${lib}';`,
+  },
+  get js() {
+    return EXPORT_TEMPLATES.mjs;
+  },
+  get 'd.ts'() {
+    return EXPORT_TEMPLATES.mjs;
+  },
 } as const;
 
 const GENERATOR = {
@@ -70,21 +125,25 @@ const GENERATOR = {
     const utilsPath = path.join(utilsMain, '..');
     const utils = glob.sync('**/*.+(js|ts)', { cwd: utilsPath });
     for (const util of utils) {
-      const utilsModule = `${utilsPath}/${util.replace('.d.ts', '.js')}`;
+      const utilNameWithoutExtention = util.replace(/\.(d\.)?(t|j)s$/, '');
 
       // index.js of utils throws & useless, so we copy it
-      if (util.replace('.d.ts', '.js') === 'index.js') {
+      if (utilNameWithoutExtention === 'index') {
         await fs.copy(`${utilsPath}/${util}`, `./${name}/lib/${util}`);
         continue;
       }
 
-      const TEMPLATE = (await hasExportDefault(utilsModule))
-        ? EXPORT_TEMPLATES.LIB_DEFAULT
-        : EXPORT_TEMPLATES.LIB_NAMED;
-      await fs.outputFile(
-        `./${name}/lib/${util}`,
-        TEMPLATE(dependency, util.replace('.d.ts', '').replace('.js', '')),
-      );
+      for (const extension of exportExtensions) {
+        const defaultExport = await hasExportDefault(`${utilsPath}/${utilNameWithoutExtention}`);
+        const template = defaultExport
+          ? EXPORT_TEMPLATES[extension].LIB_DEFAULT
+          : EXPORT_TEMPLATES[extension].LIB_NAMED;
+
+        await fs.outputFile(
+          `./${name}/lib/${utilNameWithoutExtention}.${extension}`,
+          template(dependency, utilNameWithoutExtention),
+        );
+      }
     }
   },
   ICONS: async (dependency: string, name: string) => {
@@ -112,14 +171,14 @@ const GENERATOR = {
         })
         .map(path.dirname);
       for (const subFile of subDirs) {
-        await fs.outputFile(
-          path.resolve(`./${name}/lib/${icon}/${subFile}`, `index.js`),
-          EXPORT_TEMPLATES.LIB_DEFAULT(dependency, `${icon}/${subFile}`),
-        );
-        await fs.outputFile(
-          path.resolve(`./${name}/lib/${icon}/${subFile}`, `index.d.ts`),
-          EXPORT_TEMPLATES.LIB_DEFAULT(dependency, `${icon}/${subFile}`),
-        );
+        for (const extension of exportExtensions) {
+          const template = EXPORT_TEMPLATES[extension].LIB_DEFAULT;
+
+          await fs.outputFile(
+            path.resolve(`./${name}/lib/${icon}/${subFile}`, `index.${extension}`),
+            template(dependency, `${icon}/${subFile}`),
+          );
+        }
       }
     }
     for (const icon of newIcons) {
@@ -130,23 +189,25 @@ const GENERATOR = {
         .map(path.dirname);
 
       for (const subFile of subFiles) {
-        await fs.outputFile(
-          `./${name}/${icon}/${subFile}/index.js`,
-          EXPORT_TEMPLATES.DEFAULT(`${dependency}/${icon}/${subFile}`),
-        );
-        await fs.outputFile(
-          `./${name}/${icon}/${subFile}/index.d.ts`,
-          EXPORT_TEMPLATES.DEFAULT(`${dependency}/${icon}/${subFile}`),
-        );
+        for (const extension of exportExtensions) {
+          const template = EXPORT_TEMPLATES[extension].DEFAULT;
+          await fs.outputFile(
+            `./${name}/${icon}/${subFile}/index.${extension}`,
+            template(`${dependency}/${icon}/${subFile}`),
+          );
+        }
       }
     }
   },
   OTHER: async (dependency: string, name: string) => {
-    const TEMPLATE = (await hasExportDefault(dependency))
-      ? EXPORT_TEMPLATES.DEFAULT
-      : EXPORT_TEMPLATES.NAMED;
-    await fs.outputFile(`./${name}/index.js`, TEMPLATE(dependency));
-    await fs.outputFile(`./${name}/index.d.ts`, TEMPLATE(dependency));
+    const defaultExport = await hasExportDefault(dependency);
+
+    for (const extension of exportExtensions) {
+      const template = defaultExport
+        ? EXPORT_TEMPLATES[extension].DEFAULT
+        : EXPORT_TEMPLATES[extension].NAMED;
+      await fs.outputFile(`./${name}/index.${extension}`, template(dependency));
+    }
   },
 };
 

package/grid/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/grid');

package/grid/index.mjs

@@ -0,0 +1 @@
+export * from '@semcore/grid';

package/icon/Ad/l/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/Ad/l');

package/icon/Ad/l/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/Ad/./l';
-export * from '@semcore/icon/Ad/./l';
+export { default } from '@semcore/icon/Ad/l';
+export * from '@semcore/icon/Ad/l';

package/icon/Ad/l/index.js

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/Ad/./l';
-export * from '@semcore/icon/Ad/./l';
+export { default } from '@semcore/icon/Ad/l';
+export * from '@semcore/icon/Ad/l';

package/icon/Ad/l/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Ad/l';
+export * from '@semcore/icon/Ad/l';

package/icon/Ad/m/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/Ad/m');

package/icon/Ad/m/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/Ad/./m';
-export * from '@semcore/icon/Ad/./m';
+export { default } from '@semcore/icon/Ad/m';
+export * from '@semcore/icon/Ad/m';

package/icon/Ad/m/index.js

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/Ad/./m';
-export * from '@semcore/icon/Ad/./m';
+export { default } from '@semcore/icon/Ad/m';
+export * from '@semcore/icon/Ad/m';

package/icon/Ad/m/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/Ad/m';
+export * from '@semcore/icon/Ad/m';

package/icon/AdBottom/l/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/AdBottom/l');

package/icon/AdBottom/l/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/AdBottom/./l';
-export * from '@semcore/icon/AdBottom/./l';
+export { default } from '@semcore/icon/AdBottom/l';
+export * from '@semcore/icon/AdBottom/l';

package/icon/AdBottom/l/index.js

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/AdBottom/./l';
-export * from '@semcore/icon/AdBottom/./l';
+export { default } from '@semcore/icon/AdBottom/l';
+export * from '@semcore/icon/AdBottom/l';

package/icon/AdBottom/l/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/AdBottom/l';
+export * from '@semcore/icon/AdBottom/l';

package/icon/AdBottom/m/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/AdBottom/m');

package/icon/AdBottom/m/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/AdBottom/./m';
-export * from '@semcore/icon/AdBottom/./m';
+export { default } from '@semcore/icon/AdBottom/m';
+export * from '@semcore/icon/AdBottom/m';

package/icon/AdBottom/m/index.js

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/AdBottom/./m';
-export * from '@semcore/icon/AdBottom/./m';
+export { default } from '@semcore/icon/AdBottom/m';
+export * from '@semcore/icon/AdBottom/m';

package/icon/AdBottom/m/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/AdBottom/m';
+export * from '@semcore/icon/AdBottom/m';

package/icon/AdTop/l/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/AdTop/l');

package/icon/AdTop/l/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/AdTop/./l';
-export * from '@semcore/icon/AdTop/./l';
+export { default } from '@semcore/icon/AdTop/l';
+export * from '@semcore/icon/AdTop/l';

package/icon/AdTop/l/index.js

@@ -1,2 +1,2 @@
-export { default } from '@semcore/icon/AdTop/./l';
-export * from '@semcore/icon/AdTop/./l';
+export { default } from '@semcore/icon/AdTop/l';
+export * from '@semcore/icon/AdTop/l';

package/icon/AdTop/l/index.mjs

@@ -0,0 +1,2 @@
+export { default } from '@semcore/icon/AdTop/l';
+export * from '@semcore/icon/AdTop/l';

package/icon/AdTop/m/index.cjs

@@ -0,0 +1 @@
+module.exports = require('@semcore/icon/AdTop/m');