From 760a66f347503398bb294ce9cce60f2d1db89a76 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 18 Aug 2025 15:42:03 +0500 Subject: [PATCH 1/5] chore(star-ds): Update meta for ios / anroid platform --- libraries/star-ds/android/app/build.gradle | 2 +- .../ios/StarDS.xcodeproj/project.pbxproj | 66 +++++++++---------- libraries/star-ds/ios/StarDS/Info.plist | 2 +- 3 files changed, 35 insertions(+), 35 deletions(-) diff --git a/libraries/star-ds/android/app/build.gradle b/libraries/star-ds/android/app/build.gradle index 2d8e957..b03b1b2 100644 --- a/libraries/star-ds/android/app/build.gradle +++ b/libraries/star-ds/android/app/build.gradle @@ -115,7 +115,7 @@ android { minSdkVersion rootProject.ext.minSdkVersion targetSdkVersion rootProject.ext.targetSdkVersion versionCode 1 - versionName "0.8.0" + versionName "0.9.0" } signingConfigs { debug { diff --git a/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj b/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj index 6709911..0be28b0 100644 --- a/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj +++ b/libraries/star-ds/ios/StarDS.xcodeproj/project.pbxproj @@ -10,12 +10,12 @@ 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; }; 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; }; 13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; }; - 280A11C0CCB14FA7AF7C837D /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 790F1FDFB5204B278673EDDC /* noop-file.swift */; }; 3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */; }; 96905EF65AED1B983A6B3ABC /* libPods-StarDS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 58EEBF8E8E6FB1BC6CAF49B5 /* libPods-StarDS.a */; }; B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */ = {isa = PBXBuildFile; fileRef = FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */; }; BB2F792D24A3F905000567C9 /* Expo.plist in Resources */ = {isa = PBXBuildFile; fileRef = BB2F792C24A3F905000567C9 /* Expo.plist */; }; - CEE250B63E3F84B70CFB4881 /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = 38056C8271F0FA3363A251DB /* PrivacyInfo.xcprivacy */; }; + C7F881B7416AFA310A7EC47E /* PrivacyInfo.xcprivacy in Resources */ = {isa = PBXBuildFile; fileRef = BC8FBC231EBF93076C77119C /* PrivacyInfo.xcprivacy */; }; + CCCB36E09E0F4E97BCCD04A5 /* noop-file.swift in Sources */ = {isa = PBXBuildFile; fileRef = 5F91510C2BEA43748CB2902D /* noop-file.swift */; }; /* End PBXBuildFile section */ /* Begin PBXFileReference section */ @@ -25,14 +25,14 @@ 13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = StarDS/Images.xcassets; sourceTree = ""; }; 13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = StarDS/Info.plist; sourceTree = ""; }; 13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = StarDS/main.m; sourceTree = ""; }; - 38056C8271F0FA3363A251DB /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = StarDS/PrivacyInfo.xcprivacy; sourceTree = ""; }; + 3FCDD74562084BC0A17BA432 /* StarDS-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "StarDS-Bridging-Header.h"; path = "StarDS/StarDS-Bridging-Header.h"; sourceTree = ""; }; 58EEBF8E8E6FB1BC6CAF49B5 /* libPods-StarDS.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-StarDS.a"; sourceTree = BUILT_PRODUCTS_DIR; }; + 5F91510C2BEA43748CB2902D /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "StarDS/noop-file.swift"; sourceTree = ""; }; 6C2E3173556A471DD304B334 /* Pods-StarDS.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StarDS.debug.xcconfig"; path = "Target Support Files/Pods-StarDS/Pods-StarDS.debug.xcconfig"; sourceTree = ""; }; - 790F1FDFB5204B278673EDDC /* noop-file.swift */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.swift; name = "noop-file.swift"; path = "StarDS/noop-file.swift"; sourceTree = ""; }; 7A4D352CD337FB3A3BF06240 /* Pods-StarDS.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-StarDS.release.xcconfig"; path = "Target Support Files/Pods-StarDS/Pods-StarDS.release.xcconfig"; sourceTree = ""; }; - 8EFD34505D23484DA126802E /* StarDS-Bridging-Header.h */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 4; includeInIndex = 0; lastKnownFileType = sourcecode.c.h; name = "StarDS-Bridging-Header.h"; path = "StarDS/StarDS-Bridging-Header.h"; sourceTree = ""; }; AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = SplashScreen.storyboard; path = StarDS/SplashScreen.storyboard; sourceTree = ""; }; BB2F792C24A3F905000567C9 /* Expo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Expo.plist; sourceTree = ""; }; + BC8FBC231EBF93076C77119C /* PrivacyInfo.xcprivacy */ = {isa = PBXFileReference; includeInIndex = 1; name = PrivacyInfo.xcprivacy; path = StarDS/PrivacyInfo.xcprivacy; sourceTree = ""; }; ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; }; FAC715A2D49A985799AEE119 /* ExpoModulesProvider.swift */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = sourcecode.swift; name = ExpoModulesProvider.swift; path = "Pods/Target Support Files/Pods-StarDS/ExpoModulesProvider.swift"; sourceTree = ""; }; /* End PBXFileReference section */ @@ -59,9 +59,9 @@ 13B07FB61A68108700A75B9A /* Info.plist */, 13B07FB71A68108700A75B9A /* main.m */, AA286B85B6C04FC6940260E9 /* SplashScreen.storyboard */, - 790F1FDFB5204B278673EDDC /* noop-file.swift */, - 8EFD34505D23484DA126802E /* StarDS-Bridging-Header.h */, - 38056C8271F0FA3363A251DB /* PrivacyInfo.xcprivacy */, + 5F91510C2BEA43748CB2902D /* noop-file.swift */, + 3FCDD74562084BC0A17BA432 /* StarDS-Bridging-Header.h */, + BC8FBC231EBF93076C77119C /* PrivacyInfo.xcprivacy */, ); name = StarDS; sourceTree = ""; @@ -147,13 +147,13 @@ buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "StarDS" */; buildPhases = ( 08A4A3CD28434E44B6B9DE2E /* [CP] Check Pods Manifest.lock */, - 36B67A32176FAA43F88C57E9 /* [Expo] Configure project */, + F5F5C5D285111EFDBFA7C00C /* [Expo] Configure project */, 13B07F871A680F5B00A75B9A /* Sources */, 13B07F8C1A680F5B00A75B9A /* Frameworks */, 13B07F8E1A680F5B00A75B9A /* Resources */, 00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */, 800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */, - 30869214CA85EF7C0470687F /* [CP] Embed Pods Frameworks */, + FD5D1EE754296CF66D8A39C6 /* [CP] Embed Pods Frameworks */, ); buildRules = ( ); @@ -203,7 +203,7 @@ BB2F792D24A3F905000567C9 /* Expo.plist in Resources */, 13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */, 3E461D99554A48A4959DE609 /* SplashScreen.storyboard in Resources */, - CEE250B63E3F84B70CFB4881 /* PrivacyInfo.xcprivacy in Resources */, + C7F881B7416AFA310A7EC47E /* PrivacyInfo.xcprivacy in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; @@ -247,25 +247,33 @@ shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; - 30869214CA85EF7C0470687F /* [CP] Embed Pods Frameworks */ = { + 800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh", - "${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes", + "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh", + "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle", + "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle", ); - name = "[CP] Embed Pods Frameworks"; + name = "[CP] Copy Pods Resources"; outputPaths = ( - "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle", + "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh\"\n"; + shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh\"\n"; showEnvVarsInLog = 0; }; - 36B67A32176FAA43F88C57E9 /* [Expo] Configure project */ = { + F5F5C5D285111EFDBFA7C00C /* [Expo] Configure project */ = { isa = PBXShellScriptBuildPhase; alwaysOutOfDate = 1; buildActionMask = 2147483647; @@ -284,30 +292,22 @@ shellPath = /bin/sh; shellScript = "# This script configures Expo modules and generates the modules provider file.\nbash -l -c \"./Pods/Target\\ Support\\ Files/Pods-StarDS/expo-configure-project.sh\"\n"; }; - 800E24972A6A228C8D4807E9 /* [CP] Copy Pods Resources */ = { + FD5D1EE754296CF66D8A39C6 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( - "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh", - "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/RNCAsyncStorage/RNCAsyncStorage_resources.bundle", - "${PODS_CONFIGURATION_BUILD_DIR}/React-Core/RCTI18nStrings.bundle", + "${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh", + "${PODS_XCFRAMEWORKS_BUILD_DIR}/hermes-engine/Pre-built/hermes.framework/hermes", ); - name = "[CP] Copy Pods Resources"; + name = "[CP] Embed Pods Frameworks"; outputPaths = ( - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RNCAsyncStorage_resources.bundle", - "${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/RCTI18nStrings.bundle", + "${TARGET_BUILD_DIR}/${FRAMEWORKS_FOLDER_PATH}/hermes.framework", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; - shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-resources.sh\"\n"; + shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-StarDS/Pods-StarDS-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; /* End PBXShellScriptBuildPhase section */ @@ -320,7 +320,7 @@ 13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */, 13B07FC11A68108700A75B9A /* main.m in Sources */, B18059E884C0ABDD17F3DC3D /* ExpoModulesProvider.swift in Sources */, - 280A11C0CCB14FA7AF7C837D /* noop-file.swift in Sources */, + CCCB36E09E0F4E97BCCD04A5 /* noop-file.swift in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/libraries/star-ds/ios/StarDS/Info.plist b/libraries/star-ds/ios/StarDS/Info.plist index 8f92c15..6c1d5fc 100644 --- a/libraries/star-ds/ios/StarDS/Info.plist +++ b/libraries/star-ds/ios/StarDS/Info.plist @@ -19,7 +19,7 @@ CFBundlePackageType $(PRODUCT_BUNDLE_PACKAGE_TYPE) CFBundleShortVersionString - 0.8.0 + 0.9.0 CFBundleSignature ???? CFBundleURLTypes From ca9bb478ac866198c8d822b924409ed7f62091cb Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 18 Aug 2025 16:22:35 +0500 Subject: [PATCH 2/5] feat(core-components): Add core `Indicator` for user libraries --- .../components/Indicator/Indicator.styles.ts | 29 +++++++++++++++++++ .../src/components/Indicator/Indicator.tsx | 24 +++++++++++++++ .../components/Indicator/Indicator.types.ts | 29 +++++++++++++++++++ .../src/components/Indicator/index.ts | 1 + core/core-components/src/index.ts | 1 + docs/Indicator.md | 24 +++++++++++++++ 6 files changed, 108 insertions(+) create mode 100644 core/core-components/src/components/Indicator/Indicator.styles.ts create mode 100644 core/core-components/src/components/Indicator/Indicator.tsx create mode 100644 core/core-components/src/components/Indicator/Indicator.types.ts create mode 100644 core/core-components/src/components/Indicator/index.ts create mode 100644 docs/Indicator.md diff --git a/core/core-components/src/components/Indicator/Indicator.styles.ts b/core/core-components/src/components/Indicator/Indicator.styles.ts new file mode 100644 index 0000000..46a3ca3 --- /dev/null +++ b/core/core-components/src/components/Indicator/Indicator.styles.ts @@ -0,0 +1,29 @@ +import { StyleSheet, ViewStyle } from 'react-native'; + +import { IndicatorConfig } from './Indicator.types'; + +export interface Style { + root?: ViewStyle; +} + +export const getStyle = ( + viewStyle?: IndicatorConfig['variations']['view'][string], + sizeStyle?: IndicatorConfig['variations']['size'][string], + externalStyle?: Style, +): Style => { + if (!viewStyle || !sizeStyle) { + return { + root: {}, + }; + } + + return StyleSheet.create({ + root: { + width: sizeStyle.size, + height: sizeStyle.size, + borderRadius: sizeStyle.size / 2, + backgroundColor: viewStyle.color, + ...externalStyle?.root, + }, + }); +}; diff --git a/core/core-components/src/components/Indicator/Indicator.tsx b/core/core-components/src/components/Indicator/Indicator.tsx new file mode 100644 index 0000000..91df207 --- /dev/null +++ b/core/core-components/src/components/Indicator/Indicator.tsx @@ -0,0 +1,24 @@ +import { useMemo } from 'react'; +import { View } from 'react-native'; + +import { PropsType } from '../../types'; +import { withTheme } from '../ThemeProvider'; + +import { IndicatorConfig, IndicatorProps } from './Indicator.types'; +import { getStyle } from './Indicator.styles'; + +export const indicatorCore = (config?: T) => ( + props: IndicatorProps & PropsType, + externalRef: React.ForwardedRef, +) => { + const { view = '', size = '', ...rest } = props; + + const viewStyle = config?.variations.view[view]; + const sizeStyle = config?.variations.size[size]; + + const style = useMemo(() => getStyle(viewStyle, sizeStyle), [view, size]); + + return ; +}; + +export const indicatorComponent = withTheme(indicatorCore); diff --git a/core/core-components/src/components/Indicator/Indicator.types.ts b/core/core-components/src/components/Indicator/Indicator.types.ts new file mode 100644 index 0000000..6f346a0 --- /dev/null +++ b/core/core-components/src/components/Indicator/Indicator.types.ts @@ -0,0 +1,29 @@ +export interface IndicatorProps { + /** + * Вид индикатора + */ + view?: string; + /** + * Размер индикатора + */ + size?: string; +} + +export interface IndicatorConfig { + defaults: { + view: string; + size: string; + }; + variations: { + view: { + [x: string]: { + color: string; + }; + }; + size: { + [x: string]: { + size: number; + }; + }; + }; +} diff --git a/core/core-components/src/components/Indicator/index.ts b/core/core-components/src/components/Indicator/index.ts new file mode 100644 index 0000000..c6368f1 --- /dev/null +++ b/core/core-components/src/components/Indicator/index.ts @@ -0,0 +1 @@ +export { indicatorCore, indicatorComponent } from './Indicator'; diff --git a/core/core-components/src/index.ts b/core/core-components/src/index.ts index 0e7408f..4a5fb96 100644 --- a/core/core-components/src/index.ts +++ b/core/core-components/src/index.ts @@ -8,6 +8,7 @@ export * from './components/Checkbox'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; +export * from './components/Indicator'; export * from './components/Skeleton'; export * from './components/Spinner'; export * from './components/Switch'; diff --git a/docs/Indicator.md b/docs/Indicator.md new file mode 100644 index 0000000..9ef1d28 --- /dev/null +++ b/docs/Indicator.md @@ -0,0 +1,24 @@ +## Indicator + +Компонент отображающий состояние рядом лежащего компонента. + +### Свойства и типы + +| Название свойства | Тип | Значение по умолчанию | Описание | +| ----------------- | ------ | --------------------- | ----------------- | +| view | string | - | Вид индикатора | +| size | string | - | Размер индикатора | + +### Примеры использования + +#### Стандартный пример + +```ts +import { Indicator } from '@salutejs/plasma-star-ds-tv'; + +const App = () => { + return ; +}; + +export default App; +``` From 0659e3930716aaf681ea3a9b1d1ca403a1e56862 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Mon, 18 Aug 2025 16:24:09 +0500 Subject: [PATCH 3/5] feat(plasma-b2c,star-ds): Add `Indicator` component --- .../components/Indicator/Indicator.config.ts | 43 ++++++++++++++++ .../Indicator/Indicator.stories.tsx | 49 +++++++++++++++++++ .../src/components/Indicator/Indicator.ts | 5 ++ .../src/components/Indicator/index.ts | 1 + libraries/plasma-b2c/src/index.prod.ts | 1 + .../components/Indicator/Indicator.config.ts | 43 ++++++++++++++++ .../Indicator/Indicator.stories.tsx | 49 +++++++++++++++++++ .../src/components/Indicator/Indicator.ts | 5 ++ .../star-ds/src/components/Indicator/index.ts | 1 + libraries/star-ds/src/index.prod.ts | 1 + 10 files changed, 198 insertions(+) create mode 100644 libraries/plasma-b2c/src/components/Indicator/Indicator.config.ts create mode 100644 libraries/plasma-b2c/src/components/Indicator/Indicator.stories.tsx create mode 100644 libraries/plasma-b2c/src/components/Indicator/Indicator.ts create mode 100644 libraries/plasma-b2c/src/components/Indicator/index.ts create mode 100644 libraries/star-ds/src/components/Indicator/Indicator.config.ts create mode 100644 libraries/star-ds/src/components/Indicator/Indicator.stories.tsx create mode 100644 libraries/star-ds/src/components/Indicator/Indicator.ts create mode 100644 libraries/star-ds/src/components/Indicator/index.ts diff --git a/libraries/plasma-b2c/src/components/Indicator/Indicator.config.ts b/libraries/plasma-b2c/src/components/Indicator/Indicator.config.ts new file mode 100644 index 0000000..e7d6c61 --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/Indicator.config.ts @@ -0,0 +1,43 @@ +import { Theme } from '@salutejs/core-components'; + +import { PlasmaB2CTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'accent', + size: 'm', + }, + variations: { + view: { + default: { + color: data.color[mode].textPrimary, + }, + accent: { + color: data.color[mode].textAccent, + }, + inactive: { + color: data.color[mode].surfaceSolidTertiary, + }, + positive: { + color: data.color[mode].textPositive, + }, + warning: { + color: data.color[mode].textWarning, + }, + negative: { + color: data.color[mode].textNegative, + }, + }, + size: { + l: { + size: 12, + }, + m: { + size: 8, + }, + s: { + size: 6, + }, + }, + }, +}); diff --git a/libraries/plasma-b2c/src/components/Indicator/Indicator.stories.tsx b/libraries/plasma-b2c/src/components/Indicator/Indicator.stories.tsx new file mode 100644 index 0000000..7096f5b --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/Indicator.stories.tsx @@ -0,0 +1,49 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Indicator } from './Indicator'; + +type StoryIndicatorProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +| ----------- | ------------------------------ | --------------- | +| view | Вид индикатора | 'accent' | +| size | Размер индикатора | 'm' | +`; + +const meta: Meta = { + title: 'Components/Indicator', + component: Indicator, + parameters: { + notes, + }, + args: { + view: 'accent', + size: 'm', + }, + argTypes: { + size: { + options: ['s', 'm', 'l'], + control: { + type: 'select', + }, + }, + view: { + options: ['default', 'accent', 'inactive', 'positive', 'warning', 'negative'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryIndicatorProps) => { + return ; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/plasma-b2c/src/components/Indicator/Indicator.ts b/libraries/plasma-b2c/src/components/Indicator/Indicator.ts new file mode 100644 index 0000000..1905509 --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/Indicator.ts @@ -0,0 +1,5 @@ +import { indicatorComponent } from '@salutejs/core-components'; + +import { getConfig } from './Indicator.config'; + +export const Indicator = indicatorComponent(getConfig); diff --git a/libraries/plasma-b2c/src/components/Indicator/index.ts b/libraries/plasma-b2c/src/components/Indicator/index.ts new file mode 100644 index 0000000..1b592eb --- /dev/null +++ b/libraries/plasma-b2c/src/components/Indicator/index.ts @@ -0,0 +1 @@ +export { Indicator } from './Indicator'; diff --git a/libraries/plasma-b2c/src/index.prod.ts b/libraries/plasma-b2c/src/index.prod.ts index e2b0ed1..1025d73 100644 --- a/libraries/plasma-b2c/src/index.prod.ts +++ b/libraries/plasma-b2c/src/index.prod.ts @@ -6,6 +6,7 @@ export * from './components/Checkbox'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; +export * from './components/Indicator'; export * from './components/Skeleton'; export * from './components/Spinner'; export * from './components/Switch'; diff --git a/libraries/star-ds/src/components/Indicator/Indicator.config.ts b/libraries/star-ds/src/components/Indicator/Indicator.config.ts new file mode 100644 index 0000000..1171c00 --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/Indicator.config.ts @@ -0,0 +1,43 @@ +import { Theme } from '@salutejs/core-components'; + +import { StylesSaluteTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'accent', + size: 'm', + }, + variations: { + view: { + default: { + color: data.color[mode].textPrimary, + }, + accent: { + color: data.color[mode].textAccentMain, + }, + inactive: { + color: data.color[mode].surfaceSolidTertiary, + }, + positive: { + color: data.color[mode].textPositive, + }, + warning: { + color: data.color[mode].textWarning, + }, + negative: { + color: data.color[mode].textNegative, + }, + }, + size: { + l: { + size: 12, + }, + m: { + size: 8, + }, + s: { + size: 6, + }, + }, + }, +}); diff --git a/libraries/star-ds/src/components/Indicator/Indicator.stories.tsx b/libraries/star-ds/src/components/Indicator/Indicator.stories.tsx new file mode 100644 index 0000000..7096f5b --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/Indicator.stories.tsx @@ -0,0 +1,49 @@ +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Indicator } from './Indicator'; + +type StoryIndicatorProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +| ----------- | ------------------------------ | --------------- | +| view | Вид индикатора | 'accent' | +| size | Размер индикатора | 'm' | +`; + +const meta: Meta = { + title: 'Components/Indicator', + component: Indicator, + parameters: { + notes, + }, + args: { + view: 'accent', + size: 'm', + }, + argTypes: { + size: { + options: ['s', 'm', 'l'], + control: { + type: 'select', + }, + }, + view: { + options: ['default', 'accent', 'inactive', 'positive', 'warning', 'negative'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryIndicatorProps) => { + return ; +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/star-ds/src/components/Indicator/Indicator.ts b/libraries/star-ds/src/components/Indicator/Indicator.ts new file mode 100644 index 0000000..1905509 --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/Indicator.ts @@ -0,0 +1,5 @@ +import { indicatorComponent } from '@salutejs/core-components'; + +import { getConfig } from './Indicator.config'; + +export const Indicator = indicatorComponent(getConfig); diff --git a/libraries/star-ds/src/components/Indicator/index.ts b/libraries/star-ds/src/components/Indicator/index.ts new file mode 100644 index 0000000..1b592eb --- /dev/null +++ b/libraries/star-ds/src/components/Indicator/index.ts @@ -0,0 +1 @@ +export { Indicator } from './Indicator'; diff --git a/libraries/star-ds/src/index.prod.ts b/libraries/star-ds/src/index.prod.ts index e2b0ed1..1025d73 100644 --- a/libraries/star-ds/src/index.prod.ts +++ b/libraries/star-ds/src/index.prod.ts @@ -6,6 +6,7 @@ export * from './components/Checkbox'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; +export * from './components/Indicator'; export * from './components/Skeleton'; export * from './components/Spinner'; export * from './components/Switch'; From 68eafd41625bf8ff98eb9d8dd366bd815016e9ce Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 19 Aug 2025 14:49:04 +0500 Subject: [PATCH 4/5] feat(core-components): Add core `Divider` for user libraries --- .../src/components/Divider/Divider.styles.ts | 34 ++++++++++++++ .../src/components/Divider/Divider.tsx | 32 ++++++++++++++ .../src/components/Divider/Divider.types.ts | 44 +++++++++++++++++++ .../src/components/Divider/index.ts | 1 + core/core-components/src/index.ts | 1 + docs/Divider.md | 34 ++++++++++++++ 6 files changed, 146 insertions(+) create mode 100644 core/core-components/src/components/Divider/Divider.styles.ts create mode 100644 core/core-components/src/components/Divider/Divider.tsx create mode 100644 core/core-components/src/components/Divider/Divider.types.ts create mode 100644 core/core-components/src/components/Divider/index.ts create mode 100644 docs/Divider.md diff --git a/core/core-components/src/components/Divider/Divider.styles.ts b/core/core-components/src/components/Divider/Divider.styles.ts new file mode 100644 index 0000000..6a30451 --- /dev/null +++ b/core/core-components/src/components/Divider/Divider.styles.ts @@ -0,0 +1,34 @@ +import { StyleSheet, ViewStyle } from 'react-native'; + +import { DividerConfig, OrientationProp } from './Divider.types'; + +export interface Style { + root?: ViewStyle; +} + +export const getStyle = ( + viewStyle?: DividerConfig['variations']['view'][string], + sizeStyle?: DividerConfig['variations']['size'][string], + orientationStyle?: DividerConfig['variations']['orientation'][string], + length?: number, + orientation?: OrientationProp, + externalStyle?: Style, +): Style => { + if (!viewStyle || !sizeStyle || !orientationStyle) { + return { + root: {}, + }; + } + + console.log('orientation', orientation); + + return StyleSheet.create({ + root: { + width: orientation === 'vertical' ? orientationStyle.baseSideSize : `${length ?? 100}%`, + height: orientation === 'vertical' ? `${length ?? 100}%` : orientationStyle.baseSideSize, + borderRadius: sizeStyle.borderRadius, + backgroundColor: viewStyle.background, + ...externalStyle?.root, + }, + }); +}; diff --git a/core/core-components/src/components/Divider/Divider.tsx b/core/core-components/src/components/Divider/Divider.tsx new file mode 100644 index 0000000..9c04862 --- /dev/null +++ b/core/core-components/src/components/Divider/Divider.tsx @@ -0,0 +1,32 @@ +import { useMemo } from 'react'; +import { View } from 'react-native'; + +import { PropsType } from '../../types'; +import { withTheme } from '../ThemeProvider'; + +import { DividerConfig, DividerProps } from './Divider.types'; +import { getStyle } from './Divider.styles'; + +export const dividerCore = (config?: T) => ( + props: DividerProps & PropsType, + externalRef: React.ForwardedRef, +) => { + const { view = '', size = '', orientation = 'horizontal', length = 100, ...rest } = props; + + const viewStyle = config?.variations.view[view]; + const sizeStyle = config?.variations.size[size]; + const orientationStyle = config?.variations.orientation[orientation]; + + const normalizedLength = length ? Math.max(Math.min(length, 100), 0) : 100; + + const style = useMemo(() => getStyle(viewStyle, sizeStyle, orientationStyle, normalizedLength, orientation), [ + view, + size, + orientation, + length, + ]); + + return ; +}; + +export const dividerComponent = withTheme(dividerCore); diff --git a/core/core-components/src/components/Divider/Divider.types.ts b/core/core-components/src/components/Divider/Divider.types.ts new file mode 100644 index 0000000..c3bd913 --- /dev/null +++ b/core/core-components/src/components/Divider/Divider.types.ts @@ -0,0 +1,44 @@ +export type OrientationProp = 'horizontal' | 'vertical'; + +export interface DividerProps { + /** + * Направление разделителя + */ + orientation?: OrientationProp; + /** + * Размер разделителя в процентах + */ + length?: number; + /** + * Вид разделителя + */ + view?: string; + /** + * Размер разделителя + */ + size?: string; +} + +export interface DividerConfig { + defaults: { + view: string; + size: string; + }; + variations: { + view: { + [x: string]: { + background: string; + }; + }; + size: { + [x: string]: { + borderRadius: number; + }; + }; + orientation: { + [x: string]: { + baseSideSize: number; + }; + }; + }; +} diff --git a/core/core-components/src/components/Divider/index.ts b/core/core-components/src/components/Divider/index.ts new file mode 100644 index 0000000..2f4f7a8 --- /dev/null +++ b/core/core-components/src/components/Divider/index.ts @@ -0,0 +1 @@ +export { dividerCore, dividerComponent } from './Divider'; diff --git a/core/core-components/src/index.ts b/core/core-components/src/index.ts index 4a5fb96..f7c026d 100644 --- a/core/core-components/src/index.ts +++ b/core/core-components/src/index.ts @@ -5,6 +5,7 @@ export * from './components/Carousel'; export * from './components/Card'; export * from './components/Cell'; export * from './components/Checkbox'; +export * from './components/Divider'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; diff --git a/docs/Divider.md b/docs/Divider.md new file mode 100644 index 0000000..a79f43c --- /dev/null +++ b/docs/Divider.md @@ -0,0 +1,34 @@ +## Divider + +Компонент используется для визуального разделения других компонент. + +### Свойства и типы + +| Название свойства | Тип | Значение по умолчанию | Описание | +| ----------------- | --------------- | --------------------- | ----------------------------- | +| view | string | - | Вид разделителя | +| size | string | - | Размер разделителя | +| orientation | OrientationProp | 'horizontal' | Направление разделителя | +| length | number | 100 | Длина разделителя в процентах | + +#### Расширенные типы + +Дополнительное описание типов + +```ts +type OrientationProp = 'horizontal' | 'vertical'; +``` + +### Примеры использования + +#### Стандартный пример + +```ts +import { Divider } from '@salutejs/plasma-star-ds-tv'; + +const App = () => { + return ; +}; + +export default App; +``` From d88788f6795e2ff55b5f9ffe27c55a3ad5c2b177 Mon Sep 17 00:00:00 2001 From: Neretin Artem Date: Tue, 19 Aug 2025 14:50:58 +0500 Subject: [PATCH 5/5] feat(plasma-b2c,star-ds): Add `Divider` component --- .../src/components/Divider/Divider.config.ts | 31 +++++++++ .../components/Divider/Divider.stories.tsx | 69 +++++++++++++++++++ .../src/components/Divider/Divider.ts | 5 ++ .../src/components/Divider/index.ts | 1 + libraries/plasma-b2c/src/index.prod.ts | 1 + .../src/components/Divider/Divider.config.ts | 31 +++++++++ .../components/Divider/Divider.stories.tsx | 69 +++++++++++++++++++ .../star-ds/src/components/Divider/Divider.ts | 5 ++ .../star-ds/src/components/Divider/index.ts | 1 + libraries/star-ds/src/index.prod.ts | 1 + 10 files changed, 214 insertions(+) create mode 100644 libraries/plasma-b2c/src/components/Divider/Divider.config.ts create mode 100644 libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx create mode 100644 libraries/plasma-b2c/src/components/Divider/Divider.ts create mode 100644 libraries/plasma-b2c/src/components/Divider/index.ts create mode 100644 libraries/star-ds/src/components/Divider/Divider.config.ts create mode 100644 libraries/star-ds/src/components/Divider/Divider.stories.tsx create mode 100644 libraries/star-ds/src/components/Divider/Divider.ts create mode 100644 libraries/star-ds/src/components/Divider/index.ts diff --git a/libraries/plasma-b2c/src/components/Divider/Divider.config.ts b/libraries/plasma-b2c/src/components/Divider/Divider.config.ts new file mode 100644 index 0000000..99b0eac --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/Divider.config.ts @@ -0,0 +1,31 @@ +import { Theme } from '@salutejs/core-components'; + +import { PlasmaB2CTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'default', + size: 'm', + orientation: 'horizontal', + }, + variations: { + view: { + default: { + background: data.color[mode].surfaceTransparentTertiary, + }, + }, + size: { + m: { + borderRadius: 1, + }, + }, + orientation: { + horizontal: { + baseSideSize: 1, + }, + vertical: { + baseSideSize: 1, + }, + }, + }, +}); diff --git a/libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx b/libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx new file mode 100644 index 0000000..5a6e44f --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/Divider.stories.tsx @@ -0,0 +1,69 @@ +import { View, Text, StyleProp, ViewStyle } from 'react-native'; +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Divider } from './Divider'; + +type StoryDividerProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +|-------------|-------------------------|--------------| +| view | Вид разделителя | 'default' | +| size | Размер разделителя | 'm' | +| orientation | Направление разделителя | 'horizontal' | +| length | Длина разделителя | 100 | +`; + +const meta: Meta = { + title: 'Components/Divider', + component: Divider, + parameters: { + notes, + }, + args: { + view: 'default', + size: 'm', + orientation: 'horizontal', + length: 100, + }, + argTypes: { + size: { + options: ['m'], + control: { + type: 'select', + }, + }, + view: { + options: ['default'], + control: { + type: 'select', + }, + }, + orientation: { + options: ['horizontal', 'vertical'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryDividerProps) => { + const wrapperStyle: StyleProp = + props.orientation === 'vertical' ? { flexDirection: 'row', height: 360 } : {}; + + return ( + + Before + + After + + ); +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/plasma-b2c/src/components/Divider/Divider.ts b/libraries/plasma-b2c/src/components/Divider/Divider.ts new file mode 100644 index 0000000..8d92b73 --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/Divider.ts @@ -0,0 +1,5 @@ +import { dividerComponent } from '@salutejs/core-components'; + +import { getConfig } from './Divider.config'; + +export const Divider = dividerComponent(getConfig); diff --git a/libraries/plasma-b2c/src/components/Divider/index.ts b/libraries/plasma-b2c/src/components/Divider/index.ts new file mode 100644 index 0000000..8ba836a --- /dev/null +++ b/libraries/plasma-b2c/src/components/Divider/index.ts @@ -0,0 +1 @@ +export { Divider } from './Divider'; diff --git a/libraries/plasma-b2c/src/index.prod.ts b/libraries/plasma-b2c/src/index.prod.ts index 1025d73..2474df2 100644 --- a/libraries/plasma-b2c/src/index.prod.ts +++ b/libraries/plasma-b2c/src/index.prod.ts @@ -3,6 +3,7 @@ export * from './components/Carousel'; export * from './components/Card'; export * from './components/Cell'; export * from './components/Checkbox'; +export * from './components/Divider'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton'; diff --git a/libraries/star-ds/src/components/Divider/Divider.config.ts b/libraries/star-ds/src/components/Divider/Divider.config.ts new file mode 100644 index 0000000..e3ef746 --- /dev/null +++ b/libraries/star-ds/src/components/Divider/Divider.config.ts @@ -0,0 +1,31 @@ +import { Theme } from '@salutejs/core-components'; + +import { StylesSaluteTheme } from '../ThemeProvider'; + +export const getConfig = ({ data, mode }: Theme) => ({ + defaults: { + view: 'default', + size: 'm', + orientation: 'horizontal', + }, + variations: { + view: { + default: { + background: data.color[mode].surfaceTransparentTertiary, + }, + }, + size: { + m: { + borderRadius: 1, + }, + }, + orientation: { + horizontal: { + baseSideSize: 1, + }, + vertical: { + baseSideSize: 1, + }, + }, + }, +}); diff --git a/libraries/star-ds/src/components/Divider/Divider.stories.tsx b/libraries/star-ds/src/components/Divider/Divider.stories.tsx new file mode 100644 index 0000000..5a6e44f --- /dev/null +++ b/libraries/star-ds/src/components/Divider/Divider.stories.tsx @@ -0,0 +1,69 @@ +import { View, Text, StyleProp, ViewStyle } from 'react-native'; +import type { ComponentProps } from 'react'; +import type { StoryObj, Meta } from '@storybook/react'; + +import { Divider } from './Divider'; + +type StoryDividerProps = ComponentProps; + +const notes = ` +| **Control** | **Description** | **Default** | +|-------------|-------------------------|--------------| +| view | Вид разделителя | 'default' | +| size | Размер разделителя | 'm' | +| orientation | Направление разделителя | 'horizontal' | +| length | Длина разделителя | 100 | +`; + +const meta: Meta = { + title: 'Components/Divider', + component: Divider, + parameters: { + notes, + }, + args: { + view: 'default', + size: 'm', + orientation: 'horizontal', + length: 100, + }, + argTypes: { + size: { + options: ['m'], + control: { + type: 'select', + }, + }, + view: { + options: ['default'], + control: { + type: 'select', + }, + }, + orientation: { + options: ['horizontal', 'vertical'], + control: { + type: 'select', + }, + }, + }, +}; + +export default meta; + +const StoryDefault = (props: StoryDividerProps) => { + const wrapperStyle: StyleProp = + props.orientation === 'vertical' ? { flexDirection: 'row', height: 360 } : {}; + + return ( + + Before + + After + + ); +}; + +export const Default: StoryObj = { + render: (args) => , +}; diff --git a/libraries/star-ds/src/components/Divider/Divider.ts b/libraries/star-ds/src/components/Divider/Divider.ts new file mode 100644 index 0000000..8d92b73 --- /dev/null +++ b/libraries/star-ds/src/components/Divider/Divider.ts @@ -0,0 +1,5 @@ +import { dividerComponent } from '@salutejs/core-components'; + +import { getConfig } from './Divider.config'; + +export const Divider = dividerComponent(getConfig); diff --git a/libraries/star-ds/src/components/Divider/index.ts b/libraries/star-ds/src/components/Divider/index.ts new file mode 100644 index 0000000..8ba836a --- /dev/null +++ b/libraries/star-ds/src/components/Divider/index.ts @@ -0,0 +1 @@ +export { Divider } from './Divider'; diff --git a/libraries/star-ds/src/index.prod.ts b/libraries/star-ds/src/index.prod.ts index 1025d73..2474df2 100644 --- a/libraries/star-ds/src/index.prod.ts +++ b/libraries/star-ds/src/index.prod.ts @@ -3,6 +3,7 @@ export * from './components/Carousel'; export * from './components/Card'; export * from './components/Cell'; export * from './components/Checkbox'; +export * from './components/Divider'; export * from './components/FocusContainer'; export * from './components/List'; export * from './components/IconButton';