Skip to content

MatulaDesign/lumberyard-next

Repository files navigation

@lumberyard/lumberyard-core API

Menu:

| 1. configs
|-- 1.1 firebase
| 2. services
|-- 2.1 storage
|---- 2.1.1 store
|------ store example
|---- 2.1.2 cookies
|---- 2.1.3 remote

1. configs

Configs API is a module that holds various configurations used in this project.

1.1 import { FirebaseConfig } from "@configs"

2. services

Services API consists of application's internal services.

2.1 import { store, remote, cookies } from "@storage"

@storage is a bundle of various modules that persist data

2.1.1 store

store is based on valtio plugin. Valtio is a proxy that listens to data changes and allows for both react and vanillaJS data operations.

store.get - returns store object with state properties
store.set - returns store object with state properties
store.use - hijacks valtio's useSnapshot hook - !!!use inside react components!!!
store example:
import { proxy, useSnapshot } from 'valtio';

const stateOne = { one: null };
const stateTwo = { two: false };

const store = {
  one: proxy(stateOne),
  two: proxy(stateTwo),
};

const operator = {
  get: store,
  set: {
    status: (key, type, msg = undefined) => {
      store[key].status = { type, msg };
    },
    geo: (update) => update(store.geo.data),
    visitor: (update) => update(store.visitor.data),
  },
  use: useSnapshot,
};

export default operator;

2.1.2 cookies

cookies is based on js-cookie plugin. This internal module is just a hijack of import Cookies from 'js-cookie', so that it matches syntactically to the rest of the storage API

2.1.3 remote

remote provides connection to external storages

remote.firebase - creates new instance of FirebaseConfig class

FirebaseConfig sets up firebase connection using FirebaseInitialConfig which should be an object with { apiKey: ..., authDomain: ..., etc } and plugs into firebase's internal API.

export default class FirebaseConfig {
  public db: ReturnType<firebase.app.App['firestore']>;
  public auth: typeof firebase.auth;
  public functions: typeof firebase.functions;
  public storage: typeof firebase.storage;
  public api: typeof firebase;

  constructor(config: Config = FirebaseInitialConfig) {
    this.db = !firebase.apps.length
      ? firebase.initializeApp(config).firestore()
      : firebase.app().firestore();
    this.auth = firebase.auth;
    this.functions = firebase.functions;
    this.storage = firebase.storage;
    this.api = firebase;
  }
}

2.2 import { position } from "@geo"

@geo is responsible from grabbing visitor's position

Deploy the example using Vercel:

Deploy with Vercel

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example with-tailwindcss with-tailwindcss-app
# or
yarn create next-app --example with-tailwindcss with-tailwindcss-app

Deploy it to the cloud with Vercel (Documentation).