prismaneui/prismane

Prismane is an innovative have-it-all React UI library

Prismane

A React UI library built with ease of use in mind.

Key Features • How To Use • Storybook • Credits • License

Key Features

• Custom styling system
• Dynamic theming out of the box
• Built in support for dark and light theme variants
• 111+ React components
• 26+ custom hooks
• 27+ custom form validators

How To Use

Read Documentation

# With yarn
yarn add @prismane/core

# With npm
npm install @prismane/core

Storybook

Our Storybook is uploaded to Chromatic and is automatically updated with every change.

Storybook on Chromatic

Credits

This package uses the following packages:

• React
• Phosphor Icons
• Stitches

License

MIT

---

GitHub @prismaneui  ·  Twitter @prismaneui  ·  Reddit r/prismane

prismane's Issues

Fix Button component's full prop

Button's full prop should trigger full width, instead of toggling flex-grow, due to the fact that flex-grow will grow the button vertically.

useDebounce hook same description as useCounter

Fix Form Validator Type

Form validator now accepts only a function that returns a value of type string or null. There is no type support for async validators and one should be added.

Divider to support sizes

Divider to support PrismaneBreakpoints sizes and custom ones.

Fix slogan on the website

Change the slogan on the website:
Develop faster than ever and ship your products way quicker.

Fix date validators date format

When validating a date with the before and after validators, the format of the date is too big and interrupts the error message.

Create a useNetworkStatus Hook

Create a useSorting Hook

Put a highlighted note for the fonts used in the examples

Write a note and highlight it what font is used in the examples, and how to add it to your project.
(The idea is that I expect to copy/paste the example and see what I see in the docs)

Wrong position in useDraggable hook page

• There are wrong position of the draggable element
• Also, the dragging doesn't work properly

Fix NativeDateField color

NativeDateField's calendar icon appears black on some web browsers (Chrome)

Remove outline and focus on select element

Add select element to the list of inputs whose focus outline are removed inside index.css

Add border-radius to Theme Object

The border-radius property should be available to be customized and should be included inside the Theme Object.

Create a CI/CD pipeline

Create a CI/CD pipeline

Put a highlighted note for the icons used in the examples

Write a note and highlight it what icon set is used in the examples, and how to add it to your project.
(The idea is that I expect to copy/paste the example and see what I see in the docs)

Wrong RegEx for email address

Subdomain/Domain

The RegEx would allow domain names like [email protected].

Solution

Better work with repeating capture groups here.

TLD

This part of the RegEx specified here is too strict:
https://github.com/prismaneui/prismane/blob/3d0a71233e4a101066ad4f6891ae62c59076db1b/src/validators/validators.ts#L104C50-L104C55

Reason being that top level domains often exceed the specified 6 characters and can TECHNICALLY also only consist of a single one.

Most up-to-date source from IANA directly
http://data.iana.org/TLD/tlds-alpha-by-domain.txt

Brief description
https://en.wikipedia.org/wiki/List_of_Internet_top-level_domains

Solution:

Replace {2,6} with +

Thoughts on character sets in foreign languages

I'll just leave this here to think about: 钱华林@中科院.**

Button's icon possition to have the ability to change positions

The button icon should support changing its position. From left to right side of the button.

Examples across the docs are hidden inside their frame

Some examples like tooltips or dropdowns or color picker are not being fully displayed (look like they are in a overflow:hidden container)

Radio stops being selectable

When using the Radio.Group and Radio components, the Radio's become uncheckable after a few clicks.

Generate unique id for form components, if no name is provided

If the user does not provide the name prop for the form components, a unique id should be generated to keep the normal functioning of labels.

Tabs component to use a lighter background on light mode

The Tabs.Tab component should have a lighter background when being hovered on light mode.

Fix Versatile Component Type

Versatile components seem to have an issue with some of the properties of the component that is passed to the as prop.

Fix Tooltip positions

Tooltip component's positions are inaccurate in some cases.

Add unit tests for every component, hook and form validator

Prismane should have unit tests for every feature that it offers. This will prevent from releasing unstable and untested versions.

Remove TypeScript hints from examples

Keep JavaScript only examples.
Remove the types from the examples across the components/hooks.

