npm - @magicgol/polyjuice - Versions diffs - 0.1.0 - Mend

@magicgol/polyjuice 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/.gitlab-ci.yml +18 -0
package/.nvmrc +1 -0
package/.storybook/main.js +12 -0
package/.storybook/preview-head.html +4 -0
package/.storybook/preview.js +15 -0
package/README.md +24 -0
package/babel.config.js +5 -0
package/lerna.json +6 -0
package/package.json +59 -0
package/public/favicon.ico +0 -0
package/public/index.html +38 -0
package/src/App.vue +28 -0
package/src/assets/global.css +4 -0
package/src/assets/logo.png +0 -0
package/src/assets/palette.scss +3 -0
package/src/components/form/primary-button/PrimaryButton.stories.js +61 -0
package/src/components/form/primary-button/PrimaryButton.vue +55 -0
package/src/components/form/primary-button/primary-button.scss +27 -0
package/src/components/form/secondary-button/SecondaryButton.stories.js +42 -0
package/src/components/form/secondary-button/SecondaryButton.vue +38 -0
package/src/components/form/secondary-button/secondary-button.scss +16 -0
package/src/components/form/tertiary-button/TertiaryButton.stories.js +42 -0
package/src/components/form/tertiary-button/TertiaryButton.vue +38 -0
package/src/components/form/tertiary-button/tertiary-button.scss +14 -0
package/src/main.js +8 -0

package/.gitlab-ci.yml ADDED Viewed

@@ -0,0 +1,18 @@
+# Sets the docker image for the job
+image: node:latest
+# Sets the stages for the pipeline
+stages:
+  - test
+# Installs the dependencies
+before_script:
+  - npm install
+#👇Adds Chromatic as a job
+chromatic_publish:
+  stage: test
+  script:
+    - npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN
+  only:
+    - master

package/.nvmrc ADDED Viewed

	@@ -0,0 +1 @@
1	+ v16.0.0

package/.storybook/main.js ADDED Viewed

@@ -0,0 +1,12 @@
+module.exports = {
+  'stories': [
+    '../src/**/*.stories.mdx',
+    '../src/**/*.stories.@(js|jsx|ts|tsx)'
+  ],
+  'addons': [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/preset-scss',
+  ],
+  'framework': '@storybook/vue',
+}

package/.storybook/preview-head.html ADDED Viewed

@@ -0,0 +1,4 @@
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
+<link href="https://fonts.googleapis.com/css?family=Ubuntu:500" rel="stylesheet" />

package/.storybook/preview.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+    defaultViewport: 'responsive',
+  },
+}

package/README.md ADDED Viewed

@@ -0,0 +1,24 @@
+# polyjuice
+## Project setup
+```
+npm install
+```
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+### Compiles and minifies for production
+```
+npm run build
+```
+### Lints and fixes files
+```
+npm run lint
+```
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/babel.config.js ADDED Viewed

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package/lerna.json ADDED Viewed

@@ -0,0 +1,6 @@
+{
+  "packages": [
+    "src/components/*"
+  ],
+  "version": "independent"
+}

package/package.json ADDED Viewed

@@ -0,0 +1,59 @@
+{
+  "name": "@magicgol/polyjuice",
+  "version": "0.1.0",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook",
+    "chromatic": "npx chromatic --project-token=process.env.CHROMATIC_PROJECT_TOKEN"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.9",
+    "@storybook/addon-actions": "^6.4.22",
+    "@storybook/addon-essentials": "^6.4.22",
+    "@storybook/addon-links": "^6.4.22",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/vue": "^6.4.22",
+    "@vue/cli-plugin-babel": "~4.5.15",
+    "@vue/cli-plugin-eslint": "~4.5.15",
+    "@vue/cli-service": "~4.5.15",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.4",
+    "babel-preset-vue": "^2.0.2",
+    "chromatic": "^6.5.4",
+    "css-loader": "^5.2.7",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "lerna": "^4.0.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^10.1.1",
+    "style-loader": "^2.0.0",
+    "vue-loader": "^15.9.8",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css"
+      integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
+      crossorigin="anonymous"
+    >
+    <script
+      src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/js/bootstrap.min.js"
+      integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
+      crossorigin="anonymous"
+    ></script>
+    <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><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>

package/src/App.vue ADDED Viewed

@@ -0,0 +1,28 @@
+<template>
+  <div id="app">
+    <img alt="Vue logo" src="./assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+<script>
+import HelloWorld from './components/HelloWorld.vue'
+export default {
+  name: 'App',
+  components: {
+    HelloWorld
+  }
+}
+</script>
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
+</style>

package/src/assets/global.css ADDED Viewed

@@ -0,0 +1,4 @@
+*:focus {
+  outline: none !important;
+  box-shadow: none !important;
+}

package/src/assets/logo.png ADDED Viewed

Binary file

package/src/assets/palette.scss ADDED Viewed

@@ -0,0 +1,3 @@
+$palette: (
+    'brand': #d81159,
+);

package/src/components/form/primary-button/PrimaryButton.stories.js ADDED Viewed

@@ -0,0 +1,61 @@
+import MgPrimaryButton from './PrimaryButton.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Button/Primary Button',
+  component: MgPrimaryButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    type: {
+      control: { type: 'select' },
+      options: ['submit', 'button'],
+      defaultValue: 'button'
+    },
+    size: {
+      control: { type: 'select' },
+      options: ['normal', 'large'],
+      defaultValue: 'normal'
+    },
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgPrimaryButton },
+  template: `<mg-primary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-primary-button>`,
+});
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  type: 'button',
+  default: 'primary button'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  type: 'button',
+  default: 'primary button'
+};
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  type: 'button',
+  default: 'primary button'
+};

