@musecat/uikit 0.1.1

package/packages/Components/Layout/Layout.docs.tsx

@@ -0,0 +1,150 @@
+import clsx from "clsx";
+import Image from "next/image";
+import Icon from "@/packages/Components/Icon/Icon";
+import styles from "@/packages/Components/Layout/Layout.docs.module.scss";
+import type { DocsLayoutProps } from "@/packages/Components/Layout/Layout.docs.types";
+import Profile from "@/packages/Components/Profile/Profile";
+import Text from "@/packages/Components/Text/Text";
+import View from "@/packages/Frameworks/View/View";
+export default function DocsLayout({
+  children,
+  image,
+  header,
+  fontType,
+  author,
+  createdBy,
+  caption,
+  title,
+  mobileTitleShown,
+  onlyHeaderTitleShown,
+  bodyClassName,
+  "data-color-mode": dataTheme,
+  goTop,
+}: DocsLayoutProps) {
+  const usePlainTextBody = typeof children === "string";
+  const hasLayoutTitle = Boolean(title || caption);
+  const showLayoutTitle = hasLayoutTitle && !onlyHeaderTitleShown;
+
+  const layoutContent = (
+    <View
+      style={{ position: "relative", minHeight: "100dvh" }}
+      fullWidth
+      data-color-mode={dataTheme}
+      column
+      alignItems="center"
+      background="Base2"
+    >
+      <View className={styles.DocsLayoutInner} column gap={32}>
+        {image && (
+          <Image
+            alt=""
+            src={image}
+            width={3840}
+            height={2160}
+            style={{
+              width: "100%",
+              maxHeight: "38rem",
+              height: "52vw",
+              objectFit: "cover",
+            }}
+          />
+        )}
+        <View
+          style={{ minWidth: 0, paddingBottom: "1.6rem" }}
+          fullWidth
+          column
+          gap={24}
+        >
+          {showLayoutTitle && (
+            <View
+              className={clsx(
+                styles.DocsLayoutGroupTitle,
+                mobileTitleShown && styles.DocsLayoutGroupTitleMobileOnly,
+              )}
+              style={{ minWidth: 0 }}
+              fullWidth
+              data-layout-title-source="true"
+              column
+              gap={24}
+            >
+              {title && (
+                <Text
+                  type="LargeTitle"
+                  fontType={fontType || "serif"}
+                  className={styles.DocsLayoutTitleText}
+                >
+                  {title}
+                </Text>
+              )}
+              {caption && (
+                <Text
+                  type="Footnote"
+                  fontType={fontType || "serif"}
+                  opacity={0.8}
+                >
+                  {caption}
+                </Text>
+              )}
+            </View>
+          )}
+          <View opacity={0.6} column gap={10}>
+            {(author?.avatarUrl ||
+              author?.username ||
+              author?.displayName ||
+              author?.joinedAtText ||
+              author?.id) && (
+              <Profile
+                size={{ avatar: 16, textType: "Caption1" }}
+                avatarUrl={author.avatarUrl}
+                displayName={author.displayName || author.username || ""}
+                id={author.id}
+                username={author.username}
+                joinedAtText={author.joinedAtText}
+              />
+            )}
+            {createdBy && (
+              <View alignItems="center" gap={6}>
+                <Icon icon="iDate" size={16} />
+                <Text type="Caption1" weight={400}>
+                  {createdBy}
+                </Text>
+              </View>
+            )}
+          </View>
+        </View>
+
+        {usePlainTextBody ? (
+          <Text
+            type="Body"
+            fontType={fontType || "serif"}
+            weight={400}
+            lineHeight={1.8}
+            className={bodyClassName}
+            style={{
+              whiteSpace: "pre-line",
+              width: "clamp(0px, 100%, 100%)",
+              overflowWrap: "anywhere",
+            }}
+          >
+            {children}
+          </Text>
+        ) : (
+          <View
+            className={bodyClassName}
+            width="clamp(0px, 100%, 100%)"
+            style={{ overflowWrap: "anywhere" }}
+          >
+            {children}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+  return (
+    <>
+      {header}
+      {layoutContent}
+      {}
+    </>
+  );
+}

package/packages/Components/Layout/Layout.docs.types.ts

@@ -0,0 +1,18 @@
+import type { ProfileProps } from "@/packages/Components/Profile/Profile.types";
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+
+export interface DocsLayoutProps {
+  children?: React.ReactNode;
+  "data-color-mode"?: string;
+  image?: string;
+  header?: React.ReactNode;
+  author?: ProfileProps;
+  createdBy?: string;
+  caption?: React.ReactNode;
+  title?: React.ReactNode;
+  mobileTitleShown?: boolean;
+  onlyHeaderTitleShown?: boolean;
+  fontType?: TextProps["fontType"];
+  bodyClassName?: string;
+  goTop?: boolean;
+}

package/packages/Components/Layout/Layout.module.scss

@@ -0,0 +1,91 @@
+@use "../../Styles/viewport" as viewport;
+
+.LayoutInner {
+  flex: 1 0 auto;
+
+  --layout-max-width: 1280px;
+  --layout-bleed: max(
+    var(--view-padding-page-inline),
+    calc(
+      (100vw - var(--layout-max-width)) / 2 + var(--view-padding-page-inline)
+    )
+  );
+
+  max-width: 1280px;
+  width: 100%;
+  min-width: 0;
+  position: relative;
+  z-index: 2;
+  padding-inline: 3.6rem;
+  padding-top: 10.8rem;
+  padding-bottom: 3.6rem;
+  overflow: visible;
+
+  @include viewport.down(w3) {
+    --layout-max-width: 768px;
+
+    max-width: 768px;
+    padding-inline: 1.6rem;
+    padding-top: 10.8rem;
+  }
+}
+
+.LayoutTitleWrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 2.4rem;
+  width: 100%;
+  min-width: 0;
+  padding-bottom: 2.4rem;
+  max-width: 76rem;
+  opacity: var(--layout-title-handoff-opacity, 1);
+  filter: blur(var(--layout-title-handoff-blur, 0));
+  transform: translateY(var(--layout-title-handoff-y, 0));
+  will-change: opacity, filter, transform;
+}
+
+.LayoutTitleText {
+  display: block;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  white-space: normal !important;
+  word-break: keep-all;
+  overflow-wrap: anywhere;
+}
+
+.LayoutTitleMobileOnly {
+  display: none !important;
+
+  @include viewport.down(w3) {
+    display: flex !important;
+  }
+}
+
+.LayoutGrid {
+  --layout-grid-ratio: minmax(0, 1fr) minmax(0, 1fr);
+  --layout-grid-active-ratio: var(--layout-grid-ratio);
+
+  gap: 4.8rem;
+  width: 100%;
+
+  .LayoutGridGroup {
+    gap: 3.6rem;
+  }
+
+  @include viewport.down(w3) {
+    --layout-grid-active-ratio: minmax(0, 1fr);
+
+    gap: 3.2rem;
+
+    .LayoutGridGroup {
+      display: contents !important;
+      gap: 3.2rem;
+    }
+  }
+}
+
+.LayoutGridGroup {
+  width: 100%;
+  min-width: 0;
+}

package/packages/Components/Layout/Layout.tsx

@@ -0,0 +1,306 @@
+import clsx from "clsx";
+import Image from "next/image";
+import { Children, isValidElement } from "react";
+import styles from "@/packages/Components/Layout/Layout.module.scss";
+import type {
+  BackgroundImageValue,
+  LayoutGridViewProps,
+  LayoutProps,
+  LayoutSectionProps,
+} from "@/packages/Components/Layout/Layout.types";
+import Title from "@/packages/Components/Title/Title";
+import type { TitleProps } from "@/packages/Components/Title/Title.types";
+import { normalizeUIKitImageSrc } from "@/packages/Frameworks/_shared/normalize";
+import {
+  Size,
+  type UIKitSizeValue,
+} from "@/packages/Frameworks/_shared/sizing";
+import View from "@/packages/Frameworks/View/View";
+
+function resolveBgMargin(
+  margin: NonNullable<BackgroundImageValue["margin"]>,
+): string | number | undefined {
+  if (Array.isArray(margin)) {
+    return margin.map((v) => Size(v)).join(" ");
+  }
+  return Size(margin as UIKitSizeValue);
+}
+
+export default function Layout({
+  children,
+  title,
+  caption,
+  titleType,
+  titleFontType,
+  mobileTitleShown,
+  onlyHeaderTitleShown,
+  header,
+  titleContext,
+  backgroundImage,
+  "data-color-mode": dataTheme,
+}: LayoutProps) {
+  const layoutChildren = Children.toArray(children);
+  const hasLayoutTitle = Boolean(title || caption);
+  const showLayoutTitle = hasLayoutTitle && !onlyHeaderTitleShown;
+
+  const bgConfig: BackgroundImageValue | undefined =
+    typeof backgroundImage === "string"
+      ? { src: backgroundImage }
+      : backgroundImage;
+
+  const bgSrc = bgConfig?.src ? normalizeUIKitImageSrc(bgConfig.src) : "";
+
+  const bgHeight =
+    bgConfig?.height ??
+    (typeof backgroundImage === "string" ? "100vh" : undefined);
+
+  const layoutContent = (
+    <View
+      width="100%"
+      height="100%"
+      style={{
+        position: "relative",
+        minWidth: 0,
+        overflowX: "hidden",
+        overflowY: "auto",
+      }}
+      fullWidth
+      data-color-mode={dataTheme}
+      column
+      alignItems="center"
+    >
+      {bgConfig && bgSrc && (
+        <View
+          height={bgHeight ?? "100vh"}
+          style={
+            {
+              position: "fixed",
+              inset: 0,
+              width: "100%",
+              overflow: "hidden",
+              zIndex: 0,
+              margin: bgConfig.margin
+                ? resolveBgMargin(bgConfig.margin)
+                : undefined,
+            } as React.CSSProperties
+          }
+        >
+          <Image
+            alt=""
+            src={bgSrc}
+            fill
+            sizes="100vw"
+            style={
+              {
+                objectFit: "cover",
+                filter: bgConfig.filter,
+              } as React.CSSProperties
+            }
+          />
+        </View>
+      )}
+      <View className={styles.LayoutInner} column gap={36}>
+        <View column gap={0} fullWidth style={{ minWidth: 0 }}>
+          {showLayoutTitle && (
+            <Title
+              className={clsx(
+                styles.LayoutTitleWrapper,
+                mobileTitleShown && styles.LayoutTitleMobileOnly,
+              )}
+              title={title ? { text: title } : undefined}
+              titleType={titleType ?? "LargeTitle"}
+              titleClassName={styles.LayoutTitleText}
+              fontType={titleFontType}
+              caption={caption}
+              captionOpacity={0.8}
+              context={titleContext}
+            />
+          )}
+          <View column gap={36} fullWidth style={{ minWidth: 0 }}>
+            {layoutChildren}
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+  return (
+    <>
+      {header}
+      {layoutContent}
+    </>
+  );
+}
+
+function getLayoutSectionGroup(child: React.ReactNode) {
+  if (!isValidElement<Pick<LayoutSectionProps, "group">>(child)) {
+    return undefined;
+  }
+
+  if (child.type === LayoutSection || child.props.group !== undefined) {
+    return child.props.group ?? "BaseFull";
+  }
+
+  return undefined;
+}
+
+export function LayoutGrid({
+  children,
+  className,
+  style,
+  ratio,
+  gap,
+  groupGap,
+  "data-color-mode": dataTheme,
+}: LayoutGridViewProps) {
+  const layoutChildren = Children.toArray(children);
+  const groups = new Map<string, React.ReactNode[]>();
+  const standaloneChildren: React.ReactNode[] = [];
+
+  for (const child of layoutChildren) {
+    const group = getLayoutSectionGroup(child);
+
+    if (!group) {
+      standaloneChildren.push(child);
+      continue;
+    }
+
+    groups.set(group, [...(groups.get(group) ?? []), child]);
+  }
+
+  return (
+    <View
+      data-color-mode={dataTheme}
+      alignItems="start"
+      className={clsx(styles.LayoutGrid, className)}
+      style={
+        {
+          "--layout-grid-ratio": ratio,
+          ...style,
+        } as React.CSSProperties
+      }
+      gap={gap}
+      gridTemplateColumns="var(--layout-grid-active-ratio)"
+    >
+      {[...groups.entries()].map(([group, groupChildren]) => (
+        <View
+          key={group}
+          column
+          gap={groupGap}
+          className={styles.LayoutGridGroup}
+        >
+          {groupChildren}
+        </View>
+      ))}
+      {standaloneChildren}
+    </View>
+  );
+}
+
+function resolveSectionTitle(title: LayoutSectionProps["title"]) {
+  if (!title) {
+    return undefined;
+  }
+
+  if (Array.isArray(title) || (typeof title === "object" && "text" in title)) {
+    return title as TitleProps["title"];
+  }
+
+  return { text: title as React.ReactNode };
+}
+
+function resolveSectionTitleProps({
+  title,
+  titleProps,
+  titleType,
+  caption,
+  suffix,
+  meta,
+  actions,
+}: Pick<
+  LayoutSectionProps,
+  | "actions"
+  | "caption"
+  | "meta"
+  | "suffix"
+  | "title"
+  | "titleProps"
+  | "titleType"
+>): TitleProps[] {
+  if (titleProps) {
+    return Array.isArray(titleProps) ? titleProps : [titleProps];
+  }
+
+  const sectionTitle = resolveSectionTitle(title);
+
+  return sectionTitle
+    ? [
+        {
+          title: sectionTitle,
+          titleType: titleType ?? "Title1",
+          caption,
+          suffix,
+          meta,
+          actions,
+        },
+      ]
+    : [];
+}
+
+function getSectionTitleKey(item: TitleProps) {
+  return [
+    item.className,
+    item.titleType,
+    Array.isArray(item.title)
+      ? item.title.map((t) => t.text).join("/")
+      : item.title?.text,
+    item.caption,
+  ]
+    .filter(Boolean)
+    .join(":");
+}
+
+export function LayoutSection({
+  children,
+  className,
+  gap,
+  group: _group,
+  mobileOrder,
+  title,
+  titleProps,
+  titleType = "Title1",
+  caption,
+  suffix,
+  meta,
+  actions,
+  ...props
+}: LayoutSectionProps) {
+  const sectionTitleProps = resolveSectionTitleProps({
+    actions,
+    caption,
+    meta,
+    suffix,
+    title,
+    titleProps,
+    titleType,
+  });
+
+  return (
+    <View
+      {...props}
+      column
+      gap={gap ?? 12}
+      mobileOrder={mobileOrder}
+      className={className}
+      fullWidth
+      style={{ minWidth: 0 }}
+    >
+      {sectionTitleProps.map((item) => (
+        <Title key={getSectionTitleKey(item)} {...item} />
+      ))}
+      {children}
+    </View>
+  );
+}
+
+Layout.Grid = LayoutGrid;
+Layout.Section = LayoutSection;

package/packages/Components/Layout/Layout.types.ts

@@ -0,0 +1,71 @@
+import type { CSSProperties } from "react";
+import type { TextProps } from "@/packages/Components/Text/Text.types";
+import type { TitleProps } from "@/packages/Components/Title/Title.types";
+import type { UIKitSizeValue } from "@/packages/Frameworks/_shared/sizing";
+import type { ViewProps } from "@/packages/Frameworks/View/View.types";
+
+type BackgroundMarginUnitValue = UIKitSizeValue;
+
+type BackgroundMarginValue =
+  | BackgroundMarginUnitValue
+  | readonly [BackgroundMarginUnitValue]
+  | readonly [BackgroundMarginUnitValue, BackgroundMarginUnitValue]
+  | readonly [
+      BackgroundMarginUnitValue,
+      BackgroundMarginUnitValue,
+      BackgroundMarginUnitValue,
+    ]
+  | readonly [
+      BackgroundMarginUnitValue,
+      BackgroundMarginUnitValue,
+      BackgroundMarginUnitValue,
+      BackgroundMarginUnitValue,
+    ];
+
+export interface BackgroundImageValue {
+  height?: UIKitSizeValue;
+  src?: string;
+  filter?: CSSProperties["filter"];
+  margin?: BackgroundMarginValue;
+}
+
+export interface LayoutProps {
+  "data-color-mode"?: string;
+  children?: React.ReactNode;
+  title?: React.ReactNode;
+  caption?: React.ReactNode;
+  titleType?: TitleProps["titleType"];
+  titleFontType?: TextProps["fontType"];
+  mobileTitleShown?: boolean;
+  onlyHeaderTitleShown?: boolean;
+  header?: React.ReactNode;
+  titleContext?: React.ReactNode;
+  goTop?: boolean;
+  backgroundImage?: string | BackgroundImageValue;
+}
+
+export interface LayoutGridViewProps {
+  "data-color-mode"?: string;
+  children?: React.ReactNode;
+  className?: string;
+  style?: React.CSSProperties;
+  ratio?: string;
+  gap?: ViewProps["gap"];
+  groupGap?: ViewProps["gap"];
+}
+
+export interface LayoutSectionProps
+  extends Omit<
+    ViewProps,
+    "caption" | "column" | "mobileOrder" | "order" | "title"
+  > {
+  group?: "BaseFull" | "BaseSoft" | "BaseSoft" | (string & {});
+  mobileOrder?: number;
+  title?: React.ReactNode | TitleProps["title"];
+  titleProps?: TitleProps | TitleProps[];
+  titleType?: TitleProps["titleType"];
+  caption?: TitleProps["caption"];
+  suffix?: TitleProps["suffix"];
+  meta?: TitleProps["meta"];
+  actions?: TitleProps["actions"];
+}

package/packages/Components/Maps/OSM/MapOSM.module.scss

@@ -0,0 +1,11 @@
+.MapWrapper {
+  position: relative;
+  overflow: hidden;
+  z-index: 1 !important;
+  min-width: 0;
+
+  .Map {
+    z-index: 1 !important;
+    position: relative;
+  }
+}