This is the entrecode frontend component framework.

Since it is a private package, you are required to have npm configured correctly.

@entrecode:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=YOURTOKEN

Replace YOURTOKEN with the generated PAT

npm install @entrecode/tailbite --save

To make sure you have all styles, add ec.tailbite to your tailwind config like this:

module.exports = {
  /* .. */
  content: [
    /* .. */
    './node_modules/@entrecode/ec.tailbite/**/*.{js,ts,jsx,tsx}',
  ],
  /* .. */
};

Each file is imported seperately:

import Section from '@entrecode/ec.tailbite/components/Section';
import useSdk from '@entrecode/ec.tailbite/hooks/useSdk';
import cx from '@entrecode/ec.tailbite/util/classNames';

This ensures your bundle stays small.

Wrap your App in Tailbite like this:

<Tailbite environment={{ shortID: '83cc6374', env: 'stage' }}>{/* your app */}</Tailbite>

The build is using vite in library mode. The problem: default settings will build only one giant bundle , which results in a lot of stuff nobody needs. Luckily this comment pointed out that the 3.2.0 beta version of vite supports multiple entry points in library mode. To make this work with typescript (using vite-plugin-dts), the entry keys must match the actual paths, relative to src, e.g.

{
  entry: {
    /* .. */
    'components/Section': path.resolve(__dirname, 'src', 'components', 'Section.tsx'),
    /* .. */
  }
}

... which results in Section.js being generated into the same directory as Section.d.ts.

This is now implemented using a file crawler to determine the chunks automatically (see vite.config.ts)

To be able to import without including the dist folder, I am using a little hack.