@sqrzro/admin 1.0.0-beta.1

package/dist/types/filters/interfaces.d.ts

@@ -0,0 +1,36 @@
+/// <reference types="react" />
+import type { FormFieldComponentProps } from '../components/FormField';
+import type { InputValue, Remote, SimpleObject } from '../utility/interfaces';
+interface PanelOptions {
+    isScrollable?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+}
+export interface FilterOptions {
+    data?: SimpleObject[] | string[];
+    label: string;
+    name: string;
+    props?: Record<string, unknown>;
+    remote?: Remote;
+}
+export interface FilterFieldProps extends FormFieldComponentProps {
+    data?: SimpleObject[] | string[];
+    extraProps?: Record<string, unknown>;
+    panelIndex?: number;
+    setPanelIndex?: React.Dispatch<React.SetStateAction<number>>;
+}
+export interface RenderSummaryArgs {
+    data?: SimpleObject[] | string[];
+    props?: Record<string, unknown>;
+    value?: InputValue;
+}
+export interface FilterField {
+    data?: SimpleObject[] | string[];
+    label: string;
+    name: string;
+    panelOptions?: PanelOptions | PanelOptions[];
+    props?: Record<string, unknown>;
+    remote?: Remote;
+    renderField: (props: FilterFieldProps) => React.ReactNode;
+    renderSummary?: (args: RenderSummaryArgs) => string;
+}
+export {};

package/dist/types/hooks/useAccessiblePanel.d.ts

@@ -0,0 +1,13 @@
+import type { KeyboardEventHandler } from 'react';
+import type { SimpleEventHandler, SimpleObject } from '../utility/interfaces';
+interface UseAccessiblePanelArgs {
+    data?: SimpleObject[];
+    name: string;
+    onChange?: SimpleEventHandler;
+    value?: (number | string)[] | number | string;
+}
+interface UseAccessiblePanelReturn<T> {
+    handleKeyboard: KeyboardEventHandler<T>;
+}
+declare const useAccessiblePanel: <T = HTMLButtonElement | HTMLInputElement>({ data, name, onChange, value, }: UseAccessiblePanelArgs) => UseAccessiblePanelReturn<T>;
+export default useAccessiblePanel;

package/dist/types/hooks/useAppContext.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="react" />
+import type { NavigationObject } from '../utility/interfaces';
+export interface Me {
+    name: string;
+    permissions?: string[];
+}
+interface AppContextObject {
+    auth: {
+        identifier?: string;
+        identifierLabel?: string;
+        tfa?: boolean;
+    } | null;
+    Logo: React.ComponentType<{
+        isReverse?: boolean;
+    }> | null;
+    me: Me | null;
+    name: string;
+    navigation: (NavigationObject | string)[];
+    paths: {
+        api?: string;
+        app?: string;
+    };
+    style: {
+        brand?: string;
+        layout?: string;
+    } | null;
+}
+export interface Config extends Partial<AppContextObject> {
+    name: AppContextObject['name'];
+}
+interface AppContextProviderProps {
+    children: React.ReactNode;
+    value: Config;
+}
+export declare const AppContextProvider: React.FunctionComponent<AppContextProviderProps>;
+declare const useAppContext: () => AppContextObject;
+export default useAppContext;

package/dist/types/hooks/useClickOutside.d.ts

@@ -0,0 +1,3 @@
+import type { MutableRefObject } from 'react';
+declare const useClickOutside: () => [boolean, (bool: boolean) => void, MutableRefObject<HTMLDivElement | null>];
+export default useClickOutside;

package/dist/types/hooks/useConnectedList.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { ListFunctions } from '../core/ConnectedRepeater';
+interface UseConnectedListReturn extends ListFunctions {
+    ConnectedList: React.FunctionComponent;
+}
+declare const useConnectedList: () => UseConnectedListReturn;
+export default useConnectedList;

package/dist/types/hooks/useFilters.d.ts

@@ -0,0 +1,3 @@
+import type { FilterMap, FilterOptions } from '../services/FilterService';
+declare const useFilters: (options?: FilterOptions | undefined) => [FilterMap, (data: FilterMap) => void];
+export default useFilters;

package/dist/types/hooks/useForm.d.ts

