willmendesneto

import React, { useEffect, useState } from "react";
import { Editor as TinyMCEEditor } from "@tinymce/tinymce-react";

const defaults = {
  init: {
    width: "100%",
    height: "300",
    menubar: false,
    branding: false,
    plugins: ["link image", "table paste"],

willmendesneto

...
editor/
  theming/
    ... list of theming
  icons.js
  editor.js
  index.js
...

willmendesneto

// This file lives in `editor/editor.js`
import React, { useEffect, useState } from "react";
import { Editor as TinyMCEEditor } from "@tinymce/tinymce-react";

// Default Editor configuration to be mixed with the ones passed
// from the consumers
const defaults = {
  init: {
    width: "100%",

willmendesneto

// This file will live in `editor/themes/minimal.js`

import React from "react";
import { Grid, withStyles } from "@material-ui/core";

export const Minimal = withStyles(theme => ({
  root: {
    "& .tox .tox-tbtn svg": {
      fill: theme.palette.grey["500"]
    },

willmendesneto

@myapp/
  buttons/
    entrypoints/
      utils.js <-- Exporting `ButtonGroup` and `ButtonTheme` components
      ButtonWithIcon.js <-- Exporting `ButtonWithIcon` component
      Button.js         <-- Exporting `Button` component
    ButtonGroup.js   
    ButtonTheme.js   
 ButtonWithIcon.js 

willmendesneto

{
  ...
  "name": "@myapp/buttons/utils",
  "main": "../dist/cjs/entrypoints/utils.js",
  "module": "../dist/esm/entrypoints/utils.js",
  "cjs": "../dist/cjs/entrypoints/utils.js",
  ...
}

willmendesneto

// `./entrypoints/utils.js` file content
// Accessed via `@myapp/butons/utils` entry-point

export * from '../ButtonGroup';
export * from '../ButtonTheme';

willmendesneto

@myapp/
  buttons/
    # Oops! Your app will face the consequences
    dist/
      cjs/index.js
      esm/
        ButtonWithIcon.js   
        Button.js           
 index.js 

willmendesneto

@myapp/
  buttons/
    cjs/index.js <-- final button with all components, even if you're using only 1 of them
    esm/
      ButtonWithIcon.js   <-- `ButtonWithIcon` component
      Button.js           <-- `Button` component
      index.js            <-- main file exporting both components

willmendesneto

{
  ...
  "sideEffects": false,
  "name": "@myapp/buttons",
  "main": "../dist/cjs/index.js",
  "module": "../dist/esm/index.js",
  "cjs": "../dist/cjs/index.js",
  ...
}