Coding Standards

All Alokai modules follow specific code rules and patterns that can be useful during development. If you are creating a new module, we recommend following the same rules/patterns to ease your development process and provide consistency across the ecosystem.

Linting

Alokai storefronts use eslint, prettier as linting tools. Storefronts using next and nuxt contain a different set of rules - some are custom, but on top of those custom rules, common well-known plugins are used.

eslint rules

[
    "next/core-web-vitals",
    "plugin:@typescript-eslint/recommended",
    "plugin:jsonc/recommended-with-json",
    "plugin:perfectionist/recommended-natural",
]

prettier rules

{
    "singleQuote": true,
    "printWidth": 120,
    "plugins": ["prettier-plugin-tailwindcss"]
}

Rules

We recommend writing code with our guidelines, which help produce readable, dry, and clean code.

• keep the correct file structure.
• components and hooks names are written with kebab-case
• use the atomic approach when writing styles for components, tailwindcss classes are currently used in Alokai storefronts
• export every method or type that should be available in storefront
• api typings are available from @/types alias import

State

The most commonly needed data can be accessed from the state manager available in storefront.

Currently, we expose only a couple of data states available with given methods.

export const {
  AlokaiProvider,
  useSdk,
  useSfCartState,
  useSfCurrenciesState,
  useSfCurrencyState,
  useSfCustomerState,
  useSfLocaleState,
  useSfLocalesState,
} = createAlokaiContext<Sdk, SfContract>();

Usage:

import { useSfCustomerState } from '@/sdk/alokai-context';

export default function ComponentName() {
  const [customer] = useSfCustomerState();
}

API Requests

To get data that is not available in the state, we can create our own hook/composable to get the desired data.

We can access a unified method via sdk.unfied.methodName or use our own namespaced method sdk.quickOrder.methodName as the new methods documentation shows. The next storefront uses @tanstack/react-query package for doing queries.

Example:

import { useQuery } from "@tanstack/react-query";
import { useSdk } from "@/sdk/alokai-context";

export function useQuickOrderCart() {
  const sdk = useSdk();

  return useQuery({
    queryFn: () => sdk.quickOrder.getQuickOrderCart(),
    queryKey: ["key"],
  });
}