crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More WIP components

Browse Source
This commit is contained in:
Fred Carlsen
2019-06-22 14:35:25 +02:00
committed by fabioberger
parent 86218445cd
commit 926d165321
11 changed files with 652 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
packages/website/ts/components/docs/code.tsx Normal file
View File

@@ -0,0 +1,203 @@
import * as React from 'react';
import * as CopyToClipboard from 'react-copy-to-clipboard';
import SyntaxHighlighter from 'react-syntax-highlighter';
import { Button } from 'ts/components/button';
import { Container } from 'ts/components/ui/container';
import { colors } from 'ts/style/colors';
import { styled } from 'ts/style/theme';
import { zIndex } from 'ts/style/z_index';
const CustomPre = styled.pre`
margin: 0px;
line-height: 24px;
overflow: scroll;
width: 100%;
height: 100%;
max-height: 800px;
border-radius: 4px;
code {
background-color: inherit !important;
border-radius: 0px;
font-family: 'Roboto Mono', sans-serif;
border: none;
}
code:last-of-type {
position: relative;
top: 10px;
top: 0;
padding-top: 0;
display: inline-block;
font-size: 0.875rem;
line-height: 1.25em;
}
`;
const customStyle = {
'hljs-comment': {
color: '#7e7887',
},
'hljs-quote': {
color: '#7e7887',
},
'hljs-variable': {
color: '#be4678',
},
'hljs-template-variable': {
color: '#be4678',
},
'hljs-attribute': {
color: '#be4678',
},
'hljs-regexp': {
color: '#be4678',
},
'hljs-link': {
color: '#be4678',
},
'hljs-tag': {
color: '#61f5ff',
},
'hljs-name': {
color: '#61f5ff',
},
'hljs-selector-id': {
color: '#be4678',
},
'hljs-selector-class': {
color: '#be4678',
},
'hljs-number': {
color: '#c994ff',
},
'hljs-meta': {
color: '#61f5ff',
},
'hljs-built_in': {
color: '#aa573c',
},
'hljs-builtin-name': {
color: '#aa573c',
},
'hljs-literal': {
color: '#aa573c',
},
'hljs-type': {
color: '#aa573c',
},
'hljs-params': {
color: '#aa573c',
},
'hljs-string': {
color: '#781818',
},
'hljs-function': {
color: '#781818',
},
'hljs-symbol': {
color: '#2a9292',
},
'hljs-bullet': {
color: '#2a9292',
},
'hljs-title': {
color: '#576ddb',
},
'hljs-section': {
color: '#576ddb',
},
'hljs-keyword': {
color: '#253C90',
},
'hljs-selector-tag': {
color: '#253C90',
},
'hljs-deletion': {
color: '#19171c',
display: 'inline-block',
width: '100%',
backgroundColor: '#be4678',
},
'hljs-addition': {
color: '#19171c',
display: 'inline-block',
width: '100%',
backgroundColor: '#2a9292',
},
hljs: {
display: 'block',
overflowX: 'hidden',
background: colors.backgroundLight,
fontSize: '12px',
paddingLeft: '20px',
paddingTop: '20px',
paddingBottom: '20px',
},
'hljs-emphasis': {
fontStyle: 'italic',
},
'hljs-strong': {
fontWeight: 'bold',
},
};
export interface CodeProps {
children: string;
language?: 'html | typescript | solidity | python';
}
export interface CodeState {
didCopyCode: boolean;
}
export class Code extends React.Component<CodeProps, CodeState> {
public static defaultProps = {
language: 'typescript',
};
public state: CodeState = {
didCopyCode: false,
};
public render(): React.ReactNode {
const copyButtonText = this.state.didCopyCode ? 'Copied!' : 'Copy';
return (
<Wrapper>
<ButtonWrapper>
<CopyToClipboard text={this.props.children} onCopy={this._handleCopyClick}>
<StyledButton>{copyButtonText}</StyledButton>
</CopyToClipboard>
</ButtonWrapper>
<SyntaxHighlighter language={this.props.language} style={customStyle} showLineNumbers={false} PreTag={CustomPre}>
{this.props.children}
</SyntaxHighlighter>
</Wrapper>
);
}
private readonly _handleCopyClick = () => {
this.setState({ didCopyCode: true });
};
}
const StyledButton = styled(Button)`
border-radius: 4px;
background: #FFFFFF;
border: 1px solid #EAEAEA;
color: ${colors.brandDark};
font-size: 15px;
font-weight: 300;
padding: 9px 12px 7px;
`;
const ButtonWrapper = styled.div`
position: absolute;
right: 0;
top: 0;
z-index: ${zIndex.overlay - 1};
transform: translateY(calc(-100% + -13px));
`;
const Wrapper = styled.div`
position: relative;
max-width: 702px;
`;

