@alfalab/core-components 32.0.0-beta.0 → 32.0.0

package/steps/modern/components/step/Component.js

@@ -0,0 +1,85 @@
+import React, { useRef } from 'react';
+import cn from 'classnames';
+import { useFocus } from '@alfalab/hooks';
+import { CheckmarkCircleMIcon } from '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import { ExclamationCircleMIcon } from '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import { ClockMIcon } from '@alfalab/icons-glyph/ClockMIcon';
+import '../../../../badge/modern';
+import { StepIndicator } from '../step-indicator/Component.js';
+
+var styles = {"step":"steps__step_xhvt7","vertical":"steps__vertical_xhvt7","interactive":"steps__interactive_xhvt7","disabled":"steps__disabled_xhvt7","text":"steps__text_xhvt7","indicator":"steps__indicator_xhvt7","option":"steps__option_xhvt7","dash":"steps__dash_xhvt7","completed":"steps__completed_xhvt7","focused":"steps__focused_xhvt7","selected":"steps__selected_xhvt7","checkbox":"steps__checkbox_xhvt7","dot":"steps__dot_xhvt7","error":"steps__error_xhvt7","unordered":"steps__unordered_xhvt7","completedIndicator":"steps__completedIndicator_xhvt7"};
+require('./index.css');
+
+const Step = ({ children, stepNumber, isSelected, disabled, ordered, isPositive, isError, isWarning, isWaiting, customStepIndicator, isStepCompleted, onClick, interactive, isVerticalAlign, isNotLastStep, }) => {
+    const stepRef = useRef(null);
+    const [focused] = useFocus(stepRef, 'keyboard');
+    const handleButtonClick = () => {
+        if (!disabled && onClick) {
+            onClick(stepNumber);
+        }
+    };
+    const handleTextClick = (e) => {
+        if (!interactive) {
+            e.stopPropagation();
+        }
+    };
+    const handleKeyDown = (event) => {
+        if (event.key === 'Enter') {
+            handleButtonClick();
+        }
+    };
+    const getStepIndicator = () => {
+        if (customStepIndicator) {
+            return React.createElement(StepIndicator, Object.assign({}, customStepIndicator));
+        }
+        if (isError) {
+            return React.createElement(StepIndicator, { iconColor: 'negative', content: React.createElement(ExclamationCircleMIcon, null) });
+        }
+        if (isWarning) {
+            return React.createElement(StepIndicator, { iconColor: 'attention', content: React.createElement(ExclamationCircleMIcon, null) });
+        }
+        if (isWaiting) {
+            return React.createElement(StepIndicator, { iconColor: 'secondary', content: React.createElement(ClockMIcon, null) });
+        }
+        if (isPositive) {
+            return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null) });
+        }
+        if (isStepCompleted) {
+            return React.createElement(StepIndicator, { iconColor: 'positive', content: React.createElement(CheckmarkCircleMIcon, null), className: styles.completedIndicator });
+        }
+        if (!ordered) {
+            return (React.createElement("div", { className: styles.checkbox },
+                React.createElement("span", { className: styles.dot })));
+        }
+        return stepNumber;
+    };
+    const renderDash = () => (React.createElement("div", { className: cn(styles.dash, {
+            [styles.vertical]: isVerticalAlign,
+            [styles.completed]: isStepCompleted,
+        }) }));
+    return (React.createElement("div", { role: 'button', tabIndex: 0, ref: stepRef, className: cn(styles.step, {
+            [styles.completed]: isStepCompleted,
+            [styles.error]: isError,
+            [styles.selected]: isSelected,
+            [styles.disabled]: disabled,
+            [styles.focused]: focused,
+            [styles.vertical]: isVerticalAlign,
+            [styles.interactive]: interactive,
+        }), onClick: handleButtonClick, onKeyDown: handleKeyDown },
+        React.createElement("div", { className: cn(styles.indicator, {
+                [styles.vertical]: isVerticalAlign,
+                [styles.interactive]: interactive,
+            }) },
+            React.createElement("div", { className: cn(styles.option, {
+                    [styles.unordered]: !ordered,
+                    [styles.vertical]: isVerticalAlign,
+                    [styles.error]: isError,
+                }) }, getStepIndicator()),
+            isNotLastStep && isVerticalAlign && renderDash()),
+        React.createElement("div", { className: cn(styles.text, {
+                [styles.interactive]: interactive,
+            }), onClick: handleTextClick }, children),
+        isNotLastStep && !isVerticalAlign && renderDash()));
+};
+
+export { Step };

package/steps/modern/components/step/index.css

@@ -0,0 +1,151 @@
+/* hash: j46l8 */
+:root {
+    --color-light-border-link: #007aff;
+    --color-light-border-primary: #dbdee1;
+    --color-light-graphic-positive: #2fc26e;
+    --color-light-graphic-primary: #0b1f35;
+    --color-light-graphic-primary-inverted: #fff;
+    --color-light-graphic-quaternary: #dbdee1;
+    --color-light-text-primary: #0b1f35;
+    --color-light-bg-primary-inverted-alpha-7: rgba(11, 31, 53, 0.07);
+    --color-light-bg-primary-inverted-alpha-15: rgba(11, 31, 53, 0.15);
+}
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+:root {
+    --gap-3xs: 2px;
+    --gap-2xs: 4px;
+    --gap-xs: 8px;
+}
+:root {
+    --focus-color: var(--color-light-border-link);
+}
+:root {
+    --steps-option-svg-color: var(--color-light-graphic-positive);
+    --steps-dash-border: 2px solid var(--color-light-graphic-positive);
+}
+.steps__step_xhvt7 {
+    display: flex;
+    outline: none
+}
+.steps__step_xhvt7:not(.steps__vertical_xhvt7) {
+        align-items: center;
+    }
+.steps__step_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+    cursor: pointer;
+}
+.steps__step_xhvt7.steps__disabled_xhvt7:hover .steps__text_xhvt7 {
+        background: unset;
+    }
+.steps__step_xhvt7.steps__disabled_xhvt7 .steps__indicator_xhvt7 {
+        cursor: unset;
+    }
+.steps__indicator_xhvt7 {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    margin-right: var(--gap-2xs)
+}
+.steps__indicator_xhvt7.steps__vertical_xhvt7 {
+        flex-direction: column;
+        margin-right: var(--gap-xs);
+    }
+.steps__option_xhvt7 {
+    font-size: 14px;
+    line-height: 20px;
+    font-weight: 700;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-light-graphic-primary);
+    background: var(--color-light-graphic-quaternary);
+    min-width: 24px;
+    height: 24px;
+    border-radius: 50%
+}
+.steps__option_xhvt7.steps__vertical_xhvt7 {
+        margin-top: var(--gap-xs);
+    }
+.steps__dash_xhvt7 {
+    flex: 1 1 auto;
+    min-width: 24px;
+    border-top: 2px solid var(--color-light-border-primary);
+    margin-right: var(--gap-xs)
+}
+.steps__dash_xhvt7.steps__completed_xhvt7 {
+        border-top: var(--steps-dash-border);
+    }
+.steps__dash_xhvt7.steps__vertical_xhvt7 {
+        min-width: unset;
+        min-height: 24px;
+        margin-right: 0;
+        margin-top: var(--gap-xs);
+        border-left: 2px solid var(--color-light-border-primary);
+        border-top: none;
+    }
+.steps__dash_xhvt7.steps__completed_xhvt7.steps__vertical_xhvt7 {
+        border-left: var(--steps-dash-border);
+    }
+.steps__text_xhvt7 {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 400;
+
+    transition: background 0.2s;
+    padding: var(--gap-xs);
+    color: var(--color-light-text-primary);
+    border-radius: var(--gap-xs);
+    height: min-content
+}
+.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):hover {
+            background: var(--color-light-bg-primary-inverted-alpha-7);
+        }
+.steps__text_xhvt7.steps__interactive_xhvt7:not(.steps__disabled_xhvt7):active {
+            background: var(--color-light-bg-primary-inverted-alpha-15);
+        }
+.steps__focused_xhvt7 {
+    outline: var(--gap-3xs) solid var(--focus-color);
+    outline-offset: var(--gap-3xs);
+}
+.steps__selected_xhvt7 .steps__text_xhvt7 {
+        color: var(--color-light-graphic-primary);
+    }
+.steps__selected_xhvt7 .steps__option_xhvt7 {
+        color: var(--color-light-graphic-primary-inverted);
+        background: var(--color-light-graphic-primary);
+    }
+.steps__checkbox_xhvt7 {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 50%;
+    width: 20px;
+    height: 20px;
+    border: 2px solid var(--color-light-graphic-quaternary);
+}
+.steps__dot_xhvt7 {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--color-light-graphic-quaternary);
+}
+.steps__selected_xhvt7 .steps__checkbox_xhvt7 {
+    border: 2px solid var(--color-light-graphic-primary)
+}
+.steps__selected_xhvt7 .steps__checkbox_xhvt7 .steps__dot_xhvt7 {
+        background: var(--color-light-graphic-primary);
+    }
+.steps__option_xhvt7:not(.steps__error_xhvt7).steps__unordered_xhvt7 {
+    background: unset;
+}
+.steps__completedIndicator_xhvt7 > [class*='positive'] {
+    color: var(--steps-option-svg-color);
+    background-color: var(--steps-option-svg-color);
+}

