kitcheningredients

kitcheningredients

About

Helper for a base app template with a Directus Backend based on NativeBase. Written for React Web & React Native. Designed for an expo app.

• Login System to Directus
• React & React Native (expo)
• Based on NativeBase
• Synchronised States
• Synchronised Storage
• Easy Routing
• Lottie Files

Installation

npm install kitcheningredients

Usage

Using App-Template

Adapt the index.web.js from your expo web project. Register your Plugin.

import { registerRootComponent } from 'expo';
import {App, ConfigHolder} from 'kitcheningredients'
import {MyDirectusStorage} from "kitcheningredients/lib/module/ignoreCoverage/KitchenHelper/storage/MyDirectusStorage";
import Project from "./src/project/Project";
import nativebaseConfig from "./nativebase.config";
import styleConfig from "./styleConfig.json";
import config from "./config.json";
import currentpackageJson from "./package.json";
import currentpackageJsonLock from "./package-lock.json";
import thirdpartyLicense from "./thirdpartyLicense.json"
import AppConfig from "./app.config"

ConfigHolder.instance.storage = new MyDirectusStorage();
ConfigHolder.plugin = new Project()
ConfigHolder.nativebaseConfig = nativebaseConfig
ConfigHolder.styleConfig = styleConfig
ConfigHolder.config = config
ConfigHolder.currentpackageJson = currentpackageJson
ConfigHolder.currentpackageJsonLock = currentpackageJsonLock
ConfigHolder.thirdpartyLicense = thirdpartyLicense
ConfigHolder.AppConfig = AppConfig

registerRootComponent(App);

Server-API - Get Directus Client

You can create, update or delete items in your collection of your directus server. Therefore ServerAPI is neeeded. You will receive a directus instance. More informations can be found here: https://docs.directus.io/reference/sdk/#items

import {ServerAPI} from "kitcheningredients";

export const TestDownload = (props) => {
  async function download(){
    let directus = ServerAPI.getClient();
    const articles = await directus.items('articles').readByQuery({});
  }
}

User and Role

To get the logged in user and corresponding role you can use:

import {ConfigHolder} from "kitcheningredients";

let roleInstance = ConfigHolder.instance.getRole();
let userInstance = ConfigHolder.instance.getUser();

Register Routes and Menus

import {Example} from "./screens/example/Example";
import {BaseTemplate, PluginInterface, Menu, MenuItem} from "kitcheningredients";

export default class Project implements PluginInterface {

    //...

  registerRoutes() {
      //Register your screen with the BaseTemplate or any other you like
      Menu.registerRoute(Example, BaseTemplate, "Example", "example");
      let myMenu = new MenuItem("ExampleMenu", "ExampleMenu", null, null, null, null, true);
      Menu.registerCommonMenu(myMenu);
      myMenu.addChildMenuItems(new MenuItem("ExampleItem", "ExampleItem", Example));
  }

}

Role specific menus can be also registered:

import {MenuItem} from "kitcheningredients"
...
let menu = new MenuItem("ExampleItem", "ExampleItem", Example)

Menu.registerCommonMenu(menu); //Menu everyone can see
Menu.registerUnauthenticatedMenu(menu) //Menu unauthenticated users can see
Menu.registerAuthenticatedMenu(menu); //Menu authenticated users can see

Menu.registerMenuForRoleId("8cse873gbsbefu...", menu); //Menu only user with role id can see

//Attention! Multiple roles can have the same name
Menu.registerUnsafeMenuForRoleByName("Moderator", menu); //Menu only user with role which name is can see

MenuItem

let menu = new MenuItem(
  key, // string: define a unique string for the menu item
  label, //string: The displayed label
  destination, //[default null] FunctionComponent: which was registered
  items=null, //[default null] sub menu list
  command=null, //[default null] function:  will be called on selection
  content=null, //[default null] JSX.Element: If no sub menus given, content will be shown
  expanded=false, //[default false] boolean: if sub menus will be shown directly
  customIcon //[can be null] string or function (string: MaterialCommunity Icon name) (function: (menu, hasChildren, expanded, props.level))
);

