Initial Commit

praella-agency · Jul 22, 2020 · 33b79de · 33b79de
commit 33b79de
Show file tree

Hide file tree

Showing 115 changed files with 2,978 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Bao Ho
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,35 @@
+# Polaris Vue
+
+Polaris Vue by HulkApps is a component library for [Vue.js](https://vuejs.org/) based on [Shopify Polaris style guide](https://polaris.shopify.com/).
+
+## Documentation
+
+You could browse [online documentation here](https://coming-soon/).
+
+## Quick start
+
+You need [Vue.js](https://vuejs.org/) **version 2+**.
+
+### 1. Install via npm
+
+```bash
+npm i @hulkapps/polaris-vue
+```
+
+### 2. Import and use Polaris Vue
+
+```javascript
+import Vue from 'vue';
+import PolarisVue from '@hulkapps/polaris-vue';
+import '@hulkapps/polaris-vue/dist/polaris-vue.css';
+
+Vue.use(PolarisVue);
+```
+
+## Contributing
+
+If you notice any bugs, please create issues. Also, pull requests are welcome.
+
+## License
+
+Code released under [MIT](https://github.com/hgb123/polaris-vue/blob/master/LICENSE) license.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset',
+    '@vue/babel-preset-jsx',
+  ],
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "@hulkapps/polaris-vue",
+  "description": "Shopify's product component library for Vue.js",
+  "private": false,
+  "author": "HulkApps <[email protected]>",
+  "repository": "https://github.com/Hulk-App/polaris-vue.git",
+  "bugs": {
+    "url": "https://github.com/Hulk-App/polaris-vue/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "shopify",
+    "polaris",
+    "vue",
+    "components",
+    "component library"
+  ],
+  "license": "MIT",
+  "version": "1.0.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "build-bundle": "vue-cli-service build --target lib --name polaris-vue ./src/components/index.js"
+  },
+  "main": "./dist/polaris-vue.common.js",
+  "dependencies": {
+    "@vue/babel-helper-vue-jsx-merge-props": "^1.0.0",
+    "@vue/babel-preset-jsx": "^1.1.1",
+    "core-js": "^3.3.2",
+    "vue": "^2.6.10",
+    "vue-class-component": "^7.0.2",
+    "vue-property-decorator": "^8.3.0"
+  },
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js"
+  ],
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^4.0.0",
+    "@vue/cli-plugin-typescript": "^4.0.0",
+    "@vue/cli-service": "^4.0.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.0",
+    "typescript": "~3.5.3",
+    "vue-template-compiler": "^2.6.10"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  plugins: {
+    autoprefixer: {}
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>@upatra/polaris-vue</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but upatra-polaris-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,46 @@
+<template>
+  <div id="app">
+    <FormExample/>
+    <StructureExample/>
+    <ActionsExample/>
+    <TitlesAndTextExample/>
+    <FeedbackIndicatorsExample/>
+    <ListsAndTablesExample/>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+
+import {
+  ActionsExample,
+  StructureExample,
+  FormExample,
+  TitlesAndTextExample,
+  FeedbackIndicatorsExample,
+  ListsAndTablesExample,
+} from '@/examples';
+
+@Component({
+  components: {
+    StructureExample,
+    ActionsExample,
+    FormExample,
+    TitlesAndTextExample,
+    FeedbackIndicatorsExample,
+    ListsAndTablesExample,
+  },
+})
+export default class App extends Vue {}
+</script>
+
+<style lang="scss">
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  // text-align: center;
+  color: #2c3e50;
+  padding: 80px;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/shopify-polaris-icons/images/cancel-small_minor.ts b/src/assets/shopify-polaris-icons/images/cancel-small_minor.ts
@@ -0,0 +1 @@
+export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/circle-alert_major_twotone.ts b/src/assets/shopify-polaris-icons/images/circle-alert_major_twotone.ts
@@ -0,0 +1 @@
+export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="currentColor" cx="10" cy="10" r="9"/><path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-13a1 1 0 0 0-1 1v4a1 1 0 1 0 2 0V6a1 1 0 0 0-1-1m0 8a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/circle-disabled_major_twotone.ts b/src/assets/shopify-polaris-icons/images/circle-disabled_major_twotone.ts
@@ -0,0 +1 @@
+export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="currentColor" cx="10" cy="10" r="9"/><path d="M2 10c0-1.846.635-3.543 1.688-4.897l11.209 11.209A7.954 7.954 0 0 1 10 18c-4.411 0-8-3.589-8-8m14.312 4.897L5.103 3.688A7.954 7.954 0 0 1 10 2c4.411 0 8 3.589 8 8a7.952 7.952 0 0 1-1.688 4.897M0 10c0 5.514 4.486 10 10 10s10-4.486 10-10S15.514 0 10 0 0 4.486 0 10"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/circle-information_major_twotone.ts b/src/assets/shopify-polaris-icons/images/circle-information_major_twotone.ts
@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="currentColor"/><path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m1-5v-3a1 1 0 0 0-1-1H9a1 1 0 1 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2m-1-5.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/circle-tick_major_twotone.ts b/src/assets/shopify-polaris-icons/images/circle-tick_major_twotone.ts
@@ -0,0 +1 @@
+export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="currentColor" cx="10" cy="10" r="9"/><path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m2.293-10.707L9 10.586 7.707 9.293a1 1 0 1 0-1.414 1.414l2 2a.997.997 0 0 0 1.414 0l4-4a1 1 0 1 0-1.414-1.414"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/flag_major_twotone.ts b/src/assets/shopify-polaris-icons/images/flag_major_twotone.ts
@@ -0,0 +1 @@
+export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill="currentColor" d="M2 3h11v4h6l-2 4 2 4H8v-4H3"/><path d="M16.105 11.447L17.381 14H9v-2h4a1 1 0 0 0 1-1V8h3.38l-1.274 2.552a.993.993 0 0 0 0 .895zM2.69 4H12v6H4.027L2.692 4zm15.43 7l1.774-3.553A1 1 0 0 0 19 6h-5V3c0-.554-.447-1-1-1H2.248L1.976.782a1 1 0 1 0-1.953.434l4 18a1.006 1.006 0 0 0 1.193.76 1 1 0 0 0 .76-1.194L4.47 12H7v3a1 1 0 0 0 1 1h11c.346 0 .67-.18.85-.476a.993.993 0 0 0 .044-.972l-1.775-3.553z"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/minus_minor.ts b/src/assets/shopify-polaris-icons/images/minus_minor.ts
@@ -0,0 +1 @@
+export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15 9H5a1 1 0 1 0 0 2h10a1 1 0 1 0 0-2" fill-rule="evenodd"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/select_minor.ts b/src/assets/shopify-polaris-icons/images/select_minor.ts
@@ -0,0 +1 @@
+export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M13 8l-3-3-3 3h6zm-.1 4L10 14.9 7.1 12h5.8z" fill-rule="evenodd"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/images/tick-small_minor.ts b/src/assets/shopify-polaris-icons/images/tick-small_minor.ts
@@ -0,0 +1 @@
+export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M8.315 13.859l-3.182-3.417a.506.506 0 0 1 0-.684l.643-.683a.437.437 0 0 1 .642 0l2.22 2.393 4.942-5.327a.437.437 0 0 1 .643 0l.643.684a.504.504 0 0 1 0 .683l-5.91 6.35a.437.437 0 0 1-.642 0"/></svg>`;
diff --git a/src/assets/shopify-polaris-icons/index.ts b/src/assets/shopify-polaris-icons/index.ts
@@ -0,0 +1,9 @@
+export { default as ArrowUpDownMinor } from './images/select_minor';
+export { default as CancelSmallMinor } from './images/cancel-small_minor';
+export { default as CircleAlertMajorTwotone } from './images/circle-alert_major_twotone';
+export { default as CircleDisabledMajorTwotone } from './images/circle-disabled_major_twotone';
+export { default as CircleInformationMajorTwotone } from './images/circle-information_major_twotone';
+export { default as CircleTickMajorTwotone } from './images/circle-tick_major_twotone';
+export { default as FlagMajorTwotone } from './images/flag_major_twotone';
+export { default as MinusMinor } from './images/minus_minor';
+export { default as TickSmallMinor } from './images/tick-small_minor';
diff --git a/src/components/Example.vue b/src/components/Example.vue
@@ -0,0 +1,20 @@
+<script lang="tsx">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+
+@Component
+export default class Example extends Vue {
+  @Prop(Number) public first!: number;
+
+  public render(h: any) {
+    return (
+      <div>
+        <p>{this.first}helzlo</p>
+        <p>{this.first}helzlo</p>
+        {(this.$slots.default || []).map((item: any) => (
+          <div>{item}</div>
+        ))}
+      </div>
+    );
+  }
+}
+</script>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+    <h3>Installed CLI Plugins</h3>
+    <ul>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
+      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript" target="_blank" rel="noopener">typescript</a></li>
+    </ul>
+    <h3>Essential Links</h3>
+    <ul>
+      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
+      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
+      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
+      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
+      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+    </ul>
+    <h3>Ecosystem</h3>
+    <ul>
+      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
+      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
+      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
+      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
+      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class HelloWorld extends Vue {
+  @Prop() private msg!: string;
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="scss">
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>
diff --git a/src/components/PBadge/PBadge.vue b/src/components/PBadge/PBadge.vue
@@ -0,0 +1,52 @@
+<template>
+  <span :class="className">
+    <span v-if="status" class="Polaris-VisuallyHidden">{{ status }}</span>
+    <span v-if="progress" class="Polaris-Badge__Pip">
+      <span class="Polaris-VisuallyHidden">{{ progress }}</span>
+    </span>
+    <span class="Polaris-Badge__Content">
+      <slot/>
+    </span>
+  </span>
+</template>
+
+<script lang="ts">
+import { Component, Vue, Prop } from 'vue-property-decorator';
+import { classNames, variationName } from '@/utilities/css';
+
+type Status = 'success' | 'info' | 'attention' | 'warning' | 'new';
+type Progress = 'incomplete' | 'partiallyComplete' | 'complete';
+type Size = 'small' | 'medium';
+
+const PROGRESS_LABELS: {[key in Progress]: Progress} = {
+  incomplete: 'incomplete',
+  partiallyComplete: 'partiallyComplete',
+  complete: 'complete',
+};
+
+const STATUS_LABELS: {[key in Status]: Status} = {
+  info: 'info',
+  success: 'success',
+  warning: 'warning',
+  attention: 'attention',
+  new: 'new',
+};
+
+const DEFAULT_SIZE = 'medium';
+
+@Component
+export default class PBadge extends Vue {
+  @Prop(String) public status!: Status;
+  @Prop(String) public progress!: Progress;
+  @Prop({ type: String, default: DEFAULT_SIZE }) public size!: Size;
+
+  public get className() {
+    return classNames(
+      'Polaris-Badge',
+      this.status && `Polaris-Badge--${variationName('status', this.status)}`,
+      this.progress && `Polaris-Badge--${variationName('progress', this.progress)}`,
+      this.size && this.size !== DEFAULT_SIZE && `Polaris-Badge--${variationName('size', this.size)}`,
+    );
+  }
+}
+</script>
diff --git a/src/components/PBadge/index.ts b/src/components/PBadge/index.ts
@@ -0,0 +1,3 @@
+import PBadge from './PBadge.vue';
+
+export { PBadge };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default `<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11.414 10l4.293-4.293a.999.999 0 1 0-1.414-1.414L10 8.586 5.707 4.293a.999.999 0 1 0-1.414 1.414L8.586 10l-4.293 4.293a.999.999 0 1 0 1.414 1.414L10 11.414l4.293 4.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414L11.414 10z" fill-rule="evenodd"/></svg>`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><circle cx="10" cy="10" r="9" fill="currentColor"/><path d="M10 0C4.486 0 0 4.486 0 10s4.486 10 10 10 10-4.486 10-10S15.514 0 10 0m0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8m1-5v-3a1 1 0 0 0-1-1H9a1 1 0 1 0 0 2v3a1 1 0 0 0 1 1h1a1 1 0 1 0 0-2m-1-5.9a1.1 1.1 0 1 0 0-2.2 1.1 1.1 0 0 0 0 2.2"/></svg>`;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import PBadge from './PBadge.vue';

		export { PBadge };