package/steps/modern/components/step/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/modern/components/step/index.js

@@ -0,0 +1,9 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import '@alfalab/icons-glyph/ClockMIcon';
+import '../../../../badge/modern';
+import '../step-indicator/Component.js';
+export { Step } from './Component.js';

package/steps/modern/components/step-indicator/Component.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import React from 'react';
+import { BadgeProps } from "../../../../badge";
+type StepIndicatorProps = Pick<BadgeProps, 'content' | 'iconColor' | 'className'>;
+declare const StepIndicator: React.FC<StepIndicatorProps>;
+export { StepIndicatorProps, StepIndicator };

package/steps/modern/components/step-indicator/Component.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import cn from 'classnames';
+import { Badge } from '../../../../badge/modern';
+
+var styles = {"component":"steps__component_19vei"};
+require('./index.css');
+
+const StepIndicator = ({ content, iconColor, className }) => {
+    return (React.createElement(Badge, { size: 'l', view: 'icon', iconColor: iconColor, className: cn(styles.component, className), content: content }));
+};
+
+export { StepIndicator };

package/steps/modern/components/step-indicator/index.css

@@ -0,0 +1,4 @@
+/* hash: crmt3 */
+.steps__component_19vei {
+    padding: 0;
+}

package/steps/modern/components/step-indicator/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/modern/components/step-indicator/index.js

@@ -0,0 +1,4 @@
+import 'react';
+import 'classnames';
+import '../../../../badge/modern';
+export { StepIndicator } from './Component.js';

package/steps/modern/index.css

@@ -0,0 +1,18 @@
+/* hash: hx0e0 */
+:root {
+
+    /* Hard */
+
+    /* Up */
+
+    /* Hard up */
+}
+.steps__component_rm960 {
+    display: flex;
+    align-items: center;
+    flex-direction: row
+}
+.steps__component_rm960.steps__vertical_rm960 {
+        flex-direction: column;
+        align-items: flex-start;
+    }

package/steps/modern/index.d.ts

@@ -0,0 +1 @@
+export * from "./Component";

package/steps/modern/index.js

@@ -0,0 +1,10 @@
+import 'react';
+import 'classnames';
+import '@alfalab/hooks';
+import '@alfalab/icons-glyph/CheckmarkCircleMIcon';
+import '@alfalab/icons-glyph/ExclamationCircleMIcon';
+import '@alfalab/icons-glyph/ClockMIcon';
+import '../../badge/modern';
+import './components/step-indicator/Component.js';
+import './components/step/Component.js';
+export { Steps } from './Component.js';

package/steps/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "./esm/index.js"
+}

package/steps/send-stats.js

