@itcase/ui 1.9.71 → 1.9.72

package/dist/types/hooks/useStyles/styleAttributes.interface.d.ts

@@ -0,0 +1,147 @@
+import { CSSProperties } from 'react';
+import type * as CSS from 'csstype';
+import { HeightProps, ResizeModeProps, WidthProps } from '@itcase/types-ui';
+export interface StyleAttributes {
+    /**
+     * Layout
+     */
+    alignContent?: CSS.Property.AlignContent;
+    alignItems?: CSS.Property.AlignItems;
+    alignSelf?: CSS.Property.AlignSelf;
+    aspectRatio?: CSS.Property.AspectRatio;
+    /**
+     * Filter
+     */
+    backdropFilter?: CSS.Property.BackdropFilter;
+    /**
+     * View
+     */
+    background?: CSS.Property.Background;
+    backgroundColor?: CSS.Property.BackgroundColor;
+    border?: CSS.Property.Border;
+    borderBottomColor?: CSS.Property.BorderColor;
+    borderBottomLeftRadius?: CSS.Property.BorderBottomLeftRadius;
+    borderBottomRightRadius?: CSS.Property.BorderBottomRightRadius;
+    borderBottomWidth?: CSS.Property.BorderBottomWidth;
+    borderLeftColor?: CSS.Property.BorderColor;
+    borderLeftWidth?: CSS.Property.BorderLeftWidth;
+    borderRadius?: CSS.Property.BorderRadius;
+    borderRightColor?: CSS.Property.BorderColor;
+    borderRightWidth?: CSS.Property.BorderRightWidth;
+    borderStyle?: CSS.Property.BorderStyle;
+    borderTopColor?: CSS.Property.BorderColor;
+    borderTopLeftRadius?: CSS.Property.BorderTopLeftRadius;
+    borderTopRightRadius?: CSS.Property.BorderTopRightRadius;
+    borderTopWidth?: CSS.Property.BorderTopWidth;
+    bottom?: CSS.Property.Bottom;
+    /**
+     * Text
+     */
+    color?: CSS.Property.Color;
+    columnGap?: CSS.Property.ColumnGap;
+    columnWidth?: CSS.Property.ColumnWidth;
+    cursor?: CSS.Property.Cursor;
+    display?: CSS.Property.Display;
+    flex?: CSS.Property.Flex;
+    flexBasis?: CSS.Property.FlexBasis;
+    flexDirection?: CSS.Property.FlexDirection;
+    flexShrink?: CSS.Property.FlexShrink;
+    flexWrap?: CSS.Property.FlexWrap;
+    fontFamily?: CSS.Property.FontFamily;
+    fontSize?: CSS.Property.FontSize;
+    fontStyle?: CSS.Property.FontStyle;
+    fontVariant?: CSS.Property.FontVariant;
+    fontWeight?: CSS.Property.FontWeight;
+    gap?: CSS.Property.Gap;
+    /**
+     * Grid
+     */
+    gridArea?: CSS.Property.GridArea;
+    gridAutoColumns?: CSS.Property.GridAutoColumns;
+    gridAutoFlow?: CSS.Property.GridAutoFlow;
+    gridAutoRows?: CSS.Property.GridAutoRows;
+    gridColumn?: CSS.Property.GridColumn;
+    gridColumnGap?: CSS.Property.GridColumnGap;
+    gridRow?: CSS.Property.GridRow;
+    gridRowGap?: CSS.Property.GridRowGap;
+    gridTemplate?: CSS.Property.GridTemplate;
+    gridTemplateAreas?: CSS.Property.GridTemplateAreas;
+    gridTemplateColumns?: CSS.Property.GridTemplateColumns;
+    gridTemplateRows?: CSS.Property.GridTemplateRows;
+    height?: CSS.Property.Height | HeightProps;
+    left?: CSS.Property.Left;
+    letterSpacing?: CSS.Property.LetterSpacing;
+    lineHeight?: CSS.Property.LineHeight;
+    margin?: CSS.Property.Margin;
+    marginBottom?: CSS.Property.MarginBottom;
+    marginHorizontal?: CSS.Property.Margin;
+    marginLeft?: CSS.Property.MarginLeft;
+    marginRight?: CSS.Property.MarginRight;
+    marginTop?: CSS.Property.MarginTop;
+    marginVertical?: CSS.Property.Margin;
+    maxHeight?: CSS.Property.MaxHeight;
+    maxWidth?: CSS.Property.MaxWidth;
+    minHeight?: CSS.Property.MinHeight;
+    minWidth?: CSS.Property.MinWidth;
+    /**
+     * Image
+     */
+    objectFit?: CSS.Property.ObjectFit;
+    objectPosition?: CSS.Property.ObjectPosition;
+    opacity?: CSS.Property.Opacity;
+    order?: CSS.Property.Order;
+    overflow?: CSS.Property.Overflow;
+    overlayColor?: string;
+    padding?: CSS.Property.Padding;
+    paddingBottom?: CSS.Property.PaddingBottom;
+    paddingEnd?: CSS.Property.Padding;
+    paddingHorizontal?: CSS.Property.Padding;
+    paddingLeft?: CSS.Property.PaddingLeft;
+    paddingRight?: CSS.Property.PaddingRight;
+    paddingStart?: CSS.Property.Padding;
+    paddingTop?: CSS.Property.PaddingTop;
+    paddingVertical?: CSS.Property.Padding;
+    position?: CSS.Property.Position;
+    resizeMode?: ResizeModeProps;
+    right?: CSS.Property.Right;
+    rowGap?: CSS.Property.RowGap;
+    textAlign?: CSS.Property.TextAlign;
+    textDecorationColor?: string;
+    textDecorationLine?: string;
+    textDecorationStyle?: CSS.Property.TextDecorationStyle;
+    textTransform?: CSS.Property.TextTransform;
+    top?: CSS.Property.Top;
+    /**
+     * Transform
+     */
+    transform?: CSS.Property.Transform;
+    verticalAlign?: CSS.Property.VerticalAlign;
+    whiteSpace?: CSS.Property.WhiteSpace;
+    width?: CSS.Property.Width | WidthProps;
+    writingMode?: CSS.Property.WritingMode;
+    zIndex?: CSS.Property.ZIndex;
+}
+type WrappedInterface<T> = {
+    [P in keyof T as `${P & string}Wrapper`]: T[P];
+};
+type LabelInterface<T> = {
+    [P in keyof T as `${P & string}Label`]: T[P];
+};
+type ImageInterface<T> = {
+    [P in keyof T as `${P & string}Image`]: T[P];
+};
+export type CSSPropertiesKey = keyof CSSProperties;
+export interface TypeStyleWrapperAttributes extends WrappedInterface<StyleAttributes> {
+}
+export interface TypeStyleLabelAttributes extends LabelInterface<StyleAttributes> {
+}
+export interface TypeStyleImageAttributes extends ImageInterface<StyleAttributes> {
+}
+export type StyleValidator = [
+    StyleAttributes['width'],
+    {
+        validate?: (value: string) => boolean;
+    }
+];
+export type StyleAttributeOrValidator = StyleAttributes | StyleValidator;
+export {};