49
packages/website/ts/components/docs/help_callout.tsx Normal file
View File

@@ -0,0 +1,49 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { Icon } from 'ts/components/icon';
import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
export interface HelpCalloutProps {
heading?: string;
description?: string;
url?: string;
}
interface WrapperProps {
isHome?: boolean;
}
export const HelpCallout: React.FunctionComponent<HelpCalloutProps> = (props: HelpCalloutProps) => (
<>
<Wrapper href={props.url}>
<Icon color={colors.brandLight} name="help" size={38} margin={[0, 30, 0, 0]} />
<div>
<Heading size="small" marginBottom="8px">{props.heading}</Heading>
<Paragraph size="default" marginBottom="0">{props.description}</Paragraph>
</div>
</Wrapper>
</>
);
HelpCallout.defaultProps = {
heading: 'Need some help?',
description: 'Get in touch here and we’ll be happy to help.',
};
const Wrapper = styled.a<WrapperProps>`
background-color: ${colors.backgroundLight};
padding: 25px 30px;
display: flex;
align-items: center;
margin-bottom: 1.875rem;
`;

74
packages/website/ts/components/docs/newsletter_signup.tsx Normal file
View File

@@ -0,0 +1,74 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { Icon } from 'ts/components/icon';
import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
export interface NewsletterSignupProps {
heading?: string;
description?: string;
url?: string;
}
interface WrapperProps {
isHome?: boolean;
}
export const NewsletterSignup: React.FunctionComponent<NewsletterSignupProps> = (props: NewsletterSignupProps) => (
<>
<Wrapper href={props.url}>
<Heading marginBottom="8px">{props.heading}</Heading>
<Paragraph marginBottom="25px">{props.description}</Paragraph>
<InputWrapper>
<Label htmlFor="emailSignup">Email Address</Label>
<Input id="emailSignup" type="email" placeholder="Email Address"/>
</InputWrapper>
</Wrapper>
</>
);
NewsletterSignup.defaultProps = {
heading: 'Sign up for the Newsletter',
description: 'Body font about the newseletter',
};
const Wrapper = styled.a<WrapperProps>`
background-color: ${colors.backgroundLight};
padding: 40px 30px 50px;
display: flex;
justify-content: center;
flex-direction: column;
text-align: center;
margin-bottom: 1.875rem;
`;
const Label = styled.label`
visibility: hidden;
opacity: 0;
position: absolute;
width: 0;
`;
const InputWrapper = styled.div`
padding: 0 40px;
`;
const Input = styled.input`
background-color: transparent;
border: 0;
padding-top: 1rem;
padding-bottom: 1rem;
border-bottom: 1px solid #cfcfcf;
font-size: 1.25rem;
font-weight: 300;
width: 100%;
`;

