@isabelandss/venus

Venus Design System

Objetivo

• Estudo do Stenciljs.
• Experimentar a publicação e uso de código próprio pelo NPM.
• Estudo de Design System.
• Estudo de Storybook com MDX.
• Vem ai: estudo de cliques e changes em componentes de formulários com stenciljs.

Instalação

> npm i --save @isabelandss/venus

Angular

Demo

https://codesandbox.io/s/angular-with-stencil-components-ju40d?file=/src/app/app.component.ts

Configuração

//app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
...

@NgModule({
  ...
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule { }

// main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
..
import { defineCustomElements } from '@isabelandss/venus/loader';

...

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

defineCustomElements();

Uso

// app.component.ts

import { Component } from '@angular/core';
import { of } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <venus-bumblebee
      *ngFor="let component of components"
      [component]="component">
    </venus-bumblebee>
  `,
})
export class AppComponent {
  components: any

  ngOnInit() {
    of([
      { type: 'button', kind: 'secondary', text: 'eu sou um botão' },
      { type: 'input', kind: 'number' },
    ])
    .subscribe((components: any) => {
      components = components.map(c => JSON.stringify(c))
      this.components = components
    })
  }
}

React

Demo

https://codesandbox.io/s/react-with-stencil-components-4f18u?file=/src/App.js

Configuração

// index.js

import React from 'react';
...
import { applyPolyfills, defineCustomElements } from '@isabelandss/venus/loader';

ReactDOM.render(<App />, document.getElementById('root'));

applyPolyfills().then(() => {
  defineCustomElements();
});

Uso

// App.js

const backend = () => new Promise(res => {
  return res([
    { type: 'button', kind: 'secondary', text: 'eu sou um botão' },
    { type: 'input', kind: 'number' }
  ])
})

export default function App() {
  const [components, setComponents] = useState([])

  useEffect(() => {
    async function calldb() {
      const components = await backend()
      setComponents(components)
    }

    calldb()
  }, [])

  return (
    <>
      {components.map((component, index) =>
        <venus-bumblebee key={index} component={JSON.stringify(component)}/>
      )}
    </>
  );
}