npm - @factoringplus/pl-components-pack-v3 - Versions diffs - 0.1.0 - Mend

@factoringplus/pl-components-pack-v3 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 (44) hide show

package/.eslintrc.js +17 -0
package/README.md +24 -0
package/babel.config.js +5 -0
package/dist/@factoringplus/pl-components-pack-v3.common.js +996 -0
package/dist/@factoringplus/pl-components-pack-v3.common.js.map +1 -0
package/dist/@factoringplus/pl-components-pack-v3.css +1 -0
package/dist/@factoringplus/pl-components-pack-v3.umd.js +1006 -0
package/dist/@factoringplus/pl-components-pack-v3.umd.js.map +1 -0
package/dist/@factoringplus/pl-components-pack-v3.umd.min.js +8 -0
package/dist/@factoringplus/pl-components-pack-v3.umd.min.js.map +1 -0
package/dist/demo.html +10 -0
package/entry.js +37 -0
package/package-lock.json +20696 -0
package/package.json +69 -0
package/public/favicon.ico +0 -0
package/public/index.html +17 -0
package/src/App.vue +6 -0
package/src/assets/logo.png +0 -0
package/src/components/pl-currency/src/pl-currency.vue +47 -0
package/src/main.js +13 -0
package/src/router/index.js +16 -0
package/src/store/index.js +12 -0
package/src/stories/Button.stories.js +52 -0
package/src/stories/Button.vue +53 -0
package/src/stories/Header.stories.js +28 -0
package/src/stories/Header.vue +54 -0
package/src/stories/Introduction.stories.mdx +211 -0
package/src/stories/Page.stories.js +30 -0
package/src/stories/Page.vue +79 -0
package/src/stories/assets/code-brackets.svg +1 -0
package/src/stories/assets/colors.svg +1 -0
package/src/stories/assets/comments.svg +1 -0
package/src/stories/assets/direction.svg +1 -0
package/src/stories/assets/flow.svg +1 -0
package/src/stories/assets/plugin.svg +1 -0
package/src/stories/assets/repo.svg +1 -0
package/src/stories/assets/stackalt.svg +1 -0
package/src/stories/button.css +30 -0
package/src/stories/currency-input/pl-currency.stories.js +27 -0
package/src/stories/currency-input/pl-currency.vue +47 -0
package/src/stories/header.css +26 -0
package/src/stories/page.css +69 -0
package/src/views/Home.vue +10 -0
package/vue.config.js +8 -0

package/package.json ADDED Viewed

@@ -0,0 +1,69 @@
+{
+  "name": "@factoringplus/pl-components-pack-v3",
+  "version": "0.1.0",
+  "private": false,
+  "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",
+    "build-library": "vue-cli-service build --target lib --name @factoringplus/pl-components-pack-v3 ./entry.js"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "element-plus": "^2.0.1",
+    "vue": "^3.0.0",
+    "vue-currency-input": "^2.4.0",
+    "vue-router": "^4.0.0-0",
+    "vuex": "^4.0.0-0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.2",
+    "@storybook/addon-actions": "^6.4.18",
+    "@storybook/addon-essentials": "^6.4.18",
+    "@storybook/addon-links": "^6.4.18",
+    "@storybook/vue3": "^6.4.18",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-plugin-vuex": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-airbnb": "^5.0.2",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.3",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-vue": "^7.0.0",
+    "lint-staged": "^9.5.0",
+    "sass": "^1.26.5",
+    "sass-loader": "^8.0.2",
+    "vue-loader": "^16.8.3"
+  },
+  "gitHooks": {
+    "pre-commit": "lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,vue}": [
+      "vue-cli-service lint",
+      "git add"
+    ]
+  },
+  "description": "## Project setup ``` npm install ```",
+  "main": ".dist/@factoringplus/pl-components-pack-v3.common.js",
+  "repository": {
+    "type": "git",
+    "url": "https://bitbucket.izumfin.com/scm/plat/storybook3.git"
+  },
+  "author": "",
+  "files": [
+    "dist/*",
+    "src/*",
+    "public/*",
+    "*.json",
+    "*.js",
+    "plugins/*"
+  ],
+  "license": "ISC"
+}

