{"id":20631189,"url":"https://github.com/solidlabresearch/solid-sfef-cli","last_synced_at":"2026-04-21T01:31:33.981Z","repository":{"id":220163939,"uuid":"747112588","full_name":"SolidLabResearch/solid-sfef-cli","owner":"SolidLabResearch","description":"Solid Frontend Forms CLI","archived":false,"fork":false,"pushed_at":"2024-02-02T18:30:41.000Z","size":665,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-15T18:47:06.522Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SolidLabResearch.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-23T09:41:08.000Z","updated_at":"2024-04-30T19:40:40.000Z","dependencies_parsed_at":"2024-01-31T17:13:01.441Z","dependency_job_id":"9133b395-9346-4677-95da-4386ff81a90a","html_url":"https://github.com/SolidLabResearch/solid-sfef-cli","commit_stats":null,"previous_names":["solidlabresearch/solid-sfef-cli"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SolidLabResearch/solid-sfef-cli","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fsolid-sfef-cli","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fsolid-sfef-cli/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fsolid-sfef-cli/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fsolid-sfef-cli/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SolidLabResearch","download_url":"https://codeload.github.com/SolidLabResearch/solid-sfef-cli/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fsolid-sfef-cli/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32072953,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-20T21:26:33.338Z","status":"ssl_error","status_checked_at":"2026-04-20T21:26:22.081Z","response_time":94,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T14:11:27.313Z","updated_at":"2026-04-21T01:31:33.962Z","avatar_url":"https://github.com/SolidLabResearch.png","language":"JavaScript","readme":"# Solid FE Form CLI\n\n\u003c!-- TOC --\u003e\n- [Introduction](#introduction)\n- [CLI commands](#commands)\n- [Install](#install)\n- [Usage and examples](#usage)\n  - [Help](#help)\n  - [List shapes available](#usage-list-shapes)\n  - [Set custom CSS styles](#usage-set-custom-styles)\n  - [Create form file and dependencies](#usage-create)\n- [Uninstall](#uninstall)\n- [Changelog](#changelog)\n\u003c!-- TOC --\u003e\n\n\u003cbr/\u003e\n\n## Introduction \u003ca name=\"introduction\"\u003e\u003c/a\u003e\n\nThe Solid Front End Form CLI is meant to help create forms on Vue/Angular frameworks from SHACL (Shapes Constraint Language) files.\n\nThe [```create```](#usage-create) command recreates a ```\u003cform\u003e``` using the rules from a SHACL file on the framework selected.\n\nThe available frameworks are **Vue3** and **Angular2**.\n\nAll outputted form components are created without styles.\n\nFor both frameworks, all [HTML form elements](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements) have been implemented. For each form element, all possible attributes and values have been taken into consideration.\n\nBut, only the ```\u003cinput\u003e``` element is considered in the mapping as of now.\n\nPlease, check ```BASIC_TYPE_MAP``` in ```constants.ts``` for a mapping between ```sh:datatype``` and basic components and its types.\n\nSee [Changelog](#changelog) for the current status of the CLI.\n\n```mermaid\n---\ntitle: The 'create' diagram flow from .ttl shape to the FE 'form' component\n---\nflowchart LR\n    A(SHACL\\n.ttl):::bold\n    B(JSONLD)\n    C(custom\\nJSON)\n    D(form\\ncomponent):::bold\n    E(BasicInput\\nBasicFieldset\\nBasicButton\\nBasicTextarea\\nBasicSelect)\n    A --\u003e B\n    B --\u003e C\n    C --\u003e D\n    subgraph DE[FE framework]\n        D \u003c-. dependecies .-\u003e E\n    end\n    classDef bold stroke-width:3px\n```\n\n\u003cbr/\u003e\n\n## CLI commands \u003ca name=\"commands\"\u003e\u003c/a\u003e\n\n- ```sfef set-custom-css``` :\n    Set up custom CSS classes to be used in the FE form component.\n\n- ```sfef create -f \u003cframework\u003e -s \u003cshape\u003e [-c]``` :\n    Creates the form (following SHACL shape) and required dependencies according to the selected framework.\n\n- ```sfef list-shapes``` :\n    List of available shapes (SHACL .ttl files).\n\n\u003cbr/\u003e\n\n## Install \u003ca name=\"install\"\u003e\u003c/a\u003e\n\n- Solid-sfef-cli is a development CLI tool, it is recommended to install it using ```--global``` parameter. The following commands can be used:\n\n    ```bash\n    npm install @solidlab/solid-sfef-cli --global\n    ```\n\n    or\n\n    ```bash\n    npm i @solidlab/solid-sfef-cli -g\n    ```\n\n- It could also be installed locally as a dev dependency using ```--save-dev``` parameter. The following commands can be used:\n\n    ```bash\n    npm install @solidlab/solid-sfef-cli --save-dev\n    ```\n\n    or\n\n    ```bash\n    npm i @solidlab/solid-sfef-cli -D\n    ```\n\n\u003cbr/\u003e\n\n## Usage and examples\u003ca name=\"usage\"\u003e\u003c/a\u003e\n\n**The current section bash commands are under the assumption that the installation was done globally**.\n\nIf the installation was done **locally** bash commands should be adapted accordingly.\n\ne.g.\n\ninstead of\n\n```bash\nsfef list-shapes\n```\n\nuse\n\n```bash\nnode . list-shapes\n```\n\n### Help \u003ca name=\"help\"\u003e\u003c/a\u003e\n\nUse the help command to print out the commands and parameters available in the CLI tool.\n\n```bash\nsfef help\n```\n\n\u003cbr/\u003e\n\n### Set custom CSS styles \u003ca name=\"usage-set-custom-styles\"\u003e\u003c/a\u003e\n\nDefine some custom CSS classes to be used when creating the form.\n\n```bash\nsfef set-custom-css\n```\n\nThe command asks for CSS classes on:\n\n- ```\u003cform\u003e``` element\n- ```\u003cdiv\u003e``` wrapper around input and label\n- ```\u003clabel\u003e``` element\n- ```\u003cem\u003e``` element which contains additional information bound to the label (```sh:description```)\n- ```\u003cinput\u003e``` element\n\nThe custom classes are stored in the project root under filename **form-custom-classes.json**.\n\nExample of custom CSS classes JSON structure:\n\n```json\n[\n    {\n        \"element\":\"form\",\n        \"classes\":[\"css-custom__form\"]\n    }, {\n        \"element\":\"input-wrapper\",\n        \"classes\":[\"css-custom__wrapper\"]\n    }, {\n        \"element\":\"input-label\",\n        \"classes\":[\"css-custom__label\", \"css-custom__label--bold\"]\n    }, {\n        \"element\":\"input-additional-info\",\n        \"classes\":[\"css-custom__info\"]\n    }, {\n        \"element\":\"input-element\",\n        \"classes\":[\"css-custom__input\", \"css-custom__input--required\"]\n    }\n]\n```\n\n\u003cbr/\u003e\n\n### Create form file and dependencies \u003ca name=\"usage-create\"\u003e\u003c/a\u003e\n\nCreates the form component according to the frame selected (vue or angular) and the shape (.ttl file).\n\nThe ```create``` command has 2 required parameters (```--framework``` and ```--shape```) and 1 optional parameter (```--css```).\n\n```bash\nsfef create --framework \u003cvue/angular\u003e --shape \u003cfileName/Path\u003e\n```\n\nor\n\n```bash\nsfef create -f \u003cvue/angular\u003e -s \u003cfileName/filePath\u003e\n```\n\nWith the optional parameter ```--css```, the component file will include the css classes available in **form-custom-classes.json**.\nThis JSON file needs to be created using the [```set-custom-css```](#usage-set-custom-styles) command.\n\n```bash\nsfef create --framework \u003cvue/angular\u003e --shape \u003cfileName/filePath\u003e --css\n```\n\nor\n\n```bash\nsfef create -f \u003cvue/angular\u003e -s \u003cfileName/filePath\u003e --c\n```\n\nThe shape could be an **absolute path** or a **file name (relative path)**.\nThe relative path refers to the solid-sfef-cli package.\nCheck available .ttl file names using ```sfef list-shapes``` command.\n\nexamples of valid **fileName** values:\n\n- ```'adresregister-SHACL'```\n\n    a .ttl file name from ```'.assets/shacl'``` folder in the cli package.\n\n- ```'/Users/myname/Documents/GIT/myProject/.shapes/my-project-shape.ttl'```\n\n    an absolute path.\n\n\u003cbr/\u003e\n\n#### Vue example\n\n```bash\nsfef create -f vue -s example\n```\n\nExecuting above command will create the ```FormExample.vue``` file in ```src/vue``` folder along with all depency components (```BasicInput.vue``` and ```BasicOption.vue```).\n\nThe ```example.ttl``` includes various input types: ```text```, ```date```, ```email```, ```checkbox``` and ```number```.\n\nBeing ```'Given name'```, ```'Family name'```, ```'Street address'```, ```'house number'``` and ```'Postal code'``` required fields.\n\nThe ```'Genre'``` field uses a ```\u003cdatalist\u003e``` to restrict the options allowed.\n\nFinally ```'Postal code'``` uses a ```regex``` pattern.\n\n```html\n// FormExample.vue\n\u003ctemplate\u003e\n\u003cform id=\"example\" class=\"\"\u003e\n    \u003ch2\u003ePersonShape\u003c/h2\u003e\n    \u003cBasicInput\n        inputType=\"text\"\n        inputId=\"given-name-0-0\"\n        inputName=\"given-name-0-0\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Given name or first name\"\n        inputLabelClass=\"input-label \"\n        :inputRequired=\"true\"\n    /\u003e\n    \u003cBasicInput\n        inputType=\"text\"\n        inputId=\"family-name-0-1\"\n        inputName=\"family-name-0-1\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Family name or surname\"\n        inputLabelClass=\"input-label \"\n        :inputRequired=\"true\"\n    /\u003e\n    \u003cBasicInput\n        inputType=\"date\"\n        inputId=\"birth-date-0-2\"\n        inputName=\"birth-date-0-2\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Birth Date\"\n        inputLabelClass=\"input-label \"\n    /\u003e\n    \u003cBasicInput\n        inputType=\"text\"\n        inputId=\"gender-0-3\"\n        inputName=\"gender-0-3\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Gender\"\n        inputLabelClass=\"input-label \"\n        inputListId=\"list-gender-0-3\"\n        :inputListOptions='[{\"label\":\"Female\",\"value\":\"female\"},{\"label\":\"Male\",\"value\":\"male\"}]'\n    /\u003e\n    \u003cBasicInput\n        inputType=\"email\"\n        inputId=\"email-0-4\"\n        inputName=\"email-0-4\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"E-mail address\"\n        inputLabelClass=\"input-label \"\n    /\u003e\n    \u003cBasicInput\n        inputType=\"checkbox\"\n        inputId=\"receive-newsletter-0-5\"\n        inputName=\"receive-newsletter-0-5\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Receive newsletter\"\n        inputLabelClass=\"input-label \"\n    /\u003e\n    \u003cBasicInput\n        inputType=\"text\"\n        inputId=\"address-0-6\"\n        inputName=\"address-0-6\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Address\"\n        inputLabelClass=\"input-label \"\n    /\u003e\n    \u003ch2\u003eAddressShape\u003c/h2\u003e\n    \u003cBasicInput\n        inputType=\"text\"\n        inputId=\"street-address-1-0\"\n        inputName=\"street-address-1-0\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Street Address\"\n        inputLabelClass=\"input-label \"\n        :inputRequired=\"true\"\n    /\u003e\n    \u003cBasicInput\n        inputType=\"number\"\n        inputId=\"street-number-1-1\"\n        inputName=\"street-number-1-1\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Street Number\"\n        inputLabelClass=\"input-label \"\n        :inputRequired=\"true\"\n    /\u003e\n    \u003cBasicInput\n        inputType=\"text\"\n        inputId=\"postal-code-1-2\"\n        inputName=\"postal-code-1-2\"\n        inputForm=\"example\"\n        inputWrapperClass=\"\"\n        inputClass=\"\"\n        inputLabel=\"Postal Code\"\n        inputLabelClass=\"input-label \"\n        inputAdditionalInfo=\"Type postal code: 2 letters + 4 digits\"\n        inputLabelInfoClass=\"\"\n        :inputRequired=\"true\"\n        inputPattern=\"[a-z A-Z]{2}[0-9]{4}\"\n    /\u003e\n\u003c/form\u003e\n\u003c/template\u003e\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent } from \"vue\"\n\nimport BasicInput from \"./components/BasicInput.vue\"\nexport default defineComponent({\n    name: \"FormExample\",\n    components: {\n        BasicInput,\n    },\n})\n\u003c/script\u003e\n```\n\nWhich will look like:\n\n\u003cimg\n    src=\".assets/images/vue_example_form_no_styling.png\"\n    width=\"400\"\n    alt=\"form without styling\"/\u003e\n\nand with a some minimal styling:\n\n\u003cimg\n    src=\".assets/images/vue_example_form_styling.png\"\n    width=\"400\"\n    alt=\"form with styling\"/\u003e\n\nwhen all fields are filled properly:\n\n\u003cimg\n    src=\".assets/images/vue_example_form_styling_ok.png\"\n    width=\"400\"\n    alt=\"form with styling and filled correctly\"/\u003e\n\n\u003cbr/\u003e\n\n#### Angular example\n\n```bash\nsfef create -f angular -s another-example -c\n```\n\nExecuting above command will create the ```FormAnotherExample.component.html``` and ```FormAnotherExample.component.ts``` file in ```src/app/FormAnotherExample``` folder along with ```BasicInput``` depency component.\n\nThe ```another-example.ttl``` shape includes ```text``` and ```email``` input types.\n\nBeing ```'Given name'```, ```'Family name'```, ```'Country'```, ```'City'```, ```'Street Line'```, ```'Postal code'``` and ```'Organization name'``` required fields.\n\nAs the optional parameter ```-c``` (```--css```) is also present, thus the css classes from ```form-custom-classes.json``` are applied to corresponding elements.\n\n```json\n[\n    {\"element\":\"form\",\"classes\":[\"css__form\"]},\n    {\"element\":\"input-wrapper\",\"classes\":[\"css__wrapper\"]},\n    {\"element\":\"input-label\",\"classes\":[\"css__label\"]},\n    {\"element\":\"input-additional-info\",\"classes\":[\"css__xtra-info\"]},\n    {\"element\":\"input-element\",\"classes\":[\"css__input\"]}\n]\n```\n\nResulting in following ```html``` and ```ts``` files:\n\n```html\n// FormAnotherExample.component.html\n\u003cform id=\"another-example\" class=\"css__form\"\u003e\n    \u003ch2\u003eContact\u003c/h2\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"given-name-0-0\"\n        inputName=\"given-name-0-0\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Given Name\"\n        inputLabelClass=\"input-label css__label\"\n        inputRequired=\"true\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"family-name-0-1\"\n        inputName=\"family-name-0-1\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Family Name\"\n        inputLabelClass=\"input-label css__label\"\n        inputRequired=\"true\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"email\"\n        inputId=\"email-0-2\"\n        inputName=\"email-0-2\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Email\"\n        inputLabelClass=\"input-label css__label\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"address-0-3\"\n        inputName=\"address-0-3\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Address\"\n        inputLabelClass=\"input-label css__label\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"works-for-0-4\"\n        inputName=\"works-for-0-4\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Works For\"\n        inputLabelClass=\"input-label css__label\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003ch2\u003eAddress\u003c/h2\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"address-country-1-0\"\n        inputName=\"address-country-1-0\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Country\"\n        inputLabelClass=\"input-label css__label\"\n        inputRequired=\"true\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"address-locality-1-1\"\n        inputName=\"address-locality-1-1\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"City\"\n        inputLabelClass=\"input-label css__label\"\n        inputRequired=\"true\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"street-address-1-2\"\n        inputName=\"street-address-1-2\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Street Line\"\n        inputLabelClass=\"input-label css__label\"\n        inputRequired=\"true\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"postal-code-1-3\"\n        inputName=\"postal-code-1-3\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Postal Code\"\n        inputLabelClass=\"input-label css__label\"\n        inputRequired=\"true\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003ch2\u003eOrganization\u003c/h2\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"name-2-0\"\n        inputName=\"name-2-0\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Organization Name\"\n        inputLabelClass=\"input-label css__label\"\n        inputRequired=\"true\"\n    \u003e\u003c/app-basic-input\u003e\n    \u003capp-basic-input\n        inputType=\"text\"\n        inputId=\"address-2-1\"\n        inputName=\"address-2-1\"\n        inputForm=\"another-example\"\n        inputWrapperClass=\"css__wrapper\"\n        inputClass=\"css__input\"\n        inputLabel=\"Organization Address\"\n        inputLabelClass=\"input-label css__label\"\n    \u003e\u003c/app-basic-input\u003e\n\u003c/form\u003e\n```\n\nand\n\n```ts\n// FormAnotherExample.component.ts\nimport { Component, ViewEncapsulation } from '@angular/core';\n\nimport { BasicInputComponent } from \"../components/BasicInput/BasicInput.component\"\n\n@Component({\n    selector: \"app-form-another-example\",\n    standalone: true,\n    imports: [\n        BasicInputComponent,\n    ],\n    templateUrl: './FormAnotherExample.component.html',\n    encapsulation: ViewEncapsulation.None\n})\nexport class FormAnotherExample {\n}\n\n```\n\nWhich will look like:\n\n\u003cimg\n    src=\".assets/images/angular_example_form_no_styling.png\"\n    width=\"400\"\n    alt=\"form without styling\"/\u003e\n\nand with a some minimal styling:\n\n\u003cimg\n    src=\".assets/images/angular_example_form_styling.png\"\n    width=\"400\"\n    alt=\"form with styling\"/\u003e\n\nwhen all fields are filled properly:\n\n\u003cimg\n    src=\".assets/images/angular_example_form_styling_ok.png\"\n    width=\"400\"\n    alt=\"form with styling and filled correctly\"/\u003e\n\n\u003cbr/\u003e\n\n### List shapes available \u003ca name=\"usage-list-shapes\"\u003e\u003c/a\u003e\n\nList the actual available shapes inside the solid-sfef-cli package.\n\n```bash\nsfef list-shapes\n```\n\nA part from the listed shapes, the ```create``` command also allows to use global path for any shape file.\n\nExample of package's shapes folder path on OSX: ```'/Users/myname/node_modules/@solidlab/solid-sfef-cli/.assets/shacl/'```\n\n\u003cbr/\u003e\n\n## Uninstall \u003ca name=\"uninstall\"\u003e\u003c/a\u003e\n\nTo uninstall, simply run:\n\n- for global installation:\n\n    ```bash\n    npm uninstall @solidlab/solid-sfef-cli --global\n    ```\n\n    or\n\n    ```bash\n    npm rm @solidlab/solid-sfef-cli -g\n    ```\n\n- for development installation:\n\n    ```bash\n    npm uninstall @solidlab/solid-sfef-cli --save-dev\n    ```\n\n    or\n\n    ```bash\n    npm rm @solidlab/solid-sfef-cli -D\n    ```\n\n\u003cbr/\u003e\n\n## Changelog \u003ca name=\"changelog\"\u003e\u003c/a\u003e\n\n### version 0.1.0 - January 2024\n\n#### Limitation\n\nThe ```create``` functionality is adapted to a small amount of shape scenarios.\nSee the .ttl files in the ```./assets/shacl/``` folder for some examples.\n\n##### ```BasicInput``` component\n\nAs a result of this scope scenarios, only the HTML ```\u003cinput\u003e``` element is considered.\n\nSee ```BASIC_TYPE_MAP``` in ```constants.ts``` for mapping between shape (```sh:property```) and the corresponding Basic element (as well as type value).\n\ne.g.\n\n```js\n    ...\n    ['email', ['BasicInput', 'email']],\n    ['string', ['BasicInput', 'text']],\n    ['lang String', ['BasicInput', 'text']],\n    ['boolean', ['BasicInput', 'checkbox']],\n    ['integer', ['BasicInput', 'number']],\n    ...\n```\n\n##### ```\u003cinput\u003e```\n\nOnly a small amount of available attributes are taken in account: ```id```, ```name```, ```form```, ```type```, ```pattern```, ```required``` and ```list```.\n\nAnd for the ```type``` attribute only some values are considered: ```text```, ```number```, ```checkbox```, ```email```, ```url```, ```date```, ```time```, ```datetime-local``` and ```month```.\n\n##### ```\u003clabel\u003e```\n\nRelated to the  ```\u003clabel\u003e``` element, the value is coming from ```sh:name``` (or ```sh:path```).\n\nOn top, an option to add additional information to the label is available. The value is coming from ```sh:description``` and set in a  ```\u003cspan\u003e``` element.\nThen, it is up to developer to style it properly (e.g. second line, :hover, floating,...).\n\n#### Ready to grow\n\nAnyway, in both frameworks, the basic HTML forms elements has been created, and are ready to be implemented.\n\nThe ```\u003cinput\u003e```, ```\u003cbutton\u003e```, ```\u003cfieldset\u003e```, ```\u003cselect\u003e``` and ```\u003ctextarea\u003e``` components are created following expected [HTML markup](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements), with all the possible attributes and values.\n\nSo, the package is ready to be extended for any particular shapes scenarios, or simply be custom adapted.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidlabresearch%2Fsolid-sfef-cli","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidlabresearch%2Fsolid-sfef-cli","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidlabresearch%2Fsolid-sfef-cli/lists"}