@preply/ds-docs 7.1.0 → 8.0.0

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererBorderWidth.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    width: 64px;
+    padding-top: ${({ value }) => value};
+    background: #666;
+
+    span {
+        display: block;
+        width: 100%;
+        border-top-style: solid;
+        border-color: white;
+        border-width: 2px;
+        height: 28px;
+        background: #999;
+    }
+`;
+
+export const RendererBorderWidth: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            <span />
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererBoxShadow.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    width: 64px;
+    height: 64px;
+    box-shadow: ${({ value }) => value};
+`;
+
+export const RendererBoxShadow: FC<RendererProps> = ({ value }) => {
+    return <Div value={value} />;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererBrightness.tsx

@@ -0,0 +1,22 @@
+import { onHover } from '@preply/ds-web-core';
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    background: #999;
+    font-size: 16px;
+    line-height: 32px;
+    text-align: center;
+    width: 200px;
+    color: white;
+
+    ${onHover(`
+        filter: brightness(${({ value }) => value});
+    `)}
+`;
+
+export const RendererBrightness: FC<RendererProps> = ({ value }) => {
+    return <Div value={value}>hover me</Div>;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererEasingCoordinate.tsx

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+
+import { RendererProps } from './RendererProps';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export const RendererEasingCoordinate: FC<RendererProps> = ({ value: _value }) => {
+    return null;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererFgColor.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    font-size: 20px;
+    font-weight: 700;
+    color: ${({ value }) => value};
+    background: ${({ value }) => (value === 'white' ? 'black' : 'white')};
+`;
+
+export const RendererFgColor: FC<RendererProps> = ({ value }) => {
+    return <Div value={value}>A</Div>;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererFontFamily.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: ${({ value }) => value};
+    font-size: 20px;
+    font-weight: 600;
+
+    p:first-child {
+        font-weight: 700;
+    }
+
+    p:last-child {
+        font-weight: 400;
+    }
+`;
+
+export const RendererFontFamily: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            <p>Lorem ipsum dolor sit amet (700)</p>
+            <p>Lorem ipsum dolor sit amet (500)</p>
+            <p>Lorem ipsum dolor sit amet (400)</p>
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererFontSize.tsx

@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    font-size: ${({ value }) => value};
+`;
+
+export const RendererFontSize: FC<RendererProps> = ({ value }) => {
+    return <Div value={value}>Lorem ipsum dolor sit amet</Div>;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererFontStyle.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    font-style: ${({ value }) => value};
+    font-size: 14px;
+`;
+
+export const RendererFontStyle: FC<RendererProps> = ({ value }) => {
+    return <Div value={value}>Lorem ipsum dolor sit amet.</Div>;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererFontWeight.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    font-size: 20px;
+    font-weight: ${({ value }) => value};
+`;
+
+export const RendererFontWeight: FC<RendererProps> = ({ value }) => {
+    return <Div value={value}>Lorem ipsum dolor sit amet</Div>;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererHeight.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    height: ${({ value }) => value};
+    width: 40px;
+    background-color: black;
+`;
+
+export const RendererHeight: FC<RendererProps> = ({ value }) => {
+    return <Div value={value} />;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererLetterSpacing.tsx

@@ -0,0 +1,17 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    letter-spacing: ${({ value }) => value};
+    font-size: 14px;
+`;
+
+export const RendererLetterSpacing: FC<RendererProps> = ({ value }) => {
+    return <Div value={value}>Lorem ipsum dolor sit amet.</Div>;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererLineHeightPixels.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    line-height: ${({ value }) => value};
+    font-size: 14px;
+`;
+
+export const RendererLineHeightPixels: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nulla, suscipit id
+            purus quis, facilisis tempus tortor. Praesent felis quam, tincidunt vitae libero ut,
+            bibendum condimentum nunc.
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererLineHeightRatio.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: PreplyInter;
+    @supports (font-variation-settings: normal) {
+        font-family: PreplyInterV;
+    }
+    line-height: ${({ value }) => value};
+    font-size: 14px;
+`;
+
+export const RendererLineHeightRatio: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec massa nulla, suscipit id
+            purus quis, facilisis tempus tortor. Praesent felis quam, tincidunt vitae libero ut,
+            bibendum condimentum nunc.
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererOutlineColor.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    background: white;
+    width: 48px;
+    height: 48px
+    padding: 8px 0 0 8px;
+    background: ${({ value }) => (value === 'white' ? 'black' : 'white')};
+
+
+    span {
+        display: block;
+        width: 40px;
+        height: 40px;
+        border-width: 2px;
+        border-style: solid;
+        border-top-left-radius: 16px;
+        border-color: ${({ value }) => value};
+        border-right: none;
+        border-bottom: none;
+    }
+`;
+
+export const RendererOutlineColor: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            <span />
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererOutlineOffset.tsx

@@ -0,0 +1,29 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    width: 64px;
+    padding-top: 2px;
+    background: #666;
+
+    span {
+        height: 2px;
+        display: block;
+        width: 100%;
+        border-top-style: solid;
+        border-color: white;
+        border-width: ${({ value }) => value};
+        height: 28px;
+        background: #999;
+    }
+`;
+
+export const RendererOutlineOffset: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            <span />
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererOutlineWidth.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    width: 64px;
+    padding-top: ${({ value }) => value};
+    background: #666;
+
+    span {
+        display: block;
+        width: 100%;
+        border-top-style: solid;
+        border-color: white;
+        border-width: 2px;
+        height: 28px;
+        background: #999;
+    }
+`;
+
+export const RendererOutlineWidth: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            <span />
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererPaletteItem.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    width: 64px;
+    height: 64px;
+    background-color: ${({ value }) => value};
+`;
+
+export const RendererPaletteItem: FC<RendererProps> = ({ value }) => {
+    return <Div value={value} />;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererProps.tsx

@@ -0,0 +1,6 @@
+import { TokenValue } from '@preply/ds-core-types';
+
+export interface RendererProps {
+    value: TokenValue;
+    name?: string;
+}

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererSize.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    width: ${({ value }) => value};
+    height: ${({ value }) => value};
+    background-color: black;
+`;
+
+export const RendererSize: FC<RendererProps> = ({ value }) => {
+    return <Div value={value} />;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererSpace.tsx

@@ -0,0 +1,14 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    width: ${({ value }) => value};
+    height: 40px;
+    background-color: black;
+`;
+
+export const RendererSpace: FC<RendererProps> = ({ value }) => {
+    return <Div value={value} />;
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererSwatch.tsx

@@ -0,0 +1,25 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps & { invert: boolean }>`
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 64px;
+    height: 64px;
+    font-size: 20px;
+    font-weight: 700;
+    color: ${({ invert }) => (invert ? 'white' : 'black')};
+    background-color: ${({ value }) => value};
+`;
+
+export const RendererSwatch: FC<RendererProps> = ({ value, name }) => {
+    const swatch = Number(name?.split('.').pop());
+    return (
+        <Div value={value} invert={swatch >= 300}>
+            A
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererTextDecoration.tsx

@@ -0,0 +1,26 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    text-decoration: ${({ value }) => value};
+    font-size: 20px;
+    font-weight: 600;
+
+    p:first-child {
+        font-weight: 700;
+    }
+
+    p:last-child {
+        font-weight: 400;
+    }
+`;
+
+export const RendererTextDecoration: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            <p>Lorem ipsum dolor sit amet</p>
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenRenderers/RendererTypeface.tsx

@@ -0,0 +1,28 @@
+import React, { FC } from 'react';
+import styled from 'styled-components';
+
+import { RendererProps } from './RendererProps';
+
+const Div = styled.div<RendererProps>`
+    font-family: ${({ value }) => value};
+    font-size: 20px;
+    font-weight: 400;
+
+    p:first-child {
+        font-weight: 500;
+    }
+
+    p:last-child {
+        font-weight: 700;
+    }
+`;
+
+export const RendererTypeface: FC<RendererProps> = ({ value }) => {
+    return (
+        <Div value={value}>
+            <p>Lorem ipsum dolor sit amet (400)</p>
+            <p>Lorem ipsum dolor sit amet (500)</p>
+            <p>Lorem ipsum dolor sit amet (700)</p>
+        </Div>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenSearch.styles.tsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+export const TokenSearchStatic = styled.div`
+    position: relative;
+    margin-top: -20px;
+    padding-bottom: 200px;
+    h1 {
+        margin: 0;
+    }
+`;
+
+export const SearchForm = styled.div`
+    position: fixed;
+    left: 0;
+    width: 100%;
+    z-index: 9999;
+    display: flex;
+    justify-content: center;
+    padding: 20px 20px 24px;
+    gap: 16px;
+    background: white;
+`;
+
+export const SearchFormContent = styled.div`
+    width: 100%;
+    max-width: 1000px;
+    margin: 0 auto;
+`;
+
+type SearchProps = {
+    terms?: string;
+};
+
+export const SearchInput = styled.input<SearchProps>`
+    flex: 1;
+    padding: 8px;
+    font-size: 16px;
+    height: 32px;
+    border-style: solid;
+    border-width: 1px;
+    border-color: ${({ terms }) => (terms ? `orange;` : '#ccc')};
+`;

package/pages/30.guides/40.tokens/components/TokenSearch.tsx

@@ -0,0 +1,79 @@
+import { ColorSchemeName } from '@preply/ds-core';
+import { useSetTheme, useTheme, useThemes } from '@preply/ds-web-core';
+import { LayoutFlex } from '@preply/ds-web-lib';
+import React, { FC, useCallback, useEffect, useMemo } from 'react';
+
+import { useTokenSearchContext } from '../providers/useTokenSearchContext';
+
+import { SchemeSwitcher } from './SchemeSwitcher';
+import { SearchTerms } from './SearchTerms';
+import {
+    SearchForm,
+    SearchFormContent,
+    SearchInput,
+    TokenSearchStatic,
+} from './TokenSearch.styles';
+
+export const TokenSearch: FC = () => {
+    const { theme } = useTheme();
+    const { themes } = useThemes();
+    const { setTheme } = useSetTheme();
+    const { colorScheme, terms, setColorScheme, setSearchTerms } = useTokenSearchContext();
+
+    const url = useMemo(() => new URL(window.top?.location.href || ''), []);
+    const params = url.searchParams;
+    const urlTheme = params.get('theme');
+    const newTheme = urlTheme && themes?.find(t => t.name === urlTheme);
+    const urlColorScheme = params.get('colorScheme');
+    const urlTerms = params.get('terms');
+
+    useEffect(() => {
+        if (urlTheme) {
+            if (urlTheme !== theme.name && setTheme && newTheme) {
+                setTheme(newTheme);
+            }
+            if (urlTheme && urlColorScheme !== colorScheme) {
+                setColorScheme(urlColorScheme as ColorSchemeName);
+            }
+            setSearchTerms(urlTerms || '');
+        }
+
+        params.delete('theme');
+        params.delete('colorScheme');
+        params.delete('terms');
+        window.top?.history.replaceState({}, '', url);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    const handleSearchTermsChange = useCallback(
+        (value: string) => setSearchTerms(value),
+        [setSearchTerms],
+    );
+
+    return (
+        <TokenSearchStatic>
+            <SearchForm>
+                <SearchFormContent>
+                    <LayoutFlex gap="16" direction="column">
+                        <LayoutFlex justifyContent="space-between" alignItems="start">
+                            <h1 id="tokens" className="sbdocs sbdocs-h1 css-1j28tt">
+                                Token Explorer
+                            </h1>
+                        </LayoutFlex>
+                        <LayoutFlex gap="8" nowrap>
+                            <SearchInput
+                                terms={terms}
+                                type="text"
+                                placeholder="examples: teal, 300, action, primary, xs, --4adef, #00, 12px"
+                                onChange={ev => handleSearchTermsChange(ev.target.value)}
+                                value={terms}
+                            />
+                            <SchemeSwitcher />
+                        </LayoutFlex>
+                        <SearchTerms />
+                    </LayoutFlex>
+                </SearchFormContent>
+            </SearchForm>
+        </TokenSearchStatic>
+    );
+};

package/pages/30.guides/40.tokens/components/TokenSearchHint.styles.tsx

@@ -0,0 +1,17 @@
+import styled from 'styled-components';
+
+export const Heading = styled.h3`
+    margin: 0;
+    font-size: 24px;
+    font-weight: 400;
+`;
+
+export const Alternatives = styled.h3`
+    font-size: 16px;
+    font-weight: 400;
+`;
+
+export const Note = styled.h3`
+    font-size: 16px;
+    font-weight: 400;
+`;