docs(Reference): Create pages for all possible types.

Create all components necessary to create reference pages for all possible types (Function, Const,
Class, Enum, Interface, Type Alias, Decorator).

re neo-one-suite#691, neo-one-suite#692, neo-one-suite#693, neo-one-suite#694, neo-one-suite#695, neo-one-suite#696, neo-one-suite#697

packages/neo-one-website/src/components/reference/ReferenceContent.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ReferenceItemContent, ReferenceItemsContent } from '../content';
+import { ReferencePage } from './components';
 import { ReferenceGrid } from './ReferenceGrid';
-import { ReferencePage } from './ReferencePage';
 
 interface Props {
   readonly content: ReferenceItemsContent | ReferenceItemContent;

packages/neo-one-website/src/components/reference/ReferenceGrid.tsx

@@ -11,7 +11,8 @@ const { useState } = React;
 const ReferenceLayout = styled(Box)`
   display: grid;
   min-width: 0;
-  grid-template-columns: repeat(auto-fill, 160px);
+  grid-template-columns: repeat(auto-fill, 240px);
+  grid-gap: 8px;
 `;
 
 const Wrapper = styled(Box)`

packages/neo-one-website/src/components/reference/ReferenceLink.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import styled from 'styled-components';
 import { prop } from 'styled-tools';
 import { RouterLink } from '../RouterLink';
-import { TypeIcon } from './TypeIcon';
+import { TypeIcon } from './common';
 import { ReferenceType } from './types';
 
 interface Props {

packages/neo-one-website/src/components/reference/TypeFilterOption.tsx

@@ -2,7 +2,7 @@ import { Box } from '@neo-one/react-common';
 import * as React from 'react';
 import styled from 'styled-components';
 import { prop } from 'styled-tools';
-import { TypeIcon } from './TypeIcon';
+import { TypeIcon } from './common';
 import { TypeFilterOptions } from './types';
 
 interface Props {

packages/neo-one-website/src/components/reference/Example.tsx → packages/neo-one-website/src/components/reference/common/Example.tsx

@@ -2,7 +2,7 @@ import { Box } from '@neo-one/react-common';
 import * as React from 'react';
 import styled from 'styled-components';
 import { prop } from 'styled-tools';
-import { WordTokens } from './types';
+import { WordTokens } from '../types';
 import { buildExample } from './utils';
 
 interface Props {

packages/neo-one-website/src/components/reference/common/Text.tsx

@@ -0,0 +1,17 @@
+import { Box } from '@neo-one/react-common';
+import * as React from 'react';
+import styled from 'styled-components';
+import { prop } from 'styled-tools';
+import { WordTokens } from '../types';
+import { buildText } from './utils';
+
+export const StyledText = styled(Box)`
+  ${prop('theme.fontStyles.subheading')};
+  ${prop('theme.fonts.axiformaRegular')};
+`;
+
+interface Props {
+  readonly text: WordTokens;
+}
+
+export const Text = ({ text, ...props }: Props) => <StyledText {...props}>{buildText(text)}</StyledText>;

packages/neo-one-website/src/components/reference/common/TextSection.tsx

@@ -0,0 +1,30 @@
+import { Box } from '@neo-one/react-common';
+import * as React from 'react';
+import styled from 'styled-components';
+import { prop } from 'styled-tools';
+import { WordTokens } from '../types';
+import { Text } from './Text';
+import { Title } from './Title';
+
+const Wrapper = styled(Box)`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 32px;
+
+  @media (max-width: ${prop('theme.breakpoints.md')}) {
+    grid-gap: 16px;
+  }
+`;
+
+interface Props {
+  readonly title: string;
+  readonly text: WordTokens;
+  readonly subheading?: boolean;
+}
+
+export const TextSection = ({ title, text, subheading, ...props }: Props) => (
+  <Wrapper {...props}>
+    <Title subheading={subheading}>{title}</Title>
+    <Text text={text} />
+  </Wrapper>
+);

packages/neo-one-website/src/components/reference/common/Title.tsx

@@ -0,0 +1,9 @@
+// stylelint-disable
+import { H2 } from '@neo-one/react-common';
+import styled from 'styled-components';
+import { ifProp, prop } from 'styled-tools';
+
+export const Title = styled(H2)<{ readonly subheading?: boolean }>`
+  ${prop('theme.fonts.axiformaBold')};
+  ${ifProp('subheading', prop('theme.fontStyles.headline'), prop('theme.fontStyles.display1'))};
+`;

packages/neo-one-website/src/components/reference/TypeIcon.tsx → packages/neo-one-website/src/components/reference/common/TypeIcon.tsx

@@ -3,7 +3,7 @@ import { Box } from '@neo-one/react-common';
 import * as React from 'react';
 import styled from 'styled-components';
 import { ifProp, prop, switchProp } from 'styled-tools';
-import { TypeFilterOptions } from './types';
+import { TypeFilterOptions } from '../types';
 
 interface Props {
   readonly type: TypeFilterOptions;

packages/neo-one-website/src/components/reference/common/index.ts

@@ -0,0 +1,5 @@
+export * from './Example';
+export * from './Text';
+export * from './TextSection';
+export * from './Title';
+export * from './TypeIcon';

packages/neo-one-website/src/components/reference/utils.tsx → packages/neo-one-website/src/components/reference/common/utils.tsx

@@ -4,9 +4,9 @@ import { Parser } from 'html-to-react';
 import * as React from 'react';
 import styled from 'styled-components';
 import { ifProp, prop } from 'styled-tools';
-import { Prism } from '../../common';
-import { RouterLink } from '../RouterLink';
-import { WordTokens } from './types';
+import { Prism } from '../../../common';
+import { RouterLink } from '../../RouterLink';
+import { WordTokens } from '../types';
 
 const ReferenceLink = styled(Link.withComponent(RouterLink))<{ readonly code?: boolean }>`
   font-family: ${ifProp('code', "Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace")};

packages/neo-one-website/src/components/reference/components/Extra.tsx

@@ -0,0 +1,27 @@
+import { Box } from '@neo-one/react-common';
+import * as React from 'react';
+import styled from 'styled-components';
+import { prop } from 'styled-tools';
+import { Example, Text, Title } from '../common';
+import { ExtraData } from '../types';
+
+const Wrapper = styled(Box)`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 32px;
+
+  @media (max-width: ${prop('theme.breakpoints.md')}) {
+    grid-gap: 16px;
+  }
+`;
+
+interface Props {
+  readonly data: ExtraData;
+}
+
+export const Extra = ({ data, ...props }: Props) => (
+  <Wrapper {...props}>
+    {data.title === undefined ? undefined : <Title>{data.title}</Title>}
+    {data.code ? <Example example={data.data} /> : <Text text={data.data} />}
+  </Wrapper>
+);

packages/neo-one-website/src/components/reference/components/InterfaceClassItems.tsx

@@ -0,0 +1,38 @@
+import { Box } from '@neo-one/react-common';
+import * as React from 'react';
+import styled from 'styled-components';
+import { prop } from 'styled-tools';
+import { Title } from '../common';
+import { ClassData, InterfaceData } from '../types';
+import { MethodItem } from './MethodItem';
+import { MethodList } from './MethodList';
+import { ParameterPropertyList } from './ParameterPropertyList';
+
+export interface Props {
+  readonly data: ClassData | InterfaceData;
+}
+
+const Wrapper = styled(Box)`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 40px;
+
+  @media (max-width: ${prop('theme.breakpoints.md')}) {
+    grid-gap: 24px;
+  }
+`;
+
+export const InterfaceClassItems = ({ data, ...props }: Props) => (
+  <Wrapper {...props}>
+    {data.constructorDefinition === undefined ? (
+      undefined
+    ) : (
+      <Wrapper>
+        <Title>Constructor</Title>
+        <MethodItem method={data.constructorDefinition} />
+      </Wrapper>
+    )}
+    {data.properties === undefined ? undefined : <ParameterPropertyList values={data.properties} title="Properties" />}
+    {data.methods === undefined ? undefined : <MethodList methods={data.methods} />}
+  </Wrapper>
+);

packages/neo-one-website/src/components/reference/components/MethodItem.tsx

@@ -0,0 +1,51 @@
+import { Box } from '@neo-one/react-common';
+import * as React from 'react';
+import styled from 'styled-components';
+import { prop } from 'styled-tools';
+import { Example, Text, Title } from '../common';
+import { Method } from '../types';
+import { ParameterReturns } from './ParameterReturns';
+
+export interface Props {
+  readonly method: Method;
+}
+
+const Layout = styled(Box)`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 16px;
+  background-color: ${prop('theme.gray1')};
+  border: 1px solid rgba(0, 0, 0, 0.3);
+
+  @media (max-width: ${prop('theme.breakpoints.md')}) {
+    grid-gap: 8px;
+  }
+`;
+
+const Wrapper = styled(Box)`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 16px;
+  padding: 16px 32px;
+
+  @media (max-width: ${prop('theme.breakpoints.md')}) {
+    grid-gap: 8px;
+  }
+`;
+
+const StyledTitle = styled(Title)`
+  background-color: ${prop('theme.gray1')};
+  padding: 16px 32px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
+`;
+
+export const MethodItem = ({ method, ...props }: Props) => (
+  <Layout {...props}>
+    <StyledTitle subheading>{method.title}</StyledTitle>
+    <Wrapper>
+      {method.description === undefined ? undefined : <Text text={method.description} />}
+      <Example example={method.definition} />
+      <ParameterReturns functionData={method.functionData} subheading />
+    </Wrapper>
+  </Layout>
+);

packages/neo-one-website/src/components/reference/components/MethodList.tsx

@@ -0,0 +1,30 @@
+import { Box } from '@neo-one/react-common';
+import * as React from 'react';
+import styled from 'styled-components';
+import { prop } from 'styled-tools';
+import { Title } from '../common';
+import { Method } from '../types';
+import { MethodItem } from './MethodItem';
+
+const ParameterLayout = styled(Box)`
+  display: grid;
+  grid-auto-flow: row;
+  grid-gap: 32px;
+
+  @media (max-width: ${prop('theme.breakpoints.md')}) {
+    grid-gap: 16px;
+  }
+`;
+
+interface Props {
+  readonly methods: ReadonlyArray<Method>;
+}
+
+export const MethodList = ({ methods, ...props }: Props) => (
+  <ParameterLayout {...props}>
+    <Title>Methods</Title>
+    {methods.map((method) => (
+      <MethodItem key={method.title} method={method} />
+    ))}
+  </ParameterLayout>
+);

packages/neo-one-website/src/components/reference/ParameterItem.tsx → packages/neo-one-website/src/components/reference/components/ParameterPropertyItem.tsx

@@ -2,14 +2,14 @@ import { Box } from '@neo-one/react-common';
 import * as React from 'react';
 import styled from 'styled-components';
 import { prop } from 'styled-tools';
-import { Parameter } from './types';
-import { buildText } from './utils';
+import { Text } from '../common';
+import { Parameter, Property } from '../types';
 
 const ParameterLayout = styled(Box)`
   display: grid;
   grid-auto-flow: column;
   grid-template-columns: 1fr 1fr 1fr;
-  gap: 16px;
+  grid-gap: 16px;
   justify-items: start;
   align-items: baseline;
   border-bottom: 1px solid rgba(0, 0, 0, 0.3);
@@ -20,19 +20,14 @@ const Name = styled(Box)`
   ${prop('theme.fontStyles.body1')};
 `;
 
-const Type = styled(Box)`
-  ${prop('theme.fonts.axiformaRegular')};
-  ${prop('theme.fontStyles.body1')};
-`;
-
 interface Props {
-  readonly parameter: Parameter;
+  readonly value: Parameter | Property;
 }
 
-export const ParameterItem = ({ parameter, ...props }: Props) => (
+export const ParameterPropertyItem = ({ value, ...props }: Props) => (
   <ParameterLayout {...props}>
-    <Name>{parameter.name}</Name>
-    <Type>{buildText(parameter.type)}</Type>
-    <Type>{buildText(parameter.description)}</Type>
+    <Name>{value.name}</Name>
+    {value.type === undefined ? undefined : <Text text={value.type} />}
+    <Text text={value.description} />
   </ParameterLayout>
 );