elcrm 1.1.13 → 1.1.15

package/templates/orbit/src/main.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import { createErrorBoundary } from "@elcrm/error-boundary";
+import { Router } from "@elcrm/router";
+import { Api } from "@elcrm/api";
+import { ELCRM_STACK } from "@elcrm/core";
+import { applyTheme } from "./lib/theme";
+
+(globalThis as typeof globalThis & { React: typeof React }).React = React;
+
+import "./style/elcrm.css";
+
+void ELCRM_STACK;
+applyTheme();
+
+Router.createRouter({
+  defaults: { page: "Main", module: "Home", range: "week" },
+  auth: "Auth",
+  paths: {
+    page: "./pages/{segment}",
+    module: "./modules/{segment}/index",
+  },
+});
+
+Api.configure({
+  onLogout: () => {
+    Router.setRouter("page", "Auth");
+  },
+});
+
+Api.create({
+  url: "/v1",
+  key: "",
+  method: "POST",
+});
+
+const ErrorBoundary = createErrorBoundary({
+  FallbackComponent: ({ error, resetError }) => (
+    <div className="app-error">
+      <h2>Ошибка интерфейса</h2>
+      <pre>{error?.message}</pre>
+      <button type="button" onClick={resetError}>
+        Повторить
+      </button>
+    </div>
+  ),
+});
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <ErrorBoundary>
+    <App />
+  </ErrorBoundary>,
+);

package/templates/orbit/src/modules/Analytics/index.tsx

@@ -0,0 +1,5 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Analytics() {
+  return <Placeholder title="Analytics" description="Traffic and conversion." />;
+}

package/templates/orbit/src/modules/Catalog/index.tsx

@@ -0,0 +1,7 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Catalog() {
+  return (
+    <Placeholder title="Catalog" description="Products and collections." />
+  );
+}

package/templates/orbit/src/modules/Customers/index.tsx

@@ -0,0 +1,5 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Customers() {
+  return <Placeholder title="Customers" description="People who bought from you." />;
+}

package/templates/orbit/src/modules/Finances/index.tsx

@@ -0,0 +1,5 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Finances() {
+  return <Placeholder title="Finances" description="Payouts and invoices." />;
+}

package/templates/orbit/src/modules/Home/index.tsx

