@preply/ds-docs 7.1.0 → 8.0.0

package/pages/30.guides/70.assets/components/FontForLanguages.tsx

@@ -0,0 +1,357 @@
+import {
+    HEADING_VARIANT_OPTIONS,
+    TextVariant,
+    TEXT_VARIANT_DEFAULT,
+    TEXT_VARIANT_OPTIONS,
+    tokens,
+} from '@preply/ds-core';
+import { Button, Heading, LayoutFlex, LayoutGrid, Text, TextField } from '@preply/ds-web-lib';
+import { GlobalStyle, RootProvider } from '@preply/ds-web-root';
+import React, { FC, useEffect, useState } from 'react';
+import { ThemeOptionsList } from './ThemeOptionsList';
+
+const TOKYO_TEXT_VARIANTS: TextVariant[] = [
+    'caption-regular',
+    'caption-semibold',
+    'small-regular',
+    'small-regular-italic',
+    'small-semibold',
+    'small-semibold-italic',
+    'default-regular',
+    'default-regular-italic',
+    'default-semibold',
+    'default-semibold-italic',
+    'large-regular',
+    'large-regular-italic',
+    'large-semibold',
+    'large-semibold-italic',
+];
+
+// Placeholder for languages data
+const languagesData = [
+    {
+        name: 'Русский (Russian)',
+        code: 'ru',
+        localized: 'Привет, мир!',
+    },
+    {
+        name: 'English',
+        code: 'en',
+        localized: 'Hello, World!',
+    },
+    {
+        name: 'Polski',
+        code: 'pl',
+        localized: 'Cześć, Świecie!',
+    },
+    {
+        name: 'Deutsch',
+        code: 'de',
+        localized: 'Hallo, Welt!',
+    },
+    {
+        name: 'Українська (Ukranian)',
+        code: 'uk',
+        localized: 'Привіт, Світ!',
+    },
+    {
+        name: 'Português',
+        code: 'pt',
+        localized: 'Olá, Mundo!',
+    },
+    {
+        name: 'Türkçe',
+        code: 'tr',
+        localized: 'Merhaba, Dünya!',
+    },
+    {
+        name: 'Bahasa',
+        code: 'id',
+        localized: 'Halo, Dunia!',
+    },
+    {
+        name: 'Français',
+        code: 'fr',
+        localized: 'Bonjour, le monde!',
+    },
+    {
+        name: 'Italiano',
+        code: 'it',
+        localized: 'Ciao, Mondo!',
+    },
+    {
+        name: 'Español',
+        code: 'es',
+        localized: '¡Hola, Mundo!',
+    },
+    {
+        name: '中文 (Chinese)',
+        code: 'zh',
+        localized: '你好，世界！',
+    },
+    {
+        name: '日本語 (Japanese)',
+        code: 'ja',
+        localized: 'こんにちは、世界！',
+    },
+    {
+        name: '한국어 (Korean)',
+        code: 'ko',
+        localized: '안녕하세요, 세계!',
+    },
+    {
+        name: 'العربية',
+        code: 'ar',
+        localized: 'مرحبا بك في عالم البرمجة!',
+    },
+    {
+        name: 'Nederlands',
+        code: 'nl',
+        localized: 'Hallo, wereld!',
+    },
+    {
+        name: 'Română',
+        code: 'ro',
+        localized: 'Salut, Lume!',
+    },
+    {
+        name: 'Thai',
+        code: 'th',
+        localized: 'สวัสดี, โลก!',
+    },
+    {
+        name: 'Swedish',
+        code: 'sv',
+        localized: 'Hej, världen!',
+    },
+    {
+        name: 'Czeck',
+        code: 'cs',
+        localized: 'Ahoj, světe!',
+    },
+] as const;
+
+type Language = (typeof languagesData)[number]['code'];
+
+const defaultValue: Record<Language, boolean> = {
+    ru: true,
+    en: true,
+    pl: true,
+    de: true,
+    ua: true,
+    pt: true,
+    tr: true,
+    id: true,
+    fr: true,
+    it: true,
+    es: true,
+    zh: true,
+    ja: true,
+    ko: true,
+    ar: true,
+    nl: true,
+    ro: true,
+    th: true,
+    sv: true,
+    cs: true,
+};
+
+function LanguagesTable() {
+    const localStorageValue = localStorage.getItem('selectedLanguages');
+
+    const [selectedLanguages, setSelectedLanguages] = useState<Partial<Record<Language, boolean>>>(
+        localStorageValue ? JSON.parse(localStorageValue) : defaultValue,
+    );
+    const [allVariants, setAllVariants] = useState(false);
+    const [englishSentence, setEnglishSentence] = useState('Hello, World!');
+
+    useEffect(() => {
+        localStorage.setItem('selectedLanguages', JSON.stringify(selectedLanguages));
+    }, [selectedLanguages]);
+
+    const handleLanguageChange = event => {
+        setSelectedLanguages({
+            ...selectedLanguages,
+            [event.target.name]: event.target.checked,
+        });
+    };
+
+    const selectAllLanguages = () => {
+        const allLanguages = languagesData.reduce((acc, language) => {
+            acc[language.code] = true;
+            return acc;
+        }, {});
+        setSelectedLanguages(allLanguages);
+    };
+
+    const deselectAllLanguages = () => {
+        setSelectedLanguages({});
+    };
+
+    const resetLanguages = () => {
+        setSelectedLanguages(defaultValue);
+    };
+
+    const toggleAllVariants = () => {
+        setAllVariants(currentValue => !currentValue);
+    };
+
+    return (
+        <div className="App">
+            <LayoutFlex column gap="32">
+                <LayoutGrid columns={5} gap="8">
+                    {languagesData.map(language => (
+                        <div key={language.code}>
+                            <input
+                                type="checkbox"
+                                name={language.code}
+                                checked={selectedLanguages[language.code] || false}
+                                onChange={handleLanguageChange}
+                                id={language.code}
+                            />
+                            <label htmlFor={language.code}>
+                                {language.name} ({language.code})
+                            </label>
+                        </div>
+                    ))}
+                </LayoutGrid>
+                <LayoutFlex gap="8">
+                    <Button variant="secondary" onClick={selectAllLanguages}>
+                        Select all languages
+                    </Button>
+                    <Button variant="secondary" onClick={deselectAllLanguages}>
+                        Deselect all languages
+                    </Button>
+                    <Button variant="ghost" onClick={resetLanguages}>
+                        Reset selected languages
+                    </Button>
+                    <Button variant="ghost" onClick={toggleAllVariants}>
+                        Toggle all text variants
+                    </Button>
+                </LayoutFlex>
+                <LayoutFlex column gap="32">
+                    <TextField
+                        label="English sentence"
+                        value={englishSentence}
+                        onValueChange={setEnglishSentence}
+                    />
+                </LayoutFlex>
+
+                <LayoutGrid columns={3} gap="16">
+                    {languagesData
+                        .filter(language => selectedLanguages[language.code])
+                        .map(language => (
+                            <div key={language.code} style={{ display: 'contents' }}>
+                                <div>
+                                    {language.name} ({language.code})
+                                </div>
+                                <div lang={language.code}>
+                                    <Text accent="tertiary">
+                                        <i>English sentence</i>
+                                    </Text>
+                                    <Heading variant="large" tag="h2">
+                                        {englishSentence}
+                                    </Heading>
+                                    <Text>{englishSentence}</Text>
+
+                                    {allVariants && (
+                                        <>
+                                            <ThemeOptionsList
+                                                referenceTheme="tokyo-ui"
+                                                component="Heading"
+                                                prop="variant"
+                                                options={HEADING_VARIANT_OPTIONS}
+                                                render={variant => (
+                                                    <Heading variant={variant}>
+                                                        {englishSentence}
+                                                    </Heading>
+                                                )}
+                                                resolveToken={option =>
+                                                    tokens.heading.variant[option].fontSize
+                                                }
+                                            />
+                                            <ThemeOptionsList
+                                                referenceTheme="tokyo-ui"
+                                                component="Text"
+                                                prop="variant"
+                                                options={TEXT_VARIANT_OPTIONS.filter(({ id }) =>
+                                                    TOKYO_TEXT_VARIANTS.includes(id),
+                                                )}
+                                                defaultValue={TEXT_VARIANT_DEFAULT}
+                                                resolveToken={option =>
+                                                    tokens.text.variant[option].fontSize
+                                                }
+                                                render={variant => (
+                                                    <Text variant={variant}>{englishSentence}</Text>
+                                                )}
+                                            />
+                                        </>
+                                    )}
+                                </div>
+                                <div lang={language.code}>
+                                    <Text accent="tertiary">
+                                        <i>Localized sentence</i>
+                                    </Text>
+                                    <Heading variant="large" tag="h2">
+                                        {language.localized}
+                                    </Heading>
+                                    <Text>{language.localized}</Text>
+
+                                    {allVariants && (
+                                        <>
+                                            <ThemeOptionsList
+                                                referenceTheme="tokyo-ui"
+                                                component="Heading"
+                                                prop="variant"
+                                                options={HEADING_VARIANT_OPTIONS}
+                                                render={variant => (
+                                                    <Heading variant={variant}>
+                                                        {language.localized}
+                                                    </Heading>
+                                                )}
+                                                resolveToken={option =>
+                                                    tokens.heading.variant[option].fontSize
+                                                }
+                                            />
+                                            <ThemeOptionsList
+                                                referenceTheme="tokyo-ui"
+                                                component="Text"
+                                                prop="variant"
+                                                options={TEXT_VARIANT_OPTIONS.filter(({ id }) =>
+                                                    TOKYO_TEXT_VARIANTS.includes(id),
+                                                )}
+                                                defaultValue={TEXT_VARIANT_DEFAULT}
+                                                resolveToken={option =>
+                                                    tokens.text.variant[option].fontSize
+                                                }
+                                                render={variant => (
+                                                    <Text variant={variant}>
+                                                        {language.localized}
+                                                    </Text>
+                                                )}
+                                            />
+                                        </>
+                                    )}
+                                </div>
+                            </div>
+                        ))}
+                </LayoutGrid>
+            </LayoutFlex>
+        </div>
+    );
+}
+
+export const FontForLanguages: FC<Record<string, never>> = () => {
+    return (
+        <>
+            <GlobalStyle />
+            <RootProvider theme="tokyo-ui">
+                {/* See https://preply.atlassian.net/browse/DES-1108 for when data-preply-ds-theme can be
+            removed */}
+                <div data-preply-ds-theme="tokyo-ui">
+                    <LanguagesTable />
+                </div>
+            </RootProvider>
+        </>
+    );
+};