package/public/favicon.ico ADDED Viewed

Binary file

package/public/index.html ADDED Viewed

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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><%= 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,6 @@
+<template>
+  <router-view/>
+</template>
+<style lang="scss">
+</style>

package/src/assets/logo.png ADDED Viewed

Binary file

package/src/components/pl-currency/src/pl-currency.vue ADDED Viewed

@@ -0,0 +1,47 @@
+<template>
+  <el-input
+    v-bind="$attrs"
+    ref="inputRef"
+    v-model="innerValue"
+    class="pl-currency">
+    <template #append>
+      <span class="pl-currency__rub-icon">&#x20bd;</span>
+    </template>
+  </el-input>
+</template>
+<script setup>
+import { ref, reactive, watch } from 'vue';
+import { useCurrencyInput } from 'vue-currency-input';
+// eslint-disable-next-line no-unused-vars,no-undef
+const props = defineProps({
+  modelValue: String,
+});
+// eslint-disable-next-line no-undef
+const emit = defineEmits(['update:modelValue']);
+const innerValue = ref(null);
+const options = reactive({
+  currency: 'EUR',
+  currencyDisplay: 'hidden',
+  precision: 2,
+});
+const { inputRef } = useCurrencyInput(options);
+watch(innerValue, (newValue) => {
+  emit('update:modelValue', newValue);
+});
+</script>
+<style lang="scss">
+.pl-currency {
+  width: 30%;
+  &__rub-icon {
+    font-size: 20px;
+    opacity: 0.3;
+  }
+}
+</style>

package/src/main.js ADDED Viewed

@@ -0,0 +1,13 @@
+import { createApp } from 'vue';
+import ElementPlus from 'element-plus';
+import 'element-plus/dist/index.css';
+import ru from 'element-plus/es/locale/lang/ru';
+import App from './App.vue';
+import router from './router';
+import store from './store';
+createApp(App)
+  .use(store)
+  .use(router)
+  .use(ElementPlus, { locale: ru })
+  .mount('#app');

package/src/router/index.js ADDED Viewed

@@ -0,0 +1,16 @@
+import { createRouter, createWebHistory } from 'vue-router';
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: () => import('../views/Home.vue'),
+  },
+];
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+export default router;

package/src/store/index.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex';
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  },
+});

package/src/stories/Button.stories.js ADDED Viewed

@@ -0,0 +1,52 @@
+import MyButton from './Button.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    onClick: {},
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { MyButton },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return { args };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: '<my-button v-bind="args" />',
+});
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

package/src/stories/Button.vue ADDED Viewed

@@ -0,0 +1,53 @@
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+<script>
+import './button.css';
+import { reactive, computed } from 'vue';
+export default {
+  name: 'my-button',
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      validator(value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+  emits: ['click'],
+  setup(props, { emit }) {
+    // eslint-disable-next-line no-param-reassign
+    props = reactive(props);
+    return {
+      classes: computed(() => ({
+        'storybook-button': true,
+        'storybook-button--primary': props.primary,
+        'storybook-button--secondary': !props.primary,
+        [`storybook-button--${props.size || 'medium'}`]: true,
+      })),
+      style: computed(() => ({
+        backgroundColor: props.backgroundColor,
+      })),
+      onClick() {
+        emit('click');
+      },
+    };
+  },
+};
+</script>

package/src/stories/Header.stories.js ADDED Viewed

@@ -0,0 +1,28 @@
+import MyHeader from './Header.vue';
+export default {
+  title: 'Example/Header',
+  component: MyHeader,
+};
+const Template = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { MyHeader },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    // Story args can be spread into the returned object
+    return { ...args };
+  },
+  // Then, the spread values can be accessed directly in the template
+  template: '<my-header :user="user" />',
+});
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {
+  user: null,
+};

package/src/stories/Header.vue ADDED Viewed

