@smiledirectclub/smile-components-vue v0.0.5

Environments

The component library is synced to S3 and files are located in sdc-component-library-qa and sdc-component-library buckets in us-west-1, respectively. Each commit will start the component-library-build which will tests and a dry run of the publish-please command. Once a commit is in master, CodePipeline will set off the component-library-qa codebuild project which syncs to QA. Then after approval, the component-library-publish syncs to prod S3 website and publishes to artifactory (TBA)

• QA Environment: http://sdc-component-library-qa.s3-website-us-west-1.amazonaws.com
• Prod Environment: http://sdc-component-library.s3-website-us-west-1.amazonaws.com

Install Requirements:

1. Download Node and Npm
2. Download Vue CLI
   • Globally instal Vue CLI: npm install -g @vue/cli
   • Verify installation: vue --version

Running Storybook with the component library:

1. Download the repository
2. Navigate to local repository folder
3. run command "npm install"
4. run command "npm run serve:storybook"

Using the Component Library in an application:

1. Set your npm registry to the SDC artifactory instance
   • run "npm config set registry https://smiledirectclub.myget.org/F/engineering/auth/e4bbd3b0-69cd-4752-916a-891e3a88ef0a/npm/"
   • run "npm config get registry" to verify it has changed
2. In your local application root folder run "npm install --save-dev sdc-component-library"

3. Adding Library components to your project

   • To Install the library globally, in your main.js file add:

     	```
     	import ComponentLibrary from 'sdc-component-library';
     	import 'sdc-component-library/dist/sdc.css';
     	Vue.use(ComponentLibrary);
     	```

   • Or install specific components in individual files - install css file in main.js

     		```
     		import 'sdc-component-library/dist/sdc.css';
     		```
     	- Then use in individual files (Example for pulling in a sdc-button):
     		```
     		<template>
     			<div>
     				<sdc-button>I'm a Button</sdc-button>
     			</div>
     		</template>
     
     		<script lang="ts">
     		import Vue from 'vue';
     		import { SdcButton } from 'sdc-component-library';
     
     		export default Vue.extend({
     			name: 'AwesomeExampleComponent',
     			components: { SdcButton }
     		});
     		</script>
     		```
     	- if you run into a typescript "sdc-component-library' is not a module error, then specify the following in the shims-vue.d.ts to declare the module so typescript knows about it.
     	```
     	declare module 'sdc-component-library';
     	```

4. Start using the component library!

Linking local component-library to your local application for development

Sometimes, you will want to test integration between the component library and your local application to make sure that the changes you have made are as expected. This will prevent making multiple PRs since you can test props and nested components before publishing either service. To do this, you can use "npm link"

1. Go into the directory of the component-library in the terminal and type "npm link".
2. In your open local application, type "npm link sdc-component-library". This tells your app to connect the npm package to the local one on your machine, rather than a registry.
3. Note, your local application may differ in terms of linting rules or have webpack import issues that you will have to resolve. For example, when using local component-library in location-service, the following changes were needed in the location-service:

• set vue.config.js to

configureWebpack: {
	resolve: {
		symlinks: false}
	}
}

in to resolve importing the component library locally

• set eslintrc.js to

overrides: [{
	files:[
		'\**/sdc-component-library/** '
	]
}]

to ignore the library in eslint.

4. When you are finished, run "npm unlink --no-save sdc-component-library" in your project to remove the local link, and "npm unlink" in the sdc-component-library directory to remove the global symlink.

5. To reuse the npm registry for the library in your application, you may need to run 'npm install --save sdc-component-library'

For more information about npm link: https://medium.com/@alexishevia/the-magic-behind-npm-link-d94dcb3a81af

Helpful Things:

Chrome extension for Vue.js: https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd

To update snapshot tests after reviewing them run the command 'npm run test:unit -- -u'