CodeTour

Example

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
 
while (++consectetur < amet) {
// TODO
}
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        steps={[
          {},
          {
            focus: [0, [4, 6]],
          },
          {
            focus: 5,
            replaces: [
              {
                line: 5,
                values: "    sit.eiusmod();",
              },
            ],
          },
          {
            focus: 5,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
          },
          {
            focus: 6,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor();",
              },
            ],
          },
          {
            focus: 6,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor(ipsum, adipiscing);",
              },
            ],
          },
          {
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor(ipsum, adipiscing);",
              },
            ],
          },
        ]}
      />
    </div>
  );
}

Highlighting

Lines

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
 
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet");
}
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        steps={[
          {
            focus: 1,
          },
          {
            focus: [1, 2],
          },
          {
            focus: [1, 2, 5],
          },
        ]}
      />
    </div>
  );
}

Range

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
 
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet");
}
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        steps={[
          {
            focus: [[4, 6]],
          },
        ]}
      />
    </div>
  );
}

Mixed

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
 
while (++consectetur < amet) {
sit.eiusmod("dolor sit amet");
}
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        steps={[
          {
            focus: [0, [4, 6]],
          },
        ]}
      />
    </div>
  );
}

Inserting

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        steps={[
          {},
          {
            inserts: [
              {
                line: 1,
                values: '  const sit = "lorem ipsum";',
              },
            ],
          },
          {
            inserts: [
              {
                line: 1,
                values: '  const sit = "lorem ipsum";',
              },
              {
                line: 1,
                values: '  dolor = elit(dolor, 3);',
              },
            ],
          },
        ]}
      />
    </div>
  );
}

Note: In the final step of the provided example, it's important to note that the algorithm simultaneously places all inserted lines at their respective indexes in the source code. Consequently, if multiple lines are inserted at the same index, they will be positioned together before the line that originally occupied that index. For instance, in the given example, both new lines are inserted at index 1, resulting in their placement before the line containing } (the original line at index 2).

Replacing

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
 
while (++consectetur < amet) {
// TODO
}
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        steps={[
          {},
          {
            focus: [4, 6],
          },
          {
            focus: [4, 6],
            replaces: [
              {
                line: 4,
                values: "  do {",
              },
              {
                line: 6,
                values: "  } while (++consectetur < amet);",
              },
            ],
          },
          {
            replaces: [
              {
                line: 4,
                values: "  do {",
              },
              {
                line: 6,
                values: "  } while (++consectetur < amet);",
              },
            ],
          },
        ]}
      />
    </div>
  );
}

Control

Navigation Bar

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
 
while (++consectetur < amet) {
// TODO
}
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        steps={[
          {},
          {
            focus: [0, [4, 6]],
          },
          {
            focus: 5,
            replaces: [
              {
                line: 5,
                values: "    sit.eiusmod();",
              },
            ],
          },
          {
            focus: 5,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
          },
          {
            focus: 6,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor();",
              },
            ],
          },
          {
            focus: 6,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor(ipsum, adipiscing);",
              },
            ],
          },
          {
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor(ipsum, adipiscing);",
              },
            ],
          },
        ]}
      />
    </div>
  );
}

Step Buttons

index.tsx

import { CodeTour } from "@nguyend-nam/code-tour";
import "./styles.css";
 
const str = `function lorem(ipsum, dolor) {
const sit = "lorem ipsum";
dolor = elit(dolor, 3);
 
while (++consectetur < amet) {
// TODO
}
}`;
 
export default function CodeTourDemo() {
  return (
    <div className="layout">
      <CodeTour
        defaultSourceCode={str}
        language="javascript"
        showNavigationBar={false}
        showStepNameButtons
        steps={[
          { stepName: "Start" },
          {
            stepName: "Highlight",
            focus: [0, [4, 6]],
          },
          {
            stepName: "Highlight + Replace",
            focus: 5,
            replaces: [
              {
                line: 5,
                values: "    sit.eiusmod();",
              },
            ],
          },
          {
            stepName: "Highlight + Replace",
            focus: 5,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
          },
          {
            stepName: "Highlight + Insert",
            focus: 6,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor();",
              },
            ],
          },
          {
            stepName: "Highlight + Insert",
            focus: 6,
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor(ipsum, adipiscing);",
              },
            ],
          },
          {
            stepName: "End",
            replaces: [
              {
                line: 5,
                values: '    sit.eiusmod("dolor sit amet");',
              },
            ],
            inserts: [
              {
                line: 6,
                values: "    tempor(ipsum, adipiscing);",
              },
            ],
          },
        ]}
      />
    </div>
  );
}

APIs

Step

Name	Type	Description
stepName	`string`	The name of that specific step
sourceCode	`string`	The source code of that specific step, if not set, the step takes the `defaultSourceCode` from the component
focus	`number \| ([number, number] \| number)[];`	The lines or group of lines you want to highlight
replaces	`{ line: number; values: string; }[]`	The lines you want to replace, and the values you want them to be
inserts	`{ line: number; values: string; }[]`	The lines you want to insert, and the values you want them to be
language	`string`	The programming language of that specific step, if not set, the step takes the `language` from the component

Component

Name	Type	Default	Description	Required
defaultSourceCode	`string`		The source code you want to show	✓
language	`string`		The programming language of the source code	✓
steps	`string`	`[]`	The list of Steps
showNavigationBar	`boolean`	`true`	Show/hide navigation buttons
showStepNameButtons	`boolean`	`false`	Show/hide step buttons
className	`string`		The classes you want to apply to the component
style	`CSSProperties`		The styles you want to apply to the component
navigationClassName	`string`		The classes you want to apply to the navigation
navigationStyle	`CSSProperties`		The styles you want to apply to the navigation
navigationButtonClassName	`string`		The classes you want to apply to the navigation buttons
navigationButtonStyle	`CSSProperties`		The styles you want to apply to the navigation buttons
codeContainerClassName	`string`		The classes you want to apply to the source code container
codeContainerStyle	`CSSProperties`		The styles you want to apply to the source code container
codeLineClassName	`string`		The classes you want to apply to the source code lines
codeLineStyle	`CSSProperties`		The styles you want to apply to the source code lines
stepButtonsContainerClassName	`string`		The classes you want to apply to the step buttons container
stepButtonsContainerStyle	`CSSProperties`		The styles you want to apply to the step buttons container
stepButtonClassName	`string`		The classes you want to apply to the step buttons
stepButtonStyle	`CSSProperties`		The styles you want to apply to the step buttons

Component