@@ -0,0 +1,26 @@
+import type { InputValue } from '../utility/interfaces';
+interface ApiResponseObject<T = Record<string, unknown>> {
+    data: T & {
+        errors?: Record<string, [string]>;
+    };
+    headers: Headers;
+    status: number;
+    url: string;
+}
+interface UseFormArgs {
+    errorMessage?: string | false;
+    formData: Record<string, InputValue>;
+    method?: 'get' | 'patch' | 'post';
+    successMessage?: string | false;
+    url: string;
+    onSubmitSuccess?: (response: ApiResponseObject) => void;
+    onSubmitError?: (err?: Error) => void;
+    transformRequest?: (data: Record<string, InputValue>) => Record<string, InputValue>;
+}
+interface UseFormReturn {
+    errors: Record<string, string>;
+    isLoading: boolean;
+    handleSubmit: () => void;
+}
+declare const useForm: ({ errorMessage, formData, method, successMessage, url, onSubmitSuccess, onSubmitError, transformRequest, }: UseFormArgs) => UseFormReturn;
+export default useForm;

package/dist/types/hooks/useFormData.d.ts

@@ -0,0 +1,9 @@
+import type { InputValue } from '../utility/interfaces';
+export interface FormDataArgs {
+    data?: Record<string, InputValue>;
+    defaults?: Record<string, InputValue>;
+    fields?: string[];
+}
+export declare type FormDataReturn = [Record<string, InputValue>, (key: string, value: InputValue) => void];
+declare const useFormData: ({ data, defaults, fields }: FormDataArgs) => FormDataReturn;
+export default useFormData;

package/dist/types/hooks/useLayout.d.ts

@@ -0,0 +1,6 @@
+interface UseLayoutReturn {
+    layout: string | null;
+    applyLayoutClassName: (styles: Record<string, string>, prefix?: string) => string | null;
+}
+declare const useLayout: () => UseLayoutReturn;
+export default useLayout;

package/dist/types/hooks/useModal.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ModalProps } from '../core/Modal';
+interface UseModalOptions {
+    onClose?: React.MouseEventHandler<HTMLButtonElement>;
+}
+interface UseModalReturn {
+    closeModal: () => void;
+    Modal: React.FunctionComponent<ModalProps>;
+    openModal: () => void;
+}
+declare const useModal: (options?: UseModalOptions | undefined) => UseModalReturn;
+export default useModal;

package/dist/types/hooks/useVariant.d.ts

@@ -0,0 +1,6 @@
+import type { StyleVariant } from '../utility/interfaces';
+interface UseVariantReturn {
+    applyVariantClassName: (styles: Record<string, string>, prefix?: string) => string | null;
+}
+declare const useVariant: <T = StyleVariant>(variant?: T | T[] | undefined) => UseVariantReturn;
+export default useVariant;

package/dist/types/index.d.ts

