Skip to content

Instantly share code, notes, and snippets.

@AhsanAyaz

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

Last active January 18, 2023 00:53
Show Gist options
  • Save AhsanAyaz/6901414a0ec2ac4638b22f4f278d9f47 to your computer and use it in GitHub Desktop.
Save AhsanAyaz/6901414a0ec2ac4638b22f4f278d9f47 to your computer and use it in GitHub Desktop.
Download ZIP
SolidJS Tutorial Snippets
Raw
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"
}
]
Raw
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/[email protected]/dist/ionicons/ionicons.esm.js\"></script>\n <script nomodule src=\"https://unpkg.com/[email protected]/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"
}
]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment