uiengine.config.js

module.exports = {
  // Project config: Defaults to name and version from package.json.
  // Here you can overwrite it and add more custom properties.
  // For a detailed documentation of all the options in here see
  // https://github.com/dennisreimann/uiengine/blob/master/docs/config.md
  name: 'Tasty BBQ',
  logo: '/images/uiengine-intro.png',
  copyright: 'Copyright © Dennis Reimann. <a href="https://github.com/dennisreimann/uiengine">Generated with UIengine</a>.',
  debug: true,

  // Base directories for the input, your raw source files:
  // - components is the root of the directory containing the components
  // - templates contains the variant preview and application templates
  // - pages is the directory of the UIengine's site structure and page markdown files
  // - data contains sample data that can be referenced in variants and pages
  // - entities contains the optional entity definitions for the components
  source: {
    components: ['./components', './page_components'],
    templates: './templates',
    pages: './patternlib'
  },

  // Destination paths for the generated output.
  target: './dist/design-system/',

  // Adapters are used for templating/rendering. Each adapter is a module that gets required
  // and needs to provide functions for setup and rendering. For details see the adapters docs.
  adapters: {
    html: '@uiengine/adapter-html',
    css: './lib/uiengine/css.js',
    js: {
      module: './lib/uiengine/react.js',
      options: {
        babelRegisterModule: '@babel/register',
        babel: {
          presets: [
            '@babel/preset-env',
            '@babel/preset-react'
          ],
          plugins: [
            ['css-modules-transform', {
              // matches webpack css-loader default, which is used by @zeit/next-css.
              // this is necessary, because we are using the styles generated by next.
              generateScopedName: '[hash:base64]'
            }],
            ['@babel/plugin-proposal-decorators', {
              legacy: true
            }],
            '@babel/plugin-proposal-class-properties',
            '@babel/plugin-proposal-export-namespace-from',
            '@babel/plugin-proposal-function-sent',
            '@babel/plugin-proposal-json-strings',
            '@babel/plugin-proposal-numeric-separator',
            '@babel/plugin-proposal-throw-expressions',
            '@babel/plugin-syntax-dynamic-import',
            '@babel/plugin-syntax-import-meta'
          ]
        }
      }
    }
  },

  // Here you can configure the template that the variant preview gets embeded in.
  template: 'uiengine.html',

  ui: {
    base: '/design-system/',
    lang: 'en',
    hljs: 'gruvbox-dark',
    customStylesFile: '/styles/uiengine-customizations.css',
    breakpoints: {
      S: 360,
      M: 640,
      L: 960,
      XL: 1280
    },
    viewports: {
      Phone: {
        width: 360
      },
      Tablet: {
        width: 768
      },
      Desktop: {
        width: 1280
      }
    }
  },

  browserSync: {
    port: 4000,
    open: false,
    server: {
      baseDir: './dist/'
    },
    serveStatic: [
      './public',
      './dist/static'
    ]
  }
}