ur-ui-kit-tm/dist/stories/Places.stories.js

unlimited robotics ui kit

var __assign = (this && this.__assign) || function () {
    __assign = Object.assign || function(t) {
        for (var s, i = 1, n = arguments.length; i < n; i++) {
            s = arguments[i];
            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
                t[p] = s[p];
        }
        return t;
    };
    return __assign.apply(this, arguments);
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useState } from "react";
import { Places } from "..";
export default {
    title: "Example/Places",
    component: Places,
    argTypes: {
        columns: {
            control: "number",
            description: "Number of columns ",
            default: 3,
        },
        selected: { control: "text", description: "an id of selected place" },
        onPlaceSelected: { description: "A function that gets the id of clicked place" },
        onPlaceEdited: { description: "A function that gets the id of place on edit" },
        onPlaceDeleted: { description: "A function that gets the id of place on delete" },
        placesList: {
            control: "array",
            description: "An Array of places of type: { id: string, name: string, updated: date }",
        },
        cardStyle: {
            control: "object",
            description: "Object of type React.CSSProperties",
        },
        selectedCardStyle: {
            control: "object",
            description: "Object of type React.CSSProperties",
        },
        cardNameStyle: {
            control: "object",
            description: "Object of type React.CSSProperties",
        },
        cardFooterStyle: {
            control: "object",
            description: "Object of type React.CSSProperties",
        },
    },
};
var Template = function (args) {
    return _jsx(Places, __assign({}, args), void 0);
};
export var Basic = Template.bind({});
Basic.args = {
    selected: "3",
    placesList: [
        { id: "1", name: "kitchen", updated: new Date("10/10/20") },
        { id: "2", name: "bedroom", updated: new Date("10/05/21") },
        { id: "3", name: "bathroom", updated: new Date("2/02/21") },
        { id: "4", name: "master bedroom", updated: new Date() },
        { id: "5", name: "lounge", updated: new Date("02/03/1998") },
        { id: "6", name: "guest bedroom", updated: new Date() },
    ],
    columns: 3,
};
var TemplateSelectable = function (args) {
    var _a = useState("1"), selected = _a[0], setSelected = _a[1];
    return _jsx(Places, __assign({}, args, { selected: selected, onPlaceSelected: function (id) { return setSelected(id); } }), void 0);
};
export var Selectable = TemplateSelectable.bind({});
Selectable.args = {
    placesList: [
        { id: "1", name: "kitchen", updated: new Date("10/10/20") },
        { id: "2", name: "bedroom", updated: new Date("10/05/21") },
        { id: "3", name: "bathroom", updated: new Date("2/02/21") },
    ],
};
export var CustomStyles = TemplateSelectable.bind({});
CustomStyles.args = {
    placesList: [
        { id: "1", name: "kitchen", updated: new Date("10/10/20") },
        { id: "2", name: "bedroom", updated: new Date("10/05/21") },
        { id: "3", name: "bathroom", updated: new Date("2/02/21") },
    ],
    cardStyle: { borderRadius: 0, height: "80px" },
    selectedCardStyle: { borderColor: "#5c0a6d83" },
    cardNameStyle: { color: "#6b0a5e" },
    cardFooterStyle: { display: "none" },
};