cli generetion componets React.js

Related tags

React compio
Overview

compio CLI

💻 Projeto

O Compio tem como finalidade facilitar a criação de novos component custom para o Vtex.io

🔧 Instalação

⚠️ Cuidado a intalação deve ser efetuada na pasta principal do projeto e não dentro da pasta react!
  yarn add compio

A cli foi criada pra suportar a seguinte arquitetura de pastas

  ├── ...
  ├── react           # pasta builder React
  │   ├── components
  │   ├── context
  │   └── ...
  │
  ├── store           # pasta builder Store
  │   ├── ...
  │   └── interfaces.json
  │
  ├── manifest.json
  └── ...

📄 Comandos

Criar um component

yarn compio create:component

serão feitas algumas perguntas para a configuração do componente como:

  • nome do component
  • nome da interface_id
  • se o componente terá um schema para o site editor
  • tipo da composição do componente
    • blocks: caso deseja utilizar o ExtensionPoint para chamar outros componentes. Veja mais sobre
    • children: caso deseja que o seu componente receba filhos.
  • em qual camada seu componente sera renderizado: server, client ou lazy
  • Caso selecione a opção de blocks ira aparecer uma lista dos componentes já resgistrados dentro do interfaces.json para que já possa informar quais poderão ser chamados pelo ExtensionPoint

Criar um context

yarn compio create:context

serão feitas algumas perguntas para a configuração do context como:

  • nome do context
  • nome do interface_id do provider
  • listagem dos componentes já registrados no arquivo interfaces.json para que possa selecionar os componentes em que o contexto ficara disponivel

📖 documentação utilizada durante o desenvolvimento

👨🏻‍💻 Author:

🗝 licenças

Este projeto é licenciado sobre a licença MIT - LICENSE.md para mais informações.

You might also like...

:black_medium_small_square:React Move | Beautiful, data-driven animations for React

:black_medium_small_square:React Move | Beautiful, data-driven animations for React

React-Move Beautiful, data-driven animations for React. Just 3.5kb (gzipped)! Documentation and Examples Features Animate HTML, SVG & React-Native Fin

Jan 1, 2023

React features to enhance using Rollbar.js in React Applications

Rollbar React SDK React features to enhance using Rollbar.js in React Applications. This SDK provides a wrapper around the base Rollbar.js SDK in orde

Jan 3, 2023

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense!

toastify-react-native 🎉 toastify-react-native allows you to add notifications to your react-native app (ios, android) with ease. No more nonsense! De

Oct 11, 2022

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React - Free Dashboard using React and Material UI

Soft UI Dashboard React Start your Development with an Innovative Admin Template for Material-UI and React. If you like the look & feel of the hottest

Dec 28, 2022

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router.

A web application to search all the different countries in the world and get details about them which can include languages, currencies, population, domain e.t.c This application is built with CSS, React, Redux-Toolkit and React-Router. It also includes a theme switcher from light to dark mode.

Jun 5, 2022

Finished code and notes from EFA bonus class on building a React project without create-react-app

React From Scratch Completed Code This is the completed code for the EFA bonus class on building a React project from scratch. Included are also markd

Oct 11, 2021

Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe

Airframe React High Quality Dashboard / Admin / Analytics template that works great on any smartphone, tablet or desktop. Available as Open Source as

Jun 5, 2022

React tooltip is a React.JS Component that brings usefull UX and UI information in selected elements of your website.

React Tooltip ✅ React tooltip is a React.JS Component that brings usefull UX and UI information in elements of your website. Installation ⌨️ React Too

Dec 22, 2021

React-Mini-Projects - Simple React mini-applications

React Mini Projects A Fully Responsive React Application contain these mini apps : Todo App Movie App Budget App Flash Card App Factor App This app wa

Jan 1, 2022
Owner
Sander Paniago
Desenvolvedor Font-end, viciado em conhecer novas maneiras de utilizar react e seu ecossistema.
Sander Paniago
Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Recoil · Recoil is an experimental set of utilities for state management with React. Please see the website: https://recoiljs.org Installation The Rec

Facebook Experimental 18.2k Jan 8, 2023
You can use this CLI Tool to clean your iOS and Android projects and keep them updated.

Mobile App Cleaner You can use this CLI Tool to clean your iOS and Android projects and keep them updated. This tool automatizes these items below; Cl

automizer 21 Mar 19, 2022
An Ember CLI Addon that provides a variety of UI components.

We use https://waffle.io/softlayer/sl-ember-components to work our issues. What sl-ember-components is An Ember CLI Addon that provides UI components

SoftLayer 115 May 7, 2022
Ember-cli addon for using Bootstrap as native Ember components.

ember-bootstrap An ember-cli addon for using Bootstrap 4 und 5 in Ember applications. The addon includes the Bootstrap CSS (or Sass, Less) in your pro

kaliber5 491 Dec 25, 2022
An SST app that stores the telemetry data collected by the SST CLI.

Telemetry An SST app that collects telemetry data from the SST CLI and sends the events to Amplitude. It also backs up the events to AWS S3. Architect

Serverless Stack 3 Jan 23, 2022
A small CLI tool to create a semantic release and git-cliff powered Changelog

cliff-jumper A small CLI tool to create a semantic release and git-cliff powered Changelog Description When managing a collection of projects you ofte

Favware 15 Sep 22, 2022
Start developing LIFF application with a simple CLI command.

@line/create-liff-app Start developing LIFF application with a simple CLI command. About LIFF Templates Getting Started Create LIFF Channel Installati

LINE 27 Nov 10, 2022
Demo of settingup tailwind 3 (cli) with emberjs

tailwind-setup-demo This README outlines the details of collaborating on this Ember application. A short introduction of this app could easily go here

null 11 Aug 28, 2022
React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, PostCSS, Webpack, Browsersync)

React Starter Kit — "isomorphic" web app boilerplate React Starter Kit is an opinionated boilerplate for web development built on top of Node.js, Expr

Kriasoft 21.7k Dec 30, 2022
📋 React Hooks for forms validation (Web + React Native)

English | 繁中 | 简中 | 日本語 | 한국어 | Français | Italiano | Português | Español | Русский | Deutsch | Türkçe Features Built with performance and DX in mind

React Hook Form 32.4k Dec 29, 2022