@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, it uses a translations object and the structures is:

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

the first key means the language, and you need to have a key for each string on your app (or at least the strings that should support multi languages) and that is the second key.

this implementation was done based on react-intl[https://github.com/yahoo/react-intl] and its support the mayority of the features as well, because of the way of how the flow of the params is.

Properties of the translation provider

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

you can send more params and they are going to be added to the IntlProvider from react-int.

Init Provider

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

Use for language change

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

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

you can consume the TranslationConsumer and change the data of the provider, you can also use the kuiConnect and receive for props the setLocale directly.

Use for translation

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

you can also inject an translate function in your props in order to manage the translations with a function, this can be done with the kuiConnect.

<Fragment>{translate({ id: "App.adminText", defaultMessage: "content only for Admin" })}</Fragment>

or

<Fragment>{translate('App.adminText')}</Fragment>

KUIConnect

It allows to have access to all the kui providers context much like the redux connect (only in the idea not in the implementation itself) you can decorate a component with the kuiConnect, who receive a mapStateToProps function, the mapStateToProps function dictates the props that are going to be injected to the decorated component (you have access of all the kui providers context that you have in your app).

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), // injecting all that data of the providers that you have on your app.
)(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

ReactDOM.render(
  <KUICombineProviders providers={[
    TranslationProvider({ localeData, locale: 'en' }),
    ReduxProvider,
    IconRegistryProvider({ iconRegistry }),
  ]}
  >
    <App />
  </KUICombineProviders>,
  document.getElementById('root'),
);

Combine Consumers

Function that subscribes to context changes. The properties for this function are children and consumers it should be use like the kuiConnect in a react context way.

Example

const KUIConsumers = ({ children }) => KUICombineConsumers({
  children,
  consumers: {
    theming: ThemingConsumer,
    icons: IconRegistryConsumer,
    translation: TranslationConsumer,
  },
});
<KUIConsumers>
  {({ icons, theming, translation }) => (
    {...some use for all the provider context}
  )}
</KUIConsumers>