ignacionmiranda / vite-component-library-template Goto Github PK
View Code? Open in Web Editor NEW⚛️ Vite + React Starter Component Library Template
Home Page: https://vite-component-library-template.vercel.app
License: MIT License
⚛️ Vite + React Starter Component Library Template
Home Page: https://vite-component-library-template.vercel.app
License: MIT License
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)
First of all thanks for sharing this cool template @IgnacioNMiranda .
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>
)
}
Then I ran pnpm run build:lib
Tested locally by running npm link
inside the root project
In another project I have(stater teamplate of NextJS) I installed by using npm link vite-component-library-template
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)
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?
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.
Would this configuration make it possible to publish the project to GitHub packages instead?
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
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.
``
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
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
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.
When consuming components from vite-component-library-template
, I've noticed that the styles associated with these components do not get applied.
git clone [email protected]:IgnacioNMiranda/vite-component-library-template.git
npm install && npm run build:lib
npm link
vite-component-library-template
to it:npm link vite-component-library-template
import { AtButton } from 'vite-component-library-template';
export default function App() {
return (
<>
<p>hello world</p>
<AtButton label="Click" />
</>
);
}
The Button component (or any other component from the library) should have its styles applied automatically, reflecting the intended design without requiring additional steps.
The components render without any of the styles defined in the component library, resulting in unstyled or default-styled HTML elements.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.