endava/beeq

BEEQ Design System, a web component library ruled by Endavan developers :)

BEEQ, a web component library initiative

This repository holds the source code of the web components present in the BEEQ Design System.

Package	Version	Documentation
@beeq/core		README
@beeq/angular		README
@beeq/react		README
@beeq/vue		README
@beeq/tailwindcss		README

⚠️ Before Starting ⚠️

Structure 🧩

The project has been structured as an NX monorepo :

├── 📁 packages
  ├── 📁 beeq
  ├── 📁 beeq-angular
  ├── 📁 beeq-react
  ├── 📁 beeq-vue
  ├── ...
  ├── 📁 beeq-tailwindcss
  ├── ...
├── 📁 tools
├── package.json
├── package-lock.json

where:

• packages/beeq: Core library (source for all the elements/components implemented)
• packages/beeq-angular: Angular-specific wrapper for BEEQ core library
• packages/beeq-react: React.js-specific wrapper for BEEQ core library
• packages/beeq-vue: Vue.js-specific wrapper for BEEQ core library
• packages/beeq-tailwindcss: BEEQ's opinionated TailwindCSS configuration

Dependencies 📡

We recommend the use of Volta to manage Node and NPM versions. The installation process is pretty straightforward, and as referenced on their official site:

With Volta, you can select a Node engine once and then stop worrying about it. You can switch between projects and stop having to manually switch between Nodes.

Once you have Volta installed, whenever you change to the BEEQ folder locally, it will switch to the right Node and NPM versions pinned in the package.json:

  "volta": {
    "node": "20.11.1",
    "npm": "10.4.0"
  }

Volta is not mandatory, you can still use any Node/NPM setup that fits you most, just keep in mind that you'll need:

• NodeJS v18.x or higher
• NPM v8 or higher

Usage

The BEEQ components are published to the NPM package manager registry. You can use the @beeq/core or any of the framework-specific wrappers (@beeq/angular, @beeq/react) depending on the technology stack of your project. Make sure the follow the usage instructions for each package:

• 📘 How to use the @beeq/core package
• 📗 How to use the @beeq/angular package
• 📕 How to use the @beeq/react package
• 📙 How to use the @beeq/vue package
• 📓 How to use the @beeq/tailwindcss preset

Feel free to check our Storybook to see all the BEEQ components released. There you can find all the component's APIs (properties, events, and methods exposed) along with the variations that each component allows.

Running the project 🏃‍

To develop/extend components on the BEEQ Design System, please fork this repo in GitHub and clone it locally to a new directory:

git clone https://github.com/<YOUR_GITHUB_USERNAME>/BEEQ.git BEEQ-Design-System
cd BEEQ-Design-System
git checkout main

Installation ⚙️

Simply run:

npm ci
# Make sure to build first the project before starting it
npm run build
npm start

Start coding 😃!

Build 📦

For a Production build, just run:

npm run build

Test 🧪

BEEQ uses Jest for unit tests and Jest and Puppeteer for end-to-end tests.

You can run all the tests once, by executing:

npm run test

🚨 If you get an error similar to the one below, try to check out locally the main branch and run the tests again.

fatal: Not a valid object name main
fatal: No such ref: 'main'
nx affected

Generate component

BEEQ comes with a component generator that saves you time when creating the skeleton for a new component. To use the generator, you just need to run the following command and follow the instructions in your prompt CLI:

npm run g

Contributing 💻

💥 If you are in the mood and want to help 🙂, please read carefully our Contributing Guidelines and Development Standards.

❗️ When working on a bug fix, new feature, etc., please notice that we follow a GitFlow workflow. Make sure to follow the instructions from the Contributing Branching Strategy guidelines about how to create your branch when starting to work on a bug/hot fixing, new feature, etc.

Documentation 📖

StencilJs

