@alfalab/core-components-steps 1.1.0

package/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 '@alfalab/core-components-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/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/modern/components/step/index.d.ts

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

package/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 '@alfalab/core-components-badge/modern';
+import '../step-indicator/Component.js';
+export { Step } from './Component.js';

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

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

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

@@ -0,0 +1,12 @@
+import React from 'react';
+import cn from 'classnames';
+import { Badge } from '@alfalab/core-components-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/modern/components/step-indicator/index.css

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

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

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

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

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

package/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/modern/index.d.ts

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

package/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 '@alfalab/core-components-badge/modern';
+import './components/step-indicator/Component.js';
+import './components/step/Component.js';
+export { Steps } from './Component.js';

package/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "@alfalab/core-components-steps",
+    "version": "1.1.0",
+    "description": "",
+    "keywords": [],
+    "license": "MIT",
+    "main": "index.js",
+    "module": "./esm/index.js",
+    "scripts": {
+        "postinstall": "node -e \"if (require('fs').existsSync('./send-stats.js')){require('./send-stats.js')} \""
+    },
+    "publishConfig": {
+        "access": "public",
+        "directory": "dist"
+    },
+    "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.1 || ^18.0.0"
+    },
+    "dependencies": {
+        "@alfalab/core-components-badge": "^4.0.1",
+        "@alfalab/hooks": "^1.13.0",
+        "@alfalab/icons-glyph": "^2.64.0",
+        "classnames": "^2.3.1"
+    }
+}

package/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);
+    });