ttoss - Terezinha Tech Operations

Getting Started

The "hello world" of this repository is running ttoss Storybook in your local machine. To do so, clone the repository and run the following commands on the root folder:

1. Install the dependencies:

   pnpm install

2. Build @ttoss/config package:

   pnpm build:config

3. Build i18n languages (for more information, see @ttoss/i18n-cli):

   pnpm turbo run i18n

4. Run the Storybook:

   pnpm storybook

If everything goes well, you should see the Storybook running in your browser.

FAQ

Why doesn't @ttoss/config (./packages/config) have a build script?

It doesn't have a build script because its build cannot be done at the same time as the other packages. The other packages use @ttoss/config package on their configuration files. As the build command on turbo.json is executed in parallel, it may happen that the other packages are built before @ttoss/config package, which would cause an error because they would try to use @ttoss/config package before it was built.

What is build-config command?

build-config is a command that builds some packages that are used in the configuration files of the other packages. For example, it builds @ttoss/i18n-cli package because it must be built before running i18n commands in the other packages.

Do I need to build packages before importing them?

No. We use the exports field to specify the package entry points of the packages and point them to the src folder. For example,

{
  "exports": {
    ".": "./src/index.ts"
  }
}

Furthermore, we configure publishConfig to point to the dist folder, so when we publish the package, it will be published pointing to the dist folder, which contains the built files.

{
  "publishConfig": {
    "exports": {
      ".": {
        "import": "./dist/esm/index.js",
        "require": "./dist/index.js",
        "types": "./dist/index.d.ts"
      }
    }
  }
}

Why doesn't TypeScript find components from ttoss libs?

With the introduction of the new --moduleResolution bundler, TypeScript 4.7+ supports resolution features that can be interpreted natively by TypeScript, allowing exports and imports to be enabled and disabled in package.json. Because ttoss libraries use exports as package entry points, you need to set moduleResolution as bundler in your project tsconfig.json if it uses webpack, rollup, or other bundlers:

{
  "compilerOptions": {
    "target": "esnext",
    "moduleResolution": "bundler"
  }
}

If your application uses Node.js without a bundler, set moduleResolution to NodeNext.