@@ -0,0 +1,187 @@
+import 'regenerator-runtime/runtime.js';
+export * from './utility/interfaces';
+export { default as createApp } from './utility/create-app';
+export { ApiService, AuthService, EventService, StorageService } from '@sqrzro/utility';
+export * from './components/Alert';
+export { default as Alert } from './components/Alert';
+export * from './components/Allow';
+export { default as Allow } from './components/Allow';
+export * from './components/App';
+export { default as App } from './components/App';
+export * from './components/AutoSuggest';
+export { default as AutoSuggest } from './components/AutoSuggest';
+export * from './components/Button';
+export { default as Button } from './components/Button';
+export * from './components/CalendarInput';
+export { default as CalendarInput } from './components/CalendarInput';
+export * from './components/CheckboxList';
+export { default as CheckboxList } from './components/CheckboxList';
+export * from './components/ConnectedDropdown';
+export { default as ConnectedDropdown } from './components/ConnectedDropdown';
+export * from './components/ConnectedList';
+export { default as ConnectedList } from './components/ConnectedList';
+export * from './components/ConnectedScene';
+export { default as ConnectedScene } from './components/ConnectedScene';
+export * from './components/ConnectedTable';
+export { default as ConnectedTable } from './components/ConnectedTable';
+export * from './components/ContentBlock';
+export { default as ContentBlock } from './components/ContentBlock';
+export * from './components/DateInput';
+export { default as DateInput } from './components/DateInput';
+export * from './components/Document';
+export { default as Document } from './components/Document';
+export * from './components/Dropdown';
+export { default as Dropdown } from './components/Dropdown';
+export * from './components/Fieldset';
+export { default as Fieldset } from './components/Fieldset';
+export * from './components/FileInput';
+export { default as FileInput } from './components/FileInput';
+export * from './components/FilterLink';
+export { default as FilterLink } from './components/FilterLink';
+export * from './components/Form';
+export { default as Form } from './components/Form';
+export * from './components/FormActions';
+export { default as FormActions } from './components/FormActions';
+export * from './components/FormField';
+export { default as FormField } from './components/FormField';
+export * from './components/FormRepeater';
+export { default as FormRepeater } from './components/FormRepeater';
+export * from './components/ImageInput';
+export { default as ImageInput } from './components/ImageInput';
+export * from './components/InfoPanel';
+export { default as InfoPanel } from './components/InfoPanel';
+export * from './components/Link';
+export { default as Link } from './components/Link';
+export * from './components/List';
+export { default as List } from './components/List';
+export * from './components/ListActions';
+export { default as ListActions } from './components/ListActions';
+export * from './components/LoginForm';
+export { default as LoginForm } from './components/LoginForm';
+export * from './components/Message';
+export { default as Message } from './components/Message';
+export * from './components/ModalActions';
+export { default as ModalActions } from './components/ModalActions';
+export * from './components/MoneyInput';
+export { default as MoneyInput } from './components/MoneyInput';
+export * from './components/PasswordForm';
+export { default as PasswordForm } from './components/PasswordForm';
+export * from './components/PasswordInput';
+export { default as PasswordInput } from './components/PasswordInput';
+export * from './components/RadioList';
+export { default as RadioList } from './components/RadioList';
+export * from './components/Scene';
+export { default as Scene } from './components/Scene';
+export * from './components/SummaryList';
+export { default as SummaryList } from './components/SummaryList';
+export * from './components/Switch';
+export { default as Switch } from './components/Switch';
+export * from './components/Table';
+export { default as Table } from './components/Table';
+export * from './components/Tag';
+export { default as Tag } from './components/Tag';
+export * from './components/TextArea';
+export { default as TextArea } from './components/TextArea';
+export * from './components/TextInput';
+export { default as TextInput } from './components/TextInput';
+export * from './components/WebsiteInput';
+export { default as WebsiteInput } from './components/WebsiteInput';
+export * from './components/WeekCalendar';
+export { default as WeekCalendar } from './components/WeekCalendar';
+export * from './core/AppHeader';
+export * from './core/AppLogo';
+export * from './core/AppLogoImage';
+export * from './core/AppLogoPlaceholder';
+export * from './core/Assistive';
+export * from './core/Banner';
+export * from './core/BuildModal';
+export * from './core/Calendar';
+export * from './core/CalendarDay';
+export * from './core/CalendarMonth';
+export * from './core/CalendarNavigation';
+export * from './core/CalendarWeek';
+export * from './core/ChkRad';
+export * from './core/ChkRadIcon';
+export * from './core/ChkRadList';
+export * from './core/CloseButton';
+export * from './core/ConfirmModal';
+export * from './core/ConnectedRepeater';
+export * from './core/ConnectedRepeaterComponent';
+export * from './core/Container';
+export * from './core/DropdownPanel';
+export * from './core/EmptyMessage';
+export * from './core/ErrorBoundary';
+export * from './core/ErrorMessage';
+export * from './core/FilterItem';
+export * from './core/Filters';
+export * from './core/FixedActions';
+export * from './core/FormError';
+export * from './core/FormLabel';
+export * from './core/FormLegend';
+export * from './core/Header';
+export * from './core/Icon';
+export * from './core/IconButton';
+export * from './core/InputPanel';
+export * from './core/ListItem';
+export * from './core/ListItemAction';
+export * from './core/ListItemActions';
+export * from './core/ListItemMetaItem';
+export * from './core/ListItemTitle';
+export * from './core/Loader';
+export * from './core/MeActions';
+export * from './core/MePanel';
+export * from './core/Modal';
+export * from './core/Navigation';
+export * from './core/NavigationDivider';
+export * from './core/NavigationItem';
+export * from './core/Pagination';
+export * from './core/PaginationItem';
+export * from './core/Panel';
+export * from './core/RadialProgress';
+export * from './core/StaticTextInput';
+export * from './core/Styled';
+export * from './core/SummaryListItem';
+export * from './core/TableActionsCell';
+export * from './core/TableCell';
+export * from './core/TableHead';
+export * from './core/TableRow';
+export * from './core/Tabs';
+export * from './core/TextInputAncillary';
+export * from './core/Toast';
+export * from './core/WeekCalendarDay';
+export * from './hooks/useAccessiblePanel';
+export { default as useAccessiblePanel } from './hooks/useAccessiblePanel';
+export * from './hooks/useAppContext';
+export { default as useAppContext } from './hooks/useAppContext';
+export * from './hooks/useClickOutside';
+export { default as useClickOutside } from './hooks/useClickOutside';
+export * from './hooks/useConnectedList';
+export { default as useConnectedList } from './hooks/useConnectedList';
+export * from './hooks/useFilters';
+export { default as useFilters } from './hooks/useFilters';
+export * from './hooks/useForm';
+export { default as useForm } from './hooks/useForm';
+export * from './hooks/useFormData';
+export { default as useFormData } from './hooks/useFormData';
+export * from './hooks/useLayout';
+export { default as useLayout } from './hooks/useLayout';
+export * from './hooks/useModal';
+export { default as useModal } from './hooks/useModal';
+export * from './hooks/useVariant';
+export { default as useVariant } from './hooks/useVariant';
+export * from './services/BuildService';
+export { default as BuildService } from './services/BuildService';
+export * from './services/ConfirmService';
+export { default as ConfirmService } from './services/ConfirmService';
+export * from './services/DateService';
+export { default as DateService } from './services/DateService';
+export * from './services/DownloadService';
+export { default as DownloadService } from './services/DownloadService';
+export * from './services/FilterComponentService';
+export { default as FilterComponentService } from './services/FilterComponentService';
+export * from './services/FilterService';
+export { default as FilterService } from './services/FilterService';
+export * from './services/FormatService';
+export { default as FormatService } from './services/FormatService';
+export * from './services/ToastService';
+export { default as ToastService } from './services/ToastService';

