@gpichot/spectacle-deck 1.2.0 → 1.2.1

package/src/components/CodeStepper/code-directives.ts

@@ -0,0 +1,129 @@
+/**
+ * The Code Stepper component is a component that allows you to step through
+ * the code using familiar directives.
+ *
+ * @example "@step showLines(1-3)" will show lines 1-3
+ * @example "@step highlight(1-3)" will highlight lines 1-3
+ *
+ */
+
+function range(start: number, end: number) {
+  return Array.from({ length: end - start + 1 }, (_, i) => i + start);
+}
+
+/**
+ * Function parse ranges list
+ */
+function parseRangeList(str: string): number[] {
+  return str.split(',').reduce((acc, line) => {
+    if (!line.includes('-')) return [...acc, parseInt(line, 10)];
+
+    const [start, end] = line.split('-').map(Number);
+    return [...acc, ...range(start, end)];
+  }, [] as number[]);
+}
+
+/**
+ * Parse showLines fn
+ *
+ * "showLines(1-3)" => [1, 2, 3]
+ * "showLines(1,3)" => [1,3]
+ * "showLines(1-2,4-5)" => [1,2,4,5]
+ */
+function parseShowLines(directive: string): { showLines: number[] } | null {
+  const match = directive.match(/showLines\((.*)\)/);
+  if (!match) return null;
+
+  const lines = parseRangeList(match[1]);
+
+  return { showLines: lines };
+}
+
+/**
+ * Parse highlight fn
+ *
+ * "highlight(1-3)" => [1,2,3]
+ * etc.
+ */
+function parseHighlight(directive: string): { highlight: number[] } | null {
+  const match = directive.match(/highlight\((.*)\)/);
+  if (!match) return null;
+
+  const lines = parseRangeList(match[1]);
+
+  return { highlight: lines };
+}
+
+type StepDirective = {
+  showLines?: number[];
+  highlight?: number[];
+  name?: string;
+};
+
+/**
+ * Parse name fn
+ *
+ * "name("my name")" => "my name"
+ */
+function parseName(directive: string): { name: string } | null {
+  const match = directive.match(/name\("(.*)"\)/);
+  if (!match) return null;
+
+  return { name: match[1] };
+}
+
+/**
+ * Parse step directive
+ *
+ * @example "@step showLines(1-3) highlight(1-3)"
+ * @example "@step showLines(1-3)"
+ * @example "@step highlight(1-3)"
+ */
+function parseStepDirective(directive: string): StepDirective {
+  // Should match a showLines(1-3) or highlight(1-3) directive
+  // Should match name("(string)")
+  const regex = /showLines\([^)]+\)|highlight\([^)]+\)|name\("(.*)"\)/g;
+
+  const directives = directive.match(regex) || [];
+
+  const name = directives.map(parseName).find(Boolean);
+  const showLines = directives.map(parseShowLines).find(Boolean);
+  const highlight = directives.map(parseHighlight).find(Boolean);
+
+  return { ...showLines, ...highlight, ...name };
+}
+
+export type Step = {
+  hiddenLines: number[];
+  highlight: number[];
+  name?: string;
+};
+
+/**
+ * Reduce steps directives
+ */
+export function combineStepDirectives(directives: StepDirective[]): Step[] {
+  let hiddenLines = directives.reduce((acc, { showLines }) => {
+    if (!showLines) return acc;
+
+    return [...acc, ...showLines];
+  }, [] as number[]);
+
+  return directives.map(({ highlight, showLines, name }) => {
+    hiddenLines = hiddenLines.filter((line) => !showLines?.includes(line));
+    return {
+      highlight: highlight || [],
+      hiddenLines,
+      name,
+    };
+  });
+}
+
+/**
+ * Parse step directives
+ */
+export function parseStepDirectives(directives: string[]): Step[] {
+  const parsedDirectives = directives.map(parseStepDirective);
+
+  return combineStepDirectives(parsedDirectives);
+}

package/src/components/DocumentationItem.tsx

@@ -0,0 +1,85 @@
+import React from "react";
+
+import styled from "styled-components";
+
+const DocWrapper = styled.div`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  z-index: 10000;
+
+  .docContent {
+    display: none;
+  }
+
+  &:hover .docContent {
+    display: flex;
+  }
+`;
+
+const DocContainer = styled.div`
+  margin: 2rem 1rem;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+`;
+
+const DocLink = styled.a`
+  text-decoration: none;
+  font-weight: normal;
+  font-family: var(--font-family);
+  color: var(--color-secondary);
+`;
+
+const DocLinkItem = styled(DocLink)`
+  width: fit-content;
+  display: inline-block;
+  background-color: #333;
+  border: 1px solid #333;
+  padding: 0.5rem 1rem;
+  border-radius: 1.5rem;
+  margin: 0.25rem 0;
+`;
+
+const DocContent = styled.div`
+  display: flex;
+  flex-flow: column-reverse nowrap;
+  position: absolute;
+  right: 1rem;
+  bottom: 4.5rem;
+  text-align: right;
+  border-radius: 0.5rem;
+  align-items: flex-end;
+`;
+
+export function Doc({
+  label,
+  link,
+  children,
+}: {
+  label: string;
+  link: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <DocWrapper>
+      <DocContainer>
+        {children && <DocContent>{children}</DocContent>}
+        <div>
+          <DocLink target="_blank" rel="noopener noreferrer" href={link}>
+            {label}
+          </DocLink>
+        </div>
+      </DocContainer>
+    </DocWrapper>
+  );
+}
+
+export function DocItem({ label, link }: { label: string; link: string }) {
+  return (
+    <DocLinkItem target="_blank" rel="noopener noreferrer" href={link}>
+      {label}
+    </DocLinkItem>
+  );
+}

