npm package: @nymbus/coreweb-components
Description: Coreweb web components
Latest version: 0.0.1

# coreweb_components
Coreweb web components

# Requirements
- node v12.8.x+ (dev), or node v10.x (prod)
- npm 6.x+

# Dev mode
- `npm i` - install dependencies

Dev with demo html page
- `npm run start` - Start server with demo project (./demo/index.html) Supported HMR (Hot Module Replacement)

Or dev with storybook
- `npm run build-custom-elements.json` - Generate json for controls and docs from web components. Should be run before build storybook
- `npm run storybook` - Start server with storybook. Develop web components with storybook and HMR

# Production
- `npm run build` - Generate build (./dist/*.min.js)
- `ROLLUP_WATCH=1 npm run build` - Generate non-minified build (./dist/*.js)
- `npm run start:build` - Start server with build files (from ./dist)

# Tests
- `npm run test` - Run tests and generate testresults.stories.mdx

# Bridge
For supporting old widgets (jquery) functionality new components can be used with bridge. Bridge wraps web components to a proxy which forwards jquery widget api call to web component. So web components can be integrated with old configuration and work like jquery widget.

`npm run storybook-bridge` - Start storybook server with STORYBOOK_WITH_BRIDGE=true for bridge supporting

# Git
- `dev` - Branch for all common developers processes
- `master` - Branch must always contains work code. Uses for build
All developers processes goes into dev branch. Before build dev branch merges into master branch. Master branch uses only for builds and must always contain stable project code. New branches can be created from dev branch.

# How to document your components using JSDoc

Here's an example including all supported JSDoc tags. All JSDoc tags are on the the form @tag {type} name - comment and @tag {type} [name=default] - comment.

```js
    /**
    * Here is a description of my web component.
    *
    * @element my-element
    *
    * @fires change - This jsdoc tag makes it possible to document events.
    * @fires submit
    *
    * @attr {Boolean} disabled - This jsdoc tag documents an attribute.
    * @attr {on|off} switch - Here is an attribute with either the "on" or "off" value.
    * @attr [my-attr=default value]
    *
    * @prop {String} myProp - You can use this jsdoc tag to document properties.
    * @prop value
    *
    * @slot - This is an unnamed slot (the default slot)
    * @slot start - This is a slot named "start".
    * @slot end
    *
    * @cssprop --main-bg-color - This jsdoc tag can be used to document css custom properties.
    * @cssprop [--main-color=red]

    * @csspart container
    */
    class MyElement extends HTMLElement {

    /**
    * This is a description of a property with an attribute with exactly the same name: "color".
    * @type {"red"|"green"|"blue"}
    * @attr
    */
    color = "red";

    /**
    * This is a description of a property with an attribute called "my-prop".
    * @type {number}
    * @deprecated
    * @attr my-prop
    */
    myProp = 10

    static get observedAttributes () {
    return [
    /**
       * The header text of this element
    */
    "header"
    ];
    }

    }
```

### Overview of supported JSDoc tags
| JSDoc Tag | Description|
|------------|-------------|
|@element|	Gives your component a tag name. This JSDoc tag is useful if your 'customElements.define` is called dynamically eg. using a custom function.|
|@fires|	Documents events.|
|@slot|	Documents slots. Using an empty name here documents the unnamed (default) slot.|
|@attr or @attribute|	Documents an attribute on your component.|
|@prop or @property|	Documents a property on your component.|
|@cssprop or @cssproperty|	Documents a css custom property on your component.|g
|@csspart|	Documents a css shadow part on your component.|