@bfme-technology/styled 0.1.0

package/index.d.ts

@@ -0,0 +1,51 @@
+import type React from "react";
+
+export type DocumentationStyleMap = {
+  root: React.CSSProperties;
+  loadingRoot: React.CSSProperties;
+  loadingCard: React.CSSProperties;
+  contentWrap: React.CSSProperties;
+  main: React.CSSProperties;
+  centerSection: React.CSSProperties;
+};
+
+export declare const documentationBaseStyles: DocumentationStyleMap;
+export declare const documentationBaseLayoutStyles: DocumentationStyleMap;
+
+export declare const layoutWrapperClass: string;
+export declare const getSidebarClass: (args: { isCollapsed: boolean; isOpen: boolean }) => string;
+export declare const logoAdminClass: string;
+export declare const navClass: string;
+export declare const getLayoutNavLinkClass: (args: { isActive: boolean }) => string;
+export declare const navIconClass: string;
+export declare const navLinkTextClass: string;
+export declare const layoutMainClass: string;
+export declare const topbarClass: string;
+export declare const topbarTitleClass: string;
+export declare const themeToggleContainerClass: string;
+export declare const getThemeToggleButtonClass: (args: { isActive: boolean }) => string;
+export declare const contentAreaClass: string;
+export declare const breadcrumbContainerClass: string;
+export declare const breadcrumbListClass: string;
+export declare const breadcrumbItemClass: string;
+export declare const breadcrumbLinkClass: string;
+export declare const breadcrumbActiveItemClass: string;
+export declare const breadcrumbSeparatorClass: string;
+export declare const dashboardContainerClass: string;
+export declare const dashboardRootClass: string;
+export declare const dashboardTitleClass: string;
+export declare const metricsGridClass: string;
+export declare const metricCardClass: string;
+export declare const metricCardTitleClass: string;
+export declare const metricValueClass: string;
+export declare const gridContainerClass: string;
+export declare const gridPageWrapperClass: string;
+export declare const gridHeaderSectionClass: string;
+export declare const gridHeaderTitleClass: string;
+export declare const gridActionsSectionClass: string;
+export declare const gridFilterSectionClass: string;
+export declare const gridFilterLabelClass: string;
+export declare const gridFilterSelectClass: string;
+export declare const gridPrimaryButtonClass: string;
+export declare const gridContentSectionClass: string;
+export declare const gridEmptyTextClass: string;

package/index.js

@@ -0,0 +1,44 @@
+export {
+  documentationBaseStyles,
+  documentationBaseLayoutStyles,
+} from "./src/documentationBaseStyles.js";
+
+export {
+  layoutWrapperClass,
+  getSidebarClass,
+  logoAdminClass,
+  navClass,
+  getLayoutNavLinkClass,
+  navIconClass,
+  navLinkTextClass,
+  layoutMainClass,
+  topbarClass,
+  topbarTitleClass,
+  themeToggleContainerClass,
+  getThemeToggleButtonClass,
+  contentAreaClass,
+  breadcrumbContainerClass,
+  breadcrumbListClass,
+  breadcrumbItemClass,
+  breadcrumbLinkClass,
+  breadcrumbActiveItemClass,
+  breadcrumbSeparatorClass,
+  dashboardContainerClass,
+  dashboardRootClass,
+  dashboardTitleClass,
+  metricsGridClass,
+  metricCardClass,
+  metricCardTitleClass,
+  metricValueClass,
+  gridContainerClass,
+  gridPageWrapperClass,
+  gridHeaderSectionClass,
+  gridHeaderTitleClass,
+  gridActionsSectionClass,
+  gridFilterSectionClass,
+  gridFilterLabelClass,
+  gridFilterSelectClass,
+  gridPrimaryButtonClass,
+  gridContentSectionClass,
+  gridEmptyTextClass,
+} from "./src/studioAdminStyles.js";

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@bfme-technology/styled",
+  "version": "0.1.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "main": "./index.js",
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./index.d.ts",
+      "import": "./index.js"
+    }
+  }
+}

package/src/documentationBaseStyles.js

@@ -0,0 +1,62 @@
+const root = {
+  minHeight: "100vh",
+  display: "flex",
+  flexDirection: "column",
+  backgroundColor: "#f9fafb",
+};
+
+const loadingRoot = {
+  minHeight: "100vh",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: "1rem",
+  background: "linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%)",
+};
+
+const loadingCard = {
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "0.75rem",
+  borderRadius: "0.75rem",
+  border: "1px solid rgba(255,255,255,0.15)",
+  background: "rgba(255,255,255,0.05)",
+  color: "#e2e8f0",
+  fontSize: "0.875rem",
+  padding: "0.75rem 1rem",
+};
+
+const contentWrap = {
+  width: "100%",
+  maxWidth: "1280px",
+  margin: "0 auto",
+  display: "flex",
+  flex: 1,
+  gap: "1.5rem",
+  padding: "1.5rem",
+  boxSizing: "border-box",
+};
+
+const main = {
+  flex: 1,
+  minWidth: 0,
+};
+
+const centerSection = {
+  width: "100%",
+  maxWidth: "1280px",
+  margin: "0 auto",
+  padding: "1.5rem",
+  boxSizing: "border-box",
+};
+
+export const documentationBaseStyles = {
+  root,
+  loadingRoot,
+  loadingCard,
+  contentWrap,
+  main,
+  centerSection,
+};
+
+export const documentationBaseLayoutStyles = documentationBaseStyles;