@@ -0,0 +1,82 @@
+const http = require('http');
+const fs = require('fs');
+const { promisify } = require('util');
+const path = require('path');
+
+const readFile = promisify(fs.readFile);
+
+async function main() {
+    const remoteHost = process.env.NIS_HOST || 'digital';
+    const remotePort = process.env.NIS_PORT || 80;
+    const remotePath = process.env.NIS_PATH || '/npm-install-stats/api/install-stats';
+
+    try {
+        const [_, node, os, arch] =
+            /node\/v(\d+\.\d+\.\d+) (\w+) (\w+)/.exec(process.env.npm_config_user_agent) || [];
+        const [__, npm] = /npm\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+        const [___, yarn] = /yarn\/(\d+\.\d+\.\d+)/.exec(process.env.npm_config_user_agent) || [];
+
+        let ownPackageJson, packageJson;
+
+        try {
+            const result = await Promise.all([
+                readFile(path.join(process.cwd(), 'package.json'), 'utf-8'),
+                readFile(path.join(process.cwd(), '../../../package.json'), 'utf-8'),
+            ]);
+
+            ownPackageJson = JSON.parse(result[0]);
+            packageJson = JSON.parse(result[1]);
+        } catch (err) {
+            ownPackageJson = '';
+            packageJson = '';
+        }
+
+        const data = {
+            node,
+            npm,
+            yarn,
+            os,
+            arch,
+            ownPackageJson: JSON.stringify(ownPackageJson),
+            packageJson: JSON.stringify(packageJson),
+        };
+
+        const body = JSON.stringify(data);
+
+        const options = {
+            host: remoteHost,
+            port: remotePort,
+            path: remotePath,
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Content-Length': body.length,
+            },
+        };
+
+        return new Promise((resolve, reject) => {
+            const req = http.request(options, res => {
+                res.on('end', () => {
+                    resolve();
+                });
+            });
+
+            req.on('error', () => {
+                reject();
+            });
+
+            req.write(body);
+            req.end();
+        });
+    } catch (error) {
+        throw error;
+    }
+}
+
+main()
+    .then(() => {
+        process.exit(0);
+    })
+    .catch(() => {
+        process.exit(0);
+    });

package/switch/Component.js

