@vchasno/ui-kit 0.1.2 → 0.1.3

package/CHANGELOG.md

@@ -7,6 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.3] - 2023-10-11
+
+## Added
+
+- update README.md (how to add new component, how to publish new version)
+- improve Switch component, add more stories
+
+## [0.1.2] - 2023-10-11
+
+### Added 
+
+- export SelectOption type
+
+## [0.1.1] - 2023-10-11
+
+### Fixed
+
+- remove package.json engine version
+
 ## [0.1.0] - 2023-10-10
 
 ### Added

package/README.md

@@ -111,9 +111,15 @@ npm run build-storybook
 npm run build
 ```
 
-### Publish
+### Publish new version
 
-```bash
-npm publish
-```
+Publish new version to npm registry can only be done with CI/CD
+
+To publish new version:
 
+1. Make changes in new branch (e.g. `feature/new-component`)
+2. Add changes to CHANGELOG.md (see [Keep a Changelog](https://keepachangelog.com/en/1.0.0/))
+3. Commit changes 
+4. Create tag with version (e.g. `v0.1.2`) run `npm version patch|minor|major`
+5. Push changes to remote and create MR to `master` branch
+6. Merge changes to `master` branch (CI/CD will publish new version to npm registry)

package/dist/index.d.ts

@@ -179,10 +179,13 @@ declare const Spinner: React.FC<SpinnerProps>;
 
 interface SwitcherProps {
     className?: string;
-    height?: number;
     color?: string;
+    size?: string | number;
     checked?: boolean;
-    onChecked?: (checked: boolean) => void;
+    onChecked?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    defaultChecked?: boolean;
+    lazy?: boolean;
 }
 declare const Switcher: React.ForwardRefExoticComponent<SwitcherProps & React.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -265,7 +265,7 @@ var composePaginationSteps = function (total, current) {
     return display;
 };
 
-var css_248z$b = ".vchasno-ui-pagination {\n    --size: 32px;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: 14px;\n    gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n    min-width: var(--size);\n    height: var(--size);\n    flex-grow: 0;\n    flex-shrink: 0;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background-color: #fff;\n    cursor: pointer;\n    line-height: calc(var(--size) - 2px);\n    outline: 0;\n    text-align: center;\n    transition: background-color var(--transition-duration-sec, 0.3s),\n        border var(--transition-duration-sec, 0.3s);\n    user-select: none;\n    vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n    background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n    border-color: var(--pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
+var css_248z$b = ".vchasno-ui-pagination {\n    --pagination-size: 32px;\n\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    font-size: 14px;\n    gap: 10px;\n}\n\n.vchasno-ui-pagination__item {\n    min-width: var(--pagination-size);\n    height: var(--pagination-size);\n    flex-grow: 0;\n    flex-shrink: 0;\n    border: 1px solid transparent;\n    border-radius: 6px;\n    background-color: #fff;\n    cursor: pointer;\n    line-height: calc(var(--pagination-size) - 2px);\n    outline: 0;\n    text-align: center;\n    transition:\n        background-color var(--transition-duration-sec, 0.3s),\n        border var(--transition-duration-sec, 0.3s);\n    user-select: none;\n    vertical-align: middle;\n}\n\n.vchasno-ui-pagination__item-arrow {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.vchasno-ui-pagination__item:not(.vchasno-ui-pagination__item-disabled):hover {\n    background-color: rgb(0 0 0 / 10%);\n}\n\n.vchasno-ui-pagination__item-active {\n    border-color: var(--pagination-border-color, #6b5fff);\n}\n\n.vchasno-ui-pagination__item-disabled {\n    cursor: not-allowed;\n    opacity: 0.8;\n}\n";
 styleInject(css_248z$b);
 
 var Pagination = function (_a) {
@@ -18329,28 +18329,27 @@ var DatePicker = function (_a) {
         React__default.createElement(InputMeta, { hint: hint, error: error })));
 };
 
-var css_248z$2 = ".vchasno-ui-switcher {\n    --height: 30px;\n    --offset-width: calc(var(--height) / 12);\n    --bg: #b6cadb;\n    --active-bg: #6b5fff;\n\n    position: relative;\n    display: inline-block;\n    height: var(--height);\n    aspect-ratio: 2/1.1;\n}\n\n.vchasno-ui-switcher:hover {\n    --bg: #6b8091;\n\n    cursor: pointer;\n}\n\n.vchasno-ui-switcher__mask {\n    display: inline-block;\n    width: 100%;\n    height: 100%;\n    border-radius: calc(var(--height) / 2);\n    background-color: var(--bg);\n    pointer-events: none;\n    transition: background-color 0.3s;\n}\n\n.vchasno-ui-switcher__input {\n    display: none;\n}\n\n.vchasno-ui-switcher__circle {\n    position: absolute;\n    top: var(--offset-width);\n    right: calc(100% - var(--height) + var(--offset-width));\n    left: var(--offset-width);\n    display: block;\n    height: calc(100% - calc(var(--offset-width) * 2));\n    border-radius: 50%;\n    aspect-ratio: 1/1;\n    background-color: #fff;\n    pointer-events: none;\n    transform: rotate(0deg);\n    transition: left 0.3s, transform 0.3s;\n}\n\n.vchasno-ui-switcher__input:checked + .vchasno-ui-switcher__circle {\n    --bg: var(--active-bg);\n\n    left: calc(100% - var(--height) + var(--offset-width));\n    transform: rotate(180deg);\n}\n\n.vchasno-ui-switcher__input:checked + .vchasno-ui-switcher__circle + .vchasno-ui-switcher__mask {\n    --bg: var(--active-bg);\n}\n";
+var css_248z$2 = ".vchasno-ui-switcher {\n    --switcher-size: 2em;\n    --button-width: calc(var(--switcher-size) * 1.75);\n    --button-height: var(--switcher-size);\n    --toggle-diameter: calc(var(--switcher-size) * 0.75);\n    --button-toggle-offset: calc((var(--button-height) - var(--toggle-diameter)) / 2);\n    --toggle-shadow-offset: 10px;\n    --toggle-wider: calc(var(--switcher-size) * 1.5);\n    --switcher-default-color: #b6cadb;\n    --switcher-active-color: #6b5fff;\n}\n\n.vchasno-ui-switcher.--disabled {\n    opacity: 0.5;\n    pointer-events: none;\n}\n\n.vchasno-ui-slider {\n    position: relative;\n    display: inline-block;\n    width: var(--button-width);\n    height: var(--button-height);\n    border-radius: calc(var(--button-height) / 2);\n    background-color: var(--switcher-default-color);\n    cursor: pointer;\n    transition: var(--transition-duration-sec) all ease-in-out;\n}\n\n.vchasno-ui-slider::after {\n    position: absolute;\n    top: var(--button-toggle-offset);\n    display: inline-block;\n    width: var(--toggle-diameter);\n    height: var(--toggle-diameter);\n    border-radius: calc(var(--toggle-diameter) / 2);\n    background-color: #fff;\n    box-shadow: var(--toggle-shadow-offset) 0 calc(var(--toggle-shadow-offset) * 4) rgb(0 0 0 / 10%);\n    content: '';\n    transform: translateX(var(--button-toggle-offset));\n    transition: var(--transition-duration-sec) all ease-in-out;\n}\n\n.vchasno-ui-switcher input[type='checkbox']:checked + .vchasno-ui-slider {\n    background-color: var(--switcher-active-color);\n}\n\n.vchasno-ui-switcher input[type='checkbox']:checked + .vchasno-ui-slider::after {\n    box-shadow: calc(var(--toggle-shadow-offset) * -1) 0 calc(var(--toggle-shadow-offset) * 4)\n        rgb(0 0 0 / 10%);\n    transform: translateX(\n        calc(var(--button-width) - var(--toggle-diameter) - var(--button-toggle-offset))\n    );\n}\n\n.vchasno-ui-switcher input[type='checkbox'] {\n    display: none;\n}\n\n.vchasno-ui-switcher.--lazy input[type='checkbox']:active + .vchasno-ui-slider::after {\n    width: var(--toggle-wider);\n}\n\n.vchasno-ui-switcher.--lazy input[type='checkbox']:checked:active + .vchasno-ui-slider::after {\n    transform: translateX(\n        calc(var(--button-width) - var(--toggle-wider) - var(--button-toggle-offset))\n    );\n}\n";
 styleInject(css_248z$2);
 
 var composeStyles = function (_a) {
-    var height = _a.height, color = _a.color;
+    var color = _a.color, size = _a.size;
     var style = {};
-    if (typeof height === 'number') {
-        style['--height'] = "".concat(height, "px");
+    if (typeof color !== 'undefined') {
+        style['--switcher-active-color'] = color;
     }
-    if (typeof color === 'string') {
-        style['--active-bg'] = color;
+    if (typeof size !== 'undefined') {
+        style['--switcher-size'] = typeof size === 'number' ? "".concat(size, "px") : size;
     }
     return style;
 };
 var Switcher = React__default.forwardRef(function (_a, ref) {
-    var className = _a.className, height = _a.height, color = _a.color, checked = _a.checked, onChecked = _a.onChecked;
-    return (React__default.createElement("label", { className: cn('vchasno-ui-switcher', className), style: composeStyles({ height: height, color: color }) },
-        React__default.createElement("input", { ref: ref, checked: checked, onChange: function (event) {
-                onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.currentTarget.checked);
-            }, type: "checkbox", className: "vchasno-ui-switcher__input" }),
-        React__default.createElement("span", { className: "vchasno-ui-switcher__circle" }),
-        React__default.createElement("span", { className: "vchasno-ui-switcher__mask" })));
+    var className = _a.className, size = _a.size, lazy = _a.lazy, color = _a.color, defaultChecked = _a.defaultChecked, disabled = _a.disabled, checked = _a.checked, onChecked = _a.onChecked;
+    return (React__default.createElement("label", { className: cn('vchasno-ui-switcher', { '--disabled': disabled, '--lazy': lazy }, className), style: composeStyles({ color: color, size: size }) },
+        React__default.createElement("input", { ref: ref, type: "checkbox", checked: checked, defaultChecked: defaultChecked, onChange: function (event) {
+                onChecked === null || onChecked === void 0 ? void 0 : onChecked(event.currentTarget.checked, event);
+            } }),
+        React__default.createElement("span", { className: "vchasno-ui-slider" })));
 });
 Switcher.displayName = 'Switcher';