Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set up dev environment #9

Merged
merged 16 commits into from
Jun 12, 2024
Merged

Set up dev environment #9

merged 16 commits into from
Jun 12, 2024

Conversation

bluzky
Copy link
Owner

@bluzky bluzky commented Jun 10, 2024

  • add tailwind & tail config
  • Add tailwind plugin
  • update gitignore to ignore node_modules directory

Summary by Sourcery

This pull request sets up the development environment by integrating Tailwind CSS with a custom configuration, updating the gitignore file to exclude node_modules, and adding necessary build configurations for Tailwind.

  • New Features:
    • Integrated Tailwind CSS into the project with a custom configuration.
  • Enhancements:
    • Updated the gitignore file to exclude the node_modules directory.
  • Build:
    • Added Tailwind CSS and its configuration to the project's build setup.

Summary by CodeRabbit

  • New Features

    • Introduced Tailwind CSS configurations and custom color definitions for enhanced design flexibility.
    • Added tailwindcss-animate package for animation support.
  • Chores

    • Updated .gitignore to include node_modules/ and improved formatting.
    • Added Tailwind CSS and related configurations to the project setup.

- add tailwind & tail config
- Add tailwind plugin
- update gitignore to ignore node_modules directory
Copy link

sourcery-ai bot commented Jun 10, 2024

Reviewer's Guide by Sourcery

This pull request sets up the development environment by integrating Tailwind CSS into the project. It includes adding Tailwind and its configuration, updating the gitignore file to exclude the node_modules directory, and configuring Tailwind plugins.

File-Level Changes

Files Changes
assets/tailwind.colors.json
config/config.exs
assets/tailwind.config.json
Added and configured Tailwind CSS with custom colors and plugins.

Tips
  • Trigger a new Sourcery review by commenting @sourcery-ai review on the pull request.
  • You can change your review settings at any time by accessing your dashboard:
    • Enable or disable the Sourcery-generated pull request summary or reviewer's guide;
    • Change the review language;
  • You can always contact us if you have any questions or feedback.

Copy link

coderabbitai bot commented Jun 10, 2024

Walkthrough

The recent changes involve updating the .gitignore file, adding a new package to assets/package.json, and introducing new configuration files for Tailwind CSS. Additionally, config/config.exs and mix.exs have been updated to include Tailwind-specific configurations and dependencies. These changes enhance the project's styling capabilities by integrating Tailwind CSS and related tools.

Changes

Files Change Summary
.gitignore Added node_modules/ and fixed formatting
assets/package.json Added tailwindcss-animate package as a dev dependency
assets/tailwind.colors.json Introduced new JSON file defining custom color values
assets/tailwind.config.json Added new Tailwind CSS configuration file with content paths, theme extensions, and plugins
config/config.exs Added configurations for Tailwind and Tails, specifying versions, arguments, paths, and colors
mix.exs Added {:tailwind, "~> 0.2", only: [:dev, :test], runtime: Mix.env() == :dev} as a dependency

Poem

In code we trust, with Tailwind we soar,
Colors and configs, our project’s core.
With node_modules ignored, and packages in place,
Our styles now dance with elegant grace.
A rabbit’s delight, in CSS’s embrace,
Hop, hop, hooray, our code’s new face! 🐇✨


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

Copy link

@sourcery-ai sourcery-ai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @bluzky - I've reviewed your changes and they look great!

Here's what I looked at during the review
  • 🟡 General issues: 6 issues found
  • 🟢 Security: all looks good
  • 🟢 Testing: all looks good
  • 🟢 Complexity: all looks good

Sourcery is free for open source - if you like our reviews please consider sharing them ✨
Help me be more useful! Please click 👍 or 👎 on each comment to tell me if it was helpful.

@@ -49,7 +49,8 @@ defmodule SaladUI.MixProject do
{:phoenix_live_view, "~> 0.20.1"},
{:tails, "~> 0.1.5"},
{:styler, "~> 0.7", only: [:dev, :test], runtime: false},
{:ex_doc, ">= 0.0.0", only: :dev, runtime: false}
{:ex_doc, ">= 0.0.0", only: :dev, runtime: false},
{:tailwind, "~> 0.2", only: [:dev, :test], runtime: Mix.env() == :dev}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider consistency in specifying environments

