@cdek-it/react-native-ui-kit 0.2.0

package/dist/theme/types.d.ts

@@ -0,0 +1,40 @@
+import type background from './assets/background.json';
+import type border from './assets/border.json';
+import type { customCommon } from './assets/customCommon';
+import type { customLight } from './assets/customLight';
+import type effects from './assets/effects.json';
+import type global from './assets/global.json';
+import type primaryColors from './assets/primaryColors.json';
+import type { shadow } from './assets/shadow';
+import type sizing from './assets/sizing.json';
+import type spacing from './assets/spacing.json';
+import type lightTheme from './assets/themeLight.json';
+import type typography from './assets/typography.json';
+export interface ThemeType {
+    background: typeof background;
+    colors: {
+        primary: typeof primaryColors;
+    };
+    border: typeof border;
+    effects: typeof effects;
+    global: typeof global;
+    sizing: typeof sizing;
+    spacing: typeof spacing;
+    theme: typeof lightTheme & {
+        custom: typeof customLight;
+    };
+    typography: typeof typography;
+    custom: typeof customCommon;
+    shadow: typeof shadow;
+}
+export declare enum ThemeVariant {
+    Light = "Light",
+    Dark = "Dark"
+}
+export interface FontsConfig {
+    primary: string;
+    secondary: string;
+}
+export interface FontsConfigType {
+    fonts: FontsConfig;
+}

package/dist/theme/types.js

@@ -0,0 +1,5 @@
+export var ThemeVariant;
+(function (ThemeVariant) {
+    ThemeVariant["Light"] = "Light";
+    ThemeVariant["Dark"] = "Dark";
+})(ThemeVariant || (ThemeVariant = {}));

package/dist/utils/SvgUniversal.d.ts

@@ -0,0 +1,29 @@
+import { type ComponentType } from 'react';
+import { type SvgProps } from 'react-native-svg';
+export type SvgSource = {
+    uri: string;
+} | {
+    xml: string;
+} | ComponentType<SvgProps>;
+interface SvgUniversalProps extends SvgProps {
+    /** Источник SVG */
+    source: SvgSource;
+}
+/**
+ * Компонент для рендера SVG из разных источников
+ * Поддерживает:
+ * - uri
+ * - xml
+ * - ComponentType<SvgProps>
+ * @example
+ * <SvgUniversal source={{ uri: 'https://example.com/icon.svg' }} />
+ * <SvgUniversal source={{ xml: '<svg><path d="M1 1h1v1H1z" /></svg>' }} />
+ * <SvgUniversal source={IconUser} />
+ */
+export declare const SvgUniversal: import("react").NamedExoticComponent<SvgUniversalProps>;
+export declare const SvgUniversalTestId: {
+    component: string;
+    uri: string;
+    xml: string;
+};
+export {};

package/dist/utils/SvgUniversal.js

@@ -0,0 +1,28 @@
+import { memo } from 'react';
+import { SvgUri, SvgXml } from 'react-native-svg';
+/**
+ * Компонент для рендера SVG из разных источников
+ * Поддерживает:
+ * - uri
+ * - xml
+ * - ComponentType<SvgProps>
+ * @example
+ * <SvgUniversal source={{ uri: 'https://example.com/icon.svg' }} />
+ * <SvgUniversal source={{ xml: '<svg><path d="M1 1h1v1H1z" /></svg>' }} />
+ * <SvgUniversal source={IconUser} />
+ */
+export const SvgUniversal = memo(({ source, ...rest }) => {
+    if ('uri' in source) {
+        return <SvgUri testID={SvgUniversalTestId.uri} uri={source.uri} {...rest}/>;
+    }
+    if ('xml' in source) {
+        return <SvgXml testID={SvgUniversalTestId.xml} xml={source.xml} {...rest}/>;
+    }
+    const Component = source;
+    return <Component testID={SvgUniversalTestId.component} {...rest}/>;
+});
+export const SvgUniversalTestId = {
+    component: 'SvgUniversalComponent',
+    uri: 'SvgUniversalUri',
+    xml: 'SvgUniversalXml',
+};

