This is an UI library effort consisting in the abstraction of mere presentational components applied on my pet project Playing with Marvel API

It mimics the look and feel of the Marvel Characters page.

The approachrelies on vite's library mode and is heavily inspired by this article and this hybrid implementation

TailwindCSS is applied as Peer Dependency. Be dareful about conflicts with your tailwind.config.js or your version, if your project has it already installed.

Support for both ECMAScript Modules and CommonJS

• Outputs:
  • esm and cjs source files
  • source maps for JavaScript files (.js.map)
  • esm and cjs declaration files (.d.ts and .c.ts)
  • esm and cjs source maps for declaration files (.d.ts.map and .c.ts.map)
  • compiled CSS modules (consuming app is not required to support css modules)
• Subpath exports for explicit path referencing. Will auto map to the right module system
• Libraries are externalized for a lighter bundle size (react, react/jsx-runtime)

You need Node.js and npm or yarn installed on your machine. To check if you have Node.js installed, run this command in your terminal:

node -v

yarn -v

npm install or yarn

This is a beta version. Until the build issues are resolved and the type definitions come from the library itself, they need to be provided from the consumer project.

my-project/
├── types/
│   └── declarations.d.ts

// types/declarations.d.ts
declare module 'eldav1d-marvel-ui';

This means: (still) no autompletion neither type checking oin the consumer project.

Runs the app in the development mode. Open http://localhost:5173 to view it in the browser.

Builds the app for production to the dist folder. It correctly bundles React in production mode and optimizes the build for the best performance.

Launches the test runner for the whole project.

Launches the test runner for component testing.

Runs the linter to check for any syntax errors or deviations from the coding standards.

Runs a preview of the built app.

Starts the Storybook tool for developing UI components in isolation. Open http://localhost:6006 to view it in the browser.

Builds the Storybook for static deployment.