alligment fixed by using only 8 last articles from specified list. Its looking quite well on all devices

system/apps/blog/components/main-layout/recommended-articles.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import { spacing, tokens, wrap } from '@system/figa-ui';
 import { Link } from '../link';
@@ -9,51 +9,57 @@ import { get } from '@system/blog-selectors';
 
 const Container = styled.div`
   ${wrap()}
+`;
 
-  a {
-    margin: 0 ${tokens.spacing[150]} ${tokens.spacing[150]} 0;
-    border-radius: ${tokens.radius[50]};
-
-    &:hover {
-      outline: ${tokens.spacing[25]} solid
-        ${(props) => props.theme.outline.color};
-      outline-offset: ${tokens.spacing[25]};
-    }
+const Placeholder = styled.div`
+  width: ${spacing.parse(850)}px;
+  height: ${spacing.parse(600)}px;
+  background: ${tokens.gray[200]};
+  margin: 0 ${tokens.spacing[150]} ${tokens.spacing[150]} 0;
+  border-radius: ${tokens.radius[50]};
 
-    img {
-      border-radius: ${tokens.radius[50]};
-    }
+  &:hover {
+    outline: ${tokens.spacing[25]} solid ${(props) => props.theme.outline.color};
+    outline-offset: ${tokens.spacing[25]};
   }
 `;
 
 const RecommendedArticles = () => {
   const lang = useLang();
-
   const { key, articles, load } = useRecommendedArticlesStore();
+  const [articlesLoaded, setArticlesLoaded] = useState(false);
 
   useEffect(() => {
     if (key === 'idle') load();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key]);
 
-  if (key === 'ok') {
-    return (
-      <Container data-i={get('app-footer-recommended-articles-list')}>
-        {articles.map((article) => (
-          <Link key={article.id} href={`/${lang}/articles/${article.title}`}>
-            <Image
-              alt={article.title}
-              src={article.thumbnailUrl}
-              width={spacing.parse(850)}
-              height={spacing.parse(600)}
-            />
-          </Link>
-        ))}
-      </Container>
-    );
-  }
+  useEffect(() => {
+    if (key === 'ok') {
+      // Artykuły zostały załadowane, więc ustawiamy flagę na true
+      setArticlesLoaded(true);
+    }
+  }, [key]);
 
-  return null;
+  return (
+    <Container data-i={get('app-footer-recommended-articles-list')}>
+      {articlesLoaded
+        ? articles.slice(0, 8).map((article) => (
+            <Link key={article.id} href={`/${lang}/articles/${article.title}`}>
+              <Image
+                alt={article.title}
+                src={article.thumbnailUrl}
+                width={spacing.parse(850)}
+                height={spacing.parse(600)}
+              />
+            </Link>
+          ))
+        : // Renderujemy 8 szarych zastępów (placeholders)
+          new Array<undefined>(8)
+            .fill(undefined)
+            .map((_, index) => <Placeholder key={index} />)}
+    </Container>
+  );
 };
 
 export { RecommendedArticles };

system/apps/blog/views/article/article.view.tsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { MDXRemote } from 'next-mdx-remote';
 import { ArticleScreen, Link, MainLayout, PageWrapper } from '../../components';
 import type { ArticleViewProps } from './defs';
@@ -6,6 +7,7 @@ import { ArticleThumbnail } from '../../components/article-thumbnail';
 import { ArticleMeta } from '../../components/article-meta';
 import { Box, Button, EditIcon, Font } from '@system/figa-ui';
 import { ArticleDetails } from '../../components/article-details';
+import { article_actions } from '../../store/article';
 import { auth_selectors } from '../../store/auth';
 import { useLang } from '../../dk';
 
@@ -21,6 +23,10 @@ const ArticleView = ({
   const lang = useLang();
   const isAuthor = auth_selectors.useIsAuthor(authorName);
 
+  useEffect(() => {
+    return () => article_actions.reset();
+  }, []);
+
   return (
     <MainLayout>
       <Box spacing={[150]}>

system/build-storybook.log

@@ -1,19 +1,19 @@
 
-> nx run figa-ui:build-storybook -s public --output-dir C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+> nx run figa-ui:build-storybook -s public --output-dir C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 
 
 >  NX  ui framework: @storybook/react
 
 
 >  NX  Storybook builder starting ...
 
-info => Cleaning outputDir: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+info => Cleaning outputDir: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 info => Loading presets
-info => Copying static files: C:\Users\apolubinski\Dream-stack-for-React-dev\system\assets at C:\Users\APOLUB~1\AppData\Local\Temp\chromatic--1520-O2kSsn2j1bar\
+info => Copying static files: C:\Users\apolubinski\Dream-stack-for-React-dev\system\assets at C:\Users\APOLUB~1\AppData\Local\Temp\chromatic--24500-OnUmYP3PUH4J\
 info => Compiling manager..
 vite v4.1.4 building for production...
+info => Manager built (40 s)
 transforming...
-info => Manager built (45 s)
 
 /fonts/LexendBold.ttf referenced in C:/Users/apolubinski/Dream-stack-for-React-dev/system/libs/figa-ui/src/index.css didn't resolve at build time, it will remain unchanged to be resolved at runtime
 
@@ -28,37 +28,37 @@ Use of eval in "node_modules/@storybook/components/dist/esm/index-681e4b07.js" i
 ✓ 2056 modules transformed.
 rendering chunks...
 computing gzip size...
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/iframe.html                                            13.71 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/iframe-039374ed.css                              0.55 kB │ gzip:   0.18 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/es.string.from-code-point-94f4f0df.js            0.59 kB │ gzip:   0.44 kB │ map:     2.25 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/es.regexp.flags-866124bc.js                      0.67 kB │ gzip:   0.47 kB │ map:     2.81 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/client-7fa0c2fc.js                               0.72 kB │ gzip:   0.46 kB │ map:     0.97 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/renderDocs-2b9269dd.js                           2.67 kB │ gzip:   1.33 kB │ map:     9.90 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/GlobalScrollAreaStyles-8793ce4a-8b8a3642.js     10.50 kB │ gzip:   2.39 kB │ map:    20.95 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/Color-f953d088-fcfca520.js                      34.27 kB │ gzip:  13.00 kB │ map:   134.17 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/WithTooltip-167e9982-6b09f1dc.js                40.96 kB │ gzip:  13.78 kB │ map:   181.36 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/OverlayScrollbars-1355f44c-d9f76308.js          64.54 kB │ gzip:  27.41 kB │ map:   444.01 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/syntaxhighlighter-b07b042a-92f2ae96.js         117.17 kB │ gzip:  48.79 kB │ map:   468.63 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/index-e7561cb4.js                              496.03 kB │ gzip: 146.16 kB │ map: 1,180.90 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/formatter-0d5cb0eb-eb19377b.js                 742.26 kB │ gzip: 239.76 kB │ map: 1,799.10 kB
-../../../../../APOLUB~1/AppData/Local/Temp/chromatic--1520-O2kSsn2j1bar/assets/iframe-25e3c20e.js                           2,218.01 kB │ gzip: 613.30 kB │ map: 6,005.45 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/iframe.html                                            13.71 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/iframe-039374ed.css                              0.55 kB │ gzip:   0.18 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/es.string.from-code-point-4a5ed984.js            0.59 kB │ gzip:   0.44 kB │ map:     2.25 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/es.regexp.flags-3e1a8f2a.js                      0.67 kB │ gzip:   0.47 kB │ map:     2.81 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/client-57ae656e.js                               0.72 kB │ gzip:   0.46 kB │ map:     0.97 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/renderDocs-22285432.js                           2.67 kB │ gzip:   1.32 kB │ map:     9.90 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/GlobalScrollAreaStyles-8793ce4a-8d404270.js     10.50 kB │ gzip:   2.39 kB │ map:    20.95 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/Color-f953d088-c30e5131.js                      34.27 kB │ gzip:  13.00 kB │ map:   134.17 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/WithTooltip-167e9982-fc84e94b.js                40.96 kB │ gzip:  13.77 kB │ map:   181.36 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/OverlayScrollbars-1355f44c-0c235e05.js          64.54 kB │ gzip:  27.40 kB │ map:   444.01 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/syntaxhighlighter-b07b042a-30619d4c.js         117.17 kB │ gzip:  48.78 kB │ map:   468.63 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/index-7344df3d.js                              496.03 kB │ gzip: 146.15 kB │ map: 1,180.90 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/formatter-0d5cb0eb-6c285b14.js                 742.26 kB │ gzip: 239.76 kB │ map: 1,799.10 kB
+../../../../../APOLUB~1/AppData/Local/Temp/chromatic--24500-OnUmYP3PUH4J/assets/iframe-cc2bee6c.js                           2,221.20 kB │ gzip: 613.61 kB │ map: 6,000.88 kB
 
 (!) Some chunks are larger than 500 kBs after minification. Consider:
 - Using dynamic import() to code-split the application
 - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
 - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
-info => Output directory: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+info => Output directory: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 
 >  NX  Storybook builder finished ...
 
 
->  NX  Storybook files available in C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--1520-O2kSsn2j1bar
+>  NX  Storybook files available in C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\\chromatic--24500-OnUmYP3PUH4J
 
 
 
 
  >  NX   Successfully ran target build-storybook for project figa-ui
 
 
-   View logs and investigate cache misses at https://nx.app/runs/14p6KOAcws
+   View logs and investigate cache misses at https://nx.app/runs/PEvxYxM576
 

system/libs/figa-ui/src/lib/font/defs.ts

@@ -29,6 +29,7 @@ interface FontProps extends FontHTMLElementProps {
   element?: SupportedFontElement;
   variant: FontVariant;
   children: ReactNode;
+  align?: 'center' | 'justify';
   italic?: boolean;
   trim?: boolean;
   motive?: FontMotive;

system/libs/figa-ui/src/lib/font/font.stories.tsx

@@ -11,7 +11,10 @@ export default {
 
 const Template: Story = () => {
   return (
-    <Box padding={[300, 300, 300, 300]} spacing={[200, 200, 200, 200]}>
+    <Box
+      padding={[300, 300, 300, 300]}
+      spacing={[200, 200, 200, 200, 200, 200]}
+    >
       <Box>
         {FONT_VARIANTS.map((variant) => (
           <div key={variant}>
@@ -51,6 +54,20 @@ const Template: Story = () => {
           </div>
         ))}
       </Box>
+
+      <Box maxWidth="200px" padding={[50, 50, 50, 50]}>
+        <Font variant="b2" align="center">
+          I'm centered
+        </Font>
+      </Box>
+
+      <Box maxWidth="200px">
+        <Font variant="b2" align="justify">
+          I'm justified. I'm justified. I'm justified. I'm justified. I'm
+          justified. I'm justified. I'm justified. I'm justified. I'm justified.
+          I'm justified. I'm justified.
+        </Font>
+      </Box>
     </Box>
   );
 };

system/libs/figa-ui/src/lib/font/font.tsx

@@ -23,6 +23,7 @@ const Font = ({
   motive = 'default',
   trim,
   bold,
+  align,
   ...props
 }: FontProps) => {
   return createElement(element ?? FONT_VARIANT_ELEMENT_MAP[variant], {
@@ -33,7 +34,8 @@ const Font = ({
       className,
       { italic },
       { bold },
-      { trim }
+      { trim },
+      align
     ),
     ...props,
   });

system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap

@@ -199,6 +199,19 @@ exports[`User is able to user control when input skips suffix when loading 1`] =
 </DocumentFragment>
 `;
 
+exports[`User is able to user control when textarea [FRAGILE] allows to set style 1`] = `
+<DocumentFragment>
+  <div
+    class="filled textarea"
+  >
+    <textarea
+      placeholder="type..."
+      style="max-height: 270px; min-height: 190px;"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`User is able to user control when textarea [FRAGILE] renders with default setup 1`] = `
 <DocumentFragment>
   <div

system/libs/figa-ui/src/lib/input/defs.ts

@@ -23,6 +23,8 @@ interface ControlProps {
   variant?: InputVariant;
   disabled?: boolean;
   invalid?: boolean;
+  maxWidth?: string;
+  minWidth?: string;
   loading?: boolean;
   children: ReactNode;
 }
@@ -32,8 +34,7 @@ type BaseProps = Omit<ControlProps, 'children' | 'disabled' | 'className'>;
 type InputProps = InputHTMLElementProps &
   BaseProps & { prefx?: ReactNode; suffx?: ReactNode };
 
-type TextareaProps = TextareaHTMLElementProps &
-  BaseProps & { minHeight?: string; maxHeight?: string };
+type TextareaProps = TextareaHTMLElementProps & BaseProps;
 
 export type {
   InputProps,

system/libs/figa-ui/src/lib/input/input.test.tsx

@@ -110,6 +110,20 @@ describe('User is able to user control when', () => {
       expect(asFragment()).toMatchSnapshot();
     });
 
+    it('[FRAGILE] allows to set style', () => {
+      const { asFragment } = render(
+        <Textarea
+          placeholder={PLACEHOLDER}
+          style={{
+            maxHeight: '270px',
+            minHeight: '190px',
+          }}
+        />
+      );
+
+      expect(asFragment()).toMatchSnapshot();
+    });
+
     it('allows to use placeholder', () => {
       render(<Textarea placeholder={PLACEHOLDER} />);
 

system/libs/figa-ui/src/lib/input/input.tsx

@@ -9,12 +9,18 @@ const Control = ({
   invalid,
   disabled,
   loading,
+  minWidth,
+  maxWidth,
   className,
   children,
 }: ControlProps) => {
   return (
     <div
       className={c(variant, { invalid }, { disabled }, { loading }, className)}
+      style={{
+        minWidth,
+        maxWidth,
+      }}
     >
       {invalid && !disabled && !loading && <ErrorIcon className="input-icon" />}
       {loading && <Loader className="input-loader" size="tiny" />}
@@ -28,6 +34,8 @@ const Textarea = ({
   variant,
   invalid,
   disabled,
+  maxWidth,
+  minWidth,
   loading,
   style,
   ...textareaProps
@@ -37,6 +45,8 @@ const Textarea = ({
       className={c('textarea', className)}
       variant={variant}
       invalid={invalid}
+      maxWidth={maxWidth}
+      minWidth={minWidth}
       disabled={disabled}
       loading={loading}
     >
@@ -53,12 +63,16 @@ const Input = ({
   loading,
   suffx,
   prefx,
+  minWidth,
+  maxWidth,
   ...inputProps
 }: InputProps) => {
   return (
     <Control
       className={c('input', className, { prefx }, { suffx })}
       variant={variant}
+      maxWidth={maxWidth}
+      minWidth={minWidth}
       invalid={invalid}
       disabled={disabled}
       loading={loading}

system/libs/figa-ui/src/lib/layout/__snapshots__/layout.test.tsx.snap

@@ -1,5 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`User is able to use layout when [FRAGILE] allows to disable content padding 1`] = `
+<DocumentFragment>
+  <div
+    class="layout off-padding"
+  >
+    <div>
+      Header
+    </div>
+    <main
+      class="layout-content"
+    >
+      <div>
+        Content
+      </div>
+    </main>
+    <footer
+      class="layout-footer"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`User is able to use layout when [FRAGILE] allows to pass sidebar and gives option to maintain it 1`] = `
 <DocumentFragment>
   <div