outposthq / jengaui Goto Github PK

Description

expected behaviour - ondismiss to be triggered

Link to Reproduction

Steps to reproduce

• create a dialog form
• write a console log in onDismiss prop
• open it.
• click outside.
• no console log on dismiss

Jenga UI Version

0.1.5

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

none

• Contextual Save Bar
• Navigation
• Navigation
• Product Card
• Topbar

Description

expected behaviour - labelStyles to apply styles

Link to Reproduction

Steps to reproduce

Create a FileInput component and try to apply label styles.

Jenga UI Version

0.1.5

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

API

• Unstyled
• Composable
• Customizable
• Consistent

Accessibility

• WAI-ARIA Compliant
• Screen Reader Support
• Typehead Support
• Keyboard Navigation
• Focus Management
• RTL Support

Features

• Incremental adoption
• TypeScript support
• Save Time. Ship Faster.

https://spectrum.adobe.com/page/tree-view/
https://mui.com/material-ui/react-tree-view/#main-content

https://react-spectrum.adobe.com/react-stately/useTreeData.html
https://react-spectrum.adobe.com/react-stately/useTreeState.html
https://github.com/adobe/react-spectrum/tree/main/packages/%40react-spectrum/tree

• GridProvider
• BreakpointsProvider
• StylesProvider
• CopySnippet
• Form
• PrismCode
• Tabs
• DirectoryTree
• SearchResults
• TopBar
• AlertDialog (Stories)
• Dialog (Stories)
• Notification
• Tooltip

• Slider
• Range Slider

Description

Problem Statement/Justification

Proposed Solution or API

give a prop that accepts JengaButtonProps and is consumed by the file-upload button

Alternatives

<FileInput styles={{Button:{...button styles}}} /> //basically data-element=Button

but this is no use to give predefined themes like outlined, clear, etc.

Additional Information

• Avatar
• Badge
• Buttons
• Button Groups
• Checkboxes
• Chips
• Exception List
• Footer Help
• Footer
• Links
• Message Error
• Pagination & Icon Button
• Progress Bar
• Radio Buttons
• Range Slider
• Switches
• Tags
• Text Inputs
• Thumbnails

Checklist:

• Item Context :{isExpanded,setExpanded}
• fix current disclosure icon
• item styling
• title styling
• allow other icons for disclosure

... reply to add other features

Warning:

Warning: useLayoutEffect does nothing on the server because its effect cannot be encoded into the server renderer’s output format.
This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client

Root Issue: facebook/react#14927

Details about useLayoutEffect:

• https://reactjs.org/docs/hooks-reference.html#uselayouteffect

Possible Solutions ->

• https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
• change useLayoutEffect to useEffect if !browser

Description

currently, the labelPosistion prop for form, field, and a lot of input components accepts one value of type LabelPosition which is not responsive.

Problem Statement/Justification

A responsive label position will make writing form components less redundant as you won't have to write two or more components with identical content but different styles while catering to different viewports.
This will also help save the current state of the form when there is a resize.

Proposed Solution or API

To make things responsive, change the prop to accept LabelPostion | LabelPostion[] and stylize the labels and inputs according to the breakpoint.

Alternatives

None.

Additional Information

Creating Documentation for Jenga-UI.

Task List

• Header
• SideBar
• Footer
• Doc Pages
• Blog List Page
• Blog Page
• Index/Home Page
• Policy Page

Description

setting a border on the select element sets two borders

Link to Reproduction

local

Steps to reproduce

Code:

Result:

Jenga UI Version

latest

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

The table component fails with react 18 ( controlplane) , works fine in react 17 (next-app folder) due to react-stately

This Invalid Hook Call is due to mismatched react and react-dom version.
I have tried downgrading deps of react-aria,react-stately to the [15-feb release verisons] (https://react-spectrum.adobe.com/releases/2022-02-15.html)( before react 18 support)
I have also tried upgrading deps(newpackage.json) to the newest versions.
Both fail to solve this issue.
Branch -> https://github.com/OutpostHQ/jenga-ui/tree/table-deps-change/controlplane
For Reference -> adobe/react-spectrum#2800

• Fix Accordion export from @jenga-ui/react (Accordion Import from Accordion package is working, however from @jenga-ui/react there is an issue).
• Fix 2 pending Tests (use-alert-dialog-api.test.tsx and notification.test.tsx)
• Fix Changeset Release https://github.com/OutpostHQ/jenga-ui/runs/8210487881?check_suite_focus=true

• Optimize bundle size to 5kb or max 10kb minified for each packages.
• Fix issues with pnpm migration.

• Account Connection
• Action List
• Banner
• Bottom Navigation
• Card
• Callout Card
• Choice List
• Color Picker
• Data Table
• Date Picker
• Dialogue Box
• Dropzone
• Empty State
• Filters
• Forms
• Menus
• Media Card
• Modal
• Option List
• Page Action
• Popover
• Resource List
• Search
• Sheet
• Setting Toggle
• Tabs
• Text Area
• Toast
• Tooltip

Jenga-UI currently lacks an accordion component like Chakra UI Accordion

Description

There is no way to set color to placeholder text in TextInputs

Link to Reproduction

.

Steps to reproduce

Use any TextInput element with a background color.

Jenga UI Version

latest

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

No response

NextJs provides the 'next/link' component that helps with client-side routing for internal pages which currently cannot be used in conjunction with the 'Jenga-UI/link' component.

possible approach -> https://chakra-ui.com/docs/components/link#usage-with-nextjs