@cocreate/config 1.0.0

package/.github/FUNDING.yml

@@ -0,0 +1,3 @@
+# These are supported funding model platforms
+
+github: CoCreate-app

package/.github/workflows/automated.yml

@@ -0,0 +1,123 @@
+name: Automated
+"on":
+    push:
+        branches:
+            - master
+jobs:
+    about:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: setup nodejs
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+            - name: Jaid/action-sync-node-meta
+              uses: jaid/action-sync-node-meta@v1.4.0
+              with:
+                  direction: overwrite-github
+                  githubToken: "${{ secrets.GITHUB }}"
+
+    release:
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: setup nodejs
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 14
+            - name: Semantic Release
+              uses: cycjimmy/semantic-release-action@v3
+              id: semantic
+              with:
+                  extra_plugins: |
+                      @semantic-release/changelog
+                      @semantic-release/git
+                      @semantic-release/github
+              env:
+                  GITHUB_TOKEN: "${{ secrets.GITHUB }}"
+                  NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+        outputs:
+            new_release_published: "${{ steps.semantic.outputs.new_release_published }}"
+            new_release_version: "${{ steps.semantic.outputs.new_release_version }}"
+    cdn:
+        runs-on: ubuntu-latest
+        needs: release
+        if: needs.release.outputs.new_release_published == 'true'
+        env:
+            VERSION: "${{ needs.release.outputs.new_release_version }}"
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: setup nodejs
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+            - name: yarn install
+              run: >
+                  echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
+                  .npmrc
+
+                  yarn install
+            - name: yarn build
+              run: yarn build
+            - name: upload bundle as version
+              uses: CoCreate-app/CoCreate-s3@master
+              with:
+                  aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
+                  aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
+                  bucket: testcrudbucket
+                  source: ./dist
+                  destination: "/config/${{env.VERSION}}"
+                  acl: public-read
+            - name: upload bundle as latest
+              uses: CoCreate-app/CoCreate-s3@master
+              with:
+                  aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
+                  aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
+                  bucket: testcrudbucket
+                  source: ./dist
+                  destination: /config/latest
+                  acl: public-read
+                  invalidations: true
+    upload:
+      runs-on: ubuntu-latest
+
+      steps:
+        - name: Checkout
+          uses: actions/checkout@v3
+
+        - name: Setup Node.js
+          uses: actions/setup-node@v3
+          with:
+            node-version: 16
+
+        - name: Get Environment Variables
+          run: |
+            echo "organization_id=${{ secrets.COCREATE_ORGANIZATION_ID }}" >> $GITHUB_ENV
+            echo "key=${{ secrets.COCREATE_KEY }}" >> $GITHUB_ENV
+            echo "host=${{ secrets.COCREATE_HOST }}" >> $GITHUB_ENV
+
+        - name: Install @cocreate/cli
+          run: npm install -g @cocreate/cli
+
+        - name: CoCreate CLI Upload
+          run: coc upload
+
+    # docs:
+    #     runs-on: ubuntu-latest
+    #     steps:
+    #         - name: Checkout
+    #           uses: actions/checkout@v3
+    #         - name: setup nodejs
+    #           uses: actions/setup-node@v3
+    #           with:
+    #               node-version: 16
+    #         - name: update documentation
+    #           uses: CoCreate-app/CoCreate-docs@master
+    #           env:
+    #             organization_id: ${{ secrets.COCREATE_ORGANIZATION_ID }}
+    #             key: ${{ secrets.COCREATE_KEY }}
+    #             host: ${{ secrets.COCREATE_HOST }}

package/.github/workflows/manual.yml

