ariadne_view_components 0.0.59 → 0.0.64

data/README.md

@@ -1,13 +1,15 @@
 # Ariadne ViewComponents
 
-This repository contains the Ruby view components for the Ariadne design system. It is composed of several projects:
+This repository contains [View Components](https://viewcomponent.org) used by [Yetto.app](https://yetto.app) which we incorporate into a design system called Ariadne. We were frustrated by the lack of quality View Components which make use of [TailwindCSS](https://tailwindcss.com) and [Stimulus](https://stimulus.hotwired.dev). So we contracted [EvilMartians](https://evilmartians.com) to build a system, which we then extracted.
+
+These Ariadne view components are 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.**
+Our eternal gratitude to GitHub's design team for open sourcing [Primer View Components](https://github.com/primer/view_components); we were inspired by a lot of their development tooling and foundational work.
 
 ## Installation
 
@@ -34,6 +36,35 @@ DEFAULT_CLASSES = "bg-yellow-400"
 
 document schemes, fetch_or_raise, all that
 
+```css
+@import '@ariadne/stylesheets/ariadne_view_components.css';
+```
+
+```
+@import "tailwindcss/base";
+
+@import "scrollbar.css";
+@import "@ariadne/stylesheets/ariadne_view_components.css";
+
+@tailwind components;
+@tailwind utilities;
+```
+
+```js
+const ariadneAssetsPath = process.env.ARIADNE_ASSETS_PATH || "";
+
+export default defineConfig({
+  plugins: [
+    # ...
+  ],
+  resolve: {
+    alias: {
+      "@ariadne": ariadneAssetsPath,
+    },
+  },
+});
+```
+
 ## remove @tailwind base;
 
 this resets styles applied by ariadne, which already resets styles!!
@@ -44,7 +75,7 @@ This gem comes with some standard linters to keep your code fresh and consistent
 
 ## Getting started with development
 
-So, you just cloned the repo, huh? Great. In addition to Ruby 3.x, install [Overmind](https://github.com/DarthSim/overmind) and Node/NPM. Then, run the following script to set up your local environment:
+So, you just cloned the repo, huh? Great. In addition to Ruby, install [Overmind](https://github.com/DarthSim/overmind) and Node/NPM. Then, run the following script to set up your local environment:
 
 ```
 script/setup
@@ -54,9 +85,26 @@ This will install all the necessary dependencies, plus get you ready for viewing
 
 If you then run `script/server`, this will build and run both the documentation site and launch Lookbook.
 
+4000 lookbook
+4100 vite
+
 ### Adding new components
 
-See [the documentation on adding new components](./docs/content/adding_components.md).
+There is a generator set up to produce new components:
+
+```bash
+thor generate_view_component ComponentName [attribute] [attribute]
+```
+
+For example:
+
+```bash
+thor generate_view_component Profile name age
+```
+
+This creates a component called `Ariadne::UI::Profile::Component`, with two optional attributes (`name` and `age`). It also creates Lookbook preview files, tests, and factories.
+
+See more details on this generator at `rakelib/generators/view_component/USAGE`.
 
 ### Running tests