Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
step: 0.01,
});
const orientationY = number("orientation - y", 0, {
range: true,
min: 0,
max: 1,
step: 0.01,
});
const orientationZ = number("orientation - z", 0, {
range: true,
min: 0,
max: 1,
step: 0.01,
});
const posX = number("target - x", 0, {
range: true,
min: 0,
max: 20,
step: 0.1,
});
const posY = number("target - y", 0, {
range: true,
min: 0,
max: 20,
step: 0.1,
});
const posZ = number("target - z", 0, {
range: true,
min: 0,
max: 20,
step: 0.1,
.add("Slide Field", () => (
<div style="{{">
</div>
))
.add("Switch Field", () => (
.add('with interval', () => (
))
.add('with stepValue', () => (
function createThemeAction(title: string, min: number, max: number, value: number) {
return number(
title,
value,
{
range: true,
min,
max,
step: 1,
},
'theme',
);
}
.add('Proportional', () => {
const containerHeight = number('Container Height', 500)
const leftHeight = number('Left Content Height', 1000)
const rightHeight = number('Right Content Height', 2000)
const containerStyle = `height:${containerHeight}px;width:100px;`
const topColor = color('Top Color', '#ff0000')
const centerColor = color('Center Color', '#00ff00')
const bottomColor = color('Bottom Color', '#0000ff')
const bg = `linear-gradient(${topColor}, ${centerColor}, ${bottomColor})`
return ({
components: { ScrollSync },
template: `
<div style="display:flex;">
<div style="width:100px;height:${leftHeight}px;background:${bg};">
<div style="width:100px;height:${rightHeight}px;background:${bg};"></div></div></div>
.add('Title', () => (
{text('(prop) title', 'Show how YOU wear it')}
}
subtitle={text('(prop) subtitle', '#YOURLOOK')}
/>
))
.add('SubTitle', () => (
.add("Load Four Applications", () => {
resetStore();
const oneAppName = text("application1Name", "kalm-bookinfo1", "Application1");
const twoAppName = text("application1Name", "kalm-bookinfo2", "Application2");
const threeAppName = text("application1Name", "kalm-bookinfo3", "Application3");
const fourAppName = text("application1Name", "kalm-bookinfo4", "Application4");
const oneAppCreateTime = date("create Date", new Date("2020-06-17"), "Application1");
const twoAppCreateTime = date("create Date", new Date("2020-06-18"), "Application2");
const threeAppCreateTime = date("create Date", new Date("2020-06-19"), "Application3");
const fourAppCreateTime = date("create Date", new Date("2020-06-11"), "Application4");
const oneComponentCounter = number("pod counter", 2, undefined, "Application1");
const twoComponentCounter = number("pod counter", 3, undefined, "Application2");
const threeComponentCounter = number("pod counter", 4, undefined, "Application3");
const fourComponentCounter = number("pod counter", 5, undefined, "Application4");
const onePodCounter = number("pod counter", 2, undefined, "Application1");
const twoPodCounter = number("pod counter", 3, undefined, "Application2");
const threePodCounter = number("pod counter", 4, undefined, "Application3");
const fourPodCounter = number("pod counter", 5, undefined, "Application4");
createRoutes(store, [oneAppName, twoAppName, threeAppName, fourAppName]);
let oneApp: ApplicationDetails = createApplication(oneAppName);
const oneAppComponent = createApplicationComponent(
oneAppName,
oneComponentCounter,
oneAppCreateTime,
generateRandomIntList(onePodCounter, 0, 5),
);
() => {
const containerWidth = number('container width', 1056);
return (
<>
<div style="{{">
<a href="/#">Breadcrumb 1</a>
Breadcrumb 2
Breadcrumb 3
Breadcrumb 4
Breadcrumb 5
Breadcrumb 6
</div>
margin={
ComponentSize[
select(
'margin',
{None: '', ...mapEnumKeys(ComponentSize)},
'Small'
)
]
}
stretchToFitWidth={true}
>
<div>A</div>
<div>B</div>
export const withMinimumAndMaximumLimits = () => {
const label = text( 'Label', 'How many columns should this use?' );
const min = number( 'Min Value', 2 );
const max = number( 'Max Value', 10 );
return (
);
};