Route-Templates

During the registering of your screens/routes you can add a template. Typicly you will use the BaseTemplate.

export default class Project implements PluginInterface {
    registerRoutes() {
      Menu.registerRoute(Example, <TEMPLATE>, "Example", "example");
    }
}

• BaseTemplate: Includes BaseNoPaddingTemplate and adds a BasePadding. Includes KeyboardAvoidingView which works inside Scrollviews.
  • Usecase: You want to show text or a standard component
  • BasePadding: Not a template but adds the base padding
• BaseNoPaddingTemplate: Includes BaseNoPaddingTemplate and a Scrollview with breakpoint layout for different screen sizes. Includes KeyboardAvoidingView which works inside Scrollviews.
  • Usecase: You want to scroll and use your own padding added but dont want to rerender for every screen change
• BaseNoScrollTemplate: Full width and height with basic title and drawer button without scrolling. Includes KeyboardAvoidingView which works inside Scrollviews.
  • Usecase: You want to implement a different scroll direction but want the drawer and title
• EmptyTemplate: Nothing but the props: height and width to all children
  • Usecase: You want to show a fullscreen map and dont want the drawer or title

Layout

Remember you can use Route-Templates as your basic "Layout" or template for you content. If you want to get informations about the Layout of your screen you can use the following informations.

import {Layout} from "kitcheningredients"

export const MyFunctionComponent = (props) => {

    //boolean: true if using a small device
    let isSmallDevice = Layout.usesSmallDevice(); //triggers rerendering on change

    //number|string get the witdh of the content (e. G. "100%" or 700, ...)
    let contentWidth = Layout.useBaseTemplateContentWidth(); //triggers rerendering on change

    //get a dict with the layout sizes for different screen sizes
    let rawWidthValues = Layout.getRawWidthValues()
}

If you want variables depending on the screen size you can use useBreakpointValue. Get more informations at: https://docs.nativebase.io/3.4.x/use-breakpoint-value

Example from NativeBase, where you can get either a row or a column value depending on the screen size:

import {useBreakpointValue} from "native-base";

export const MyFunctionComponent = (props) => {
  const flexDir = useBreakpointValue({
    base: "column",
    lg: "row"
  });

}

Navigation

import {NavigatorHelper} from "kitcheningredients";
import {Example} from "./screens/example/Example";

export const Tutorial = (props) => {

    // on button press
    function onPress(){
      // navigate to registered component
      NavigatorHelper.navigate(Example, newProps, resetHistory);

      // or navigate to a route
      NavigatorHelper.navigateToRouteName(routeName, newProps, resetHistory)
    }

}

TODO: navigateWithoutParams

TODO: toggleDrawer TODO: openDrawer TODO: closeDrawer TODO: goBack TODO: getRouteParams TODO: navigateHome

Auth

Authentication is done by the template. If you want to get the directus client, please read Server-API abouve.

Mail Register

In order to allow users self registration follow these steps:

1. Directus => Settings => Roles & Permissions => Role Public allow to create Directus_users (expand at bottom) atleast email and password
2. [Optional] Set desired default role (<YOUR_DEFAULT_ROLE_ID>): Directus => Settings => Roles & Permissions => Role Public => create Directus_users => Field Presets => {"role": "<YOUR_DEFAULT_ROLE_ID>"}
3. Enable in your frontend app the button (in the index.js / index.web.js)

ConfigHolder.authConfig.mail.visible = true; //has to be enabled
ConfigHolder.authConfig.mail.registerVisible = true;

Synched States

Sometimes there is a need to synchronize states between different screens. This can be done by using the following functions. You will first need to register a state (see State Registration below). Then you can use the synchronized states (see Sync State usage).

State Registration

First you have to register the state you want to synchronize. You have the following options:

• Permanent: Save the state in the local storage
• Temporal: Save the state in the session storage

In the Project.tsx file return the following classes you created:

...
	getSynchedStateKeysClass(){
		return SynchedStateKeys;
	}

	getStorageKeysClass(){
		return StorageKeys;
	}
