gomah / bulmil Goto Github PK
View Code? Open in Web Editor NEW:lipstick: A agnostic UI components library based on Web Components, made with Bulma & Stencil.
Home Page: https://bulmil.vercel.app
License: MIT License
:lipstick: A agnostic UI components library based on Web Components, made with Bulma & Stencil.
Home Page: https://bulmil.vercel.app
License: MIT License
When trying to test the react application example and after running below commands
$: git clone https://github.com/gomah/bulmil
$: cd bulmil/examples/react
$: npm install
below error is thrown:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! peer react@"^16.8.0 || ^17.0.0 || ^18.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addons
npm ERR! peer @storybook/addons@"^6.4.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-knobs
npm ERR! dev @storybook/addon-knobs@"6.4.0" from the root project
npm ERR! dev react@"18.2.0" from @bulmil/[email protected]
npm ERR! packages/react
npm ERR! @bulmil/[email protected]
npm ERR! node_modules/@bulmil/react
npm ERR! workspace packages/react from the root project
npm ERR! 2 more (@bulmil/react-example, @bulmil/next-example)
npm ERR! 4 more (react-dom, @storybook/api, @storybook/components, @storybook/theming)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peerOptional react@"^16.8.0 || ^17.0.0" from @storybook/[email protected]
npm ERR! node_modules/@storybook/addon-knobs
npm ERR! dev @storybook/addon-knobs@"6.4.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /Users/i774615/.npm/eresolve-report.txt for a full report.
even if running npm install --force causes
118 vulnerabilities (1 low, 91 moderate, 16 high, 10 critical)
no package-lock.json is created and cannot run
npm run serve
the package.json looks like this:
{
"name": "@bulmil/react-example",
"version": "0.48.1",
"private": true,
"dependencies": {
"@bulmil/core": "0.48.1",
"@bulmil/react": "0.48.1",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-scripts": "4.0.3",
"typescript": "5.2.2"
},
"scripts": {
"build": "react-scripts build",
"eject": "react-scripts eject",
"serve": "react-scripts start"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I was wondering if it would be possible to extend the Nuxt router, maybe in nuxt-stencil, similar to the following implementation in Ionic Vue so the Nuxt Router could be used with the Web Components generated by Stencil?
see https://github.com/ModusCreateOrg/ionic-vue/blob/master/src/router.ts or
https://github.com/ModusCreateOrg/beep/blob/master/src/router.js
In bulma's form checkbox, the disabled
attribute is passed to the label
element, however, disabled
is not a valid attribute for label
.
<label class="checkbox" disabled>
<input type="checkbox" disabled>
Save my preferences
</label>
At the moment, Bulmil is using bulma's scss variables (bulma-scss) to style stencil components.
However, as components are built & then distributed, it becomes impossible to customize the styles dynamically.
Using CSS variables will solve this issue, I'm currently working on an alternative, apparently, it is also a proposed feature in Bulma:
Similar to the Object syntax in Vue:
https://vuejs.org/v2/guide/class-and-style.html#Object-Syntax
Dependabot can't resolve your JavaScript dependency files.
As a result, Dependabot couldn't update your dependencies.
The error Dependabot encountered was:
Error whilst updating @types/storybook__addon-knobs in /yarn.lock:
Couldn't find package "storybook__addon-knobs@*" required by "@types/[email protected]" on the "npm" registry.
If you think the above is an error on Dependabot's side please don't hesitate to get in touch - we'll do whatever we can to fix it.
As bulma components & elements are wrapped in Stencil components, some selectors might not work.
e.g for Buttons:
.buttons {
.button {
&:not(:last-child):not(.is-fullwidth) {
margin-right: 0.5rem;
}
}
}
Work around:
b-buttons {
b-button {
&:not(:last-child):not(.is-fullwidth) {
margin-right: 0.5rem;
}
}
}
Hi. I very appreciate your work. But you put peerDependency react@"16.12.0" for last versions of @bulmil/[email protected] and 0.35.0, while I see react 18.0.15 in dev dependencies.
It's in deep conflict with libraries I use and they heed to have react 18.2.0.
Could @bulmil/react have a bit higher dependencies?
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.