import { Meta } from "@storybook/addon-docs/blocks";
import pkg from "../../../../package.json";

<Meta title="Getting Started/Development Guide/Local Development" />

<style>{`
  a {
    color: #5ECE7B !important;
  }

  .alert {
    background: #efeded;
    padding: 1rem;
    margin: 0.5rem 0 1rem;
  }

  .tip {
    border-left: 5px solid #5ECE7B;
  }

	.warning {
		border-left: 5px solid #ffc107;
		background-color: #fff4d5;
	}

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

  .link {
    margin-bottom: 16px;
    display: flex;
  }
`}</style>

# Local Development

<div class="heading">
  Version
  <a
    href={`?path=/story/releases-v${pkg.version.replaceAll(
      ".",
      "-"
    )}-change-log--page`}
  >
    {pkg.version}
  </a>
</div>

If you would like to create your own version of Storefront UI by forking the project, or contribute to the project itself you should know how to run and test Storefront UI locally.
<a class="link" href="?path=/story/introduction-contributing-guide-working-with-github--page">Check out Working with Github!</a>

## Run Storybook

Start Storybook in Development mode:

```
yarn storybook // in the root folder or inside vue package 
```

## Test your changes in Nuxt package

All changes should be visible in Nuxt.js project:

```
cd packages/nuxt && yarn dev
```

## Run unit tests

This is a part of CI/CD process but you can trigger them manually:

```
cd packages/vue && yarn test:unit
```

## Run E2E tests (headless)

This will build Storybook and run Cypress tests on it:

```
yarn test:e2e:headless
```

## Run Lighthouse audit

To check if there were some changes that affected i.e. performance or SEO

```
yarn lhci // mobile
```

or / and

```
yarn lhci:desktop
```