nordcloud / gnui Goto Github PK

What problem does this feature solve?

There is a lack of HTML attributes in Button types src/components/button/Button.tsx

What is expected?

The button should accept all HTML attributes and all existing custom props.

The parameters.options.showRoots option is deprecated and set to change in v7 for StoryBook. The current location changes to be under sidebar namespace. I have made a PR to address these changes as well.

What problem does this feature solve?

There is a duplication, setColor function has been declared in all components where is used.

What is expected?

Global setColor function in utils. Refactor all usage of this function and replace it to the global one.

https://github.com/santosfrancisco/react-awesome-styled-grid
Has some issues that require using patch-package - santosfrancisco/react-awesome-styled-grid#138

It would be great to find a replacement with similar capabilities (grid + media quey utils), requirements:

• low amount of dependencies
• Typescript native
• modern api (hooks)
• actively maintained

Tasks:

• Implement alternative solution
• Refactor usages of react-awesome-styled-grid
• Add guide for migration

• Table
• Fix all @typescript-eslint/no-explicit-any and fp/no-mutation warnings

Check out https://blog.agney.dev/styled-components-&-typescript/

https://github.com/nordcloud/GNUI/tree/master/src/components/timeRangePicker
https://master.du3gff836giqw.amplifyapp.com/?path=/docs/forms-timerangepicker--timerangepicker

Tasks:

• Add tests for TimeRangePicker component, example scenarios:
  • Selects day from calendar, range list of days is properly adjusted
  • Disallows selection of invalid Custom hours (to earlier than from)
  • Back/Forward arrows are working

https://github.com/nordcloud/GNUI/tree/master/src/components/button
https://master.du3gff836giqw.amplifyapp.com/?path=/docs/components-button--default-story

Tasks:

• Add tests for component listed above, example test cases:
  • Rendering of ButtonIcon based on provided initialState
  • Rendering of dynamic styles with severity medium/low
  • Working as Anchor (as="a", linkTo, href)

What problem does this feature solve?

The expanded accordion has the wrong story implementation

What is expected?

• Only one element inside the accordion

Add proper types inside:

• RadioButton component
• Popover component
• types helpers
• Multiselect component
• Container component
• IndeterminateCheckbox component

All @typescript-eslint/no-explicit-any warnings should be resolved in those files

Prop types need to be improved, so Typescript takes props from element passed as polymorphic component ("as").
This could be tricky considering linkTo prop.
Useful resource: https://react-typescript-cheatsheet.netlify.app/docs/advanced/patterns_by_usecase#polymorphic-components-eg-with-as-props

download attribute should be available when we pass anchor as a polymorphic element.

<Button as="a" download />

It shouldn't be available when the default element ("button") is used, e.g.

// This throws error
<Button download />

https://github.com/nordcloud/GNUI/tree/master/src/components/tabs
https://master.du3gff836giqw.amplifyapp.com/?path=/docs/components-tabs--default-story

Tasks:

• Add tests for Tabs component, example scenarios:
  • Tabs change on click, active styles are applied
  • Proper tab content is rendered when Tab becomes active
  • Captions are displayed inside label, custom label is rendered properly
  • Disabled Tab is not interactive
  • Wizard renders buttons, proper callback get's executed on button click

File src/utils/svgicons.tsx

contains React jsx icon paths, the paths should be moved to the IconPaths folder inside components/, then imported and returned inside svgicons.tsx file.

Some components take only a few props that are required for logic inside their code, they should spread all of the remaining props that was passed into them to the native html element, you should also remove redundant native attributes/event handlers from props type interface and extend it with the one provided by React.

You can see how it should be done inside
src/components/checkbox/Checkbox.tsx
src/components/switch/Switch.tsx

Components to refactor:

• src/components/toggle
• src/components/text (fix types)
• src/components/svgicon (fix types)
• src/components/selectbutton (fix types)
• src/components/message/Message.tsx (fix types)

• Add proper types inside Accordion component
• All @typescript-eslint/no-explicit-any warnings should be resolved in this file

Recently, when using Klarity on API keys view, I've stumbled upon the case when Popover does not change it's visibility when clicking on other Popovers triggers.

I was able to reproduce the behaviour in Storybook with multiple Popovers and by clicking the triggers including their icons. Posting recording below.

• Add proper types inside Dropdown component
• All @typescript-eslint/no-explicit-any warnings should be resolved in this file

The Preview block for StoryBook is deprecated in favor of Canvas as of v6.0.0, which is the current release. I have made a PR to address these changes as well.

https://github.com/nordcloud/GNUI/tree/master/src/components/modal
https://master.du3gff836giqw.amplifyapp.com/?path=/docs/components-modal--basic-modal

Tasks:

• Create tests for Modal component, example scenarios:
  • Open/Close actions, verify modal is displayed/hidden
  • Content is properly rendered inside Modal
  • Provided actions are executed

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

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• Update dependency @rollup/plugin-commonjs to ^25.0.8
• Update dependency eslint to ^8.57.0
• Update dependency polished to ^4.3.1
• Update dependency typescript to ^5.4.5
• Update Storybook updates to v8 (major) (@storybook/addon-essentials, @storybook/addon-mdx-gfm, @storybook/blocks, @storybook/react, @storybook/react-vite, @storybook/theming, storybook)
• Update Stylelint packages to v14 (major) (stylelint, stylelint-config-recommended)
• Update dependency @rollup/plugin-commonjs to v26
• Update dependency @testing-library/user-event to v14
• Update dependency @types/node to v20
• Update dependency date-fns to v3
• Update dependency eslint to v9
• Update dependency husky to v9
• Update dependency jsdom to v23
• Update dependency jsdom to v24
• Update dependency knip to v3
• Update dependency knip to v4
• Update dependency knip to v5
• Update dependency lint-staged to v14
• Update dependency lint-staged to v15
• Update dependency patch-package to v7
• Update dependency patch-package to v8
• Update dependency react-awesome-styled-grid to v4
• Update dependency react-content-loader to v7
• Update dependency rollup to v4
• Update dependency styled-components to v6
• Update dependency stylelint to v15
• Update dependency stylelint to v16
• Update dependency stylelint-config-recommended to v10
• Update dependency stylelint-config-recommended to v11
• Update dependency stylelint-config-recommended to v12
• Update dependency stylelint-config-recommended to v13
• Update dependency stylelint-config-recommended to v6
• Update dependency stylelint-config-recommended to v7
• Update dependency stylelint-config-recommended to v8
• Update dependency stylelint-config-recommended to v9
• Update dependency vitest to v1
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency vite to v4.5.3 [SECURITY]
• Update dependency elliptic to ~6.5.5
• Update Storybook updates (@storybook/addon-essentials, @storybook/addon-mdx-gfm, @storybook/addons, @storybook/blocks, @storybook/react, @storybook/react-vite, @storybook/theming, storybook)
• Update dependency @testing-library/jest-dom to ^6.4.6
• Update dependency @types/node to ^18.19.34
• Update Non-critical tooling packages (lockfile-lint, npm-run-all, prettier)
• Update dependency react-day-picker to ^8.10.1
• Update dependency react-select to ^5.8.0
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

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

• Refactor all components to be declared as function declarations
• Make sure all eslint warnings related to react/function-component-definition rule are resolved

More info on the topic https://kentcdodds.com/blog/how-to-write-a-react-component-in-typescript

• Add proper types inside Tabs component
• All @typescript-eslint/no-explicit-any warnings should be resolved in this file

https://github.com/nordcloud/GNUI/tree/master/src/components/dropdown
https://master.du3gff836giqw.amplifyapp.com/?path=/docs/forms-dropdown--dropdown

Tasks:

• Add tests for Dropdown component, example test cases:
  • Select option & verify it's displayed
  • Clear selected option (X button)
  • Search box properly filters options

The Switch component's last example in Storybook didn't include a readyOnly attribute and React was giving an error about assuming mutability instead of the developer making it explicit. I have made a PR to address these changes as well.

Right now, all of the *.stories.mdx files reside inside src/stories folder,
please move every story to its component folder.

Most of our types inside src/theme/index.tsx are very generic right now, e.g.

type Borders = { [key: string]: string };

they should be strongly typed according to possible values, the video below might be helpful in this task:

Icon components are in the utils/ folder
src/utils/decos.tsx

Move them to the components/

Right now, we use Typescript compilation to create dist folder that gets published.
"compile:publish": "tsc --project tsconfig.publish.json"

We should introduce proper bundler (https://rollupjs.org/ is preferred for libraries) and create proper config for bundling & releasing the package.

https://github.com/nordcloud/GNUI/tree/master/src/components/tooltip
https://master.du3gff836giqw.amplifyapp.com/?path=/docs/components-tooltip--default-story

Tasks:

• Add tests for Tooltip component, scenarios:
  • tooltip correctly appears in relation to provided position prop (position: right/left, bottom: true/false)
  • caption is properly displayed
  • Tooltip appears on hover & dissapears on mouse leave

Remove:

src/utils/wInfo.ts
src/utils/img

The Input component example in Storybook didn't include a readyOnly attribute and React was giving an error about assuming mutability instead of the developer making it explicit. I have made a PR to address these changes as well.

What problem does this feature solve?

There is no consistency in types.

What is expected?

Change all types if possible from an interface to type.
Change naming convention to Pascal Case and Props or Data prefix.

• when clicking on a label, input does not focus
• label/input props are not spread on native elements that block the possibility to provide accessible attributes (such as aria-)

What problem does this feature solve?

There is a typo in the word IBackgroudProps src/components/modal/types.ts and other places where this type is imported.

What is expected?

To remove typo.

The goal of this task is to create universal style of importing React and using React apis to be easily distinguished from the rest of the code (e.g. built-in hooks vs custom hooks).

• Refactor React imports to namespace import - import * as React from React;
• Refactor React api usages to the new import style e.g.
  React.useEffect(() => instead of useEffect(() => or React.ReactNode instead of ReactNode

https://epicreact.dev/importing-react-through-the-ages/

There's a handy hook that we use in our internal projects that is used to handle boolean states.

import { useCallback, useState } from "react";

export function useDisclosure(isOpenDefault = false) {
  const [isOpen, setIsOpen] = useState(isOpenDefault);

  const open = useCallback(() => setIsOpen(true), []);
  const close = useCallback(() => setIsOpen(false), []);

  const toggle = useCallback((toSet?: boolean) => {
    if (typeof toSet === "undefined") {
      setIsOpen((state) => !state);
    } else {
      setIsOpen(toSet);
    }
  }, []);

  return { isOpen, open, close, toggle };
}

Tasks:

• Add above hook to src/hooks
• Refactor usages of boolean states inside the codebase to useDisclosure
• To find code that requires refactor, make use of global search and search for useState(false) or useState(true)