Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save shivekkhurana/a6b002413e1b1717b968ff1041cbadb0 to your computer and use it in GitHub Desktop.
Save shivekkhurana/a6b002413e1b1717b968ff1041cbadb0 to your computer and use it in GitHub Desktop.
Chat GPT prompt for generating first pass malli schemas:
```
I have a set of react components written in ClojureScript. These components form the design system of a react-native application. I want to introduce prop type checking for these components using the Malli Spec Library.
Here's an example of how we spec a component
start-clojure-code---
(def ?schema
[:=>
[:catn
[:props
[:map {:closed false}
[:networks {:optional true} [:maybe [:sequential :any]]]
[:container-style {:optional true} [:maybe :map]]
[:theme :schema.common/theme]]]]
:any])
(defn view-internal
[{:keys [networks container-style theme] :as params}]
(reagent/with-let [total-width (reagent/atom nil)]
[rn/view
{:accessibility-label :network-routing
:style (style/container container-style theme)
:on-layout #(reset! total-width (oops/oget % "nativeEvent.layout.width"))}
(when @total-width
^{:key (str "network-routing-" (count networks))}
[:f> f-network-routing-bars (assoc params :total-width @total-width)])]
(finally
(doseq [[_ living-timeout] @timeouts]
(js/clearTimeout living-timeout)))))
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))
end-clojure-code---
```
There are a few things we do:
1. Create a `?schema` variable
2. Define the schema as an open map
3. It's better to err on the side of keeping types optional
4. Use function schemas, ie use `:=>`, `:catn` and the return type should be `:any`
5. Make sure the schema is correct or you'll be fired
6. Point out if the function uses are variable that are not marked explicitly in the arguments
Here's another example:
(ns quo.components.wallet.progress-bar.view
(:require
[quo.components.wallet.progress-bar.style :as style]
[quo.theme :as quo.theme]
[react-native.core :as rn]
[schema.core :as schema]))
(def ?schema
[:=>
[:catn
[:props
[:map {:closed false}
[:customization-color {:optional true} [:maybe :schema.common/customization-color]]
[:theme :schema.common/theme]
[:progressed-value {:optional true} [:maybe [:or :string :int]]]
[:full-width? {:optional true} [:maybe :boolean]]]]]
:any])
(defn- view-internal
[{:keys [full-width?] :as props}]
[rn/view
{:accessibility-label :progress-bar
:style (style/root-container props)}
(when full-width?
[rn/view {:style (style/progressed-bar props)}])])
(def view
(quo.theme/with-theme
(schema/instrument #'view-internal ?schema)))
In the next steps, I'll give you a new component for which I need the schema to be made. If you understand the instruction reply with a yes or no. Only yes or no, don't give any explanations.
@shivekkhurana
Copy link
Author

After entering this prompt, GPT will reply with a yes.

The in the next prompt, you can paste the component you want to generate the spec for:
ex:

Generate a schema for this component

(defn- view-internal
  [{:keys [full-width?] :as props}]
  [rn/view
   {:accessibility-label :progress-bar
    :style               (style/root-container props)}
   (when full-width?
     [rn/view {:style (style/progressed-bar props)}])])

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment