@sidespin/protomodule

@sidespin/protomodule

How to install? yarn add @sidespin/protomodule

Components

we have antd as our foundation for UI components has been powered by @sidespin/protomodule, you can simply import and use it like this:

import { Input } from 'antd';
const App = () => (<Input />)

Set Up

import { initConfig } from '@sidespin/protomodule';
import configJson from './config.json';

initConfig({
    routes: import.meta.globEager(`src/pages/**/**.tsx`),
    configJson
})

Routing

you don't need to worry about routing anymore. @sidespin/protomodule facilitates you with Conventional / File System Routing. You need to provide routes initConfig handler.

import { useRouter } from '@sidespin/protomodule'
const App = () => {
    const [Router, Routes] = useRouter();
    return (
        <Router>
          <Routes />
        </Router>
    )
}

User Management

you don't need to worry about authenticating a user first on auth0 then fetching his info from core server. we handle it for you. You need to provide VITE_AUTH_API_URL (auth0 domain) and VITE_CLIENT_ID (auth0 clientId) in env. and configJson in initConfig handler

import { WithAuth } from '@sidespin/protomodule'
const App = () => {
    const [Router, Routes] = useRouter();
    return (
        <WithAuth>
            <Router>
              <Routes />
            </Router>
        </WithAuth>
    )
}

in src/pages/**

    import { useUser } from '@sidespin/protomodule';
    import { Button } from 'antd';
    const Component = () => {
        const { loading, user, login } = useUser();
        return <Button loading={loading} onClick={login}>Login</Button>
    }

Service Management

you don't need to worry about fetching service info from core server. we handle it for you. You need to provide VITE_API_BASE_URL (core-api url) in env. and configJson in initConfig handler

import { WithService, useRouter } from '@sidespin/protomodule'
const App = () => {
    const [Router, Routes] = useRouter();
    return (
        <WithService>
            <Router>
              <Routes />
            </Router>
        </WithService>
    )
}

in src/pages/**

    import { userService } from '@sidespin/protomodule';
    import { Button } from 'antd';
    const Component = () => {
        const { loading, service } = userService();
        return <span>{service?.name}</span>
    }