Lens Design System – React Tips component
npm install @k8slens/lds-tipsnpm i -s @k8slens/lds @k8slens/lds-tokens @k8slens/lds-tips@k8slens/lds-tokens/lib/es/font-imports.css in your React app to include fonts@k8slens/lds/lib/es/index.css in your React app to include core styles@k8slens/lds-tips/lib/es/index.css in your React app to include Tips styles``tsx
import { Tips } from "@k8slens/lds-tips";
import tipStore from "./path-to-my/tip-store";
export const Component = () => (
setNextStepNumber={tipStore.setNextStepNumber}
getActiveStep={tipStore.getActiveStep}
setSkipAll={tipStore.setSkipAll}
skipped={tipStore.skipAll}
/>
);
`
tsx
// tours.ts
import type { Tour } from "@k8slens/lds-tips/lib/es/Tips/Tips";export default const tours: Array = [
{
id: "tour-1",
steps: [
{
id: "first-tip",
selector: "#target-element-1",
theme: "important",
content: (
<>
This is the first tip
Tip Contents
>
),
},
{
id: "second-tip",
selector: "#target-element-2",
theme: "important",
content: (
<>
This is the second tip
Another content
>
),
},
],
}
]
`$3
`ts
// 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 = 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;
};
}
`$3
`tsx
// 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 (
tours={tipStore.tours}
setNextStepNumber={tipStore.setNextStepNumber}
getActiveStep={tipStore.getActiveStep}
setSkipAll={tipStore.setSkipAll}
skipped={tipStore.store.skipAll}
/>
);
});
``