feat: add stories for some redesigned components

config/storybook/preview.ts

@@ -5,6 +5,7 @@ import { RouterDecorator } from '../../src/shared/config/storybook/RouterDecorat
 import { SuspenseDecorator } from '../../src/shared/config/storybook/SuspenseDecorator/SuspenseDecorator';
 import { Theme } from '../../src/shared/const/theme';
 import { StoreDecorator } from '../../src/shared/config/storybook/StoreDecorator/StoreDecorator';
+import { FeaturesFlagsDecorator } from '../../src/shared/config/storybook/FeaturesFlagsDecorator/FeaturesFlagsDecorator';
 import { ThemeDecorator } from '../../src/shared/config/storybook/ThemeDecorator/ThemeDecorator';
 
 export const parameters = {
@@ -35,3 +36,4 @@ addDecorator(
 );
 addDecorator(RouterDecorator);
 addDecorator(SuspenseDecorator);
+addDecorator(FeaturesFlagsDecorator({}));

src/entities/Comment/ui/CommentItem/CommentItem.stories.tsx

@@ -1,5 +1,7 @@
 import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
+import { FeaturesFlagsDecorator } from '@/shared/config/storybook/FeaturesFlagsDecorator/FeaturesFlagsDecorator';
+
 import { CommentItem } from './CommentItem';
 
 export default {
@@ -12,21 +14,30 @@ export default {
 
 const Template: ComponentStory<typeof CommentItem> = (args) => <CommentItem {...args} />;
 
-export const Normal = Template.bind({});
-Normal.args = {
+const normalArgs = {
   comment: {
     id: '1',
     text: 'hello world',
     user: { id: '1', username: 'Don' },
   },
 };
 
+export const Normal = Template.bind({});
+Normal.args = normalArgs;
+
 export const Loading = Template.bind({});
 Loading.args = {
-  comment: {
-    id: '1',
-    text: 'hello world',
-    user: { id: '1', username: 'Don' },
-  },
+  ...normalArgs,
+  isLoading: true,
+};
+
+export const NormalRedesigned = Template.bind({});
+NormalRedesigned.args = normalArgs;
+NormalRedesigned.decorators = [FeaturesFlagsDecorator({ isAppRedesigned: true })];
+
+export const LoadingRedesigned = Template.bind({});
+LoadingRedesigned.args = {
+  ...normalArgs,
   isLoading: true,
 };
+LoadingRedesigned.decorators = [FeaturesFlagsDecorator({ isAppRedesigned: true })];

src/entities/Profile/ui/ProfileCard/ProfileCard.stories.tsx

@@ -2,6 +2,10 @@ import type { ComponentMeta, ComponentStory } from '@storybook/react';
 
 import { Country } from '@/entities/Country/testing';
 import { Currency } from '@/entities/Currency/testing';
+import { FeaturesFlagsDecorator } from '@/shared/config/storybook/FeaturesFlagsDecorator/FeaturesFlagsDecorator';
+import { NewDesignDecorator } from '@/shared/config/storybook/NewDesignDecorator/NewDesignDecorator';
+import { ThemeDecorator } from '@/shared/config/storybook/ThemeDecorator/ThemeDecorator';
+import { Theme } from '@/shared/const/theme';
 
 import { ProfileCard } from './ProfileCard';
 
@@ -15,8 +19,7 @@ export default {
 
 const Template: ComponentStory<typeof ProfileCard> = (args) => <ProfileCard {...args} />;
 
-export const Primary = Template.bind({});
-Primary.args = {
+const profileArgs = {
   data: {
     username: 'admin',
     age: 22,
@@ -29,6 +32,9 @@ Primary.args = {
   },
 };
 
+export const Primary = Template.bind({});
+Primary.args = profileArgs;
+
 export const WithError = Template.bind({});
 WithError.args = {
   error: 'true',
@@ -38,3 +44,19 @@ export const Loading = Template.bind({});
 Loading.args = {
   isLoading: true,
 };
+
+export const PrimaryRedesigned = Template.bind({});
+PrimaryRedesigned.args = profileArgs;
+PrimaryRedesigned.decorators = [NewDesignDecorator, ThemeDecorator(Theme.DARK)];
+
+export const WithErrorRedesigned = Template.bind({});
+WithErrorRedesigned.args = {
+  error: 'true',
+};
+WithErrorRedesigned.decorators = [FeaturesFlagsDecorator({ isAppRedesigned: true })];
+
+export const LoadingRedesigned = Template.bind({});
+LoadingRedesigned.args = {
+  isLoading: true,
+};
+LoadingRedesigned.decorators = [FeaturesFlagsDecorator({ isAppRedesigned: true })];

src/shared/config/storybook/FeaturesFlagsDecorator/FeaturesFlagsDecorator.tsx

@@ -0,0 +1,10 @@
+import { Story } from '@storybook/react';
+
+import { FeatureFlags } from '@/shared/types/featureFlags';
+import { setFeatureFlags } from '@/shared/lib/features';
+
+export const FeaturesFlagsDecorator = (features: FeatureFlags) => (StoryComponent: Story) => {
+  setFeatureFlags(features);
+
+  return <StoryComponent />;
+};

src/shared/config/storybook/NewDesignDecorator/NewDesignDecorator.tsx

@@ -0,0 +1,15 @@
+import { Story } from '@storybook/react';
+
+import { setFeatureFlags } from '@/shared/lib/features';
+import { getAllFeatureFlags } from '@/shared/lib/features/lib/setGetFeatures';
+
+export const NewDesignDecorator = (StoryComponent: Story) => {
+  setFeatureFlags({ ...getAllFeatureFlags(), isAppRedesigned: true });
+  document.body.className += ' redesigned';
+
+  return (
+    <div className="app_redesigned">
+      <StoryComponent />
+    </div>
+  );
+};