@preply/ds-docs 7.1.0 → 8.0.0

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

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+
+import { Form, Input } from './IconSearch.styles';
+import { useIconSearchContext } from './IconsSearchContext/useIconSearchContext';
+
+export const IconSearch: FC = () => {
+    const { terms, setSearchTerms } = useIconSearchContext();
+
+    return (
+        <Form onSubmit={event => event.preventDefault()}>
+            <Input
+                placeholder="search by name"
+                type="text"
+                value={terms || ''}
+                onChange={e => setSearchTerms(e.target.value)}
+            />
+        </Form>
+    );
+};

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

@@ -0,0 +1,7 @@
+import styled from 'styled-components';
+
+export const Div = styled.div`
+    display: grid;
+    grid-template-columns: 1fr 320px;
+    grid-gap: 10px;
+`;

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

@@ -0,0 +1,37 @@
+import { Feature } from '@preply/ds-core-types';
+import React, { FC, useState } from 'react';
+
+import { IconDetails } from './IconDetails';
+import { IconList } from './IconList';
+import { Div } from './IconSearchResults.styles';
+import { useIconSearchContext } from './IconsSearchContext/useIconSearchContext';
+
+export const IconSearchResults: FC = () => {
+    const { results } = useIconSearchContext();
+    const [selectedIcon, setSelectedIcon] = useState<Feature | null>(null);
+
+    const handleIconClick = (icon: Feature) => {
+        setSelectedIcon(icon);
+    };
+
+    if (!results) {
+        return null;
+    }
+
+    return (
+        <div>
+            <div>
+                Results:
+                {results && ` ${results.length} icons`}
+            </div>
+            <Div>
+                <IconList
+                    icons={results}
+                    onIconClick={handleIconClick}
+                    selectedIcon={selectedIcon}
+                />
+                <IconDetails icon={selectedIcon} />
+            </Div>
+        </div>
+    );
+};

package/pages/30.guides/70.assets/components/IconsSearchContext/IconSearchProvider.tsx

@@ -0,0 +1,37 @@
+import { Feature, Icon } from '@preply/ds-core-types';
+import React, { FC, ReactNode, createContext, useCallback, useEffect, useState } from 'react';
+import iconsData from '@preply/ds-media-icons/data/icons.json';
+
+import { IconsContext } from './IconsContext';
+
+export interface IconSearchContextShape {
+    terms: string;
+    results: Feature[];
+    setSearchTerms: (terms: string) => void;
+}
+
+export const IconSearchContext = createContext<IconSearchContextShape>({
+    terms: '',
+    results: [],
+    setSearchTerms: () => null,
+});
+
+const icons = new IconsContext(iconsData as Icon[]);
+
+export const IconSearchProvider: FC<{ children?: ReactNode }> = ({ children }) => {
+    const [terms, setTerms] = useState<string>('');
+    const [results, setResults] = useState<Feature[]>([]);
+
+    const setSearchTerms = useCallback((t: string) => setTerms(t), [setTerms]);
+
+    useEffect(() => {
+        const res = icons.searchIcons({ terms });
+        setResults(res);
+    }, [terms]);
+
+    return (
+        <IconSearchContext.Provider value={{ terms, results, setSearchTerms }}>
+            {children}
+        </IconSearchContext.Provider>
+    );
+};

package/pages/30.guides/70.assets/components/IconsSearchContext/IconsContext.ts

@@ -0,0 +1,36 @@
+import { Feature } from '@preply/ds-core-types';
+
+interface IconFilter {
+    terms?: string;
+}
+
+export class IconsContext {
+    private icons?: Feature[];
+    private error?: Error;
+
+    constructor(icons?: Feature[], error?: Error) {
+        this.icons = icons;
+        this.error = error;
+    }
+
+    getError(): Error | undefined {
+        return this.error;
+    }
+
+    searchIcons(filter: IconFilter): Feature[] {
+        if (!this.icons) {
+            return [];
+        }
+        const searchTerm = filter.terms ? filter.terms.toLowerCase() : '';
+        return this.icons.filter(c => {
+            return (
+                c.name.toLowerCase().match(searchTerm) ||
+                c.description?.toLowerCase().match(searchTerm)
+            );
+        });
+    }
+
+    static getIconPath(icon: Feature): string {
+        return `${icon.path}/${icon.source}`;
+    }
+}

package/pages/30.guides/70.assets/components/IconsSearchContext/useIconSearchContext.ts

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { IconSearchContext, IconSearchContextShape } from './IconSearchProvider';
+
+export const useIconSearchContext = (): IconSearchContextShape => useContext(IconSearchContext);

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

