add vueds and renamed it

build/build-system.js

@@ -0,0 +1,48 @@
+"use strict"
+require("./check-versions")()
+
+process.env.NODE_ENV = "production"
+
+const ora = require("ora")
+const rm = require("rimraf")
+const path = require("path")
+const chalk = require("chalk")
+const webpack = require("webpack")
+const config = require("../config")
+const webpackConfig = require("./webpack.system.conf")
+
+const spinner = ora("Building Design System...")
+spinner.start()
+
+rm(path.join(config.system.assetsRoot, config.system.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(
+      stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false,
+      }) + "\n\n"
+    )
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red("  Design System build failed with errors.\n"))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan("  Design System build complete.\n"))
+    console.log(
+      chalk.yellow(
+        "  Tip: You can now publish the design system as a private NPM module.\n" +
+          "  Users can import the provided UMD module using:\n\n" +
+          "  import DesignSystem from 'vue-design-system'\n" +
+          "  import 'vue-design-system/dist/system/system.css'\n\n" +
+          "  Vue.use(DesignSystem)\n"
+      )
+    )
+  })
+})

build/build.js

@@ -0,0 +1,45 @@
+"use strict"
+require("./check-versions")()
+
+process.env.NODE_ENV = "production"
+
+const ora = require("ora")
+const rm = require("rimraf")
+const path = require("path")
+const chalk = require("chalk")
+const webpack = require("webpack")
+const config = require("../config")
+const webpackConfig = require("./webpack.prod.conf")
+
+const spinner = ora("Building Vue Design System for production...")
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, (err, stats) => {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(
+      stats.toString({
+        colors: true,
+        modules: false,
+        children: false,
+        chunks: false,
+        chunkModules: false,
+      }) + "\n\n"
+    )
+
+    if (stats.hasErrors()) {
+      console.log(chalk.red("  Vue Design System build failed with errors.\n"))
+      process.exit(1)
+    }
+
+    console.log(chalk.cyan("  Vue Design System build complete.\n"))
+    console.log(
+      chalk.yellow(
+        "  Tip: built files are meant to be served over an HTTP server.\n" +
+          "  Opening index.html over file:// won't work.\n"
+      )
+    )
+  })
+})

build/check-versions.js

