npm package: @nuskin/profile-components
Description: Storybook for Account and Profile Components
Latest version: 1.1.27

# NPM Vue Components Template

### This template is for creating a Vue components library with Storybook, published to npm

---

### What this template does for you

- Includes Vue and eslint
- Lints and formats project on commit
- Provides Storybook to display and build your components
- Provides a `.gitlab-ci.yml` to manage the CI/CD pipeline
- Runs your _Unit Tests_ with every push to the remote repository
- Analyzes your code with:
  - linting rules
  - run a _SAST_ check
  - Pushes your code coverage analysis to SonarQube
- Ensures your code passes the SonarQube Quality Gate
- Utilizes _Semantic Release_, which means the pipeline will handle versioning
- Publishes your module to _npmjs_

---

### Follow these steps to create a new project using this template:

#### 1. Clone this project to your local machine and remove the git control file

Note: We use 'my-project' as the name of your new project

```bash
git clone git@code.tls.nuskin.io:ns-am/templates/vue-components-template.git <my-project>
cd <my-project>
rm -rf .git
```
#### 3. Connect your local project to the gitlab remote project

You can copy and paste the section in the gitlab command line instructions of your new
project into the command line of your local project. It will look like the following
but will have your project specific details.

Note: You must be at least a 'Maintainer' of the project to do this step.

```bash
cd <your project folder if you are not already there>
git init
git remote add origin <your gitlab project url>
git add .
git commit -m "Chore: Initial commit"
git push -u origin master
```

#### 4. Add rules to your new project repository

- Under _Settings_ Select _Repository_
  - Select _Push Rules_ ([See Sample](./push-rules.png))
    1. Check _Do not allow users to remove git tags with `git push`_
  - Click on **Expand** in the _Protected Branches_ section ([See Sample](./protected-branches.png))
    - **master** should already be set as your default branch. For **master** do the following:
      1. Set _Allowed to merge_ to **Developers + Maintainers**
      2. Set _Allowed to push_ to **Maintainers**
      3. Set _Code owner approval_ to **Off**

#### 5. Update your new project with your project specific settings and information

1. Update `sonar-project.properties` file. Replace `<project>` with your project's name in 2 places.
2. Update the `README.md` at `src/README.md` with a proper readme that will be displayed on _npmjs_ ([See Sample](./src/README.md))
3. Replace this `README.md` with a proper readme for your fellow developers. ([See README-sample](./README-sample.md))
4. Update these settings in your `package.json`:

- Note: All module names should be created in the _@nuskin_ namespace.

```JavaScript
{
  "name": "@nuskin/<project>-components",
  "description": "The description that will amaze and astound your audience when they read it",
  "repository": {
    "type": "git",
    "url": "git@code.tls.nuskin.io:ns-am/ux/<project>-components.git"
  },
  "author": "Your Name <activedirectory@nuskin.com>",
  "homepage": "https://code.tls.nuskin.io/ns-am/ux/<project>-components/blob/master/README.md"
}
```

#### 6. Turning on your CI/CD pipeline

Once you are ready for your project to start running the CI/CD pipeline, you should rename the `gitlab-ci.yml`
to `.gitlab-ci.yml`.

```bash
git mv gitlab-ci.yml .gitlab-ci.yml
git commit -am "Chore: renaming gitlab-ci.yml to .gitlab-ci.yml so my pipeline runs"
git push
```

## TODO: Write documentation about Semantic Release (don't forget prereleases)

#### How to use Semantic Release in your pipeline

Link to another page or write up instructions on how Semantic Release works with the pipeline

[eslint commit-analyzer](https://github.com/conventional-changelog/conventional-changelog/tree/master/packages/conventional-changelog-eslint) rules.