If you are interested on using this, please read the following:

• This is a personal project of mine and I do not recommend using it for your production projects.
• Whatever you see in the Storybook are all available for use. Just follow the instructions properly on how to use them.

Major Requirements

Your app should have the following:

• React v19.
• Tailwind CSS v4.

❓ How to use

You can import components, hooks, and utilities right away using the following methods:

🚀 As Microfrontend (Recommended)

1. Create your own microfrontend app.

• You can use Jack Herrington's Create MF App CLI to start fast.

2. Setup remotes in your Microfrontend project.

• If you used Jack Herrington's CLI, check if you started your App with Webpack (webpack.config.js) or Rspack (rspack.config.js).
• Find the plugin ModuleFederationPlugin and add the remoteEntry of this project.

  plugins: [
    new ModuleFederationPlugin({
      ..... other codes
      ...
      remotes: {
        "@core":
          "core@https://core.thecodebit.digital/remoteEntry.js",
      },
      ...
      ..... other codes
    })
  ],

3. Hooray! 🎉 You can now use all the components, hooks, and utilities present here. See example consumption below.

import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";

import {
  NeuFollowButton,
  DrawOutlineButton,
  NeuBrutalism,
  AIButton,
} from "@core/components"; // Core Components
import {
  Button,
  Badge,
} from "@core/components/shadcn"; // Shadcn Components
import { ThemeProvider, useTheme } from "@core/themes/shadcn"; // Shadcn Theme Provider
import { cn } from "@core/lib"; // Core Utilities
import { useIsMobile } from "@core/hooks"; // Core Hooks

import "@core/styles";
import "./index.css";

const App = () => {
  const isMobile = useIsMobile();
  return (
    <Suspense fallback="Loading..."> // Suspense is required.
      <h1 className={cn("text-4xl font-bold", isMobile && "text-2xl")}>
        Core Components
      </h1>
      <NeuFollowButton>Button</NeuFollowButton>
      <DrawOutlineButton>Button</DrawOutlineButton>
      <NeuBrutalism>Button</NeuBrutalism>
      <AIButton>Button</AIButton>
      <h1 className="text-4xl font-bold">Shadcn Components</h1>
      <ThemeProvider>
        <Badge>Hello</Badge>
        <Button onClick={() => setTheme("light")}>Light Mode</Button>
        <Button onClick={() => setTheme("dark")}>Dark Mode</Button>
      </ThemeProvider>
    </Suspense>
  );
};
const rootElement = document.getElementById("app");
if (!rootElement) throw new Error("Failed to find the root element");

const root = ReactDOM.createRoot(rootElement);

root.render(<App />);

4. For Core components, they are all client-side components. For shadcn/ui components, please refer to the shadcn/ui documentation.
5. Find all components, hooks, and utils in the Storybook.
6. If you're still unsure what to do, refer to this example repo: https://github.com/jeffreybernadas/microfrontend-cart

📦 As NPM Package

Note: React v19 and Tailwind CSS v4 are required.

1. Install package.

npm install @bernz322/core

2. Inside your index.css file, copy and paste the import code below at the top of the file.

@import "tailwindcss";
@import "@bernz322/core/styles/index.css";

3. Hooray! 🎉 You are now set! See example consumption below.

import React, { Suspense } from "react";
import ReactDOM from "react-dom/client";

import {
  NeuFollowButton,
  DrawOutlineButton,
  NeuBrutalism,
  AIButton,
} from "@bernz322/core/components"; // Core Components
import {
  Button,
  Badge,
} from "@bernz322/core/components/shadcn"; // Shadcn Components
import { ThemeProvider, useTheme } from "@bernz322/core/themes/shadcn"; // Shadcn Theme Provider
import { cn } from "@bernz322/core/lib"; // Core Utilities
import { useIsMobile } from "@bernz322/core/hooks"; // Core Hooks

import "./index.css";

const App = () => {
  const isMobile = useIsMobile();
  return (
    <Suspense fallback="Loading..."> // Suspense is required.
      <h1 className={cn("text-4xl font-bold", isMobile && "text-2xl")}>
        Core Components
      </h1>
      <NeuFollowButton>Button</NeuFollowButton>
      <DrawOutlineButton>Button</DrawOutlineButton>
      <NeuBrutalism>Button</NeuBrutalism>
      <AIButton>Button</AIButton>
      <h1 className="text-4xl font-bold">Shadcn Components</h1>
      <ThemeProvider>
        <Badge>Hello</Badge>
        <Button onClick={() => setTheme("light")}>Light Mode</Button>
        <Button onClick={() => setTheme("dark")}>Dark Mode</Button>
      </ThemeProvider>
    </Suspense>
  );
};
const rootElement = document.getElementById("app");
if (!rootElement) throw new Error("Failed to find the root element");

const root = ReactDOM.createRoot(rootElement);

root.render(<App />);

4. You can also use both as microfrontend and NPM package. Just make sure to import the the stuffs you need correctly. However, I don't recommend using both at the same time.

Requirements

• Node.js 20+ and npm

Getting started

Run the following command on your local environment:

git clone https://github.com/jeffreybernadas/core my-project-name
cd my-project-name
npm install

Note: I always update all dependencies whenever I have the time. Then run the storybook in development mode to see components by running:

npm run storybook

Open http://localhost:6006 with your favorite browser to see the storybook.

Adding components

Create a new component file inside "src/components" directory and export it in "src/index.ts". Note: This is not limited to components only, you can add React Hooks, Utility Functions, and more to it.

To check your created component, create a story of it and run storybook.

Tests

You can execute testing by running:

npm run test

Linting

For linting and checking code quality and problems, execute:

npm run lint

To fix errors, execute:

npm run lint:fix

Formatting

For formatting codes, execute:

npm run format

Build

For building your library, execute:

npm run build

This will create a build folder containing index.esm.js, index.cjs.js and typings folder for declarations.

Deployment of storybook

Deployment of Storybook is automated via Github Actions. You can check storybook.yml on how it's done.

Publishing to NPM

Same with Storybook deployment, publishing to NPM is also automated. Just make sure to add NPM_TOKEN in your repositories "Secrets and variables" > "Actions".