import { Meta } from "@storybook/addon-docs/blocks";

<Meta title="Contributing Guide/Guide/Become a contributor" />

<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;
	}
`}</style>

# Become a contributor

_Thank you so much for thinking of contributing to **StorefrontUI**_ ❤️👍.

We want you to have fun contributing with us, so let's go over a few important guidelines before getting started.

<ul class="toc">
  <li>
    <a href="#important-resources">Important resources</a>
  </li>
  <li>
    <a href="#repositorys-structure">Repository's structure</a>
  </li>
  <li>
    <a href="#ways-of-contribution">Ways of contribution</a>
    <ul>
      <li>
        <a href="#contribute-code">Contribute Code</a>
      </li>
      <li>
        <a href="#report-a-bug-or-request-a-feature">
          Report a bug or request a feature
        </a>
      </li>
      <li>
        <a href="#work-on-documentation">Work on Documentation</a>
      </li>
      <li>
        <a href="#spread-the-words">Spread the words</a>
      </li>
    </ul>
  </li>
</ul>

## Important resources

- [Our Discord Server](https://discord.com/invite/TJpdzzN6q5) - This is the place where we discussed about new features, exchanging questions between the core team, contributors (`#contributors`) and StorefrontUI users.
- [Our component storybook](https://storybook.storefrontui.io/) - Playground for our components
- [Our current issues](https://github.com/DivanteLtd/storefront-ui/issues) - Where we keep track of all the bugs, feature requests reported by our community members.
- [Our current Roadmap](https://github.com/DivanteLtd/storefront-ui/blob/develop/ROADMAP.md) - The status of our library in long term.
- [Our Figma component design](https://www.figma.com/file/N0Ct95cSAoODNv7zYS01ng/Storefront-UI-%7C-Design-System?node-id=127%3A1054) - It contains the designs of all the existing/future components in the library.

## Repository's structure

StorefrontUI is an open-source UI library which is written **initially for Vue.js developers**. Like any other Vue.js project, you should be familiar with the basic of [Vue.js](https://vuejs.org) before starting to contribute. This is to help you **understand** the code **faster** and thus make it **easier** for you in contributing.

Our repo structure follows [monorepo development strategy](https://www.atlassian.com/git/tutorials/monorepos). It consists of two main projects: **shared** and **vue**, both located under `packages` folder.

```
storefrontUI
|__/packages
  |__/shared
  |__/vue
```

- **shared** - Contains all CSS stylings of components and icons used within StorefrontUI. This is to ensure design consistency between our future projects.

- **vue** - This is the main project that contains main Storefront UI Vue components code in `src`, storybook config in `config`, customized scripts in `scripts` and main documentation written in [vuepress](https://vuepress.vuejs.org) will be found in `docs`.

```
./vue
|__/config
|__/docs
|__/scripts
|__/src
```

We selected this strategy to enable the reusability of resources between future extension to other frameworks such as React.js.

## Ways of contribution

<div class="alert warning" style={{ marginTop: "1rem" }}>
  <h5>WORK WITH GITHUB</h5>
  <p>
    StorefrontUI is a Github repository. If you are new to Github, please check{" "}
    <a href="?path=/story/contributing-guide-guide-working-with-github--page">our Github guidelines</a> for instructions.
  </p>
</div>

Anything for a better StorefrontUI and building the community is considered contributions 😉, which include:

### Contribute Code

We have a lot of features that need a good helping hand, as always. However, there are coding rules you need to follow, for maintaining readability and for us to process your pull request as quickly as possible. Please read [our code contributing guide](?path=/story/contributing-guide-guide-code-guidelines--page).

Then you'll be ready to [pick your first issue](https://github.com/DivanteLtd/storefront-ui/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) and contribute to [StorefrontUI](https://github.com/DivanteLtd/storefront-ui) core repository.

<div class="alert tip">
  <h5>DON'T KNOW WHICH ISSUE TO SELECT?</h5>
  <p>
    We <b>have our issues labelled</b> to make it easier in selecting an issue
    to work with. You can also check{" "}
    <a href="?path=/story/contributing-guide-guide-working-with-github--page#3-select-a-github-issue">
      our labels system
    </a>{" "}
    for more information.
  </p>
</div>

### Report a bug or request a feature

Our goal is to make StorefrontUI customisable as much as possible. Hence issue reporting, either a bug or a feature request, is extremely valuable to us.

In order to maintain an effective workflow and make sure all issues reported will be solved, we'd like you to follow [some simple guidelines](?path=/story/contributing-guide-guide-how-to-report-an-issue--page).

If you are sure your issue is a bug, or a valid feature request, [file a new issue in our Github issue tracker](https://github.com/vuestorefront/storefront-ui/issues/new/choose) following the [template](?path=/story/contributing-guide-guide-how-to-report-an-issue--page#issue-template) and guidelines.

### Work on Documentation

Good and friendly documentation is **extremely significant** for our community, for every reason. Currently, we have lots of work needed to be done on this matter. Would you like to help us a hand to build the best documentation? 😉

StorefrontUI aims to be an international community, with the core team coming from different timezones across the globe. Thus, we are actively looking for contributors on the following:

- **Translating docs** into different languages. We do want you to be able to read this section in your preferred language. And that surely needs some help!

- **Review** our documentation Pull Requests.

- **Fix current documentation** (on dictation error, word usage, etc)

- **Write documentation** for our components, or [select a docs issue](https://github.com/DivanteLtd/storefront-ui/issues?q=is%3Aopen+is%3Aissue+label%3Adocs) to start.

<div class="alert warning">
  <h5>WORK WITH DOCUMENTATION</h5>
  <p>
    Certainly, make sure you read and follow{" "}
    <a href="?path=/story/contributing-guide-guide-documentation-guidelines--page">our documentation guidelines</a> for instructions.
  </p>
</div>

### Spread the words

There is a lot more you can help StorefrontUI community grow besides the above:

- **Write and publish blog posts** about StorefrontUI best practices, use cases. If you like StorefrontUI, why not share it to the world?

- **Talk** about how awesome StorefrontUI is to you in a conference, meetup or simple at your work 😉.

- **Integrate** StorefrontUI with other awesome frameworks, such as Nuxt.js, Gridsome.js. Write a StorefrontUI plugin for any of the frameworks you work with, and we will love to add it to our ecosystem.

If you have any question on how you can be more involved in contributing other than these, reach out to us [@StorefrontUI](https://twitter.com/StorefrontUI) or in [our Discord Server](https://discord.com/invite/TJpdzzN6q5)