import { Meta } from "@storybook/addon-docs/blocks";
import Code from "./assets/code-brackets.svg";
import Colors from "./assets/colors.svg";
import Comments from "./assets/comments.svg";
import Direction from "./assets/direction.svg";
import Flow from "./assets/flow.svg";
import Plugin from "./assets/plugin.svg";
import Repo from "./assets/repo.svg";
import StackAlt from "./assets/stackalt.svg";
import Hero from "./assets/hero.png";
import Logo from "./assets/logo.png";
import pkg from "../../package.json";

<Meta title="Welcome" />

<style>{`
  .container {
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .hero {
    margin-bottom: 2rem;
  }

  .version {
    color: #5ECE7B !important;
  }

  .heading {
    font-size: 18px;
    --mediumdark: '#999999';
    color: #999;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 5px;
  }

  .subheading {
    --mediumdark: '#999999';
    font-weight: 900;
    font-size: 13px;
    color: #999;
    letter-spacing: 6px;
    line-height: 24px;
    text-transform: uppercase;
    margin-bottom: 12px;
    margin-top: 40px;
  }

  .link-list {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    row-gap: 10px;
  }

  @media (min-width: 620px) {
    .link-list {
      row-gap: 20px;
      column-gap: 20px;
      grid-template-columns: 1fr 1fr;
    }
  }

  @media all and (-ms-high-contrast:none) {
  .link-list {
      display: -ms-grid;
      -ms-grid-columns: 1fr 1fr;
      -ms-grid-rows: 1fr 1fr;
    }
  }

  .link-item {
    display: block;
    padding: 20px 30px 20px 15px;
    border: 1px solid #00000010;
    border-radius: 5px;
    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
    color: #333333;
    display: flex;
    align-items: flex-start;
  }

  .link-item:hover {
    border-color: #1EA7FD50;
    transform: translate3d(0, -3px, 0);
    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
  }

  .link-item:active {
    border-color: #1EA7FD;
    transform: translate3d(0, 0, 0);
  }

  .link-item strong {
    font-weight: 700;
    display: block;
    margin-bottom: 2px;
  }
  
  .link-item img {
    height: 40px;
    width: 40px;
    margin-right: 15px;
    flex: none;
  }

  .link-item span {
    font-size: 14px;
    line-height: 20px;
  }

  .supporters {
    display: flex;
    align-items: center;
    margin-top: 2rem;
    font-size: 16px;
    justify-content: center;
  }

  .flex {
    display: flex;
    justify-content: center;
  }

  .image {
    margin: 0 0.5rem;
  }
`}</style>

<div class="container">
  <img src={Logo} class="hero" alt="StorefrontUI logo" />
  <p class="heading">
    Current version:{" "}
    <a
      class="version"
      href={`?path=/story/releases-v${pkg.version.replaceAll(
        ".",
        "-"
      )}-change-log--page`}
    >
      {pkg.version}
    </a>
  </p>
</div>

**@highdigital/vuet** is a UI component library that ships **raw** source, and aims to be:

- Developer-friendly
- Customization-first and
- Performance oriented

Below you can find information about key concepts behind the project.

## Our core concepts

Storefront UI is designed and built based on two main concepts as below:

- Design inspired from [Google Retail UX Playbook](https://services.google.com/fh/files/events/pdf_retail_ux_playbook.pdf).
- [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) pattern for components

## StorefrontUI key characteristics

We are building Storefront UI based on the following 6 fundamentals:

- **Customization**: Along with standard prop-based customization, every component has a set of slots that let you replace any part of it with your own images, icons or even custom HTML markup. You can also customize whole library from a single SCSS file by overriding set of variables.
- **Mobile-first**: Every Storefront UI component is highly optimized for mobile user experience and in many cases behaves completely different on desktop and mobile. Select list becomes full-screen drop-down, tabs are becoming accordion etc.
- **Performance**: You’re importing ONLY what you need, and in a raw format which means you can benefit from all build-time optimizations like tree shaking or grouping common chunks. Unused components are treeshaked and global CSS is just < 0,1 kB unminified. Thanks to this initial footprint of the library is unnoticable. You can use the library for how many components you want, even a single slider. You bundle only what you import.
- **Best practices**: Storefront UI components follow best practices in terms of design and core. Every component is based on the Google Retail UX Playbook and is accessibility-friendly.
- **E-commerce**: As a UI library dedicated to eCommerce, Storefront UI along with standard UI components has all the elements necessary for building modern online stores.
- **Open Source**: Storefront UI is a community effort to deliver the best possible experience to modern web applications and e-commerce shops, with carefully crafted components following best practices. Our team consists of agencies and volunteer contributors from all over the world.

<div className="subheading">Useful Links</div>

<div className="link-list">
  <a
    className="link-item"
    href="?path=/story/setup-installation--page"
    target="_self"
  >
    <img src={Direction} alt="direction" />
    <span>
      <strong>Getting started</strong>
      How to install and use StorefrontUI in your project
    </span>
  </a>
  <a
    className="link-item"
    href="?path=/story/styleguides-colors--page"
    target="_self"
  >
    <img src={Colors} alt="colors" />
    <span>
      <strong>Styleguides</strong>
      Color, Typography and Sizes
    </span>
  </a>
  <a
    className="link-item"
    href="?path=/story/components-atoms-arrow--common"
    target="_self"
  >
    <img src={StackAlt} alt="stackalt" />
    <span>
      <strong>Components</strong>
      Components Playground
    </span>
  </a>
  <a
    className="link-item"
    href="https://github.com/vuestorefront/storefront-ui/"
    target="_blank"
  >
    <img src={Code} alt="code" />
    <span>
      <strong>Our Github Repo</strong>
      View the source and add issues
    </span>
  </a>
  <a className="link-item" href="https://discord.gg/GS8hqFS" target="_blank">
    <img src={Comments} alt="comments" />
    <span>
      <strong>Discord chat</strong>
      Chat with maintainers and the community
    </span>
  </a>
  <a
    className="link-item"
    href="https://www.figma.com/file/N0Ct95cSAoODNv7zYS01ng/Storefront-UI-%7C-Design-System?node-id=127%3A1054"
    target="_blank"
  >
    <img src={Flow} alt="flow" />
    <span>
      <strong>Components Design</strong>
      Figma designs of how components look
    </span>
  </a>
  <a
    className="link-item"
    href="https://docs.storefrontui.io/?path=/story/introduction-contributing-guide-become-a-contributor--page"
    target="_blank"
  >
    <img src={Repo} alt="contribution" />
    <span>
      <strong>Contribution Guidelines</strong>
      Read the guidelines and start contributing
    </span>
  </a>
  <a
    className="link-item"
    href="https://docs.storefrontui.io/?path=/story/introduction-team--page"
    target="_blank"
  >
    <img src={Plugin} alt="plugin" />
    <span>
      <strong>Meet the team</strong>
      The core team behind StorefrontUI
    </span>
  </a>
</div>

<div class="supporters">
  <p class="line">In collaboration with </p>
  <img
    class="image"
    src="https://res.cloudinary.com/cloudinary-marketing/image/upload/w_150,c_scale/v1595456749/creative_source/Logo/PNG/cloudinary_logo_blue_0720_2x.png"
    alt="Cloudinary logo"
  />
</div>

<div class="flex">

MIT Licensed

</div>