Skip to content

Commit

Permalink
Add component guidelines for PlaceCal
Browse files Browse the repository at this point in the history
Added component guidelines for PlaceCal. This will allow
new contributors easily understand how to interact with components
when developing.
  • Loading branch information
lenikadali committed Nov 26, 2024
1 parent 92ab534 commit a3903a1
Showing 1 changed file with 47 additions and 0 deletions.
47 changes: 47 additions & 0 deletions app/components/guidelines.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
# Component Guidelines

## About

This serves as the reference documentation for components in PlaceCal (how to generate them etc).
In case you find something unclear, inaccurate or out of date, please feel to create a new issue describing what needs doing :smile:

## Technical Details

PlaceCal currently uses [ViewComponent](https://viewcomponent.org/) for all new components. Previously the gem [`mountain_view`](https://github.com/devnacho/mountain_view) was used but has since been deprecated and is in the process of being removed (see [this issue](https://github.com/geeksforsocialchange/PlaceCal/issues/2270))

### Creating a new component

[Follow the instructions](https://viewcomponent.org/guide/generators.html) over on the ViewComponents' documentation to generate a new component.

### Folder structure

For simple components, the component and its template should appear in `app/components/` as shown below:

```
components
├── address_component.rb # Component definition
└── address_component.html.erb # HTML template
```

For more complex components, they should have their own folder. Using the above as an example, the folder structure would look like so:

```
components
├── address_component.rb # Component definition
└── address_component
   ├── address_component.html.erb # HTML template
   ├── address_component.js # Optional: Stimulus controller
   └── address_component.scss # Optional: Component-namespaced scss
```

### Linting

Components follow the same conventions as regular Ruby on Rails code. RuboCop gets run as part of our [pre-commit](https://github.com/geeksforsocialchange/PlaceCal/blob/main/package.json#L33-L36) hooks so any violations found will automatically be fixed. Whatever can't be fixed, you'll have to fix yourself :grinning:

### Testing

When testing components, please make sure that you write unit tests that only exercise the component's rendering logic. This means that no usage of VCR or an overly elaborate test data setup within the component test.

### Il8n

Localization is handled by the files in the `config/locales` directory.

0 comments on commit a3903a1

Please sign in to comment.