@@ -0,0 +1,317 @@
+import React from "react";
+import {
+  ActionGroup,
+  Badge,
+  Card,
+  Dropdown,
+  EmptyState,
+  Item,
+  ItemColumn,
+  List,
+  Menu,
+  PageHead,
+  PageShell,
+  Stack,
+  Stat,
+  TextGroup,
+} from "@elcrm/components";
+import { Button } from "@elcrm/button";
+import { Notice } from "@elcrm/notice";
+import { Router } from "@elcrm/router";
+import { Ico, Icon } from "../../lib/icon";
+import useStateData from "../../state";
+
+const RANGE: Record<string, { views: string; visits: string; orders: string; conv: string; convTone: "success" | "danger" }> = {
+  day: {
+    views: "812",
+    visits: "140",
+    orders: "21",
+    conv: "15%",
+    convTone: "success",
+  },
+  week: {
+    views: "5,094",
+    visits: "794",
+    orders: "1,234",
+    conv: "78%",
+    convTone: "danger",
+  },
+  month: {
+    views: "18,440",
+    visits: "3,102",
+    orders: "4,880",
+    conv: "62%",
+    convTone: "success",
+  },
+  year: {
+    views: "210,118",
+    visits: "40,220",
+    orders: "52,010",
+    conv: "54%",
+    convTone: "success",
+  },
+};
+
+/** Простая кривая выручки — без сторонней библиотеки. */
+function RevenueChart() {
+  return (
+    <svg
+      viewBox="0 0 640 180"
+      width="100%"
+      height="180"
+      aria-label="Revenue"
+      role="img"
+    >
+      <path
+        d="M0 140 C 40 130, 80 90, 120 100 S 200 40, 240 70 S 320 150, 360 110 S 440 30, 480 50 S 560 90, 640 20"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+    </svg>
+  );
+}
+
+/**
+ * Дашборд Home: метрики, выручка, товары, активность.
+ */
+export default function Home() {
+  const { user } = useStateData(["user"]);
+  const range = String(Router.useRouter("range") || "week");
+  const metrics = RANGE[range] ?? RANGE.week;
+  const [banner, setBanner] = React.useState(true);
+
+  return (
+    <PageShell>
+      <PageHead
+        title={`Hello, ${user.displayName}!`}
+        actions={
+          <Button
+            variant="primary"
+            width="s"
+            before={<Icon d={Ico.globe} size={16} />}
+            label="Open Site"
+            onClick={() => Notice.Remark("Open Site")}
+          />
+        }
+      />
+
+      {banner ? (
+        <Card>
+          <Stack
+            direction="row"
+            gap="0.75rem"
+            style={{ alignItems: "center" }}
+          >
+            <Icon d={Ico.crown} />
+            <TextGroup title="Upgrade your plan to unlock advanced features" />
+            <ActionGroup
+              label="Plan"
+              items={[
+                <Button
+                  key="plan"
+                  variant="ghost"
+                  width="s"
+                  label="Select Plan"
+                  onClick={() => Router.setRouter("module", "Settings")}
+                />,
+                <Button
+                  key="close"
+                  variant="ghost"
+                  width="s"
+                  label="×"
+                  aria-label="Close"
+                  onClick={() => setBanner(false)}
+                />,
+              ]}
+            />
+          </Stack>
+        </Card>
+      ) : null}
+
+      <PageHead
+        title="Welcome to Orbit"
+        subtitle="A quick guide to getting your first sale."
+      />
+      <Stack direction="grid" columns={2} gap="0.75rem">
+        <Item variant="card">
+          <ItemColumn
+            icon={<Icon d={Ico.box} />}
+            title="Stock your store"
+            description="Add products so customers can buy."
+            aside={
+              <Button
+                variant="secondary"
+                width="s"
+                size="s"
+                label="Set Up"
+                onClick={() => Router.setRouter("module", "Catalog")}
+              />
+            }
+          />
+        </Item>
+        <Item variant="card">
+          <ItemColumn
+            icon={<Icon d={Ico.truck} />}
+            title="Set your shipping"
+            description="Choose how orders are delivered."
+            aside={
+              <Button
+                variant="secondary"
+                width="s"
+                size="s"
+                label="Set Up"
+                onClick={() => Router.setRouter("module", "Settings")}
+              />
+            }
+          />
+        </Item>
+      </Stack>
+
+      <PageHead
+        title="Overview performance"
+        actions={
+          <Menu
+            value={range}
+            onSelect={(v) => Router.setRouter("range", v)}
+            items={[
+              { value: "day", label: "Day" },
+              { value: "week", label: "Week" },
+              { value: "month", label: "Month" },
+              { value: "year", label: "Year" },
+            ]}
+          />
+        }
+      />
+      <Stack direction="grid" columns={4} gap="0.75rem">
+        <Stat
+          label="Total Views"
+          value={
+            <>
+              {metrics.views}{" "}
+              <Badge tone="success" size="s">
+                +432
+              </Badge>
+            </>
+          }
+        />
+        <Stat
+          label="Visits"
+          value={
+            <>
+              {metrics.visits}{" "}
+              <Badge tone="success" size="s">
+                +345
+              </Badge>
+            </>
+          }
+        />
+        <Stat
+          label="Orders"
+          value={
+            <>
+              {metrics.orders}{" "}
+              <Badge tone="success" size="s">
+                +345
+              </Badge>
+            </>
+          }
+        />
+        <Stat
+          label="Conversion Rate"
+          value={
+            <>
+              {metrics.conv}{" "}
+              <Badge tone={metrics.convTone} size="s">
+                {metrics.convTone === "danger" ? "0.6%" : "+2.1%"}
+              </Badge>
+            </>
+          }
+          tone={metrics.convTone}
+        />
+      </Stack>
+
+      <Stack direction="grid" columns={["2fr", "1fr"]} gap="0.75rem">
+        <Card>
+          <Stack direction="row" gap="0.5rem" style={{ alignItems: "center" }}>
+            <TextGroup title="Revenue" />
+            <Dropdown
+              label="Last Year"
+              items={[
+                { value: "year", label: "Last Year" },
+                { value: "month", label: "Last Month" },
+              ]}
+            />
+          </Stack>
+          <TextGroup
+            title="$14,020,110"
+            description="You gained +$420.00 this month"
+          />
+          <RevenueChart />
+        </Card>
+        <Stack direction="column" gap="0.75rem">
+          <Card>
+            <ItemColumn
+              icon={<Icon d={Ico.bell} />}
+              title="The Black Friday Starts Tomorrow"
+              description="Prepare discounts and stock."
+              aside={
+                <Button
+                  variant="ghost"
+                  width="s"
+                  size="s"
+                  label="Learn More"
+                  onClick={() => Notice.Remark("Shop advisor")}
+                />
+              }
+            />
+          </Card>
+          <Card>
+            <Stack direction="row" gap="0.5rem" style={{ alignItems: "center" }}>
+              <TextGroup title="Products" />
+              <Button
+                variant="ghost"
+                width="s"
+                size="s"
+                label="See All"
+                onClick={() => Router.setRouter("module", "Catalog")}
+              />
+            </Stack>
+            <List>
+              <Item as="li">
+                <ItemColumn title="Active listings" extra={<Badge size="s">6</Badge>} />
+              </Item>
+              <Item as="li">
+                <ItemColumn title="Expired" extra={<Badge size="s">2</Badge>} />
+              </Item>
+              <Item as="li">
+                <ItemColumn title="Sold out" extra={<Badge size="s">5</Badge>} />
+              </Item>
+            </List>
+          </Card>
+          <Card>
+            <Stack direction="row" gap="0.5rem" style={{ alignItems: "center" }}>
+              <TextGroup title="Recent Activities" />
+              <Button variant="ghost" width="s" size="s" label="See All" />
+            </Stack>
+            <EmptyState
+              title="You have no recent activity."
+              icon={<Icon d={Ico.bell} size={28} />}
+            />
+          </Card>
+        </Stack>
+      </Stack>
+
+      <div style={{ position: "fixed", right: "1.25rem", bottom: "1.25rem" }}>
+        <Button
+          variant="primary"
+          width="s"
+          aria-label="Chat"
+          before={<Icon d={Ico.chat} />}
+          label="Chat"
+          onClick={() => Notice.Remark("Chat")}
+        />
+      </div>
+    </PageShell>
+  );
+}

