Contributing to Shadcn UI

[00:00 - 00:09] In the previous lesson, you've learned about the ShadCNUI codebase and how to set up the development environment. In this lesson, you will learn how to contribute to the ShadCNUI codebase.

[00:10 - 00:25] The best places to find contribution opportunities are GitHub issues and GitHub discussions. Contributions can be anything from fixing a type of documentation to adding a new feature to the library.

[00:26 - 00:33] The first thing is issues. Issues are a great place to start. You can look for things to fix or to clarify.

[00:34 - 00:41] Navigate to the repository and click on the Issues tab. You will see a list of issues that you can filter by labels, projects and milestones.

[00:42 - 00:47] For example, you can filter by the bug label. This is everything that is not working.

[00:48 - 00:53] Sometimes you can help clarify. So a good first contribution could be just help people.

[00:54 - 01:01] Or even fix the bug that you are describing. A good first contribution could be adding labels to issues that doesn't have them yet.

[01:02 - 01:09] Or helping clarify the issues that require investigation. Issues should mostly include bugs or problems that needs to be fixed.

[01:10 - 01:17] Feature requests are belonging discussions. If someone else is already working on issues, it's a good idea to comment before you start working on it.

[01:18 - 01:25] Another thing to note is that sometimes people create issues that are not actually an issue. They might be asking questions or requesting a feature.

[01:26 - 01:43] It can be very helpful to help maintainers and help clarifying if it's an issue , a bug or belong to something like Stack Overflow. Another thing to remember is that ShadCNUI is built on top of Radix UI and tail wind CSS as you've learned about in the first module.

[01:44 - 01:52] It's possible that the actual issue in ShadCNUI is the bug in one of those libraries. And ShadCNUI will have little control over the example.

[01:53 - 01:58] This issue for example is a good idea. Here's an example of a good idea that you may be able to solve.

[01:59 - 02:09] In iPhone 15 Pro with Safari, when toggling the drawer, it flashes back and open on close. You can try and fix that.

[02:10 - 02:18] GitHub discussions are another place to look for things that you can help library maintainers with. Navigate to their repositories and click on the Discussions tab.

[02:19 - 02:25] They are divided into categories. Discussions can include feature requests, questions and ideas for the libraries .

[02:26 - 02:31] You can see it here. They are a great place to engage with the community and even get ideas for pull requests.

[02:32 - 02:38] Here is an example of a feature idea for the library that I'm seeing like a few times already. Adding a color picker.

[02:39 - 02:48] You can comment on the discussion, ask for more details or even start working on the feature. These are all just examples of ideas and discussions in the ShadCNUI repository .

[02:49 - 02:56] I really encourage you to explore the repository and find something that interests you. Let's make a pull request for the color picker.

[02:57 - 03:03] We can add a color picker component that make a pull request. It doesn't mean it will be merged, but it's a good example of how to make a pull request.

[03:04 - 03:15] Please do not go and add now a color picker pull request to ShadCNUI without first discussing it with the maintainers. This is just an example of what making a pull request might look like.

[03:16 - 03:22] You should already have the repository for and clone to your local machine. And if you don't, please refer to the previous lesson.

[03:23 - 03:34] The first step would be to create a new branch for the color picker feature. Open your terminal and navigate to the UI folder.

[03:35 - 03:44] Then run the git checkout command with dash b and color picker arguments. We now switch to a new branch color picker.

[03:45 - 03:53] Now install the react colorful package. It's a simple color picker for the app.

[03:54 - 03:59] And let's create a picker component. Open the ShadCNUI source code and create a new component.

[04:00 - 04:13] It require adding the component source and the component example. For both sides, we need to create a new files in apps /www/registre.

[04:14 - 04:30] And then inside the default folder, go to UI and create a new color picker T65. We're going to import the pipeta from Lucid React, which is the icon.

[04:31 - 04:46] Then we're going to import the hex color picker from React Colorful. And import the popover content and popover trigger components.

[04:47 - 05:02] From the registry default UI popover. Then let's select a list of default colors that we want to allow users to select.

[05:03 - 05:11] And export const color picker, which is the actual function. It will receive a color, which is a string, and a non-change function.

[05:12 - 05:26] As pops, it will receive the color and the on-change properties. The color is a string and the on-change function is a function that returns void and receive color as an argument.

[05:27 - 05:37] Then immediately return a div with a class name of flex item center in GapFord. And wrap everything in a popover.

[05:38 - 05:54] Then for the popover trigger, we'll render a simple color component that receives a color. And a wrapper property. The color component will be imported from the React Colorful component.

[05:55 - 06:01] Let's build the color component. Export const color. She's a color preview.

[06:02 - 06:08] Receives a color and on click. And whether it's a wrapper or not.

[06:09 - 06:14] So the wrapper is a Boolean. And the color is a string.

[06:15 - 06:38] And the on-click is a function that returns nothing and receives nothing. If we need to wrap everything, if it's a wrapper, then we want to return a div with a class name of flex size 8, item center and justify center, round the empty, and give it a bit of a border.

[06:39 - 06:49] You'll see in a second why we need the wrapper component type. Add an on-click handler. She's simply the on-click prop.

[06:50 - 06:59] And then render the color inside. It's a simple div with the size 4 class name and a rounded full class name as well.

[07:00 - 07:20] Then we want to apply an inline style with the background set to the color past as a prop. If we don't need it to be a wrapper, we can simply render the color, make its size 4, round it full, and scale it a bit when the user hover the component.

[07:21 - 07:39] Then for style apply the background, then apply the background to the color from the props, and the on-click function. And simply close the div. We now have the color component ready.

