@alepha/ui 0.14.0 → 0.14.2

package/src/demo/components/shared/MacWindow.tsx

@@ -0,0 +1,105 @@
+import { Box, type BoxProps, Flex, SegmentedControl } from "@mantine/core";
+import { type ReactNode, useState } from "react";
+
+export interface MacWindowProps {
+  children: ReactNode;
+  title?: string;
+  containerProps?: BoxProps;
+  fill?: boolean;
+}
+
+type WindowSize = "25" | "50" | "75" | "100";
+
+const MacWindow = ({
+  children,
+  title,
+  containerProps,
+  fill,
+}: MacWindowProps) => {
+  const [size, setSize] = useState<WindowSize>("100");
+
+  const getWidth = () => {
+    return `${size}%`;
+  };
+
+  return (
+    <Flex
+      direction="column"
+      flex={fill ? 1 : undefined}
+      h={fill ? "100%" : undefined}
+      bdrs={"md"}
+      style={{
+        width: getWidth(),
+        border: "1px solid var(--mantine-color-default-border)",
+        overflow: "hidden",
+        background: "var(--mantine-color-body)",
+        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+        transition: "width 0.3s ease",
+      }}
+    >
+      <Flex
+        h={36}
+        px="sm"
+        align="center"
+        gap={8}
+        style={{
+          background: "var(--mantine-color-default)",
+          borderBottom: "1px solid var(--mantine-color-default-border)",
+        }}
+      >
+        <Flex gap={6}>
+          <Box
+            w={12}
+            h={12}
+            style={{ borderRadius: "50%", background: "#ff5f57" }}
+          />
+          <Box
+            w={12}
+            h={12}
+            style={{ borderRadius: "50%", background: "#febc2e" }}
+          />
+          <Box
+            w={12}
+            h={12}
+            style={{ borderRadius: "50%", background: "#28c840" }}
+          />
+        </Flex>
+
+        <Box
+          style={{
+            flex: 1,
+            textAlign: "center",
+            fontSize: 13,
+            color: "var(--mantine-color-dimmed)",
+          }}
+        >
+          {title}
+        </Box>
+
+        {fill ? undefined : (
+          <SegmentedControl
+            size="xs"
+            value={size}
+            onChange={(v) => setSize(v as WindowSize)}
+            data={[
+              { label: "25", value: "25" },
+              { label: "50", value: "50" },
+              { label: "75", value: "75" },
+              { label: "100", value: "100" },
+            ]}
+          />
+        )}
+      </Flex>
+      <Flex
+        direction={"column"}
+        flex={fill ? 1 : undefined}
+        p="md"
+        {...containerProps}
+      >
+        {children}
+      </Flex>
+    </Flex>
+  );
+};
+
+export default MacWindow;

package/src/demo/components/shared/Showcase.tsx

@@ -0,0 +1,112 @@
+import { useForm } from "@alepha/react/form";
+import { TypeForm, ui } from "@alepha/ui";
+import { Box, Card, Flex, Text } from "@mantine/core";
+import type { Static, TObject } from "alepha";
+import { type ReactNode, useState } from "react";
+import MacWindow, { type MacWindowProps } from "./MacWindow.tsx";
+
+export interface ShowcaseProps<T extends TObject> {
+  /**
+   * Component title
+   */
+  title: string;
+  /**
+   * Schema for the props configuration
+   */
+  schema: T;
+  /**
+   * Initial values for the props
+   */
+  initialValues?: Partial<Static<T>>;
+  /**
+   * Number of columns for the props form
+   */
+  columns?: number;
+  /**
+   * Render function that receives the current props values
+   */
+  children: (props: Static<T>) => ReactNode;
+  /**
+   * Additional props for the MacWindow container
+   */
+  windowProps?: Partial<MacWindowProps>;
+}
+
+/**
+ * Showcase component for demonstrating UI components with interactive props configuration.
+ * Uses TypeForm to render a form based on the props schema and displays the component preview.
+ */
+const Showcase = <T extends TObject>({
+  title,
+  schema,
+  initialValues,
+  columns = 3,
+  children,
+  windowProps,
+}: ShowcaseProps<T>) => {
+  const [values, setValues] = useState<Record<string, any>>(
+    initialValues ?? {},
+  );
+
+  const form = useForm(
+    {
+      schema,
+      initialValues,
+      handler: (values) => {
+        setValues(values as Record<string, any>);
+      },
+      onChange: (key, value) => {
+        console.log("onChange", key, value);
+        form.submit();
+      },
+    },
+    [schema],
+  );
+
+  return (
+    <Flex flex={1} h={"100%"}>
+      <Flex
+        flex={1}
+        bg={ui.colors.background}
+        h={"100%"}
+        p="xl"
+        justify="center"
+        align="flex-start"
+        style={{ flex: 1, minWidth: 0, overflow: "auto" }}
+      >
+        <MacWindow title={title} {...windowProps}>
+          {children(values as Static<T>)}
+        </MacWindow>
+      </Flex>
+
+      <Box
+        bg={ui.colors.surface}
+        h={"100%"}
+        p={"md"}
+        style={{
+          flex: "0 0 300px",
+          overflow: "auto",
+        }}
+      >
+        <Card withBorder shadow="sm" radius="md" bg={ui.colors.elevated}>
+          <Card.Section withBorder py={"xs"} inheritPadding>
+            <Text size={"xs"} fw={500}>
+              {title} Props
+            </Text>
+          </Card.Section>
+
+          <Card.Section p={"sm"}>
+            <TypeForm
+              form={form}
+              columns={columns}
+              skipSubmitButton
+              skipFormElement
+            />
+          </Card.Section>
+        </Card>
+      </Box>
+    </Flex>
+  );
+};
+
+export default Showcase;

package/src/demo/index.ts

@@ -0,0 +1,30 @@
+import { AlephaUI } from "@alepha/ui";
+import { $module } from "alepha";
+import { DemoRouter } from "./DemoRouter.ts";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+export { default as DemoHome } from "./components/DemoHome.tsx";
+export { default as DemoLayout } from "./components/DemoLayout.tsx";
+export { default as DemoJsonViewer } from "./components/json/DemoJsonViewer.tsx";
+export {
+  default as MacWindow,
+  type MacWindowProps,
+} from "./components/shared/MacWindow.tsx";
+export {
+  default as Showcase,
+  type ShowcaseProps,
+} from "./components/shared/Showcase.tsx";
+export { DemoRouter } from "./DemoRouter.ts";
+
+// ---------------------------------------------------------------------------------------------------------------------
+
+/**
+ * Demo UI Module - Component showcase and documentation
+ *
+ * @module alepha.ui.demo
+ */
+export const AlephaUIDemo = $module({
+  name: "alepha.ui.demo",
+  services: [AlephaUI, DemoRouter],
+});

package/src/json/components/JsonViewer.css

@@ -0,0 +1,25 @@
+.alepha-json-viewer-row {
+  cursor: pointer;
+  user-select: text;
+  min-width: 0;
+}
+
+.alepha-json-viewer-value {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+
+.alepha-json-viewer-row:hover {
+  background-color: var(--mantine-color-default-hover);
+}
+
+.alepha-json-viewer-copy {
+  opacity: 0;
+  transition: opacity 100ms;
+}
+
+.alepha-json-viewer-row:hover .alepha-json-viewer-copy {
+  opacity: 1;
+}