diff --git a/system/apps/blog/components/main-layout/recommended-articles.tsx b/system/apps/blog/components/main-layout/recommended-articles.tsx index efc277e4a..cd2c4350b 100644 --- a/system/apps/blog/components/main-layout/recommended-articles.tsx +++ b/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 ( - - {articles.map((article) => ( - - {article.title} - - ))} - - ); - } + useEffect(() => { + if (key === 'ok') { + // Artykuły zostały załadowane, więc ustawiamy flagę na true + setArticlesLoaded(true); + } + }, [key]); - return null; + return ( + + {articlesLoaded + ? articles.slice(0, 8).map((article) => ( + + {article.title} + + )) + : // Renderujemy 8 szarych zastępów (placeholders) + new Array(8) + .fill(undefined) + .map((_, index) => )} + + ); }; export { RecommendedArticles }; diff --git a/system/apps/blog/views/article/article.view.tsx b/system/apps/blog/views/article/article.view.tsx index 69ea19e62..971c3d2cc 100644 --- a/system/apps/blog/views/article/article.view.tsx +++ b/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 ( diff --git a/system/build-storybook.log b/system/build-storybook.log index c59c5cf27..47260553e 100644 --- a/system/build-storybook.log +++ b/system/build-storybook.log @@ -1,5 +1,5 @@ -> 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 @@ -7,13 +7,13 @@ > 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,31 +28,31 @@ 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 @@ -60,5 +60,5 @@ info => Output directory: C:\\\\Users\\\\APOLUB~1\\\\AppData\\\\Local\\\\Temp\\\ > 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 diff --git a/system/libs/figa-ui/src/lib/font/defs.ts b/system/libs/figa-ui/src/lib/font/defs.ts index 48928b6b1..82fb467de 100644 --- a/system/libs/figa-ui/src/lib/font/defs.ts +++ b/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; diff --git a/system/libs/figa-ui/src/lib/font/font.stories.tsx b/system/libs/figa-ui/src/lib/font/font.stories.tsx index 02e87cb8a..aa464bf90 100644 --- a/system/libs/figa-ui/src/lib/font/font.stories.tsx +++ b/system/libs/figa-ui/src/lib/font/font.stories.tsx @@ -11,7 +11,10 @@ export default { const Template: Story = () => { return ( - + {FONT_VARIANTS.map((variant) => (
@@ -51,6 +54,20 @@ const Template: Story = () => {
))}
+ + + + I'm centered + + + + + + 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. + +
); }; diff --git a/system/libs/figa-ui/src/lib/font/font.tsx b/system/libs/figa-ui/src/lib/font/font.tsx index cfbdfe9e8..e10d17f55 100644 --- a/system/libs/figa-ui/src/lib/font/font.tsx +++ b/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, }); diff --git a/system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap b/system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap index e5b931730..530d76a91 100644 --- a/system/libs/figa-ui/src/lib/input/__snapshots__/input.test.tsx.snap +++ b/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`] = `; +exports[`User is able to user control when textarea [FRAGILE] allows to set style 1`] = ` + +
+