@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 />)

AppProvider

this is the root wrapper being used to take and provide various related configs to the nested components/hooks.

import { AppProvider } from '@sidespin/protomodule'
const App = () => {
    return (
        <AppProvider config={{ envs:{...}, configJson:{...}, routing:{...} }}>
            {...}
        </AppProvider>
    )

Routing

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

import { AppProvider, useRouter } from '@sidespin/protomodule'
const App = () => {
    const [Router, Routes] = useRouter();
    return (
        <AppProvider config={{ routing: import.meta.globEager(`src/pages/**/**.tsx`)}}>
            <Router>
              <Routes />
            </Router>
        </AppProvider>
    )
}

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 auth0Config and coreApiConfig in AppProvider config.

import { AppProvider, WithAuth } from '@sidespin/protomodule'
const App = () => {
    const [Router, Routes] = useRouter();
    return (
        <AppProvider 
        config={{ 
            envs:{
                auth0Config: { domain: "<YOUR-AUTH0-DOMAIN>",clientId:"<YOUR-AUTH0-CLIENT-ID>" },
                coreApiConfig: { baseUrl:"https://api.sidesp.in" }
            }, 
            routing: import.meta.globEager(`src/pages/**/**.tsx` )
        }}>
            <WithAuth>
                <Router>
                  <Routes />
                </Router>
            </WithAuth>
        </AppProvider>
    )
}

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 coreApiConfig and configJson in AppProvider config.

import { AppProvider, WithService } from '@sidespin/protomodule'
const App = () => {
    const [Router, Routes] = useRouter();
    return (
        <AppProvider 
        config={{ 
            envs:{
                coreApiConfig: { baseUrl:"https://api.sidesp.in" }
            }, 
            configJson: { common:{ app_id:"<service-id>", space_id:"<space-id>" } }
            routing: import.meta.globEager(`src/pages/**/**.tsx` )
        }}>
            <WithService>
                <Router>
                  <Routes />
                </Router>
            </WithService>
        </AppProvider>
    )
}

in src/pages/

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