In the dependencies list, some entries specify environments using only: :dev while others use only: [:dev, :test]. For consistency and clarity, it might be better to standardize this across all dependencies.

Suggested change
{:tailwind, "~> 0.2", only: [:dev, :test], runtime: Mix.env() == :dev}
{:tailwind, "~> 0.2", only: :dev, runtime: false}

@@ -0,0 +1,35 @@
{
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider adding a comment header

Adding a comment header at the top of the JSON file can provide context or instructions for future maintainers. For example, you could mention that this file defines the color palette for Tailwind CSS.

Suggested change
{
/*
* This file defines the color palette for Tailwind CSS.
*/
{

@@ -0,0 +1,22 @@
import Config
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider adding a module docstring

Adding a module docstring at the top of the config file can help explain the purpose of the configurations and any important details about the setup.

Suggested change
import Config
# This configuration file is used to set up the Tailwind CSS framework.
# It includes settings and options that tailor the behavior of Tailwind
# to fit the needs of the project.
import Config

cd: Path.expand("../assets", __DIR__)
]

config :tails, colors_file: Path.join(File.cwd!(), "assets/tailwind.colors.json")
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider using Path.expand/2 for better readability

Using Path.expand("assets/tailwind.colors.json", File.cwd!()) can improve readability and consistency with other path expansions in the file.

Suggested change
config :tails, colors_file: Path.join(File.cwd!(), "assets/tailwind.colors.json")
config :tails, colors_file: Path.expand("assets/tailwind.colors.json", File.cwd!())

@@ -0,0 +1,19 @@
// See the Tailwind configuration guide for advanced usage
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion: Consider adding a version comment

Adding a comment specifying the version of Tailwind CSS this configuration is intended for can help future maintainers understand compatibility.

Suggested change
// See the Tailwind configuration guide for advanced usage
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
// Tailwind CSS version: v3.2.4

module.exports = {
content: [
"../../../config/*.*exs",
"../lib/**/*.ex"
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

suggestion (performance): Consider adding more specific paths

Specifying more precise paths for the content array can help reduce the build time and avoid unnecessary file scanning.

Suggested change
"../lib/**/*.ex"
"../lib/**/*.{ex,exs}"

Copy link

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 1

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 7000644 and dcc8acb.

Files ignored due to path filters (2)
  • assets/package-lock.json is excluded by !**/package-lock.json
  • mix.lock is excluded by !**/*.lock
Files selected for processing (6)
  • .gitignore (1 hunks)
  • assets/package.json (1 hunks)
  • assets/tailwind.colors.json (1 hunks)
  • assets/tailwind.config.json (1 hunks)
  • config/config.exs (1 hunks)
  • mix.exs (1 hunks)
Files skipped from review due to trivial changes (3)
  • .gitignore
  • assets/package.json
  • assets/tailwind.colors.json
Additional context used
Biome
assets/tailwind.config.json

[error] 1-1: Expected an array, an object, or a literal but instead found '// See the Tailwind configuration guide for advanced usage'. (parse)

Expected an array, an object, or a literal here.


[error] 4-4: unexpected character . (parse)


[error] 4-4: unexpected character = (parse)


[error] 5-5: Property key must be double quoted (parse)


[error] 9-9: Property key must be double quoted (parse)


[error] 10-10: Property key must be double quoted (parse)


[error] 11-11: Property key must be double quoted (parse)


[error] 11-11: String values must be double quoted. (parse)


[error] 11-11: unexpected character ( (parse)


[error] 11-11: expected , but instead found "./tailwind.colors.json" (parse)

Remove "./tailwind.colors.json"


[error] 11-11: unexpected character ) (parse)


[error] 12-12: Expected a property but instead found '}'. (parse)

Expected a property here.


[error] 13-13: Expected a property but instead found '}'. (parse)

Expected a property here.


[error] 14-14: Property key must be double quoted (parse)


[error] 15-15: String values must be double quoted. (parse)


[error] 15-15: unexpected character ( (parse)


[error] 15-15: expected , but instead found "@tailwindcss/forms" (parse)

Remove "@tailwindcss/forms"


[error] 15-15: unexpected character ) (parse)


[error] 16-16: String values must be double quoted. (parse)


[error] 16-16: unexpected character ( (parse)

Additional comments not posted (2)
config/config.exs (1)

1-22: Configuration in config.exs looks correct and well-structured.

Ensure that the paths and versions specified match the project requirements and that the tailwind.colors.json file is correctly placed and accessible.

mix.exs (1)

52-53: The addition of the tailwind dependency is correctly configured.

Ensure that this dependency is compatible with other project dependencies and that it functions as expected in the specified environments (development and test).

Comment on lines +1 to +19
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration

module.exports = {
content: [
"../../../config/*.*exs",
"../lib/**/*.ex"
],
theme: {
extend: {
colors: require("./tailwind.colors.json"),
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("tailwindcss-animate"),
],
};
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Correct syntax errors in the Tailwind configuration.

- // See the Tailwind configuration guide for advanced usage
- // https://tailwindcss.com/docs/configuration
+ /* See the Tailwind configuration guide for advanced usage */
+ /* https://tailwindcss.com/docs/configuration */
- module.exports = {
+ const config = {
-   content: [
+   "content": [
-     "../../../config/*.*exs",
+     "../../../config/*.*exs",  // Ensure this path is correct
-     "../lib/**/*.ex"
+     "../lib/**/*.ex"
-   ],
+   ],
-   theme: {
+   "theme": {
-     extend: {
+     "extend": {
-       colors: require("./tailwind.colors.json"),
+       "colors": require("./tailwind.colors.json"),
-     },
+     },
-   },
+   },
-   plugins: [
+   "plugins": [
-     require("@tailwindcss/forms"),
+     require("@tailwindcss/forms"),
-     require("@tailwindcss/typography"),
+     require("@tailwindcss/typography"),
-     require("tailwindcss-animate"),
+     require("tailwindcss-animate"),
-   ],
+   ],
- };
+ };
+ module.exports = config;

Ensure that all keys are properly quoted and comments are in block style to comply with JSON standards. Also, verify the paths specified in the content array.

Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration
module.exports = {
content: [
"../../../config/*.*exs",
"../lib/**/*.ex"
],
theme: {
extend: {
colors: require("./tailwind.colors.json"),
},
},
plugins: [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("tailwindcss-animate"),
],
};
/* See the Tailwind configuration guide for advanced usage */
/* https://tailwindcss.com/docs/configuration */
const config = {
"content": [
"../../../config/*.*exs", // Ensure this path is correct
"../lib/**/*.ex"
],
"theme": {
"extend": {
"colors": require("./tailwind.colors.json"),
},
},
"plugins": [
require("@tailwindcss/forms"),
require("@tailwindcss/typography"),
require("tailwindcss-animate"),
],
};
module.exports = config;
Tools
Biome

[error] 1-1: Expected an array, an object, or a literal but instead found '// See the Tailwind configuration guide for advanced usage'. (parse)

Expected an array, an object, or a literal here.


[error] 4-4: unexpected character . (parse)


[error] 4-4: unexpected character = (parse)


[error] 5-5: Property key must be double quoted (parse)


[error] 9-9: Property key must be double quoted (parse)


[error] 10-10: Property key must be double quoted (parse)


[error] 11-11: Property key must be double quoted (parse)


[error] 11-11: String values must be double quoted. (parse)


[error] 11-11: unexpected character ( (parse)


[error] 11-11: expected , but instead found "./tailwind.colors.json" (parse)

Remove "./tailwind.colors.json"


[error] 11-11: unexpected character ) (parse)


[error] 12-12: Expected a property but instead found '}'. (parse)

Expected a property here.


[error] 13-13: Expected a property but instead found '}'. (parse)

Expected a property here.


[error] 14-14: Property key must be double quoted (parse)


[error] 15-15: String values must be double quoted. (parse)


[error] 15-15: unexpected character ( (parse)


[error] 15-15: expected , but instead found "@tailwindcss/forms" (parse)

Remove "@tailwindcss/forms"


[error] 15-15: unexpected character ) (parse)


[error] 16-16: String values must be double quoted. (parse)


[error] 16-16: unexpected character ( (parse)

kamaroly and others added 15 commits June 10, 2024 21:51
Setting up tests
@bluzky bluzky merged commit 4231f94 into main Jun 12, 2024
3 checks passed
@bluzky bluzky deleted the setup-dev branch June 12, 2024 15:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants