❀Novice, Practiced, Mastered

    @gyugyu/uxboard-core

    1.0.0Β β€’Β PublicΒ β€’Β Published

    uxboard-core

    πŸ“‹ UX achivement visualization tool

    Requirements

    • Node (>= 8.0.0)

    Installation

    Using yarnpkg

    $ yarn global add create-react-app
    $ create-react-app your-app-name
    $ cd your-app-name
    $ yarn add @material-ui/core @material-ui/icons firebase react-dnd react-dnd-html5-backend
    $ yarn add @gyugyu/uxboard-core
    $ cat << EOS
    {
      "databasePrefix": "uxboard",
      "firebase": {
        "apiKey": "yourFirebaseApiKey",
        "authDomain": "your-auth-domain.firebaseapp.com",
        "databaseURL": "https://your-database-url.firebaseio.com"
      }
    }
    EOS > src/uxboard.json
    $ node_modules/.bin/uxboardify ./src/uxboard.json

    Using npm

    $ npm install -g create-react-app
    $ create-react-app your-app-name
    $ cd your-app-name
    $ npm install -s @material-ui/core @material-ui/icons firebase react-dnd react-dnd-html5-backend
    $ npm install -s @gyugyu/uxboard-core
    $ cat << EOS
    {
      "databasePrefix": "uxboard",
      "firebase": {
        "apiKey": "yourFirebaseApiKey",
        "authDomain": "your-auth-domain.firebaseapp.com",
        "databaseURL": "https://your-database-url.firebaseio.com"
      }
    }
    EOS > src/uxboard.json
    $ node_modules/.bin/uxboardify ./src/uxboard.json

    Usage

    index.js

    import firebase from 'firebase/app';
    import 'firebase/auth';
    import 'firebase/database';
    import React from 'react';
    import ReactDOM from 'react-dom';
    import FirebaseContext from 'uxboard-core/firebase/FirebaseContext';
    import './index.css';
    import App from './App';
    import registerServiceWorker from './registerServiceWorker';
    import config from './uxboard.json'
    
    firebase.initializeApp(config.firebase)
    const authProvider = new firebase.auth.GoogleAuthProvider()
    authProvider.setCustomParameters({ hd: 'pepabo.com' })
    
    ReactDOM.render(
      <FirebaseContext.Provider
        value={{
          authProvider,
          databasePrefix: config.databasePrefix,
          firebase
        }}
      >
        <App />
      </FirebaseContext.Provider>, document.getElementById('root'));
    registerServiceWorker();

    App.js

    import React, { Component, Fragment } from 'react';
    import AddDimensionButton from 'uxboard-core/AddDimensionButton';
    import AppBar from 'uxboard-core/AppBar'; // optional
    import UxBoard from 'uxboard-core/UxBoard';
    
    class App extends Component {
      render() {
        return (
          <Fragment>
            <AppBar title='UX Board' />
            <UxBoard />
            <AddDimensionButton />
          </Fragment>
        );
      }
    }
    
    export default App;

    Then npm(yarn) start.

    Publish

    GitHub Pages

    Add your GitHub Pages URL to "homepage" at package.json. Then,

    $ yarn add -D gh-pages
    $ yarn build
    $ node_modules/.bin/gh-pages -d build
    
    # or
    
    $ npm install -D gh-pages
    $ npm run build
    $ node_modules/.bin/gh-pages -d build

    Keywords

    none

    Install

    npm i @gyugyu/uxboard-core

    DownloadsWeekly Downloads

    1

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    79.6 kB

    Total Files

    42

    Last publish

    Collaborators

    • gyugyu