package/pages/30.guides/70.assets/components/IconDetails.styles.ts

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+
+export const Div = styled.div`
+    position: sticky;
+    top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    height: fit-content;
+    min-height: 400px;
+    display: flex;
+    flex-direction: column;
+    padding: 20px 15px;
+    h2 {
+        word-break: break-all;
+    }
+`;
+
+export const SelectIconDiv = styled.div`
+    position: sticky;
+    top: 5px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    height: fit-content;
+    min-height: 400px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 15px;
+`;

package/pages/30.guides/70.assets/components/IconDetails.tsx

@@ -0,0 +1,163 @@
+import { color } from '@preply/ds-core';
+import { Feature } from '@preply/ds-core-types';
+import { getTokenVar as t } from '@preply/ds-web-core';
+import { Icon, LayoutFlex, Text } from '@preply/ds-web-lib';
+import React, { FC } from 'react';
+
+import { importSvgFileName } from '../functions/import-svg-file-name';
+
+interface Props {
+    icon: Feature | null;
+}
+
+const CopyCodeBlock = ({ code }) => {
+    const positiveBg = t(color.background.positiveDark);
+    return (
+        <div
+            style={{
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '16px',
+                backgroundColor: '#f5f2f0',
+                color: 'darkslategray',
+                borderRadius: 4,
+                padding: 4,
+            }}
+        >
+            <pre
+                style={{
+                    fontFamily: 'monospace',
+                    fontSize: '12px',
+                }}
+            >
+                <code style={{ whiteSpace: 'pre-wrap', overflowWrap: 'break-word' }}>{code}</code>
+            </pre>
+            <button
+                type="button"
+                onClick={async e => {
+                    const btn = e.currentTarget;
+                    await navigator.clipboard.writeText(code);
+                    btn.animate(
+                        [
+                            { color: 'black', backgroundColor: 'none' },
+                            { color: 'white', backgroundColor: positiveBg },
+                            { color: 'black', backgroundColor: 'none' },
+                        ],
+                        {
+                            duration: 500,
+                            easing: 'ease-in-out',
+                        },
+                    );
+                }}
+                style={{
+                    alignSelf: 'end',
+                    fontSize: '12px',
+                    border: 'none',
+                    borderRadius: '4px',
+                    backgroundColor: 'none',
+                    cursor: 'pointer',
+                }}
+            >
+                Copy
+            </button>
+        </div>
+    );
+};
+
+const RNIconDetails: FC<Props> = ({ icon }) => {
+    if (!icon) return null;
+
+    if (!icon.name.startsWith('TokyoUI'))
+        return (
+            <>
+                <h3>React Native</h3>
+                <p>Non-TokyoUI icons are not supported in React Native.</p>
+            </>
+        );
+
+    const rnIconName = icon.name.replace('TokyoUI', '');
+
+    const rnCodeSnippet = `
+import { Icon } from '@preply/ds-rn-lib';
+
+<Icon name="${rnIconName}" />`;
+
+    return (
+        <>
+            <h3>React Native</h3>
+            <CopyCodeBlock code={rnCodeSnippet.trim()} />
+        </>
+    );
+};
+
+export const IconDetails: FC<Props> = ({ icon }) => {
+    if (!icon) {
+        return (
+            <div
+                style={{
+                    position: 'sticky',
+                    top: '4px',
+                    border: '1px solid lightgray',
+                    borderRadius: '4px',
+                    textAlign: 'center',
+                    alignContent: 'center',
+                    height: 'fit-content',
+                }}
+            >
+                <p>select an icon</p>
+            </div>
+        );
+    }
+
+    const isDeprecated = typeof icon.name === 'string' && !icon.name.startsWith('TokyoUI');
+
+    const importStatement = `import ${icon.name} from '@preply/ds-media-icons/dist/24/${icon.name}.svg';`;
+    const iconUsage = `<Icon svg={${icon.name}} />`;
+
+    return (
+        <div
+            style={{
+                position: 'sticky',
+                top: '4px',
+                border: '1px solid lightgray',
+                borderRadius: '4px',
+                padding: '16px',
+                height: 'fit-content',
+                backgroundColor: isDeprecated ? t(color.background.warningLight) : 'unset',
+            }}
+        >
+            {isDeprecated && (
+                <Text accent="warning" variant={'large-semibold-italic'}>
+                    This icon is deprecated, use the &quot;TokyoUI&quot;-prefixed one
+                </Text>
+            )}
+            <LayoutFlex>
+                <Icon svg={importSvgFileName(icon.name)} size="16" />
+                <Icon svg={importSvgFileName(icon.name)} size="24" />
+                <Icon svg={importSvgFileName(icon.name)} size="32" />
+                <Icon svg={importSvgFileName(icon.name)} size="48" />
+            </LayoutFlex>
+            <h2>{icon.name}</h2>
+            <p>{icon.description}</p>
+            <p>Import the icon from:</p>
+            <CopyCodeBlock code={importStatement} />
+            <p>Then render it using the Icon component:</p>
+            <CopyCodeBlock code={iconUsage} />
+            <br />
+            <RNIconDetails icon={icon} />
+            <h3>Color customizations</h3>
+            <p>
+                The icon should allow changing its black fill color with everything else. Here the
+                icon should look red on a soft-red background.
+            </p>
+            <div
+                style={{
+                    color: t(color.text.critical),
+                    background: t(color.background.criticalLight),
+                }}
+            >
+                <Icon svg={importSvgFileName(icon.name)} />
+            </div>
+        </div>
+    );
+};

