gomah/bulmil

:lipstick: A agnostic UI components library based on Web Components, made with Bulma & Stencil.

bulmil's Issues

Prepare Bulma components (markup)

Layout

• Container
• Section
• Footer

Grid

• Columns
• Tiles

Form

• General
• Input
• Textarea
• Select
• Checkbox
• Radio
• File

Elements

• Box
• Button
• Buttons
• Content
• Icon
• Image
• Notification
• Progress
• Table
• Tag
• Tags

Components

• Breadcrumb
• Card
• Dropdown
• Menu
• Message
• Modal
• Navbar
• Pagination
• Panel
• Tabs

Add documentation, bindings, events & listeners

Disabled checkbox

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>

Invalid last-child / last-type / ntn:x selectors

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;
    }
  }
}

Wrong component name on the switch readme

Just a little error here on the switch readme where it's written bm-tabs

Implement husky

React 16 as peer dependency

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?

Implement Storybook

Find a way to compute component classes

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

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.

Use CSS variables

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:

• jgthms/bulma#1837
• https://github.com/jgthms/bulma/tree/css-variables

Extending the Nuxt examples section with Nuxt routing / transitions

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

Runing issues with installing react example

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"
    ]
  }
}