slate/pages/_/system/index.js

148 lines
4.4 KiB
JavaScript
Raw Normal View History

2020-07-02 12:35:58 +03:00
import * as React from "react";
import * as System from "~/components/system";
2020-07-23 04:25:19 +03:00
import * as Constants from "~/common/constants";
2020-07-02 12:35:58 +03:00
import SystemPage from "~/components/system/SystemPage";
import CodeBlock from "~/components/system/CodeBlock";
export default class SystemPageRoot extends React.Component {
render() {
return (
<SystemPage
2020-07-29 02:43:00 +03:00
title={`Slate Design System ${Constants.values.sds}`}
2020-07-21 05:47:17 +03:00
description="We built a design system you can use while we are building Slate, a Filecoin client."
url="https://slate.host/_/system"
2020-07-02 12:35:58 +03:00
>
2020-07-11 00:02:10 +03:00
<img
src="https://slate.textile.io/ipfs/bafybeidu5v3ytcy3ynghrmu7zftfinpt3s5pghqmpytrohmpk57ba4suye"
2020-07-11 00:02:10 +03:00
style={{
display: "inline-flex",
2020-07-23 04:25:19 +03:00
width: "100%",
2020-07-21 04:45:21 +03:00
borderRadius: "4px",
2020-07-11 00:02:10 +03:00
marginBottom: 48,
2020-07-23 04:25:19 +03:00
boxShadow: "0 1px 4px rgba(0, 0, 0, 0.09)",
2020-07-11 00:02:10 +03:00
}}
/>
2020-07-23 04:25:19 +03:00
<System.H1>SDS {Constants.values.sds}</System.H1>
<br />
<System.P>
2020-09-09 12:40:23 +03:00
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{" "}
2020-07-23 04:25:19 +03:00
<a href="https://slate.host" target="_blank">
2020-07-02 12:35:58 +03:00
Slate
</a>{" "}
in production. <br />
<br />
2020-09-09 12:40:23 +03:00
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"
>
2020-07-02 12:35:58 +03:00
Textile's Powergate
</a>{" "}
and{" "}
<a href="https://github.com/textileio/js-hub" target="_blank">
Textile's Hub
</a>
.
</System.P>
<br /> <br />
2020-07-02 12:35:58 +03:00
<br />
<System.H2>slate-react-system</System.H2>
<br />
<System.P>
2020-09-09 12:40:23 +03:00
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"
>
2020-07-02 12:35:58 +03:00
npm module
</a>
:
<br />
<br />
<CodeBlock>{`npm install --save slate-react-system`}</CodeBlock>
2020-07-02 12:35:58 +03:00
<br />
<br />
Now you can import React components: <br />
<br />
<CodeBlock>
2020-07-28 23:27:53 +03:00
{`import { ButtonPrimary } from "slate-react-system";
const Component = () => <ButtonPrimary>Hello world</ButtonPrimary>;`}
</CodeBlock>
2020-07-16 20:41:49 +03:00
<br />
<br />
And easily integrate Powergate <br />
<br />
<CodeBlock>
2020-07-16 20:41:49 +03:00
{`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}
2020-07-16 20:41:49 +03:00
onClick={this._handleCreateToken} />
);
}
}
`}
</CodeBlock>
2020-07-02 12:35:58 +03:00
<br />
<br />
Whats next?
</System.P>
<System.UL>
2020-09-09 12:40:23 +03:00
<System.LI>
Try using some components or experiences in your React projects.
</System.LI>
2020-07-02 12:35:58 +03:00
<System.LI>
Start a new project using an{" "}
2020-09-09 12:40:23 +03:00
<a
href="https://github.com/filecoin-project/slate-react-system/tree/master/example"
target="_blank"
>
2020-07-02 12:35:58 +03:00
example
</a>
.
</System.LI>
<System.LI>
Try using slate-react-system in a{" "}
2020-09-09 12:40:23 +03:00
<a
href="https://github.com/jimmylee/next-express-emotion"
target="_blank"
>
2020-07-02 12:35:58 +03:00
starter React boilerplate
</a>
.
</System.LI>
</System.UL>
2020-07-16 20:41:49 +03:00
<br /> <br />
</SystemPage>
);
}
}