@bitcurve/flint-react-ui NPM

@bitcurve/flint-react-ui

Intended to be used in conjunction with @bitcurve/flint-tailwind (a peer dependency) and alongside @bitcurve/flint-react-ui.

Consuming this Package

The consuming project must add this package to their tailwind config file's content array so that tailwind classes are properly processed and purged during build:

content: [
  // ...
  './node_modules/@bitcurve/flint-react-ui/dist/**/*.{js,ts,jsx,tsx}',
  // ...
]

This package also exports a style.css generated by tailwindcss during the package build process.

The generated stylesheet does not include the tailwind preflight (base) styles or components styles with the assumption that the consuming project may have its own base styles. Refer to tailwind's docs: https://tailwindcss.com/docs/preflight.

Boilerplate Docs Generated By Vite + React Template

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

@vitejs/plugin-react uses Babel for Fast Refresh
@vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
Optionally add plugin:@typescript-eslint/stylistic-type-checked
Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

Notes for Future

See inline postcss replace plugin example: Note the default regex in the code matches {{ x }} and {{x}}.

https://github.com/GovAlta/ui-components/blob/de245a79405082d8811cf6813148b6149b98d557/libs/web-components/utils/postcss-replace.js

Note how the example uses it here and provides override patterns to replace css variables being used as placeholders with css. https://github.com/GovAlta/ui-components/blob/9fac217383ea8ce742dc7e5f54dcb351450a8418/libs/web-components/vite.config.js#L8

Current Issue

packages/react-ui build: [vite:dts] Start rollup declaration files...
packages/react-ui build: Analysis will use the bundled TypeScript version 5.4.2
packages/react-ui build: *** The target project appears to use TypeScript 5.5.3 which is newer than the bundled compiler engine; consider upgrading API Extractor.
packages/react-ui build: x Build failed in 8.66s
packages/react-ui build: error during build:
packages/react-ui build: [vite:dts] Internal Error: Unable to follow symbol for "HTMLTableCellElement"
packages/react-ui build: You have encountered a software defect. Please consider reporting the issue to the maintainers of this application.

Analysis will use the bundled TypeScript version 5.4.2
*** The target project appears to use TypeScript 5.5.3 which is newer than the bundled compiler engine; consider upgrading API Extractor.