Front page (#31)

* Info page initial commit.

* Frontend > cleanup.

---------

Co-authored-by: Pavel <[email protected]>

code/frontend/.eslintignore

@@ -2,4 +2,6 @@
 
 package-lock.json
 vite.config.ts
-.eslintrc.cjs
+.eslintrc.cjs
+
+*styles.module.scss*

code/frontend/.storybook/main.ts

@@ -2,8 +2,10 @@ import type { StorybookConfig } from '@storybook/react-vite';
 import { mergeConfig } from 'vite';
 import sassDts from 'vite-plugin-sass-dts';
 
+import path from 'path';
+
 const config: StorybookConfig = {
-  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions'],
   framework: {
     name: '@storybook/react-vite',
@@ -13,16 +15,14 @@ const config: StorybookConfig = {
     autodocs: 'tag'
   },
   async viteFinal(config) {
-    // Merge custom configuration into the default config
     return mergeConfig(config, {
-      // Add dependencies to pre-optimization
-      // optimizeDeps: {
-      //   include: ['storybook-dark-mode'],
-      // },
-      plugins: [
-        sassDts()
-      ],
+      resolve: {
+        alias: {
+          '~': path.resolve(__dirname, '../src')
+        }
+      },
+      plugins: [sassDts()]
     });
-  },
+  }
 };
 export default config;

code/frontend/.storybook/preview.ts → code/frontend/.storybook/preview.tsx

@@ -1,4 +1,6 @@
+import { ChakraProvider } from '@chakra-ui/react';
 import type { Preview } from '@storybook/react';
+import React from 'react';
 
 const preview: Preview = {
   parameters: {
@@ -12,7 +14,14 @@ const preview: Preview = {
         date: /Date$/
       }
     }
-  }
+  },
+  decorators: [
+    Story => (
+      <ChakraProvider>
+        <Story />
+      </ChakraProvider>
+    )
+  ]
 };
 
 export default preview;

code/frontend/package.json

