filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-22 12:24:02 +03:00
Code Issues Packages Projects Releases Wiki Activity

chore: delete /system page

Browse Source
This commit is contained in:
Aminejv 2022-10-03 15:25:42 +01:00
parent 95287d322f
commit 0f6c65eadd
26 changed files with 1 additions and 5259 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
components/core/CodeTerminal.js
View File

@ -1,76 +0,0 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css, keyframes } from "@emotion/react";
const typewriter = keyframes`
0%, 100% {width: 0;}
20%, 80% {width: 10.2em;}
`;
const STYLES_ROOT = css`
height: 300px;
width: 500px;
@media (max-width: 600px) {
height: 230px;
width: 345px;
}
@media (max-width: 320px) {
height: 200px;
width: 300px;
}
`;
const STYLES_WINDOW = css`
box-sizing: border-box;
font-family: ${Constants.font.mono};
display: block;
border-radius: 4px;
width: 100%;
background: ${Constants.system.black};
min-height: 288px;
padding: 24px;
color: ${Constants.system.white};
resize: none;
font-size: 14px;
box-sizing: border-box;
outline: 0;
border: 0;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
scrollbar-width: none;
white-space: pre-wrap;
-ms-overflow-style: -ms-autohiding-scrollbar;
::-webkit-scrollbar {
display: none;
}
`;
const STYLES_WINDOW_NAV = css`
border-bottom: 5px solid red;
`;
const STYLES_WINDOW_BODY = css`
overflow: hidden;
white-space: nowrap;
animation: ${typewriter};
display: inline-block;
position: relative;
animation-duration: 10s;
animation-timing-function: steps(45, end);
animation-iteration-count: infinite;
`;
const CodeTerminal = () => {
return (
<div css={STYLES_ROOT}>
<div css={STYLES_WINDOW}>
<div css={STYLES_WINDOW_NAV}>Cat</div>
<div css={STYLES_WINDOW_BODY}>npm install --save slate-react-system</div>
</div>
</div>
);
};
export default CodeTerminal;

91
components/core/marketing/CodeTerminal.js
View File

@ -1,91 +0,0 @@
import * as React from "react";
import * as Constants from "~/common/constants";
import { css, keyframes } from "@emotion/react";
const typewriter = keyframes`
0% {
width: 0;
}
50% {
width: 10.2em;
}
100% {
width: 0;
}
`;
const STYLES_ROOT = css`
height: 300px;
width: 500px;
background-color: ${Constants.system.black};
border-radius: 5px;
@media (${Constants.sizes.tablet}px) {
height: 230px;
width: 345px;
}
@media (${Constants.sizes.mobile}px) {
height: 200px;
width: 300px;
}
`;
const STYLES_WINDOW_HEADER = css`
height: 34px;
display: flex;
align-items: center;
text-align: center;
@media (${Constants.sizes.mobile}px) {
height: 28px;
}
`;
const STYLES_ICON = css`
border-radius: 50%;
display: inline-block;
width: 12px;
height: 12px;
margin-left: 8px;
:nth-of-type(1) {
background: rgb(255, 95, 86);
margin-left: 12px;
}
:nth-of-type(2) {
background: rgb(255, 189, 46);
}
:nth-of-type(3) {
background: rgb(39, 201, 63);
}
`;
const STYLES_WINDOW_BODY = css`
padding: 24px;
overflow: hidden;
white-space: nowrap;
color: ${Constants.system.white};
animation: ${typewriter};
display: inline-block;
position: relative;
animation-duration: 10s;
animation-timing-function: steps(45, end);
animation-iteration-count: infinite;
`;
const CodeTerminal = () => {
return (
<div css={STYLES_ROOT}>
<div css={STYLES_WINDOW_HEADER}>
<span css={STYLES_ICON} />
<span css={STYLES_ICON} />
<span css={STYLES_ICON} />
</div>
<div css={STYLES_WINDOW_BODY}>npm install --save slate-react-system</div>
</div>
);
};
export default CodeTerminal;

125
pages/_/system/avatar-group.js
View File

@ -1,125 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
import Group from "~/components/system/Group";
const images = [
"https://image.flaticon.com/icons/svg/145/145843.svg",
"https://image.flaticon.com/icons/svg/387/387561.svg",
"https://image.flaticon.com/icons/svg/3227/3227891.svg",
"https://image.flaticon.com/icons/svg/3227/3227891.svg",
"https://image.flaticon.com/icons/svg/3227/3227891.svg",
"https://image.flaticon.com/icons/svg/3227/3227891.svg",
];
export default class SystemAvatarGroup extends React.Component {
render() {
return (
<SystemPage
title="SDS: Avatar Group"
description="..."
url="https://slate.host/_/system/avatar-group"
>
<System.H1>
Avatar Group <ViewSourceLink file="system/avatar-group.js" />
</System.H1>
<br />
<br />
<System.P1>
The AvatarGroup component is a compact way to show a group users or contributors.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the AvatarGroup Component.</System.P1>
<br />
<CodeBlock>
{`import * as React from "react";
import { AvatarGroup } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Create an array of images.</System.P1>
<br />
<CodeBlock>
{`const images = [
"avatar-01.jpg",
"avatar-02.jpg",
"avatar-04.jpg",
"avatar-05.jpg",
"avatar-06.jpg",
];`}
</CodeBlock>
<br />
<br />
<System.P1>Declare the AvatarGroup component.</System.P1>
<br />
<CodeBlock>{`<AvatarGroup avatars={images} />`}</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.AvatarGroup avatars={images} size="48" />
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="AvatarGroup">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "size",
b: "int",
c: "32",
d: "Size of the avatar images in pixels",
},
{
id: 2,
a: "limit",
b: "int",
c: "3",
d: "Limit the number of visable avatars",
},
{
id: 3,
a: "avatars",
b: "array",
c: "[]",
d: "An array of images",
},
{
id: 5,
a: "border",
b: "string",
c: "white",
d: "Avatar border color",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

238
pages/_/system/buttons.js
View File

@ -1,238 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
import Group from "~/components/system/Group";
export default class SystemPageButtons extends React.Component {
render() {
return (
<SystemPage title="SDS: Buttons" description="..." url="https://slate.host/_/system/buttons">
<System.H1>
Buttons <ViewSourceLink file="system/buttons.js" />
</System.H1>
<br />
<br />
<System.P1>
The Button component is used to trigger an action or event, such as submitting a form or
saving users information.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the Button Components.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import {
ButtonPrimary,
ButtonSecondary,
ButtonTertiary,
ButtonDisabled,
ButtonWarning,
} from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Regular width</System.H2>
<hr />
<br />
<System.P1>
There are five variations of the button component.
<br />
Primary, Secondary, Tertiary, Disabled, and Warning.
</System.P1>
<br />
<System.ButtonPrimary>Primary</System.ButtonPrimary> &nbsp;
<System.ButtonSecondary>Secondary</System.ButtonSecondary> &nbsp;
<System.ButtonTertiary>Tertiary</System.ButtonTertiary> &nbsp;
<System.ButtonDisabled>Disabled</System.ButtonDisabled> &nbsp;
<System.ButtonWarning>Warning</System.ButtonWarning>
<br />
<br />
<CodeBlock>
{`class ExamplePrimary extends React.Component {
render() {
return <ButtonPrimary>Primary Button</ButtonPrimary>;
}
}
class ExampleSecondary extends React.Component {
render() {
return <ButtonSecondary>Secondary Button</ButtonSecondary>;
}
}
class ExampleTertiary extends React.Component {
render() {
return <ButtonTertiary>Tertiary Button</ButtonTertiary>;
}
}
class ExampleDisabled extends React.Component {
render() {
return <ButtonDisabled>Disabled Button</ButtonDisabled>;
}
}
class ExampleWarning extends React.Component {
render() {
return <ButtonWarning>Warning Button</ButtonWarning>;
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Full width</System.H2>
<hr />
<br />
<System.P1>Each of the button styles has a full width option.</System.P1>
<br />
<System.ButtonPrimary full>Primary button full</System.ButtonPrimary>
<br />
<br />
<System.ButtonSecondary full>Secondary button full</System.ButtonSecondary>
<br />
<br />
<System.ButtonTertiary full>Tertiary button full</System.ButtonTertiary>
<br />
<br />
<System.ButtonDisabled full>Disabled button full</System.ButtonDisabled>
<br />
<br />
<System.ButtonWarning full>Warning button full</System.ButtonWarning>
<br />
<br />
<br />
<CodeBlock>
{`class ExamplePrimaryFull extends React.Component {
render() {
return <ButtonPrimary full>Primary button full</ButtonPrimary>;
}
}
class ExampleSecondaryFull extends React.Component {
render() {
return <ButtonSecondary full>Secondary button full</ButtonSecondary>;
}
}
class ExampleTertiaryFull extends React.Component {
render() {
return <ButtonTertiary full>Tertiary button full</ButtonTertiary>;
}
}
class ExampleDisabledFull extends React.Component {
render() {
return <ButtonDisabled full>Disabled button full</ButtonDisabled>;
}
}
class ExampleWarningFull extends React.Component {
render() {
return <ButtonWarning full>Warning button full</ButtonWarning>;
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Labels</System.H2>
<hr />
<br />
<System.P1>
You can add the <i>type='label'</i> property to convert any of the above buttons into a
label.
</System.P1>
<br />
<System.ButtonPrimary type="label">Primary label</System.ButtonPrimary> &nbsp;
<System.ButtonSecondary type="label">Secondary label</System.ButtonSecondary> &nbsp;
<System.ButtonTertiary type="label">Tertiary label</System.ButtonTertiary> &nbsp;
<System.ButtonDisabled type="label">Disabled label</System.ButtonDisabled> &nbsp;
<br />
<br />
<System.ButtonWarning type="label">Warning label</System.ButtonWarning>
<br />
<br />
<CodeBlock>
{`class ExamplePrimaryLabel extends React.Component {
render() {
return <ButtonPrimary type="label">Primary Button Label</ButtonPrimary>;
}
}
class ExampleSecondaryLabel extends React.Component {
render() {
return (
<ButtonSecondary type="label">Secondary Button Label</ButtonSecondary>
);
}
}
class ExampleTertiaryLabel extends React.Component {
render() {
return (
<ButtonTertiary type="label">Tertiary Button Label</ButtonTertiary>
);
}
}
class ExampleDisabledLabel extends React.Component {
render() {
return <ButtonDisabled type="label">Disabled Button Label</ButtonDisabled>;
}
}
class ExampleWarningLabel extends React.Component {
render() {
return <ButtonWarning type="label">Warning Button Label</ButtonWarning>;
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Buttons">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "type",
b: "string",
c: "null",
d: "If set to 'label', button will be a label.",
},
{
id: 2,
a: "full",
b: "boolean",
c: "false",
d:
"If true, width is set to 100%. Otherwise, width is according to the content of the button.",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

109
pages/_/system/card-3d.js
View File

@ -1,109 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const STYLES_WRAPPER = css`
height: 200px;
width: 320px;
`;
const STYLES_LAYER = css`
position: absolute;
width: 100%;
height: 100%;
top: 0%;
left: 0%;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
background-size: cover;
transition: all 0.1s ease-out;
overflow: hidden;
border-radius: 8px;
`;
export default class SystemPageCard3D extends React.Component {
render() {
return (
<SystemPage title="SDS: 3D Card" description="..." url="https://slate.host/_/system/card-3d">
<System.H1>
3D Card <ViewSourceLink file="system/card-3d.js" />
</System.H1>
<br />
<br />
<System.P1>
The 3D Card Component is a fluid card component used to display present any object in 3d.
It is a port of the vanilla JS <a href="https://codepen.io/robin-dela/pen/jVddbq">pen</a>{" "}
of <a href="https://codepen.io/robin-dela">Robin Delaporte</a> to React. The code is used
under the <a href="https://blog.codepen.io/documentation/licensing/">MIT license</a>.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import 3D Card Component.</System.P1>
<br />
<br />
<CodeBlock>{`import { Card3D } from 'slate-react-system';`}</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Declare the 3D Card Component.</System.P1>
<br />
<CodeBlock>
{`/* Custom styles for the container to set width and height */
<div css={STYLES_WRAPPER}>
<Card3D>
/* Any object with custom styles goes in here */
<div
css={STYLES_LAYER}
style={{
backgroundImage:
"url('http://robindelaporte.fr/codepen/visa-bg.jpg')"
}}
/>
<div
css={STYLES_LAYER}
style={{
backgroundImage:
"url('http://robindelaporte.fr/codepen/visa.png')"
}}
/>
</Card3D>
</div>`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<div css={STYLES_WRAPPER}>
<System.Card3D>
<div
css={STYLES_LAYER}
style={{
backgroundImage: "url('http://robindelaporte.fr/codepen/visa-bg.jpg')",
}}
/>
<div
css={STYLES_LAYER}
style={{
backgroundImage: "url('http://robindelaporte.fr/codepen/visa.png')",
}}
/>
</System.Card3D>
</div>
</SystemPage>
);
}
}

189
pages/_/system/card-tabs.js
View File

@ -1,189 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const TAB_GROUP_TWO = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
];
const TAB_GROUP_FOUR = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
{ value: "3", label: "Pisces" },
{ value: "4", label: "Aries" },
];
export default class SystemPageCardTabs extends React.Component {
state = {
exampleOne: "1",
exampleTwo: "4",
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage
title="SDS: Card Tabs"
description="..."
url="https://slate.host/_/system/card-tabs"
>
<System.H1>
Card Tabs <ViewSourceLink file="system/card-tabs.js" />
</System.H1>
<br />
<br />
<System.P1>
The CardTabGroup component is used to allow the users to switch between views.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the CardTabGroup Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { CardTabGroup } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Define the tab group values and labels.</System.P1>
<br />
<CodeBlock>
{`const TAB_GROUP_TWO = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
];
const TAB_GROUP_FOUR = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
{ value: "3", label: "Pisces" },
{ value: "4", label: "Aries" },
];`}
</CodeBlock>
<br />
<System.P1>Declare the CardTabGroup component.</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = { exampleOne: "1" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<CardTabGroup
name="exampleOne"
options={TAB_GROUP_TWO}
value={this.state.exampleOne}
onChange={this._handleChange}
/>
);
}
}
class ExampleTwo extends React.Component {
state = { exampleTwo: "4" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<CardTabGroup
name="exampleTwo"
options={TAB_GROUP_FOUR}
value={this.state.exampleTwo}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.CardTabGroup
name="exampleOne"
options={TAB_GROUP_TWO}
value={this.state.exampleOne}
onChange={this._handleChange}
/>
<br />
<br />
<System.CardTabGroup
name="exampleTwo"
options={TAB_GROUP_FOUR}
value={this.state.exampleTwo}
onChange={this._handleChange}
/>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Card Tabs">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>value</span>,
b: "boolean",
c: "false",
d:
"The value that is currently selected. Can be used to assign default values as well",
},
{
id: 3,
a: <span style={{ fontFamily: Constants.font.semiBold }}>options</span>,
b: "Array",
c: "[]",
d: "An array of options, each of which has a value and a label",
},
{
id: 4,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

170
pages/_/system/checkboxes.js
View File

@ -1,170 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageCheckboxes extends React.Component {
state = {
exampleOne: false,
exampleTwo: true,
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage
title="SDS: Checkboxes"
description="..."
url="https://slate.host/_/system/checkboxes"
>
<System.H1>
Checkboxes <ViewSourceLink file="system/checkboxes.js" />
</System.H1>
<br />
<br />
<System.P1>
The Checkbox component is used in forms when a users needs to select a true or false
value.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the CheckBox Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { CheckBox } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>
Declare the CheckBox component. Any children will be rendered as the label to the right of
the checkbox.
</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = { exampleOne: false };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<CheckBox
name="exampleOne"
value={this.state.exampleOne}
onChange={this._handleChange}
>
<strong>Unchecked</strong>
<br />
This CheckBox default is unchecked.
</CheckBox>
);
}
}
class ExampleTwo extends React.Component {
state = { ExampleTwo: true };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<CheckBox
name="ExampleTwo"
value={this.state.ExampleTwo}
onChange={this._handleChange}
>
<strong>Checked</strong>
<br />
This CheckBox default is checked.
</CheckBox>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.CheckBox
name="exampleOne"
value={this.state.exampleOne}
onChange={this._handleChange}
>
<strong>Unchecked</strong>
<br />
This CheckBox default is unchecked.
</System.CheckBox>
<br />
<br />
<System.CheckBox
name="exampleTwo"
value={this.state.exampleTwo}
onChange={this._handleChange}
>
<strong>Checked</strong>
<br />
This CheckBox default is checked.
</System.CheckBox>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Checkboxes">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>value</span>,
b: "boolean",
c: "false",
d: "The value of the checkbox. Can be used to assign default values as well",
},
{
id: 3,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

108
pages/_/system/colors.js
View File

@ -1,108 +0,0 @@
import * as React from "react";
import * as Strings from "~/common/strings";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const STYLES_COLOR_BAR = css`
width: 100%;
display: flex;
align-items: center;
padding: 72px 24px 0 0px;
`;
const STYLES_COLOR_TEXT = css`
display: block;
text-transform: uppercase;
letter-spacing: 0.2px;
font-size: 12px;
padding: 8px;
color: ${Constants.system.white};
background-color: rgba(0, 0, 0, 0.4);
margin-top: 8px;
`;
export default class SystemPageColors extends React.Component {
render() {
return (
<SystemPage title="SDS: Colors" description="..." url="https://slate.host/_/system/colors">
<System.H1>
Colors <ViewSourceLink file="system/colors.js" />
</System.H1>
<br />
<br />
<System.P1>All of the colors the Filecoin Client uses.</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import Constants.</System.P1>
<br />
<br />
<CodeBlock>{`import { Constants } from 'slate-react-system';`}</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Declare Constants.</System.P1>
<br />
<CodeBlock>
{`{Constants.system.white};
{Constants.semantic.bgLight};
{Constants.system.gray};
{Constants.semantic.borderGrayLight};
{Constants.system.grayLight2};
{Constants.system.black};
{Constants.system.black};
{Constants.system.blue};
{Constants.system.green};
{Constants.system.yellow};
{Constants.system.red};`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
{Object.keys(Constants.system).map((each) => {
const hex = Constants.system[each];
const rgba = Strings.hexToRGBA(hex);
return (
<div
key={each}
css={STYLES_COLOR_BAR}
style={{
backgroundColor: hex,
color: Constants.system.black,
}}
>
<span css={STYLES_COLOR_TEXT}>{each.toUpperCase()}</span>
<br />
<span css={STYLES_COLOR_TEXT}>{hex}</span>
<br />
<span css={STYLES_COLOR_TEXT}>{rgba}</span>
</div>
);
})}
</SystemPage>
);
}
}

289
pages/_/system/dropdowns.js
View File

@ -1,289 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const SELECT_MENU_OPTIONS = [
{ value: "1", name: "Capricorn" },
{ value: "2", name: "Aquarius" },
{ value: "3", name: "Pisces" },
{ value: "4", name: "Aries" },
{ value: "5", name: "Taurus" },
{ value: "6", name: "Gemini" },
{ value: "7", name: "Cancer" },
{ value: "8", name: "Leo" },
{ value: "9", name: "Virgo" },
{ value: "10", name: "Libra" },
{ value: "11", name: "Scorpio" },
{ value: "12", name: "Sagittarus" },
];
export default class SystemPageDropdowns extends React.Component {
state = {
exampleOne: "1",
exampleTwo: "3",
exampleThree: "United States of America",
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage
title="SDS: Dropdowns"
description="..."
url="https://slate.host/_/system/dropdowns"
>
<System.H1>
Dropdowns <ViewSourceLink file="system/dropdowns.js" />
</System.H1>
<br />
<br />
<System.P1>
The Dropdown component is used to present the user a list of values where they can select
a single option.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>
Import React and the <System.CodeText>SelectMenu</System.CodeText> and/or the{" "}
<System.CodeText>SelectCountryMenu</System.CodeText> Components.
</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { SelectMenu, SelectCountryMenu } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Dropdown</System.H2>
<hr />
<br />
<System.SelectMenu
label="Pick a horoscope"
name="exampleOne"
value={this.state.exampleOne}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}
/>
<br />
<br />
<System.SelectMenu
label="Pick a horoscope (full length)"
name="exampleTwo"
full
value={this.state.exampleTwo}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}
/>
<br />
<br />
<br />
<System.P1>
Define the dropdown menu options. Each entry must have a name and a value.
</System.P1>
<br />
<CodeBlock>
{`const SELECT_MENU_OPTIONS = [
{ value: "1", name: "Capricorn" },
{ value: "2", name: "Aquarius" },
{ value: "3", name: "Pisces" },
{ value: "4", name: "Aries" },
{ value: "5", name: "Taurus" },
{ value: "6", name: "Gemini" },
{ value: "7", name: "Cancer" },
{ value: "8", name: "Leo" },
{ value: "9", name: "Virgo" },
{ value: "10", name: "Libra" },
{ value: "11", name: "Scorpio" },
{ value: "12", name: "Sagittarus" },
];`}
</CodeBlock>
<br />
<br />
<System.P1>
Declare the Dropdown component. Default values can be assigned using{" "}
<System.CodeText>value</System.CodeText>.
</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = { exampleOne: "1" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<SelectMenu
label="Pick a horoscope"
name="exampleOne"
value={this.state.exampleOne}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}
/>
);
}
}
class ExampleTwo extends React.Component {
state = { exampleTwo: "3" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<SelectMenu
label="Pick a horoscope (full length)"
name="exampleTwo"
full
value={this.state.exampleTwo}
category="horoscope"
onChange={this._handleChange}
options={SELECT_MENU_OPTIONS}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Country Picker Dropdown</System.H2>
<hr />
<br />
<System.SelectCountryMenu
label="Pick your country"
name="exampleThree"
full
value={this.state.exampleThree}
category="country"
onChange={this._handleChange}
/>
<br />
<br />
<br />
<System.P1>Declare a dropdown to select from a list of countries.</System.P1>
<br />
<CodeBlock>
{`class ExampleThree extends React.Component {
state = { exampleThree: "United States of America" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<SelectCountryMenu
label="Pick your country"
name="countryMenu"
full
value={this.state.countryMenu}
category="country"
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Dropdowns">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>options</span>,
b: "Array",
c: "[]",
d:
"Array of options to select from. Each object in the array should have a name and value",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 3,
a: <span style={{ fontFamily: Constants.font.semiBold }}>value</span>,
b: "string",
c: "null",
d:
"The value that the dropdown takes. Can be used to assign default values as well.",
},
{
id: 4,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
{
id: 5,
a: "label",
b: "string",
c: "null",
d: "Label text",
},
{
id: 6,
a: "description",
b: "string",
c: "null",
d: "Description text",
},
{
id: 7,
a: "tooltip",
b: "string",
c: "null",
d: "Tooltip text",
},
{
id: 8,
a: "full",
b: "boolean",
c: "false",
d: "Sets width to 100% if true",
},
{
id: 9,
a: "category",
b: "string",
c: "null",
d: "Category text",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

103
pages/_/system/hover-tile.js
View File

@ -1,103 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemHoverTile extends React.Component {
render() {
return (
<SystemPage
title="SDS: Hover Tile"
description="..."
url="https://slate.host/_/system/hover-tile"
>
<System.H1>
Hover Tile <ViewSourceLink file="system/hover-tile.js" />
</System.H1>
<br />
<br />
<System.P1>The Hover Tile component is an animated, moving container.</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the Hover Tile Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { HoverTile } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Declare the Hover Tile component.</System.P1>
<CodeBlock>
{`class Example extends React.Component {
render() {
return (
<HoverTile style={{ padding: 24 }}>
Example Content
</HoverTile>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.HoverTile style={{ padding: 24 }}>Example Content</System.HoverTile>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Hover Tiles">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "width",
b: "number",
c: "300",
d: "Hover Tile width",
},
{
id: 2,
a: "height",
b: "number",
c: "300",
d: "Hover Tile height",
},
{
id: 3,
a: "style",
b: "Object",
c: "{}",
d: "Style object used to style the Hover Tile (background-color, etc.)",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

111
pages/_/system/icons.js
View File

@ -1,111 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as SVG from "~/common/svg";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const DEFAULT_SYSTEM_ICON_SIZE = "88px";
const ICONS = [
<SVG.BandwidthUp height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.BandwidthDown height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Information height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.CopyAndPaste height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Plus height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.CheckBox height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Layers height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Slates height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Home height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Activity height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Directory height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Folder height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Wallet height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.Deals height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.HardDrive height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.ProfileUser height={DEFAULT_SYSTEM_ICON_SIZE} />,
<SVG.SettingsDeveloper height={DEFAULT_SYSTEM_ICON_SIZE} />,
];
const STYLES_ICON = css`
padding: 24px;
color: ${Constants.system.black};
display: inline-flex;
transition: 200ms ease color;
text-align: center;
:hover {
color: ${Constants.system.blue};
}
`;
export default class SystemPageIcons extends React.Component {
render() {
return (
<SystemPage title="SDS: Icons" description="..." url="https://slate.host/_/system/icons">
<System.H1>
Icons <ViewSourceLink file="system/icons.js" />
</System.H1>
<br />
<br />
<System.P1>Every icon used in the Filecoin Client.</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import the SVG Components.</System.P1>
<br />
<br />
<CodeBlock>{`import { SVG } from "slate-react-system";`}</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Declare the SVG icons.</System.P1>
<br />
<CodeBlock>
{`<SVG.Home height='88px' />
<SVG.Folder height='88px' />
<SVG.Wallet height='88px' />
<SVG.Channels height='88px' />
<SVG.Deals height='88px' />
<SVG.Peers height='88px' />
<SVG.Deals height='88px' />
<SVG.Status height='88px' />
<SVG.Stats height='88px' />
<SVG.DataTransfer height='88px' />
<SVG.Logs height='88px' />
<SVG.Miners height='88px' />
<SVG.StorageMarket height='88px' />
<SVG.Slates height='88px' />
<SVG.BandwidthUp height='88px' />
<SVG.BandwidthDown height='88px' />
<SVG.Information height='88px' />
<SVG.CopyAndPaste height='88px' />
<SVG.FileImage height='88px' />
<SVG.Plus height='88px' />
<SVG.CheckBox height='88px' />`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
{ICONS.map((icon, i) => {
return (
<div css={STYLES_ICON} key={i}>
{icon}
</div>
);
})}
</SystemPage>
);
}
}

434
pages/_/system/inputs.js
View File

@ -1,434 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import * as SVG from "~/common/svg";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageInputs extends React.Component {
state = {
exampleOne: "Example text",
exampleTwo: "",
exampleThree: "",
exampleFour: "aaaaa-bbbbb-ccccc-ddddd-eeee",
exampleFive: "Click the 'x'",
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage title="SDS: Inputs" description="..." url="https://slate.host/_/system/inputs">
<System.H1>
Inputs <ViewSourceLink file="system/inputs.js" />
</System.H1>
<br />
<br />
<System.P1>
The Input component is used to get a users input in a text field or a textbox.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the Input and/or the Textarea Components.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { Input, Textarea } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Textarea</System.H2>
<hr />
<br />
<System.P1>Declare the Textarea component.</System.P1>
<br />
<System.Textarea
name="exampleOne"
value={this.state.exampleOne}
onChange={this._handleChange}
/>
<br />
<CodeBlock>
{`class ExampleTextarea extends React.Component {
state = { exampleOne: "Example text" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Textarea
name="exampleOne"
value={this.state.exampleOne}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Input with label and description</System.H2>
<hr />
<br />
<System.P1>Declare the Input component with a label and description value.</System.P1>
<br />
<System.Input
label="Location of your pastries"
description="We need to know the location of your pastries."
tooltip="Hey friends."
name="exampleTwo"
value={this.state.exampleTwo}
placeholder="Pastry Location"
onChange={this._handleChange}
/>
<br />
<CodeBlock>
{`class ExampleLabel extends React.Component {
state = { exampleTwo: null };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Input
label="Location of your pastries"
description="We need to know the location of your pastries."
tooltip="Hey friends."
name="exampleTwo"
value={this.state.exampleTwo}
placeholder="Pastry Location"
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Input with max length</System.H2>
<hr />
<br />
<System.P1>
Declare the Input component with the maximum number of characters allowed.
</System.P1>
<br />
<System.Input
label="Max length is 14"
max={14}
name="exampleThree"
value={this.state.exampleThree}
onChange={this._handleChange}
/>
<br />
<CodeBlock>
{`class ExampleMax extends React.Component {
state = { exampleThree: null };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Input
label="Max length is 14"
max={14}
name="exampleThree"
value={this.state.exampleThree}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Input with copy and paste</System.H2>
<hr />
<br />
<System.P1>Declare the Input component with copyable.</System.P1>
<br />
<System.Input
label="Copy and paste (read only)"
readOnly
name="exampleFour"
copyable
value={this.state.exampleFour}
onChange={this._handleChange}
/>
<br />
<CodeBlock>
{`class ExampleCopyPaste extends React.Component {
state = { exampleFour: "aaaaa-bbbbb-ccccc-ddddd-eeee" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Input
label="Copy and paste (read only)"
readOnly
name="exampleFour"
copyable
value={this.state.exampleFour}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Input with icon and onSubmit</System.H2>
<hr />
<br />
<System.P1>
Declare the Input component with an icon and an onSubmit function. onSubmit will be
triggered upon click of the icon and upon key down of the enter key.
</System.P1>
<br />
<System.Input
label="Icon and submit function"
name="exampleFive"
icon={SVG.Dismiss}
onSubmit={() => {
this.setState({ exampleFive: "" });
}}
value={this.state.exampleFive}
onChange={this._handleChange}
/>
<br />
<CodeBlock>
{`class ExampleCopyPaste extends React.Component {
state = { exampleFive: "Click the 'x'" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Input
label="Icon with submit function"
name="exampleFive"
icon={SVG.Dismiss}
onSubmit={() => {
this.setState({ exampleFive: "" });
}}
value={this.state.exampleFive}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Input with validation</System.H2>
<hr />
<br />
<System.P1>Declare the Input component with validation.</System.P1>
<br />
<System.Input
label="Success"
placeholder="This is an uncontrolled input for success."
validation="SUCCESS"
/>
<br />
<br />
<System.Input
label="Warning"
placeholder="This is an uncontrolled input for warning."
validation="WARNING"
/>
<br />
<br />
<System.Input
label="Error"
placeholder="This is an uncontrolled input for error."
validation="ERROR"
/>
<br />
<CodeBlock>
{`class ExampleSuccess extends React.Component {
render() {
return (
<Input
label="Success"
placeholder="This is an uncontrolled input for success."
validation="SUCCESS"
/>
);
}
}
class ExampleWarning extends React.Component {
render() {
return (
<Input
label="Warning"
placeholder="This is an uncontrolled input for warning."
validation="WARNING"
/>
);
}
}
class ExampleError extends React.Component {
render() {
return (
<Input
label="Error"
placeholder="This is an uncontrolled input for error."
validation="ERROR"
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Inputs">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event.",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>value</span>,
b: "string",
c: "null",
d:
"The value that the dropdown takes. Can be used to assign default values as well.",
},
{
id: 3,
a: "name",
b: "string",
c: "null",
d: "Input name.",
},
{
id: 4,
a: "label",
b: "string",
c: "null",
d: "Label text.",
},
{
id: 5,
a: "description",
b: "string",
c: "null",
d: "Description text.",
},
{
id: 6,
a: "tooltip",
b: "string",
c: "null",
d: "Tooltip text.",
},
{
id: 7,
a: "full",
b: "boolean",
c: "false",
d: "Sets width to 100% if true",
},
{
id: 8,
a: "max",
b: "int",
c: "null",
d: "Max number of input characters.",
},
{
id: 9,
a: "validation",
b: "string",
c: "null",
d: "Validation style. Use: SUCCESS, WARNING or ERROR.",
},
{
id: 10,
a: "copyable",
b: "boolean",
c: "false",
d:
"Adds a copy icon to the input and upon click, copies the input value to the clipboard.",
},
{
id: 11,
a: "icon",
b: "SVG",
c: "null",
d:
"Icon on the right side of the input box. If an onSubmit is specified, it will trigger on click. Specifying an icon overrides copyable.",
},
{
id: 12,
a: "unit",
b: "string",
c: "null",
d:
"Adds a string to the right side of the input box to indicate a unit of measurement.",
},
{
id: 13,
a: "onSubmit",
b: "function",
c: "null",
d:
"Function called when the enter key is pressed and when the icon (if present) is clicked.",
},
{
id: 14,
a: "containerStyle",
b: "object",
c: "null",
d:
"Style object applied to the container that holds the label, description, and input box.",
},
{
id: 15,
a: "style",
b: "object",
c: "null",
d: "Style object applied to the input box.",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

156
pages/_/system/line-chart.js
View File

@ -1,156 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
import Chart from "~/components/stats/Chart";
const data = [
{ id: 1, date: "December 17, 1995 03:24:00", category: "1", value: 100 },
{ id: 2, date: "December 17, 2000 03:24:00", category: "1", value: 150 },
{ id: 3, date: "December 17, 2005 03:24:00", category: "1", value: 200 },
{ id: 4, date: "December 17, 2007 03:24:00", category: "1", value: 100 },
{ id: 5, date: "December 17, 2008 03:24:00", category: "1", value: 250 },
{ id: 6, date: "December 17, 2010 03:24:00", category: "1", value: 110 },
{ id: 7, date: "December 17, 1995 03:24:00", category: "2", value: 150 },
{ id: 8, date: "December 17, 2000 03:24:00", category: "2", value: 200 },
{ id: 9, date: "December 17, 2005 03:24:00", category: "2", value: 100 },
{ id: 10, date: "December 17, 2010 03:24:00", category: "2", value: 150 },
{ id: 11, date: "December 17, 1995 03:24:00", category: "3", value: 200 },
{ id: 12, date: "December 17, 2000 03:24:00", category: "3", value: 100 },
{ id: 13, date: "December 17, 2005 03:24:00", category: "3", value: 150 },
{ id: 14, date: "December 17, 2010 03:24:00", category: "3", value: 200 },
];
// Use this to determine how many tick marks to be written on X axis
const tickNumber = 4;
//Use this to choose how much of the chart is filled vertically displayMax = 500
const yCeiling = 400;
//Use this to choose how much of the chart is filled horizontally displayMax = 550
const xWall = 500;
export default class SystemPageLineCharts extends React.Component {
render() {
return (
<SystemPage
title="SDS: Line Chart"
description="..."
url="https://fps.onrender.com/system/line-chart"
>
<System.H1>
Line Chart <ViewSourceLink file="system/line-chart.js" />
</System.H1>
<br />
<br />
<System.P1>
The Line Chart component displays categories of data points on a line chart.
</System.P1>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Create an array of data.</System.P1>
<br />
<CodeBlock>{`
const data = [
{ id: 1, date: "December 17, 1995 03:24:00", category: "1", value: 100 },
{ id: 2, date: "December 17, 2000 03:24:00", category: "1", value: 150 },
{ id: 3, date: "December 17, 2005 03:24:00", category: "1", value: 200 },
{ id: 4, date: "December 17, 2007 03:24:00", category: "1", value: 100 },
{ id: 5, date: "December 17, 2008 03:24:00", category: "1", value: 250 },
{ id: 6, date: "December 17, 2010 03:24:00", category: "1", value: 110 },
{ id: 7, date: "December 17, 1995 03:24:00", category: "2", value: 150 },
{ id: 8, date: "December 17, 2000 03:24:00", category: "2", value: 200 },
{ id: 9, date: "December 17, 2005 03:24:00", category: "2", value: 100 },
{ id: 10, date: "December 17, 2010 03:24:00", category: "2", value: 150 },
{ id: 11, date: "December 17, 1995 03:24:00", category: "3", value: 200 },
{ id: 12, date: "December 17, 2000 03:24:00", category: "3", value: 100 },
{ id: 13, date: "December 17, 2005 03:24:00", category: "3", value: 150 },
{ id: 14, date: "December 17, 2010 03:24:00", category: "3", value: 200 },
];
`}</CodeBlock>
<br />
<System.P1>Configure chart layout.</System.P1>
<br />
<CodeBlock>{`// Use this to determine how many tick marks to be written on X axis
const tickNumber = 4;
//Use this to choose how much of the chart is filled vertically displayMax = 500
const yCeiling = 400;
//Use this to choose how much of the chart is filled horizontally displayMax = 550
const xWall = 500;`}</CodeBlock>
<br />
<System.P1>Declare the LineChart component.</System.P1>
<br />
<CodeBlock>{`
<Chart
data={data}
maxTicks={tickNumber}
yCeiling={yCeiling}
xWall={xWall}
/>`}</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<Chart data={data} maxTicks={tickNumber} yCeiling={yCeiling} xWall={xWall} />
<hr />
<br />
<br />
<br />
<System.H2>Props</System.H2>
<hr />
<br />
<Group title="LineChart">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "data",
b: "array",
c: "null",
d: "The value listed in the header of the LineChart",
},
{
id: 2,
a: "maxTicks",
b: "number",
c: "null",
d: "Determine how many tick marks to be written on X axis",
},
{
id: 3,
a: "yCeiling",
b: "number",
c: "null",
d: "Choose how much of the chart is filled vertically",
},
{
id: 3,
a: "xWall",
b: "number",
c: "null",
d: "Choose how much of the chart is filled horizontally",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

166
pages/_/system/list-editor.js
View File

@ -1,166 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageListEditor extends React.Component {
state = {
flavors: [
"Chocolate",
"Vanilla",
"Mint Chip",
"Pistachio",
"Neapolitan",
"Toffee",
"Rocky Road",
],
};
_handleListChange = ({ name, value }) => {
this.setState({ [name]: value });
};
render() {
return (
<SystemPage
title="SDS: List Editor"
description="..."
url="https://slate.host/_/system/list-editor"
>
<System.H1>
List Editor <ViewSourceLink file="system/listeditor.js" />
</System.H1>
<br />
<br />
<System.P1>
The List Editor component allows the user to add to, delete from, and reorder a list of
strings.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the ListEditor Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { ListEditor } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>List Editor</System.H2>
<hr />
<br />
<System.ListEditor
placeholder="Add a flavor"
name="flavors"
options={this.state.flavors}
onChange={this._handleListChange}
/>
<br />
<System.P1>Define the List Editor component.</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = {
flavors: [
"Chocolate",
"Vanilla",
"Mint Chip",
"Pistachio",
"Neapolitan",
"Toffee",
"Rocky Road",
],
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<ListEditor
placeholder="Add a flavor"
name="flavors"
options={this.state.flavors}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="List Editor">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>options</span>,
b: "Array",
c: "null",
d:
"Values to choose from and reorder. Can be used to specify the default value. An array of strings.",
},
{
id: 3,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
{
id: 4,
a: "label",
b: "string",
c: "null",
d: "Label text",
},
{
id: 5,
a: "description",
b: "string",
c: "null",
d: "Description text",
},
{
id: 6,
a: "tooltip",
b: "string",
c: "null",
d: "Tooltip text",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

93
pages/_/system/loaders.js
View File

@ -1,93 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemLoaders extends React.Component {
render() {
return (
<SystemPage title="SDS: Loaders" description="..." url="https://slate.host/_/system/loaders">
<System.H1>
Loaders <ViewSourceLink file="system/loaders.js" />
</System.H1>
<br />
<br />
<System.P1>The Loader Component is used to output an animated page loader.</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import the Loader Components.</System.P1>
<br />
<br />
<CodeBlock>
{`import {
LoaderCircles,
LoaderDiamonds,
LoaderMoon,
LoaderRotate,
LoaderProgress,
LoaderSpinner,
} from "slate-react-system";
`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Circles</System.P1>
<br />
<System.LoaderCircles />
<br />
<CodeBlock>{`<LoaderCircles />`}</CodeBlock>
<br />
<br />
<br />
<System.P1>Progress Bar</System.P1>
<br />
<System.LoaderProgress />
<br />
<CodeBlock>{`<LoaderProgress />`}</CodeBlock>
<br />
<br />
<br />
<System.P1>Spinner</System.P1>
<br />
<System.LoaderSpinner />
<br />
<br />
<CodeBlock>{`<LoaderSpinner />`}</CodeBlock>
<br />
<br />
<br />
<System.P1>Diamonds</System.P1>
<br />
<System.LoaderDiamonds />
<br />
<CodeBlock>{`<LoaderDiamonds />`}</CodeBlock>
<br />
<br />
<br />
<System.P1>Rotate</System.P1>
<br />
<System.LoaderRotate />
<br />
<CodeBlock>{`<LoaderRotate />`}</CodeBlock>
<br />
<br />
<br />
<System.P1>Moon</System.P1>
<br />
<System.LoaderMoon />
<br />
<CodeBlock>{`<LoaderMoon />`}</CodeBlock>
</SystemPage>
);
}
}

483
pages/_/system/notifications.js
View File

@ -1,483 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import * as Events from "~/common/custom-events";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageNotifications extends React.Component {
state = {
count: 0,
};
_handleCreate = (detail) => {
Events.dispatchCustomEvent({ name: "create-notification", detail: detail });
this.setState({ count: this.state.count + 1 });
};
_handleDelete = () => {
Events.dispatchCustomEvent({ name: "delete-notification", detail: {} });
};
render() {
return (
<SystemPage
title="SDS: Notifications"
description="..."
url="https://slate.host/_/system/notifications"
>
<System.H1>
Notifications <ViewSourceLink file="system/notification.js" />
</System.H1>
<br />
<br />
<System.P1>
The Notification component is used to alert a user of new information.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>
Import React and the Notification Component, as well as the dispatchCustomEvent function.
</System.P1>
<br />
<CodeBlock>
{`import * as React from "react";
import { GlobalNotification, dispatchCustomEvent } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>
Declare the component at the root level of your document (e.g. in index.js or App.js) so
it is accessible throughout and will not get buried in the DOM tree.
</System.P1>
<br />
<System.P1>
Use <System.CodeText>style</System.CodeText> to specify placement of the fixed positioning
notification list. Default is bottom right.
</System.P1>
<br />
<CodeBlock>
{`class App extends React.Component {
render() {
return (
<React.Fragment>
<GlobalNotification style={{ bottom: 0, right: 0 }} />
{this.props.children}
</React.Fragment>
);
}
}`}
</CodeBlock>
<System.GlobalNotification style={{ bottom: 0, right: 0 }} />
<br />
<br />
<br />
<System.H2>Notification</System.H2>
<hr />
<br />
<System.ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is a regular notification",
})
}
>
Click for notification
</System.ButtonSecondary>
<br />
<System.ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is a dark notification",
dark: true,
})
}
>
Click for dark style notification
</System.ButtonSecondary>
<br />
<System.ButtonPrimary full onClick={this._handleDelete}>
Click to clear notifications
</System.ButtonPrimary>
<br />
<System.P1>
A notification will only appear once you trigger it by creating a custom event with the
title <System.CodeText>"create-notification"</System.CodeText>. It can be removed with a
custom event entitled <System.CodeText>"delete-notification"</System.CodeText>.
</System.P1>
<br />
<System.P1>
Multiple stacked notifications can be created using a single Notification component.{" "}
<strong>Each co-existing notification must have a unique id.</strong>
</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = {
count: 0,
};
_handleCreate = (detail) => {
dispatchCustomEvent({ name: "create-notification", detail: detail });
this.setState({ count: this.state.count + 1 });
};
_handleDelete = () => {
dispatchCustomEvent({ name: "delete-notification", detail: {} });
};
render() {
return (
<React.Fragment>
<ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is notification number " + this.state.count,
})
}
>
Click for notification
</ButtonSecondary>
<br />
<ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is a dark notification",
dark: true,
})
}
>
Click for dark style notification
</ButtonSecondary>
<ButtonPrimary full onClick={this._handleDelete}>
Click to clear notifications
</ButtonPrimary>
</React.Fragment>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Notification with timeout</System.H2>
<hr />
<br />
<System.ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This disappears after 5 seconds",
timeout: 5000,
})
}
>
Click for disappearing notification
</System.ButtonSecondary>
<br />
<System.ButtonPrimary full onClick={this._handleDelete}>
Click to clear notifications
</System.ButtonPrimary>
<br />
<System.P1>
You can declare the Notification component with a{" "}
<System.CodeText>timeout</System.CodeText> (in milliseconds) after which it will
automatically disappear.
</System.P1>
<br />
<CodeBlock>
{`class ExampleTwo extends React.Component {
state = {
count: 0,
};
_handleCreate = (detail) => {
dispatchCustomEvent({ name: "create-notification", detail: detail });
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<React.Fragment>
<ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This disappears after 5 seconds",
timeout: 5000,
})
}
>
Click for disappearing notification
</ButtonSecondary>
<ButtonPrimary full onClick={this._handleDelete}>
Click to clear notifications
</ButtonPrimary>
</React.Fragment>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Notification with status</System.H2>
<hr />
<br />
<System.ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is an info notification",
status: "INFO",
})
}
>
Click for info style notification
</System.ButtonSecondary>
<br />
<System.ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is a success notification",
status: "SUCCESS",
})
}
>
Click for success style notification
</System.ButtonSecondary>
<br />
<System.ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is a warning notification",
status: "WARNING",
})
}
>
Click for warning style notification
</System.ButtonSecondary>
<br />
<System.ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is an error notification",
status: "ERROR",
})
}
>
Click for error style notification
</System.ButtonSecondary>
<br />
<System.ButtonPrimary full onClick={this._handleDelete}>
Click to clear notifications
</System.ButtonPrimary>
<br />
<br />
<System.P1>
Declare the Notification component with a <System.CodeText>status</System.CodeText> to
style it accordingly. This is overridden if <System.CodeText>dark</System.CodeText> is set
to true.
</System.P1>
<br />
<CodeBlock>
{`class ExampleThree extends React.Component {
state = {
count: 0,
};
_handleCreate = (detail) => {
dispatchCustomEvent({ name: "create-notification", detail: detail });
this.setState({ count: this.state.count + 1 });
};
_handleDelete = () => {
dispatchCustomEvent({ name: "delete-notification", detail: {} });
};
render() {
return (
<React.Fragment>
<ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is an info notification",
status: "INFO",
})
}
>
Click for info style notification
</ButtonSecondary>
<ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is a success notification",
status: "SUCCESS",
})
}
>
Click for success style notification
</ButtonSecondary>
<ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is a warning notification",
status: "WARNING",
})
}
>
Click for warning style notification
</ButtonSecondary>
<ButtonSecondary
full
onClick={() =>
this._handleCreate({
id: this.state.count,
description: "This is an error notification",
status: "ERROR",
})
}
>
Click for error style notification
</ButtonSecondary>
<ButtonPrimary full onClick={this._handleDelete}>
Click to clear notifications
</ButtonPrimary>
</React.Fragment>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Notifications">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "style",
b: "Object",
c: "{ bottom: 0, right: 0 }",
d: "Style object used to style the notification list positioning on the page",
},
],
}}
/>
</Group>
<br />
<br />
<br />
<System.H2>
Accepted <i>Create</i> Notification Properties
</System.H2>
<hr />
<br />
<System.P1>
Note that these properties are passed through a custom event rather than as react
properties.
</System.P1>
<br />
<Group title="Notifications">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>id</span>,
b: ["string", "number"],
c: "null",
d: "Notification id, must be unique for simultaneously existing notifications",
},
{
id: 2,
a: "status",
b: "string",
c: "null",
d:
"Status which determines the styling and color of the notification. Use INFO, SUCCESS, WARNING, or ERROR",
},
{
id: 3,
a: "timeout",
b: "int",
c: "null",
d: "Number of milliseconds before the notification automatically disappears",
},
{
id: 4,
a: "label",
b: "string",
c: "null",
d: "Label text",
},
{
id: 5,
a: "description",
b: "string",
c: "null",
d: "Description text",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

217
pages/_/system/radios.js
View File

@ -1,217 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const RADIO_GROUP_OPTIONS = [
{
value: "1",
label: (
<React.Fragment>
<strong>Option one</strong>
<br />I want to have cake and soda for breakfast.
</React.Fragment>
),
},
{
value: "2",
label: (
<React.Fragment>
<strong>Option two</strong>
<br />I want to have cake and soda for lunch.
</React.Fragment>
),
},
{
value: "3",
label: (
<React.Fragment>
<strong>Option three</strong>
<br />I want to have cake and soda for dinner.
</React.Fragment>
),
},
];
export default class SystemPageRadios extends React.Component {
state = {
exampleOne: "2",
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage title="SDS: Radios" description="..." url="https://slate.host/_/system/radios">
<System.H1>
Radios <ViewSourceLink file="system/radios.js" />
</System.H1>
<br />
<br />
<System.P1>
The Radio component is used when you require a user to select only one value in a series
of options.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the RadioGroup Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { RadioGroup } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Define the radio group values and labels.</System.P1>
<br />
<CodeBlock>
{`const RADIO_GROUP_OPTIONS = [
{
value: "1",
label: (
<React.Fragment>
<strong>Option one</strong>
<br />I want to have cake and soda for breakfast.
</React.Fragment>
),
},
{
value: "2",
label: (
<React.Fragment>
<strong>Option two</strong>
<br />I want to have cake and soda for lunch.
</React.Fragment>
),
},
{
value: "3",
label: (
<React.Fragment>
<strong>Option three</strong>
<br />I want to have cake and soda for dinner.
</React.Fragment>
),
},
];`}
</CodeBlock>
<br />
<System.P1>Declare the RadioGroup component.</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = { ExampleOne: "2" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<RadioGroup
name="ExampleOne"
options={RADIO_GROUP_OPTIONS}
selected={this.state.ExampleOne}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.RadioGroup
name="exampleOne"
options={RADIO_GROUP_OPTIONS}
selected={this.state.exampleOne}
onChange={this._handleChange}
/>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="RadioGroup">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>selected</span>,
b: "boolean",
c: "false",
d:
"The value that is currently selected. Can be used to assign default values as well",
},
{
id: 3,
a: <span style={{ fontFamily: Constants.font.semiBold }}>options</span>,
b: "Array",
c: "[]",
d: "An array of options, each of which has a value and a label",
},
{
id: 4,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
{
id: 5,
a: "label",
b: "string",
c: "null",
d: "Label text",
},
{
id: 6,
a: "description",
b: "string",
c: "null",
d: "Description text",
},
{
id: 7,
a: "tooltip",
b: "string",
c: "null",
d: "Tooltip text",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

339
pages/_/system/sliders.js
View File

@ -1,339 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageSliders extends React.Component {
state = {
one: 0,
two: 0,
three: 9500,
four: 0,
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage title="SDS: Sliders" description="..." url="https://slate.host/_/system/sliders">
<System.H1>
Sliders <ViewSourceLink file="system/sliders.js" />
</System.H1>
<br />
<br />
<System.P1>
The Slider component is used to select from a range of numeric values.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the Slider Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { Slider } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Slider</System.H2>
<hr />
<br />
<System.Slider
discrete
label="Discrete Slider"
value={this.state.one}
name="one"
min={0}
max={100}
step={20}
onChange={this._handleChange}
/>
<br />
<System.Slider
label="Continuous Slider"
value={this.state.two}
name="two"
min={0}
max={100}
step={20}
onChange={this._handleChange}
/>
<br />
<System.P1>
Declare the Slider component, specifying a <System.CodeText>min</System.CodeText>,{" "}
<System.CodeText>max</System.CodeText>, and <System.CodeText>step</System.CodeText>.
Declaring <System.CodeText>discrete</System.CodeText> true will yield a slider that snaps
to each step.
</System.P1>
<br />
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = {
one: 0,
two: 0,
};
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<div>
<System.Slider
discrete
label="Discrete Slider"
value={this.state.one}
name="one"
min={0}
max={100}
step={20}
onChange={this._handleChange}
/>
<System.Slider
label="Continuous Slider"
value={this.state.two}
name="two"
min={0}
max={100}
step={20}
onChange={this._handleChange}
/>
</div>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Slider with display</System.H2>
<hr />
<br />
<System.Slider
inputBox
label="Slider with Input Box"
min={9000}
max={10000}
step={100}
value={this.state.three}
name="three"
onChange={this._handleChange}
inputStyle={{ width: "80px" }}
/>
<br />
<System.Slider
bubble
label="Slider with Display Bubble"
min={-10}
max={10}
step={0.5}
value={this.state.four}
name="four"
onChange={this._handleChange}
/>
<br />
<System.P1>
You can declare the Slider component with <System.CodeText>inputBox</System.CodeText> or{" "}
<System.CodeText>bubble</System.CodeText> to include a display of the value. Values can be
entered in the input box and the input box can be styled with{" "}
<System.CodeText>inputStyle</System.CodeText>.
</System.P1>
<br />
<br />
<CodeBlock>
{`class ExampleTwo extends React.Component {
state = {
three: 9500,
four: 0,
};
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<div>
<System.Slider
inputBox
label="Slider with Input Box"
min={9000}
max={10000}
step={100}
value={this.state.one}
name="three"
onChange={this._handleChange}
inputStyle={{ width: "60px" }}
/>
<System.Slider
bubble
label="Slider with Display Bubble"
min={-10}
max={10}
step={0.5}
value={this.state.four}
name="four"
onChange={this._handleChange}
/>
</div>
);
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Toggles">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>value</span>,
b: "number",
c: "null",
d:
"The value that the slider takes. Can be used to assign default values as well.",
},
{
id: 3,
a: "name",
b: "string",
c: "null",
d: "Slider name.",
},
{
id: 4,
a: "label",
b: "string",
c: "null",
d: "Label text.",
},
{
id: 5,
a: "description",
b: "string",
c: "null",
d: "Description text.",
},
{
id: 6,
a: "tooltip",
b: "string",
c: "null",
d: "Tooltip text.",
},
{
id: 7,
a: "min",
b: "number",
c: "0",
d: "Lower end of range",
},
{
id: 8,
a: "max",
b: "number",
c: "100",
d: "Higher end of range",
},
{
id: 9,
a: "step",
b: "number",
c: "1",
d: "Increments in which values can be selected.",
},
{
id: 10,
a: "discrete",
b: "boolean",
c: "false",
d:
"If true, slider will snap to steps specified. Otherwise, slider is continuous",
},
{
id: 11,
a: "bubble",
b: "boolean",
c: "false",
d:
"If true, a bubble floating above the handle will be displayed with the selected value.",
},
{
id: 12,
a: "inputBox",
b: "boolean",
c: "false",
d:
"If true, an input box will be displayed with the selected value. The value can be edited using the input box.",
},
{
id: 13,
a: "inputStyle",
b: "Object",
c: "null",
d: "Style applied to the input box (useful for specifying width, etc).",
},
{
id: 14,
a: "containerStyle",
b: "Object",
c: "null",
d:
"Style applied to the container holding the slider and input box (useful for specifying margin or height, etc).",
},
,
{
id: 15,
a: "sliderBarStyle",
b: "Object",
c: "null",
d: "Style applied to the base slider bar (useful for specifying color etc).",
},
{
id: 16,
a: "activeBarStyle",
b: "Object",
c: "null",
d: "Style applied to the active slider bar (useful for specifying color etc).",
},
{
id: 17,
a: "handleStyle",
b: "Object",
c: "null",
d: "Style applied to the slider handle (useful for specifying color etc).",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

66
pages/_/system/stats.js
View File

@ -1,66 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageStats extends React.Component {
render() {
return (
<SystemPage title="SDS: Stats" description="..." url="https://slate.host/_/system/stats">
<System.H1>
Stats <ViewSourceLink file="system/stats.js" />
</System.H1>
<br />
<br />
<System.P1>
The System Stats component is used to show a system stat with an upload or a download
icon.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the StatUpload and/or the StatDownload Components.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { StatUpload, StatDownload } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>
Delcare the StatUpload and/or the StatDownload components. Decimal prop is optional as it
defaults to 2
</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
render() {
return <StatUpload size="40000000" decimal="5" />;
}
}
class ExampleTwo extends React.Component {
render() {
return <StatDownload size="40000000" />;
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.StatUpload size="40000000" decimal="5" /> <System.StatDownload size="40000000" />
</SystemPage>
);
}
}

517
pages/_/system/tables.js
View File

@ -1,517 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageTables extends React.Component {
state = {
exampleOneOutput: null,
exampleOneProps: null,
exampleTwoOutput: null,
exampleTwoProps: null,
};
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<SystemPage title="SDS: Tables" description="..." url="https://slate.host/_/system/tables">
<System.H1>
Tables <ViewSourceLink file="system/tables.js" />
</System.H1>
<br />
<br />
<System.P1>An example of a table component.</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the TableContent, TableColumn Components.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { TableContent, TableColumn } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Declare the Group and Table components.</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = { exampleOne: null };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Table
data={{
columns: [
{ key: "a", name: "Link", type: "FILE_LINK" },
{ key: "b", name: "Value", width: "88px" },
{
key: "c",
name: "Tooltip",
tooltip: "A tooltip.",
width: "128px",
},
{ key: "d", name: "Copyable", copyable: true, width: "88px" },
],
rows: [
{
id: 1,
a: "col 1 row 1",
b: "col 1 row 2",
c: "col 1 row 3",
d: "col 1 row 4",
},
{
id: 2,
a: "col 2 row 1",
b: "col 2 row 2",
c: "col 2 row 3",
d: "col 2 row 4",
},
{
id: 3,
a: "col 3 row 1",
b: "col 3 row 2",
c: "col 3 row 3",
d: "col 3 row 4",
},
{
id: 3,
a: "col 4 row 1",
b: "col 4 row 2",
c: "col 4 row 3",
d: "col 4 row 4",
},
],
}}
selectedRowId={this.state.exampleOne}
onChange={this._handleChange}
name="exampleOne"
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.Table
data={{
columns: [
{ key: "a", name: "Link", type: "FILE_LINK" },
{ key: "b", name: "Value", width: "88px" },
{
key: "c",
name: "Tooltip",
tooltip: "A tooltip.",
width: "128px",
},
{ key: "d", name: "Copyable", copyable: true, width: "88px" },
],
rows: [
{
id: 1,
a: "col 1 row 1",
b: "col 1 row 2",
c: "col 1 row 3",
d: "col 1 row 4",
},
{
id: 2,
a: "col 2 row 1",
b: "col 2 row 2",
c: "col 2 row 3",
d: "col 2 row 4",
},
{
id: 3,
a: "col 3 row 1",
b: "col 3 row 2",
c: "col 3 row 3",
d: "col 3 row 4",
},
{
id: 3,
a: "col 4 row 1",
b: "col 4 row 2",
c: "col 4 row 3",
d: "col 4 row 4",
},
],
}}
selectedRowId={this.state.exampleOneOutput}
onChange={this._handleChange}
name="exampleOneOutput"
/>
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Tables">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "key",
b: "string",
c: "null",
d: "Column key value",
},
{
id: 2,
a: "id",
b: "number",
c: "null",
d: "Row ID value",
},
{
id: 3,
a: "name",
b: "string",
c: "null",
d: "Name of the column",
},
{
id: 4,
a: "text",
b: "string",
c: "null",
d: "Table content text",
},
{
id: 5,
a: "data",
b: "string",
c: "null",
d: "Table content data",
},
{
id: 6,
a: "tooltip",
b: "string",
c: "null",
d: "If not null, a tooltip will be visible",
},
{
id: 7,
a: "copyable",
b: "boolean",
c: "false",
d: "If true, a copyable icon will be visible",
},
{
id: 8,
a: "type",
b: "string",
c: "null",
d: "Use FILE_LINK to add a linkable column",
},
{
id: 9,
a: "width",
b: "number",
c: "null",
d: "Width of the column",
},
{
id: 10,
a: "action",
b: "string",
c: "null",
d: "Row action",
},
{
id: 11,
a: "hideLabel",
b: "boolean",
c: "false",
d: "If true, column label will be hidden",
},
{
id: 12,
a: "children",
b: "string",
c: "null",
d: "Row child value",
},
{
id: 13,
a: "onAction",
b: "string",
c: "null",
d: "onAction function binding",
},
{
id: 14,
a: "onChange",
b: "string",
c: "null",
d: "onChange function binding",
},
{
id: 15,
a: "selectedRowId",
b: "number",
c: "null",
d: "ID value of the selected row",
},
],
}}
selectedRowId={this.state.exampleOneProps}
onChange={this._handleChange}
name="exampleOneProps"
/>
</Group>
<br />
<br />
<br />
<System.H2>TableContents</System.H2>
<hr />
<br />
<System.P1>
The Table Component has many TableContent properties that can be added to alter the column
using the <i>type</i> props.
</System.P1>
<br />
<CodeBlock>
{`class ExampleTwo extends React.Component {
state = { exampleTwo: null };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Table
data={{
columns: [
{
key: "a",
name: "Upload",
width: "112px",
type: "BANDWIDTH_UPLOAD",
},
{
key: "b",
name: "Download",
width: "112px",
type: "BANDWIDTH_DOWNLOAD",
},
{
key: "c",
name: "Tranaction Status",
width: "128px",
type: "TRANSACTION_STATUS",
},
{
key: "d",
name: "Deal Status",
width: "184px",
type: "DEAL_STATUS",
},
{ key: "e", name: "Icon", width: "88px", type: "ICON" },
],
rows: [
{ id: 1, a: "500", b: "200", c: "2", d: "1", e: "PNG" },
{ id: 2, a: "20", b: "10", c: "1", d: "2", e: "FOLDER" },
{ id: 3, a: "100", b: "250", c: "2", d: "3", e: "PNG" },
{ id: 3, a: "4", b: "135", c: "1", d: "4", e: "FOLDER" },
],
}}
selectedRowId={this.state.exampleTwo}
onChange={this._handleChange}
name="exampleTwo"
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.Table
data={{
columns: [
{
key: "a",
name: "Upload",
width: "112px",
type: "BANDWIDTH_UPLOAD",
},
{
key: "b",
name: "Download",
width: "112px",
type: "BANDWIDTH_DOWNLOAD",
},
{
key: "c",
name: "Tranaction Status",
width: "128px",
type: "TRANSACTION_STATUS",
},
{
key: "d",
name: "Deal Status",
width: "168px",
type: "DEAL_STATUS",
},
{ key: "e", name: "Icon", width: "88px", type: "ICON" },
],
rows: [
{ id: 1, a: "500", b: "200", c: "2", d: "1", e: "PNG" },
{ id: 2, a: "20", b: "10", c: "1", d: "2", e: "FOLDER" },
{ id: 3, a: "100", b: "250", c: "2", d: "3", e: "PNG" },
{ id: 3, a: "4", b: "135", c: "1", d: "4", e: "FOLDER" },
],
}}
selectedRowId={this.state.exampleTwoOutput}
onChange={this._handleChange}
name="exampleTwoOutput"
/>
<br />
<br />
<System.H2>
Accepted <i>Type</i> Properties
</System.H2>
<hr />
<br />
<Group title="TableContent">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "184px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "DEAL_CATEGORY",
b: "number",
c: '"1": "Storage", else: "Retrieval"',
},
{ id: 2, a: "LOCATION", b: "string", c: "String for location" },
{
id: 3,
a: "BUTTON",
b: "string",
c: "String for button text",
},
{
id: 4,
a: "TRANSACTION_DIRECTION",
b: "number",
c: '"1": incoming badge, "2": outgoing badge',
},
{
id: 5,
a: "TRANSACTION_STATUS",
b: "number",
c: '"1": complete badge, "2": pending badge',
},
{
id: 6,
a: "ICON",
b: "string",
c: '"PNG": image icon, "FOLDER": folder icon',
},
{
id: 7,
a: "AVATAR",
b: "null",
c: "Adds the users avatar and online status",
},
{
id: 8,
a: "DEAL_STATUS_RETRIEVAL",
b: "number",
c:
'"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",',
},
{
id: 9,
a: "DEAL_STATUS",
b: "number",
c:
'"0": "Local file", "1": "Available on network", "2": "Retrieval deal proposed.", "3": "Retrieval deal accepted.", "4": "Data transfer in progress.", "5": "Data transfer completed.", "6": "Retrieved from network.",',
},
{
id: 10,
a: "BANDWIDTH_UPLOAD",
b: "number",
c: "Outputs an upload icon with the {number} of bytes",
},
{
id: 11,
a: "BANDWIDTH_DOWNLOAD",
b: "number",
c: "Outputs a download icon with the {number} of bytes",
},
{
id: 12,
a: "MINER_AVAILABILITY",
b: "number",
c: '"1": "true", "2": null',
},
{
id: 13,
a: "DEAL_AUTO_RENEW",
b: "number",
c: '"1": "true", else: "false"',
},
{
id: 14,
a: "NOTIFICATION_ERROR",
b: "string",
c: "String with error notification badge",
},
{ id: 15, a: "FILE_DATE", b: "string", c: "String to date" },
{
id: 16,
a: "FILE_SIZE",
b: "number",
c: 'Outputs "{number} Bytes"',
},
{
id: 17,
a: "FILE_LINK",
b: "string",
c: "String of file link",
},
],
}}
selectedRowId={this.state.exampleTwoProps}
onChange={this._handleChange}
name="exampleTwoProps"
/>
</Group>
</SystemPage>
);
}
}

191
pages/_/system/tabs.js
View File

@ -1,191 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
const TAB_GROUP_TWO = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
];
const TAB_GROUP_THREE = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
{ value: "3", label: "Pisces" },
];
const TAB_GROUP_FOUR = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
{ value: "3", label: "Pisces" },
{ value: "4", label: "Aries" },
];
export default class SystemPageTabs extends React.Component {
state = {
default: "1",
eight: "1",
nine: "3",
ten: "1",
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage title="SDS: Tabs" description="..." url="https://slate.host/_/system/tabs">
<System.H1>
Tabs <ViewSourceLink file="system/tabs.js" />
</System.H1>
<br />
<br />
<System.P1>
The TabGroup component is used to allow the users to switch between views.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the TabGroup Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { TabGroup } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Define the tab group values and labels.</System.P1>
<br />
<CodeBlock>
{`const TAB_GROUP_TWO = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
];
const TAB_GROUP_THREE = [
{ value: "1", label: "Capricorn" },
{ value: "2", label: "Aquarius" },
{ value: "3", label: "Pisces" },
];`}
</CodeBlock>
<br />
<System.P1>Declare the TabGroup component.</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = { exampleOne: "1" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<TabGroup
name="exampleOne"
value={this.state.exampleOne}
option={TAB_GROUP_TWO}
onChange={this._handleChange}
/>
);
}
}
class ExampleTwo extends React.Component {
state = { exampleTwo: "3" };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<TabGroup
name="exampleTwo"
value={this.state.exampleTwo}
option={TAB_GROUP_THREE}
onChange={this._handleChange}
/>
);
}
}`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.TabGroup
name="eight"
options={TAB_GROUP_TWO}
value={this.state.eight}
onChange={this._handleChange}
/>
<br />
<System.TabGroup
name="nine"
options={TAB_GROUP_THREE}
value={this.state.nine}
onChange={this._handleChange}
/>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Card Tabs">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>value</span>,
b: "boolean",
c: "false",
d:
"The value that is currently selected. Can be used to assign default values as well",
},
{
id: 3,
a: <span style={{ fontFamily: Constants.font.semiBold }}>options</span>,
b: "Array",
c: "[]",
d: "An array of options, each of which has a value and a label",
},
{
id: 4,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

200
pages/_/system/tags.js
View File

@ -1,200 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
import Group from "~/components/system/Group";
const tags = ["nature", "scenes", "water", "earth", "fire", "mauritania", "sahara"];
const suggestions = ["nature", "africa", "scenes", "water", "mountains", "mauritania", "sahara"];
export default class SystemTags extends React.Component {
render() {
return (
<SystemPage title="SDS: Tags" description="..." url="https://slate.host/_/system/tags">
<System.H1>
Tags <ViewSourceLink file="system/tags.js" />
</System.H1>
<br />
<br />
<System.P1>The Tag component is used to categorize items.</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the AvatarGroup Component.</System.P1>
<br />
<CodeBlock>
{`import * as React from "react";
import { Tag } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Create an array of tags.</System.P1>
<br />
<CodeBlock>
{`const tags = [
"nature",
"scenes",
"water",
"earth",
"fire",
"mauritania",
"sahara"
];`}
</CodeBlock>
<br />
<br />
<System.P1>
Declare the Tag component and add the array of tags as a prop to the component.
</System.P1>
<br />
<CodeBlock>{`<Tag placeholder="Add your tags" tags={tags} />`}</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.Tag placeholder="Add your tags" tags={tags} />
<br />
<br />
<br />
<System.P1>
The Tag component also has a suggestions prop which accepts an array of strings.
</System.P1>
<br />
<CodeBlock>
{`const tags = [
"nature",
"scenes",
"water",
"earth",
"fire",
"mauritania",
"sahara"
];
const suggestions = [
"nature",
"africa",
"scenes",
"water",
"mountains",
"mauritania",
"sahara"
]`}
</CodeBlock>
<br />
<br />
<System.P1>
Declare the Tag component and add the array of tags and suggestions as a props to the
component.
</System.P1>
<br />
<CodeBlock>
{`<Tag
tags={tags}
suggestions={suggestions}
/>`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.Tag tags={tags} suggestions={suggestions} />
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="AvatarGroup">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: "type",
b: "string",
c: "null",
d: 'If set to "dark", the dark theme of the component will used',
},
{
id: 2,
a: "placeholder",
b: "string",
c: "null",
d: "Placeholder text",
},
{
id: 3,
a: "tags",
b: "array",
c: "[]",
d: "An array of strings of added tags to display",
},
{
id: 5,
a: "suggestions",
b: "array",
c: "[]",
d: "An array of strings to provide suggestions to the user",
},
{
id: 6,
a: "onChange",
b: "function",
c: "null",
d: "Function called on the onChange event",
},
{
id: 7,
a: "handleClick",
b: "function",
c: "null",
d: "Function called on the tag onClick event",
},
{
id: 8,
a: "style",
b: "object",
c: "null",
d: "An object of styles for the tag component container",
},
{
id: 9,
a: "inputStyles",
b: "object",
c: "null",
d: "An object of styles for the input element",
},
{
id: 10,
a: "dropdownStyles",
b: "object",
c: "null",
d: "An object of styles for the suggestions dropdown component container",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

159
pages/_/system/toggles.js
View File

@ -1,159 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageToggles extends React.Component {
state = {
three: true,
four: false,
};
_handleChange = (e) => {
this.setState({ [e.target.name]: e.target.value });
};
render() {
return (
<SystemPage title="SDS: Toggles" description="..." url="https://slate.host/_/system/toggles">
<System.H1>
Toggles <ViewSourceLink file="system/toggles.js" />
</System.H1>
<br />
<br />
<System.P1>The Toggle component is used to switch between two states.</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>Import React and the Toggle Component.</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { Toggle } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Usage</System.H2>
<hr />
<br />
<System.P1>Declare the Toggle component.</System.P1>
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
state = { exampleOne: true };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Toggle
active={this.state.exampleOne}
name="exampleOne"
onChange={this._handleChange}
/>
);
}
}
class ExampleTwo extends React.Component {
state = { exampleTwo: false };
_handleChange = (e) => this.setState({ [e.target.name]: e.target.value });
render() {
return (
<Toggle
active={this.state.exampleTwo}
name="exampleTwo"
onChange={this._handleChange}
/>
);
}
}
`}
</CodeBlock>
<br />
<br />
<System.H2>Output</System.H2>
<hr />
<br />
<System.Toggle active={this.state.three} name="three" onChange={this._handleChange} />
<br />
<br />
<System.Toggle active={this.state.four} name="four" onChange={this._handleChange} />
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="Toggles">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>onChange</span>,
b: "function",
c: "null",
d: "Function called upon an onChange event",
},
{
id: 2,
a: <span style={{ fontFamily: Constants.font.semiBold }}>active</span>,
b: "boolean",
c: "false",
d:
"The value that the dropdown takes. Can be used to assign default values as well.",
},
{
id: 3,
a: "name",
b: "string",
c: "null",
d: "Input name",
},
{
id: 4,
a: "label",
b: "string",
c: "null",
d: "Label text",
},
{
id: 5,
a: "description",
b: "string",
c: "null",
d: "Description text",
},
{
id: 6,
a: "tooltip",
b: "string",
c: "null",
d: "Tooltip text",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

425
pages/_/system/tooltips.js
View File

@ -1,425 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import * as Events from "~/common/custom-events";
import Group from "~/components/system/Group";
import SystemPage from "~/components/system/SystemPage";
import ViewSourceLink from "~/components/system/ViewSourceLink";
import CodeBlock from "~/components/system/CodeBlock";
import { css } from "@emotion/react";
const STYLES_DEMO_TOOLTIP = {
display: "flex",
justifyContent: "center",
alignItems: "center",
};
const STYLES_TOOLTIP_BUBBLE = css`
display: inline-flex;
align-items: center;
background-color: ${Constants.system.black};
color: ${Constants.system.white};
opacity: 70%;
border-radius: 4px;
padding: 4px 8px;
height: 48px;
width: 160px;
font-size: 0.8em;
`;
export default class SystemPageTooltips extends React.Component {
state = {
horizontal: "center",
vertical: "above",
show: true,
};
_handleClick = (e, orientation, dir) => {
this.setState({ show: false, [orientation]: dir }, () => {
this.setState({ show: true }, () => {
Events.dispatchCustomEvent({
name: "show-tooltip",
detail: {
id: "orientation-tester-tooltip",
type: "body",
},
});
});
});
};
componentWillUnmount = () => {
Events.dispatchCustomEvent({
name: "remove-tooltip",
detail: {
id: "orientation-tester-tooltip",
type: "body",
},
});
};
render() {
let content = (
<div css={STYLES_TOOLTIP_BUBBLE}>
horizontal: "{this.state.horizontal}", vertical: "{this.state.vertical}"
</div>
);
return (
<SystemPage
title="SDS: Tooltips"
description="..."
url="https://slate.host/_/system/tooltips"
>
<System.H1>
Tooltips <ViewSourceLink file="system/tooltips.js" />
</System.H1>
<br />
<br />
<System.P1>
The Tooltip component is used to provide the user with more information in a message that
appears when they interact with an element.
</System.P1>
<System.GlobalTooltip />
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>
Import the GlobalTooltip, TooltipWrapper, and optionally the TooltipAnchor Components.
</System.P1>
<br />
<br />
<CodeBlock>
{`import * as React from "react";
import { GlobalTooltip, TooltipWrapper, TooltipAnchor } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Tooltip</System.H2>
<hr />
<br />
<System.P1>
Declare the <System.CodeText>GlobalTooltip</System.CodeText> at the root level of your
document (e.g. in index.js or App.js) so it is accessible throughout and will not get
buried in the DOM tree.
</System.P1>
<br />
<CodeBlock>
{`class App extends React.Component {
render() {
return (
<React.Fragment>
<GlobalTooltip />
</React.Fragment>
);
}
}`}
</CodeBlock>
<br />
<System.P1>
Then, wrap your desired anchor with a <System.CodeText>TooltipWrapper</System.CodeText>.
The wrapper's id should match the id in the dispatchCustomEvent call. This id must be
unique for each tooltip.
</System.P1>
<br />
<System.P1>
The tooltip component, passed in as <System.CodeText>content</System.CodeText> to{" "}
<System.CodeText>TooltipWrapper</System.CodeText>, will be displayed when a
dispatchCustomEvent is called with its id.
</System.P1>
<br />
<System.TooltipAnchor
type="body"
id="tooltip-hello-friends"
tooltip="Hello friends!! This is a tooltip from the slate-react-system"
/>
<br />
<br />
<CodeBlock>
{`class ExampleOne extends React.Component {
_handleMouseEnter = (e) => {
dispatchCustomEvent({
name: "show-tooltip",
detail: {
id: "unique-tooltip-id",
},
});
};
_handleMouseLeave = (e) => {
dispatchCustomEvent({
name: "hide-tooltip",
detail: {
id: "unique-tooltip-id",
},
});
};
render() {
let content = (
<div css={STYLES_TOOLTIP_BUBBLE}>
{this.props.tooltip}
</div>
);
return (
<TooltipWrapper
id="unique-tooltip-id"
content={content}
>
<span
onMouseEnter={this._handleMouseEnter}
onMouseLeave={this._handleMouseLeave}
>
<SVG.Information height="24px" />
</span>
</TooltipWrapper>
)
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Tooltip Anchor</System.H2>
<hr />
<br />
<System.P1>
For a pre-styled tooltip that accepts a string and handles dispatchCustomEvent and styling
for you, use the <System.CodeText>TooltipAnchor</System.CodeText> component. Be sure to
give it a unique id.
</System.P1>
<br />
<System.TooltipAnchor type="body" id="another-unique-tooltip-id" tooltip="Hello friends!" />
<br />
<br />
<CodeBlock>
{`class ExampleTwo extends React.Component {
render() {
return <TooltipAnchor id="another-unique-tooltip-id" tooltip="Hello friends!" />;
}
}`}
</CodeBlock>
<br />
<br />
<br />
<System.H2>Setting an Orientation</System.H2>
<hr />
<br />
<System.P1>
You can set a tooltip to appear in a set orientation using the{" "}
<System.CodeText>horizontal</System.CodeText> and{" "}
<System.CodeText>vertical</System.CodeText> props. These can be applied to both the{" "}
<System.CodeText>TooltipWrapper</System.CodeText> and the{" "}
<System.CodeText>TooltipAnchor</System.CodeText> components.
</System.P1>
<br />
<div>
<System.P1>Horizontal</System.P1>
<div style={{ display: "flex", justifyContent: "space-between" }}>
{["far-left", "left", "center", "right", "far-right"].map((dir, i) => (
<System.ButtonPrimary
key={i}
style={{ width: "100px" }}
onClick={(e) => {
this._handleClick(e, "horizontal", dir);
}}
>
{dir}
</System.ButtonPrimary>
))}
</div>
<br />
<div style={{ display: "grid", gridTemplateColumns: "1fr auto" }}>
{this.state.show ? (
<div style={STYLES_DEMO_TOOLTIP}>
<System.TooltipWrapper
id="orientation-tester-tooltip"
content={content}
horizontal={this.state.horizontal}
vertical={this.state.vertical}
type="body"
>
<System.SVG.Information height="24px" />
</System.TooltipWrapper>
</div>
) : null}
<div>
<System.P1>Vertical</System.P1>
<div
style={{
display: "flex",
flexDirection: "column",
justifyContent: "space-between",
height: "300px",
}}
>
{["above", "up", "center", "down", "below"].map((dir, i) => (
<System.ButtonPrimary
key={i}
style={{ width: "100px" }}
onClick={(e) => {
this._handleClick(e, "vertical", dir);
}}
>
{dir}
</System.ButtonPrimary>
))}
</div>
</div>
</div>
</div>
<br />
<br />
<CodeBlock>{`class ExampleThree extends React.Component {
render() {
return (
<TooltipAnchor
id="yet-another-unique-tooltip-id"
tooltip="Hello friends!"
style={{ opacity: "70%" }}
horizontal="${this.state.horizontal}"
vertical="${this.state.vertical}"
/>
);
}
}`}</CodeBlock>
<br />
<br />
<br />
<System.H2>Accepted React Properties</System.H2>
<hr />
<br />
<Group title="TooltipAnchor Properties">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>id</span>,
b: "string",
c: "null",
d: "Unique id to identify the tooltip.",
},
{
id: 2,
a: "tooltip",
b: "string",
c: "null",
d: "Output text on the tooltip bubble.",
},
{
id: 3,
a: "height",
b: "number",
c: "24px",
d: "Height of the tooltip anchor icon.",
},
{
id: 4,
a: "style",
b: "Object",
c: "null",
d: "Style applied to the tooltip bubble.",
},
{
id: 5,
a: "anchorStyle",
b: "Object",
c: "null",
d: "Style applied to the tooltip anchor.",
},
{
id: 6,
a: "children",
b: "Object",
c: "null",
d:
"Will be rendered instead of the default question mark SVG as the tooltip anchor.",
},
{
id: 7,
a: "horizontal",
b: "string",
c: "center",
d:
"Horizontal positioning of the tooltip relative to the anchor (far-left, left, center, right, far-right)",
},
{
id: 8,
a: "vertical",
b: "string",
c: "above",
d:
"Vertical positioning of the tooltip relative to the anchor (above, up, center, down, below)",
},
],
}}
/>
</Group>
<br />
<br />
<Group title="TooltipWrapper Properties">
<System.Table
data={{
columns: [
{ key: "a", name: "Name", width: "128px" },
{ key: "b", name: "Type", width: "88px", type: "OBJECT_TYPE" },
{ key: "c", name: "Default", width: "88px" },
{ key: "d", name: "Description", width: "100%" },
],
rows: [
{
id: 1,
a: <span style={{ fontFamily: Constants.font.semiBold }}>id</span>,
b: "string",
c: "null",
d: "Unique id to identify the tooltip.",
},
{
id: 2,
a: "content",
b: "Component",
c: "null",
d: "Component rendered as the tooltip bubble.",
},
{
id: 3,
a: "horizontal",
b: "string",
c: "center",
d:
"Horizontal positioning of the tooltip relative to the anchor (far-left, left, center, right, far-right)",
},
{
id: 4,
a: "vertical",
b: "string",
c: "above",
d:
"Vertical positioning of the tooltip relative to the anchor (above, up, center, down, below)",
},
{
id: 5,
a: "children",
b: "Component",
c: "null",
d: "The tooltip anchor",
},
],
}}
/>
</Group>
</SystemPage>
);
}
}

200
pages/_/system/typography.js
View File

@ -1,200 +0,0 @@
import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import { css } from "@emotion/react";
import SystemPage from "~/components/system/SystemPage";
import CodeBlock from "~/components/system/CodeBlock";
const STYLES_CSS_LABEL = css`
display: block;
letter-spacing: 0.2px;
font-size: 12px;
color: ${Constants.system.grayLight2};
margin-bottom: 8px;
`;
const STYLES_TYPE_JETBRAINS = css`
font-family: ${Constants.font.code};
`;
const STYLES_BOLD = css`
font-family: ${Constants.font.text};
font-weight: bold;
`;
const STYLES_ITALIC = css`
font-style: italic;
`;
const STYLES_UNDERLINE = css`
text-decoration: underline;
`;
export default class SystemPageTypography extends React.Component {
render() {
return (
<SystemPage
title="SDS: Typography"
description="..."
url="https://fps.onrender.com/system/typography"
>
<System.H1>
Typography <System.ViewSourceLink file="system/typography.js" />
</System.H1>
<br />
<br />
<System.P1>
The Filecoin Client uses{" "}
<a href="https://rsms.me/inter/" target="_blank">
Inter
</a>{" "}
and{" "}
<a href="https://www.jetbrains.com/lp/mono/" target="_blank">
Jet Brains
</a>
.
</System.P1>
<br />
<br />
<br />
<System.H2>Imports</System.H2>
<hr />
<br />
<System.P1>
Import React and the typography components. If needed, import the ViewSourceLink
component.
</System.P1>
<br />
<CodeBlock>
{`import { H1, H2, H3, H4, P1, UL, OL, LI, ViewSourceLink } from "slate-react-system";`}
</CodeBlock>
<br />
<br />
<System.H2>Typescale</System.H2>
<hr />
<br />
<span css={STYLES_CSS_LABEL}>1.953rem &nbsp; Semi Bold</span>
<System.H1>This is heading level 1</System.H1>
<br />
<span css={STYLES_CSS_LABEL}>1.563rem &nbsp; Medium</span>
<System.H2>This is heading level 2</System.H2>
<br />
<span css={STYLES_CSS_LABEL}>1.25rem &nbsp; Medium</span>
<System.H3>This is heading level 3</System.H3>
<br />
<span css={STYLES_CSS_LABEL}>1rem &nbsp; Medium</span>
<System.H4>This is heading level 4</System.H4>
<br />
<br />
<CodeBlock>
{`<H1>This is heading level 1</H1>
<H2>This is heading level 2</H2>
<H3>This is heading level 3</H3>
<H4>This is heading level 4</H4>`}
</CodeBlock>
<br />
<br />
<System.H2>Type Styles</System.H2>
<hr />
<br />
<System.P1 css={STYLES_BOLD}>This text is bold</System.P1>
<System.P1 css={STYLES_ITALIC}>This text is italic</System.P1>
<System.P1 css={STYLES_UNDERLINE}>This text is underlined</System.P1>
<br />
<br />
<CodeBlock>
{`<P1 css={STYLES_BOLD}>This text is bold</P1>
<P1 css={STYLES_ITALIC}>This text is italic</P1>
<P1 css={STYLES_UNDERLINE}>This text is underlined</P1>`}
</CodeBlock>
<br />
<br />
<System.H2>Typefaces</System.H2>
<hr />
<br />
<System.H3>Inter</System.H3>
<System.P1>a b c d e f g h i j k l m n o p q r s t u v w x y z</System.P1>
<System.P1>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</System.P1>
<System.P1>0 1 2 3 4 5 6 7 8 9</System.P1>
<br />
<br />
<System.H3>Jet Brains</System.H3>
<System.P1 css={STYLES_TYPE_JETBRAINS}>
a b c d e f g h i j k l m n o p q r s t u v w x y z
</System.P1>
<System.P1 css={STYLES_TYPE_JETBRAINS}>
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
</System.P1>
<System.P1 css={STYLES_TYPE_JETBRAINS}>0 1 2 3 4 5 6 7 8 9</System.P1>
<br />
<br />
<System.H2>Ordered and Unordered Lists</System.H2>
<hr />
<br />
<System.OL>
<System.LI>Rainbow</System.LI>
<System.LI>Cloud</System.LI>
<System.LI>Cake</System.LI>
</System.OL>
<br />
<System.UL>
<System.LI>Cloud</System.LI>
<System.LI>Cake</System.LI>
<System.LI>Rainbow</System.LI>
</System.UL>
<br />
<br />
<CodeBlock>
{`<OL>
<LI>Rainbow</LI>
<LI>Cloud</LI>
<LI>Cake</LI>
</OL>
<UL>
<LI>Cloud</LI>
<LI>Cake</LI>
<LI>Rainbow</LI>
</UL>`}
</CodeBlock>
<br />
<br />
<System.H2>Hyperlinks</System.H2>
<hr />
<br />
<System.P1>
Internal References{" "}
<a href="https://slate.host" target="_blank">
Link to a page
</a>
</System.P1>
<System.P1>
External References <System.ViewSourceLink file="system/typography.js" />
</System.P1>
<br />
<br />
<CodeBlock>
{`<P1>
<a href="https://slate.host"
target="_blank">
Link to a page
</a>
</P1>
<P1>
<ViewSourceLink file="system/typography.js" />
</P1>`}
</CodeBlock>
<br />
<br />
</SystemPage>
);
}
}

5
rollup.config.js
View File

@ -36,7 +36,4 @@ const generateOutput = (outputPath) => {
}; };
}; };
export default [ export default [generateOutput("dist/index.js")];
generateOutput("dist/index.js"),
generateOutput("../slate-react-system/src/index.js"),
];