feat: add storybook for profile and __PROJECT__ global const

.eslintrc.js

@@ -53,6 +53,7 @@ module.exports = {
     globals: {
         __IS_DEV__: true,
         __API__: true,
+        __PROJECT__: true,
     },
     overrides: [
         {

config/build/buildPlugins.ts

@@ -4,7 +4,9 @@ import MiniCssExtractPlugin from 'mini-css-extract-plugin';
 import { BundleAnalyzerPlugin } from 'webpack-bundle-analyzer';
 import { BuildOptions } from './types/config';
 
-export function buildPlugins({ paths, isDev, apiUrl }: BuildOptions): webpack.WebpackPluginInstance[] {
+export function buildPlugins({
+    paths, isDev, apiUrl, project,
+}: BuildOptions): webpack.WebpackPluginInstance[] {
     const plugins = [
         new HtmlWebpackPlugin({
             template: paths.html,
@@ -17,6 +19,7 @@ export function buildPlugins({ paths, isDev, apiUrl }: BuildOptions): webpack.We
         new webpack.DefinePlugin({
             __IS_DEV__: JSON.stringify(isDev),
             __API__: JSON.stringify(apiUrl),
+            __PROJECT__: JSON.stringify(project),
         }),
     ];
 

config/build/types/config.ts

@@ -19,4 +19,5 @@ export interface BuildOptions {
     isDev: boolean;
     port: number;
 		apiUrl: string;
+		project: 'storybook' | 'frontend' | 'jest';
 }

config/jest/jest.config.ts

@@ -9,6 +9,7 @@ export default {
     globals: {
         __IS_DEV__: true,
         __API__: '',
+        __PROJECT__: 'jest',
     },
     clearMocks: true,
     testEnvironment: 'jsdom',

config/storybook/webpack.config.ts

@@ -32,6 +32,7 @@ export default ({ config }: { config: webpack.Configuration }) => {
       new DefinePlugin({
           __IS_DEV__: JSON.stringify(true),
           __API__: JSON.stringify(''),
+          __PROJECT__: JSON.stringify('storybook'),
       }),
   );
 

src/app/types/global.d.ts

@@ -18,6 +18,7 @@ declare module '*.svg' {
 
 declare const __IS_DEV__: boolean;
 declare const __API__: string;
+declare const __PROJECT__: 'storybook' | 'frontend' | 'jest';
 
 type DeepPartial<T> = T extends object ? {
 	[P in keyof T]?: DeepPartial<T[P]>;

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

@@ -0,0 +1,38 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { Country } from '../../../Country';
+import { Currency } from '../../../Currency';
+import { ProfileCard } from './ProfileCard';
+
+export default {
+    title: 'entities/ProfileCard',
+    component: ProfileCard,
+    argTypes: {
+        backgroundColor: { control: 'color' },
+    },
+} as ComponentMeta<typeof ProfileCard>;
+
+const Template: ComponentStory<typeof ProfileCard> = (args) => <ProfileCard {...args} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+    data: {
+        username: 'test',
+        first: 'test firstname',
+        lastname: 'test lastname',
+        age: 20,
+        country: Country.Armenia,
+        currency: Currency.EUR,
+        avatar: 'https://pic.rutubelist.ru/user/3b/27/3b2758ad5492a76b578f7ee072e4e894.jpg',
+        city: 'yaroslavl',
+    },
+};
+export const withError = Template.bind({});
+withError.args = {
+    error: 'true',
+
+};
+
+export const isLoading = Template.bind({});
+isLoading.args = {
+    isLoading: true,
+};

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

@@ -4,7 +4,6 @@ import { Text, TextAlign, TextTheme } from 'shared/ui/Text/Text';
 import { Input } from 'shared/ui/Input/Input';
 import { Loader } from 'shared/ui/Loader/Loader';
 import { Avatar } from 'shared/ui/Avatar/Avatar';
-import { Select } from 'shared/ui/Select/Select';
 import { Country, CountrySelect } from '../../../Country';
 import { Currency, CurrencySelect } from '../../../Currency';
 import { Profile } from '../../model/types/profile';
@@ -15,15 +14,15 @@ interface ProfileCardProps {
   data?: Profile;
   isLoading?: boolean;
   error?: string;
-	readonly?: boolean;
-	onChangeFirstName?: (value?: string) => void
-	onChangeLastName?: (value?: string) => void
-	onChangeAge?: (value?: string) => void
-	onChangeCity?: (value?: string) => void
-	onChangeAvatar?: (value?: string) => void
-	onChangeUsername?: (value?: string) => void
-	onChangeCurrency?: (currency: Currency) => void
-	onChangeCountry?: (country: Country) => void
+  readonly?: boolean;
+  onChangeFirstName?: (value?: string) => void;
+  onChangeLastName?: (value?: string) => void;
+  onChangeAge?: (value?: string) => void;
+  onChangeCity?: (value?: string) => void;
+  onChangeAvatar?: (value?: string) => void;
+  onChangeUsername?: (value?: string) => void;
+  onChangeCurrency?: (currency: Currency) => void;
+  onChangeCountry?: (country: Country) => void;
 }
 
 export const ProfileCard = (props: ProfileCardProps) => {

src/pages/ProfilePage/ui/ProfilePage.stories.tsx

@@ -4,6 +4,8 @@ import { ThemeDecorator } from 'shared/config/storybook/ThemeDecorator/ThemeDeco
 import { Theme } from 'app/providers/ThemeProvider';
 import ProfilePage from 'pages/ProfilePage/ui/ProfilePage';
 import { StoreDecorator } from 'shared/config/storybook/StoreDecorator/StoreDecorator';
+import { Country } from '../../../entities/Country';
+import { Currency } from '../../../entities/Currency';
 
 export default {
     title: 'pages/ProfilePage',
@@ -17,8 +19,34 @@ const Template: ComponentStory<typeof ProfilePage> = (args) => <ProfilePage {...
 
 export const Normal = Template.bind({});
 Normal.args = {};
-Normal.decorators = [StoreDecorator({})];
+Normal.decorators = [StoreDecorator({
+    profile: {
+        form: {
+            username: 'test',
+            first: 'test firstname',
+            lastname: 'test lastname',
+            age: 20,
+            country: Country.Armenia,
+            currency: Currency.EUR,
+            avatar: 'https://pic.rutubelist.ru/user/3b/27/3b2758ad5492a76b578f7ee072e4e894.jpg',
+            city: 'yaroslavl',
+        },
+    },
+})];
 
 export const Dark = Template.bind({});
 Dark.args = {};
-Dark.decorators = [ThemeDecorator(Theme.DARK), StoreDecorator({})];
+Dark.decorators = [ThemeDecorator(Theme.DARK), StoreDecorator({
+    profile: {
+        form: {
+            username: 'test',
+            first: 'test firstname',
+            lastname: 'test lastname',
+            age: 20,
+            country: Country.Armenia,
+            currency: Currency.EUR,
+            avatar: 'https://pic.rutubelist.ru/user/3b/27/3b2758ad5492a76b578f7ee072e4e894.jpg',
+            city: 'yaroslavl',
+        },
+    },
+})];

src/pages/ProfilePage/ui/ProfilePage.tsx

@@ -52,7 +52,9 @@ const ProfilePage = memo(({ className }: ProfilePageProps) => {
     };
 
     useEffect(() => {
-        dispatch(fetchProfileData());
+        if (__PROJECT__ !== 'storybook') {
+            dispatch(fetchProfileData());
+        }
     }, [dispatch]);
 
     const onChangeFirstName = useCallback(

webpack.config.ts

@@ -23,6 +23,7 @@ export default (env: BuildEnv) => {
         isDev,
         port: PORT,
         apiUrl,
+        project: 'frontend',
     });
 
     return config;