60
packages/website/ts/components/docs/resource/resource.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { Tag } from 'ts/components/docs/resource/tag';
export interface ResourceProps {
heading?: string;
description?: string;
url?: string;
tags: TagProps[];
}
interface WrapperProps {
}
interface TagProps {
label: React.ReactNode;
}
export const Resource: React.FunctionComponent<ResourceProps> = ({ heading, description, url, tags }: ResourceProps) => (
<Wrapper href={url}>
<Heading color={colors.brandDark} size="small" marginBottom="8px">{heading}</Heading>
<Paragraph size="default" marginBottom="30px">{description}</Paragraph>
<Meta>
<Tags>
{tags.map((tag, index) => <Tag key={`tag-${index}`}>{tag.label}</Tag>)}
</Tags>
<div>
Rating
</div>
</Meta>
</Wrapper>
);
Resource.defaultProps = {
heading: 'Need some help?',
description: 'Get in touch here and we’ll be happy to help.',
};
const Wrapper = styled.a<WrapperProps>`
border: 1px solid #D7E3DB;
padding: 25px 30px;
margin-bottom: 1.875rem;
display: block;
`;
const Meta = styled.div`
display: flex;
align-items: center;
justify-content: space-between;
`;
const Tags = styled.div`
display: flex;
align-items: center;
`;

39
packages/website/ts/components/docs/resource/tag.tsx Normal file
View File

@@ -0,0 +1,39 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled from 'styled-components';
import { colors } from 'ts/style/colors';
export interface TagProps {
children: React.ReactNode;
isInverted?: boolean;
}
interface WrapperProps {
isInverted?: boolean;
}
export const Tag: React.FunctionComponent<TagProps> = ({ isInverted, children }: TagProps) => (
<Wrapper isInverted={isInverted}>
{children}
</Wrapper>
);
Tag.defaultProps = {
isInverted: false,
};
const Wrapper = styled.div<WrapperProps>`
background-color: ${props => props.isInverted ? colors.brandDark : 'rgba(0, 56, 49, 0.1)'};
border-radius: 4px;
color: ${props => props.isInverted ? colors.white : colors.brandDark};
font-size: 0.75rem;
padding: 6px 10px 4px;
display: inline-flex;
align-items: center;
text-transform: uppercase;
& + & {
margin-left: 10px;
}
`;

10
packages/website/ts/components/docs/step_links.tsx
View File