[07:40 - 07:46] On-click should be optional. Now render the popover content.

[07:47 - 08:14] Give it a class name of flex, height 14, item center, justify center, and a minor padding center, and a minor padding on the side and zero padding on the vertical. Then render a div that will show the default colors to the user.

[08:15 - 08:23] Loop through the default colors object. And then for each color, render the color component that we've created.

[08:24 - 08:35] The key will be the color, and the color will be the color. And on-click, call the on-change function.

[08:36 - 08:43] Don't forget to close it. And then we want to add another div, which will have another popover.

[08:44 - 08:54] It's a popover inside the popover. And the trigger will be the pipeta icon.

[08:55 - 09:14] Add a bit of a border and a bit of a padding, and render the pipeta icon. Inside the popover content, we want to render the hex color figure.

[09:15 - 09:21] On-change, we will call the on-change function. And for the color property, we'll simply pass the color.

[09:22 - 09:32] That's it, our component is ready. We now can copy and paste it into the New York folder inside UI, color-peaker.

[09:33 - 09:44] Don't forget to replace the popover to be from the New York style. The next step would be to add those to the registry.

[09:45 - 09:48] We've seen the registry before. Go to the UI registry.

[09:49 - 09:56] And add a color-peaker component. Everything here is ordered by the alphabet.

[09:57 - 10:05] So give it a name, color-peaker. A type of components UI.

[10:06 - 10:14] And then the dependencies are none. But the registry dependencies are the popover that we used.

[10:15 - 10:25] Then the dependencies are the React Color Full Package. The files are the UI/color-peaker.t6.

[10:26 - 10:36] And the registry dependencies are the popover that we've used. Let's add it to the examples registry as well.

[10:37 - 10:45] The color will call it color-peaker demo. The type would be components example.

[10:46 - 10:52] The registry dependencies popover. And the files are the example color-peaker demo.

[10:53 - 11:01] We don't need to add demos. So in both the New York and the UI, example folder, let's add the color-peaker demo.

[11:02 - 11:09] Copy and paste this. It's fairly simple.

[11:10 - 11:19] We're importing the color-peaker and use state-phone we add. We're calling the state with a default color and passing both props to the color-peaker component.

[11:20 - 11:30] Do the same in the default example registry. And the next step would be to add the color-peaker to the docs.

[11:31 - 11:42] Open the apps / www/content and components. And add the color-peaker.mdex file.

[11:43 - 11:54] Now let's add the color-peaker component, the documentation file. If you look at the other component documentation, you can see the title and description properties on the markdown definition.

[11:55 - 12:00] So let's copy and paste that. We can remove the links.

[12:01 - 12:10] In the description, we can write a color-peaker component. And the title would be color-peaker.

[12:11 - 12:21] Then we can render the component preview that we've seen earlier with the color -peaker demo value. We can add an installation.

[12:22 - 12:38] And we can copy from the collapsible implementation. We'd want to change the CLI command to add color-peaker.

[12:39 - 12:48] And in the manual, we want to include the manual steps. You have all the steps in the course text below, but we want to install React Colorful.

[12:49 - 12:59] And then simply copy and paste the component source that will be rendered based on the component source component. Now let's show the usage.

[13:00 - 13:06] The usage is simply importing the color-peaker. And rendering it.

[13:07 - 13:21] Now we navigate to app/www/config/docs.ts. And we need to add the components to the cybernet under the components.

[13:22 - 13:33] Alright. Before the combo box component, add a title color-peaker with an hf2docs-comp onents-color-peaker.

[13:34 - 13:39] And items equal to an empty array. Then don't forget to add the command.

[13:40 - 13:55] And then let's run the build command, Navigator-Terminal. And run pnpm, run build.registry.

[13:56 - 14:07] Go to the UI.ds where I forgot to add a comma. And we run the command.

[14:08 - 14:16] The registry was built successfully. And run pnpm-fielder = www.dev.

[14:17 - 14:38] Navigator-localhost with your port and go to docs. Navigator-localhost for me is 30003. Navigator-d docs.

[14:39 - 14:44] And locate the color-peaker. We can now see the color-peaker component.

[14:45 - 14:53] When I click on it, I can switch the color-peaker. And I can even pick a color-peaker from the hex color-peaker of React-color- foot.

[14:54 - 14:58] I can see the installation. And the usage documentation.

[14:59 - 15:08] I have a double installation. A double installation title that we can remove.

[15:09 - 15:15] Now it's time to commit and push changes to your fault. Shad senior I conduct contributing guidelines.

[15:16 - 15:19] Defines a committed structure for the project. It looks like this.

[15:20 - 15:31] A category, then scope all module, and a message. The categories are feature, which is a feature, a fix, refactor, docs, build, test, CI, and short.

[15:32 - 15:37] For new components, it's recommended to use the feature category. So we want to add everything that we've changed.

[15:38 - 15:45] And then commit with a feature color-peaker. Add color-peaker component.

[15:46 - 15:53] And then we can push two-hour branch. Remember, this is only a fault.

[15:54 - 16:01] I want to say something very important. Please do not create a pull request without discussing it with maintainers first.

[16:02 - 16:16] Please do not create a pull request with the course code for the color-peaker component, as it's just a demonstration of how the process of developing for the Shad senior I project looks like. And don't create a pull request with the commit message above.

[16:17 - 16:28] This is simply an example of the process of contributing to the library. If you actually want to contribute to Shad senior I, please follow the contributing guidelines and discuss your ideas with the maintainers first.

[16:29 - 16:34] That's it for this lesson. In the next lesson you will have an exercise contributing to Shad senior I.