package/dist/types/hooks/useStyles/useStyles.d.ts

@@ -0,0 +1,4 @@
+import { CSSProperties } from 'react';
+import { ComponentProps } from '../useDevicePropsGenerator/useDevicePropsGenerator.interface';
+declare function useStyles<Props extends ComponentProps>(props: Props): Record<string, CSSProperties>;
+export { useStyles };

package/dist/types/hooks/useViewportFix.d.ts

@@ -0,0 +1,2 @@
+declare function useViewportFix(): void;
+export { useViewportFix };

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

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

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

@@ -0,0 +1,43 @@
+export type ExactlyOne<K extends PropertyKey, V> = {
+    [P in K]: Partial<Record<Exclude<K, P>, never>> & {
+        [Q in P]: V;
+    };
+}[K];
+export type WithClassKeys<T> = T & {
+    [K in keyof T & string as `${K}Class`]: NonNullable<T[K]> extends string ? KebabCase<T[K]> | undefined : string | undefined;
+};
+export type KebabCase<S> = S extends string ? S extends `${infer F}${infer R}` ? R extends Uncapitalize<R> ? `${Lowercase<F>}${KebabCase<R>}` : `${Lowercase<F>}-${KebabCase<Uncapitalize<R>>}` : Lowercase<S> : never;
+/**
+ * Проверяет, что у типа `P` есть хотя бы один ключ из списка `Keys`.
+ *
+ * @template P - Объект, который проверяем (обычно тип пропсов компонента).
+ * @template Keys - Набор ключей, хотя бы один из которых должен присутствовать.
+ *
+ * @example
+ * type Props = { id: string; placeholderUrl?: string };
+ *
+ * type Check1 = RequireAtLeastOneProp<Props, 'src' | 'placeholderUrl'>;
+ * // ✅ "placeholderUrl" (совпадение есть)
+ *
+ * type Check2 = RequireAtLeastOneProp<Props, 'src' | 'imageSrc'>;
+ * // ❌ never (совпадений нет)
+ */
+export type RequireAtLeastOneProp<P, Keys> = Extract<keyof P, Keys>;
+/**
+ * Выводит типовую ошибку, если в `Check` нет ни одного ключа (равен `never`).
+ *
+ * @template Check - Результат проверки из `RequireAtLeastOneProp`.
+ * @template Error - Текст ошибки, который будет показан в TS.
+ *
+ * @example
+ * type Props = { id: string };
+ *
+ * type Check = RequireAtLeastOneProp<Props, 'src' | 'imageSrc'>;
+ *
+ * type ErrorCheck = RequireAtLeastOnePropError<
+ *   Check,
+ *   ['Компонент должен содержать хотя бы один из пропсов', 'src' | 'imageSrc']
+ * >;
+ * // ❌ TS ошибка: ["Компонент должен содержать хотя бы один из пропсов", "src" | "imageSrc"]
+ */
+export type RequireAtLeastOnePropError<Check, Error> = [Check] extends [never] ? Error : [];

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

