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:

0
npm install --save slate-react-system


Now you can import React components:

0
import { ButtonPrimary } from "slate-react-system";
1
2
const Component = () => <ButtonPrimary>Hello world</ButtonPrimary>;


And easily integrate Powergate

0
import * as React from 'react';
1
import * as System from 'slate-react-system';
2
import { createPow } from "@textile/powergate-client";
3
4
class Example extends React.Component {
5
  _PG = null;
6
7
  state = {
8
    token: null
9
  }
10
11
  _handleCreateToken = () => {
12
    this._PG = createPow({ host: 'http://0.0.0.0:6002' });
13
    const FFS = await this._PG.ffs.create();
14
    const token = FFS.token ? FFS.token : null;
15
    PowerGate.setToken(token);
16
    this.setState({ token });
17
  }
18
19
  render() {
20
    return (
21
      <System.CreateToken
22
        token={this.state.token}
23
        onClick={this._handleCreateToken} />
24
    );
25
  }
26
}
27


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.


ExperiencesCreateFilecoinAddressCreateFilecoinStorageDealCreateTokenFilecoinBalancesListFilecoinDealsListFilecoinSettingsFriendsListPeersListSendAddressFilecoin

Components
Avatar GroupButtonsCard TabsCarouselCheckboxesColorsDatepickerDropdownsGlobeHover TileIconsInputsLine ChartList EditorLoadersModalsNotificationsRadiosSlidersStatsTablesTabsTogglesTooltipsTypography
View source