feat: publish with source code (#713)

.changeset/odd-pigs-remain.md

@@ -0,0 +1,5 @@
+---
+'@alfalab/core-components-shared': minor
+---
+
+Новый пакет с общими утилитами и т.п

.changeset/sixty-moose-battle.md

@@ -0,0 +1,107 @@
+---
+'@alfalab/core-components-action-button': minor
+'@alfalab/core-components-alert': minor
+'@alfalab/core-components-amount': minor
+'@alfalab/core-components-amount-input': minor
+'@alfalab/core-components-attach': minor
+'@alfalab/core-components-backdrop': minor
+'@alfalab/core-components-badge': minor
+'@alfalab/core-components-bank-card': minor
+'@alfalab/core-components-base-modal': minor
+'@alfalab/core-components-bottom-sheet': minor
+'@alfalab/core-components-button': minor
+'@alfalab/core-components-calendar': minor
+'@alfalab/core-components-calendar-input': minor
+'@alfalab/core-components-calendar-range': minor
+'@alfalab/core-components-calendar-with-skeleton': minor
+'@alfalab/core-components-card-image': minor
+'@alfalab/core-components-cdn-icon': minor
+'@alfalab/core-components-chart': minor
+'@alfalab/core-components-checkbox': minor
+'@alfalab/core-components-checkbox-group': minor
+'@alfalab/core-components-circular-progress-bar': minor
+'@alfalab/core-components-code-input': minor
+'@alfalab/core-components-collapse': minor
+'@alfalab/core-components-comment': minor
+'@alfalab/core-components-confirmation': minor
+'@alfalab/core-components-confirmation-v1': minor
+'@alfalab/core-components-custom-button': minor
+'@alfalab/core-components-custom-picker-button': minor
+'@alfalab/core-components-date-input': minor
+'@alfalab/core-components-date-range-input': minor
+'@alfalab/core-components-date-time-input': minor
+'@alfalab/core-components-divider': minor
+'@alfalab/core-components-drawer': minor
+'@alfalab/core-components-dropzone': minor
+'@alfalab/core-components-file-upload-item': minor
+'@alfalab/core-components-filter-tag': minor
+'@alfalab/core-components-form-control': minor
+'@alfalab/core-components-gallery': minor
+'@alfalab/core-components-gap': minor
+'@alfalab/core-components-generic-wrapper': minor
+'@alfalab/core-components-global-store': minor
+'@alfalab/core-components-grid': minor
+'@alfalab/core-components-hatching-progress-bar': minor
+'@alfalab/core-components-icon-button': minor
+'@alfalab/core-components-icon-view': minor
+'@alfalab/core-components-indicator': minor
+'@alfalab/core-components-input': minor
+'@alfalab/core-components-input-autocomplete': minor
+'@alfalab/core-components-intl-phone-input': minor
+'@alfalab/core-components-keyboard-focusable': minor
+'@alfalab/core-components-link': minor
+'@alfalab/core-components-list': minor
+'@alfalab/core-components-list-header': minor
+'@alfalab/core-components-loader': minor
+'@alfalab/core-components-masked-input': minor
+'@alfalab/core-components-modal': minor
+'@alfalab/core-components-mq': minor
+'@alfalab/core-components-navigation-bar': minor
+'@alfalab/core-components-notification': minor
+'@alfalab/core-components-notification-manager': minor
+'@alfalab/core-components-number-input': minor
+'@alfalab/core-components-pagination': minor
+'@alfalab/core-components-pass-code': minor
+'@alfalab/core-components-password-input': minor
+'@alfalab/core-components-pattern-lock': minor
+'@alfalab/core-components-phone-input': minor
+'@alfalab/core-components-picker-button': minor
+'@alfalab/core-components-plate': minor
+'@alfalab/core-components-popover': minor
+'@alfalab/core-components-portal': minor
+'@alfalab/core-components-progress-bar': minor
+'@alfalab/core-components-pure-cell': minor
+'@alfalab/core-components-pure-input': minor
+'@alfalab/core-components-radio': minor
+'@alfalab/core-components-radio-group': minor
+'@alfalab/core-components-scrollbar': minor
+'@alfalab/core-components-segmented-control': minor
+'@alfalab/core-components-select': minor
+'@alfalab/core-components-select-with-tags': minor
+'@alfalab/core-components-side-panel': minor
+'@alfalab/core-components-skeleton': minor
+'@alfalab/core-components-slider': minor
+'@alfalab/core-components-slider-input': minor
+'@alfalab/core-components-sortable-list': minor
+'@alfalab/core-components-space': minor
+'@alfalab/core-components-spinner': minor
+'@alfalab/core-components-stack': minor
+'@alfalab/core-components-status': minor
+'@alfalab/core-components-stepped-progress-bar': minor
+'@alfalab/core-components-steps': minor
+'@alfalab/core-components-switch': minor
+'@alfalab/core-components-system-message': minor
+'@alfalab/core-components-table': minor
+'@alfalab/core-components-tabs': minor
+'@alfalab/core-components-tag': minor
+'@alfalab/core-components-textarea': minor
+'@alfalab/core-components-time-input': minor
+'@alfalab/core-components-toast': minor
+'@alfalab/core-components-toast-plate': minor
+'@alfalab/core-components-tooltip': minor
+'@alfalab/core-components-typography': minor
+'@alfalab/core-components-underlay': minor
+'@alfalab/core-components-with-suffix': minor
+---
+
+- Теперь каждый пакет публикуется с исходниками

.github/workflows/package-size.yml

@@ -45,11 +45,11 @@ jobs:
 
             const table = [...new Set([...masterComponents, ...currentComponents])]
               .reduce((acc, packageName) => {
-                const entryPoints = [...new Set([...Object.keys(masterFile[packageName]), ...Object.keys(currentFile[packageName])])];
+                const entryPoints = [...new Set([...Object.keys(masterFile[packageName] || {}), ...Object.keys(currentFile[packageName] || {})])];
 
                 entryPoints.forEach((entryPoint) => {
-                  const now = currentFile[packageName][entryPoint] || 0;
-                  const before = masterFile[packageName][entryPoint] || 0;
+                  const now = currentFile[packageName]?.[entryPoint] || 0;
+                  const before = masterFile[packageName]?.[entryPoint] || 0;
 
                   if (Math.abs(now - before) > 2) {
                     shouldComment = true;

bin/analyze-package-sizes.mjs

@@ -2,6 +2,7 @@ import * as esbuild from 'esbuild';
 import globby from 'globby';
 import shell from 'shelljs';
 import fs from 'node:fs';
+import { ENTRY_POINTS } from '../entry-points.mjs';
 
 const packages = shell.exec(
     `lerna list \\
@@ -20,7 +21,7 @@ const packageList = packages
 
 async function calculateBundleSize(packageName) {
     const entryPoints = await globby(
-        `./packages/${packageName}/src/{index,desktop,mobile,responsive,circle,super-ellipse,rectangle,no-shape,shared|collapsible}.ts`,
+        `./packages/${packageName}/src/{${ENTRY_POINTS.join(',')}}.ts`,
     );
 
     const result = await esbuild.build({

bin/build.sh

@@ -45,3 +45,5 @@ cp README.md dist/README.md
 
 # делаю корневой пакет публичным
 yarn json -f dist/package.json -I -e "delete this.private" -e "delete this.workspaces"
+
+yarn fill-exports-field

bin/fill-exports-field.mjs

@@ -0,0 +1,62 @@
+import shell from 'shelljs';
+import fs from 'node:fs';
+import { createRequire } from 'module';
+import { ENTRY_POINTS } from '../entry-points.mjs';
+
+const require = createRequire(import.meta.url);
+
+const packages = shell.exec(
+    `lerna list \\
+        --ignore @alfalab/core-components-codemod \\
+        --ignore @alfalab/core-components-vars \\
+        --ignore @alfalab/core-components-themes \\
+        --all`,
+    { silent: true },
+).stdout;
+
+const packageList = packages
+    .split('\n')
+    .map((pkg) => pkg.trim())
+    .filter(Boolean)
+    .map((pkg) => pkg.replace('@alfalab/core-components-', ''));
+
+function fillExportsField() {
+    const exports = {
+        './vars': './vars/index.js',
+        './vars/*': './vars/*',
+        './themes/*': './themes/*',
+    };
+
+    while (packageList.length) {
+        const pkgName = packageList.pop();
+        const pkgPath = `./packages/${pkgName}/src`;
+
+        ENTRY_POINTS.forEach((entry) => {
+            const hasEntry = fs.existsSync(`${pkgPath}/${entry}.ts`);
+
+            if (entry === 'index' && hasEntry) {
+                exports[`./${pkgName}/modern`] = `./${pkgName}/modern/index.js`;
+                exports[`./${pkgName}/esm`] = `./${pkgName}/esm/index.js`;
+                exports[`./${pkgName}/cssm`] = `./${pkgName}/cssm/index.js`;
+            }
+
+            if (hasEntry) {
+                exports[`./${pkgName}${entry === 'index' ? '' : `/${entry}`}`] = {
+                    import: `./${pkgName}/esm/${entry}.js`,
+                    require: `./${pkgName}/${entry}.js`,
+                };
+            }
+        });
+
+        exports[`./${pkgName}/modern/*`] = `./${pkgName}/modern/*`;
+        exports[`./${pkgName}/esm/*`] = `./${pkgName}/esm/*`;
+        exports[`./${pkgName}/cssm/*`] = `./${pkgName}/cssm/*`;
+    }
+
+    const packageJson = require('../dist/package.json');
+    packageJson.exports = exports;
+
+    fs.writeFileSync('./dist/package.json', JSON.stringify(packageJson, null, 4));
+}
+
+fillExportsField();

bin/purgecss.js

@@ -21,7 +21,9 @@ const shouldSkipPath = (path) =>
 if (shouldSkipPath(cwd)) process.exit(0);
 
 // Ищем css внутри пакета в packages и в root бандле
-const matches = glob.sync(`{dist/**/*.css,../../dist/${pkgName}/**/*.css}`);
+const matches = glob.sync(`{dist/**/*.css,../../dist/${pkgName}/**/*.css}`, {
+    ignore: '**/src/**/*.css',
+});
 
 matches.forEach((match) => {
     const purge = new PurgeCSS();

entry-points.mjs

@@ -0,0 +1,12 @@
+export const ENTRY_POINTS = [
+    'index',
+    'desktop',
+    'mobile',
+    'responsive',
+    'circle',
+    'super-ellipse',
+    'rectangle',
+    'no-shape',
+    'shared',
+    'collapsible',
+];

package.json

@@ -38,7 +38,8 @@
         "pub:ci": "node ./bin/release.js",
         "pub:beta-ci": "./bin/publish-beta-ci.sh",
         "generate-changelog": "cross-env GENERATE_CHANGELOG_ONLY=true node ./bin/release.js",
-        "analyze-package-sizes": "node bin/analyze-package-sizes.mjs"
+        "analyze-package-sizes": "node bin/analyze-package-sizes.mjs",
+        "fill-exports-field": "node ./bin/fill-exports-field.mjs"
     },
     "browserslist": {
         "production": [

packages/action-button/package.json

@@ -15,6 +15,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-spinner": "^3.0.7",
+        "@alfalab/core-components-shared": "^0.0.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "1.1.0",

packages/action-button/src/Component.tsx

@@ -8,11 +8,10 @@ import React, {
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import { getDataTestId } from '@alfalab/core-components-shared';
 import { Spinner } from '@alfalab/core-components-spinner';
 import { useFocus } from '@alfalab/hooks';
 
-import { getDataTestId } from '../../utils';
-
 import { useLoader } from './hooks';
 
 import defaultColors from './default.module.css';

packages/action-button/tsconfig.json

@@ -9,5 +9,5 @@
             "@alfalab/core-components-*": ["../*/src"]
         }
     },
-    "references": [{ "path": "../spinner" }]
+    "references": [{ "path": "../spinner" }, { "path": "../shared" }]
 }

packages/bottom-sheet/package.json

@@ -18,6 +18,7 @@
         "@alfalab/core-components-backdrop": "^3.0.7",
         "@alfalab/core-components-base-modal": "^5.2.1",
         "@alfalab/core-components-navigation-bar": "^0.3.7",
+        "@alfalab/core-components-shared": "^0.0.0",
         "classnames": "^2.3.1",
         "react-div-100vh": "^0.7.0",
         "react-merge-refs": "^1.1.0",

packages/bottom-sheet/src/component.tsx

@@ -13,8 +13,7 @@ import { SwipeCallback, SwipeDirections, useSwipeable } from 'react-swipeable';
 import cn from 'classnames';
 
 import { BaseModal } from '@alfalab/core-components-base-modal';
-
-import { getDataTestId } from '../../utils';
+import { getDataTestId } from '@alfalab/core-components-shared';
 
 import { Footer } from './components/footer/Component';
 import { Header, HeaderProps } from './components/header/Component';

packages/bottom-sheet/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "include": ["src", "../../typings", "../utils", "../types"],
+    "include": ["src", "../../typings", "../types"],
     "extends": "../../tsconfig.json",
     "compilerOptions": {
         "outDir": "dist",
@@ -14,6 +14,7 @@
         { "path": "../base-modal" },
         { "path": "../icon-button" },
         { "path": "../typography" },
-        { "path": "../navigation-bar" }
+        { "path": "../navigation-bar" },
+        { "path": "../shared" }
     ]
 }

packages/button/package.json

@@ -16,6 +16,7 @@
     },
     "dependencies": {
         "@alfalab/core-components-spinner": "^3.0.7",
+        "@alfalab/core-components-shared": "^0.0.0",
         "@alfalab/hooks": "^1.13.0",
         "classnames": "^2.3.1",
         "react-merge-refs": "^1.1.0",

packages/button/src/Component.tsx

@@ -15,7 +15,7 @@ import cn from 'classnames';
 import { Spinner } from '@alfalab/core-components-spinner';
 import { useFocus } from '@alfalab/hooks';
 
-import { getDataTestId } from '../../utils';
+import { getDataTestId } from '@alfalab/core-components-shared';
 
 import styles from './index.module.css';
 import defaultColors from './default.module.css';

packages/button/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "include": ["src", "../../typings", "../utils"],
+    "include": ["src", "../../typings"],
     "extends": "../../tsconfig.json",
     "compilerOptions": {
         "outDir": "dist",
@@ -9,5 +9,5 @@
             "@alfalab/core-components-*": ["../*/src"]
         }
     },
-    "references": [{ "path": "../spinner" }]
+    "references": [{ "path": "../spinner" }, { "path": "../shared" }]
 }

packages/chart/src/components/Tick/index.module.css

@@ -1,5 +1,4 @@
 @import '../../../../themes/src/default.css';
-@import '../../../../vars//src//typography.css';
 
 .tickText {
     fill: var(--color-light-text-primary);

packages/navigation-bar/package.json

@@ -14,6 +14,7 @@
         "@alfalab/core-components-icon-button": "^6.1.3",
         "@alfalab/core-components-button": "^8.5.1",
         "@alfalab/core-components-typography": "^3.2.2",
+        "@alfalab/core-components-shared": "^0.0.0",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",

packages/navigation-bar/src/Component.tsx

@@ -3,10 +3,9 @@ import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import mergeRefs from 'react-merge-refs';
 import cn from 'classnames';
 
+import { getDataTestId } from '@alfalab/core-components-shared';
 import { useLayoutEffect_SAFE_FOR_SSR } from '@alfalab/hooks';
 
-import { getDataTestId } from '../../utils';
-
 import { BackArrowAddon } from './components/back-arrow-addon';
 import { Closer } from './components/closer';
 import type { ContentParams, NavigationBarProps } from './types';

packages/navigation-bar/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "include": ["src", "../../typings", "../utils"],
+    "include": ["src", "../../typings"],
     "extends": "../../tsconfig.json",
     "compilerOptions": {
         "outDir": "dist",
@@ -9,5 +9,9 @@
             "@alfalab/core-components-*": ["../*/src"]
         }
     },
-    "references": [{ "path": "../icon-button" }, { "path": "../typography" }]
+    "references": [
+        { "path": "../icon-button" },
+        { "path": "../typography" },
+        { "path": "../shared" }
+    ]
 }

packages/pass-code/package.json

@@ -17,6 +17,7 @@
     "dependencies": {
         "@alfalab/core-components-button": "^8.5.1",
         "@alfalab/core-components-gap": "^1.1.3",
+        "@alfalab/core-components-shared": "^0.0.0",
         "@alfalab/icons-glyph": "^2.108.0",
         "classnames": "^2.3.1",
         "react-transition-group": "^4.4.5",