package/templates/orbit/src/modules/Integrations/index.tsx

@@ -0,0 +1,7 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Integrations() {
+  return (
+    <Placeholder title="Integrations" description="Connect payments and apps." />
+  );
+}

package/templates/orbit/src/modules/Link/index.tsx

@@ -0,0 +1,7 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Link() {
+  return (
+    <Placeholder title="Sell Via Link" description="Share a checkout link." />
+  );
+}

package/templates/orbit/src/modules/Marketing/index.tsx

@@ -0,0 +1,5 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Marketing() {
+  return <Placeholder title="Marketing" description="Campaigns and discounts." />;
+}

package/templates/orbit/src/modules/Placeholder.tsx

@@ -0,0 +1,13 @@
+import { EmptyState, PageHead, PageShell } from "@elcrm/components";
+
+type Props = { title: string; description: string };
+
+/** Заглушка раздела Orbit. */
+export function Placeholder({ title, description }: Props) {
+  return (
+    <PageShell>
+      <PageHead title={title} subtitle={description} />
+      <EmptyState title="Nothing here yet" description={description} />
+    </PageShell>
+  );
+}

package/templates/orbit/src/modules/Settings/index.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { Card, PageHead, PageShell } from "@elcrm/components";
+import { Button } from "@elcrm/button";
+import { getTheme, toggleTheme, type ThemeMode } from "../../lib/theme";
+
+export default function Settings() {
+  const [theme, setThemeState] = React.useState<ThemeMode>(() => getTheme());
+
+  return (
+    <PageShell>
+      <PageHead title="Settings" subtitle="Appearance and store." />
+      <Card title="Theme">
+        <Button
+          variant="secondary"
+          width="s"
+          label={`Switch to ${theme === "dark" ? "light" : "dark"}`}
+          onClick={() => setThemeState(toggleTheme())}
+        />
+      </Card>
+    </PageShell>
+  );
+}

package/templates/orbit/src/modules/Store/index.tsx

@@ -0,0 +1,7 @@
+import { Placeholder } from "../Placeholder";
+
+export default function Store() {
+  return (
+    <Placeholder title="Online Store" description="Theme and domain." />
+  );
+}