...

An example of the above one class is shown below:

export class SynchedStateKeys {
    static exampleSynchedText = "SynchedStorage.exampleSynchedText"
}

Congrats, you are now able to use synched states accross your app.

Sync State usage

In the Synched state only strings will be saved. If that is the case you can use useSynchedState otherwise you can use useSynchedJSONState.

• useSynchedState

import {useSynchedState} from "kitcheningredients";

export const MyFunctionComponent = (props) => {
  const [myState, setMyState] = useSynchedState(SynchedStateKeys.exampleSynchedText);
}

• useSynchedJSONState Beware that the state will be saved as JSON.stringify and therefore you cannot have circular references.

import {useSynchedJSONState} from "kitcheningredients";

export const MyFunctionComponent = (props) => {
  const [myJSONState, setMyJSONState] = useSynchedState(SynchedStateKeys.exampleSynchedJSON);
}

Components

Icon

A wrapper for NativeBase Icons: https://docs.nativebase.io/3.4.x/icon Default Icon will be MaterialCommunity. You can see all icons at: https://icons.expo.fyi/

Default Icons

import {Icon} from "kitcheningredients";
return (<Icon name={"account"} />) //Default MaterialIcons

Color and size

import {Icon} from "kitcheningredients";
return (<Icon name={"account"} color={"#FF0000"} size={"sm"} />) //Default MaterialIcons

More Icons

import {Ionicons} from "@expo/vector-icons";
import {Icon} from "kitcheningredients";
return (<Icon name={"account"} as={Ionicons} />)

TextWithIcon

import {TextWithIcon} from "kitcheningredients";
return (<TextWithIcon icon={"account"} content={"String"} />)

DirectusImage

If you want to display an image from directus, like a mealImage or a user uploaded picture.

import {DirectusImage} from "kitcheningredients";

let myImageId = "sfsf6sef..."; //an image id you received
return (<DirectusImage assetId={myImageId} onPress={() => {console.log("Yeah!")}} />)

• assetId: string;
  • The string of the immage id
• alt?: string;
  • an alternative information if the image cant be shown
• url?: string;
  • optional you can provide an url of an image from a different host like google,...
• style?: any;
  • Styling object
• showLoading?: boolean
  • default: true (shows a loading skeleton)
• isPublic?: boolean
  • if the image resource is accessable for the public without authentication
• onPress?: () => {}
  • A function which will be called on press

TODO: CrossLottie

KitchenSkeleton

You can use the KitchenSkeleton to show loading content. It will occupy the used space. More information at: https://docs.nativebase.io/3.4.x/skeleton#page-title

import {KitchenSkeleton} from "kitcheningredients";
return (<KitchenSkeleton flex={1} />)

ScrollViewWithGradient

You can use the Scrollview wrapper to show a gradient on the bottom, which indicates more content.

import {ScrollViewWithGradient} from "kitcheningredients";
return (
    <ScrollViewWithGradient>
      <Text>{"Lorem Ipsum long text or content"}</Text>
    </ScrollViewWithGradient>
);

• hideGradient?: boolean
  • Shows or hides the gradient

MyActionsheet

If you want to show a actionsheet you can use the MyActionsheet. It pops up on top of the screen.

import {MyActionsheet} from "kitcheningredients";
const actionsheet = MyActionsheet.useActionsheet();
const params = {
  title: "Test",
  onAccept: () => {console.log("Accept")},
  ...
};
actionsheet.show(params);

• title: string
• acceptLabel?: string
  • default: "Accept"
• cancelLabel?: string
  • default: "Cancel"
• onAccept?: () => {}
  • A function which will be called on accept
• onCancel?: () => {}
  • A function which will be called on cancel
• renderCustomContent?: () => {}
  • A function which will be called to render the custom content

TODO: ThemedMarkdown TODO: DirectusMarkdown TODO: DirectusSingletonMarkdown

TODO: MyThemedBox

TODO: CustomFloaters

Created with

Builder Bob: https://github.com/callstack/react-native-builder-bob

Contributors

The FireboltCasters