as you can see on this log the CI and the engine vesion are mismatching. Please, set up the proper node version on the CI file.

the correct version is 18.16.0

Github actions have started using node 16 and the usage of old version is leading to the following warning:

More information on what needs to be done can be found in this github blog

I think the repo should have a contributing.md file, let me know, I can work on that.

the license icon is not rendering, feel free to choose other one you like

TODO:

• install dependecies ( devmode) // use yarn
• add configs
• add test script to package.json
• test one component

• check the other components to undertand the pattern and style-guide
• should be reusable

Alert example:

https://mui.com/material-ui/react-alert/

https://github.com/vczb/sagu-ui#component-customization

need to add a missing "O"

correct sentence:

"You have too many ways to customize the Sagu components"

• should be reusable
• follow the same pattern / style-guide from the other components

reference:

https://mui.com/material-ui/react-breadcrumbs/

Create a beautiful and reusable Switch component

follow the best practices, use the another components as reference.

take a look at all the components that we have and follow the same style-guide of the project ( colors / shadows / etc... )

src/packages/Switch
 index.tsx
 stories.tsx
 styles.ts

if you have any questions I'm available to help

add a new section like this:

https://github.com/vczb/gamou#who-is-contributing

Deprecation Warning on console

to reproduce:

Run the command

$ yarn lint

(node:73477) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./2020/" in the "exports" field module resolution of the package at /home/vini/src/sagu-ui/node_modules/es-abstract/package.json.
Update this package.json to use a subpath pattern like "./2020/*".
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:73477) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./helpers/" in the "exports" field module resolution of the package at /home/vini/src/sagu-ui/node_modules/es-abstract/package.json.
Update this package.json to use a subpath pattern like "./helpers/*".

We should improve the Theme Customization section on here:

should improve this exemple as:

....
  Object.assign(theme.colors.primary, { medium: "#510763" });

  return (
    <SaguProvider theme={theme}>
....

and here:

  const customColors = {
    tertiary: {
      lighter: "#fb973a",
      light: "#e37c1d",
      medium: "#da710f",
      dark: "#9e4c01"
    }
  };

  Object.assign(theme.colors, customColors);
  
  return (
    <SaguProvider theme={theme}>

please, be smart... you need to keep the rest of the example and add the improvement, make sure that it is properly formatted etc... thanks

Create a new component for our library.

Before starting, check what we already have:

• Sagu UI Documentation
• GitHub Issues
• Components

Review the code of some existing components and use them as examples for styling and structure.

Feel free to be creative. If you need any help, don't hesitate to ask. :)

FIY: This issue will remain open during all Hacktoberfest ( at least). More than 1 person can be assigned to it and submit new components

Thanks 🚀

Should create a new action workflow that verify best practices

Best practices rules:

1. Only one commit per PR

Only these rule for now.

if has icon should NOT render the title

Hey team,

So, I was thinking, tooltips are pretty handy, right? They're like little hints that show up when you hover over something. Thought it might be cool to have in saga ui.

Basic Ideas:

Positioning: Maybe have it pop up at the bottom?
Content: Just some text to start with.
Delay: A quick pop after hovering?
Arrow: A little arrow pointing at the thing?
I'd love to give it a try if everyone's on board. Thoughts?

check the other components to undertand the style-guide and patterns

• should be single or double
• optional primary or secondary color

range reference:

https://codepen.io/vczb/pen/zYvWjyj

feel free to be creative

• should be reusable
• use the same pattern / style-guide to the other components

table reference:

https://mui.com/material-ui/react-table/

Please, add a cool emoji for each section. like this one:

the section list

• Installation
• Usage
• Theme customization
• Component customization
• Examples
• Contributing
• What is inside?
• Available commands
• Project structure
• Our Amazing Contributors 🌟 // this section already have emoji
• License

be creative

the Pagination component is not working as expected, I remove their storie and comment the exports

TODO:

• check other components to understand our patterns
• feel free to remove all logic/styles from this component and restart from scratch
• you can use this code as a reference, it looks very simple and easy to copy/paste
• adapt the implementation to use our own patterns and design system
• create a storie for it
• remove the comment on the exports ( mentioned in the description )

nice to have:

you can add tests if you want to

CONTEXT:

if you do not set any label it looks weird

It happens because the input element has a padding-top setted

TODO:

In case of the label is not set remove the padding-top

Please follow the best practices when implementing this solution

https://vczb.github.io/sagu-ui/?path=/story/textfield--default&args=label:

Update the package to the latest stable version

https://storybook.js.org/

• make sure that you do not introduce any breaking change
• build the storybook to double-check the building

both components are not working as expected, lets add for each component a warning message on the index.tsx file saying the component will be removed on 2.2.0 version.

console.warn('Deprecation warning: This component will be removed on v2.2.0, Use "Container" instead')

will be nice if you create a method under utils for send this message, this method should contain the name of who will be deprecated, the version, and optionally what to do instead.

pseudo code

export const logDeprecationWarning = (who:string, version:string, instead?:string) => {
   let message = `Deprecation warning: ${who} will be removed on ${version}.`;
    if(instead){
        message += ` Use ${instead} instead.` 
    }
    console.warn(message)
}

create a new component following the same pattern/style-guide as the other components that we have.

AutoComplete behaviour reference: https://mui.com/pt/material-ui/react-autocomplete/

move the file spacingModifier to the styles dir

change all related imports

make sure nothing is broking

optional:
you can move using git mv

note: if you don't know how to use it, just move it at any way

there are some skipped tests under the codebase, please fix it 🙌

create a new optional prop named dots ( default false ) that increment dots for each slide that we have on the slider.

when the user click on the dot ( eg 3 ) should go to the slide 3

use the slide Single Item as exemple of behaviour

create beautiful dots, follow or current style-guide ( colors, shadows, etc )

here is our slider component

note: single image should not render the dot

Write tests for the checkbox and radio components per #7 . I can work on this.

You can use this one as reference:

https://codepen.io/smashtheshell/pen/qrvZvx

note:

• label should be optional
• use or own design system colors

• Check the other components to undertand the pattern and style guide
• Should be reusable

Accordeon example:

https://mui.com/material-ui/react-accordion/

• check the other components to understand the pattern and style-guide
• should be reusable

ProgreesBar example:

https://getbootstrap.com/2.3.2/components.html#progress

https://vczb.github.io/sagu-ui/?path=/story/paper--default

Adds test coverage to Paper component for additional props. From #7.

• should be reusable
• follow the same pattern / style-guide from the others

reference:

https://mui.com/material-ui/react-stepper/

create a new component following the pattern/style-guide of the components that we already have.

Any questions I'm glad to help

change here

from theme.colors.base.info to theme.colors.primary.light

• should be reusable
• follow the same patterns at the other components

reference:

https://mui.com/material-ui/react-skeleton/

should investigate and fix the build on the CI

https://github.com/vczb/sagu-ui/actions/runs/4365660452/jobs/7634591925

Create a codesandbox ( or other ) examples and add it to the EXAMPLES.md file.

No limit of examples, more than 1 developer can join on this issue. Feel free to submit your PR.

check other components to undestand the style-guide and patterns

example avatar component:

https://mui.com/material-ui/react-avatar/

we already have a lot of unit tests on the codebase, but not all components are tested, feel free to choose one and test it. Take a loot on the others to reference

Create a new component "Grid", it should behave exacly as the material-ui one

https://mui.com/material-ui/react-grid/

Hey there,

Been playing around with saga-ui and thought – why not have a Toast component? Toasts are like those pop-ups you see when something happens, like a heads-up or a quick "you did this" message.

Basic Ideas:

Variants: Thinking about the usual ones like Success or Error.
Position: Top-right corner seems cool.
Duration: Not too long, not too short. Just enough to read.
Dismiss: A little 'X' or a tap/click to make it go away?
Would love to take a shot at it and see how it goes. What do you think?

There are some mistakes that we need to fix:

1. The 7 should be 6, and the 6 should be 7 (invert)

2. Update 8 to "Test your changes"

3. Fix code of conduct URL

it should be

https://github.com/vczb/sagu-ui/blob/main/CODE_OF_CONDUCT.md

thanks in advance

on the readme we have this text "styled-components are required"

should be:

_[styled-components](https://github.com/styled-components/styled-components) package is required_

it should look like this:

styled-components package is required

From #7 there are many components to test.

This issue is to track testing of the Slider component.

check the other components to undertand the patterns and styles

reference: https://mui.com/material-ui/react-rating/

• Check the other components to understand the design system and the patterns

Pagination reference:

https://mui.com/pt/material-ui/react-pagination/

At Button component you need to change the import of the padding to the right path.

it should be: import { SpacingKeys } from '../../styles/spacingModifier'

run the storybook yarn sb and make sure that it works as expected