npm package: @smiledirectclub/sds-vue
Description: Consumable Vue Components made with Smile Design System.
Latest version: 0.0.7

# sds-vue

Consumable Vue Components made with Smile Design System.

## Consuming and Using SDS Vue Components

### NPM

Install from NPM

```
npm install @smiledirectclub/sds-vue
```
#### Import the whole component library

After installing the `@smiledirectclub/sds-vue` node module, you can import the entire component library into your Vue app by using the below import statement and `Vue.use()` function:

```js
import SDSVueComponents from "@smiledirectclub/sds-vue/src/main.js";

// This must be somewhere after your import statement
Vue.use(SDSVueComponents);
```

NOTE: You need activate the imported components with the `Vue.use(SDSVueComponents)` statement above.


#### Import individual components

Coming soon.


### CDN

Coming soon.

---
## Creating a new component

Vue components live in the `sds-vue/src/components/` directory. 

Creating a new component requires a component directory with at least 3 files in it: 

* `component-name/` 
  * `index.js`
  * `component-name.vue`
  * `component-name.md`

NOTE: You should replace anywhere you see `ComponentName` or `component-name` with the actual name of your component.

### `index.js`
The `index.js` should look like this: 

```js
import SdsComponentName from './component-name.vue'

export default SdsComponentName
```

### `component-name.vue`

The `component-name.vue` should look like this: 

```html
<template>
  <div>
    <!-- Custom Component template/HTML here -->
  </div>
</template>

<script>
  import '@smiledirectclub/sds-css/dist/sds-css--all.css';

  export default {
    name: 'SdsComponentName'
  }
</script>
```

After these two files are created in their `component-name/` directory, add an export statment to the `components/index.js` file:

```js
export { default as SdsComponentName } from './component-name/index.js'
```

### `component-name.md`

This markdown file should contain the documentation for how to use your new Vue component.


---

## Adding a Story (Storybook)

After you've set up your new component, you will want to be able to view it and use Storybook as you develop. 

NOTE: You should be replacing anywhere you see `ComponentName` or `component-name` with the actual name of your component.

### Story File
Create new stories in `stories/components/component-name.js`

The base template should look like: 

```js
import Vue from 'vue';
import { storiesOf } from '@storybook/vue';
import SdsComponentName from '../../src/main.js';

Vue.use(SdsComponentName);

storiesOf('Components / Component Name ', module)
  .add('Component Variant Here', () => '<sds-component-name></sds-component-name>')
```

### Config File

You will also need to add your new story to the Storybook Config that is located at `.storybook/config.js`.

You will see a `loadStories()` function that contains multiple `require` statements. Add one for your component there.

```js
function loadStories() {
  // add only the require statement below to the list of other require's in this function
  require('../stories/components/component-name.js');
}
```

You should now be able run `npm run storybook` from the `sds-vue/` directory to see your component in Storybook at `http://localhost:22215/`. It will live update changes as you develop. 

---

## Project setup
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

### Compiles and minifies for production
```
yarn run build
```

### Run your tests
```
yarn run test
```

### Lints and fixes files
```
yarn run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).