@alfalab/core-components-radio-group 3.0.8 → 4.0.0

package/src/components/base-radio-group/index.module.css

@@ -0,0 +1,87 @@
+@import '../../vars.css';
+
+.component {
+    display: flex;
+    flex-direction: column;
+}
+
+.error {
+    padding-left: var(--gap-s);
+    border-left: 1px solid var(--radio-group-error-color);
+
+    &.tag {
+        padding-left: var(--gap-xs);
+    }
+}
+
+.radioList {
+    display: flex;
+}
+
+.vertical .radioList {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.vertical .radio {
+    margin-bottom: var(--gap-m);
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.horizontal .radioList {
+    flex-wrap: wrap;
+    margin-bottom: var(--gap-xs-neg);
+}
+
+.horizontal .radio {
+    margin-right: var(--gap-xl);
+    margin-bottom: var(--gap-xs);
+}
+
+.horizontal .tagLabel {
+    margin-right: var(--gap-xs);
+}
+
+.horizontal .radio:last-child,
+.horizontal .tagLabel:last-child {
+    margin-right: 0;
+}
+
+.label {
+    @mixin paragraph_primary_medium;
+    margin-bottom: var(--gap-s);
+    color: var(--radio-group-label-color);
+}
+
+.sub {
+    @mixin paragraph_component_secondary;
+    margin-top: var(--gap-s);
+}
+
+.errorMessage {
+    color: var(--radio-group-error-color);
+}
+
+.hint {
+    color: var(--radio-group-hint-color);
+}
+
+.hiddenInput {
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    opacity: 0;
+
+    &:focus ~ button {
+        @mixin focus-outline;
+    }
+}
+
+.tagLabel {
+    position: relative;
+    max-width: 100%;
+}

package/src/components/base-radio-group/index.ts

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

package/src/desktop.module.css

@@ -0,0 +1,13 @@
+@import './vars.css';
+
+.radioList {
+    padding-left: var(--radio-group-list-padding-left);
+}
+
+.label {
+    padding-left: var(--radio-group-sub-padding-left);
+}
+
+.sub {
+    padding-left: var(--radio-group-sub-padding-left);
+}

package/src/desktop.ts

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

package/src/index.ts

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

package/src/mobile.module.css

@@ -0,0 +1,13 @@
+@import './vars.css';
+
+.radioList {
+    padding-left: var(--radio-group-mobile-list-padding-left);
+}
+
+.label {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+}
+
+.sub {
+    padding-left: var(--radio-group-mobile-sub-padding-left);
+}

package/src/mobile.ts

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

package/src/vars.css

@@ -0,0 +1,13 @@
+@import '@alfalab/core-components-themes/src/default.css';
+
+:root {
+    --radio-group-error-color: var(--color-light-text-negative);
+    --radio-group-hint-color: var(--color-light-text-secondary);
+    --radio-group-label-color: var(--color-light-text-primary);
+    --radio-group-sub-padding-left: 0;
+    --radio-group-list-padding-left: 0;
+
+    /* mobile */
+    --radio-group-mobile-sub-padding-left: var(--gap-2xs);
+    --radio-group-mobile-list-padding-left: var(--gap-3xs);
+}

package/esm/Component.js

@@ -1,50 +0,0 @@
-import { __assign } from 'tslib';
-import React, { forwardRef, useState, Children, isValidElement, cloneElement } from 'react';
-import cn from 'classnames';
-import { useDidUpdateEffect } from '@alfalab/hooks';
-
-var styles = {"component":"radio-group__component_phgvy","error":"radio-group__error_phgvy","radioList":"radio-group__radioList_phgvy","vertical":"radio-group__vertical_phgvy","radio":"radio-group__radio_phgvy","horizontal":"radio-group__horizontal_phgvy","tagLabel":"radio-group__tagLabel_phgvy","label":"radio-group__label_phgvy","sub":"radio-group__sub_phgvy","errorMessage":"radio-group__errorMessage_phgvy","hint":"radio-group__hint_phgvy","hiddenInput":"radio-group__hiddenInput_phgvy"};
-require('./index.css')
-
-var RadioGroup = forwardRef(function (_a, ref) {
-    var _b;
-    var children = _a.children, className = _a.className, _c = _a.direction, direction = _c === void 0 ? 'vertical' : _c, label = _a.label, error = _a.error, hint = _a.hint, onChange = _a.onChange, onBlur = _a.onBlur, onFocus = _a.onFocus, _d = _a.type, type = _d === void 0 ? 'radio' : _d, dataTestId = _a.dataTestId, _e = _a.disabled, disabled = _e === void 0 ? false : _e, name = _a.name, value = _a.value;
-    var _f = useState(''), stateValue = _f[0], setStateValue = _f[1];
-    useDidUpdateEffect(function () {
-        setStateValue(value);
-    }, [value]);
-    var isChecked = function (childValue) {
-        return value !== null && (value || stateValue) === childValue;
-    };
-    var handleChange = function (event, childValue) {
-        setStateValue(childValue);
-        if (onChange) {
-            onChange(event, { name: name, value: childValue });
-        }
-    };
-    var renderRadio = function (child) {
-        var _a = child.props, childClassName = _a.className, childValue = _a.value;
-        return cloneElement(child, __assign(__assign({ onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: isChecked(childValue), name: name, className: cn(childClassName, styles.radio) }));
-    };
-    var renderTag = function (child) {
-        var childValue = child.props.value;
-        var checked = isChecked(childValue);
-        var clone = cloneElement(child, __assign(__assign({ onClick: function (event) { return handleChange(event, childValue); }, disabled: disabled }, child.props), { checked: checked, name: name, tabIndex: -1 }));
-        return (React.createElement("label", { className: cn(styles.radio, styles.tagLabel) },
-            React.createElement("input", { type: 'radio', autoComplete: 'off', onChange: function (event) { return handleChange(event, childValue); }, disabled: disabled || child.props.disabled, name: name, checked: checked, className: styles.hiddenInput, value: child.props.value }),
-            clone));
-    };
-    var errorMessage = typeof error === 'boolean' ? '' : error;
-    return (React.createElement("div", { className: cn(styles.component, styles[type], styles[direction], (_b = {}, _b[styles.error] = error, _b), className), "data-test-id": dataTestId, ref: ref },
-        label ? React.createElement("span", { className: styles.label }, label) : null,
-        children ? (React.createElement("div", { className: styles.radioList, onBlur: onBlur, onFocus: onFocus }, Children.map(children, function (child) {
-            if (isValidElement(child)) {
-                return type === 'radio' ? renderRadio(child) : renderTag(child);
-            }
-            return null;
-        }))) : null,
-        errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.errorMessage), role: 'alert' }, errorMessage)),
-        hint && !errorMessage && (React.createElement("span", { className: cn(styles.sub, styles.hint) }, hint))));
-});
-
-export { RadioGroup };

package/send-stats.js

@@ -1,82 +0,0 @@
-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);
-    });