@kleeen/core-react

kleeen-core-react

Access Control

Description

The idea behind the access control is to provide an easy and generic way to manage the access control in your application, kleeen-core export a function that set the role of the outside user in our context and a component to manage if the content should be visible/disabled or not.

Setting The Access Control

setAccessControl:

The main use for this function is receive the permissions object and the role of the outside user, but also provide a way to overwrite our acessControlChecker (the function that eval the permissions logic) and our customRenderView (function to eval the render of the permissions).

Properties

Type	Name	Description
object	accessControlSettings	Object that have the permissions object and the path to the role on the redux state
object	accessControlSettings.permissions	Permissions json base
string	accessControlSettings.setPathToRoleOnState	Path to the role property on redux state
function	customRenderView	Function to eval the render of the permissions
function	customAccessControlChecker	Function that eval the permissions logic

note: this access control expect that the role of the outside user be manage with redux, so it receive a redux path to the outside user role, for example if you redux store looks like

{
  ...moreEntities,
  user: {
    ...moreUserData,
    roleInfo: {
      ...moreRolesData,
      role: 'guest'
    }
  }
}

the path to the user role in redux should be user.roleInfo.role.

Example

import { setAccessControl } from '@kleeen/core-react';

const permissions = {
  WORKBENCH: {
    CHILDREN: {
      ACTIONS: {
        PERMISSIONS: {
          ADMIN: 'SHOW',
          GUEST: 'HIDE',
        },
      }
    }
  }
};

setAccessControl({ permissions, pathToRoleOnState: 'user.roleInfo.role' });

Access Control Component

Properties

Type	Name	Description
string	id	Permission id that should match some path on the permissions object
node	children	According to the permssions it is show/hide/disable
function	children	Execute the function with the user's permission to be used as the user required

Example

import { AccessControl } from "@kleeen/core-react";

// using children
<AccessControl id="LAYOUT.SEARCH_BOX">
  <input type="text" />
</AccessControl>

// using render prop
<AccessControl id="LAYOUT.HEALTH_SPARKLINE">
  {({ permission }) => (
    permission === 'SHOW'
      ? <input type="text" />
      : null
    )
  }
</AccessControl>

note: our permissions evaluation only support show/hide/disable, you can use more by implementing the customRenderView and/or the customAccessControlChecker and setting it on the setAccessControl function.

Icon Registry Provider

Description

Provider for using icons base on a registry (iconRegistry):

{
  name: { path: './path.svg', alt: 'Icon name' }
}

Init provider

import { IconRegistryProvider } from '@kleeen/core-react';

<KUICombineProviders providers={[
  TranslationProvider({ localeData, locale: 'en' }),
  ReduxProvider,
  IconRegistryProvider({ iconRegistry }) // take care only of this one for now
]}
>
  <App />
</KUICombineProviders>

here we are setting more than one provider for our app, but don't worry about the KUICombineProviders or the other providers for now, basically IconRegistryProvider({ iconRegistry }) returns a react context provider so your app can have access to the icon registry in whatever part (using the corresponding consumer).

Using the icon consumer

import { IconRegistryConsumer } from '@kleeen/core-react';

<IconRegistryConsumer>
  {({ getIcon }) => (
    <img className="icon" src={getIcon(kuiIcon).path} alt={getIcon(kuiIcon).alt} />
  )}
</IconRegistryConsumer>

note: of course we have and easy way to use an icon without the icon consumer and is the kui-icon (it use the consumer inside) this component and its documentation are on kleeen-components-react package.

Theming Provider

Description

Provider to change the theme of the application by adding or modifying the classes of the html tag.

Properties

Type	Name	Default Values
String	initialTheme

Init Provider

ThemingProvider({ themeName })

Usage

import { ThemingConsumer } from '@kleeen/core-react';

<ThemingConsumer>
  {({ setTheme }) => (
    {setTheme('newThemeName')}
  )}
</ThemingConsumer>

Translation Provider

Description

Provider for the internationalization of the application defined in a file with the following structure (localeData):

{
  "en": {
    "textKey": "English translation!"
  },
  "es": {
    "textKey": "¡Traducción español!"
  }
}

Properties

Type	Name	Default Values
String	locale	Navigator Languaje
Array	languageToSupport	[ es , en , fr , it ]
Json	localeData	{ }

Init Provider

TranslationProvider({ localeData, locale: 'en' })

Use for language change

import { ThemingConsumer } from '@kleeen/core-react';

<ThemingConsumer>
  {({ setLocale }) => (
    select onChange={e => setLocale(e.target.value)}>
      <option value="en">Ingles</option>
      <option value="es">Español</option>
    </select>
  )}
</ThemingConsumer>

Use for translation

<Translate defaultMessage="content only for Admin">{'App.adminText'}</Translate>

KUIConnect

It allows to add the consumers of the combine consumer to a component to pass the props and these can be used from that component.

Example

import { KUIConnect } from '@kleeen/core-react';

const App = (props) => {
  render (
    const { translate, getIcon, setLocale } = props;
    return  (
     <div>
       ...
     </div>
    );
  );
};

compose(
  connect(state => state, ({ logIn })),
  KUIConnect(state => state),
)(App);

Combine Providers

Component that combines several providers, allows consuming components to subscribe to context changes. The properties for this function are children and providers.

Example

<KUICombineProviders providers = {[
    TranslationProvider({ localeData, locale: 'en' }),
    ReduxProvider,
    IconRegistryProvider({ iconRegistry }),
  ]}
>

Combine Consumers

Function that subscribes to context changes. The properties for this function are children and consumers.

Example

KUICombineConsumers({
  children,
  consumers: {
    theming: ThemingConsumer,
    icons: IconRegistryConsumer,
    translation: TranslationConsumer,
  },
});