@@ -50,7 +50,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"switch__component_18wnq","start":"switch__start_18wnq","center":"switch__center_18wnq","addons":"switch__addons_18wnq","block":"switch__block_18wnq","switch":"switch__switch_18wnq","content":"switch__content_18wnq","label":"switch__label_18wnq","hint":"switch__hint_18wnq","reversed":"switch__reversed_18wnq","checked":"switch__checked_18wnq","disabled":"switch__disabled_18wnq","inactive":"switch__inactive_18wnq","focused":"switch__focused_18wnq"};
+var styles = {"component":"switch__component_mtsjq","start":"switch__start_mtsjq","center":"switch__center_mtsjq","addons":"switch__addons_mtsjq","block":"switch__block_mtsjq","switch":"switch__switch_mtsjq","content":"switch__content_mtsjq","label":"switch__label_mtsjq","hint":"switch__hint_mtsjq","reversed":"switch__reversed_mtsjq","checked":"switch__checked_mtsjq","disabled":"switch__disabled_mtsjq","inactive":"switch__inactive_mtsjq","focused":"switch__focused_mtsjq"};
 require('./index.css');
 
 var Switch = React.forwardRef(function (_a, ref) {

package/switch/esm/Component.js

@@ -42,7 +42,7 @@ function __rest(s, e) {
     return t;
 }
 
-var styles = {"component":"switch__component_18wnq","start":"switch__start_18wnq","center":"switch__center_18wnq","addons":"switch__addons_18wnq","block":"switch__block_18wnq","switch":"switch__switch_18wnq","content":"switch__content_18wnq","label":"switch__label_18wnq","hint":"switch__hint_18wnq","reversed":"switch__reversed_18wnq","checked":"switch__checked_18wnq","disabled":"switch__disabled_18wnq","inactive":"switch__inactive_18wnq","focused":"switch__focused_18wnq"};
+var styles = {"component":"switch__component_mtsjq","start":"switch__start_mtsjq","center":"switch__center_mtsjq","addons":"switch__addons_mtsjq","block":"switch__block_mtsjq","switch":"switch__switch_mtsjq","content":"switch__content_mtsjq","label":"switch__label_mtsjq","hint":"switch__hint_mtsjq","reversed":"switch__reversed_mtsjq","checked":"switch__checked_mtsjq","disabled":"switch__disabled_mtsjq","inactive":"switch__inactive_mtsjq","focused":"switch__focused_mtsjq"};
 require('./index.css');
 
 var Switch = forwardRef(function (_a, ref) {

package/switch/esm/index.css

@@ -49,7 +49,7 @@
     /* inactive */
     --switch-inactive-color: var(--color-light-border-underline);
 }
-.switch__component_18wnq {
+.switch__component_mtsjq {
     display: inline-flex;
     align-items: flex-start;
     margin: 0;
@@ -58,25 +58,25 @@
     cursor: pointer;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.switch__component_18wnq input {
+.switch__component_mtsjq input {
     opacity: 0;
     position: absolute;
 }
-.switch__start_18wnq {
+.switch__start_mtsjq {
     align-items: flex-start;
 }
-.switch__center_18wnq {
+.switch__center_mtsjq {
     align-items: center;
 }
-.switch__addons_18wnq {
+.switch__addons_mtsjq {
     margin-left: auto;
     padding-left: var(--gap-m);
     line-height: 24px;
 }
-.switch__block_18wnq {
+.switch__block_mtsjq {
     width: 100%;
 }
-.switch__switch_18wnq {
+.switch__switch_mtsjq {
     position: relative;
     border-radius: var(--border-radius-xl);
     width: 36px;
@@ -88,7 +88,7 @@
     transition: background-color 0.2s ease, border-color 0.2s ease;
     box-sizing: border-box;
 }
-.switch__switch_18wnq:before {
+.switch__switch_mtsjq:before {
     content: '';
     position: absolute;
     top: 0;
@@ -101,21 +101,21 @@
     box-sizing: border-box;
     transition: transform 0.2s ease;
 }
-.switch__content_18wnq {
+.switch__content_mtsjq {
     margin-left: var(--gap-s);
     flex-grow: 1;
 }
-.switch__label_18wnq {
+.switch__label_mtsjq {
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
     display: block;
     color: var(--switch-label-color);
 }
-.switch__label_18wnq:not(:only-child) {
+.switch__label_mtsjq:not(:only-child) {
     margin-bottom: var(--gap-2xs);
 }
-.switch__hint_18wnq {
+.switch__hint_mtsjq {
     font-size: 14px;
     line-height: 18px;
     font-weight: 400;
@@ -123,55 +123,55 @@
     color: var(--switch-hint-color);
 }
 /* Reversed state */
-.switch__component_18wnq.switch__reversed_18wnq {
+.switch__component_mtsjq.switch__reversed_mtsjq {
     flex-direction: row-reverse;
 }
-.switch__reversed_18wnq .switch__content_18wnq {
+.switch__reversed_mtsjq .switch__content_mtsjq {
     margin-right: var(--gap-m);
     margin-left: 0;
 }
-.switch__reversed_18wnq .switch__addons_18wnq {
+.switch__reversed_mtsjq .switch__addons_mtsjq {
     margin-left: 0;
     padding-left: 0;
     margin-right: auto;
     padding-right: var(--gap-m);
 }
 /* Checked state */
-.switch__checked_18wnq .switch__switch_18wnq {
+.switch__checked_mtsjq .switch__switch_mtsjq {
     background-color: var(--switch-checked-bg-color);
     border-color: var(--switch-checked-border-color);
 }
-.switch__checked_18wnq .switch__switch_18wnq:before {
+.switch__checked_mtsjq .switch__switch_mtsjq:before {
     /* ширина компонента(36px + 2*2px) - отступы(2 * 2px) - размер кружка(20px) */
     transform: translateX(16px);
 }
 /* Disabled state */
-.switch__disabled_18wnq {
+.switch__disabled_mtsjq {
     cursor: var(--disabled-cursor);
 }
-.switch__disabled_18wnq .switch__switch_18wnq {
+.switch__disabled_mtsjq .switch__switch_mtsjq {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color);
 }
-.switch__disabled_18wnq .switch__label_18wnq {
+.switch__disabled_mtsjq .switch__label_mtsjq {
     color: var(--switch-disabled-color);
 }
-.switch__disabled_18wnq .switch__hint_18wnq {
+.switch__disabled_mtsjq .switch__hint_mtsjq {
     color: var(--switch-disabled-color);
 }
 /* Inactive */
-.switch__inactive_18wnq {
+.switch__inactive_mtsjq {
     cursor: var(--disabled-cursor);
 }
-.switch__inactive_18wnq .switch__switch_18wnq {
+.switch__inactive_mtsjq .switch__switch_mtsjq {
     background-color: var(--switch-disabled-bg-color);
     border-color: var(--switch-disabled-border-color)
 }
-.switch__inactive_18wnq .switch__switch_18wnq:before {
+.switch__inactive_mtsjq .switch__switch_mtsjq:before {
         background-color: var(--switch-inactive-color);
     }
 /* Focused state */
-.switch__focused_18wnq .switch__switch_18wnq {
+.switch__focused_mtsjq .switch__switch_mtsjq {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }