feat(plasma-b2c,star-ds): Add icons using to stories

salute-developers · Nov 15, 2024 · ed21bcf · ed21bcf
1 parent 07b745e
commit ed21bcf
Show file tree

Hide file tree

Showing 16 changed files with 88 additions and 286 deletions.
diff --git a/libraries/plasma-b2c/platforms/mobile/package.json b/libraries/plasma-b2c/platforms/mobile/package.json
@@ -50,6 +50,7 @@
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
     "@react-native-tvos/config-tv": "^0.0.10",
+    "@salutejs/plasma-icons-native": "0.1.0",
     "@storybook/addon-ondevice-actions": "^7.6.16",
     "@storybook/addon-ondevice-controls": "^7.6.16",
     "@storybook/addon-ondevice-notes": "^7.6.19",

diff --git a/libraries/plasma-b2c/platforms/tv/package.json b/libraries/plasma-b2c/platforms/tv/package.json
@@ -56,6 +56,7 @@
     "@react-native-community/datetimepicker": "8.0.1",
     "@react-native-community/slider": "4.5.2",
     "@react-native-tvos/config-tv": "^0.0.10",
+    "@salutejs/plasma-icons-native": "0.1.0",
     "@storybook/addon-ondevice-actions": "^7.6.16",
     "@storybook/addon-ondevice-controls": "^7.6.16",
     "@storybook/addon-ondevice-notes": "^7.6.19",

diff --git a/libraries/plasma-b2c/src/components/Button/Button.stories.tsx b/libraries/plasma-b2c/src/components/Button/Button.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Text } from 'react-native';
+import { IconPlasma } from '@salutejs/plasma-icons-native';
 
 import { Button } from './Button';
 
@@ -110,8 +110,8 @@ const StoryDefault = (props: StoryButtonProps) => {
         <Button
             {...props}
             onPress={onPress}
-            contentLeft={props.showLeftContent && <Text style={{ color: 'red' }}>Left Content</Text>}
-            contentRight={props.showRightContent && <Text style={{ color: 'green' }}>Right Content</Text>}
+            contentLeft={props.showLeftContent && <IconPlasma />}
+            contentRight={props.showRightContent && <IconPlasma />}
         />
     );
 };

diff --git a/libraries/plasma-b2c/src/components/Cell/Cell.stories.tsx b/libraries/plasma-b2c/src/components/Cell/Cell.stories.tsx
@@ -1,7 +1,7 @@
 import { View, Text } from 'react-native';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Path, Svg } from 'react-native-svg';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Checkbox } from '../Checkbox';
 import { Radiobox } from '../Radiobox';
@@ -79,38 +79,18 @@ const meta: Meta<CellProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const StoryDefault = (props: StoryCellProps) => {
     return (
         <View style={{ gap: 20 }}>
-            <Cell contentLeft={<ContentLeft />} contentRight={<PlasmaIcon />} {...props} />
-            <Cell contentLeft={<ContentLeft />} {...props} />
-            <Cell hasDisclosure contentLeft={<ContentLeft />} {...props} />
-            <Cell disclosureText="Disclosure" hasDisclosure contentLeft={<ContentLeft />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Checkbox checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Radiobox checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Switch checked />} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<Text>Plain text</Text>} {...props} />
-            <Cell contentLeft={<ContentLeft />} contentRight={<BodyM>BodyM</BodyM>} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<IconPlasma />} {...props} />
+            <Cell contentLeft={<IconShazam />} {...props} />
+            <Cell hasDisclosure contentLeft={<IconShazam />} {...props} />
+            <Cell disclosureText="Disclosure" hasDisclosure contentLeft={<IconShazam />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Checkbox checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Radiobox checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Switch checked />} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<Text>Plain text</Text>} {...props} />
+            <Cell contentLeft={<IconShazam />} contentRight={<BodyM>BodyM</BodyM>} {...props} />
         </View>
     );
 };

diff --git a/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx b/libraries/plasma-b2c/src/components/Focusable/Focusable.stories.tsx
@@ -1,7 +1,7 @@
 import { View, Text } from 'react-native';
 import React, { useState } from 'react';
-import { Path, Svg } from 'react-native-svg';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Button } from '../Button';
 import { Checkbox } from '../Checkbox';
@@ -17,28 +17,6 @@ import { List } from '../List';
 import { IconButton } from '../IconButton';
 import { FocusContainer } from '../FocusContainer';
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-// TODO: перенести для примеров в другое место
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const meta: Meta = {
     title: 'Components/Focusable',
 };
@@ -88,9 +66,9 @@ const StoryDefault = () => {
                     );
                 }}
             </FocusContainer>
-            <Button text="Button 2" contentLeft={<PlasmaIcon />} />
+            <Button text="Button 2" contentLeft={<IconPlasma />} />
             <IconButton>
-                <PlasmaIcon />
+                <IconPlasma />
             </IconButton>
             <Progress value={50} />
             <List
@@ -137,58 +115,58 @@ const StoryDefault = () => {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         hasDisclosure: true,
                     },
                     {
                         exampleWithDisclosure: true,
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         disclosureText: 'Disclosure',
                         hasDisclosure: true,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Checkbox checked />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Radiobox />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Switch checked />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
-                        contentRight: <PlasmaIcon />,
+                        contentLeft: <IconShazam />,
+                        contentRight: <IconPlasma />,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <BodyL>Hello</BodyL>,
                     },
                     {
                         label: 'Label',
                         title: 'Title',
                         subtitle: 'Subtitle',
-                        contentLeft: <ContentLeft />,
+                        contentLeft: <IconShazam />,
                         contentRight: <Text>Plain text</Text>,
                     },
                 ]}
@@ -198,13 +176,13 @@ const StoryDefault = () => {
             <BodyL>Hello</BodyL>
             <TextField
                 label="Label"
-                contentLeft={<PlasmaIcon />}
+                contentLeft={<IconPlasma />}
                 captionLeft="Caption"
                 labelPlacement="inner"
                 value="Textfield value"
             />
             <BodyL>Example BodyL</BodyL>
-            <TextField label="Label" contentLeft={<PlasmaIcon />} captionLeft="Caption" value="Textfield value" />
+            <TextField label="Label" contentLeft={<IconPlasma />} captionLeft="Caption" value="Textfield value" />
             <Button text="Button 2" value="Value" spacing="space-between" stretching="filled" />
         </View>
     );

diff --git a/libraries/plasma-b2c/src/components/IconButton/IconButton.stories.tsx b/libraries/plasma-b2c/src/components/IconButton/IconButton.stories.tsx
@@ -1,6 +1,6 @@
 import type { ComponentProps } from 'react';
-import Svg, { Path } from 'react-native-svg';
 import type { StoryObj, Meta } from '@storybook/react';
+import { IconPlasma } from '@salutejs/plasma-icons-native';
 
 import { IconButton } from './IconButton';
 
@@ -62,31 +62,14 @@ const meta: Meta<StoryButtonProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
 const StoryDefault = (props: StoryButtonProps) => {
     const onPress = () => {
         alert('Произошёл onPress');
     };
 
     return (
         <IconButton {...props} onPress={onPress}>
-            <PlasmaIcon />
+            <IconPlasma />
         </IconButton>
     );
 };

diff --git a/libraries/plasma-b2c/src/components/List/List.stories.tsx b/libraries/plasma-b2c/src/components/List/List.stories.tsx
@@ -2,7 +2,7 @@ import { View, Text } from 'react-native';
 import { useState } from 'react';
 import type { ComponentProps } from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
-import { Path, Svg } from 'react-native-svg';
+import { IconPlasma, IconShazam } from '@salutejs/plasma-icons-native';
 
 import { Checkbox } from '../Checkbox';
 import { Radiobox } from '../Radiobox';
@@ -50,36 +50,14 @@ const meta: Meta<ListProps> = {
 
 export default meta;
 
-interface IconSvgProps {
-    size?: number;
-    color?: string;
-}
-
-// TODO: перенести для примеров в другое место
-const PlasmaIcon: React.FC<IconSvgProps> = ({ size = 24, color }) => (
-    <Svg viewBox="0 0 24 24" fill="none" width={size} height={size} color={color}>
-        <Path
-            fillRule="evenodd"
-            clipRule="evenodd"
-            d="M12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 14.0957 4.25846 16.0143 5.51587 17.4963C5.23619 16.745 5.08333 15.932 5.08333 15.0833C5.08333 11.2634 8.18003 8.16667 12 8.16667C15.82 8.16667 18.9167 11.2634 18.9167 15.0833C18.9167 15.932 18.7638 16.745 18.4841 17.4963C19.7415 16.0143 20.5 14.0957 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5ZM15.7427 18.999C16.7742 18.0128 17.4167 16.6231 17.4167 15.0833C17.4167 12.0918 14.9915 9.66667 12 9.66667C9.00846 9.66667 6.58333 12.0918 6.58333 15.0833C6.58333 16.6231 7.2258 18.0128 8.25728 18.999C8.19795 18.731 8.16667 18.4525 8.16667 18.1667C8.16667 16.0496 9.88291 14.3333 12 14.3333C14.1171 14.3333 15.8333 16.0496 15.8333 18.1667C15.8333 18.4525 15.802 18.731 15.7427 18.999ZM12 20.5C13.2887 20.5 14.3333 19.4553 14.3333 18.1667C14.3333 16.878 13.2887 15.8333 12 15.8333C10.7113 15.8333 9.66667 16.878 9.66667 18.1667C9.66667 19.4553 10.7113 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"
-            fill="currentColor"
-        />
-    </Svg>
-);
-
-// TODO: перенести для примеров в другое место
-const ContentLeft = () => (
-    <View style={{ backgroundColor: 'red', opacity: 0.25, width: 22, height: 22, borderRadius: 50 }} />
-);
-
 const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<string, boolean>) => [
     {
         exampleWithDisclosure: true,
         test: 'test',
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         onItemPress: () => {
             alert('Press on item');
         },
@@ -90,17 +68,7 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: (
-            <View
-                style={{
-                    backgroundColor: 'red',
-                    opacity: 0.25,
-                    width: 22,
-                    height: 22,
-                    borderRadius: 50,
-                }}
-            />
-        ),
+        contentLeft: <IconShazam />,
         onItemPress: () => {
             alert('Press on item');
         },
@@ -111,45 +79,45 @@ const items = ({ switchChecked, checkboxChecked, radioboxChecked }: Record<strin
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'checkboxChecked',
         contentRight: <Checkbox checked={checkboxChecked} />,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'radioboxChecked',
         contentRight: <Radiobox checked={radioboxChecked} />,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         name: 'switchChecked',
         contentRight: <Switch checked={switchChecked} />,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
-        contentRight: <PlasmaIcon />,
+        contentLeft: <IconShazam />,
+        contentRight: <IconPlasma />,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         contentRight: <BodyL>Hello</BodyL>,
     },
     {
         label: 'Label',
         title: 'Title',
         subtitle: 'Subtitle',
-        contentLeft: <ContentLeft />,
+        contentLeft: <IconShazam />,
         contentRight: <Text>Plain text</Text>,
     },
 ];