SolidJS Tutorial Snippets

solid-js-tutorial-snippets-part-2.json

  [
    {
        "created": "2022-11-21T23:25:28.008Z",
        "name": "sjs-request-page-index",
        "tags": [
            "sjs-request-page-index"
        ],
        "content": "import { Component } from \"solid-js\";\n\nconst RequestIndex: Component = () => {\n  return (\n    <div class=\"flex flex-col md:flex-row gap-4 justify-center items-center bg-gray-200 p-4 border border-gray-300 min-h-full rounded-lg\">\n      <div class=\"text-2xl flex gap-4 items-center\">\n        <ion-icon class=\"text-4xl\" name=\"arrow-back-circle-outline\"></ion-icon>\n        <span>Select a request from the left panel</span>\n      </div>\n    </div>\n  );\n};\n\nexport default RequestIndex;",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-12-01T02:11:33.780Z",
        "name": "sjs-request-data-function",
        "tags": [
            "sjs-request-data-function"
        ],
        "content": "/**\n * Data function\n * @param id - Request ID\n */\n export const fetchSelectedRequest = ({ params }: RouteDataFuncArgs) => {\n  const [request] = createResource(\n    () => params.id,\n    () =>\nnew Promise((resolve) => {\n  setTimeout(() => {\n    resolve(restRequests()?.find((r) => r.id === params.id));\n         }, 500);\n})\n\n  );\n  return request;\n};\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-25T07:00:43.590Z",
        "name": "sjs-request-by-id-page",
        "tags": [
            "sjs-request-by-id-page"
        ],
        "content": "import { Component, Match, Switch } from \"solid-js\";\n\nconst RequestById: Component = () => {\n  return (\n    <div class=\"flex flex-col md:flex-row  gap-4 min-h-full bg-gray-200 p-4 border border-gray-300 rounded-lg\">\n      <div class=\"flex-1\">\n        <Switch>\n          <Match when={true}>\n            <div>Loading...</div>\n          </Match>\n          <Match when={false}>{/* rest client form */}</Match>\n        </Switch>\n      </div>\n      <div class=\"flex-1\">{/* response */}</div>\n    </div>\n  );\n};\n\nexport default RequestById;",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T21:19:15.091Z",
        "name": "sjs-rcf-effect",
        "tags": [
            "sjs-rcf-effect"
        ],
        "content": "createEffect((requestId) => {\r\n      if (!request || !request()) {\r\n        return null;\r\n      }\r\n      if (request()?.id === requestId) {\r\n        return requestId;\r\n      }\r\n      const req = request()?.request;\r\n      controlGroup().name.setValue(request()?.name || \"\");\r\n      requestControlGroup().body.setValue(req?.body || \"\");\r\n      requestControlGroup().url.setValue(req?.url || \"\");\r\n      requestControlGroup().method.setValue(req?.method || \"\");\r\n      return request()?.id;\r\n    });",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-12-01T02:34:40.281Z",
        "name": "sjs-request-update-on-form",
        "tags": [
            "sjs-request-update-on-form"
        ],
        "content": "const onFormValUpdate = (val: IRestRequest) => {\r\n    setRestRequests((requestsPrev) => {\r\n      return requestsPrev!.map((reqItem) => {\r\n        if (reqItem.id === request().id) {\r\n          return {\r\n            ...reqItem,\r\n            request: {\r\n              ...reqItem.request,\r\n              ...val.request,\r\n            },\r\n            name: val.name || reqItem.name\r\n          };\r\n        }\r\n        return reqItem;\r\n      });\r\n    });\r\n  };",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T22:40:23.737Z",
        "name": "sjs-rcf-body-update-func",
        "tags": [
            "sjs-rcf-body-update-func"
        ],
        "content": "const bodyValueUpdated = (value: any) => {\r\n      try {\r\n        if (!value) {\r\n          requestControlGroup().body.setErrors(null);\r\n          return;\r\n        }\r\n        const pretty = JSON.stringify(JSON.parse(value), undefined, 4);\r\n        requestControlGroup().body.setValue(pretty);\r\n        requestControlGroup().body.setErrors(null);\r\n      } catch (e) {\r\n        requestControlGroup().body.setErrors({\r\n          invalidJson: true,\r\n        });\r\n      } finally {\r\n        props.formUpdate?.(props.control.value);\r\n      }\r\n    };",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T22:50:42.048Z",
        "name": "sjs-rco",
        "tags": [
            "sjs-rco"
        ],
        "content": "import { Component, ComponentProps, For, Show } from \"solid-js\";\r\nimport { IRestResponse } from \"../interfaces/rest.interfaces\";\r\n\r\ninterface RestClientOutputProps extends ComponentProps<any> {\r\n  response: IRestResponse | null;\r\n}\r\n\r\nconst RestClientOutput: Component<RestClientOutputProps> = (\r\n  props: RestClientOutputProps\r\n) => {\r\n  return (\r\n    <div>\r\n      <div\r\n        class=\"status px-4 py-2 rounded-lg mb-4\"\r\n        classList={{\r\n          \"bg-green-200 text-green-900 border border-green-900\":\r\n            props.response?.status === 200,\r\n          \"bg-red-200 text-red-900 border border-red-900\":\r\n            props.response?.status !== 200,\r\n        }}\r\n      >\r\n        Code: {props.response && props.response.status}\r\n      </div>\r\n      <Show when={props.response?.headers}>\r\n        <div class=\"rounded-lg mb-4 bg-white px-4 py-2 divide-y\">\r\n          <For each={Object.keys(props.response?.headers)}>\r\n            {(key: string) => {\r\n              const value = props.response?.headers[key];\r\n              return (\r\n                <div class=\"header flex py-1 justify-between\">\r\n                  <span>{key}:</span> <span>{value}</span>\r\n                </div>\r\n              );\r\n            }}\r\n          </For>\r\n        </div>\r\n      </Show>\r\n      <Show when={props.response?.data}>\r\n        <json-viewer class=\"p-4\" data={props.response?.data}></json-viewer>\r\n      </Show>\r\n    </div>\r\n  );\r\n};\r\n\r\nexport default RestClientOutput;\r\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T23:37:58.385Z",
        "name": "sjs-response-resource",
        "tags": [
            "sjs-response-resource"
        ],
        "content": "const [apiCallParams, setApiCallParams] = createSignal<AxiosRequestConfig>();\r\n  const [response, {mutate}] = createResource(apiCallParams, () => {\r\n    if (!apiCallParams()) {\r\n      return null;\r\n    }\r\n    return axios.request(apiCallParams() as any).catch((err) => {\r\n      console.error(err);\r\n      if (!err.response.data) {\r\n        err.response.data = {\r\n          message: 'Can not process request'\r\n        }\r\n      }\r\n      return err.response;\r\n    });\r\n  });",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T23:41:50.919Z",
        "name": "sjs-request-on-form-submit",
        "tags": [
            "sjs-request-on-form-submit"
        ],
        "content": "const onFormSubmit = async (val: IRestRequest) => {\r\n    const { body, url, method } = val.request;\r\n    setApiCallParams({ body, url, method });\r\n  };",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-26T23:56:37.983Z",
        "name": "sjs-json-viewer-css",
        "tags": [
            "sjs-json-viewer-css"
        ],
        "content": "json-viewer {\n  @apply rounded-lg;\n\n  /* Background, font and indentation */\n  --background-color: #2a2f3a;\n  --color: #f8f8f2;\n  --font-family: monaco, Consolas, 'Lucida Console', monospace;\n  --font-size: 1rem;\n  --indent-size: 1.5em;\n  --indentguide-size: 1px;\n  --indentguide-style: solid;\n  --indentguide-color: #333;\n  --indentguide-color-active: #666;\n  --indentguide: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color);\n  --indentguide-active: var(--indentguide-size) var(--indentguide-style) var(--indentguide-color-active);\n\n  /* Types colors */\n  --string-color: #a3eea0;\n  --number-color: #d19a66;\n  --boolean-color: #4ba7ef;\n  --null-color: #df9cf3;\n  --property-color: #6fb3d2;\n\n  /* Collapsed node preview */\n  --preview-color: rgba(222, 175, 143, 0.9);\n\n  /* Search highlight color */\n  --highlight-color: #6fb3d2;\n}",
        "contentType": "css"
    },
    {
        "created": "2022-12-01T18:43:01.927Z",
        "name": "sjs-no-requests-button",
        "tags": [
            "sjs-no-requests-button"
        ],
        "content": "<button\r\n                onClick={() => setShowModal(true)}\r\n                class=\"cursor-pointer hover:bg-purple-600 hover:text-white flex justify-between gap p-2 bg-white border rounded-md items-center w-full\"\r\n              >\r\n                <p class=\"text-center w-full\">No Requests. Click to add</p>\r\n              </button>",
        "contentType": "typescriptreact"
    }
  ]