package/dist/types/scenes/Error404Scene.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Error404Scene: React.FunctionComponent;
+export default Error404Scene;

package/dist/types/services/BuildService.d.ts

@@ -0,0 +1,5 @@
+declare const BuildService: {
+    start: () => Promise<void>;
+    open: () => boolean;
+};
+export default BuildService;

package/dist/types/services/ConfirmService.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from 'react';
+export interface ConfirmModalData {
+    description: ReactNode;
+    label?: string;
+    onConfirm?: () => void;
+}
+export interface ConfirmObject {
+    ask: (data: ConfirmModalData) => boolean;
+    close: () => boolean;
+}
+declare const ConfirmService: ConfirmObject;
+export default ConfirmService;

package/dist/types/services/DateService.d.ts

@@ -0,0 +1,17 @@
+import type { SimpleObject } from '../utility/interfaces';
+interface DateItem {
+    id: number;
+    name: string | null;
+}
+declare const DateService: {
+    addMonths: (date: string, amount: number) => string;
+    getDaysInMonth: (date: string) => number;
+    getDayOfWeek: (date: string) => number;
+    getDays: () => DateItem[];
+    getMonths: () => DateItem[];
+    getQuickDates: () => SimpleObject[];
+    getYears: (startYear?: number, endYear?: number) => DateItem[];
+    isToday: (date: string) => boolean;
+    subMonths: (date: string, amount: number) => string;
+};
+export default DateService;

package/dist/types/services/DownloadService.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    download: (alias: string) => void;
+    makeUrl: (alias: string) => string;
+};
+export default _default;

package/dist/types/services/FilterComponentService.d.ts

@@ -0,0 +1,8 @@
+import type { FilterField, FilterOptions } from '../filters/interfaces';
+declare const FilterComponentService: {
+    boolean: (options: FilterOptions) => FilterField;
+    date: (options: FilterOptions) => FilterField;
+    dropdown: (options: FilterOptions) => FilterField;
+    quickDate: (options: FilterOptions) => FilterField;
+};
+export default FilterComponentService;

package/dist/types/services/FilterService.d.ts

@@ -0,0 +1,13 @@
+interface Query {
+    [key: string]: Query | Query[] | string[] | string;
+}
+export declare type FilterMap = Map<string, string[] | string | null>;
+export interface FilterOptions {
+    shouldFilterPage?: boolean;
+}
+declare const _default: {
+    getUrlForFilters: (data?: Query | undefined, includePathname?: boolean) => string;
+    makeUrl: (data: FilterMap, includePathname?: boolean) => string;
+    parseQuery: (query?: Query | undefined, options?: FilterOptions | undefined) => FilterMap;
+};
+export default _default;

package/dist/types/services/FormatService.d.ts

