{"size": 2665, "ext": "js", "max_stars_repo_path": "stories/layout.js", "max_stars_repo_name": "rubynho/core-ui", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "stories/layout.js", "max_issues_repo_name": "rubynho/core-ui", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "stories/layout.js", "max_forks_repo_name": "rubynho/core-ui", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 21.4919354839, "max_line_length": 80, "alphanum_fraction": 0.5894934334}
//@flow
import React from "react";
import Layout from "../src/lib/components/layout/Layout.component";
import Loader from "../src/lib/components/loader/Loader.component";
import { withKnobs, boolean } from "@storybook/addon-knobs";
import { action } from "@storybook/addon-actions";
import { storiesOf } from "@storybook/react";

const sideBarActions = [
  {
    label: "Dashboard",
    icon: <i className="fas fa-tachometer-alt" />,
    onClick: action("dashboard clicked"),
    active: true,
    "data-cy": "Dashboard"
  },
  {
    label: "Servers",
    icon: <i className="fas fa-server" />,
    onClick: action("server clicked"),
    "data-cy": "Servers"
  },
  {
    label: "Disks",
    icon: <i className="fas fa-hdd" />,
    onClick: action("disk clicked"),
    "data-cy": "Disks"
  }
];

const applications = [
  {
    label: "Hyperdrive UI",
    onClick: action("Hyperdrive UI clicked"),
    "data-cy": "Hyperdrive_UI"
  }
];

const help = [
  { label: "About", onClick: action("About clicked"), "data-cy": "About" },
  {
    label: "Documentation",
    onClick: action("Documentation clicked"),
    "data-cy": "Documentation"
  },
  {
    label: "Onboarding",
    onClick: action("Onboarding clicked"),
    "data-cy": "Onboarding"
  }
];

const user = {
  name: "Carlito",
  actions: [
    { label: "Log out", onClick: action("Logout clicked"), "data-cy": "Logout" }
  ]
};

const languages = [
  {
    label: "Français",
    name: "FR",
    onClick: action("French selected"),
    selected: false
  },
  {
    label: "English",
    name: "EN",
    onClick: action("English selected"),
    selected: true
  }
];

storiesOf("Layout", module)
  .addDecorator(withKnobs)
  .add("Sidebar docked", () => {
    const toggle = boolean("Sidebar Toogle Visible", true);
    const expanded = boolean("Sidebar Expanded", false);

    const sidebar = {
      expanded,
      actions: sideBarActions
    };

    const navbar = {
      onToggleClick: action("toggle clicked"),
      toggleVisible: toggle,
      productName: "Harware UI",
      languages,
      applications,
      help,
      user
    };

    return (
      <Layout sidebar={sidebar} navbar={navbar}>
        <Loader size="massive" />
      </Layout>
    );
  })
  .add("Sidebar expanded", () => {
    const sidebar = {
      expanded: true,
      actions: sideBarActions
    };

    const navbar = {
      onToggleClick: action("toggle clicked"),
      toggleVisible: true,
      productName: "Harware UI",
      languages,
      applications,
      help,
      user
    };

    return (
      <Layout sidebar={sidebar} navbar={navbar}>
        <Loader size="massive" />
      </Layout>
    );
  });
