slate/pages/_/system/index.js

148 lines
4.4 KiB
JavaScript

import * as React from "react";
import * as System from "~/components/system";
import * as Constants from "~/common/constants";
import SystemPage from "~/components/system/SystemPage";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageRoot extends React.Component {
render() {
return (
<SystemPage
title={`Slate Design System ${Constants.values.sds}`}
description="We built a design system you can use while we are building Slate, a Filecoin client."
url="https://slate.host/_/system"
>
<img
src="https://slate.textile.io/ipfs/bafybeidu5v3ytcy3ynghrmu7zftfinpt3s5pghqmpytrohmpk57ba4suye"
style={{
display: "inline-flex",
width: "100%",
borderRadius: "4px",
marginBottom: 48,
boxShadow: "0 1px 4px rgba(0, 0, 0, 0.09)",
}}
/>
<System.H1>SDS {Constants.values.sds}</System.H1>
<br />
<System.P>
The <strong>Slate Design System</strong> is an open source resource
with examples of components, constants, and experiences. Any code
changes made to the components in the Design System will change the
appearance and function of{" "}
<a href="https://slate.host" target="_blank">
Slate
</a>{" "}
in production. <br />
<br />
We wanted to build product out in the open, so other Filecoin & IPFS
developers could freely use the code to make their own applications on
top of the <a href="https://filecoin.io">Filecoin Network</a>. A lot
of the functionality of Slate is made possible by{" "}
<a
href="https://github.com/textileio/js-powergate-client"
target="_blank"
>
Textile's Powergate
</a>{" "}
and{" "}
<a href="https://github.com/textileio/js-hub" target="_blank">
Textile's Hub
</a>
.
</System.P>
<br /> <br />
<br />
<System.H2>slate-react-system</System.H2>
<br />
<System.P>
You can use these components, experiences, and constants in your own
React projects. First, install the{" "}
<a
href="https://github.com/filecoin-project/slate-react-system"
target="_blank"
>
npm module
</a>
:
<br />
<br />
<CodeBlock>{`npm install --save slate-react-system`}</CodeBlock>
<br />
<br />
Now you can import React components: <br />
<br />
<CodeBlock>
{`import { ButtonPrimary } from "slate-react-system";
const Component = () => <ButtonPrimary>Hello world</ButtonPrimary>;`}
</CodeBlock>
<br />
<br />
And easily integrate Powergate <br />
<br />
<CodeBlock>
{`import * as React from 'react';
import * as System from 'slate-react-system';
import { createPow } from "@textile/powergate-client";
class Example extends React.Component {
_PG = null;
state = {
token: null
}
_handleCreateToken = () => {
this._PG = createPow({ host: 'http://0.0.0.0:6002' });
const FFS = await this._PG.ffs.create();
const token = FFS.token ? FFS.token : null;
PowerGate.setToken(token);
this.setState({ token });
}
render() {
return (
<System.CreateToken
token={this.state.token}
onClick={this._handleCreateToken} />
);
}
}
`}
</CodeBlock>
<br />
<br />
Whats next?
</System.P>
<System.UL>
<System.LI>
Try using some components or experiences in your React projects.
</System.LI>
<System.LI>
Start a new project using an{" "}
<a
href="https://github.com/filecoin-project/slate-react-system/tree/master/example"
target="_blank"
>
example
</a>
.
</System.LI>
<System.LI>
Try using slate-react-system in a{" "}
<a
href="https://github.com/jimmylee/next-express-emotion"
target="_blank"
>
starter React boilerplate
</a>
.
</System.LI>
</System.UL>
<br /> <br />
</SystemPage>
);
}
}