feat: tailwind border-radius code #419

aqsaaqeel · 2023-07-26T12:43:05Z

Added tailwind code generator for border radius property

Fixes Issue

**My PR closes #416 **

👨‍💻 Changes proposed(What did you do ?)

✔️ Check List (Check all the applicable boxes)

[] My code follows the code style of this project.
[] This PR does not contain plagiarized content.
[] The title and description of the PR is clear and explains the approach.

Note to reviewers

📷 Screenshots

Added tailwind code generator for border radius property

vercel · 2023-07-26T12:43:08Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
code-magic	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 30, 2023 4:15pm

github-actions

PR Compliance Checks Passed!

Dun-sin · 2023-07-26T17:50:18Z

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Issue Reference In order to be considered for merging, the pull request description must refer to a specific issue number. This is described in our Contributing Guide. This check is looking for a phrase similar to: "Fixes #XYZ" or "Resolves #XYZ" where XYZ is the issue number that this PR is meant to address.

@aqsaaqeel

Dun-sin · 2023-07-29T17:12:49Z

src/lib/packages.ts

      break;
    case 'border-radius':
-      codeToCopy = ``;
+      codeToCopy = `<div class="rounded-sm"></div>`;


This is hard coded and not what this project is about, please look at what this person did for this PR, this is what is expected #421

aqsaaqeel · 2023-07-29T20:15:16Z

https://github.com/Dun-sin/Code-Magic/pull/419/commits
This is the latest commit that tackles the issue of hard-coded values and now can take any arbitrary value. I have tested the code that is generated when clicking on "copy tailwind code" button on this sandbox https://codesandbox.io/s/react-tailwind-3-0-279d3?file=/src/App.js and it works.
This layout 👇

produced this 👇 border-radius style

Note: The issue that I faced initially was that Tailwind versions below 2.1 did not support arbitrary values. They had to be hard-coded. Only Tailwind version3.0 and above allow arbitrary values to be used on the go. otherwise in versions 2.0-2.9 have to include a JIT mode in config file to allow arbitrary values.
I have a simple suggestion of adding a note for the user on the website to show that the code that is generated is supported by Tailwind version 3.0.

aqsaaqeel · 2023-07-29T20:21:22Z

I have made the changes but I am facing some issues with the commit not being on the branch that I created. @Dun-sin can you help out?

Dun-sin · 2023-07-29T20:24:19Z

https://github.com/Dun-sin/Code-Magic/pull/419/commits
This is the latest commit that tackles the issue of hard-coded values and now can take any arbitrary value. I have tested the code that is generated when clicking on "copy tailwind code" button on this sandbox and it works.
This layout 👇

produced this 👇 border-radius style

Note: The issue that I faced initially was that Tailwind versions below 2.1 did not support arbitrary values. They had to be hard-coded. Only Tailwind version3.0 and above allow arbitrary values to be used on the go. otherwise in versions 2.0-2.9 have to include a JIT mode in config file to allow arbitrary values.
I have a simple suggestion of adding a note for the user on the website to show that the code that is generated is supported by Tailwind version 3.0.

Most people will use the latest anyway. So not a problem

Dun-sin · 2023-07-29T20:26:52Z

I have made the changes but I am facing some issues with the commit not being on the branch that I created. @Dun-sin can you help out?

I don't understand what you mean, I see the commit in this PR, the only problem is the vercel build error

aqsaaqeel · 2023-07-29T20:31:14Z

I have made the changes but I am facing some issues with the commit not being on the branch that I created. @Dun-sin can you help out?

I don't understand what you mean, I see the commit in this PR, the only problem is the vercel build error
I am unable to view the vercel build details, how do i check why my build is failing?

Dun-sin · 2023-07-29T20:50:28Z

I have made the changes but I am facing some issues with the commit not being on the branch that I created. @Dun-sin can you help out?

I don't understand what you mean, I see the commit in this PR, the only problem is the vercel build error
I am unable to view the vercel build details, how do i check why my build is failing?

You can run npm run build will be the same error that you get

aqsaaqeel · 2023-07-29T21:14:19Z

I have made the changes but I am facing some issues with the commit not being on the branch that I created. @Dun-sin can you help out?

