willa-workspace 0.0.3-alpha.2739b3e

package/packages/willa-content/src/components/Steps/index.css

@@ -0,0 +1,167 @@
+.willa-steps-block {
+  margin: 1.7rem 0;
+}
+
+.willa-steps-block-title {
+  margin-bottom: 0.9rem;
+  color: var(--willa-text-strong);
+  font-family: var(--willa-title-font);
+  font-size: 1rem;
+  font-weight: 600;
+  line-height: 1.45;
+}
+
+.willa-steps-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  counter-reset: willa-steps;
+}
+
+.willa-steps-block--horizontal .willa-steps-list {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
+  column-gap: 1.25rem;
+}
+
+.willa-step {
+  position: relative;
+  padding: 0 0 1.15rem 3rem;
+  counter-increment: willa-steps;
+}
+
+.willa-step::before {
+  content: counter(willa-steps);
+  position: absolute;
+  top: 0.02rem;
+  left: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.85rem;
+  height: 1.85rem;
+  border-radius: 50%;
+  background: var(--willa-step-marker-bg);
+  color: var(--willa-step-marker-color);
+  font-family: var(--willa-code-font);
+  font-size: 0.84rem;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.willa-step::after {
+  content: "";
+  position: absolute;
+  top: 2.1rem;
+  bottom: 0.2rem;
+  left: 0.92rem;
+  width: 1px;
+  background: var(--willa-step-line);
+}
+
+.willa-step:last-child {
+  padding-bottom: 0;
+}
+
+.willa-step:last-child::after {
+  display: none;
+}
+
+.willa-steps-block--horizontal .willa-step {
+  min-width: 0;
+  padding: 2.75rem 0 0;
+}
+
+.willa-steps-block--horizontal .willa-step::before {
+  top: 0;
+  left: 0;
+}
+
+.willa-steps-block--horizontal .willa-step::after {
+  top: 0.92rem;
+  right: -0.45rem;
+  bottom: auto;
+  left: 2.35rem;
+  width: auto;
+  height: 1px;
+}
+
+.willa-step-title {
+  margin-bottom: 0.44rem;
+  color: var(--willa-text-strong);
+  font-size: 0.96rem;
+  font-weight: 600;
+  line-height: 1.48;
+}
+
+.willa-step-body,
+.willa-step-body .willa-prose-p,
+.willa-step-body .willa-prose-ul,
+.willa-step-body .willa-prose-ol,
+.willa-step-body .willa-prose-li {
+  color: var(--willa-text-soft);
+  font-size: 0.94rem;
+  font-weight: 500;
+  line-height: 1.78;
+  text-shadow: none;
+}
+
+.willa-step-body .willa-prose-p,
+.willa-step-body .willa-prose-ul,
+.willa-step-body .willa-prose-ol {
+  margin-bottom: 0.62rem;
+}
+
+.willa-step-body .willa-prose-li + .willa-prose-li {
+  margin-top: 0.46rem;
+}
+
+.willa-step-line + .willa-step-line {
+  margin-top: 0.5rem;
+}
+
+.willa-step-line > :last-child {
+  margin-bottom: 0;
+}
+
+@media (max-width: 767px) {
+  .willa-steps-block {
+    margin: 1.5rem 0;
+  }
+
+  .willa-steps-block--horizontal .willa-steps-list {
+    display: block;
+  }
+
+  .willa-steps-block--horizontal .willa-step,
+  .willa-step {
+    padding-left: 2.7rem;
+  }
+
+  .willa-steps-block--horizontal .willa-step {
+    padding-top: 0;
+    padding-bottom: 1.15rem;
+  }
+
+  .willa-steps-block--horizontal .willa-step:last-child {
+    padding-bottom: 0;
+  }
+
+  .willa-steps-block--horizontal .willa-step::before,
+  .willa-step::before {
+    top: 0.02rem;
+    left: 0;
+    width: 1.7rem;
+    height: 1.7rem;
+  }
+
+  .willa-steps-block--horizontal .willa-step::after,
+  .willa-step::after {
+    top: 2.1rem;
+    right: auto;
+    bottom: 0.2rem;
+    left: 0.84rem;
+    width: 1px;
+    height: auto;
+  }
+}

package/packages/willa-content/src/components/Steps/index.tsx

@@ -0,0 +1,170 @@
+import {
+  Children,
+  isValidElement,
+  type CSSProperties,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import classNames from "classnames";
+import { isArray, isNil, isString } from "aidly";
+
+export type StepsProps = {
+  title?: ReactNode;
+  direction?: "vertical" | "horizontal";
+  markerColor?: string;
+  markerTextColor?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export type StepProps = {
+  title?: ReactNode;
+  markerColor?: string;
+  markerTextColor?: string;
+  className?: string;
+  children?: ReactNode;
+};
+
+export function Steps(props: StepsProps) {
+  const {
+    title,
+    direction = "vertical",
+    markerColor,
+    markerTextColor,
+    className,
+    children,
+  } = props;
+  const style = createMarkerStyle(markerColor, markerTextColor);
+  const stepChildren = createStepChildren(children);
+
+  return (
+    <section
+      className={classNames(
+        "willa-steps-block",
+        `willa-steps-block--${direction}`,
+        className,
+      )}
+      style={style}
+    >
+      {title ? <div className="willa-steps-block-title">{title}</div> : null}
+      <ol className="willa-steps-list">{stepChildren}</ol>
+    </section>
+  );
+}
+
+export function Step(props: StepProps) {
+  const { title, markerColor, markerTextColor, children, className } = props;
+  const lines = isArray(children) ? children : [children];
+  const content = lines.filter(
+    (line): line is Exclude<ReactNode, boolean | null | undefined> =>
+      !isNil(line) && line !== false,
+  );
+  const style = createMarkerStyle(markerColor, markerTextColor);
+
+  return (
+    <li className={classNames("willa-step", className)} style={style}>
+      {title ? <div className="willa-step-title">{title}</div> : null}
+      <div className="willa-step-body">
+        {content.map((line, index) => (
+          <div key={`step-line-${index}`} className="willa-step-line">
+            {line}
+          </div>
+        ))}
+      </div>
+    </li>
+  );
+}
+
+type MarkerStyle = CSSProperties & {
+  "--willa-step-marker-bg"?: string;
+  "--willa-step-marker-color"?: string;
+};
+
+const createMarkerStyle = (
+  markerColor?: string,
+  markerTextColor?: string,
+): MarkerStyle | undefined => {
+  if (!markerColor && !markerTextColor) return undefined;
+
+  return {
+    "--willa-step-marker-bg": markerColor,
+    "--willa-step-marker-color": markerTextColor,
+  };
+};
+
+type HeadingComponent = {
+  mdxHeadingTag?: string;
+};
+
+type HeadingElement = ReactElement<{
+  children?: ReactNode;
+}>;
+
+type AutoStepGroup = {
+  title?: ReactNode;
+  content: Array<ReactNode>;
+};
+
+const createStepChildren = (children: ReactNode) => {
+  const nodes = Children.toArray(children).filter((node) => {
+    if (!isString(node)) return true;
+    return node.trim().length > 0;
+  });
+
+  if (!nodes.length || nodes.some(isStepElement)) return children;
+
+  const groups = createAutoStepGroups(nodes);
+  if (!groups) return children;
+
+  return groups.map((group, index) => (
+    <Step key={`auto-step-${index}`} title={group.title}>
+      {group.content}
+    </Step>
+  ));
+};
+
+const createAutoStepGroups = (nodes: Array<ReactNode>) => {
+  const groups: Array<AutoStepGroup> = [];
+  let currentGroup: AutoStepGroup | undefined;
+  let hasHeading = false;
+
+  for (const node of nodes) {
+    if (isHeadingElement(node)) {
+      hasHeading = true;
+      currentGroup = {
+        title: node.props.children,
+        content: [],
+      };
+      groups.push(currentGroup);
+      continue;
+    }
+
+    if (!currentGroup) {
+      currentGroup = { content: [] };
+      groups.push(currentGroup);
+    }
+
+    currentGroup.content.push(node);
+  }
+
+  return hasHeading ? groups : undefined;
+};
+
+const isStepElement = (node: ReactNode): node is ReactElement<StepProps> => {
+  return isValidElement(node) && node.type === Step;
+};
+
+const isHeadingElement = (node: ReactNode): node is HeadingElement => {
+  if (!isValidElement(node)) return false;
+
+  if (typeof node.type === "string") {
+    return /^h[1-6]$/.test(node.type);
+  }
+
+  if (typeof node.type !== "function") return false;
+
+  return Boolean((node.type as HeadingComponent).mdxHeadingTag);
+};
+
+Steps.displayName = "Steps";
+Step.displayName = "Step";