paljs / ui

React Styled Components with bootstrap grid system

What is Pal.js UI?

Pal.js UI is a set of essential modules for your next React application.

The purpose of the modules is to solve generic tasks faster and more efficient so that you can focus on business logic and leave routine behind.

What's included

Pal.js UI npm package contain two things:

• Pal.js UI Theme
  • Theme System - set of TypeScript object, which allows you to modify application look & feel by changing variables, with fewer custom styles.
  • Responsive breakpoints - have function to use in your Styled Components breakpointUp breakpointDown breakpointBetween breakpointOnly.
  • Server-side rendering compatibility!
  • Right-to-left writing system support for all components.
• Pal.js UI Components
  • Global components (Layout-Card-FlipCard-RevealCard-Accordion-List).
  • Navigation components (Sidebar-Menu-Tabs-Actions).
  • Forms components (InputGroup-Radio-Select-Checkbox-Button).
  • Grid components (Container-Row-Col).
  • Modals & Overlays components (Popover-Toastr-Tooltip-ContextMenu).
  • Extra components (Search-User-Badge-Alert-ProgressBar-ChatUI-Spinner).

EVA ICON @paljs/eva-icon

• This is icons package passed on eva-icon package.

• Admin dashboard starter kit gatsby-admin-template - Admin dashboard template based on Gatsby with @paljs/ui component package.

The purpose

There are a lot of awesome front-end frameworks out there these days. They provide a massive quantity of useful features making our lives more comfortable. Our intention is not to create a new one as we are pretty much aware of the complexity and amount of work developers put on their creations. But as developers, we feel that nowadays front-end development is disjointed. You have to search for libraries, go through the different installation process, everything looks different, and sometimes it's just annoying that you can't just sit and start going. That's why we are on a mission to assemble together the most useful modules and libraries, join them with a unified application and graphical interface creating a great toolkit for easier setup.

Assumptions

This documentation assumes that you are already familiar with JavaScript, React, CSS and Bootstrap.

Have questions?

Didn't find something here? Look through the issues or simply drop us a line at [email protected].

ui's Issues

How to add react-icons in menu insetad of EvaIcon?

List with multiple columns

The lists seem to handle only values with a single column (the title of the table). Is there a way to make it multi-column ? Or maybe am I using the wrong component ?

Add support for React 18

It is now necessary to update the project to support React 18.

React select types as a dev dependency

Add react-select types as a dev dependency. I have created a branch to fix this issue but I am not able to push that branch.
Please provide a guideline for contribution.

add custom component to menuItem

I wish I could put a custom component in the menuItem. For example, to put a badge to display real-time information from a table. Here is concept ex).

import { MenuItemType } from '@paljs/ui';

const items: MenuItemType[] = [
  { title: 'Home Page', icon: { name: 'home' }, link: { href: '/admin' } },
  {
    title: 'Models',
    icon: { name: 'layers-outline' },
    children: [
      {
        title: 'Users',
        link: { href: '/admin/models/User' } },
        extras: [ // <- this
          { position: 'prefix', component: <Hello /> },
          { position: 'postfix', component: <World /> },
        ],
    ],
  },
];
export default items;

Duplicated Box on CheckBox component

I am trying to use a Checkbox component, but it is showing a duplicated box on the screen.

Code:

<CardFooter>
        <Row className="m-0" style={{justifyContent:'space-between'}}>
          <Checkbox
            checked={isChecked}
            onChange={() => setIsChecked(!isChecked)}
          >
            Li e concordo
          </Checkbox>

          <Button
            status="Primary"
            onClick={onSave}
            type="button"
            size="Small"
            disabled={!isChecked} 
            style={{marginLeft: "10px"}}
          >
            Enviar Oportunidade
          </Button>
        </Row>
 </CardFooter>

PALJs version: "@paljs/ui": "^1.1.1"

Dynamic path

Hi dear contributors,
Dynamic paths such as "/user/:id" are supported ?
I looked for this feature for 2 hours but I didn't achieve...
Thanks in advance !

EDIT: I'm reoping this issue because I found a solution but acutally the all page is reloading, maybe you know another way
I added this code :

gatsby-node.js

exports.onCreatePage = ({ page, actions }) => {
  const { createPage } = actions;

  if (['/login/', '/register/', '/forgotten-password/', '/reset-password/'].includes(page.path)) {
    page.context.layout = 'auth';
    createPage(page);
  }
  if (page.path.match(/^\/user\/medical-file\//)) {
    page.matchPath = '/user/medical-file/*';
    page.path = '/user/medical-file';
    page.context.isDynamicPath = true;
    createPage(page);
  }
};

Layouts/index.tsx

<LayoutColumns>
    <LayoutColumn className="main-content">
      {pageContext.isDynamicPath ? (
        <Router>
          <MedicalFile path="/user/medical-file/:reference" />
        </Router>
      ) : (
        children
      )}
    </LayoutColumn>
  </LayoutColumns>

Possible breaking change with usePopoverPosition event propagation after upgrade to React 17

The window.addEventListener and window.removeEventListener calls in the following area may need the { capture: true } option added due to a change in how React 17 now attaches event listeners to the root app element. I was using this hook in a custom component that expected click events on other popover targets to bubble up (not calling event.stopPropagation) and trigger closing of the currently displayed popover. This stopped working properly after upgrading to React 17 seemingly due to the bubbling now only going up to the root app element.

ui/packages/ui/src/utils/popoverPosition.ts

Lines 142 to 148 in c8054f0

	window.addEventListener('resize', positionHandle);
	window.addEventListener('orientationchange', positionHandle);
	layout.addEventListener('scroll', positionHandle);
	window.addEventListener('click', onClickHandle);
	if (props.eventListener) {
	document.querySelector(props.eventListener)?.addEventListener('scroll', positionHandle);
	}

See https://reactjs.org/blog/2020/08/10/react-v17-rc.html#fixing-potential-issues

Some missing features

Dear contributors,

I try to using paljs/ui in my project, i like components with styled-components + bootstrap. Thank you for your great contribution.
But i can not found some features as other libraries having.

• Checkbox do not allow to add ref (requirement of react-hook-form)
• Menu item supports very little capacity of customization. It's hard to add n menus at top of sidebar, and m menu at bottom of sidebar. I think library need to allow to add some customized css to MenuItem
• I do not like EvaIcon, and want to using FontAwesome as alternative. But no way to do, except clone source code and edit by myself to support FontAwesome.

Versions:
paljs/ui: 1.0.4
paljs/icons: 1.0.4