I don't understand what you mean, I see the commit in this PR, the only problem is the vercel build error
I am unable to view the vercel build details, how do i check why my build is failing?

You can run npm run build will be the same error that you get

So I looked into this. The reason my build is failing is that I am adding another parameter to this function copyTailwindCodeToClipboard(attribute, outputElement); so now I need to add the second parameter in all the files which are calling this function.
This worked for all other files but when I go to input-range.ts file, this does not work because We are not returning a similar getOutput function here. So I need to make a few more changes in this file. Should I go ahead and make those changes?

Dun-sin · 2023-07-29T21:24:22Z

I have made the changes but I am facing some issues with the commit not being on the branch that I created. @Dun-sin can you help out?

I don't understand what you mean, I see the commit in this PR, the only problem is the vercel build error
I am unable to view the vercel build details, how do i check why my build is failing?

You can run npm run build will be the same error that you get

So I looked into this. The reason my build is failing is that I am adding another parameter to this function copyTailwindCodeToClipboard(attribute, outputElement); so now I need to add the second parameter in all the files which are calling this function.
This worked for all other files but when I go to input-range.ts file, this does not work because We are not returning a similar getOutput function here. So I need to make a few more changes in this file. Should I go ahead and make those changes?

You can make the second argument optional

aqsaaqeel · 2023-07-30T16:17:51Z

@Dun-sin I've made the second parameter optional as you advised and the build is not breaking. Can you review?

Dun-sin

Looks good on the code end will check the preview, consider giving the project a star🔥

Dun-sin · 2023-07-30T16:26:32Z

It works🔥

Dun-sin · 2023-07-30T16:27:49Z

🎉 This PR is included in version 2.58.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

aqsaaqeel · 2023-07-30T16:27:57Z

It works🔥

Thank you @Dun-sin for helping out!

feat: tailwind border-radius code

8982008

Added tailwind code generator for border radius property

vercel bot deployed to Preview July 26, 2023 12:43 View deployment

github-actions bot reviewed Jul 26, 2023

View reviewed changes

Dun-sin requested changes Jul 29, 2023

View reviewed changes

fix: added custom value for radius

491d9c5

vercel bot had a problem deploying to Preview July 29, 2023 19:57 Failure

fix: build error fixed

02597a3

vercel bot deployed to Preview July 30, 2023 16:15 View deployment

Dun-sin approved these changes Jul 30, 2023

View reviewed changes

Dun-sin merged commit 4d63fe2 into Dun-sin:main Jul 30, 2023

Dun-sin added the released label Jul 30, 2023

Dun-sin mentioned this pull request Aug 2, 2023

feat: Added tailwindcss code for boxShadow #433

Merged

3 tasks

feat: tailwind border-radius code #419

feat: tailwind border-radius code #419

Uh oh!

Conversation

aqsaaqeel commented Jul 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Fixes Issue

👨‍💻 Changes proposed(What did you do ?)

✔️ Check List (Check all the applicable boxes)

Note to reviewers

📷 Screenshots

Uh oh!

vercel bot commented Jul 26, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Dun-sin commented Jul 26, 2023

PR Compliance Checks

Uh oh!

Dun-sin Jul 29, 2023

Choose a reason for hiding this comment

Uh oh!

aqsaaqeel commented Jul 29, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aqsaaqeel commented Jul 29, 2023

Uh oh!

Dun-sin commented Jul 29, 2023

Uh oh!

Dun-sin commented Jul 29, 2023

Uh oh!

aqsaaqeel commented Jul 29, 2023

Uh oh!

Dun-sin commented Jul 29, 2023

Uh oh!

aqsaaqeel commented Jul 29, 2023

Uh oh!

Dun-sin commented Jul 29, 2023

Uh oh!

aqsaaqeel commented Jul 30, 2023

Uh oh!

Dun-sin left a comment

Choose a reason for hiding this comment

Uh oh!

Dun-sin commented Jul 30, 2023

Uh oh!

Dun-sin commented Jul 30, 2023

Uh oh!

aqsaaqeel commented Jul 30, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aqsaaqeel commented Jul 26, 2023 •

edited

Loading

vercel bot commented Jul 26, 2023 •

edited

Loading

github-actions bot left a comment •

edited

Loading

aqsaaqeel commented Jul 29, 2023 •

edited

Loading