package/pages/30.guides/70.assets/components/IconItem.styles.ts

@@ -0,0 +1,51 @@
+import { onHover } from '@preply/ds-web-core';
+import styled from 'styled-components';
+
+interface Props {
+    isSelected?: boolean;
+    isDeprecated?: boolean;
+}
+
+export const Li = styled.li`
+    display: flex;
+    text-decoration: none;
+`;
+
+export const IconCard = styled.button.withConfig({
+    shouldForwardProp: (prop: string) =>
+        prop !== 'isDeprecated' && prop !== 'isDeprecated' && prop !== 'isSelected',
+})<Props>`
+    all: unset;
+    display: flex;
+    border-radius: 4px;
+    flex-direction: row;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    padding: 16px;
+    overflow: hidden;
+    flex: 1;
+    p {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        ${({ isDeprecated }) => {
+            if (isDeprecated) {
+                return `color: #966208`; // color.text.warning
+            }
+            return '';
+        }}
+    }
+    ${onHover(`
+        background-color: #fafafa;
+    `)}
+    &:focus {
+        border: 1px solid #ccc;
+    }
+    ${({ isSelected }) => {
+        if (isSelected) {
+            return `background-color: #fafafa;
+                border: 1px solid #ccc;`;
+        }
+        return '';
+    }}
+`;

package/pages/30.guides/70.assets/components/IconItem.tsx

@@ -0,0 +1,35 @@
+import { Feature } from '@preply/ds-core-types';
+import { Icon } from '@preply/ds-web-lib';
+import React, { FC } from 'react';
+
+import { importSvgFileName } from '../functions/import-svg-file-name';
+
+import { IconCard, Li } from './IconItem.styles';
+
+interface Props {
+    icon: Feature;
+    onIconClick: (icon: Feature) => void;
+    isSelected?: boolean;
+}
+
+export const IconItem: FC<Props> = ({ icon, onIconClick, isSelected }) => {
+    const isDeprecated = typeof icon.name === 'string' && !icon.name.startsWith('TokyoUI');
+
+    return (
+        <Li key={icon.name}>
+            <IconCard
+                onClick={() => onIconClick(icon)}
+                isSelected={isSelected}
+                isDeprecated={isDeprecated}
+            >
+                <Icon
+                    svg={importSvgFileName(icon.name)}
+                    accent={isDeprecated ? 'warning' : 'primary'}
+                />
+                <p>
+                    {icon.name} {isDeprecated && '(deprecated)'}
+                </p>
+            </IconCard>
+        </Li>
+    );
+};

package/pages/30.guides/70.assets/components/IconList.styles.ts

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+
+export const Ul = styled.ul`
+    margin: 0;
+    padding: 0;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+    grid-auto-rows: 70px;
+`;

package/pages/30.guides/70.assets/components/IconList.tsx

@@ -0,0 +1,26 @@
+import { Feature } from '@preply/ds-core-types';
+import React, { FC } from 'react';
+
+import { IconItem } from './IconItem';
+import { Ul } from './IconList.styles';
+
+interface Props {
+    icons: Feature[];
+    onIconClick: (icon: Feature) => void;
+    selectedIcon: Feature | null;
+}
+
+export const IconList: FC<Props> = ({ icons, onIconClick, selectedIcon }) => {
+    return (
+        <Ul>
+            {icons.map(icon => (
+                <IconItem
+                    key={icon.name}
+                    icon={icon}
+                    onIconClick={() => onIconClick(icon)}
+                    isSelected={selectedIcon?.name === icon.name}
+                />
+            ))}
+        </Ul>
+    );
+};

package/pages/30.guides/70.assets/components/IconSearch.styles.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const Form = styled.form`
+    display: flex;
+    align-items: flex-start;
+    gap: 20px;
+    margin: 30px 0 20px;
+`;
+
+export const Input = styled.input`
+    width: 100%;
+    height: 32px;
+    padding: 5px 20px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+
+    ::placeholder {
+        font-size: 14px;
+        color: #666;
+        font-style: italic;
+    }
+`;