@gpichot/spectacle-deck 1.1.0 → 1.1.2

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

@@ -1,129 +0,0 @@
-/**
- * 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

@@ -1,85 +0,0 @@
-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: Bitter, "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #f49676;
-`;
-
-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

@@ -1,18 +0,0 @@
-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

@@ -1,140 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/src/components/ItemsColumn.tsx

@@ -1,56 +0,0 @@
-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",
-            alignItems: "center",
-            height: "100%",
-            ...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)`
-  * {
-    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/Timeline.styled.tsx

@@ -1,24 +0,0 @@
-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;
-`;

package/src/components/Timeline.tsx

@@ -1,157 +0,0 @@
-import React from "react";
-import { animated, useSpring } from "react-spring";
-import { Stepper } from "spectacle";
-
-import {
-  TimelineItemBody,
-  TimelineItemContent,
-  TimelineItemContentPhantom,
-  TimelineItemTitle,
-} from "./Timeline.styled";
-import styled from "styled-components";
-
-const TimelineItemStyled = styled(animated.div)<{
-  isOdd: boolean;
-  isEven: boolean;
-}>`
-  flex: 1;
-  flex-flow: column nowrap;
-  display: inline-flex;
-
-  &:nth-child(odd) {
-    &,
-    ${TimelineItemContent} {
-      flex-direction: column;
-    }
-  }
-  &:nth-child(even) {
-    &,
-    ${TimelineItemContent} {
-      flex-direction: column-reverse;
-    }
-  }
-`;
-
-const TimelineItemGuide = styled(animated.div)`
-  width: 100%;
-  padding-top: 2px;
-  display: flex;
-  flex-flow: row;
-  align-items: center;
-
-  svg {
-    height: 28px;
-    width: 28px;
-    path {
-      fill: #ffffff;
-    }
-    margin-right: 4px;
-  }
-`;
-
-const TimelineItemGuideLine = styled(animated.div)`
-  border-top: 4px solid #ffffff;
-  margin-right: 4px;
-`;
-
-const style = {
-  display: "flex",
-  position: "relative",
-  flexFlow: "row nowrap",
-  alignItems: "center",
-};
-
-export default function Timeline(props: React.ComponentPropsWithoutRef<"div">) {
-  const children = React.Children.toArray(props.children);
-  return (
-    <Stepper
-      {...props}
-      values={children}
-      activeStyle={style}
-      inactiveStyle={style}
-    >
-      {(value, step) => {
-        return children.map((child, index) => {
-          if (!React.isValidElement(child)) {
-            return child;
-          }
-          return React.cloneElement(child, {
-            // @ts-expect-error cloning
-            isPhantom: step < index,
-            isLast: step === index,
-          });
-        });
-      }}
-    </Stepper>
-  );
-}
-
-function getItemOpacity({
-  isLast,
-  isPhantom,
-}: {
-  isLast?: boolean;
-  isPhantom?: boolean;
-}) {
-  if (isPhantom) return 0;
-  if (isLast) return 1;
-  return 0.5;
-}
-
-export function TimelineItem(
-  props: React.ComponentPropsWithoutRef<"div"> & {
-    isPhantom?: boolean;
-    isLast?: boolean;
-  }
-) {
-  const { children, title, isPhantom, isLast, ...rest } = props;
-  const guideLineProps = useSpring({
-    width: isPhantom || isLast ? "0%" : "100%",
-  });
-  const appearStyles = useSpring({
-    opacity: getItemOpacity({ isPhantom, isLast }),
-  });
-  const colorStyles = useSpring({ opacity: isPhantom || isLast ? 1 : 0.15 });
-  return (
-    <TimelineItemStyled
-      {...rest}
-      style={{
-        ...appearStyles,
-      }}
-    >
-      <TimelineItemContentPhantom>
-        <TimelineItemTitle>{title}</TimelineItemTitle>
-        <TimelineItemBody>{children}</TimelineItemBody>
-      </TimelineItemContentPhantom>
-      <TimelineItemGuide style={colorStyles}>
-        <Hexagon />
-        <TimelineItemGuideLine style={guideLineProps} />
-      </TimelineItemGuide>
-      <TimelineItemContent>
-        <TimelineItemTitle>{title}</TimelineItemTitle>
-        <TimelineItemBody>{children}</TimelineItemBody>
-      </TimelineItemContent>
-    </TimelineItemStyled>
-  );
-}
-
-function Hexagon() {
-  return (
-    <svg
-      width="18"
-      height="20"
-      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="#F49676"
-      ></path>
-      <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="#F49676"
-      ></path>
-    </svg>
-  );
-}