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/ec.tailbite --save

To make sure you have all styles, make sure your tailwind config includes:

module.exports = {
  /* .. */
  content: [
    /* .. */
    './node_modules/@entrecode/ec.tailbite/**/*.{js,ts,jsx,tsx}',
  ],
  theme: {
    extend: {
      colors: {
        /* copy this part from ec.tailbite tailwind.config.js */
      },
    },
  },
  plugins: [require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio'), require('@tailwindcss/typography')],
  /* .. */
};

Copy the contents index.css to your main css file and adapt the theme to your needs.

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',
    colors: {
      primary: '#ba443c',
    },
  }}
>
  {/* 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.

To publish the package to the private entrecode github registry, run:

npm run patch

This will build all files and bump the version + commit everything.