@@ -1,18 +1,9 @@
import { Link } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { Button } from 'ts/components/button';
import { SearchInput } from 'ts/components/docs/search_input';
import { StepLink, StepLinkConfig } from 'ts/components/docs/step_link';
import { Icon } from 'ts/components/icon';
import { Column, FlexWrap, WrapGrid } from 'ts/components/newLayout';
import { ThemeValuesInterface } from 'ts/components/siteWrap';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { constants } from 'ts/utils/constants';
export interface LinkProps {
links: StepLinkConfig[];
@@ -33,4 +24,5 @@ StepLinks.defaultProps = {
const Wrapper = styled.div`
background-color: ${colors.backgroundLight};
border: 1px solid #DBDFDD;
margin-bottom: 1.875rem;
`;

53
packages/website/ts/components/docs/table.tsx Normal file
View File

@@ -0,0 +1,53 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
export interface Props {
children: React.ReactNode;
}
export const Table: React.FunctionComponent<Props> = (props: Props) => (
<>
<Wrapper>
{props.children}
</Wrapper>
</>
);
Table.defaultProps = {
};
const Wrapper = styled.table`
border: 1px solid #CFCFCF;
margin-bottom: 1.875rem;
width: 100%;
th {
font-size: 1rem;
font-weight: 500;
padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF;
text-align: left;
}
td {
padding: 14px 20px 13px;
border-bottom: 1px solid #CFCFCF;
font-size: 0.875rem;
opacity: 0.76;
}
td + td,
th + th {
border-left: 1px solid #CFCFCF;
}
tr {
border-collapse: collapse;
}
tr:nth-child(even) td {
background-color: ${colors.backgroundLight};
}
`;

43
packages/website/ts/components/docs/tabs.tsx Normal file
View File

@@ -0,0 +1,43 @@
import * as _ from 'lodash';
import * as React from 'react';
import { Tab as OriginalTab, TabList as OriginalTabList, TabPanel as OriginalTabPanel, Tabs as OriginalTabs } from 'react-tabs';
import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
export const Tabs = styled(OriginalTabs).attrs({
selectedTabClassName: 'is-active',
})`
margin-bottom: 1.875rem;
.is-active {
background-color: #F3F6F4;
color: ${colors.brandDark};
}
`;
export const Tab = styled(OriginalTab)`
background-color: transparent;
border-radius: 4px 4px 0 0;
cursor: pointer;
padding: 12px 12px 13px;
font-size: 1rem;
color: #5C5C5C;
font-weight: 300;
`;
export const TabPanel = styled(OriginalTabPanel).attrs({
selectedClassName: 'is-active',
})`
background-color: #F3F6F4;
border-radius: 4px;
padding: 12px 12px;
display: none;
&.is-active {
display: block;
}
`;
export const TabList = styled(OriginalTabList)`
display: flex;
`;

2
packages/website/ts/components/docs/tutorial_steps.tsx
View File

@@ -23,7 +23,7 @@ TutorialSteps.defaultProps = {
const Wrapper = styled.ul<WrapperProps>`
list-style-type: none;
counter-reset: tutorialSteps;
margin-bottom: 16rem;
margin-bottom: 1.875rem;
li {
font-size: 1rem;

35
packages/website/ts/components/docs/unordered_list.tsx Normal file
View File

@@ -0,0 +1,35 @@
import * as _ from 'lodash';
import * as React from 'react';
import styled, { withTheme } from 'styled-components';
import { colors } from 'ts/style/colors';
export interface Props {
children: React.ReactNode;
}
export const UnorderedList: React.FunctionComponent<Props> = (props: Props) => (
<>
<Wrapper>
{props.children}
</Wrapper>
</>
);
UnorderedList.defaultProps = {
};
const Wrapper = styled.ul`
list-style-type: disc;
margin-bottom: 1.875rem;
padding-left: 1rem;
li {
color: ${colors.textDarkSecondary};
font-size: 1rem;
font-weight: 300;
line-height: 1.625em;
margin-bottom: 1rem;
line-height: 1;
opacity: 0.75;
}
`;

100
packages/website/ts/pages/docs/page_template.tsx
View File

@@ -1,23 +1,30 @@
import { utils as sharedUtils } from '@0x/react-shared';
import * as _ from 'lodash';
import * as React from 'react';
import styled, { keyframes } from 'styled-components';
// import { Tabs } from 'react-tabs';
import { Callout } from 'ts/components/docs/callout';
import { Code } from 'ts/components/docs/code';
import { CommunityLink, CommunityLinkProps } from 'ts/components/docs/community_link';
import { HelpCallout } from 'ts/components/docs/help_callout';
import { Hero } from 'ts/components/docs/hero';
import { NewsletterSignup } from 'ts/components/docs/newsletter_signup';
import { SearchInput } from 'ts/components/docs/search_input';
import { LinkProps, ShortcutLink } from 'ts/components/docs/shortcut_link';
import { SiteWrap } from 'ts/components/docs/siteWrap';
import { StepLinkConfig } from 'ts/components/docs/step_link';
import { StepLinks } from 'ts/components/docs/step_links';
import { Table } from 'ts/components/docs/table';
import { Tab, TabList, TabPanel, Tabs } from 'ts/components/docs/tabs';
import { TutorialSteps } from 'ts/components/docs/tutorial_steps';
import { UnorderedList } from 'ts/components/docs/unordered_list';
import { DocumentTitle } from 'ts/components/document_title';
import { Section, SectionProps } from 'ts/components/newLayout';
import { Heading, Paragraph } from 'ts/components/text';
import { colors } from 'ts/style/colors';
import { WebsitePaths } from 'ts/types';
import { documentConstants } from 'ts/utils/document_meta_constants';
import { Resource } from 'ts/components/docs/resource/resource';
interface Props {
location: Location;
@@ -53,7 +60,7 @@ export class DocsPageTemplate extends React.Component<Props> {
<SiteWrap theme="light">
<DocumentTitle {...documentConstants.DOCS} />
<Hero isHome={false} title={`Page Template`} description="This a subheader for the page" />
<Section maxWidth={'1150px'} isPadded={false} padding="0 0">
<Section maxWidth={'1030px'} isPadded={false} padding="0 0">
<Columns>
<aside>
<Paragraph>Sidebar</Paragraph>
@@ -81,20 +88,101 @@ export class DocsPageTemplate extends React.Component<Props> {
<Paragraph>
And here is a table:
</Paragraph>
<Table>
<thead>
<tr>
<th>Parameter</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>Step1</td>
<td>Step2</td>
</tr>
<tr>
<td>Step1</td>
<td>Step2</td>
</tr>
<tr>
<td>Step1</td>
<td>Step2</td>
</tr>
<tr>
<td>Step1</td>
<td>Step2</td>
</tr>
</tbody>
</Table>
<Heading asElement="h3" size="default">Code Snippet</Heading>
<Code>
{`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
const exchange = new ExchangeContract(provider, networkId);
const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
from: senderAddress,
});`}
</Code>
<Heading asElement="h3" size="default">Tabbed Code Snippet</Heading>
<Tabs>
<TabList>
<Tab>Typescript</Tab>
<Tab>Python</Tab>
<Tab>Solidity</Tab>
</TabList>
<TabPanel>
<Code>
{`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
const exchange = new ExchangeContract(provider, networkId);
const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
from: senderAddress,
});`}
</Code>
</TabPanel>
<TabPanel>
<Code>
{`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
const exchange = new ExchangeContract(provider, networkId);
const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
from: senderAddress,
});`}
</Code>
</TabPanel>
<TabPanel>
<Code>
{`import { provider, networkId, signerAddress, salt, signature, senderAddress } from '@0x/browser-examples';
const exchange = new ExchangeContract(provider, networkId);
const txnReceipt = await exchange.executeTransaction.awaitTransactionSuccessAsync(salt, signerAddress, data, signature, {
from: senderAddress,
});`}
</Code>
</TabPanel>
</Tabs>
<Heading asElement="h3" size="default">Subheading</Heading>
<Paragraph>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec consequat velit in nisl varius malesuada. Morbi at porttitor enim. Donec vel tristique dolor, quis convallis sapien. Nam et massa tempus, dignissim leo vitae, ultricies libero. Vivamus eu enim tellus. Phasellus eu mattis elit. Proin ut eleifend urna, sed tincidunt nunc. Sed eu dapibus metus, in congue ipsum. Duis volutpat sem et sem faucibus blandit. Nullam ultricies ante eu elit auctor, id mattis nunc euismod. Curabitur arcu enim, cursus ac pellentesque quis, accumsan sit amet turpis. Praesent dignissim mi a maximus euismod
</Paragraph>
<ul>
<UnorderedList>
<li>List items</li>
<li>List items</li>
<li>List items</li>
<li>List items</li>
</ul>
</UnorderedList>
<Heading asElement="h2" size="default">Tabbed Code Snippet</Heading>
<Heading asElement="h2" size="default">Run Code Snippet</Heading>
<Heading asElement="h2" size="default">Next Steps</Heading>
<StepLinks links={usefulLinks} />
<HelpCallout />
<NewsletterSignup />
<Resource heading="RadarRelay SDK" description="The Radar Relay SDK is a software development kit that simplifies the interactions with Radar Relay’s APIs" tags={[ { label: "Relayer" } ]} />
</article>
</Columns>
</Section>
@@ -105,8 +193,8 @@ export class DocsPageTemplate extends React.Component<Props> {
const Columns = styled.div<{ count?: number }>`
display: grid;
grid-template-columns: 314px 1fr;
grid-column-gap: 40px;
grid-template-columns: 230px 1fr;
grid-column-gap: 118px;
grid-row-gap: 30px;
`;