vident 0.7.0 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fec9413d88c42202dce9386932c39b6caee8add4a12bc3983447226785da0e3c
-  data.tar.gz: aaf6f4626cd32a21ed12b372a1d340e5a8056c37e20e059052053a0ce56a59cb
+  metadata.gz: 9144ee8a1b3361914b568d5dfbdcc22df506818813573e91ede2302e3a6775aa
+  data.tar.gz: 6476408b4f5acf6e4dd40d96539df7fb5588bb225200d3fbd05d35310a7c1c2d
 SHA512:
-  metadata.gz: 26fc4e800be45c42a08ea263d7d26bac7f47d987044525d2da3dee52ceed5e799cb1a1372ca94a0d039961702b252d7ddd42c5f387477888fb8e09e12ff06fcd
-  data.tar.gz: 3cf469fcdc2851ea4da8dd683b47642aacd7dadce53b77a0a450d882a7b61a1897054386ac213f756ea6be2784afd5d4afeed348a7b58fc818daaadf418b933a
+  metadata.gz: 3098fa53c35329dc0ab5bbae9c4d2ca368ce8d9486fa5cfad29fddf8b006bed162dd8eb89cc1b76d42be91daecb0f0b41f979c866734f5a05f99580936444728
+  data.tar.gz: 47dff0e200721e7b48498e13cb27cf58fd7b0da9be6b428be201bb4f73593ffc233a459dc2e0b16f2c925097c65956a274a41c3707c1bfb45be1eccc7b2edbc7

data/README.md

@@ -1,59 +1,46 @@
 # Vident
 
-Vident helps you create flexible & maintainable component libraries for your application.
+**Vident** is a collection of gems that help you create **flexible** & **maintainable** component libraries for your Rails application.
 