@@ -0,0 +1,44 @@
+name: Manual Workflow
+on:
+    workflow_dispatch:
+        inputs:
+            invalidations:
+                description: |
+                    If set to 'true', invalidates previous upload.
+                default: "true"
+                required: true
+
+jobs:
+    cdn:
+        runs-on: ubuntu-latest
+        env:
+            DRY_RUN: ${{ github.event.inputs.dry_run }}
+            GITHUB_TOKEN: "${{ secrets.GITHUB }}"
+            NPM_TOKEN: "${{ secrets.NPM_TOKEN }}"
+
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - name: setup nodejs
+              uses: actions/setup-node@v3
+              with:
+                  node-version: 16
+            - name: yarn install
+              run: >
+                  echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" >
+                  .npmrc
+
+                  yarn install
+            - name: yarn build
+              run: yarn build
+            - name: upload latest bundle
+              uses: CoCreate-app/CoCreate-s3@master
+              with:
+                  aws-key-id: "${{ secrets.AWSACCESSKEYID }}"
+                  aws-access-key: "${{ secrets.AWSSECERTACCESSKEY }}"
+                  distributionId: "${{ secrets.DISTRIBUTION_ID }}"
+                  bucket: testcrudbucket
+                  source: ./dist
+                  destination: /config/latest
+                  acl: public-read
+                  invalidations: ${{ github.event.inputs.invalidations }}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# 1.0.0 (2023-06-13)
+
+
+### Features
+
+* Initial release ([570f2c7](https://github.com/CoCreate-app/CoCreate-config/commit/570f2c7180fe25a006d9d971b9f29bce90148229))
+* option variable boolean treats value as a variable that is consumable byt other keys ([963115c](https://github.com/CoCreate-app/CoCreate-config/commit/963115c282a2ab514c6901351c1ac6c3a984e1c8))

package/CONTRIBUTING.md

@@ -0,0 +1,111 @@
+# Contributing to CoCreate-config
+
+This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-config/graphs/contributors).
+You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-config/pulls),
+[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-config/issues).
+
+In the examples below, substitute your Github username for `contributor` in URLs.
+
+## Fork the Project
+
+Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-config) and check out your copy.
+
+```
+git clone https://github.com/contributor/CoCreate-config.git
+cd CoCreate-config
+git remote add upstream https://github.com/CoCreate-app/CoCreate-config.git
+```
+
+## Create a Topic Branch
+
+Make sure your fork is up-to-date and create a topic branch for your feature or bug fix.
+
+```
+git checkout master
+git pull upstream master
+git checkout -b my-feature-branch
+```
+
+## Write Tests
+
+Try to write a test that reproduces the problem you're trying to fix or describes a feature that you want to build.
+Add to [spec](spec).
+
+We definitely appreciate pull requests that highlight or reproduce a problem, even without a fix.
+
+## Write Code
+
+Implement your feature or bug fix.
+
+## Write Documentation
+
+Document any external behavior in the [README](README.md).
+
+## Update Changelog
+
+Add a line to [CHANGELOG](CHANGELOG.md) under _Next Release_.
+Make it look like every other line, including your name and link to your Github account.
+
+## Commit Changes
+
+Make sure git knows your name and email address:
+
+```
+git config --global user.name "Your Name"
+git config --global user.email "contributor@example.com"
+```
+
+Writing good commit logs is important. A commit log should describe what changed and why.
+
+```
+git add ...
+git commit
+```
+
+## Push
+
+```
+git push origin my-feature-branch
+```
+
+## Make a Pull Request
+
+Go to [https://github.com/CoCreate-app/CoCreate-config](https://github.com/CoCreate-app/CoCreate-config) and select your feature branch.
+Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
+
+## Rebase
+
+If you've been working on a change for a while, rebase with upstream/master.
+
+```
+git fetch upstream
+git rebase upstream/master
+git push origin my-feature-branch -f
+```
+
+## Update CHANGELOG Again
+
+Update the [CHANGELOG](CHANGELOG.md) with the pull request number. A typical entry looks as follows.
+
+```
+* [#123](https://github.com/CoCreate-app/CoCreate-industry/pull/123): Reticulated splines - [@contributor](https://github.com/contributor).
+```
+
+Amend your previous commit and force push the changes.
+
+```
+git commit --amend
+git push origin my-feature-branch -f
+```
+
+## Check on Your Pull Request
+
+Go back to your pull request after a few minutes and see whether it passed muster with Travis-CI. Everything should look green, otherwise fix issues and amend your commit as described above.
+
+## Be Patient
+
+It's likely that your change will not be merged and that the nitpicky maintainers will ask you to do more, or fix seemingly benign problems. Hang on there!
+
+## Thank You
+
+Please do know that we really appreciate and value your time and work. We love you, really.

package/CoCreate.config.js

@@ -0,0 +1,25 @@
+module.exports = {
+    "organization_id": "",
+    "key": "",
+    "host": "",
+    "sources": [
+        {
+            "collection": "files",
+            "document": {
+                "_id": "61a12db2a8b6b4001a9f5a2e",
+                "name": "index.html",
+                "path": "/docs/config/index.html",
+                "src": "{{./docs/index.html}}",
+                "host": [
+                    "*",
+                    "general.cocreate.app"
+                ],
+                "directory": "/docs/config",
+                "parentDirectory": "{{parentDirectory}}",
+                "content-type": "{{content-type}}",
+                "public": "true",
+                "website_id": "644d4bff8036fb9d1d1fd69c"
+            }
+        }
+    ]
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 CoCreate LLC
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# CoCreate-action
+
+A convenient chain handler allows user to chain multiple CoCreate components together. When one action is complete next one will start. The sequence goes untill all config completed. Grounded on Vanilla javascript, easily configured using HTML5 attributes and/or JavaScript API. Take it for a spin in our [playground!](https://cocreate.app/docs/config)
+
+![minified](https://img.badgesize.io/https://cdn.cocreate.app/config/latest/CoCreate-config.min.js?style=flat-square&label=minified&color=orange)
+![gzip](https://img.badgesize.io/https://cdn.cocreate.app/config/latest/CoCreate-config.min.js?compression=gzip&style=flat-square&label=gzip&color=yellow)
+![brotli](https://img.badgesize.io/https://cdn.cocreate.app/config/latest/CoCreate-config.min.js?compression=brotli&style=flat-square&label=brotli)
+![GitHub latest release](https://img.shields.io/github/v/release/CoCreate-app/CoCreate-action?style=flat-square)
+![License](https://img.shields.io/github/license/CoCreate-app/CoCreate-action?style=flat-square)
+![Hiring](https://img.shields.io/static/v1?style=flat-square&label=&message=Hiring&color=blueviolet)
+
+![CoCreate-config](https://cdn.cocreate.app/docs/CoCreate-config.gif)
+
+## [Docs & Demo](https://cocreate.app/docs/config)
+
+For a complete guide and working demo refer to the [doumentation](https://cocreate.app/docs/config)
+
+## CDN
+
+```html
+<script src="https://cdn.cocreate.app/config/latest/CoCreate-config.min.js"></script>
+```
+
+```html
+<script src="https://cdn.cocreate.app/config/latest/CoCreate-config.min.css"></script>
+```
+
+## NPM
+
+```shell
+$ npm i @cocreate/config
+```
+
+## yarn
+
+```shell
+$ yarn install @cocreate/config
+```
+
+# Table of Contents
+
+-   [Table of Contents](#table-of-contents)
+-   [Announcements](#announcements)
+-   [Roadmap](#roadmap)
+-   [How to Contribute](#how-to-contribute)
+-   [About](#about)
+-   [License](#license)
+
+<a name="announcements"></a>
+
+# Announcements
+
+All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-config/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-config/releases). You may also subscribe to email for releases and breaking changes.
+
+<a name="roadmap"></a>
+
+# Roadmap
+
+If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreate-config/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-config/pulls). We would love to hear your feedback.
+
+<a name="about"></a>
+
+# About
+
+CoCreate-config is guided and supported by the CoCreate Developer Experience Team.
+
+Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
+
+CoCreate-config is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
+
+<a name="contribute"></a>
+
+# How to Contribute
+
+We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-config/blob/master/CONTRIBUTING.md) guide for details.
+
+We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-config/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-config/pulls) or merely upvote or comment on existing issues or pull requests.
+
+We appreciate your continued support, thank you!
+
+<a name="license"></a>
+
+# License
+
+[The MIT License (MIT)](https://github.com/CoCreate-app/CoCreate-config/blob/master/LICENSE)

package/demo/index.html

@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <title>config | CoCreateJS</title>
+
+        <!-- CoCreate Favicon -->
+        <link
+            rel="icon"
+            href="https://cdn.cocreate.app/favicon.ico"
+            type="image/ico"
+            sizes="16x16" />
+        <link rel="manifest" href="/manifest.webmanifest" />
+    </head>
+    <body>
+        <form>
+            <button
+                type="button"
+                id="id-one"
+                config="timeout(12000), action(#id-two)">
+                click
+            </button>
+        </form>
+        <form>
+            <button
+                type="button"
+                config="timeout(1000), timeout(2000), timeout(5000)">
+                click
+            </button>
+        </form>
+
+        <form>
+            <input render-key="render.company" value="Paper Company" />
+            <button
+                id="id-two"
+                type="button"
+                config="timeout(1000), action(#id-three)"
+                hidden>
+                click
+            </button>
+        </form>
+
+        <form>
+            <input render-key="render.name" value="Micheal Scott" />
+            <button
+                id="id-three"
+                type="button"
+                config="timeout(4000), renderKey"
+                hidden>
+                click
+            </button>
+        </form>
+
+        <!--<script src="../dist/CoCreate-config.js"  ></script>-->
+        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
+    </body>
+</html>

package/docs/index.html

@@ -0,0 +1,383 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <title>CoCreate-config Documentation | CoCreateJS</title>
+        <link
+            rel="icon"
+            type="image/png"
+            sizes="32x32"
+            href="https://cocreate.app/images/favicon.ico" />
+        <meta
+            name="description"
+            content="A convenient chain handler allows user to chain multiple components together. When one config is complete next one will start untill all config completed." />
+        <meta
+            name="keywords"
+            content="helper classes, utility classes, css framework, css library, inline style classes" />
+        <meta name="robots" content="index,follow" />
+        <meta
+            property="og:image"
+            content="https://cdn.cocreate.app/docs/config.png" />
+
+        <!-- CoCreate CSS -->
+        <link
+            rel="stylesheet"
+            href="https://cdn.cocreate.app/latest/CoCreate.min.css"
+            type="text/css" />
+        <link
+            rel="stylesheet"
+            href="/docs/index.css"
+            collection="files"
+            document_id="60888216117c640e7596303f"
+            name="src"
+            type="text/css"
+            save="true" />
+        <link rel="manifest" href="/manifest.webmanifest" />
+    </head>
+
+    <body>
+        <nav
+            class="nav display:flex align-items:center left:0px background:whitesmoke padding-top:10px padding-bottom:10px"
+            content_id="content"
+            scroll="sticky-nav,hide-nav"
+            scroll-up="10"
+            scroll-down="10"
+            collection="files"
+            document_id="60395ef42b3ac232657040fd"
+            name="src"></nav>
+        <sidenav
+            id="menuL"
+            class="position:fixed top:0px left:0px overflow:hidden background:whitesmoke height:100vh width:0px width:300px@xl"
+            resizable
+            resize-target="[content_id='content']"
+            resize-property="margin-left"
+            resize-value="width">
+            <menu
+                collection="files"
+                document_id="603717b07de7fb350ae9fec8"
+                name="src"></menu>
+            <div resize="right"></div>
+        </sidenav>
+        <main
+            class="padding-top:15px padding:15px@lg@xl"
+            content_id="content"
+            id="cocreate-config">
+            <div
+                class="display:flex flex-wrap:wrap justify-content:space-between position:relative margin:10px">
+                <div class="display:flex align-items:center">
+                    <h2>CoCreate-config</h2>
+                </div>
+                <div
+                    class="display:flex align-items:center font-size:20px position:absolute right:0 padding:5px background:white">
+                    <div
+                        class="display:flex align-items:center transition:0.3s padding-left:10px"
+                        share-network="true"
+                        share-text="A convenient chain handler allows user to chain multiple components together. When one config is complete next one will start untill all config completed."
+                        share-title="CoCreate config"
+                        share-height="600"
+                        share-width="700"
+                        share-media="https://cdn.cocreate.app/docs/config.png"
+                        hover="display:block!important"
+                        hover-target=".social-networks">
+                        <div class="display:none social-networks">
+                            <a
+                                class="margin-right:15px"
+                                share-network="twitter"
+                                title="Share on twitter"
+                                ><i
+                                    class="height:20px fill:#505050"
+                                    src="/assets/svg/twitter.svg"></i
+                            ></a>
+                            <a
+                                class="margin-right:15px"
+                                share-network="facebook"
+                                title="Share on Facebook"
+                                ><i
+                                    class="height:20px fill:#505050"
+                                    src="/assets/svg/facebook.svg"></i
+                            ></a>
+                            <a
+                                class="margin-right:15px"
+                                share-network="instagram"
+                                title="Share on instagram"
+                                ><i
+                                    class="height:20px fill:#505050"
+                                    src="/assets/svg/instagram.svg"></i
+                            ></a>
+                        </div>
+                        <a
+                            class="margin-right:15px"
+                            share-network="share"
+                            title="Share on share"
+                            ><i
+                                class="height:20px fill:#505050"
+                                src="/assets/svg/share-alt.svg"></i
+                        ></a>
+                    </div>
+                    <a
+                        class="margin-right:15px"
+                        share-network="share"
+                        title="Share on share"
+                        ><i
+                            class="height:20px fill:#505050"
+                            src="/assets/svg/share-alt.svg"></i
+                    ></a>
+                </div>
+                <a
+                    href="https://github.com/CoCreate-app/CoCreate-config"
+                    target="_blank"
+                    class=""
+                    ><i
+                        class="height:20px fill:#505050"
+                        src="/assets/svg/github.svg"></i
+                ></a>
+            </div>
+
+            <h1
+                class="max-width:500px margin:20px_10px line-height:1.5 font-size:16px font-weight:100">
+                A convenient chain handler allows user to chain multiple
+                CoCreate components together. When one config is complete next
+                one will start. The sequence goes untill all config completed.
+                Grounded on Vanilla javascript, easily configured using HTML5
+                attributes and/or JavaScript API.
+            </h1>
+            <div id="config-section" class="display:flex flex-wrap:wrap">
+                <div
+                    class="flex-grow:1 width:400px width:300px@xs padding:0px_10px margin-top:60px">
+                    <div
+                        id="config-install"
+                        class="border-bottom:1px_solid_lightgrey"
+                        scroll
+                        scroll-intersect="color:dodgerblue"
+                        scroll-target="#config-install-section">
+                        <span
+                            class="display:flex align-items:center width:fit-content"
+                            hover="display:block!important"
+                            hover-target="[href='#config-install']">
+                            <h2 class="padding:5px_0px">Install</h2>
+                            <a
+                                class="margin-left:10px display:none"
+                                href="#config-install"
+                                ><i
+                                    class="height:20px fill:#505050"
+                                    src="/assets/svg/link.svg"></i
+                            ></a>
+                        </span>
+                    </div>
+
+                    <pre><code class="language-bash">npm i @cocreate/config</code></pre>
+                    <p class="padding:10px_0px line-height:1.5">
+                        Or you can use cdn link:
+                    </p>
+                    <pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/config/latest/CoCreate-config.min.js&lt;/script&gt;</code></pre>
+
+                    <div
+                        id="config-usage"
+                        class="margin-top:80px border-bottom:1px_solid_lightgrey"
+                        scroll
+                        scroll-intersect="color:dodgerblue"
+                        scroll-target="#config-usage-section">
+                        <span
+                            class="display:flex align-items:center width:fit-content"
+                            hover="display:block!important"
+                            hover-target="[href='#config-usage']">
+                            <h2 class="padding:5px_0px">Usage</h2>
+                            <a
+                                class="margin-left:10px display:none"
+                                href="#config-usage"
+                                ><i
+                                    class="height:20px fill:#505050"
+                                    src="/assets/svg/link.svg"></i
+                            ></a>
+                        </span>
+                    </div>
+                    <div class="">
+                        <p class="padding:10px_0px line-height:1.5">
+                            This is config usage
+                        </p>
+
+                        <div class="flex-grow:1 min-width:300px width:100%">
+                            <pre><code class="language-html">&lt;div&gt;&lt;/div&gt;</code></pre>
+                        </div>
+                        <p class="padding:10px_0px line-height:1.5">
+                            This is config usage
+                        </p>
+                        <p class="padding:10px_0px line-height:1.5">
+                            This is config usage
+                        </p>
+                    </div>
+
+                    <div
+                        id="config-attributes"
+                        class="margin-top:80px border-bottom:1px_solid_lightgrey"
+                        scroll
+                        scroll-intersect="color:dodgerblue"
+                        scroll-target="#config-attributes-section">
+                        <span
+                            class="display:flex align-items:center width:fit-content"
+                            hover="display:block!important"
+                            hover-target="[href='#config-attributes']">
+                            <h2 class="padding:5px_0px">Attributes</h2>
+                            <a
+                                class="margin-left:10px display:none"
+                                href="#config-attributes"
+                                ><i
+                                    class="height:20px fill:#505050"
+                                    src="/assets/svg/link.svg"></i
+                            ></a>
+                        </span>
+                    </div>
+
+                    <ul class="list-style-type:none">
+                        <li
+                            class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                            <h4>
+                                <span>config</span>
+                                <span class="cocreate-badge success"
+                                    >string</span
+                                >
+                                <span class="cocreate-badge warning"
+                                    >optional</span
+                                >
+                            </h4>
+                            <p>config-attribute</p>
+                        </li>
+                        <li
+                            class="padding:15px_0px border-bottom:1px_solid_lightgrey">
+                            <h4>
+                                <span>config</span>
+                                <span class="cocreate-badge success"
+                                    >string</span
+                                >
+                                <span class="cocreate-badge warning"
+                                    >optional</span
+                                >
+                            </h4>
+                            <p>config-attribute</p>
+                        </li>
+                    </ul>
+                </div>
+
+                <div
+                    class="flex-grow:1 width:300px padding:0px_10px margin-top:60px border-bottom:1px_solid_lightgrey">
+                    <!-- SandBox -->
+                    <div
+                        id="config-demo"
+                        class="border-bottom:1px_solid_lightgrey"
+                        scroll
+                        scroll-intersect="color:dodgerblue"
+                        scroll-target="#config-demo-section">
+                        <span
+                            class="display:flex align-items:center width:fit-content"
+                            hover="display:block!important"
+                            hover-target="[href='#config-demo']">
+                            <h2 class="padding:5px_0px">Demo</h2>
+                            <a
+                                class="margin-left:10px display:none"
+                                href="#config-demo"
+                                ><i
+                                    class="height:20px fill:#505050"
+                                    src="/assets/svg/link.svg"></i
+                            ></a>
+                        </span>
+                    </div>
+
+                    <div
+                        class="position:sticky top:0 padding:15px_0px height:100vh">
+                        <!-- SandBox -->
+                        <div
+                            class="display:flex flex-direction:column position:relative overflow:hidden card border-radius:2px width:auto height:600px margin-top:20px"
+                            id="playground">
+                            <div
+                                id="demo-code"
+                                resizable
+                                class="position:relative height:50%">
+                                <textarea
+                                    type="code"
+                                    lang="html"
+                                    collection="demos"
+                                    document_id=""
+                                    name="demo"
+                                    save="false"
+                                    id="demo"
+                                    class="height:100% width:100% outline:none border:none resize:none padding:5px"></textarea>
+                                <div
+                                    resize="bottom"
+                                    class="background:lightgrey"></div>
+                            </div>
+
+                            <div
+                                id="demo-preview"
+                                class="position:relative overflow:auto background-color:white">
+                                <div class="demopreview padding:20px"></div>
+                            </div>
+
+                            <div
+                                class="font-size:20px position:absolute top:10px right:10px opacity:0.6">
+                                <a
+                                    class="margin-right:10px"
+                                    id="eye"
+                                    show="#eye-slash"
+                                    hide="#eye, #demo-preview"
+                                    toggle="code-height"
+                                    toggle-target="#demo-code"
+                                    ><i
+                                        class="height:18px fill:#505050"
+                                        src="/assets/svg/eye.svg"></i
+                                ></a>
+                                <a
+                                    class="margin-right:10px"
+                                    hidden
+                                    id="eye-slash"
+                                    show="#eye, #demo-preview"
+                                    hide="#eye-slash"
+                                    toggle="code-height"
+                                    toggle-target="#demo-code"
+                                    ><i
+                                        class="height:20px fill:#505050"
+                                        src="/assets/svg/eye-slash.svg"></i
+                                ></a>
+                                <a
+                                    class="margin-right:10px"
+                                    id="code"
+                                    show="#code-slash"
+                                    hide="#code, #demo-code"
+                                    ><i
+                                        class="height:20px fill:#505050"
+                                        src="/assets/svg/code.svg"></i
+                                ></a>
+                                <a
+                                    class="margin-right:10px"
+                                    hidden
+                                    id="code-slash"
+                                    show="#code, #demo-code"
+                                    hide="#code-slash"
+                                    ><i
+                                        class="display:flex height:18px fill:#505050"
+                                        src="/assets/svg/code.svg"></i
+                                ></a>
+                                <a
+                                    class="margin-right:5px"
+                                    fullscreen
+                                    fullscreen-target="#playground"></a>
+                            </div>
+                        </div>
+                        <!-- End SandBox -->
+                    </div>
+                </div>
+            </div>
+            <button
+                href="https://github.com/CoCreate-app/CoCreate-config/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
+                target="_blank"
+                class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
+                <i
+                    class="height:20px fill:#505050"
+                    src="/assets/svg/pencil-alt.svg"></i>
+            </button>
+        </main>
+        <script src="/apikey.js"></script>
+        <script src="https://cdn.cocreate.app/latest/CoCreate.min.js"></script>
+    </body>
+</html>

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@cocreate/config",
+  "version": "1.0.0",
+  "description": "A convenient chain handler allows user to chain multiple CoCreate components together. When one action is complete next one will start. The sequence goes untill all config completed. Grounded on Vanilla javascript, easily configured using HTML5 attributes and/or JavaScript API.",
+  "keywords": [
+    "config",
+    "chain-functions",
+    "cocreate",
+    "low-code-framework",
+    "no-code-framework",
+    "cocreatejs",
+    "cocreatejs-component",
+    "cocreate-framework",
+    "no-code",
+    "low-code",
+    "collaborative-framework",
+    "realtime",
+    "realtime-framework",
+    "collaboration",
+    "shared-editing",
+    "html5-framework",
+    "javascript-framework"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "start": "npx webpack --config webpack.config.js",
+    "build": "NODE_ENV=production npx webpack --config webpack.config.js",
+    "dev": "npx webpack --config webpack.config.js --watch",
+    "postinstall": "node -e \"const { execSync } = require('child_process'); try { execSync('coc --version', { stdio: 'ignore' }); } catch (error) { try { execSync('npm install -g @cocreate/cli', { stdio: 'inherit' }); console.log('Installed \"@cocreate/cli\" globally.'); } catch (error) { console.error('Failed to install \"@cocreate/cli\" globally:', error); } }\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CoCreate-app/CoCreate-config.git"
+  },
+  "author": "CoCreate LLC",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/CoCreate-app/CoCreate-config/issues"
+  },
+  "homepage": "https://cocreate.app/docs/config",
+  "funding": {
+    "type": "GitHub Sponsors ❤",
+    "url": "https://github.com/sponsors/CoCreate-app"
+  },
+  "main": "./src/index.js",
+  "devDependencies": {
+    "@babel/core": "^7.9.6",
+    "@babel/preset-env": "^7.9.6",
+    "babel-loader": "^8.1.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "file-loader": "^6.2.0",
+    "mini-css-extract-plugin": "^1.5.0",
+    "style-loader": "^3.3.1",
+    "terser-webpack-plugin": "^5.1.1",
+    "webpack": "^5.24.4",
+    "webpack-cli": "^4.5.0",
+    "webpack-log": "^3.0.1"
+  },
+  "dependencies": {
+    "@cocreate/cli": "^1.33.8",
+    "@cocreate/utils": "^1.21.14"
+  }
+}

package/release.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  dryRun: false,
+  branches: ["master"],
+  plugins: [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/release-notes-generator",
+    [
+      "@semantic-release/changelog",
+      {
+        changelogFile: "CHANGELOG.md",
+      },
+    ],
+    "@semantic-release/npm",
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        assets: ["CHANGELOG.md", "package.json"],
+      },
+    ],
+  ],
+};

package/src/index.js

@@ -0,0 +1,14 @@
+(function (root, factory) {
+    if (typeof define === 'function' && define.amd) {
+        define(["./client"], function (CoCreateConfig) {
+            return factory(CoCreateConfig)
+        });
+    } else if (typeof module === 'object' && module.exports) {
+        const CoCreateConfig = require("./server.js")
+        module.exports = factory(CoCreateConfig);
+    } else {
+        root.returnExports = factory(root["./client.js"]);
+    }
+}(typeof self !== 'undefined' ? self : this, function (CoCreateConfig) {
+    return CoCreateConfig;
+}));

package/src/server.js

@@ -0,0 +1,136 @@
+const readline = require('readline');
+const os = require('os');
+const path = require('path');
+const fs = require('fs');
+const { dotNotationToObject } = require('@cocreate/utils');
+
+module.exports = async function (items, env = true, global = true) {
+    async function promptForInput(question) {
+        const rl = readline.createInterface({
+            input: process.stdin,
+            output: process.stdout
+        });
+
+        return new Promise((resolve) => {
+            rl.question(question, (answer) => {
+                rl.close();
+                resolve(answer.trim());
+            });
+        });
+    }
+
+    const filterEmptyValues = (obj) => {
+        return Object.fromEntries(
+            Object.entries(obj).filter(([_, value]) => {
+                if (typeof value === 'object' && !Array.isArray(value)) {
+                    return Object.keys(value).length > 0;
+                } else if (Array.isArray(value)) {
+                    return value.length > 0;
+                } else {
+                    return value !== '';
+                }
+            })
+        );
+    };
+
+    let config = {};
+    let update = false;
+    let variables = {};
+
+    async function getConfig(items) {
+        for (let key of Object.keys(items)) {
+            let { value, prompt, choices, variable } = items[key];
+
+            const placeholders = key.match(/{{\s*([\w\W]+?)\s*}}/g);
+            if (placeholders && placeholders.length) {
+                for (let placeholder of placeholders) {
+                    placeholder.trim()
+                    if (variables[placeholder])
+                        key = key.replace(placeholder, variables[placeholder])
+                }
+            }
+
+            if (choices) {
+                if (!prompt && prompt !== '' || !choices) continue;
+                for (let choice of Object.keys(choices)) {
+                    let choiceKey = choices[choice].key
+                    if (process.env[choiceKey]) {
+                        config[choiceKey] = process.env[choiceKey];
+                        return;
+                    } else if (localConfig[choiceKey]) {
+                        config[choiceKey] = localConfig[choiceKey];
+                        return;
+
+                    } else if (globalConfig[choiceKey]) {
+                        config[choiceKey] = globalConfig[choiceKey];
+                        return;
+                    }
+                }
+
+                const answer = await promptForInput(prompt || `${key}: `);
+                const choice = choices[answer];
+                if (choice) {
+                    await getConfig(choice);
+                }
+            } else if (variable) {
+                variables[`{{${key}}}`] = value || await promptForInput(prompt || `${key}: `);
+            } else {
+                // TODO: handle dotnotation
+                if (value || value === "") {
+                    config[key] = value;
+                    if (global)
+                        update = true;
+                } else if (process.env[key]) {
+                    config[key] = process.env[key];
+                } else {
+                    if (localConfig[key]) {
+                        config[key] = localConfig[key];
+                    } else if (globalConfig[key]) {
+                        config[key] = globalConfig[key];
+                    } else if (prompt || prompt === '') {
+                        config[key] = await promptForInput(prompt || `${key}: `);
+                        if (global) update = true;
+                    }
+                    if (env) {
+                        if (typeof config[key] === 'object')
+                            process.env[key] = JSON.stringify(config[key]);
+                        else
+                            process.env[key] = config[key];
+                    }
+                }
+            }
+        }
+    }
+
+    let localConfig = {};
+    const localConfigPath = path.resolve(process.cwd(), 'CoCreate.config.js');
+    if (fs.existsSync(localConfigPath)) {
+        localConfig = require(localConfigPath);
+    }
+
+    let globalConfig = {};
+    const globalConfigPath = path.resolve(os.homedir(), 'CoCreate.config.js');
+    if (fs.existsSync(globalConfigPath)) {
+        globalConfig = require(globalConfigPath);
+    }
+
+    if (items) {
+        await getConfig(items);
+
+        if (update) {
+            let updatedGlobalConfig = filterEmptyValues(
+                dotNotationToObject(config, globalConfig)
+            );
+
+            const globalConfigString = `module.exports = ${JSON.stringify(updatedGlobalConfig, null, 2)};`;
+            fs.writeFileSync(globalConfigPath, globalConfigString);
+        }
+    } else {
+        config = {
+            ...filterEmptyValues(globalConfig),
+            ...filterEmptyValues(localConfig)
+        };
+    }
+
+    return config;
+}

package/webpack.config.js

@@ -0,0 +1,84 @@
+const path = require("path")
+const TerserPlugin = require("terser-webpack-plugin")
+const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+let isProduction = process.env.NODE_ENV === "production"
+const { CleanWebpackPlugin } = require("clean-webpack-plugin")
+
+module.exports = {
+    entry: {
+        "CoCreate-config": "./src/index.js",
+    },
+    output: {
+        path: path.resolve(__dirname, "dist"),
+        filename: isProduction ? "[name].min.js" : "[name].js",
+        libraryTarget: "umd",
+        libraryExport: "default",
+        library: ["CoCreate", "config"],
+        globalObject: "this",
+    },
+
+    plugins: [
+        new CleanWebpackPlugin(),
+        new MiniCssExtractPlugin({
+            filename: "[name].css",
+        }),
+    ],
+    // Default mode for Webpack is production.
+    // Depending on mode Webpack will apply different things
+    // on final bundle. For now we don't need production's JavaScript
+    // minifying and other thing so let's set mode to development
+    mode: isProduction ? "production" : "development",
+    module: {
+        rules: [
+            {
+                test: /.js$/,
+                exclude: /(node_modules)/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        plugins: ["@babel/plugin-transform-modules-commonjs"],
+                    },
+                },
+            },
+            {
+                test: /.css$/i,
+                use: [
+                    { loader: "style-loader", options: { injectType: "linkTag" } },
+                    "file-loader",
+                ],
+            },
+        ],
+    },
+
+    // add source map
+    ...(isProduction ? {} : { devtool: "eval-source-map" }),
+
+    optimization: {
+        minimize: true,
+        minimizer: [
+            new TerserPlugin({
+                extractComments: true,
+                // cache: true,
+                parallel: true,
+                // sourceMap: true, // Must be set to true if using source-maps in production
+                terserOptions: {
+                    // https://github.com/webpack-contrib/terser-webpack-plugin#terseroptions
+                    // extractComments: 'all',
+                    compress: {
+                        drop_console: true,
+                    },
+                },
+            }),
+        ],
+        splitChunks: {
+            chunks: "all",
+            minSize: 200,
+            // maxSize: 99999,
+            //minChunks: 1,
+
+            cacheGroups: {
+                defaultVendors: false,
+            },
+        },
+    },
+}