Lens Design System – React Tips component

Documentation

Browse the documentation at lens-design-system.k8slens.dev.

Usage in React apps

• run npm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-tips
• import @k8slens/lds-tokens/lib/es/font-imports.css in your React app to include fonts
• import @k8slens/lds/lib/es/index.css in your React app to include core styles
• import @k8slens/lds-tips/lib/es/index.css in your React app to include Tips styles
• Use in a component:

import { Tips } from "@k8slens/lds-tips";

import tipStore from "./path-to-my/tip-store";

export const Component = () => (
  <Tips
    tours={tipStore.tours}
    setNextStepNumber={tipStore.setNextStepNumber}
    getActiveStep={tipStore.getActiveStep}
    setSkipAll={tipStore.setSkipAll}
    skipped={tipStore.skipAll}
  />
);

Example using MobX

Tours

// tours.ts
import type { Tour } from "@k8slens/lds-tips/lib/es/Tips/Tips";

export default const tours: Array<Tour> = [
  {
    id: "tour-1",
    steps: [
      {
        id: "first-tip",
        selector: "#target-element-1",
        theme: "important",
        content: (
          <>
            <h3>This is the first tip</h3>
            <p>Tip Contents</p>
          </>
        ),
      },
      {
        id: "second-tip",
        selector: "#target-element-2",
        theme: "important",
        content: (
          <>
            <h3>This is the second tip</h3>
            <p>Another content</p>
          </>
        ),
      },
    ],
  }
]

TipStore

// tips-store.ts
import { action, makeObservable, observable, toJS } from "mobx";

import type { Tour, TipsProps } from "@k8slens/lds-tips/lib/es/Tips/Tips";

import tours from "./tours";

type ActiveSteps = { [key: string]: number };

type TipStoreModel = {
  skipAll: TipsProps["skipAll"];
  activeSteps: ActiveSteps;
};

export class TipStore {
  @observable
  store: TipStoreModel = {
    skipAll: false,
    activeSteps: {}
  };
  tours: Array<Tour> = tours;

  constructor() {
    super();

    makeObservable(this);
  }

  @action
  setSkipAll: TipsProps["setSkipAll"] = () => {
    this.store.skipAll = true;
  };

  @action
  setNextStepNumber: TipsProps["setNextStepNumber"] = (tourId: string) => {
    let nextStep = 1;
    if (typeof this.store.activeSteps[tourId] === "number") {
      nextStep += this.store.activeSteps[tourId];
    };

    this.store.activeSteps = {
      ...this.store.activeSteps,
      [tourId]: nextStep
    };

    return nextStep;
  };

  getActiveStep: TipsProps["getActiveStep"] = (tourId: string) => {
    return this.store.activeSteps[tourId] || 0;
  };
}

Component

// Component.tsx
import React from "react";
import { observer } from "mobx-react";

import { Tips } from "@k8slens/lds-tips";

import { TipStore } from "./TipStore";

interface Props {
  tipStore: TipStore | null;
}

export const Component = observer(({ tipStore }: Props) => {

  if (!tipStore) {
    return null;
  }

  return (
    <Tips
      tours={tipStore.tours}
      setNextStepNumber={tipStore.setNextStepNumber}
      getActiveStep={tipStore.getActiveStep}
      setSkipAll={tipStore.setSkipAll}
      skipped={tipStore.store.skipAll}
    />
  );
});