@@ -0,0 +1,7 @@
+declare const FormatService: {
+    date: (value?: unknown, formatString?: string) => string;
+    datetime: (value?: unknown) => string;
+    money: (value?: unknown) => string;
+    twoDigits: (value?: unknown) => string;
+};
+export default FormatService;

package/dist/types/services/ToastService.d.ts

@@ -0,0 +1,5 @@
+declare const ToastService: {
+    success: (message: string) => void;
+    error: (message: string) => void;
+};
+export default ToastService;

package/dist/types/utility/MockRouter/index.d.ts

@@ -0,0 +1,2 @@
+import type { NextRouter } from 'next/router';
+export declare const createMockRouter: (pathname?: string | undefined, query?: Record<string, string> | undefined) => NextRouter;

package/dist/types/utility/StorybookPanel/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface StorybookPanelProps {
+    children: React.ReactNode;
+    isDeep?: boolean;
+}
+declare const StorybookPanel: React.FunctionComponent<StorybookPanelProps>;
+export default StorybookPanel;

package/dist/types/utility/TestChangeHandler/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { InputValue } from '../interfaces';
+interface TestChangeHandlerProps {
+    children: React.ReactNode;
+    defaultValue?: InputValue;
+}
+declare const TestChangeHandler: React.FunctionComponent<TestChangeHandlerProps>;
+export default TestChangeHandler;

package/dist/types/utility/create-app.d.ts

@@ -0,0 +1,4 @@
+import type { AppType } from '../components/App';
+import type { Config } from '../hooks/useAppContext';
+declare const createApp: (config: Config) => AppType;
+export default createApp;

package/dist/types/utility/interfaces.d.ts

@@ -0,0 +1,72 @@
+import type { FunctionComponent, KeyboardEventHandler, MouseEventHandler } from 'react';
+import type { NextRouter } from 'next/router';
+export interface LayoutComponent extends FunctionComponent<{
+    children: React.ReactNode;
+}> {
+}
+export interface SceneComponentType extends FunctionComponent<{
+    router: NextRouter;
+}> {
+    Layout?: LayoutComponent;
+    hasLayout?: boolean;
+}
+export interface SimpleAction {
+    isDisabled?: boolean | null;
+    label: string;
+    onClick: () => void;
+    variant?: ButtonVariant | ButtonVariant[];
+}
+export interface NavigationObject {
+    label: string;
+    to?: string | null;
+    onClick?: MouseEventHandler<HTMLAnchorElement | HTMLButtonElement>;
+    permission?: string;
+}
+export declare type Remote = string | [string, Record<string, string[] | string | null>];
+export interface SimpleObject {
+    id: number | string;
+    name: string;
+}
+declare type SimpleActionFunction = (data?: Record<string, unknown>) => SimpleAction[];
+export interface TransformedObject {
+    [key: string]: unknown;
+    $id: number | string;
+    $actions?: SimpleAction[] | SimpleActionFunction | null;
+    $original?: Record<string, unknown>;
+}
+export declare type Transformer<T = Record<string, unknown>> = ((item: T) => TransformedObject) | [(item: T) => TransformedObject, SimpleAction[] | SimpleActionFunction];
+export interface SimpleEventTarget<T = InputValue> {
+    name: string;
+    value: T;
+    readonly checked?: boolean;
+    readonly type?: string;
+}
+export declare type InputValue = File | InputValue[] | boolean | number | string | null;
+export interface SimpleEvent<T = InputValue> {
+    item?: SimpleObject;
+    target: SimpleEventTarget<T>;
+}
+export declare type SimpleEventHandler<P = InputValue, T = SimpleEvent<P>> = (event: T) => void;
+export declare type StyleVariant = 'bordered' | 'danger' | 'primary' | 'secondary' | 'success' | 'tertiary' | 'warning';
+export declare type ButtonVariant = StyleVariant | 'link';
+export interface InputProps<T = InputValue, E = HTMLInputElement> {
+    /** Whether or not the field has a validation error */
+    hasError?: boolean;
+    id?: string;
+    isDisabled?: boolean;
+    /** The name of the field */
+    name: string;
+    onChange?: SimpleEventHandler<T>;
+    onKeyDown?: KeyboardEventHandler<E>;
+    /** The value of the field */
+    value?: T;
+}
+export interface PaginationObject {
+    activePage: number;
+    pageCount: number;
+}
+export declare const isString: (variable: unknown) => variable is string;
+export declare const isStringArray: (variable: unknown) => variable is string[];
+export declare const isSimpleObject: (variable: unknown) => variable is SimpleObject;
+export declare const isSimpleObjectArray: (variable: unknown) => variable is SimpleObject[];
+export {};

package/dist/types/utility/prop-types.d.ts

@@ -0,0 +1,40 @@
+import PropTypes from 'prop-types';
+import type { ButtonVariant, StyleVariant } from './interfaces';
+export declare const NextRouterPropType: PropTypes.Requireable<PropTypes.InferProps<{
+    asPath: PropTypes.Validator<string>;
+    back: PropTypes.Validator<(...args: any[]) => any>;
+    basePath: PropTypes.Validator<string>;
+    beforePopState: PropTypes.Validator<(...args: any[]) => any>;
+    events: PropTypes.Validator<PropTypes.InferProps<{
+        emit: PropTypes.Validator<(...args: any[]) => any>;
+        off: PropTypes.Validator<(...args: any[]) => any>;
+        on: PropTypes.Validator<(...args: any[]) => any>;
+    }>>;
+    isFallback: PropTypes.Validator<boolean>;
+    isLocaleDomain: PropTypes.Validator<boolean>;
+    isPreview: PropTypes.Validator<boolean>;
+    isReady: PropTypes.Validator<boolean>;
+    pathname: PropTypes.Validator<string>;
+    prefetch: PropTypes.Validator<(...args: any[]) => any>;
+    push: PropTypes.Validator<(...args: any[]) => any>;
+    query: PropTypes.Validator<PropTypes.InferProps<{}>>;
+    reload: PropTypes.Validator<(...args: any[]) => any>;
+    replace: PropTypes.Validator<(...args: any[]) => any>;
+    route: PropTypes.Validator<string>;
+}>>;
+export declare const StyleVariantPropType: PropTypes.Requireable<StyleVariant | StyleVariant[]>;
+export declare const ButtonVariantPropType: PropTypes.Requireable<ButtonVariant | ButtonVariant[]>;
+export declare const AppPropTypes: {
+    Component: PropTypes.Validator<(...args: any[]) => any>;
+    config: PropTypes.Requireable<PropTypes.InferProps<{
+        auth: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+        name: PropTypes.Validator<string>;
+        navigation: PropTypes.Validator<(string | PropTypes.InferProps<{
+            label: PropTypes.Validator<string>;
+            to: PropTypes.Requireable<string>;
+        }>)[]>;
+        paths: PropTypes.Validator<PropTypes.InferProps<{}>>;
+        style: PropTypes.Requireable<PropTypes.InferProps<{}>>;
+    }>>;
+    Logo: PropTypes.Requireable<(...args: any[]) => any>;
+};

package/docs/guides/01-installation.story.mdx

@@ -0,0 +1,33 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Guides/Installation" />
+
+# Installation
+
+The easiest way to get started is to use Square Zero with the following command:
+
+```
+npx squarezero new example-project —template=admin
+```
+
+Square Zero is a command line tool for quickly generating React and Next.js projects of all shapes and sizes. [You can find out more about Square Zero here](https://sqrzro.com). Handily, it comes with a default template for Square Zero Admin.
+
+Running the above command will create a directory named ‘example-project’, and install a basic admin framework into it, including all dependencies.
+
+Now you’ll need to update the config file to define certain variables, such as the URL for your backend API, navigation links, general look and feel of the admin, and so on. [You can find a full list of configuration options here](/story/guides-configuration--page), and more [information specifically about the navigation options here](/story/guides-pages-routing--page). The config file is located at `src/config/index.js`. You will find some predefined values there. Feel free to edit those, and add others, to get the admin panel how you would like it.
+
+### A note about API paths
+
+As you can see from the config file, by default the API path is set to read from an ‘env.js’ file included in the root. This file is excluded from git, and allows you to define different backend URLs for the same admin panel in different environments. I.e. local, staging, and production versions can all point to different backend URLs.
+
+Now that your admin panel is installed and your config updated, you should be able to run the following in the root directory:
+
+```
+yarn start
+```
+
+This will start an instance of the admin system at http://localhost:8080, which you can visit in a browser. At the moment, there will simply be a login screen and a blank Dashboard page. For more information about [integrating your backend to enable authentication, click here](/story/guides-integration-with-api--page). If you’ve got that all set up and you’d like to start [adding your own pages, you can head over to here](/story/guides-pages-routing--page).
+
+## Manual Installation
+
+Although it is strongly advised that you install Square Zero Admin via the method above, there are potentially a few cases where you would want to install it manually. Full documentation for this is coming soon.