ignacionmiranda/vite-component-library-template

⚛️ Vite + React Starter Component Library Template

⚛️⚡ Vite + React + Typescript Component Library Template

Features

• ⚛️ React 18
• 📚 Storybook 7 - Components preview
• 🖌️ Tailwind CSS 3
• ⏩ Vite - Run and build the project blazingly fast!
• ⚡ Vitest - Components Unit Testing
• 📐 ESLint & Prettier - Formatting and Linting
• 🌟 Typescript
• 🐶 Husky & Lint Staged - Pre-commit Hooks
• ⏰ Release Please — Generate the changelog with the release-please workflow
• 👷 Github Actions — Releasing versions to NPM
• Initial components setup using Atomic Design

Getting Started

1. Create a new repository using this one as template
2. Clone your repo
3. Install dependencies with pnpm i (first run corepack enable to enable pnpm)
4. Run pnpm prepare command to setup Husky pre-commit hooks.

Main Scripts

Always prepending pnpm:

• dev: Bootstrap the Storybook preview with Hot Reload.
• build: Builds the static storybook project.
• build:lib: Builds the component library into the dist folder.
• lint:fix: Applies linting based on the rules defined in .eslintrc.js.
• format:prettier: Formats files using the prettier rules defined in .prettierrc.
• test: Runs testing using watch mode.
• test:cov: Runs testing displaying a coverage report.

Blog Post

I created a post explaning how to set up this library and publish it to a package registry! You can read it here.

Author

Ignacio Miranda Figueroa

License

MIT

vite-component-library-template's Issues

Publishing this to GitHub packages instead.

Would this configuration make it possible to publish the project to GitHub packages instead?

I think we should use more eslint plugins

As eslint parser we should @typescript-eslint/parser as we are using project with typescript apart from this we should also use
eslint-plugin-react-hooks as we react recommend use of hooks

react/jsx-runtime should be an external

The bundle includes both react/jsx-runtime, production and development.

vite v4.3.9 building for production...
✓ 17 modules transformed.
dist/style.css                               5.71 kB │ gzip: 1.75 kB
dist/vite-component-library-template.es.js  21.88 kB │ gzip: 6.64 kB
dist/vite-component-library-template.umd.js  14.54 kB │ gzip: 5.77 kB

[vite:dts] Start generate declaration files...
✓ built in 1.86s
[vite:dts] Declaration files built in 1437ms.

Both should be excluded from bundle:

rollupOptions: {
  external: ['react', 'react/jsx-runtime', 'react-dom', 'tailwindcss'],
  output: {
    globals: {
      react: 'React',
      'react/jsx-runtime': 'react/jsx-runtime',
      'react-dom': 'ReactDOM',
      tailwindcss: 'tailwindcss',
    },
  },
},

Resulting in:

vite v4.3.9 building for production...
✓ 9 modules transformed.
dist/style.css                              5.71 kB │ gzip: 1.75 kB
dist/vite-component-library-template.es.js  0.87 kB │ gzip: 0.50 kB
dist/vite-component-library-template.umd.js  1.05 kB │ gzip: 0.62 kB

[vite:dts] Start generate declaration files...
✓ built in 1.63s
[vite:dts] Declaration files built in 1368ms.
 ``

How to Publish as CDN?

Hey there,

I am working on a project which requires to build just one single component which would appear as an overlay on top of my client's webpage. I need to make the component in React and publish it on a CDN so that my client can directly put the component on their wepage using a <script> tag.

How do I go about this using your repo?

Why do we need 2 vite config

Why do we need to vite config one for storybook and one for complete project I have tried using the outside vite config it works like charm so why do we need multiple places vite config apart from this we are using @storybook/react-vite. but there official doc prefers @storybook/builder-vite https://storybook.js.org/docs/react/builders/vite#setup

Not able to see example AtButton with proper styles using npm pack

Hi @IgnacioNMiranda and folks, first of all thanks for the awesome template!

Probably a question rather than an issue, since I'm trying to use this template to create a component myself. Before that I'm trying to use the example button given in this template and import it in a dummy Vite React app with npm pack and referencing the gzip.