Example:
https://www.prismane.io/docs/components/form

Add Page Description Meta Tags

Modal to prevent user from interacting with other elements

The modal should take focus and prevent the user from interacting with elements outside of the modal with the keyboard. Integrating dialog element will fix the issue.

Create a useScroll Hook

Fix Popover positions

Popover component's positions are inaccurate in some cases.

validators match is not working properly in prismane.io website

When I enter "password" in password field and same "password" in repassword field.

Expected Result: Form should submit successfully

Actual Result: Getting Error "Fields must match"

Wrong API documentation for useForm

Button icon -> rightIcon and leftIcon

I think a Button can have both a rightIcon and leftIcon prop similar to Chakra UI.

Willing to work on this

Duplicate of the selection in useIdle hook

Toaster component does not stay in place

Hi, In the Toaster section of the docs, I noticed that when the toast is called it is not sticky as it is supposed to rather it is relative to the starting position of the screen. If you call the toast and start scrolling it scrolls as well. Not sure if this is something docs related or component related.

Toaster component to have more space

The Toaster component is too close to the page, it needs some more spacing.

Fix Pseudo Class Prop Type

Style Props do not support pseudo-classes.

Fix Progress component size

Progress component without a label appears too big, sizes should be smaller.

Select fields keyboard highlights not displayed

Select fields support keyboard navigation, but no highlight of the selected item is shown.

Chip's icon possition to have the ability to change positions

The chip's icon should support changing its position. From left to right side of the chip.

ColorField - Wider dropdown panel and horizontal scrollbar

When you open the ColorField options, the panel is not wide enough for all the options listed.
There is also no horizontal scrollability to the options list (in case they are too many).

AutocompleteField's dropdown height constraints

AutocompleteField does not have any height constraints. Should have a max-height and become scrollable after.

Fix TexareaField size

The size prop does not change TextareaFields's size, only it's label's size.

Create a useFocusTrap Hook

Think about separating components into sections

Layout, Feedback, Form, Navigation, Typography ...

Dialog component to be centered horizontally by default

The Dialog component now opens in the top-right corner of the page and should be centered horizontally and to be at the top vertically.

Add importing of the CSS styles to the provider

Make the provider to auto-import the CSS styles

TypeError when import Breadcumb.Item and Breadcrumb.Separator

<Breadcrumb className="text-sm"> <Breadcrumb.Item href="/">Home</Breadcrumb.Item> <Breadcrumb.Separator /> <Breadcrumb.Item href="/">Products</Breadcrumb.Item> <Breadcrumb.Separator /> <Breadcrumb.Item href={/?filters=${product.category.join(",")}}> {product.category.join(", ")} </Breadcrumb.Item> <Breadcrumb.Separator /> <Breadcrumb.Item className="text-neutral-950"> {product.name} </Breadcrumb.Item> </Breadcrumb>

TypeError: "Type '{ children: string; href: string; }' is not assignable to type 'IntrinsicAttributes & Omit<ForwardRefExoticComponent<(Omit<{ justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined; align?: "center" | "end" | "start" | "baseline" | "stretch" | undefined; ... 6 more ...; wrap?: "wrap" | ... 2 more ... | undefined; } & ... 5 more ... & PrismaneComponent,...'.\n Property 'children' does not exist on type 'IntrinsicAttributes & Omit<ForwardRefExoticComponent<(Omit<{ justify?: "center" | "end" | "start" | "between" | "around" | "evenly" | undefined; align?: "center" | "end" | "start" | "baseline" | "stretch" | undefined; ... 6 more ...; wrap?: "wrap" | ... 2 more ... | undefined; } & ... 5 more ... & PrismaneComponent,...'."

TypeError: "Property '$$typeof' is missing in type '{}' but required in type 'Omit<ForwardRefExoticComponent<Omit<BreadcrumbSeparatorProps, "ref"> & RefAttributes>, "ref">'."

Version: "@prismane/core": "^0.2.2",

Deploy storybook to chromatic and share it

Hi,

It would be awesome to view the storybook without clone the repo,

thanks!

Table of contents for hooks page

Select field doesn't have borders when used on my project