package/dist/utils/genericMemo.d.ts

@@ -0,0 +1 @@
+export declare const genericMemo: <T>(component: T) => T;

package/dist/utils/genericMemo.js

@@ -0,0 +1,2 @@
+import { memo } from 'react';
+export const genericMemo = memo;

package/dist/utils/makeStyles.d.ts

@@ -0,0 +1,11 @@
+import type { ImageStyle, TextStyle, ViewStyle } from 'react-native';
+import { type FontsConfigType, type ThemeType } from '../theme';
+export declare const makeStyles: <T extends StylesObject>(createStyles: CreateStyles<T>) => (() => T);
+type StylesItem = ViewStyle | ImageStyle | TextStyle;
+type StylesObject = Record<string, StylesItem>;
+type CreateStyles<T extends StylesObject> = (theme: ThemeType & FontsConfigType) => CheckInvalidProps<T> extends never ? T : 'TypeError. Invalid key of style property was used.';
+type ExcludeStylesProps<T> = Exclude<keyof T, keyof (ViewStyle & ImageStyle & TextStyle)>;
+type CheckInvalidProps<T extends object> = {
+    [Key in keyof T]: ExcludeStylesProps<T[Key]>;
+}[keyof T];
+export {};

package/dist/utils/makeStyles.js

@@ -0,0 +1,19 @@
+import { useMemo } from 'react';
+import { useFonts } from '../hooks/useFonts';
+import { useTheme } from '../hooks/useTheme';
+import { darkTheme, lightTheme, ThemeVariant, } from '../theme';
+export const makeStyles = (createStyles) => () => {
+    const fonts = useFonts();
+    const theme = useTheme();
+    const themeValues = useMemo(() => {
+        switch (theme) {
+            case ThemeVariant.Light:
+                return lightTheme;
+            case ThemeVariant.Dark:
+                return darkTheme;
+            default:
+                return lightTheme;
+        }
+    }, [theme]);
+    return useMemo(() => createStyles({ ...themeValues, fonts }), [fonts, themeValues]);
+};

package/package.json

@@ -0,0 +1,159 @@
+{
+  "name": "@cdek-it/react-native-ui-kit",
+  "version": "0.2.0",
+  "description": "UI kit на основе Prime Faces, Prime Flex для React Native",
+  "license": "MIT",
+  "homepage": "https://developer.cdek.ru/design-system",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cdek-it/react-native-ui-kit.git"
+  },
+  "keywords": [
+    "react-native",
+    "ios",
+    "android",
+    "ui-kit",
+    "uikit"
+  ],
+  "publishConfig": {
+    "main": "./dist/index.js",
+    "types": "./dist/index.d.ts",
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "rm -rf dist && tsc -p tsconfig.build.json",
+    "test": "jest",
+    "start": "expo start --dev-client",
+    "android": "expo run:android",
+    "ios": "expo run:ios --no-install",
+    "storybook-generate": "sb-rn-get-stories --config-path .storybook && sed -i -e 's/export const view = global.view/export const view: ReturnType<typeof start> = global.view/' .storybook/storybook.requires.ts && prettier .storybook --write",
+    "doctor": "expo-doctor",
+    "check": "expo install --check",
+    "lint:check": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "prettier:check": "prettier . --check",
+    "prettier:fix": "prettier . --write",
+    "prettier:watch": "onchange . -- prettier --write --ignore-unknown \"{{changed}}\""
+  },
+  "devDependencies": {
+    "@babel/core": "7.28.3",
+    "@babel/plugin-transform-class-static-block": "7.28.3",
+    "@babel/preset-env": "7.28.3",
+    "@commitlint/cli": "19.8.1",
+    "@commitlint/config-conventional": "19.8.1",
+    "@eslint/compat": "1.2.8",
+    "@expo/metro-runtime": "4.0.1",
+    "@gorhom/bottom-sheet": "5.0.6",
+    "@gorhom/portal": "1.0.14",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/datetimepicker": "8.4.1",
+    "@react-native-community/slider": "4.5.6",
+    "@storybook/addon-actions": "8.3.5",
+    "@storybook/addon-controls": "8.3.5",
+    "@storybook/addon-ondevice-actions": "8.3.5",
+    "@storybook/addon-ondevice-controls": "8.3.5",
+    "@storybook/addon-ondevice-notes": "8.3.5",
+    "@storybook/core": "8.3.5",
+    "@storybook/preview-api": "8.3.5",
+    "@storybook/react": "8.3.5",
+    "@storybook/react-native": "8.3.5",
+    "@storybook/test": "8.3.5",
+    "@stylistic/eslint-plugin": "5.5.0",
+    "@tabler/icons-react-native": "3.31.0",
+    "@testing-library/react-native": "13.3.1",
+    "@types/jest": "29.5.14",
+    "@types/lodash.map": "^4",
+    "@types/react": "19.0.10",
+    "babel-loader": "8.2.3",
+    "chalk": "4.1.2",
+    "commitizen": "4.3.1",
+    "cross-env": "7.0.3",
+    "eslint": "9.39.1",
+    "eslint-import-resolver-typescript": "4.4.4",
+    "eslint-plugin-import-x": "4.16.1",
+    "eslint-plugin-jest": "29.1.0",
+    "eslint-plugin-jest-extended": "3.0.1",
+    "eslint-plugin-prettier": "5.5.4",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "7.0.1",
+    "eslint-plugin-react-native": "5.0.0",
+    "eslint-plugin-testing-library": "7.13.4",
+    "expo": "53.0.24",
+    "expo-application": "6.1.5",
+    "expo-constants": "17.1.7",
+    "expo-doctor": "1.17.0",
+    "expo-status-bar": "2.2.3",
+    "inquirer-search-list": "1.2.6",
+    "jest": "29.7.0",
+    "jest-expo": "53.0.10",
+    "jest-extended": "6.0.0",
+    "jest-junit": "16.0.0",
+    "jiti": "2.5.1",
+    "lefthook": "2.0.4",
+    "lodash.map": "4.6.0",
+    "longest": "2.0.1",
+    "npm-check-updates": "18.0.2",
+    "onchange": "7.1.0",
+    "prettier": "3.6.2",
+    "react": "19.0.0",
+    "react-native": "0.79.6",
+    "react-native-advanced-input-mask": "1.4.4",
+    "react-native-gesture-handler": "2.28.0",
+    "react-native-reanimated": "3.19.1",
+    "react-native-safe-area-context": "5.6.1",
+    "react-native-svg": "15.12.1",
+    "standard-version": "9.5.0",
+    "storybook": "8.3.5",
+    "ts-node": "10.9.2",
+    "typescript": "5.8.3",
+    "typescript-eslint": "8.39.0",
+    "word-wrap": "1.2.5"
+  },
+  "peerDependencies": {
+    "@gorhom/portal": "1.0.14",
+    "@tabler/icons-react-native": ">=3.x",
+    "expo": ">=53.x.x",
+    "react": ">=18.x",
+    "react-native": ">=0.77.x",
+    "react-native-reanimated": ">=3.15.x",
+    "react-native-svg": ">=15.11.x"
+  },
+  "peerDependenciesMeta": {
+    "expo": {
+      "optional": true
+    }
+  },
+  "packageManager": "yarn@4.6.0",
+  "engines": {
+    "node": "20"
+  },
+  "config": {
+    "commitizen": {
+      "path": "./configs/cz-conventional-mobile"
+    }
+  },
+  "expo": {
+    "autolinking": {
+      "ios": {
+        "searchPaths": [
+          "./node_modules"
+        ]
+      }
+    },
+    "doctor": {
+      "appConfigFieldsNotSyncedCheck": {
+        "enabled": false
+      },
+      "reactNativeDirectoryCheck": {
+        "exclude": [
+          "@tabler/icons-react-native"
+        ],
+        "listUnknownPackages": false
+      }
+    }
+  }
+}