@@ -6,18 +6,26 @@
   "scripts": {
     "start": "vite",
     "dev": "vite",
-    "build": "eslint && tsc && vite build",
+    "build": "yarn eslint && yarn check-types && vite build",
     "preview": "vite preview",
     "eslint": "eslint --ext .js,.jsx,.ts,.tsx ./src",
-    "prettier-fix": "prettier --write **/*.ts(x)",
+    "prettier-fix": "prettier --write **/*.tsx **/*.ts",
     "check-types": "tsc -p tsconfig.json",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@chakra-ui/icons": "^2.0.17",
+    "@chakra-ui/react": "^2.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
     "classnames": "^2.3.2",
+    "framer-motion": "^10.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-icons": "^4.8.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "7.0.0-rc.1",

code/frontend/src/App.tsx

@@ -1,3 +1,12 @@
+import { ChakraProvider } from '@chakra-ui/react';
+import { PhoneIphone } from '@mui/icons-material';
+
+import { LearningBlock } from './Info';
+
 export function App() {
-  return <div></div>;
+  return (
+    <ChakraProvider>
+      <LearningBlock icon={PhoneIphone} text="" title="" />
+    </ChakraProvider>
+  );
 }

code/frontend/src/Info/components/Footer/Footer.tsx

@@ -0,0 +1,21 @@
+import { Button, Stack, Text } from '@chakra-ui/react';
+
+import { useLocale } from '~/locale';
+
+export const Footer: React.FC = () => {
+  const { root, buttons } = useLocale();
+
+  return (
+    <Stack spacing={'24px'} alignItems={'center'}>
+      <Text fontSize={35} fontWeight={'bold'}>
+        {root.footer.title}
+      </Text>
+
+      <Text fontSize={21}>{root.footer.text}</Text>
+
+      <Button colorScheme={'messenger'} width={150}>
+        {buttons.gitHub}
+      </Button>
+    </Stack>
+  );
+};

code/frontend/src/Info/components/Footer/index.ts

@@ -0,0 +1 @@
+export * from './Footer';

code/frontend/src/Info/components/Introduction/Introduction.tsx

@@ -0,0 +1,68 @@
+import { Button, Flex, HStack, Image, Stack, Text } from '@chakra-ui/react';
+
+import Logo from '~/assets/logo.png';
+import { useLocale } from '~/locale';
+
+export const Introduction: React.FC = () => {
+  return (
+    <HStack spacing={'80px'}>
+      <Stack maxWidth={{ sm: '100%', md: 550 }} spacing={'24px'}>
+        <Title />
+
+        <Description />
+
+        <Links />
+      </Stack>
+
+      <Image display={{ sm: 'none', md: 'unset' }} src={Logo} />
+    </HStack>
+  );
+};
+
+const Title: React.FC = () => {
+  const { root } = useLocale();
+
+  return (
+    <Flex alignItems={'flex-start'}>
+      <Text fontSize={56} fontWeight={'bold'}>
+        {root.header.title}
+      </Text>
+
+      <Text fontSize={'sm'} fontWeight={'bold'}>
+        {root.header.tm}
+      </Text>
+    </Flex>
+  );
+};
+
+const Description: React.FC = () => {
+  const { root } = useLocale();
+
+  return (
+    <>
+      {root.header.description.map((paragrath, index) => {
+        return (
+          <Text key={`paragraph-${index}`} fontSize={24}>
+            {paragrath}
+          </Text>
+        );
+      })}
+    </>
+  );
+};
+
+const Links: React.FC = () => {
+  const { buttons } = useLocale();
+
+  return (
+    <HStack width={'100%'} spacing={'40px'} justifyContent={'center'}>
+      <Button width={131} colorScheme={'messenger'} variant={'solid'}>
+        {buttons.signUp}
+      </Button>
+
+      <Button width={131} colorScheme={'messenger'} variant={'outline'}>
+        {buttons.hostAWS}
+      </Button>
+    </HStack>
+  );
+};

code/frontend/src/Info/components/Introduction/index.ts

@@ -0,0 +1 @@
+export * from './Introduction';

code/frontend/src/Info/components/LearningBlock/LearningBlock.tsx

@@ -0,0 +1,20 @@
+import { Stack, Text } from '@chakra-ui/react';
+import React from 'react';
+
+import { LearningBlockProps } from './LearningBlock.types';
+
+export const LearningBlock: React.FC<LearningBlockProps> = props => {
+  const { icon: Icon, text, title } = props;
+
+  return (
+    <Stack maxWidth={300} spacing={'8px'}>
+      <Icon />
+
+      <Text fontSize={'lg'} fontWeight={'bold'}>
+        {title}
+      </Text>
+
+      <Text fontSize={'lg'}>{text}</Text>
+    </Stack>
+  );
+};

code/frontend/src/Info/components/LearningBlock/LearningBlock.types.ts

@@ -0,0 +1,9 @@
+import { SvgIcon } from '@mui/material';
+
+export type LearningBlockProps = LearningOption;
+
+export interface LearningOption {
+  icon: typeof SvgIcon;
+  title: string;
+  text: string;
+}

code/frontend/src/Info/components/LearningBlock/index.ts

@@ -0,0 +1,2 @@
+export * from './LearningBlock';
+export * from './LearningBlock.types';

code/frontend/src/Info/components/SetupGuide/SetupGuide.styles.module.scss

@@ -0,0 +1,12 @@
+.setupGuide {
+    > *:not(:last-child) {
+        margin-right: 20px;
+    }
+
+    @media only screen and (max-width: 48em) {
+        > *:not(:last-child) {
+            margin-right: 0px;
+            margin-bottom: 20px;
+        }
+    }
+}

code/frontend/src/Info/components/SetupGuide/SetupGuide.tsx

@@ -0,0 +1,32 @@
+import { Flex } from '@chakra-ui/react';
+import { DoneAll, GetAppOutlined, LoginOutlined, SettingsOutlined } from '@mui/icons-material';
+
+import { LearningBlock } from '../LearningBlock';
+
+import { useLocale } from '~/locale';
+
+import classes from './SetupGuide.styles.module.scss';
+
+export const SetupGuide: React.FC = () => {
+  const { root } = useLocale();
+
+  return (
+    <Flex
+      className={classes.setupGuide}
+      direction={{ sm: 'column', md: 'row' }}
+      alignItems={'top'}
+      justifyContent={'space-between'}
+    >
+      {root.setupGuide.steps.map(({ name, ...step }) => {
+        return <LearningBlock key={name} icon={iconsMap[name as keyof typeof iconsMap]} {...step} />;
+      })}
+    </Flex>
+  );
+};
+
+const iconsMap = {
+  signUp: LoginOutlined,
+  installLesspass: GetAppOutlined,
+  configureLesspass: SettingsOutlined,
+  youAreAllSet: DoneAll
+};

code/frontend/src/Info/components/SetupGuide/index.ts

@@ -0,0 +1 @@
+export * from './SetupGuide';

code/frontend/src/Info/components/index.ts

@@ -0,0 +1,4 @@
+export * from './Footer';
+export * from './Introduction';
+export * from './LearningBlock';
+export * from './SetupGuide';

code/frontend/src/Info/index.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './pages';

code/frontend/src/Info/pages/InfoPage/InfoPage.styles.module.scss

@@ -0,0 +1,8 @@
+.infopage {
+    min-height: 100vh;
+
+    box-sizing: border-box;
+
+    background-color: white;
+    padding: 24px 60px;
+}

code/frontend/src/Info/pages/InfoPage/InfoPage.tsx

@@ -0,0 +1,19 @@
+import { Stack } from '@chakra-ui/react';
+
+import { Introduction, Footer, SetupGuide } from '~/Info/components';
+
+import classes from './InfoPage.styles.module.scss';
+
+export const InfoPage: React.FC = () => {
+  return (
+    <div className={classes.infopage}>
+      <Stack spacing={'80px'} alignItems={'center'}>
+        <Introduction />
+
+        <SetupGuide />
+
+        <Footer />
+      </Stack>
+    </div>
+  );
+};

code/frontend/src/Info/pages/InfoPage/index.ts

@@ -0,0 +1 @@
+export * from './InfoPage';

code/frontend/src/Info/pages/index.ts

@@ -0,0 +1 @@
+export * from './InfoPage';

code/frontend/src/Info/stories/components/Footer.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react';
+
+import { Footer } from '~/Info';
+
+export default {
+  title: 'Info/Footer',
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta;
+
+export const Default: Story = args => {
+  return <Footer {...args} />;
+};
+
+Default.storyName = 'Footer';

code/frontend/src/Info/stories/components/Introduction.stories.tsx

@@ -0,0 +1,16 @@
+import { Meta, Story } from '@storybook/react';
+
+import { Introduction } from '~/Info';
+
+export default {
+  title: 'Info/Introduction',
+  parameters: {
+    layout: 'centered'
+  }
+} as Meta;
+
+export const Default: Story = args => {
+  return <Introduction {...args} />;
+};
+
+Default.storyName = 'Introduction';

code/frontend/src/Info/stories/components/LearningBlock.stories.tsx

@@ -0,0 +1,21 @@
+import { PhoneIphone } from '@mui/icons-material';
+import type { Meta, StoryFn } from '@storybook/react';
+
+import { LearningBlock, LearningBlockProps } from '~/Info';
+
+export default {
+  title: 'Info/LearningBlock'
+} as Meta;
+
+type Args = LearningBlockProps;
+
+export const Default: StoryFn<Args> = args => {
+  return <LearningBlock {...args} />;
+};
+
+Default.args = {
+  icon: PhoneIphone,
+  title: 'Configure LessPass',
+  text: 'Configure LessPass to use https://api.lesspass.staticsoft.org \n and sign in using your new account'
+};
+Default.storyName = 'LearningBlock';