SDS 0.1.0

The Slate Design System 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 Slate in production.

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 Filecoin Network. A lot of the functionality of Slate is made possible by Textile's Powergate and Textile's Hub.

slate-react-system

You can use these components, experiences, and constants in your own React projects. First, install the npm module:

npm install --save slate-react-system

Now you can import React components:

import { ButtonPrimary } from "slate-react-system";

const Component = () => <ButtonPrimary>Hello world</ButtonPrimary>;

And easily integrate Powergate

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} />

);

Whats next?

Try using some components or experiences in your React projects.
Start a new project using an example.
Try using slate-react-system in a starter React boilerplate.