@uxf/cms NPM | npm.io

@uxf/cms

Použití balíčku

Konfigurace balíčku se prvádí v souboru _app.tsx.

// _app.tsx

import { config, container } from "@uxf/cms/config";

cmsConfig.set("api-url", "== api url ==");

container
    .register("router", Router<any>)
    .register("service.error", ErrorService)
    .register("service.notification", FlashMessagesService)
    .register("useLoggedUser", UseLoggedUser);

Api

cookie je předávána automaticky z kontextu

import {...} from  "@uxf/cms/api";

getLoggedUser
getEntityMetaSchemas
getFormSchema
getFormValues
login
autocompleteRows
saveFormValues
userConfigSave
userConfigGetAll
userConfigGet

UI

import { Button } from "@uxf/cms/ui/Button";

<Button loading={true}>title</Button>

import { CopyToClipboard } from "@uxf/cms/ui/CopyToClipboard";

<CopyToClipboard value="https://" label="Zkopírovat url adresu" disabled />

import { CopyToClipboardButton } from "@uxf/cms/ui/CopyToClipboardButton";

<CopyToClipboardButton textToCopy="Text ke zkopírování"/>

import { Label } from "@uxf/cms/ui/Label";

<Label color="success">SUCCESS</Label>

import { Paper } from "@uxf/cms/ui/Paper";

<Paper mr={1} ml={2} mt={3} mb={4} ph={1} pv={2}>content</Paper>

Pages

import { ForgottenPasswordPage } from "@uxf/cms/pages/ForgottenPasswordPage";

const Page = ForgottenPasswordPage({
    title: "Zapomenuté heslo",
    onSubmit: (username) => {
        /* implement me */
        return Promise.resolve();
    },
});

import { FormPage } from "@uxf/cms/pages/FormPage";

export default FormPage({
    entityAlias: "user",
});

import { LoginPage } from "@uxf/cms/pages/LoginPage";

export default LoginPage({
    pageTitle: "Přihlášení | UXFans",
    onLoginDone: (response, redirectUrl) => {
        console.log("Login done!");
        return Promise.resolve();
    },
});

FlashMessages

// pages/_app.tsx

import { FlashMessagesContainerInstance } from "@uxf/cms/lib/FlashMessages";

function App(props: any) {
    const { Component, pageProps } = props;

    return (
        <>
            <Component {...pageProps} />
            <FlashMessagesContainerInstance />
        </>
    );
}

export default App;

// pages/index.tsx

import { FlashMessagesService } from "@uxf/cms/services/FlashMessagesService";

function IndexPage(props) {
    return <Button onClick={() => FlashMessagesService.success("Hotovo.")}>Klikni</Button>;
}

export default IndexPage;

Jak vyvíjet?

git clone git@gitlab.com:uxf-npm/cms.git

cd ./cms

npm install

Spuštění examplu:

npm run dev

Vydání balíčku:

Balíček se vydá po mergi do master branche.

K publikování nových verzí do npm je opužit balíček semantic-release .

Commit message	Release type
`fix(pencil): stop graphite breaking when too much pressure applied`	Patch Release
`feat(pencil): add 'graphiteWidth' option`	~~Minor~~ Feature Release
`perf(pencil): remove graphiteWidth optionBREAKING CHANGE: The graphiteWidth option has been removed.The default graphite width of 10mm is always used for performance reasons.`	~~Major~~ Breaking Release

@uxf/cms

Použití balíčku

Api

UI

Autocomplete

Button

CopyToClipboard

CopyToClipboardButton

Label

Paper

Select

Pages

ForgottenPasswordPage

FormPage

LoginPage

FlashMessages

Jak vyvíjet?

Spuštění examplu:

Vydání balíčku:

Jak má vypadat commit message?