package/src/components/FilePane.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+
+export default function FilePane({
+  name,
+  children,
+  priority,
+  ...divProps
+}: React.ComponentProps<"div"> & { name: string; priority?: number }) {
+  return React.isValidElement(children)
+    ? React.cloneElement(children, {
+        // @ts-expect-error cloning
+        priority,
+        name,
+      })
+    : children;
+}
+
+FilePane.mdxType = "FilePane";

package/src/components/HorizontalList.tsx

@@ -0,0 +1,141 @@
+import { usePestacle } from "context";
+import React from "react";
+import { animated, useSpring } from "react-spring";
+import { Stepper } from "spectacle";
+import styled from "styled-components";
+
+const Container = styled.div`
+  display: grid;
+  grid-gap: 2rem;
+`;
+
+export default function HorizontalList({
+  children,
+  columns = 3,
+}: {
+  columns?: number;
+  children: React.ReactNode;
+}) {
+  const items = React.Children.toArray(children);
+  return (
+    <Stepper values={items}>
+      {(_, step) => (
+        <Container
+          style={{
+            gridTemplateColumns: `repeat(${columns}, 1fr)`,
+          }}
+        >
+          {items.map((item, k) => {
+            if (!React.isValidElement(item)) {
+              return item;
+            }
+            return React.cloneElement(item, {
+              // @ts-expect-error cloning
+              position: k + 1,
+              isVisible: k <= step,
+              isLast: k === step,
+            });
+          })}
+        </Container>
+      )}
+    </Stepper>
+  );
+}
+
+function Pill({ position }: { position: number }) {
+  return (
+    <div
+      style={{ width: 48, transform: "translate(-25%, -25%)", opacity: 0.9 }}
+    >
+      <svg
+        width="48"
+        height="48"
+        viewBox="0 0 18 20"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M8.64717 20L0 15.0094V5.00134L8.64717 0L17.289 5.00134V15.0094L8.64717 20ZM1.48222 14.141L8.64717 18.2846L15.8068 14.141V5.85902L8.64717 1.71536L1.48222 5.85902V14.141Z"
+          fill="#ffffff"
+        ></path>
+        <text
+          x="9"
+          y="11"
+          text-anchor="middle"
+          dominant-baseline="middle"
+          fill="#f49676"
+          style={{ fontSize: "50%" }}
+        >
+          {position}
+        </text>
+        <path
+          d="M 8.758 16.01 L 3.549 13.004 L 3.549 6.975 L 8.758 3.963 L 13.964 6.975 L 13.964 13.004 L 8.758 16.01 Z"
+          fill="transparent"
+        ></path>
+      </svg>
+    </div>
+  );
+}
+
+const Item = styled(animated.div)`
+  display: flex;
+  flex-direction: column;
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+`;
+const ItemHead = styled.div`
+  display: flex;
+  flex-direction: row;
+  font-size: 1.3rem;
+  margin-bottom: 0.4rem;
+
+  p {
+    margin: 0;
+  }
+`;
+const ItemContent = styled.div`
+  > * {
+    font-size: 1rem;
+    padding: 4px !important;
+    line-height: 1.5rem !important;
+    margin-top: 0;
+  }
+`;
+
+function getItemOpacity({
+  isLast,
+  isVisible,
+}: {
+  isLast?: boolean;
+  isVisible?: boolean;
+}) {
+  if (isLast) return 1;
+  if (isVisible) return 0.7;
+  return 0;
+}
+export function HorizontalListItem({
+  title,
+  children,
+  position,
+  isVisible,
+  isLast,
+}: {
+  title: string;
+  position: number;
+  isVisible?: boolean;
+  isLast?: boolean;
+  children: React.ReactNode;
+}) {
+  const opacityStyles = useSpring({
+    opacity: getItemOpacity({ isVisible, isLast }),
+  });
+  return (
+    <Item style={opacityStyles}>
+      <ItemHead>
+        <Pill position={position} />
+        <p>{title}</p>
+      </ItemHead>
+
+      <ItemContent>{children}</ItemContent>
+    </Item>
+  );
+}

