import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import { defineCustomElements } from 'arv/dist/loader';

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

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from 'arv/dist/loader';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));
defineCustomElements(window);

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

import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, FormsModule, SharedModule],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}

import React, { useRef, useEffect } from 'react';

function MyButton() {
  const el = useRef(null);

  useEffect(() => {
    el.current.buttonClick = props.onClick;
  });

  return (
    <arv-button
      ref={el}
      variant="raised"
      color="primary"
    >Hello World!</arv-button>
  );
}

export default MyButton;

import React from 'react';

function Foo() {
  return (
    <arv-container
      width="100vw"
      height="100vw"
    >
      <arv-flex
        items="center"
        justify="center"
        full-width
        full-height
      >
        <arv-text variant="heading1">
          Hello World
        </arv-text>
      </arv-flex>
    </arv-container>
  );
}

export default Foo;