package/src/components/form/primary-button/PrimaryButton.vue ADDED Viewed

@@ -0,0 +1,55 @@
+<template>
+  <button
+    class="d-block w-100 rounded text-white text-uppercase"
+    :class="classes"
+    :type="type"
+    :disabled="disabled"
+    @click="onClick"
+  ><slot></slot></button>
+</template>
+<script>
+import './primary-button.scss';
+export default {
+  name: 'mg-primary-button',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    type: {
+      type: String,
+      default: 'button',
+      validator: function (value) {
+        return ['button', 'submit'].indexOf(value) !== -1;
+      },
+    },
+    size: {
+      type: String,
+      default: 'normal',
+      validator: function (value) {
+        return ['large', 'normal'].indexOf(value) !== -1;
+      },
+    }
+  },
+  computed: {
+    classes() {
+      return {
+        'mg-primary-button': true,
+        'mg-primary-button-size-normal': this.size === 'normal',
+        'mg-primary-button-size-large': this.size === 'large',
+        'mg-primary-button--disabled': this.disabled,
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/components/form/primary-button/primary-button.scss ADDED Viewed

@@ -0,0 +1,27 @@
+@import '../../../assets/palette';
+.mg-primary-button {
+  appearance: none;
+  background-color: map-get($palette, 'brand');
+  border: 1px solid map-get($palette, 'brand');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-weight: 500;
+  &-size {
+    &-normal {
+      font-size: 0.8215rem;
+      padding: 0.5rem;
+    }
+    &-large {
+      box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
+      font-size: 1rem;
+      padding: 1rem;
+    }
+  }
+  &--disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+  }
+}

package/src/components/form/secondary-button/SecondaryButton.stories.js ADDED Viewed

@@ -0,0 +1,42 @@
+import MgSecondaryButton from './SecondaryButton.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Button/Secondary Button',
+  component: MgSecondaryButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgSecondaryButton },
+  template: `<mg-secondary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-secondary-button>`,
+});
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  default: 'secondary button'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  default: 'secondary button'
+};

package/src/components/form/secondary-button/SecondaryButton.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<template>
+  <button
+    class="d-block bg-white w-100 p-2 rounded text-uppercase text-center text-decoration-none"
+    :class="classes"
+    :disabled="disabled"
+    @click="onClick"
+  ><slot></slot></button>
+</template>
+<script>
+import './secondary-button.scss';
+export default {
+  name: 'mg-secondary-button',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        'mg-secondary-button': true,
+        'mg-secondary-button--disabled': this.disabled,
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/components/form/secondary-button/secondary-button.scss ADDED Viewed

@@ -0,0 +1,16 @@
+@import '../../../assets/palette';
+.mg-secondary-button {
+  appearance: none;
+  border: 1px solid map-get($palette, 'brand');
+  color: map-get($palette, 'brand');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 0.8215rem;
+  font-weight: 500;
+  &--disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+  }
+}

package/src/components/form/tertiary-button/TertiaryButton.stories.js ADDED Viewed

@@ -0,0 +1,42 @@
+import MgTertiaryButton from './TertiaryButton.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Button/Tertiary Button',
+  component: MgTertiaryButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgTertiaryButton },
+  template: `<mg-tertiary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-tertiary-button>`,
+});
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  disabled: false,
+  default: 'tertiary button'
+};
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  default: 'tertiary button'
+};

package/src/components/form/tertiary-button/TertiaryButton.vue ADDED Viewed

@@ -0,0 +1,38 @@
+<template>
+  <button
+    class="bg-transparent border-0 text-uppercase"
+    :class="classes"
+    :disabled="disabled"
+    @click="onClick"
+  ><slot></slot></button>
+</template>
+<script>
+import './tertiary-button.scss';
+export default {
+  name: 'mg-tertiary-button',
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        'mg-tertiary-button': true,
+        'mg-tertiary-button--disabled': this.disabled,
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/components/form/tertiary-button/tertiary-button.scss ADDED Viewed

@@ -0,0 +1,14 @@
+@import '../../../assets/palette';
+.mg-tertiary-button {
+  color: map-get($palette, 'brand');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  &--disabled {
+    opacity: 0.6 !important;
+    cursor: not-allowed !important;
+  }
+}

package/src/main.js ADDED Viewed

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import App from './App.vue'
+Vue.config.productionTip = false
+new Vue({
+  render: h => h(App),
+}).$mount('#app')