My package.json that does the import

"component-example": "file:../vite-component-library-template-2.0.4.tgz",

And the app.jsx file

import React from "react";
import { AtButton } from "component-example";

function App() {
  return (
    <AtButton label="button" variant="SECONDARY">
      Click me
    </AtButton>
  );
}

export default App;

The outcome is this button with no styles, instead of the one you see in the Storybook.

I'm definitely doing something wrong here, I tried importing the style.css but it can't find it either, although I do see it in the generated dist folder.

Add ES modules (ESM) support

Thank you for this awesome repo!!

I get this error after Importing AtButton into an ESM project ("type": "module")

import { AtButton } from "vite-component-library-template";
         ^^^^^^^^
SyntaxError: Named export 'AtButton' not found. The requested module 'vite-component-library-template' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'vite-component-library-template';
const { AtButton } = pkg;

    at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)
    at ModuleJob.run (node:internal/modules/esm/module_job:190:5)

Typescript support

Hi, I am trying to install and use this package in a Vite React Typescript project, but get an error in VSCODE regarding types:

"Could not find a declaration file for module 'vite-component-library'. '../node_modules/vite-component-library/dist/v-codyhouse-components.es.js' implicitly has an 'any' type.
There are types at '../node_modules/vite-component-library/dist/types/index.d.ts', but this result could not be resolved when respecting package.json "exports". The 'vite-component-library' library may need to update its package.json or typings."

Works fine in none Typescript projects, including Vite React and Nextjs 13.

Maybe you encounter this problem as well.

Thanks in advance

restore package.json in postpack

Currently running npm pack or npm publish will update the package.json file in-place and remove the dependencies and devDependencies`. It's very easy to make a mistake and the commit the changes to the repo which will break the dev environment.

We should restore the package.json after pack.

Cannot read properties of null (reading 'useState')

First of all thanks for sharing this cool template @IgnacioNMiranda .

1. I followed and tried to edit it by simple add some dumb counter logic in the existing AtButton

export const AtButton = ({ label, variant = 'PRIMARY', isDisabled = false, onClick }: AtButtonProps) => {
  const [counter, setCounter] = useState(0)
  const handleOnClick = (e: any) => {
    setCounter(counter + 1)
    if (! isDisabled && onClick) {
      onClick(e)
    }
  }
  return (
    <button
      className={`transition-colors px-6 py-2 rounded-md ${variantClasses[variant]} ${
        isDisabled ? 'bg-gray-300 text-slate-600 cursor-not-allowed pointer-events-none' : ''
      }`}
      onClick={handleOnClick}
    >
      {label} {counter + 1}
    </button>
  )
}

2. Then I ran pnpm run build:lib

3. Tested locally by running npm link inside the root project

4. In another project I have(stater teamplate of NextJS) I installed by using npm link vite-component-library-template

5. Imported the button in the index page using:

import {AtButton} from 'vite-component-library-template'
...
<AtButton label="sample" />

Then I got this error on runtime: Unhandled Runtime Error TypeError: Cannot read properties of null (reading 'useState')

Hopefully you can give me a hand with this, I had the same issues previously with another lib I was developing and got the same error and I had a sightly different setup(vite.config.js)

Component Styles Not Applied Upon Import

Description

When consuming components from vite-component-library-template, I've noticed that the styles associated with these components do not get applied.

Steps to Reproduce

1. Clone the repository:

git clone [email protected]:IgnacioNMiranda/vite-component-library-template.git

2. Install dependencies and build the library:

npm install && npm run build:lib

3. Link the library for local development (or publish and install it in another project):

npm link

4. Create a new project and link vite-component-library-template to it:

npm link vite-component-library-template

5. Use a component from the library:

import { AtButton } from 'vite-component-library-template';

export default function App() {
    return (
        <>
            <p>hello world</p>
            <AtButton label="Click" />
        </>
    );
}

Expected Behavior

The Button component (or any other component from the library) should have its styles applied automatically, reflecting the intended design without requiring additional steps.

Actual Behavior

The components render without any of the styles defined in the component library, resulting in unstyled or default-styled HTML elements.