solid-js-tutorial-snippets.json

[
    {
        "created": "2022-10-23T12:24:33.591Z",
        "name": "sjs-nunito",
        "tags": [
            "sjs-nunito"
        ],
        "content": "<link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n    <link href=\"https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">",
        "contentType": "html"
    },
    {
        "created": "2022-10-23T12:39:46.161Z",
        "name": "sjs-ionicons",
        "tags": [
            "sjs-ionicons"
        ],
        "content": "    <script type=\"module\" src=\"https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js\"></script>\n    <script nomodule src=\"https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js\"></script>",
        "contentType": "html"
    },
    {
        "created": "2022-10-23T12:41:48.374Z",
        "name": "sjs-navbar-tsx",
        "tags": [
            "sjs-navbar-tsx"
        ],
        "content": "import { Component } from 'solid-js';\r\n\r\nconst Navbar: Component = () => {\r\n  return (\r\n    <div class=\"bg-purple-600 text-white py-2 px-8 h-16 flex items-center justify-between\">\r\n      <a class=\"hover:opacity-50 hero\" href='/'>REST in Peace</a>\r\n      <div class=\"flex items-center gap-4\">\r\n        <a class=\"hover:opacity-50\" href='/about'>About</a>\r\n      </div>\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default Navbar;",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-23T16:44:55.606Z",
        "name": "sjs-app-router",
        "tags": [
            "sjs-app-router"
        ],
        "content": "<Router source={hashIntegration()}>\n      <div class={styles.App}>\n        <Navbar />\n      </div>\n      <Routes>\n        <Route path=\"/\" component={() => <div>Home Component</div>}></Route>\n        <Route path=\"/about\" component={() => <div>About Component</div>}></Route>\n      </Routes>\n    </Router>",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-23T16:47:11.651Z",
        "name": "sjs-app-router-final",
        "tags": [
            "sjs-app-router-final"
        ],
        "content": "<Router source={hashIntegration()}>\n      <div class=\"flex flex-col h-full min-h-screen\">\n        <Navbar></Navbar>\n        <main class=\"px-8 py-4 flex-1 flex flex-col h-full\">\n          <Routes>\n            <Route path=\"/about\" element={<About />} />\n            <Route path=\"/\" element={<Home />}>\n              {/* <Route path=\"/\" element={<RestClientIndex />} />\n              <Route\n                path=\"/:id\"\n                element={<RestClient />}\n                data={fetchSelectedRequest}\n              /> */}\n            </Route>\n          </Routes>\n        </main>\n      </div>\n    </Router>",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-23T16:53:51.422Z",
        "name": "sjs-home-comp",
        "tags": [
            "sjs-home-comp"
        ],
        "content": "import { Outlet } from 'solid-app-router';\nimport { Component } from 'solid-js';\n\nconst Home: Component = () => {\n  return (\n    <div class=\"flex flex-col md:flex-row gap-4 h-full flex-1\">\n      <div class=\"w-full md:w-1/4 bg-gray-200 min-h-full border-gray-300 border p-4 rounded-lg\">\n        <div class=\"flex justify-between py-4\">\n          <h1 class=\"text-sm \">Rest Requests</h1>\n          <button class=\"flex hover:bg-opacity-60 justify-center items-center p-4 bg-purple-600 rounded-full text-white w-8 h-8\" onClick={() => alert('To be implemented')}>\n            <div>+</div>\n          </button>\n        </div>\n      </div>\n      <div class=\"flex-1 min-h-full\">\n        <Outlet />\n      </div>\n    </div>\n  )\n}\n\nexport default Home;",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-29T10:23:44.065Z",
        "name": "sjs-about-comp",
        "tags": [
            "sjs-about-com"
        ],
        "content": "import { Component } from 'solid-js';\n\nconst About: Component = () => {\n  return (\n    <div>\n      <h2>This is About</h2>\n    </div>\n  )\n}\n\nexport default About;",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-29T10:36:25.139Z",
        "name": "sjs-rest-interfaces",
        "tags": [
            "sjs-rest-interfaces"
        ],
        "content": "interface IRequest {\n  headers?: {\n    [key: string]: string;\n  }[];\n  method: string;\n  url: string;\n  body?: any;\n}\nexport interface IRestRequest {\n  id: string;\n  name: string;\n  description: string;\n  request: IRequest;\n}\n\nexport interface IRestResponse {\n  data: any;\n  status: number;\n  headers: any;\n}\n",
        "contentType": "typescript"
    },
    {
        "created": "2022-10-29T10:56:01.593Z",
        "name": "sjs-requests-array",
        "tags": [
            "sjs-requests-array"
        ],
        "content": "const requests: IRestRequest[] = [\n    {\n      id: \"1\",\n      name: \"Get Scores\",\n      description: \"Getting scores from server\",\n      request: {\n        method: \"GET\",\n        url: \"https://scorer-pro3.p.rapidapi.com/score/game123\",\n        headers: [\n          {\n            key: \"X-RapidAPI-Host\",\n            value: \"API_HOST_FROM_RAPID_API\",\n          },\n          {\n            key: \"X-RapidAPI-Key\",\n            value: \"API_KEY_FROM_RAPID_API\",\n          },\n        ],\n      },\n    },\n    {\n      id: \"2\",\n      name: \"Add Score\",\n      description: \"Adding scores to server\",\n      request: {\n        method: \"POST\",\n        url: \"https://scorer-pro3.p.rapidapi.com/score\",\n        headers: [\n          {\n            key: \"X-RapidAPI-Host\",\n            value: \"API_HOST_FROM_RAPID_API\",\n          },\n          {\n            key: \"X-RapidAPI-Key\",\n            value: \"API_KEY_FROM_RAPID_API\",\n          },\n        ],\n        body: JSON.stringify({\n          score: 100,\n          gameId: \"123\",\n          userId: \"test123\",\n        }),\n      },\n    },\n  ];",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-29T10:56:25.552Z",
        "name": "sjs-requests-list-el",
        "tags": [
            "sjs-requests-list-el"
        ],
        "content": "<div class=\"list\">\n          <For each={requests} fallback={<div>Loading...</div>}>\n            {(item) => (\n              <Link href={`/${item.id}`} class=\"relative list__item\">\n                <div\n                  class=\"p-2 hover:bg-gray-300 cursor-pointer pr-12 rounded-lg mb-2\"\n                  classList={{\n                    \"list__item--active\": Boolean(\n                      location.pathname === `/${item.id}`\n                    ),\n                  }}\n                >\n                  <div>{item.name}</div>\n                  <div class=\"text-xs break-all\">\n                    {item.request.method} {item.request.url}\n                  </div>\n                </div>\n              </Link>\n            )}\n          </For>\n        </div>",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-30T17:55:49.190Z",
        "name": "sjs-rest-store",
        "tags": [
            "sjs-rest-store"
        ],
        "content": "import { IRestRequest } from \"./interfaces/rest.interfaces\";\r\nimport { createStorageSignal } from \"@solid-primitives/storage\";\r\n\r\nexport const [restRequests, setRestRequests] = createStorageSignal<\r\n  IRestRequest[]\r\n>(\r\n  \"requests\",\r\n  [\r\n    {\r\n      id: \"1\",\r\n      name: \"Get Scores\",\r\n      description: \"Getting scores from server\",\r\n      request: {\r\n        method: \"GET\",\r\n        url: \"https://scorer-pro3.p.rapidapi.com/score/game123\",\r\n        headers: [\r\n          {\r\n            key: \"X-RapidAPI-Host\",\r\n            value: \"API_HOST_FROM_RAPID_API\",\r\n          },\r\n          {\r\n            key: \"X-RapidAPI-Key\",\r\n            value: \"API_KEY_FROM_RAPID_API\",\r\n          },\r\n        ],\r\n      },\r\n    },\r\n    {\r\n      id: \"2\",\r\n      name: \"Add Score\",\r\n      description: \"Adding scores to server\",\r\n      request: {\r\n        method: \"POST\",\r\n        url: \"https://scorer-pro3.p.rapidapi.com/score\",\r\n        headers: [\r\n          {\r\n            key: \"X-RapidAPI-Host\",\r\n            value: \"API_HOST_FROM_RAPID_API\",\r\n          },\r\n          {\r\n            key: \"X-RapidAPI-Key\",\r\n            value: \"API_KEY_FROM_RAPID_API\",\r\n          },\r\n        ],\r\n        body: JSON.stringify({\r\n          score: 100,\r\n          gameId: \"123\",\r\n          userId: \"test123\",\r\n        }),\r\n      },\r\n    },\r\n  ],\r\n  {\r\n    deserializer: (val: string | null): IRestRequest[] => {\r\n      if (val === null) {\r\n        return [];\r\n      }\r\n      return JSON.parse(val);\r\n    },\r\n    serializer: (val: IRestRequest[]) => {\r\n      return JSON.stringify(val);\r\n    },\r\n  }\r\n);\r\n",
        "contentType": "typescript"
    },
    {
        "created": "2022-10-30T18:10:22.587Z",
        "name": "sjs-request-modal-init",
        "tags": [
            "sjs-request-modal-init"
        ],
        "content": "import { Component, ComponentProps, Show } from \"solid-js\";\r\nimport { IRestRequest } from \"../interfaces/rest.interfaces\";\r\n\r\ninterface RequestModalProps extends ComponentProps<any> {\r\n  show: boolean;\r\n  onModalHide: (id: string | null) => void;\r\n  request?: IRestRequest;\r\n}\r\n\r\nconst RequestModal: Component<RequestModalProps> = (\r\n  props: RequestModalProps\r\n) => {\r\n  return (\r\n    <Show when={props.show}>\r\n      <div class=\"fixed z-50 top-0 left-0 right-0 bottom-0 bg-[rgba(0,0,0,0.75)]\">\r\n        <div class=\"relative max-h-[85%] overflow-y-auto top-20 bg-gray-200 max-w-md m-auto h- block p-8 pb-8 border-t-4 border-purple-600 rounded-sm shadow-xl\">\r\n          <h5 class=\"text-4xl font-bold mb-4\">\r\n            {(props.request ? \"Edit\" : \"Create\") + \" Request\"}\r\n          </h5>\r\n\r\n          <span class=\"absolute bottom-9 right-8\">\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              class=\"w-10 h-10 text-purple-600\"\r\n              fill=\"none\"\r\n              viewBox=\"0 0 24 24\"\r\n              stroke=\"currentColor\"\r\n            >\r\n              <path\r\n                stroke-linecap=\"round\"\r\n                stroke-linejoin=\"round\"\r\n                stroke-width=\"2\"\r\n                d=\"M13 10V3L4 14h7v7l9-11h-7z\"\r\n              />\r\n            </svg>\r\n          </span>\r\n        </div>\r\n      </div>\r\n    </Show>\r\n  );\r\n};\r\n\r\nexport default RequestModal;\r\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-12T17:30:01.173Z",
        "name": "sjs-textfield",
        "tags": [
            "sjs-textfield"
        ],
        "content": "import { IFormControl } from 'solid-forms';\nimport { Component } from 'solid-js';\n\nexport const TextField: Component<{\n  control: IFormControl<string>,\n  label: string,\n  placeholder?: string,\n  type?: string,\n  rows?: number\n  id: string\n  class?: string,\n  valueUpdated?: (val: any) => void\n}> = (props) => {\n  const type = props.type || 'text';\n  const onInput = (e: { currentTarget: { value: string; }; }) => {\n    props.control.markDirty(true);\n    props.control.setValue(e.currentTarget.value);\n  }\n\n  const onBlur = () => {\n    props.control.markTouched(true);\n    if (props.valueUpdated) {\n      props.valueUpdated(props.control.value);\n    }\n  }\n  return (\n    <>\n      <label class=\"sr-only\" for={props.id}>{props.label}</label>\n      {\n        type === 'textarea' ? <textarea\n        value={props.control.value}\n        rows={props.rows || 3}\n        oninput={onInput}\n        onblur={onBlur}\n        placeholder={props.placeholder}\n        required={props.control.isRequired}\n        id={props.id}\n        class={`w-full p-3 text-sm border-gray-200 rounded-lg ${props.class}`}\n      /> : <input\n        type=\"text\"\n        value={props.control.value}\n        oninput={onInput}\n        onblur={onBlur}\n        placeholder={props.placeholder}\n        required={props.control.isRequired}\n        id={props.id}\n        class={`w-full p-3 text-sm border-gray-200 rounded-lg ${props.class}`}\n      />}\n    </>\n  );\n};",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-12T20:53:33.715Z",
        "name": "sjs-rest-client-form-start",
        "tags": [
            "sjs-rest-client-form-start"
        ],
        "content": "\nimport { Component } from \"solid-js\";\nimport { IRestRequest } from \"../interfaces/rest.interfaces\";\n\nexport const RestClientForm: Component<\n  {\n    request?: Partial<IRestRequest>;\n    formSubmit: Function;\n    formUpdate?: Function;\n    actionBtnText: string;\n  }\n> = (props) => {\n\n  return (\n    <form\n      action=\"\"\n      class=\"space-y-4\"\n      classList={{\n      }}\n      onSubmit={(e) => {\n        e.preventDefault();\n      }}\n    >\n      <div class=\"grid grid-cols-1 gap-4\">\n        <div>\n          <label for=\"name\" class=\"mb-4 block\">\n            Name\n          </label>\n          <input placeholder=\"name\"/>\n        </div>\n        <div>\n          <label for=\"url\" class=\"mb-4 block\">\n            URL\n          </label>\n          <input placeholder=\"url\"/>\n        </div>\n\n        <div>\n          <label class=\"my-4 block\">Method</label>\n          <input placeholder=\"method\"/>\n        </div>\n      </div>\n      <div>\n        <label class=\"my-4 block\">Body</label>\n        <input placeholder=\"body\"/> \n      </div>\n\n      <div class=\"mt-4\">\n        <button\n          disabled={false}\n          type=\"submit\"\n          class=\"inline-flex items-center disabled:bg-gray-500 justify-center w-full px-5 py-3 text-white bg-purple-600 hover:bg-purple-700 rounded-lg sm:w-auto\"\n        >\n          <span class=\"font-medium\"> {props.actionBtnText} </span>\n          <svg\n            xmlns=\"http://www.w3.org/2000/svg\"\n            class=\"w-5 h-5 ml-3\"\n            fill=\"none\"\n            viewBox=\"0 0 24 24\"\n            stroke=\"currentColor\"\n          >\n            <path\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              stroke-width=\"2\"\n              d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\n            />\n          </svg>\n        </button>\n      </div>\n    </form>\n  );\n}\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-12T20:53:50.142Z",
        "name": "sjs-rest-client-form-usage",
        "tags": [
            "sjs-rest-client-form-usage"
        ],
        "content": "<RestClientForm\r\n            formSubmit={(request: IRestRequest) => {\r\n              const id = self.crypto?.randomUUID() || Date.now().toString();\r\n              setRestRequests([\r\n                ...(restRequests() || []),\r\n                {\r\n                  ...request,\r\n                  id,\r\n                },\r\n              ]);\r\n              props.onModalHide(id);\r\n            }}\r\n            actionBtnText={\"Save\"}\r\n          />",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-12T21:33:10.406Z",
        "name": "sjs-form-control-factory",
        "tags": [
            "sjs-form-control-factory"
        ],
        "content": "const controlFactory = () => {\n  return createFormGroup({\n    name: createFormControl<string>(\"New Request\", {\n      required: true,\n      validators: (val: string) => {\n        return !val.length ? {isMissing: true} : null;\n      }\n    }),\n    request: createFormGroup({\n      method: createFormControl<string>(\"GET\"),\n      body: createFormControl<string>(\"\"),\n      url: createFormControl<string>(\"\"),\n    }),\n  });\n};",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-12T21:38:56.227Z",
        "name": "sjs-rest-form-with-control-factory",
        "tags": [
            "sjs-rest-form-with-control-factory"
        ],
        "content": "export const RestClientForm = withControl<\n  {\n    request?: Partial<IRestRequest>;\n    formSubmit: Function;\n    formUpdate?: Function;\n    actionBtnText: string;\n  },\n  typeof controlFactory\n>({\n  controlFactory,\n  component: (props) => {\n    const controlGroup = () => props.control.controls;\n    const requestControlGroup = () => controlGroup().request.controls;\n    const request = () => props.request;\n\n    return (\n      <form>\n        \n      </form>\n    );\n  },\n});",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-12T22:12:37.768Z",
        "name": "sjs-form-with-text-fields",
        "tags": [
            "sjs-form-with-text-fields"
        ],
        "content": "<form\n        action=\"\"\n        class=\"space-y-4\"\n        classList={{\n          \"is-valid\": props.control.isValid,\n          \"is-invalid\": !props.control.isValid,\n          \"is-touched\": props.control.isTouched,\n          \"is-untouched\": !props.control.isTouched,\n          \"is-dirty\": props.control.isDirty,\n          \"is-clean\": !props.control.isDirty,\n        }}\n        onSubmit={(e) => {\n          e.preventDefault();\n          const params = {\n            ...props.control.value,\n            request: {\n              ...props.control.value.request,\n            },\n          };\n          props.formSubmit(params);\n        }}\n      >\n        <div class=\"grid grid-cols-1 gap-4\">\n          <div>\n            <label for=\"name\" class=\"mb-4 block\">\n              Name\n            </label>\n            <TextField\n              placeholder=\"name\"\n              id=\"name\"\n              label=\"Name\"\n              control={controlGroup().name}\n            />\n          </div>\n          <div>\n            <label for=\"url\" class=\"mb-4 block\">\n              URL\n            </label>\n            <TextField\n              placeholder=\"url\"\n              id=\"url\"\n              label=\"Url\"\n              control={requestControlGroup().url}\n            />\n          </div>\n\n          <div>\n            <label class=\"my-4 block\">Method</label>\n            <TextField\n              id=\"method\"\n              label=\"Method\"\n              placeholder=\"method\"\n              control={requestControlGroup().method}\n            />\n          </div>\n        </div>\n        <div>\n          <label class=\"my-4 block\">Body</label>\n          <TextField\n            id=\"body\"\n            type=\"textarea\"\n            label=\"Body\"\n            placeholder=\"body\"\n            control={requestControlGroup().body}\n          />\n        </div>\n\n        <div class=\"mt-4\">\n          <button\n            disabled={!props.control.isValid}\n            type=\"submit\"\n            class=\"inline-flex items-center disabled:bg-gray-500 justify-center w-full px-5 py-3 text-white bg-purple-600 hover:bg-purple-700 rounded-lg sm:w-auto\"\n          >\n            <span class=\"font-medium\"> {props.actionBtnText} </span>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              class=\"w-5 h-5 ml-3\"\n              fill=\"none\"\n              viewBox=\"0 0 24 24\"\n              stroke=\"currentColor\"\n            >\n              <path\n                stroke-linecap=\"round\"\n                stroke-linejoin=\"round\"\n                stroke-width=\"2\"\n                d=\"M14 5l7 7m0 0l-7 7m7-7H3\"\n              />\n            </svg>\n          </button>\n        </div>\n      </form>",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-13T15:35:04.120Z",
        "name": "sjs-request-modal-usage",
        "tags": [
            "sjs-request-modal-usage"
        ],
        "content": "<div onClick={() => setShowModal(!showModal())}>\n        <RequestModal\n          show={showModal()}\n          onModalHide={(id: string | null) => {\n            setShowModal(!showModal());\n          }}\n        />\n      </div>\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-30T18:36:28.092Z",
        "name": "sjs-icon-button-tsx",
        "tags": [
            "sjs-icon-button-tsx"
        ],
        "content": "import { Component, ComponentProps } from \"solid-js\";\n\ninterface IconButtonProps extends ComponentProps<any> {\n  onClick: (event: MouseEvent) => void;\n  label: string;\n  icon: string;\n  type?: \"reset\" | \"submit\" | \"button\";\n}\n\nconst IconButton: Component<IconButtonProps> = ({\n  onClick,\n  label,\n  icon,\n  type,\n}) => {\n  return (\n    <button\n      onclick={onClick}\n      role=\"button\"\n      type={type || \"button\"}\n      title={label}\n      class=\"w-6 h-6 flex transition-all ease-in-out duration-100 hover:scale-125 items-center justify-center text-white bg-purple-600 border border-purple-600 rounded-full hover:bg-purple-700 active:text-white focus:outline-none focus:ring\"\n    >\n      <span class=\"sr-only\">{label}</span>\n      <ion-icon name={icon}></ion-icon>\n    </button>\n  );\n};\n\nexport default IconButton;\n",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-10-30T18:40:37.008Z",
        "name": "sjs-types-init",
        "tags": [
            "sjs-types-init"
        ],
        "content": "import \"solid-js\";\n\ndeclare module \"solid-js\" {\n  namespace JSX {\n    interface IntrinsicElements {\n      \"ion-icon\": any;\n    }\n  }\n}\n",
        "contentType": "typescript"
    },
    {
        "created": "2022-10-30T18:45:29.729Z",
        "name": "sjs-icon-button-usage",
        "tags": [
            "sjs-icon-button-usage"
        ],
        "content": "<IconButton\n              onClick={() => setShowModal(true)}\n              icon=\"add\"\n              label=\"Add Request\"\n            />",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-13T16:06:04.471Z",
        "name": "sjs-close-outside-directive",
        "tags": [
            "sjs-close-outside-directive"
        ],
        "content": "import { Accessor, onCleanup } from \"solid-js\";\n\nexport default function clickOutside(el: Element, accessor: Accessor<any>) {\n  const onClick = (e: Event) =>\n    !el.contains(e.target as Node) && accessor()?.();\n  document.body.addEventListener(\"click\", onClick);\n\n  onCleanup(() => document.body.removeEventListener(\"click\", onClick));\n}\n",
        "contentType": "typescript"
    },
    {
        "created": "2022-11-13T16:59:08.133Z",
        "name": "sjs-click-outside-usage",
        "tags": [
            "sjs-click-outside-usage"
        ],
        "content": "// https://github.com/solidjs/solid/discussions/845\nconst clickOutside = outsideDirective\nuse:clickOutside={() => {\n  props.onModalHide(null);\n}}",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-13T19:03:58.888Z",
        "name": "sjs-delete-request-icon",
        "tags": [
            "sjs-delete-request-icon"
        ],
        "content": "<ion-icon\n                    onclick={(e: MouseEvent) => {\n                      e.preventDefault();\n                      e.stopImmediatePropagation();\n                      if (restRequests()?.length) {\n                        const requests = restRequests() || [];\n                        setRestRequests(\n                          requests.filter((i) => i.id !== item.id)\n                        );\n                        if (location.pathname === `/${item.id}`) {\n                          navigate(\"/\");\n                        }\n                      }\n                    }}\n                    class=\"absolute text-xl hover:scale-125 transition-all ease-in-out duration-100 hover:text-red-700 text-red-600 right-2 top-0 bottom-0 m-auto\"\n                    name=\"trash\"\n                  ></ion-icon>",
        "contentType": "typescriptreact"
    },
    {
        "created": "2022-11-13T19:04:59.494Z",
        "name": "sjs-home-css",
        "tags": [
            "sjs-home-css"
        ],
        "content": ".list .list__item ion-icon {\n  display: none;\n}\n\n.list .list__item:hover ion-icon {\n  display: flex;\n}\n\n.list .list__item:hover .list__item--active + ion-icon {\n  @apply text-white;\n}\n\n.list .list__item--active {\n  @apply bg-purple-600 text-white;\n}",
        "contentType": "css"
    }
]