@@ -0,0 +1,55 @@
+"use strict"
+const chalk = require("chalk")
+const semver = require("semver")
+const packageConfig = require("../package.json")
+const shell = require("shelljs")
+function exec(cmd) {
+  return require("child_process")
+    .execSync(cmd)
+    .toString()
+    .trim()
+}
+
+const versionRequirements = [
+  {
+    name: "node",
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node,
+  },
+]
+
+if (shell.which("npm")) {
+  versionRequirements.push({
+    name: "npm",
+    currentVersion: exec("npm --version"),
+    versionRequirement: packageConfig.engines.npm,
+  })
+}
+
+module.exports = function() {
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(
+        mod.name +
+          ": " +
+          chalk.red(mod.currentVersion) +
+          " should be " +
+          chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log("")
+    console.log(chalk.yellow("To use this template, you must update following to modules:"))
+    console.log()
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.log("  " + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}

build/utils.js

@@ -0,0 +1,124 @@
+"use strict"
+const path = require("path")
+const config = require("../config")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const packageConfig = require("../package.json")
+
+exports.assetsPath = function(_path) {
+  const assetsSubDirectory =
+    process.env.NODE_ENV === "production"
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.assetsSystemPath = function(_path) {
+  return path.posix.join(config.system.assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function(options) {
+  options = options || {}
+
+  const cssLoader = {
+    loader: "css-loader",
+    options: {
+      sourceMap: options.sourceMap,
+    },
+  }
+
+  const postcssLoader = {
+    loader: "postcss-loader",
+    options: {
+      sourceMap: options.sourceMap,
+    },
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders(loader, loaderOptions) {
+    const loaders = []
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      loaders.push(MiniCssExtractPlugin.loader)
+    } else {
+      loaders.push("vue-style-loader")
+    }
+
+    loaders.push(cssLoader)
+
+    if (options.usePostCSS) {
+      loaders.push(postcssLoader)
+    }
+
+    if (loader) {
+      loaders.push({
+        loader: loader + "-loader",
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap,
+        }),
+      })
+    }
+
+    return loaders
+  }
+
+  const sassResourcesConfig = {
+    loader: "sass-resources-loader",
+    options: {
+      resources: [
+        path.resolve(__dirname, "../src/assets/tokens/tokens.scss"),
+        path.resolve(__dirname, "../src/assets/tokens/tokens.map.scss"),
+        path.resolve(__dirname, "../src/styles/styles.scss"),
+      ],
+    },
+  }
+
+  const sassOptions = {
+    outputStyle: "compressed",
+  }
+
+  // https://vue-loader.vuejs.org/guide/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)).concat(
+      sassResourcesConfig
+    ),
+    scss: generateLoaders("sass", sassOptions).concat(sassResourcesConfig),
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function(options) {
+  const output = []
+  const loaders = exports.cssLoaders(options)
+
+  for (const extension in loaders) {
+    const loader = loaders[extension]
+    output.push({
+      test: new RegExp("\\." + extension + "$"),
+      use: loader,
+    })
+  }
+
+  return output
+}
+
+exports.createNotifierCallback = () => {
+  const notifier = require("node-notifier")
+
+  return (severity, errors) => {
+    if (severity !== "error") return
+
+    const error = errors[0]
+    const filename = error.file && error.file.split("!").pop()
+
+    notifier.notify({
+      title: packageConfig.name,
+      message: severity + ": " + error.name,
+      subtitle: filename || "",
+      icon: path.join(__dirname, "logo.png"),
+    })
+  }
+}

build/webpack.base.conf.js

@@ -0,0 +1,101 @@
+"use strict"
+const path = require("path")
+const utils = require("./utils")
+const config = require("../config")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const { VueLoaderPlugin } = require("vue-loader")
+
+function resolve(dir) {
+  return path.join(__dirname, "..", dir)
+}
+
+module.exports = {
+  mode: process.env.NODE_ENV === "production" ? config.build.mode : config.dev.mode,
+  context: path.resolve(__dirname, "../"),
+  entry: {
+    app: "./src/main.js",
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: "[name].js",
+    publicPath:
+      process.env.NODE_ENV === "production"
+        ? config.build.assetsPublicPath
+        : config.dev.assetsPublicPath,
+  },
+  resolve: {
+    extensions: [".js", ".vue", ".json"],
+    alias: {
+      vue$: "vue/dist/vue.esm.js",
+      "@": resolve("src"),
+    },
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: "vue-loader",
+        options: {
+          cacheBusting: config.dev.cacheBusting,
+          transformAssetUrls: {
+            video: ["src", "poster"],
+            source: "src",
+            img: "src",
+            image: "xlink:href",
+          },
+        },
+      },
+      {
+        test: /\.js$/,
+        loader: "babel-loader",
+        include: [
+          resolve("docs"),
+          resolve("src"),
+          resolve("test"),
+          resolve("node_modules/webpack-dev-server/client"),
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif)(\?.*)?$/,
+        loader: "url-loader",
+        options: {
+          limit: 10000,
+          name: utils.assetsPath("img/[name].[hash:7].[ext]"),
+        },
+      },
+      {
+        test: /\.svg$/,
+        loader: "html-loader",
+      },
+      {
+        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
+        loader: "url-loader",
+        options: {
+          limit: 10000,
+          name: utils.assetsPath("media/[name].[hash:7].[ext]"),
+        },
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: "url-loader",
+        options: {
+          limit: 10000,
+          name: utils.assetsPath("fonts/[name].[hash:7].[ext]"),
+        },
+      },
+    ],
+  },
+  plugins: [new VueLoaderPlugin(), new MiniCssExtractPlugin("style.css")],
+  node: {
+    // prevent webpack from injecting useless setImmediate polyfill because Vue
+    // source contains it (although only uses it if it's native).
+    setImmediate: false,
+    // prevent webpack from injecting mocks to Node native modules
+    // that does not make sense for the client
+    dgram: "empty",
+    fs: "empty",
+    net: "empty",
+    tls: "empty",
+    child_process: "empty",
+  },
+}