package/src/studioAdminStyles.js

@@ -0,0 +1,107 @@
+export const layoutWrapperClass =
+  "flex h-screen overflow-hidden bg-gray-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100";
+
+export const getSidebarClass = ({ isCollapsed, isOpen }) =>
+  [
+    "fixed left-0 top-0 z-[1000] flex min-h-screen flex-col border-r border-slate-800 bg-slate-900 transition-all duration-300 md:relative",
+    isCollapsed ? "md:w-20" : "md:w-[260px]",
+    "w-[260px]",
+    isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0",
+  ].join(" ");
+
+export const logoAdminClass = "h-auto max-w-[150px] transition-opacity duration-200";
+
+export const navClass = "flex-1 p-4";
+
+export const getLayoutNavLinkClass = ({ isActive }) =>
+  [
+    "mb-2 flex items-center rounded-lg border px-4 py-3 text-sm font-medium transition",
+    isActive
+      ? "border-indigo-400 bg-indigo-500 text-white"
+      : "border-transparent text-slate-300 hover:border-slate-700 hover:bg-slate-800 hover:text-white",
+  ].join(" ");
+
+export const navIconClass = "flex min-w-[25px] justify-center text-[1.05rem]";
+
+export const navLinkTextClass = "ml-4 whitespace-nowrap opacity-100 transition-opacity";
+
+export const layoutMainClass = "flex flex-1 flex-col overflow-hidden bg-transparent";
+
+export const topbarClass =
+  "flex h-16 shrink-0 items-center justify-between border-b border-slate-200 bg-white/95 px-6 backdrop-blur dark:border-slate-800 dark:bg-slate-900/90";
+
+export const topbarTitleClass =
+  "m-0 text-lg font-semibold text-slate-900 dark:text-slate-100";
+
+export const themeToggleContainerClass =
+  "inline-flex items-center rounded-lg border border-slate-200 bg-white p-1 shadow-sm dark:border-slate-700 dark:bg-slate-800";
+
+export const getThemeToggleButtonClass = ({ isActive }) =>
+  [
+    "rounded-md px-2.5 py-1.5 text-xs font-semibold transition",
+    isActive
+      ? "bg-indigo-600 text-white"
+      : "text-slate-600 hover:bg-slate-100 dark:text-slate-300 dark:hover:bg-slate-700",
+  ].join(" ");
+
+export const contentAreaClass = "flex-1 overflow-y-auto bg-transparent p-6";
+
+export const breadcrumbContainerClass =
+  "mb-5 rounded-xl border border-slate-200 bg-white/70 px-4 py-2.5 shadow-sm dark:border-slate-800 dark:bg-slate-900/60";
+
+export const breadcrumbListClass = "mb-0 flex list-none items-center gap-2 text-sm";
+
+export const breadcrumbItemClass = "text-slate-500 dark:text-slate-300";
+
+export const breadcrumbLinkClass =
+  "text-slate-600 transition hover:text-indigo-600 dark:text-slate-300 dark:hover:text-indigo-300";
+
+export const breadcrumbActiveItemClass = "font-medium text-indigo-700 dark:text-indigo-300";
+
+export const breadcrumbSeparatorClass = "text-slate-400 dark:text-slate-500";
+
+export const dashboardContainerClass = "w-full";
+
+export const dashboardRootClass = "mx-auto max-w-[1200px]";
+
+export const dashboardTitleClass =
+  "mb-8 text-3xl font-semibold text-slate-900 dark:text-slate-100";
+
+export const metricsGridClass =
+  "grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4";
+
+export const metricCardClass =
+  "rounded-xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900/70";
+
+export const metricCardTitleClass =
+  "mb-4 text-xs font-semibold uppercase tracking-widest text-slate-600 dark:text-slate-300";
+
+export const metricValueClass = "m-0 text-4xl font-bold text-indigo-600 dark:text-indigo-300";
+
+export const gridContainerClass =
+  "ag-grid-container ag-theme-alpine flex min-h-[500px] w-full flex-1 flex-col";
+
+export const gridPageWrapperClass =
+  "flex h-full w-full flex-col gap-4 overflow-hidden";
+
+export const gridHeaderSectionClass =
+  "flex shrink-0 items-center justify-between border-b border-slate-200 pb-4 dark:border-slate-800";
+
+export const gridHeaderTitleClass =
+  "m-0 text-[1.75rem] font-semibold text-slate-900 dark:text-slate-100";
+
+export const gridActionsSectionClass = "flex items-center gap-4";
+
+export const gridFilterSectionClass = "flex items-center gap-4";
+
+export const gridFilterLabelClass = "mr-2 font-semibold text-slate-600 dark:text-slate-300";
+
+export const gridFilterSelectClass =
+  "min-w-[120px] cursor-pointer rounded border border-slate-300 bg-white p-2 text-sm text-slate-800 focus:border-indigo-500 focus:outline-none focus:ring-4 focus:ring-indigo-500/25 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-100";
+
+export const gridPrimaryButtonClass =
+  "inline-flex items-center gap-2 rounded border border-indigo-600 bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition hover:-translate-y-px hover:border-indigo-700 hover:bg-indigo-700 hover:shadow active:translate-y-0 active:border-indigo-900 active:bg-indigo-900";
+
+export const gridContentSectionClass = "flex flex-1 flex-col overflow-hidden";
+
+export const gridEmptyTextClass = "text-sm text-slate-500 dark:text-slate-300";