Need help? Check out the Stenciljs docs here (https://stenciljs.com/).

Tailwind CSS

We use Tailwind CSS for the style of the components, please take a look at their documentation here: (https://tailwindcss.com/docs/)

Thanks 🙏

We would like to express our sincere gratitude to Chromatic for providing the visual testing platform that enables us to review UI changes and identify visual regressions.

Thank you to the Nx team for helping us streamline our CI process and efficiently manage our Monorepo.

beeq's Issues

Feat: Progress component

Describe the feature

Describe the use case for this feature

Describe the solution you'd like

Try to use the native progress HTML element under the hood
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress

Check the article below for applying custom styles:
https://nikitahl.com/progress-bar-css

Related Code

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=3991%3A54962&mode=design&t=IM6eKno8O3mv7ODZ-1

Bug: Accordion expand/collapse animation isn't smooth

BEEQ package

beeq/core

BEEQ version

latest

Current Behavior

When expanding or collapsing an Accordion item, the animation seems a bit weird and is not as smooth as it should be it is like the text gets displayed some milliseconds before the accordion body content expands.

CleanShot.2024-03-07.at.14.29.30.mp4

Expected Behavior

The animation should be smooth, with no content overlap, and no quirk or jump. Something similar to this code pen:
https://codepen.io/giana/pen/OrpdLK

Steps to Reproduce

The current issue can be also checked on the officiant documentation:
https://www.beeq.design/3d466e231/p/713eae-accordion/b/155c3d

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

Bug: unable to set or drag the Slider down to `0` value

BEEQ package

beeq/core

BEEQ version

1.2.0

Current Behavior

The slider component cannot be set to 0 value. When dragging the thumb down to 0, it gets stuck on 1 but never riches the 0 value.

Expected Behavior

Able to set the slider value to 0, even by dragging the slider thumb.

Steps to Reproduce

It can be reproduced in Storybook: https://storybook.beeq.design/?path=/story/components-slider--single&args=value-indicator:!true

1. Enable value-indicator attribute
2. Drag the slider thumb down to 0

Code Reproduction URL

https://storybook.beeq.design/?path=/story/components-slider--single&args=value-indicator:!true

Your Environment

No response

Additional Information

CleanShot.2024-04-11.at.09.07.35.mp4

Feat: Date picker

Describe the feature

Describe the use case for this feature

Describe the solution you'd like

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=3991%3A54950&mode=design&t=IM6eKno8O3mv7ODZ-1

Feat: Enable tooltip for slider

Bug: bq-select does not update when value is change externally

BEEQ package

beeq/core

BEEQ version

1.3.0

Current Behavior

bq-select with multiple property does not update when value is updated externally.

Expected Behavior

bq-select should react to external change of value and update input.

Steps to Reproduce

Navigate to a instance of @beeq/core. In browser console

1. document.querySelector("bq-select").value = JSON.stringify(["running"])

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

Feat: Drawer component

Describe the feature

We need a Drawer component that consumers can use in their projects/apps.

Describe the use case for this feature

Sometimes users or consumers need to display information details from a list without navigating away from it.

Describe the solution you'd like

The drawer should have 3 slots:

• Header or Title
• Body
• Footer

The drawer should be able to slide in/out from a side of the page, the side can be set through a property/attribute (e.g.: placement: 'left' | 'right'. Should we consider the top and bottom as well? (e.g.: https://ant.design/components/drawer).

The user can close the drawer by clicking the X icon on the Header (near the title) or clicking outside the drawer. Still, this behavior should be flexible, meaning that the drawer should allow consumers to set whether the drawer closes when clicking outside (true by default).

The width of the drawer can be customized as well, according to Figma: 320px default.

Events to consider

• open: triggered when the drawer will open
• close: triggered when the drawer will close
• afterClose: triggered after the drawer has closed
• afterOpen: triggered after the drawer has open

Related Code

No response

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=3991%3A54955&mode=design&t=IM6eKno8O3mv7ODZ-1

Bug: Dialog closes when pressing Esc key even if `disable-close-esc-keydown` is enabled

BEEQ package

beeq/core

BEEQ version

1.1.0

Current Behavior

When using the <bq-dialog> component and enabling the disableCloseEscKeydown, the dialog gets closed.

Expected Behavior

The dialog should not close if disableCloseEscKeydown is enabled.

<bq-dialog disable-close-esc-key-down> ... </bq-dialog>

Steps to Reproduce

1. Go to Storybook: https://storybook.beeq.design/?path=/story/components-dialog--default
2. Enable disable-close-esc-keydown in the Controls panel
3. Press the Esc key
4. The dialog will close when it shouldn't.

Code Reproduction URL

No response

Your Environment

No response

Additional Information

CleanShot.2024-04-01.at.13.55.53.mp4

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Repository problems

These problems occurred while renovating this repository. View logs.

• WARN: Use matchDepPatterns instead of matchPackagePrefixes

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update storybook to v8.0.9 (@storybook/addon-a11y, @storybook/addon-actions, @storybook/addon-docs, @storybook/addon-essentials, @storybook/addon-links, @storybook/builder-vite, @storybook/web-components, @storybook/web-components-vite, storybook)
• chore(deps): update dependency @stencil/core to v4.17.1
• chore(deps): update npm dependencies (@commitlint/cli, @commitlint/config-angular, @swc/core, @swc/helpers, @typescript-eslint/eslint-plugin, @typescript-eslint/parser, postcss-preset-env, puppeteer, stylelint, vue)

Pending Status Checks

These updates await pending status checks. To force their creation now, click the checkbox below.

• chore(deps): update angular to v17.3.6 (@angular-devkit/build-angular, @angular/animations, @angular/cli, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/language-service, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, @schematics/angular)
• chore(deps): update nx to v18.3.4 (@nx/angular, @nx/devkit, @nx/esbuild, @nx/eslint, @nx/eslint-plugin, @nx/jest, @nx/js, @nx/plugin, @nx/react, @nx/rollup, @nx/storybook, @nx/workspace, nx)

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update all dependencies (@testing-library/react, eslint)

Detected dependencies

circleci

.circleci/config.yml

• nx 1.6.2

github-actions

.github/actions/cache-deps/action.yml

• actions/cache v4

.github/workflows/publish.yml

• actions/checkout v4
• volta-cli/action v4
• bitovi/github-actions-storybook-to-github-pages v1.0.3

npm

package.json

• @angular/animations 17.3.5
• @angular/common 17.3.5
• @angular/compiler 17.3.5
• @angular/core 17.3.5
• @angular/forms 17.3.5
• @angular/platform-browser 17.3.5
• @angular/platform-browser-dynamic 17.3.5
• @angular/router 17.3.5
• react 18.2.0
• react-dom 18.2.0
• rxjs 7.8.1
• tslib 2.6.2
• zone.js 0.14.4
• @angular-devkit/build-angular 17.3.5
• @angular-eslint/eslint-plugin 17.3.0
• @angular-eslint/eslint-plugin-template 17.3.0
• @angular/cli 17.3.5
• @angular/compiler-cli 17.3.5
• @angular/language-service 17.3.5
• @babel/core 7.24.4
• @babel/preset-react 7.24.1
• @beeq/storybook-addon-html 6.0.0
• @chromatic-com/storybook 1.3.3
• @commitlint/cli 19.2.2
• @commitlint/config-angular 19.2.2
• @commitlint/config-conventional 19.2.2
• @jscutlery/semver 5.2.2
• @nx/angular 18.3.3
• @nx/devkit 18.3.3
• @nx/esbuild 18.3.3
• @nx/eslint 18.3.3
• @nx/eslint-plugin 18.3.3
• @nx/jest 18.3.3
• @nx/js 18.3.3
• @nx/plugin 18.3.3
• @nx/react 18.3.3
• @nx/rollup 18.3.3
• @nx/storybook 18.3.3
• @nx/workspace 18.3.3
• @nxext/stencil 18.0.0
• @rollup/plugin-url 8.0.2
• @schematics/angular 17.3.5
• @stencil/angular-output-target 0.8.4
• @stencil/core 4.16.0
• @stencil/react-output-target 0.5.3
• @stencil/sass 3.0.11
• @stencil/vue-output-target 0.8.8
• @storybook/addon-a11y 8.0.8
• @storybook/addon-actions 8.0.8
• @storybook/addon-docs 8.0.8
• @storybook/addon-essentials 8.0.8
• @storybook/addon-links 8.0.8
• @storybook/builder-vite 8.0.8
• @storybook/mdx2-csf 1.1.0
• @storybook/web-components 8.0.8
• @storybook/web-components-vite 8.0.8
• @swc-node/register 1.9.0
• @swc/cli 0.3.12
• @swc/core 1.4.16
• @swc/helpers 0.5.10
• @testing-library/react 14.2.2
• @types/jest 29.5.12
• @types/mdx 2.0.13
• @types/node 20.12.7
• @types/react 18.2.79
• @types/react-dom 18.2.25
• @typescript-eslint/eslint-plugin 7.7.0
• @typescript-eslint/parser 7.7.0
• autoprefixer 10.4.19
• babel-jest 29.7.0
• chromatic 11.3.0
• core-js 3.37.0
• decompress 4.2.1
• eslint 8.57.0
• eslint-config-prettier 9.1.0
• eslint-import-resolver-typescript 3.6.1
• eslint-plugin-import 2.29.1
• eslint-plugin-jsx-a11y 6.8.0
• eslint-plugin-prettier 5.1.3
• eslint-plugin-react 7.34.1
• eslint-plugin-react-hooks 4.6.0
• eslint-plugin-storybook 0.8.0
• fs-extra 11.2.0
• husky 9.0.11
• jest 29.7.0
• jest-environment-jsdom 29.7.0
• jsdom 24.0.0
• jsonc-eslint-parser 2.4.0
• lint-staged 15.2.2
• lit 3.1.3
• lit-html 3.1.3
• nanospinner 1.1.0
• ng-packagr 17.3.0
• ngx-deploy-npm 8.0.1
• npm-run-all 4.1.5
• nx 18.3.3
• nx-stylelint 17.1.4
• plop 4.0.1
• postcss 8.4.38
• postcss-import 16.1.0
• postcss-preset-env 9.5.6
• postcss-url 10.1.3
• prettier 3.2.5
• prettier-plugin-tailwindcss 0.5.14
• puppeteer 22.6.5
• react-syntax-highlighter 15.5.0
• rimraf 5.0.5
• stencil-tailwind-plugin 1.8.0
• storybook 8.0.8
• stylelint 16.3.1
• stylelint-config-standard 36.0.0
• stylelint-config-standard-scss 13.1.0
• tailwindcss 3.4.3
• tailwindcss-theme-swapper 0.11.0
• ts-jest 29.1.2
• ts-node 10.9.2
• typescript 5.3.3
• vite 5.2.10
• vite-plugin-turbosnap 1.0.3
• vite-tsconfig-paths 4.3.2
• vue 3.4.23
• node 20.12.2
• npm 10.5.2

---

• Check this box to trigger a request for Renovate to run again on this repository

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Location: .github/renovate.json5
Error type: Invalid JSON5 (parsing failed)
Message: JSON5.parse error: JSON5: invalid character '{' at 116:5

Bug: BqSelect does not render/display the initial value defined

BEEQ package

beeq/react

BEEQ version

1.2.0

Current Behavior

BqSelect: initial value is not displayed in the input, although the corresponding option is marked as active (as expected).

Expected Behavior

BqSelect: the initial value should be displayed when the component loads.

Steps to Reproduce

function App() {
  const [selectedVale, setSelectedValue] = useState("Active");

  const handleSelect = (
    ev: CustomEvent<{ value: string | number | string[] }>
  ) => setSelectedValue(String(ev.detail.value));

  return (
    <div className="container">
      <p>Selected value: {selectedVale}</p>
      <br />
      <BqSelect
        name="select"
        disableClear={true}
        placeholder="Select a value"
        value={selectedVale}
        onBqSelect={handleSelect}
      >
        <BqOption value="Active">Active</BqOption>
        <BqOption value="Arhived">Arhived</BqOption>
      </BqSelect>
    </div>
  );
}

Code Reproduction URL

CodeSanbox example

Your Environment

No response

Additional Information

No response

Bug: bq-select leaks bqClose event from bq-tag

BEEQ package

beeq/core

BEEQ version

1.3.0

Current Behavior

bq-select with multiple property leaks bqClose event emitted by tag when closed.

Expected Behavior

bq-select should stop the propagation of bqClose.

Steps to Reproduce

Navigate to a instance of @beeq/core. In browser console

1. document.querySelector("bq-select").addEventListener("bqClose",console.log)
2. Close a tag

Screen.Recording.2024-04-25.at.09.46.16.mov

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

Bug: the Side menu does not display correctly the item's tooltip when collapsed

BEEQ package

beeq/core

BEEQ version

1.2.0

Current Behavior

The side menu does not show the tooltip of the menu items when is collapsed.

Expected Behavior

It should display the tooltip of each menu item on hover when the Side menu is collapsed.

Steps to Reproduce

It can be reproduced in the current storybook (related to the last version released: v1.2.0):
https://storybook.beeq.design/?path=/story/components-side-menu--collapse

Code Reproduction URL

https://storybook.beeq.design/?path=/story/components-side-menu--collapse

Your Environment

No response

Additional Information

No response

Bug: bq-slider lower value updated to max value

BEEQ package

beeq/core

BEEQ version

1.3.0

Current Behavior

When upper value is max value, upon changing lower value it is getting updated to max value.

Expected Behavior

Lower value should not be updated to max value.

Steps to Reproduce

Navigate to a instance of @beeq/core. In browser console

1. document.querySelector("bq-slider").value= JSON.stringify([30, 100])
2. document.querySelector("bq-slider").value= JSON.stringify([31, 100])

Screen.Recording.2024-04-23.at.17.38.35.mov

Code Reproduction URL

No response

Your Environment

No response

Additional Information

No response

Feat: Enable tooltip for slider

Describe the feature

The purpose of this feature is to have the ability to show a <bq-tooltip> to the slider thumb(s) for single and range variants.

Describe the use case for this feature

Showing a tooltip when the slider thumb(s) is hovered (or making it always visible) will provide consumers with better feedback when setting the slider value.

Describe the solution you'd like

Related Code

Additional Information

Feat: add support for multiple selections on the Select component

Describe the feature

I would like to have the possibility to select multiple options on the <BqSelect> component.

Describe the use case for this feature

Sometimes projects require having a multiple selection for use cases like filters.

Describe the solution you'd like

With the addition of a new property: multiple we could set a slightly different behavior for the select to allow multiple selections. On each selection, a tag is shown to display the text of the option selected. We could also delimit how many tags to show and display a +n after that.

Related Code

No response

Additional Information

Figma: https://www.figma.com/file/2VS47PTSkQWJkr7H6DpAdR/BEEQ-Design-System-(v1.0)?type=design&node-id=6614%3A36113&mode=design&t=WKqJqQpUSFH3Isug-1