@@ -0,0 +1,133 @@
+import { color, spacing } from '@preply/ds-core';
+import { getTokenVar as t } from '@preply/ds-web-core';
+import { LayoutGrid } from '@preply/ds-web-lib';
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+const svgUrls = [
+    // They are sorted by name
+    'https://static.preply.com/ds/illustrations/tokyo-ui/airplain.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/arrows-multiple.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/arrows-upwards.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/bar-graph.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/books.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-chromium.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-safari.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/bubbles.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/calendar-2.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/checkmark.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/confetti.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/desk.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/desk-supplies.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/disco-ball.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/lamp-and-books.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/language-flash-cards.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/magnifying-glass.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/map.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/open-book.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/present.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/rising-arrows.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/star_coin.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/system-permissions.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/three-arrows.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg',
+    'https://static.preply.com/ds/illustrations/tokyo-ui/flashcards.svg',
+];
+
+const HighlightTransparency = styled.div`
+    padding: ${t(spacing[12])};
+    -webkit-background-size: 50px 50px;
+    -moz-background-size: 50px 50px;
+    background-size: 50px 50px;
+    background-color: ${t(color.background.tertiary)};
+    background-image: linear-gradient(
+        45deg,
+        ${t(color.background.secondary)} 25%,
+        transparent 25%,
+        transparent 50%,
+        ${t(color.background.secondary)} 50%,
+        ${t(color.background.secondary)} 75%,
+        transparent 75%,
+        transparent
+    );
+`;
+
+export const IllustrationDetail: FC<{ svgUrl: string }> = ({ svgUrl }) => {
+    return (
+        <div style={{ width: '80%' }}>
+            <a href={svgUrl} target="_blank" rel="noreferrer">
+                {svgUrl.replace('https://static.preply.com/ds/illustrations/tokyo-ui/', '')}
+                <img src={svgUrl} alt="TODO:" />
+            </a>
+        </div>
+    );
+};
+
+export const IllustrationsList: FC = () => {
+    return (
+        <HighlightTransparency>
+            <LayoutGrid columns={['25% 25% 25% 25%']} gap="16">
+                {svgUrls.map(svgUrl => (
+                    <IllustrationDetail key={svgUrl} svgUrl={svgUrl} />
+                ))}
+            </LayoutGrid>
+        </HighlightTransparency>
+    );
+};

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

@@ -0,0 +1,49 @@
+import type { Token } from '@preply/ds-core-types';
+import { useToken } from '@preply/ds-web-core';
+import React, { FC, ReactElement } from 'react';
+import styled from 'styled-components';
+
+interface CellProps {
+    width?: number;
+    verticalSpace?: boolean;
+    horizontalSpace?: boolean;
+}
+
+export const Cell = styled.td<CellProps>`
+    width: ${({ width }) => (width ? `${width}px` : 'auto')};
+    padding-top: 0;
+    padding-right: ${({ horizontalSpace: hm }) => (hm ? '40px' : '20px')};
+    padding-bottom: ${({ verticalSpace: vm }) => (vm ? '20px' : '0px')};
+    padding-left: 0;
+`;
+
+interface ItemProps {
+    index: number;
+    id: string;
+    defaultValue?: string;
+    resolveToken: (option: string) => Token;
+    render?: (option: string, index?: number) => ReactElement;
+}
+
+export const ThemeOptionsItem: FC<ItemProps> = ({
+    index,
+    id,
+    defaultValue,
+    resolveToken,
+    render,
+}) => {
+    const value = useToken(resolveToken(id));
+
+    return (
+        <tr>
+            <Cell verticalSpace>
+                <span>
+                    <code>{id}</code>
+                </span>
+            </Cell>
+            <Cell verticalSpace>{value}</Cell>
+            {defaultValue && id === defaultValue ? <Cell verticalSpace>(default)</Cell> : <Cell />}
+            {render && <Cell verticalSpace>{render(id, index)}</Cell>}
+        </tr>
+    );
+};

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

@@ -0,0 +1,61 @@
+import { ThemeName } from '@preply/ds-core';
+import type { Token } from '@preply/ds-core-types';
+import { useTheme } from '@preply/ds-web-core';
+import React, { FC, ReactElement } from 'react';
+import styled from 'styled-components';
+
+import { ThemeOptionsItem } from './ThemeOptionsItem';
+
+export const OptionsList = styled.div<{ relevant: boolean }>`
+    margin-bottom: 20px;
+    ${({ relevant }) => `opacity: ${relevant ? 'unset' : 0.5}}`}
+`;
+
+export type Option<T> = {
+    id: T;
+    label?: string;
+};
+interface Props {
+    options: Option<string>[];
+    defaultValue?: string;
+    resolveToken: (option: string) => Token;
+    render?: (option: string) => ReactElement;
+    hideOptions?: string[];
+    referenceTheme: ThemeName;
+}
+
+export const ThemeOptionsList: FC<Props> = ({
+    options,
+    defaultValue,
+    resolveToken,
+    render,
+    hideOptions = [],
+    referenceTheme,
+}) => {
+    const {
+        theme: { name: currentTheme },
+    } = useTheme();
+
+    const visibleOptions = options.filter(({ id }) => !hideOptions.includes(id));
+
+    return (
+        <OptionsList relevant={referenceTheme === currentTheme}>
+            {<h4>Options (theme: {referenceTheme})</h4>}
+
+            <table style={{ fontSize: '14px' }}>
+                <tbody>
+                    {visibleOptions.map(({ id }, index) => (
+                        <ThemeOptionsItem
+                            key={id}
+                            index={index}
+                            id={id}
+                            defaultValue={defaultValue}
+                            resolveToken={resolveToken}
+                            render={render}
+                        />
+                    ))}
+                </tbody>
+            </table>
+        </OptionsList>
+    );
+};