Frontend Development

Directory Structure

packages/assets/src/
├── components/        # Reusable React components
├── pages/            # Page components with skeleton loading
├── loadables/        # Code-split components (organized in folders)
├── contexts/         # React contexts for state management
├── hooks/            # Custom React hooks (API, state)
├── services/         # API services calling admin endpoints
├── routes/           # Route definitions (routes.js)
└── locale/           # Translations
    ├── input/        # Source translation JSON files
    └── output/       # Generated translated files

Quick Patterns

Translation Usage

import {useTranslation} from 'react-i18next';

function MyPage() {
  const {t} = useTranslation();
  return <Page title={t('MyPage.title')}>{t('MyPage.subtitle')}</Page>;
}

API Hooks

// Fetch data
const {data, loading, fetchApi} = useFetchApi({
  url: '/api/customers',
  defaultData: [],
  initLoad: true
});

// Create
const {creating, handleCreate} = useCreateApi({
  url: '/api/customers',
  successMsg: 'Created!',
  successCallback: () => fetchApi()
});

Skeleton Loading

function PageSkeleton() {
  return (
    <SkeletonPage primaryAction>
      <Layout>
        <Layout.Section>
          <Card>
            <SkeletonBodyText lines={5} />
          </Card>
        </Layout.Section>
      </Layout>
    </SkeletonPage>
  );
}

State Management

• Use React Context for global state
• Use local state for component-specific data

// contexts/ShopContext.js
const ShopContext = createContext();

export function ShopProvider({ children }) {
  const [shop, setShop] = useState(null);

  return (
    <ShopContext.Provider value={{ shop, setShop }}>
      {children}
    </ShopContext.Provider>
  );
}

export const useShop = () => useContext(ShopContext);

Component Guidelines

• Use .js files only (no .jsx)
• Always create loadable components in organized folders with index.js
• All data-fetching pages must have skeleton loading states

Development Commands

# Start embedded app development
cd packages/assets && npm run watch:embed

# Start standalone development
cd packages/assets && npm run watch:standalone

# Production build
cd packages/assets && npm run production