@@ -0,0 +1,54 @@
+<template>
+  <header>
+    <div class="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fill-rule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
+        <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
+        <my-button
+          primary
+          size="small"
+          @click="$emit('createAccount')"
+          label="Sign up"
+          v-if="!user" />
+      </div>
+    </div>
+  </header>
+</template>
+<script>
+import './header.css';
+import MyButton from './Button.vue';
+export default {
+  name: 'my-header',
+  components: { MyButton },
+  props: {
+    user: {
+      type: Object,
+    },
+  },
+  emits: ['login', 'logout', 'createAccount'],
+};
+</script>

package/src/stories/Introduction.stories.mdx ADDED Viewed

@@ -0,0 +1,211 @@
+import { Meta } from '@storybook/addon-docs';
+import Code from './assets/code-brackets.svg';
+import Colors from './assets/colors.svg';
+import Comments from './assets/comments.svg';
+import Direction from './assets/direction.svg';
+import Flow from './assets/flow.svg';
+import Plugin from './assets/plugin.svg';
+import Repo from './assets/repo.svg';
+import StackAlt from './assets/stackalt.svg';
+<Meta title="Example/Introduction" />
+<style>{`
+  .subheading {
+    --mediumdark: '#999999';
+    font-weight: 900;
+    font-size: 13px;
+    color: #999;
+    letter-spacing: 6px;
+    line-height: 24px;
+    text-transform: uppercase;
+    margin-bottom: 12px;
+    margin-top: 40px;
+  }
+  .link-list {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 1fr 1fr;
+    row-gap: 10px;
+  }
+  @media (min-width: 620px) {
+    .link-list {
+      row-gap: 20px;
+      column-gap: 20px;
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+  @media all and (-ms-high-contrast:none) {
+  .link-list {
+      display: -ms-grid;
+      -ms-grid-columns: 1fr 1fr;
+      -ms-grid-rows: 1fr 1fr;
+    }
+  }
+  .link-item {
+    display: block;
+    padding: 20px 30px 20px 15px;
+    border: 1px solid #00000010;
+    border-radius: 5px;
+    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+    color: #333333;
+    display: flex;
+    align-items: flex-start;
+  }
+  .link-item:hover {
+    border-color: #1EA7FD50;
+    transform: translate3d(0, -3px, 0);
+    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+  }
+  .link-item:active {
+    border-color: #1EA7FD;
+    transform: translate3d(0, 0, 0);
+  }
+  .link-item strong {
+    font-weight: 700;
+    display: block;
+    margin-bottom: 2px;
+  }
+  .link-item img {
+    height: 40px;
+    width: 40px;
+    margin-right: 15px;
+    flex: none;
+  }
+  .link-item span {
+    font-size: 14px;
+    line-height: 20px;
+  }
+  .tip {
+    display: inline-block;
+    border-radius: 1em;
+    font-size: 11px;
+    line-height: 12px;
+    font-weight: 700;
+    background: #E7FDD8;
+    color: #66BF3C;
+    padding: 4px 12px;
+    margin-right: 10px;
+    vertical-align: top;
+  }
+  .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+  }
+  .tip-wrapper code {
+    font-size: 12px;
+    display: inline-block;
+  }
+`}</style>
+# Welcome to Storybook
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `src/stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+<div className="subheading">Configure</div>
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+<div className="subheading">Learn</div>
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a className="link-item" href="https://storybook.js.org/tutorials/" target="_blank">
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a className="link-item" href="https://github.com/storybookjs/storybook" target="_blank">
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{' '}
+  <code>src/stories/Introduction.stories.mdx</code>
+</div>

package/src/stories/Page.stories.js ADDED Viewed

@@ -0,0 +1,30 @@
+import MyPage from './Page.vue';
+import * as HeaderStories from './Header.stories';
+export default {
+  title: 'Example/Page',
+  component: MyPage,
+};
+const Template = (args) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { MyPage },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    // Story args can be mapped to keys in the returned object
+    return { user: args.user };
+  },
+  // Then, those values can be accessed directly in the template
+  template: '<my-page :user="user" />',
+});
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  // More on composing args: https://storybook.js.org/docs/vue/writing-stories/args#args-composition
+  ...HeaderStories.LoggedIn.args,
+};
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {
+  ...HeaderStories.LoggedOut.args,
+};