kitcheningredients

About

DEMO: https://fireboltcasters.github.io/kitcheningredients/

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.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));
  }

}

A route with paramters can be registered like this:

Menu.registerRoute(MealOfferList, EmptyTemplate, "Mealsoffers", "mealoffers", "/:canteenid/:date");

After that you can access your route params like this:

let params = props?.route?.params;

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
  • 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
  • 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
  • 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;

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

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