package/src/components/IconBox.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import styled from "styled-components";
+
+const IconBoxContent = styled.div`
+  * {
+    margin: 0.2rem !important;
+    padding: 0 !important;
+  }
+`;
+
+export function IconBox({
+  children,
+  icon,
+}: {
+  children: React.ReactNode;
+  icon: React.ReactNode;
+}) {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        padding: "1rem 0",
+      }}
+    >
+      <div style={{ fontSize: 60 }}>{icon}</div>
+      <IconBoxContent>{children}</IconBoxContent>
+    </div>
+  );
+}

package/src/components/Image.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { SVGObject } from "../layouts/styled";
+
+export interface ImageProps extends React.ComponentProps<"img"> { }
+
+export function Image(props: ImageProps) {
+  const { src, height, width,
+    style, ...otherProps
+  } = props;
+  if (!src?.endsWith(".svg")) {
+    return (
+      <img
+        src={src}
+        {...otherProps}
+        style={{
+          width,
+          height: height || "100%",
+          objectFit: "cover",
+          objectPosition: "center",
+          ...style
+        }}
+      />
+    );
+  }
+  return (
+    <SVGObject
+      type="image/svg+xml"
+      data={src}
+      style={{
+        height: height || "100%",
+        minWidth: "30vw",
+        width: width || "100%",
+        ...style
+      }}
+    />
+  );
+}
+
+Image.mdxType = "Image";

package/src/components/ItemsColumn.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { Stepper } from "spectacle";
+import styled from "styled-components";
+import { useSpring, animated } from "react-spring";
+
+export function ItemsColumn(divProps: React.ComponentProps<"div">) {
+  const { style, children, ...props } = divProps;
+  const childrenArray = React.Children.toArray(children);
+  return (
+    <Stepper values={childrenArray}>
+      {(value, step) => (
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "column",
+            justifyItems: 'center',
+            alignItems: "stretch",
+            height: "100%",
+            rowGap: '2rem',
+            ...style,
+          }}
+          {...props}
+        >
+          {childrenArray.map((child, index) => {
+            const isVisible = index <= step;
+            if (!React.isValidElement(child)) {
+              return child;
+            }
+            return (
+              <ItemColumnWrapper key={index} isVisible={isVisible}>
+                {child}
+              </ItemColumnWrapper>
+            );
+          })}
+        </div>
+      )}
+    </Stepper>
+  );
+}
+
+const ItemColumnWrapperStyled = styled(animated.div)`
+  display: flex;
+  justify-content: center;
+  * {
+    text-align: center !important;
+  }
+`;
+
+function ItemColumnWrapper({
+  children,
+  isVisible,
+  ...props
+}: React.ComponentPropsWithRef<"div"> & { isVisible: boolean }) {
+  const styles = useSpring({ opacity: isVisible ? 1 : 0 });
+  return (
+    <ItemColumnWrapperStyled style={styles} {...props}>
+      {children}
+    </ItemColumnWrapperStyled>
+  );
+}

package/src/components/QRCode.tsx

@@ -0,0 +1,55 @@
+import QrCreator from "qr-creator";
+import React, { useContext } from "react";
+import { DeckContext } from "spectacle";
+
+export interface QRCodeProps {
+  url: string;
+  size?: "xs" | "sm" | "md" | "lg";
+}
+
+const MapSize = {
+  xs: 64,
+  sm: 128,
+  md: 256,
+  lg: 512,
+};
+
+export function QRCode({ url, size = "md" }: QRCodeProps) {
+  const id = React.useId().replace(/:/g, "___");
+  const deck = useContext(DeckContext);
+  const width = MapSize[size];
+  const backgroundColor = deck.theme?.colors?.primary || "#ffffff";
+
+  React.useEffect(() => {
+    const element = document.querySelector(`#${id}`);
+
+    if (!element) return console.error("QRCode element not mounted");
+
+    QrCreator.render(
+      {
+        text: url,
+        radius: 0.5,
+        ecLevel: "H", // L, M, Q, H
+        fill: deck.theme?.colors?.secondary || "#000000",
+        background: backgroundColor,
+        size: width,
+      },
+      element as HTMLElement,
+    );
+
+    return () => {
+      element.replaceChildren();
+    };
+  }, [url]);
+
+  return (
+    <div
+      id={id}
+      style={{
+        padding: "1rem 1rem 0.6rem 1rem",
+        borderRadius: "1rem",
+        backgroundColor,
+      }}
+    />
+  );
+}

package/src/components/Timeline.styled.tsx

@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const TimelineItemContent = styled.div`
+  display: flex;
+  padding: 0.7rem 0 1rem 12px;
+`;
+export const TimelineItemContentPhantom = styled(TimelineItemContent)`
+  opacity: 0;
+`;
+
+export const TimelineItemBody = styled.div`
+  &,
+  & > * {
+    font-size: 1.3rem !important;
+    color: #ffffff !important;
+  }
+`;
+
+export const TimelineItemTitle = styled.div`
+  font-family: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 1rem;
+  font-weight: bold;
+  color: #ffffffbb;
+`;