@@ -0,0 +1,3 @@
+import { mergeAppearanceKeys } from './mergeAppearanceKeys';
+import { setViewportProperty } from './setViewportProperty';
+export { mergeAppearanceKeys, setViewportProperty };

package/dist/types/utils/mergeAppearanceKeys.d.ts

@@ -0,0 +1,7 @@
+type MergeAppearanceKeysReturn = any;
+/**
+ * @example
+ * mergeAppearanceKeys(' ', '1', undefined, '2', '1') === '1 2'
+ */
+declare const mergeAppearanceKeys: (...appearances: Array<string | undefined>) => MergeAppearanceKeysReturn;
+export { mergeAppearanceKeys };

package/dist/types/utils/setViewportProperty.d.ts

@@ -0,0 +1,2 @@
+declare const setViewportProperty: () => void;
+export { setViewportProperty };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui",
-  "version": "1.9.71",
+  "version": "1.9.72",
   "description": "UI components (Modal, Loader, Popup, etc)",
   "keywords": [
     "Modal",
@@ -95,7 +95,7 @@
     "./dist/css/styles/bundles.css": "./dist/css/styles/bundles.css"
   },
   "scripts": {
-    "build": "npm run build-js && echo 'npm run build-types' && npm run build-css",
+    "build": "npm run build-js && npm run build-types && npm run build-css",
     "build-types": "rm -rf dist/types && tsc -p tsconfig.build.json",
     "build-js": "rm -rf dist && rollup -c",
     "build-css": "rm -rf dist/css && postcss 'src/styles/bundles.css' 'src/mediaqueries/*.css' 'src/mixins/*.css' --base src --dir dist/css/ --env production",
@@ -168,7 +168,7 @@
     "@itcase/config": "^1.6.52",
     "@itcase/lint": "^1.1.101",
     "@itcase/types-core": "^1.1.31",
-    "@itcase/types-ui": "^1.1.40",
+    "@itcase/types-ui": "^1.1.46",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.0.0",
     "@rollup/plugin-commonjs": "^29.0.2",