iris-ui-adapter v0.0.0

Iris - UJET Adapter Component Library

Getting Started

Before running the styleguide, make sure to run npm install in the following directories:

• src/components/drag-n-drop

Scripts

• NOTE: This styleguide requires npm 6 and node 12 or higher
• bash ujet.sh runs the styleguide with the white label service (recommended)
• start runs the static html page, reloading on file changes
• styleguide builds and runs the style guide
• styleguide-angularjs builds and runs an AngularJS sandbox

Tooling configs

For most of the tools, the configuration is in the package.json to reduce the amount of files in your project.

Build & publish a component

1. From the root directory of the project (ujet-fe-ui-component/) run build (builds all the components) or build:component-name (builds the specific component)
2. The previous process will generate a build folder, under this folder you will find all the bundled files Run cd build/component-name
3. Run npm publish (make sure you've previously configured a Github token)

NOTE: Make sure you bump the version before publishing the library, if you don't change the version and there was a package published before with the same version it won't publish your changes.

Hooking a new component into the build process

1. Under the new component folder create a file called rollup.config.js with the following content:

import common from '../../../rollup.common.config'
import copy from 'rollup-plugin-copy'

const copyConfig = {
  targets: [{ src: 'src/components/{{component-name}}/package.json', dest: 'build/{{component-name}}' }]
}
const mergedConfig = Object.assign({
  input: ['src/components/{{component-name}}/{{component-name}}.lit.js'],
  output: {
    file: 'build/{{component-name}}/{{component-name}}.lit.js',
    format: 'es'
  }
}, common)
mergedConfig.plugins.push(copy(copyConfig))

export default mergedConfig

2. Replace all the ocurrences of {{component-name}} with the name of your component
3. Modify the root package.json and add a script for building your new component:

    "build:component-name": "rollup -c ./src/components/component-name/rollup.config.js",

4. Finally append this command to the existing build command

    "build": "... &&& npm run build:component-name",

FAQ

Q: I keep getting "TypeError: url_1.pathToFileURL is not a function" when trying to run the styleguide. What's the issue?

A: Use node v12 or higher.