Folder hierarchy in packages - Turbo/Monorepo

Question

Many articles and tutorials teach how to share components in monorepo projects.

But they show something in an unproductive way.

Share each component (package1, package2) separately in workspace. What I intend to do is export a complete package using atomic design, coming from a ui package only.

But when trying to do this this error is generated

I'm importing this way

import { Button } from 'ui/atoms'

package.json

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "license": "MIT",
  "scripts": {
    "dev": "tsc --watch --outDIr dist",
    "build": "tsc --outDir dist",
    "lint": "eslint *.ts*"
  },
  "devDependencies": {
    "@types/react": "^18.0.17",
    "@types/react-dom": "^18.0.6",
    "eslint": "^7.32.0",
    "eslint-config-custom": "workspace:*",
    "react": "^18.2.0",
    "tsconfig": "workspace:*",
    "typescript": "^4.5.2"
  }
}

Using import from "ui" it works, that is, we would have to keep creating files like Button.tsx and importing them in the ui index and using them in the project, but it is inefficient, imagine thousands of components (atoms, molecules).

import * as React from "react";
export * from "./Button";

I think I'll have to share other config files, so I'll be willing to change the post and put them.

App.tsx - Importing ui

import React from 'react';
import './App.css';

import { Button } from 'ui/atoms'

function App() {
  return (
    <div className="App">
      <Button/>
    </div>
  );
}

export default App;

package.json

{
  "name": "main_",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.3",
    "@types/react": "^18.0.25",
    "@types/react-dom": "^18.0.9",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.3",
    "web-vitals": "^2.1.4",
    "tsconfig":"workspace:*",
    "ui":"workspace:*"
  },
  "scripts": {
    "dev": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

link to the repository

micro-frontend

Ui library is being used in "apps/main_/src/App.tsx

How are you managing your dependencies? Are you using workspaces (e.g.: pnpm workspaces)? — Kevin Pastor, Nov 18 '22 at 16:52
yes, I used a base template from turbo.repo https://turbo.build/repo/docs — rick, Nov 18 '22 at 17:05
yes, using "dev": "tsc --watch --outDIr dist". Not using a structure with levels of folders works — rick, Nov 18 '22 at 19:15

score 1 · Accepted Answer · answered Feb 06 '23 at 13:51

After a while without messing with monorepo, I came back these days and found the solution for it.

Let's go to the problem I reported, and considered unfeasible. Many monorepo projects using Turbo using component sharing as follows.

//index.tsx
export { Avatar, AvatarGroup } from "./components/avatar";
export type { AvatarProps, AvatarGroupProps } from "./components/avatar";
export { Badge, UpgradeTeamsBadge } from "./components/badge";
export type { BadgeProps } from "./components/badge";
export { Breadcrumb, BreadcrumbContainer, BreadcrumbItem } from "./components/breadcrumb";
export { Button, LinkIconButton } from "./components/button";
export type { ButtonBaseProps, ButtonProps } from "./components/button";
export { ButtonGroup } from "./components/buttonGroup";
export {
  Checkbox,
  EmailField,
  EmailInput,
  FieldsetLegend,
  DropdownMenuLabel,
  Steps,
  WizardForm,
  SettingsToggle,
  Stepper,
  Switch,
} from "./components/form";

Realize that you have to keep importing all your components in the index, so that you can use them in other projects.

Correction

To resolve, just add the other files to eslint

  "scripts": {
    "lint": "eslint *.ts* atoms/**"
  },

With that there will be no need to import all the components in the index, in fact, you don't even need to have it

Folder hierarchy in packages - Turbo/Monorepo

1 Answers1