We The Curious Developers

We The Curious Developers

  • Guidelines
  • CuriOs SDK
  • Software
  • Films
  • Art
  • Audio
  • Photography

›Getting Started

Getting Started

  • Getting Started Overview
  • ClI
  • Working With Us

Technical

  • Hardware

Frames

  • Frames Overview
  • Info Panel
  • Media Browser
  • Touch to Start

Components

  • Components Overview
  • Box
  • Button
  • Card
  • Checkbox
  • Header
  • Heading
  • Hero
  • Icon
  • Text Input
  • Markdown Viewer
  • Modal
  • WTCProvider
  • Table
  • Text
  • Video Player
  • Calendar
  • Dropdown
  • InputAutoComplete
  • Radio
  • Sidebar
  • Slider
  • Notification
  • IconNavButton
  • IconSideBar
  • List
  • Tab
  • Title
  • Toggle
  • Value

CuriOS CLI

NPM JavaScript Style Guide

The CuriOs SDK comes with a CLI tool to quickly bootstrap application

Install

Install curios globally

npm install -g curios

Create an application

curios create-app

This will walk you through everything you need to do to create an application for We the Curious

Template application

The CLI will build you a basic app. There are a few important aspects to the app which are highlighted below:

WTCProvider

This library depends on an external theme. Served either from the assets server or as a theme object. This must be passed to the WTCProvider component as below. In this instance the theme is retrieved from the hosted asset server at https://assets.wethecurious.io/1/themes/latest. If the theme is not retrieved correctly the screen will display the text "Start theme server". In the template application the following example is from the root index.js file.

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import { Provider } from 'react-redux'
import { BrowserRouter } from 'react-router-dom'
import { App } from './App'
import { WTCProvider } from '@wethecurious/wtc-ui-library'
import { asyncTheme } from './hoc/asyncTheme'
import { ThemeProvider } from 'styled-components'
import { store } from './reducers/store/reduce'
import './global.css'

interface Props {
  theme: any
}

const Container = (props: Props) => (
  <WTCProvider theme={props.theme}>
    <ThemeProvider theme={props.theme}>
      <Provider store={store}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </Provider>
    </ThemeProvider>
  </WTCProvider>
)

const ThemedContainer = asyncTheme(Container, 'https://assets.wethecurious.io/1/themes/latest')

ReactDOM.render(
  <ThemedContainer />,
  document.getElementById('app')
)

The Provider component is used to provide the redux store to the react component tree. The BrowserRouter component is user for react-router-dom.

Router

This application is set up with react-router-dom to handle urls and in browser routing. Each page component can be setup in the AppScreens component as per the example below.

import * as React from 'react'
import { Switch, Route } from 'react-router-dom'
import { Home } from './screens/Home'
import { Hello } from './screens/Hello'

enum Path {
  Home = '/',
  Hello = '/hello'
}

// Put routes to each screen in the AppScreens component below
export const AppScreens: React.SFC = () => (
  <Switch>
    <Route exact={true} path={Path.Home} component={Home} />
    <Route exact={true} path={Path.Hello} component={Hello} />
  </Switch>
)
Last updated on 5/9/2019
← Getting Started OverviewWorking With Us →
  • WTCProvider
  • Router
Docs
Getting Started (or other categories)Guides (or other categories)API Reference (or other categories)
Community
User ShowcaseStack OverflowProject ChatTwitter
More
BlogGitHubStar
Copyright © 2020 We The Curious