@vchasno/ui-kit 0.2.10 → 0.2.12

package/CHANGELOG.md

@@ -7,6 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.12] - 2024-03-22
+
+## Added
+
+-   add `mergeRefs` utils
+
+## Fixed
+
+-   fix wrap `SvgBorder` component with `forwardRef`
+
+## [0.2.11] - 2024-03-18
+
+## Added
+
+-   add `SvgBorder` component for apply custom borders
+-   export `useClientRect` hook and `composeBubblePath`, `composeRoundedBorderPath` utils
+
+## Fixed
+
+-   fix reexport react-select components with SelectComponents
+
 ## [0.2.10] - 2024-03-08
 
 ## Changed

package/README.md

@@ -6,7 +6,7 @@
 npm install @vchasno/ui-kit
 ```
 
-```bash 
+```bash
 yarn add @vchasno/ui-kit
 ```
 
@@ -16,6 +16,7 @@ Supports React ^16.8.0 || ^17.0.0 || ^18.0.0
 
 ```jsx
 import React from 'react';
+
 import { Button } from '@vchasno/ui-kit';
 // import complex components (separate bundles)
 import Datepicker from '@vchasno/ui-kit/Datepicker';
@@ -23,18 +24,18 @@ import Select from '@vchasno/ui-kit/Select';
 import SelectCreatable from '@vchasno/ui-kit/SelectCreatable';
 
 const App = () => (
-  <>
-    <Button type="primary">PRESS ME</Button>
-  </>
+    <>
+        <Button type="primary">PRESS ME</Button>
+    </>
 );
 ```
 
 ### 🔨 Package entry points
 
-- `@vchasno/ui-kit` - ES bundle, TypeScript typings - common components
-- `@vchasno/ui-kit/Datepicker` - ES bundle, TypeScript typings and base react-datepicker dependencies
-- `@vchasno/ui-kit/Select` - ES bundle, TypeScript typings and base react-select dependencies
-- `@vchasno/ui-kit/SelectCreateble` - ES bundle, TypeScript and base react-select dependencies
+-   `@vchasno/ui-kit` - ES bundle, TypeScript typings - common components
+-   `@vchasno/ui-kit/Datepicker` - ES bundle, TypeScript typings and base react-datepicker dependencies
+-   `@vchasno/ui-kit/Select` - ES bundle, TypeScript typings and base react-select dependencies
+-   `@vchasno/ui-kit/SelectCreateble` - ES bundle, TypeScript and base react-select dependencies
 
 We separate some components to separate bundles to reduce bundle size
 
@@ -46,17 +47,23 @@ also it will no have effect if you already have imported it and styles
 Optionally you can import styles (use all or only what you need)
 
 Suggestions:
-- import reset styles
-- import base styles
-- import theme variables (will apply base theme)
-- create your own theme variables override file (override only what you need)
+
+-   import reset styles
+-   import base styles
+-   import theme variables (will apply base theme)
+-   create your own theme variables override file (override only what you need)
 
 ```jsx
 // index.tsx
-import "@vchasno/ui-kit/dist/css/_reset.css"; // optional reset styles
-import "@vchasno/ui-kit/dist/css/_base.css"; // optional base styles
-import "@vchasno/ui-kit/dist/css/_theme.css"; // optional theme variables
-import "src/styles/_theme-override.css"; // yuor own css file with theme variables override
+// optional reset styles
+import '@vchasno/ui-kit/dist/css/_base.css';
+import '@vchasno/ui-kit/dist/css/_reset.css';
+// optional base styles
+import '@vchasno/ui-kit/dist/css/_theme.css';
+// optional theme variables
+import 'src/styles/_theme-override.css';
+
+// yuor own css file with theme variables override
 ```
 
 ### Styling and customization
@@ -93,8 +100,8 @@ Supports only Ukrainian language
 
 ## 🔗 Links
 
-- [Home page](https://vchasno.ua/)
-- [Change Log](CHANGELOG.md)
+-   [Home page](https://vchasno.ua/)
+-   [Change Log](CHANGELOG.md)
 
 ## Development
 
@@ -132,13 +139,24 @@ npm run build
 
 ### Publish new version
 
+## 0.2 versions
+
+Should develop in `v0.2` branch. All merge requests should be merged to `v0.2` branch
+
+## 0.3 version - latest
+
+Should develop in `master` branch. All merge requests should be merged to `master` branch
+
+## Publish version to npm registry
+
 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 
+3. Commit changes
 4. Create tag with version (e.g. `v0.1.2`) run `npm version patch|minor|major`
 5. Push tag to remote repository
-6. Confirm (CI/CD  prepared manual stage) publish - new version will be published to npm registry
+6. Publish job will be started in CI/CD pipeline (only for `master` branch or version tag)
+7. Confirm (CI/CD prepared manual stage) publish - new version will be published to npm registry

package/dist/Datepicker/types/components/BubbleBox/index.d.ts

@@ -1,2 +1,3 @@
 export { default } from './BubbleBox';
 export type { BubbleBoxProps } from './BubbleBox';
+export * from './utils';

package/dist/Datepicker/types/components/Select/Select.d.ts

@@ -9,4 +9,31 @@ export interface SelectProps extends ReactSelectProps, Partial<WithLabel & WithH
     dataQa?: string;
 }
 declare const Select: React.FC<SelectProps>;
+export declare const SelectComponents: {
+    ClearIndicator: <Option_1, IsMulti extends boolean, Group extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ClearIndicatorProps<Option_1, IsMulti, Group>) => import("@emotion/react").jsx.JSX.Element;
+    Control: <Option_1, IsMulti_1 extends boolean, Group_1 extends import("react-select").GroupBase<Option_1>>(props: import("react-select").ControlProps<Option_1, IsMulti_1, Group_1>) => import("@emotion/react").jsx.JSX.Element;
+    DropdownIndicator: <Option_2, IsMulti_2 extends boolean, Group_2 extends import("react-select").GroupBase<Option_2>>(props: import("react-select").DropdownIndicatorProps<Option_2, IsMulti_2, Group_2>) => import("@emotion/react").jsx.JSX.Element;
+    DownChevron: (props: import("react-select/dist/declarations/src/components/indicators").DownChevronProps) => import("@emotion/react").jsx.JSX.Element;
+    CrossIcon: (props: import("react-select/dist/declarations/src/components/indicators").CrossIconProps) => import("@emotion/react").jsx.JSX.Element;
+    Group: <Option_3, IsMulti_3 extends boolean, Group_3 extends import("react-select").GroupBase<Option_3>>(props: import("react-select").GroupProps<Option_3, IsMulti_3, Group_3>) => import("@emotion/react").jsx.JSX.Element;
+    GroupHeading: <Option_4, IsMulti_4 extends boolean, Group_4 extends import("react-select").GroupBase<Option_4>>(props: import("react-select").GroupHeadingProps<Option_4, IsMulti_4, Group_4>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorsContainer: <Option_5, IsMulti_5 extends boolean, Group_5 extends import("react-select").GroupBase<Option_5>>(props: import("react-select").IndicatorsContainerProps<Option_5, IsMulti_5, Group_5>) => import("@emotion/react").jsx.JSX.Element;
+    IndicatorSeparator: <Option_6, IsMulti_6 extends boolean, Group_6 extends import("react-select").GroupBase<Option_6>>(props: import("react-select").IndicatorSeparatorProps<Option_6, IsMulti_6, Group_6>) => import("@emotion/react").jsx.JSX.Element;
+    Input: <Option_7, IsMulti_7 extends boolean, Group_7 extends import("react-select").GroupBase<Option_7>>(props: import("react-select").InputProps<Option_7, IsMulti_7, Group_7>) => import("@emotion/react").jsx.JSX.Element;
+    LoadingIndicator: <Option_8, IsMulti_8 extends boolean, Group_8 extends import("react-select").GroupBase<Option_8>>({ innerProps, isRtl, size, ...restProps }: import("react-select").LoadingIndicatorProps<Option_8, IsMulti_8, Group_8>) => import("@emotion/react").jsx.JSX.Element;
+    Menu: <Option_9, IsMulti_9 extends boolean, Group_9 extends import("react-select").GroupBase<Option_9>>(props: import("react-select").MenuProps<Option_9, IsMulti_9, Group_9>) => import("@emotion/react").jsx.JSX.Element;
+    MenuList: <Option_10, IsMulti_10 extends boolean, Group_10 extends import("react-select").GroupBase<Option_10>>(props: import("react-select").MenuListProps<Option_10, IsMulti_10, Group_10>) => import("@emotion/react").jsx.JSX.Element;
+    MenuPortal: <Option_11, IsMulti_11 extends boolean, Group_11 extends import("react-select").GroupBase<Option_11>>(props: import("react-select/dist/declarations/src/components/Menu").MenuPortalProps<Option_11, IsMulti_11, Group_11>) => import("@emotion/react").jsx.JSX.Element | null;
+    LoadingMessage: <Option_12, IsMulti_12 extends boolean, Group_12 extends import("react-select").GroupBase<Option_12>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_12, IsMulti_12, Group_12>) => import("@emotion/react").jsx.JSX.Element;
+    NoOptionsMessage: <Option_13, IsMulti_13 extends boolean, Group_13 extends import("react-select").GroupBase<Option_13>>({ children, innerProps, ...restProps }: import("react-select").NoticeProps<Option_13, IsMulti_13, Group_13>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValue: <Option_14, IsMulti_14 extends boolean, Group_14 extends import("react-select").GroupBase<Option_14>>(props: import("react-select").MultiValueProps<Option_14, IsMulti_14, Group_14>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueContainer: <Option_15, IsMulti_15 extends boolean, Group_15 extends import("react-select").GroupBase<Option_15>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15, IsMulti_15, Group_15>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueLabel: <Option_15_1, IsMulti_15_1 extends boolean, Group_15_1 extends import("react-select").GroupBase<Option_15_1>>({ children, innerProps, }: import("react-select").MultiValueGenericProps<Option_15_1, IsMulti_15_1, Group_15_1>) => import("@emotion/react").jsx.JSX.Element;
+    MultiValueRemove: typeof import("react-select/dist/declarations/src/components/MultiValue").MultiValueRemove;
+    Option: <Option_16, IsMulti_16 extends boolean, Group_16 extends import("react-select").GroupBase<Option_16>>(props: import("react-select").OptionProps<Option_16, IsMulti_16, Group_16>) => import("@emotion/react").jsx.JSX.Element;
+    Placeholder: <Option_17, IsMulti_17 extends boolean, Group_17 extends import("react-select").GroupBase<Option_17>>(props: import("react-select").PlaceholderProps<Option_17, IsMulti_17, Group_17>) => import("@emotion/react").jsx.JSX.Element;
+    SelectContainer: <Option_18, IsMulti_18 extends boolean, Group_18 extends import("react-select").GroupBase<Option_18>>(props: import("react-select").ContainerProps<Option_18, IsMulti_18, Group_18>) => import("@emotion/react").jsx.JSX.Element;
+    SingleValue: <Option_19, IsMulti_19 extends boolean, Group_19 extends import("react-select").GroupBase<Option_19>>(props: import("react-select").SingleValueProps<Option_19, IsMulti_19, Group_19>) => import("@emotion/react").jsx.JSX.Element;
+    ValueContainer: <Option_20, IsMulti_20 extends boolean, Group_20 extends import("react-select").GroupBase<Option_20>>(props: import("react-select").ValueContainerProps<Option_20, IsMulti_20, Group_20>) => import("@emotion/react").jsx.JSX.Element;
+};
 export default Select;

package/dist/Datepicker/types/components/Select/index.d.ts

@@ -1,7 +1,5 @@
-export { default } from './Select';
+export { default, SelectComponents } from './Select';
 export type { SelectProps } from './Select';
 export { default as SelectCreatable } from './SelectCreatable';
 export type { SelectCreatableProps } from './SelectCreatable';
 export type { Option } from './types';
-export { PlaceholderProps, CommonProps, PropsValue, ControlProps, MultiValueProps, MultiValueRemoveProps, MultiValueGenericProps, SingleValueProps, ValueContainerProps, ContainerProps, IndicatorsContainerProps, ClearIndicatorProps, DropdownIndicatorProps, IndicatorSeparatorProps, LoadingIndicatorProps, GroupProps, GroupHeadingProps, MenuProps, MenuListProps, InputProps, AriaGuidanceProps, AriaOnFilterProps, ActionMetaBase, AriaLiveMessages, AriaOnFocusProps, ClearActionMeta, Colors, CommonPropsAndClassName, CreateOptionActionMeta, } from 'react-select';
-export { components } from 'react-select';

package/dist/Datepicker/types/components/SvgBorder/SvgBorder.d.ts

@@ -0,0 +1,18 @@
+import React, { HTMLAttributes } from 'react';
+import './SvgBorder.global.css';
+export interface SvgBorderProps extends HTMLAttributes<HTMLDivElement> {
+    svgClassName?: string;
+    strokeDasharray?: string;
+    strokeWidth?: number;
+    color?: string;
+    borderRadius?: number;
+    animation?: 'border-offset';
+    animationPlay?: boolean;
+    animationDurationSec?: number;
+    dashoffset?: number | string;
+}
+/**
+ * @link <https://css-tricks.com/svg-line-animation-works/>
+ */
+declare const SvgBorder: React.ForwardRefExoticComponent<SvgBorderProps & React.RefAttributes<HTMLDivElement>>;
+export default SvgBorder;

package/dist/Datepicker/types/components/SvgBorder/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './SvgBorder';
+export type { SvgBorderProps } from './SvgBorder';
+export * from './utils';

package/dist/Datepicker/types/components/SvgBorder/utils.d.ts

@@ -0,0 +1 @@
+export declare const composeRoundedBorderPath: (width: number, height: number, radiusOffset: number) => string;

package/dist/Datepicker/types/components/index.d.ts

@@ -32,5 +32,7 @@ export { default as Checkbox } from './Checkbox';
 export type { CheckboxProps } from './Checkbox';
 export { default as PulseDot } from './PulseDot';
 export type { PulseDotProps } from './PulseDot';
-export { default as BubbleBox } from './BubbleBox';
+export { default as BubbleBox, composeBubblePath } from './BubbleBox';
 export type { BubbleBoxProps } from './BubbleBox';
+export { default as SvgBorder, composeRoundedBorderPath } from './SvgBorder';
+export type { SvgBorderProps } from './SvgBorder';

package/dist/Datepicker/types/{components/BubbleBox → hooks}/useClientRect.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 export declare const useClientRect: () => {
     rect: DOMRect | null;
-    ref: React.RefObject<HTMLDivElement>;
+    ref: React.MutableRefObject<HTMLDivElement | undefined>;
 };

package/dist/Datepicker/types/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './hooks/useClientRect';

package/dist/Datepicker/types/utils/react.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+/**
+ * Merges multiple refs into a single ref callback.
+ * @see <https://www.jameskerr.blog/posts/react-useref-and-forward-ref/>
+ */
+export declare function mergeRefs<T = HTMLDivElement>(...refs: Array<React.MutableRefObject<T> | React.LegacyRef<T> | undefined | null>): React.RefCallback<T>;

package/dist/Select/index.cjs.js

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var React = require('react');
 var reactDom = require('react-dom');
 
@@ -7741,6 +7743,8 @@ var Select = function (_a) {
         React.createElement(StateManagedSelect$1, __assign({ required: required, isLoading: loading, components: __assign(__assign({}, customComponents), components), classNamePrefix: "vchasno-ui-select", menuPlacement: menuPlacement, isDisabled: isDisabled, noOptionsMessage: noOptionsMessage, loadingMessage: loadingMessage, placeholder: placeholder }, rest)),
         React.createElement(InputMeta, { hint: hint, error: error })));
 };
+var SelectComponents = components;
 
-module.exports = Select;
+exports.SelectComponents = SelectComponents;
+exports.default = Select;
 //# sourceMappingURL=index.cjs.js.map