# ViewComponents

This repository contains the Ruby view components for the Ariadne design system. It is composed of several projects:

* [Tailwind CSS](https://tailwindcss.com)
* [Heroicons](https://heroicons.com)
* [ViewComponents](https://viewcomponent.org)
* [StimulusJS](https://stimulus.hotwired.dev)

This project is basically a fork and rewrite of [Primer's ViewComponents](https://primer.style/view-components/), except instead of Primer, it uses an open source stack we've found useful. **Our eternal gratitude to GitHub's design team for open sourcing that repo.**

## Using the gem

todo, lol

```ruby
 <%= render(Ariadne::HeadingComponent.new(tag: :h1)) { "H1 Text" } %>
```

```ruby
DEFAULT_TAG = :div
DEFAULT_CLASSES = "bg-yellow-400"
    def initialize(tag: DEFAULT_TAG, classes: "", attributes: {})
      @tag = check_incoming_tag(DEFAULT_TAG, tag)
      @classes = class_names(DEFAULT_CLASSES, classes)
      @attributes = attributes
      @attributes[:id] = "myId"
    end
```

document schemes, fetch_or_raise, all that

### Incorporating Rubocop and other linters

This gem comes with some standard linters to keep your code fresh and consistent. Refer to [the documentation](./docs/content/linting.md) for more information.

## Getting started with development

So, you just cloned the repo, huh? Great. In addition to Ruby >= 2.7 (3.x preferred), install [Overmind](https://github.com/DarthSim/overmind) and Node/NPM. Then, run the following script to set up your local environment:

```
script/setup
```

This will install all the necessary dependencies, plus get you ready for viewing the components and generating the documentation.

If you then run `script/server`, this will build and run both the documentation site and launch Lookbook.

### Adding new components

See [the documentation on adding new components](./docs/content/adding_components.md).

### Running tests

See [the documentation on testing](./docs/content/testing.md).

### Generating Documentation and Lookbook

Run `script/docs` to get a build of the documentation running at `localhost:5400`. The documentation comes from the YARD comments, and all of the markdowns files in `./docs`. You can define the TOC navigation in `docs/src/@primer/gatsby-theme-doctocat/nav.yml`.

You can generate and view a [Lookbook](https://github.com/allmarkedup/lookbook) site via the `script/lookbook` command.

For more information on writing documentation and presenting the components via Loobook, [here's more information](./docs/content/documentation.md)

### Publishing a Release

To publish a release, you must have an account on [rubygems](https://rubygems.org/) and [npmjs](https://www.npmjs.com/). Additionally, you must have been added as a maintainer to the project. Please verify that you have 2FA enabled on both accounts.

1. Once the changesets release PR has been approved and merged, run `script/publish`. This will build and publish the packages. You may be prompted to log into your rubygem and npm account.