package/templates/orbit/src/pages/Auth.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { Section } from "@elcrm/components";
+import { Router } from "@elcrm/router";
+import { Button } from "@elcrm/button";
+import { Notice } from "@elcrm/notice";
+import { PasswordField, StringField, useForm } from "@elcrm/form";
+import useStateData from "../state";
+
+/**
+ * Вход без API: любой логин/пароль → Main.
+ */
+export default function Auth() {
+  const form = useForm({ login: "orbix", password: "orbit" });
+
+  const onSend = () => {
+    const data = form.getValues();
+    const login = String(data.login ?? "").trim();
+    const password = String(data.password ?? "");
+    if (!login || !password) {
+      Notice.Error("Fill in login and password");
+      return false;
+    }
+    useStateData.setState({
+      user: {
+        displayName: login,
+        email: `${login}@mail.com`,
+        shop: "Mob Shop",
+      },
+    });
+    Notice.Success("Welcome");
+    Router.mergeRouter({ module: "Home", page: "Main" });
+  };
+
+  return (
+    <Section
+      variant="auth"
+      title="Orbit"
+      description="Demo login — any credentials"
+      actions={<Button onSend={onSend} label="Sign in" />}
+    >
+      <StringField name="login" form={form} label="Login" />
+      <PasswordField name="password" form={form} label="Password" />
+    </Section>
+  );
+}

package/templates/orbit/src/pages/Main.tsx

@@ -0,0 +1,29 @@
+import { Layout, Loading } from "@elcrm/components";
+import Nav from "../component/Nav";
+import { LoadRoute } from "@elcrm/router";
+import { createLazyResolver } from "../lazyRoute";
+
+const resolveModule = createLazyResolver((segment) =>
+  import(`../modules/${segment}/index.tsx`),
+);
+
+/**
+ * Оболочка: `Layout sidebar` + модули.
+ */
+export default function Main() {
+  const root = document.getElementById("root");
+  if (root) root.dataset.page = "main";
+
+  return (
+    <Layout sidebar={<Nav />}>
+      <LoadRoute
+        variant="module"
+        defaultName="Home"
+        resolveLazyPage={resolveModule}
+        loading={<Loading />}
+      >
+        <span aria-hidden />
+      </LoadRoute>
+    </Layout>
+  );
+}

package/templates/orbit/src/router-data.d.ts

@@ -0,0 +1,10 @@
+import "@elcrm/router";
+
+declare module "@elcrm/router" {
+  interface RouterDataMap {
+    page: string;
+    module: string;
+    range: string;
+    revenuePeriod: string;
+  }
+}

package/templates/orbit/src/state.ts

@@ -0,0 +1,28 @@
+import { State } from "@elcrm/state";
+
+export type OrbitUser = {
+  displayName: string;
+  email: string;
+  shop: string;
+};
+
+type Store = {
+  user: OrbitUser;
+  shop: string;
+  setShop: (shop: string) => void;
+};
+
+/**
+ * Локальный store витрины (без обязательного API).
+ */
+const useStateData = State.create<Store>((set) => ({
+  user: {
+    displayName: "Orbix",
+    email: "orbix@mail.com",
+    shop: "Mob Shop",
+  },
+  shop: "Mob Shop",
+  setShop: (shop) => set({ shop }),
+}));
+
+export default useStateData;

package/templates/orbit/src/style/elcrm.css

@@ -0,0 +1,27 @@
+/**
+ * База пакетов @elcrm/* + обе темы panel.
+ * Порядок важен: сначала CSS пакетов, затем theme-* перекрывают токены.
+ *
+ * @elcrm/button@1.0.2+ — только style.css (цвета кнопок в theme-light/dark).
+ */
+
+/* структура компонентов */
+@import "@elcrm/notice/style.css";
+@import "@elcrm/alert/style.css";
+@import "@elcrm/button/style.css";
+@import "@elcrm/search/style.css";
+@import "@elcrm/modal/style.css";
+@import "@elcrm/components/style.css";
+
+/* дефолтные токены пакетов (light + dark по data-theme) */
+@import "@elcrm/form/light.css";
+@import "@elcrm/form/dark.css";
+@import "@elcrm/alert/light.css";
+@import "@elcrm/alert/dark.css";
+@import "@elcrm/notice/light.css";
+@import "@elcrm/notice/dark.css";
+
+/* общие размеры/геометрия, затем цвета light/dark */
+@import "./theme.css";
+@import "./theme-light.css";
+@import "./theme-dark.css";