-Vident makes using Stimulus with your [`ViewComponent`](https://viewcomponent.org/) or [`Phlex`](https://phlex.fun) components easier.
+<a href="https://github.com/stevegeek/vident"><img alt="Vident logo" src="https://raw.githubusercontent.com/stevegeek/vident/main/logo-by-sd-256-colors.png" width="180" /></a>
+
+Vident also provides a neat Ruby DSL to make wiring up **Stimulus easier & less error prone** in your view components.
+
+[`ViewComponent`](https://viewcomponent.org/) and [`Phlex`](https://phlex.fun) supported.
 
 # Motivation
 
 I love working with Stimulus, but I find manually crafting the data attributes for
-targets and actions error prone and tedious. Vident aims to make this process easier
-and keep me thinking in Ruby. 
+targets and actions error-prone and tedious. Vident aims to make this process easier
+and keep me thinking in Ruby.
 
-I have been using Vident with `ViewComponent` in production apps for a while now and it has been constantly
-evolving.
+I have been using Vident with `ViewComponent` in production apps for a while now (and recently `Phlex`!) 
+and it has been constantly evolving.
 
 This gem is a work in progress and I would love to get your feedback and contributions!
 
-## What does Vident provide?
-
-- `Vident::Component`: A mixin for your `ViewComponent` components or `Phlex` components that provides the a helper to create the
-  root element component (in templated or template-less components).
+# Vident is a collection of gems
 
-- `Vident::TypedComponent`: like `Vident::Component` but uses `dry-types` to define typed attributes for your components.
+The core gems are:
 
-### Various utilities
+- [`vident`](https://github.com/stevegeek/vident) to get the base functionality
+- [`vident-typed`](https://github.com/stevegeek/vident-typed) to optionally define typed attributes for your view components
 
-- `Vident::Tailwind`: a mixin for your vident component which uses [tailwind_merge](https://github.com/gjtorikian/tailwind_merge) to merge TailwindCSS classes
-  so you can easily override classes when rendering a component. 
+Gems that provide support for `ViewComponent` and `Phlex`:
 
-- `Vident::Caching::CacheKey`: a mixin for your vident component which provides a `cache_key` method that can be used to generate a cache key for
-  fragment caching or etag generation.
+- [`vident-view_component`](https://github.com/stevegeek/vident-view_component) for using with `ViewComponent` and untyped attributes
+- [`vident-typed-view_component`](https://github.com/stevegeek/vident-typed-view_component) for using with `ViewComponent` and typed attributes
+- [`vident-phlex`](https://github.com/stevegeek/vident-phlex) for using with `Phlex` and untyped attributes
+- [`vident-typed-phlex`](https://github.com/stevegeek/vident-typed-phlex) for using with `Phlex` and typed attributes
 
-- `Vident::RootComponent::*` which are components for creating the 'root' element in your view components. Similar to `Primer::BaseComponent` but
-  exposes a simple API for configuring and adding Stimulus controllers, targets and actions. Normally you create these
-  using the `root` helper method on `Vident::Component`/`Vident::TypedComponent`.
+There is also:
 
-# Features
-
-- A helper to create the root HTML element for your component, which then handles creation of attributes.
-- Component arguments are defined using the `attribute` method which allows you to define default values, (optionally) types and
-  if blank or nil values should be allowed.
-- You can use the same component in multiple contexts and configure the root element differently in each context by passing
-  options to the component when instantiating it. 
-- Stimulus support is built in and sets a default controller name based on the component name.
-- Stimulus actions, targets and classes can be setup using a simple DSL to avoid hand crafting the data attributes.
-- Since data attribute names are generated from the component class name, you can rename easily refactor and move components without
-  having to update the data attributes in your views.
-- Components are rendered with useful class names and IDs to make debugging easier (autogenerated IDs are 'random' but deterministic so they
-  are the same each time a given view is rendered to avoid content changing/Etag changing).
-- (experimental) Support for fragment caching of components (only with ViewComponent and with caveats)
-- (experimental) A test helper to make testing components easier by utilising type information from the component arguments to render
-  automatically configured good and bad examples of the component.
-- (experimental) support for `better_html`
+- [`vident-typed-minitest`](https://github.com/stevegeek/vident-typed-minitest) to get some test helpers for typed attributes (auto generates inputs to test attributes)
+- [`vident-better_html`](https://github.com/stevegeek/vident-better_html) to support `better_html` if you use it in your Rails app
+- [`vident-tailwind`](https://github.com/stevegeek/vident-tailwind) to get all the benefits of the amazing [`tailwind_merge`](https://github.com/gjtorikian/tailwind_merge/).
 
 
-## Things still to do...
+# Things still to do...
 
 This is a work in progress. Here's what's left to do for first release:
 
@@ -63,445 +50,145 @@ This is a work in progress. Here's what's left to do for first release:
 - Create an example library of a few components for some design system
   - Create a demo app with `lookbook` and those components
 - Add more documentation
-- split `vident` into `vident` + `vident-rails` gems (and maybe `vident-rspec`) (Phlex can be used outside of Rails)
-  - possibly also split into `vident-phlex` and `vident-view_component` gems ?
-
-
 
-# Examples
+# About Vident
 
-Before we dive into a specific example note that there are some components implemented with
-both ViewComponent and Phlex (with and without Vident) in the `test/dummy`.
-- https://github.com/stevegeek/vident/tree/main/test/dummy/app/components
-- https://github.com/stevegeek/vident/tree/main/test/dummy/app/views
-
-Start Rails:
-
-```bash
-cd test/dummy
-bundle install
-rails assets:precompile
-rails s
-```
-
-and visit http://localhost:3000
+## What does Vident provide?
 
+- Base classes for your `ViewComponent` components or `Phlex` components that provides a helper to create the
+  all important 'root' element component (can be used with templated or template-less components).
 
-## A Vident component example (without Stimulus)
+- implementations of these root components for creating the 'root' element in your view components. Similar to `Primer::BaseComponent` but
+  exposes a simple API for configuring and adding Stimulus controllers, targets and actions. The root component also handles deduplication
+ of classes, creating a unique ID, setting the element tag type, handling possible overrides set at the render site, and determining stimulus controller identifiers etc
 
-First is an example component that uses `Vident::TypedComponent` but no Stimulus features. 
+- a way to define attributes for your components, either typed or untyped, with default values and optional validation.
 
-It is an avatar component that can either be displayed as an image or as initials. 
+### Various utilities
 
-It supports numerous sizes and shapes and can optionally have a border. It also generates a cache key for use in fragment caching or etag generation.
+Such as...
 
-```ruby
-class AvatarComponent < ViewComponent::Base
-  include ::Vident::TypedComponent
-  include ::Vident::Tailwind
-  include ::Vident::Caching::CacheKey
-
-  no_stimulus_controller
-  with_cache_key :attributes
-
-  attribute :url, String, allow_nil: true, allow_blank: false
-  attribute :initials, String, allow_blank: false
-
-  attribute :shape, Symbol, in: %i[circle square], default: :circle
-
-  attribute :border, :boolean, default: false
-
-  attribute :size, Symbol, in: %i[tiny small normal medium large x_large xx_large], default: :normal
-
-  private
-
-  def html_options
-    if image_avatar?
-      { class: "inline-block object-contain", src: url, alt: t(".image") }
-    else
-      { class: "inline-flex items-center justify-center bg-gray-500" }
-    end
-  end
-
-  def element_classes
-    [size_classes, shape_class, border? ? "border" : ""]
-  end
-
-  alias_method :image_avatar?, :url?
-
-  def shape_class
-    (shape == :circle) ? "rounded-full" : "rounded-md"
-  end
-
-  def size_classes
-    case size
-    when :tiny
-      "w-6 h-6"
-    when :small
-      "w-8 h-8"
-    when :medium
-      "w-12 h-12"
-    when :large
-      "w-14 h-14"
-    when :x_large
-      "sm:w-24 sm:h-24 w-16 h-16"
-    when :xx_large
-      "sm:w-32 sm:h-32 w-24 h-24"
-    else
-      "w-10 h-10"
-    end
-  end
-
-  def text_size_class
-    case size
-    when :tiny
-      "text-xs"
-    when :small
-      "text-xs"
-    when :medium
-      "text-lg"
-    when :large
-      "sm:text-xl text-lg"
-    when :extra_large
-      "sm:text-2xl text-xl"
-    else
-      "text-medium"
-    end
-  end
-end
-```
+- for Taiwind users, a mixin for your vident component which uses [tailwind_merge](https://github.com/gjtorikian/tailwind_merge) to merge TailwindCSS classes
+  so you can easily override classes when rendering a component.
+- a mixin for your Vident Components which provides a `#cache_key` method that can be used to generate a cache key for
+  fragment caching or etag generation.
+- a test helper for your typed Vident ViewComponents which can be used to generate good and bad attribute/params/inputs 
 
-```erb
-<%= render root(
-             element_tag: image_avatar? ? :img : :div,
-             html_options: html_options
-           ) do %>
-  <% unless image_avatar? %>
-    <span class="<%= text_size_class %> font-medium leading-none text-white"><%= initials %></span>
-  <% end %>
-<% end %>
+## All the Features...
 
-```
+- use Vident with `ViewComponent` or `Phlex` or your own view component system
+- A helper to create the root HTML element for your component, which then handles creation of attributes.
+- Component arguments are defined using the `attribute` method which allows you to define default values, (optionally) types and
+  if blank or nil values should be allowed.
+- You can use the same component in multiple contexts and configure the root element differently in each context by passing
+  options to the component when instantiating it.
+- Stimulus support is built in and sets a default controller name based on the component name.
+- Stimulus actions, targets and classes can be setup using a simple DSL to avoid hand crafting the data attributes.
+- Since data attribute names are generated from the component class name, you can rename easily refactor and move components without
+  having to update the data attributes in your views.
+- Components are rendered with useful class names and IDs to make debugging easier (autogenerated IDs are 'random' but deterministic so they
+  are the same each time a given view is rendered to avoid content changing/Etag changing).
+- (experimental) Support for fragment caching of components (`Vident::Caching` and `Vident::<ViewComponent | Phlex>::Caching`... implementation has caveats)
+- (experimental) A test helper to make testing components easier by utilising type information from the component arguments to render
+  automatically configured good and bad examples of the component.
+- (experimental) support for `better_html`
 
-Example usages:
-
-```erb
-<!-- These will render -->
-<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", initials: "AB" size: :large) %>
-<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", html_options: {alt: "My alt text", class: "object-scale-down"}) %>
-<%= render AvatarComponent.new(initials: "SG", size: :small) %>
-<%= render AvatarComponent.new(initials: "SG", size: :large, html_options: {class: "border-2 border-red-600"}) %>
-
-<!-- These will raise an error -->
-<!-- missing initals -->
-<%= render AvatarComponent.new(url: "https://someurl.com/avatar.jpg", size: :large) %> 
-<!-- initials blank -->
-<%= render AvatarComponent.new(initials: "", size: :large) %> 
- <!-- invalid size -->
-<%= render AvatarComponent.new(initials: "SG", size: :foo_bar) %>
-```
 
+## Installation
 
-The following is rendered when used `render AvatarComponent.new(initials: "SG", size: :small, border: true)`:
+This gem (`vident`) provides only base functionality but there are a number of gems that provide additional functionality
+or an "out of the box" experience.
 
-```html
-<div class="avatar-component w-8 h-8 rounded-full border inline-flex items-center justify-center bg-gray-500" id="avatar-component-9790427-12">
-  <span class="text-xs font-medium leading-none text-white">SG</span>
-</div>
-```
+It's a "pick your own adventure" approach. You decide what frameworks and features you want to use
+and add the gems as needed.
 
-The following is rendered when used `render AvatarComponent.new(url: "https://i.pravatar.cc/300", initials: "AB", html_options: {alt: "My alt text", class: "block"})`:
+First, add this line to your application's Gemfile:
 
-```html
-<img src="https://i.pravatar.cc/300" alt="My alt text" class="avatar-component w-10 h-10 rounded-full object-contain block" id="avatar-component-7083941-11">
+```ruby 
+gem 'vident'
 ```
 
-----
-
-![Example](examples/avatar.png)
+Then go on to choose the gems you want to use:
 
-## Another ViewComponent + Vident example with Stimulus
+#### Q1. Do you want to use [`ViewComponent`](https://viewcomponent.org/) or [`Phlex`](https://www.phlex.fun/) for your view components?
 
-Consider the following ERB that might be part of an application's views. The app uses `ViewComponent`, `Stimulus` and `Vident`.
+For ViewComponent use:
 
-The Greeter is a component that displays a text input and a button. When the button is clicked, the text input's value is
-used to greet the user. At the same time the button changes to be a 'reset' button, which resets the greeting when clicked again.
+- [`vident-view_component`](https://github.com/stevegeek/vident-view_component)
 
-![ex1.gif](examples%2Fex1.gif)
+For Phlex use:
 
-```erb
-<%# app/views/home/index.html.erb %>
+- [`vident-phlex`](https://github.com/stevegeek/vident-phlex)
 
-<!-- ... -->
-
-<!-- render the Greeter ViewComponent (that uses Vident) -->
-<%= render ::GreeterComponent.new(cta: "Hey!", html_options: {class: "my-4"}) do |greeter| %>
-  <%# this component has a slot called `trigger` that renders a `ButtonComponent` (which also uses Vident) %> 
-  <% greeter.trigger(
-       
-       # The button component has attributes that are typed
-       before_clicked: "Greet",
-       after_clicked: "Greeted! Reset?",
-       
-       # A stimulus action is added to the button that triggers the `greet` action on the greeter stimulus controller.
-       # This action will be added to any defined on the button component itself
-       actions: [
-         greeter.action(:click, :greet),
-       ],
-       
-       # We can also override the default button classes of our component, or set other HTML attributes
-       html_options: {
-         class: "bg-red-500 hover:bg-red-700"
-       }
-     ) %>
-<% end %>
-
-<!-- ... -->
-```
-
-The output HTML of the above, using Vident, is:
-
-```html 
-<div class="greeter-component py-2 my-4" 
-     data-controller="greeter-component" 
-     data-greeter-component-pre-click-class="text-md text-gray-500" 
-     data-greeter-component-post-click-class="text-xl text-blue-700" 
-     id="greeter-component-1599855-6">
-  <input type="text" 
-         data-greeter-component-target="name" 
-         class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-  <button class="button-component ml-4 whitespace-no-wrap bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded bg-red-500 hover:bg-red-700" 
-          data-controller="button-component" 
-          data-action="click->greeter-component#greet button-component#changeMessage" 
-          data-button-component-after-clicked-message="Greeted! Reset?" 
-          data-button-component-before-clicked-message="Greet" 
-          id="button-component-7799479-7">Hey!</button>
-  <!-- you can also use the `target_tag` helper to render targets -->
-  <span class="ml-4 text-md text-gray-500" 
-        data-greeter-component-target="output">
-    ...
-  </span>
-</div>
-```
 
-Let's look at the components in more detail.
+Note: you can also use both in the same app.
 
-The main component is the `GreeterComponent`:
+For example, if you want to use ViewComponent and Phlex in the same app, you might end up with:
 
 ```ruby
-# app/components/greeter_component.rb
-
-class GreeterComponent < ViewComponent::Base
-  include Vident::Component
-
-  renders_one :trigger, ButtonComponent
-end
+gem 'vident'
+gem 'vident-view_component'
+gem 'vident-phlex'
 ```
 
-```erb
-<%# app/components/greeter_component.html.erb %>
-
-<%# Rendering the `root` element creates a tag which has stimulus `data-*`s, a unique id & other attributes set. %>
-<%# The stimulus controller name (identifier) is derived from the component name, and then used to generate the relavent data attribute names. %>
-
-<%= render root named_classes: {
-  pre_click: "text-md text-gray-500", # named classes are exposed to Stimulus as `data-<controller>-<name>-class` attributes
-  post_click: "text-xl text-blue-700",
-  html_options: {class: "py-2"}
-} do |greeter| %>
-
-  <%# `greeter` is the root element and exposes methods to generate stimulus targets and actions %>
-  <input type="text"
-         <%= greeter.as_target(:name) %>
-         class="shadow appearance-none border rounded py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline">
-  
-  <%# Render the slot %>
-  <%= trigger %>
-  
-  <%# you can also use the `target_tag` helper to render targets %>
-  <%= greeter.target_tag(
-        :span, 
-        :output, 
-        # Stimulus named classes can be referenced to set class attributes at render time
-        class: "ml-4 #{greeter.named_classes(:pre_click)}" 
-      ) do %>
-    ...
-  <% end %>
-<% end %>
+#### Q2. Do you want to build components where the attributes have runtime type checking (powered by [`dry-types`](https://github.com/dry-rb/dry-types))?
 
-```
-
-```js
-// app/components/greeter_component_controller.js
-
-import { Controller } from "@hotwired/stimulus"
-
-// This is a Stimulus controller that is automatically registered for the `GreeterComponent`
-// and is 'sidecar' to the component. You can see that while in the ERB we use Ruby naming conventions
-// with snake_case Symbols, here they are converted to camelCase names. We can also just use camelCase 
-// in the ERB if we want.
-export default class extends Controller {
-  static targets = [ "name", "output" ]
-  static classes = [ "preClick", "postClick" ]
-
-  greet() {
-    this.clicked = !this.clicked;
-    this.outputTarget.classList.toggle(this.preClickClasses, !this.clicked);
-    this.outputTarget.classList.toggle(this.postClickClasses, this.clicked);
-
-    if (this.clicked)
-      this.outputTarget.textContent = `Hello, ${this.nameTarget.value}!`
-    else
-      this.clear();
-  }
-
-  clear() {
-    this.outputTarget.textContent = '...';
-    this.nameTarget.value = '';
-  }
-}
-```
-
-The slot renders a `ButtonComponent` component:
+If yes, then add `vident-typed` to your Gemfile:
 
 ```ruby
-# app/components/button_component.rb
-
-class ButtonComponent < ViewComponent::Base
-  # This component uses Vident::TypedComponent which uses dry-types to define typed attributes.
-  include Vident::TypedComponent
-
-  # The attributes can specify an expected type, a default value and if nil is allowed.
-  attribute :after_clicked, String, default: "Greeted!"
-  attribute :before_clicked, String, allow_nil: false
-
-  # This example is a templateless ViewComponent.
-  def call
-    # The button is rendered as a <button> tag with an click action on its own controller.
-    render root(
-      element_tag: :button,
-      
-      # We can define actions as arrays of Symbols, or pass manually manually crafted strings.
-      # Here we specify the action name only, implying an action on the current components controller
-      # and the default event type of `click`.
-      actions: [:change_message],
-      # Alternatively: [:click, :change_message] or ["click", "changeMessage"] or even "click->button-component#changeMessage"
-      
-      # A couple of data values are also set which will be available to the controller
-      data_maps: [{after_clicked_message: after_clicked, before_clicked_message: before_clicked}],
-      
-      # The <button> tag has a default styling set directly on it. Note that
-      # if not using utility classes, you can style the component using its 
-      # canonical class name (which is equal to the component's stimulus identifier), 
-      # in this case `button-component`.
-      html_options: {class: "ml-4 whitespace-no-wrap bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"}
-    ) do
-      @before_clicked
-    end
-  end
-end
+gem 'vident-typed'
 ```
 
-```js  
-// app/components/button_component_controller.js
-
-import { Controller } from "@hotwired/stimulus"
+and then use the relavent `*-typed-*` gems for your chosen view component system:
 
-export default class extends Controller {
-  // The action is in camelCase.
-  changeMessage() {
-    this.clicked = !this.clicked;
-    // The data attributes have their naming convention converted to camelCase.
-    this.element.textContent = this.clicked ? this.data.get("afterClickedMessage") : this.data.get("beforeClickedMessage");
-  }
-}
+- use [`vident-typed-view_component`](https://github.com/stevegeek/vident-typed-view_component)
+- and/or [`vident-typed-phlex`](https://github.com/stevegeek/vident-typed-phlex)
 
-```
-
-## Installation
+Note you must also include the gem for the view component system you are using.
 
-Add this line to your application's Gemfile:
+For example, for ViewComponent, you might end up with:
 
 ```ruby
 gem 'vident'
+gem 'vident-view_component'
+gem 'vident-typed'
+gem 'vident-typed-view_component'
 ```
 
-Also ensure you have installed your chosen view component library, eg:
+#### Q3. Do you use or want to use [BetterHTML](https://github.com/Shopify/better-html) in your Rails project?
 
-```ruby
-gem 'view_component'
-```
-
-or
-
-```ruby
-gem 'phlex' # Must be version 0.5 or higher
-```
-
-or **both**!
-
-If you want to use typed attributes you must also include `dry-struct`
-
-```ruby
-gem 'dry-struct'
-```
-
-And then execute:
-
-    $ bundle install
-
-## Making 'sidecar' Stimulus Controllers work
-
-### When using `stimulus-rails`, `sprockets-rails` & `importmap-rails`
-
-Pin any JS modules from under `app/views` and `app/components` which are sidecar with their respective components.
-
-Add to `config/importmap.rb`:
+If yes, then include [`vident-better_html`](https://github.com/stevegeek/vident-better_html) in your Gemfile alongside `better_html` and your vident gems of choice.
 
 ```ruby
-components_directories = [Rails.root.join("app/components"), Rails.root.join("app/views")]
-components_directories.each do |components_path|
-  prefix = components_path.basename.to_s
-  components_path.glob("**/*_controller.js").each do |controller|
-    name = controller.relative_path_from(components_path).to_s.remove(/\.js$/)
-    pin "#{prefix}/#{name}", to: name
-  end
-end
+...
+gem 'better_html'
+gem 'vident-better_html'
 ```
 
-Note we don't use `pin_all_from` as it is meant to work with a subdirectory in `assets.paths`
-See this for more: https://stackoverflow.com/a/73228193/268602
+Note that `vident-better_html` automatically enables `better_html` support in Vident root components.
 
-Then we need to ensure that sprockets picks up those files in build, so add
-to the `app/assets/config/manifest.js`:
+### Q4. Do you use or want to use [TailwindCSS](https://tailwindcss.com/)?
 
-```js
-//= link_tree ../../components .js
-//= link_tree ../../views .js
-```
-
-We also need to add to `assets.paths`. Add to your to `config/application.rb`
+If yes, then consider adding [`vident-tailwind`](https://github.com/stevegeek/vident-tailwind) to your Gemfile alongside your vident gems of choice. 
 
 ```ruby
-config.importmap.cache_sweepers.append(Rails.root.join("app/components"), Rails.root.join("app/views"))
-config.assets.paths.append("app/components", "app/views")
+...
+gem 'vident-tailwind'
 ```
 
-### When using `webpacker`
-
-TODO
+When creating your components you can then include `Vident::Tailwind` to get all the benefits of the amazing [`tailwind_merge`](https://github.com/gjtorikian/tailwind_merge/).
 
-### When using `propshaft`
+### Q5. Did none of the above gems suit your needs?
 
-TODO
+You can always just use base `vident` gems and then roll your own solutions:
 
-## Using TypeScript for Stimulus Controllers
+- [`vident`](https://github.com/stevegeek/vident) to get the base functionality to mix with your own view component system
+- [`vident-typed`](https://github.com/stevegeek/vident-typed) to define typed attributes for your own view component system
 
-TODO
 
-## Usage
+## Documentation
 
-TODO: Write usage instructions here
+See the [docs](docs/) directory and visit the individual gem pages for more information.
 
 ## Development
 
@@ -509,8 +196,6 @@ After checking out the repo, run `bin/setup` to install dependencies. Then, run
 
 To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).
 
-
-
 ## Contributing
 
 Bug reports and pull requests are welcome on GitHub at https://github.com/stevegeek/vident. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [code of conduct](https://github.com/[USERNAME]/vident/blob/master/CODE_OF_CONDUCT.md).

data/Rakefile

@@ -1,14 +1,3 @@
-# frozen_string_literal: true
+require "bundler/setup"
 
 require "bundler/gem_tasks"
-require "rake/testtask"
-
-Rake::TestTask.new(:test) do |t|
-  t.libs << "test"
-  t.libs << "lib"
-  t.test_files = FileList["test/**/*_test.rb"]
-end
-
-require "standard/rake"
-
-task default: %i[test standard]

data/lib/tasks/vident_tasks.rake

@@ -0,0 +1,4 @@
+# desc "Explaining what the task does"
+# task :vident do
+#   # Task goes here
+# end