{"id":24518240,"url":"https://github.com/flasd/scaffold","last_synced_at":"2025-08-21T02:07:04.893Z","repository":{"id":96503887,"uuid":"165934845","full_name":"flasd/scaffold","owner":"flasd","description":"Builds AuthContext, ThemeContext \u0026 RouterContext into a React app;","archived":false,"fork":false,"pushed_at":"2019-01-15T22:42:54.000Z","size":189,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-03-15T11:12:07.023Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/flasd.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-15T22:41:58.000Z","updated_at":"2020-02-21T20:15:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"d78a06a9-29a5-4ce0-9641-6e30d7999877","html_url":"https://github.com/flasd/scaffold","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/flasd/scaffold","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fscaffold","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fscaffold/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fscaffold/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fscaffold/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/flasd","download_url":"https://codeload.github.com/flasd/scaffold/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/flasd%2Fscaffold/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271415496,"owners_count":24755639,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-21T02:00:08.990Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-01-22T01:41:15.549Z","updated_at":"2025-08-21T02:07:04.871Z","avatar_url":"https://github.com/flasd.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Scaffold\nBuilds AuthContext, ThemeContext \u0026 RouterContext into a app;\n\n### Installation\n\nInstall the latest version from NPM with the following command:\n\n```sh\nnpm install @flasd/scaffold\n```\n\n### Usage\n\nTo start using the Scaffold functionality, you'll need to wrap your app in it.\n\n```javascript\nimport Scaffold from \"@flasd/scaffold\";\n\nexport default function App() {\n  return (\n    \u003cScaffold\n      theme={\n        {\n          /* theme customization */\n        }\n      }\n    \u003e\n      Your components\n    \u003c/Scaffold\u003e\n  );\n}\n```\n\nScaffold wraps your app with a ThemeContext, AuthContext and a Router from `react-router-dom`;\n\nAlso, it exports a few usefull components and decorators.\n\n#### history\n\nThis module is used to control routing using the `react-router-dom` as its context. Check its docs at [this url](https://www.npmjs.com/package/history).\n\n```javascript\nimport { history } from \"@flasd/scaffold\";\n\nhistory.push(\"/my-route\");\n```\n\n#### ProtectedRoute\n\nInstrument routes so that they won't show up if the user is not logged-in.\n\n```javascript\nimport { Switch } from \"react-router-dom\";\nimport { ProtectedRoute } from \"@flasd/scaffold\";\n\nexport default function App() {\n  return (\n    \u003cSwitch\u003e\n      \u003cProtectedRoute\n        path=\"/my-route\"\n        component={MyComponent}\n        fallbackPath=\"/login\"\n      /\u003e\n    \u003c/Switch\u003e\n  );\n}\n\n// It has the following prop-types\nProtectedRoute.propTypes = {\n  component: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,\n  fallbackPath: PropTypes.string.isRequired,\n  path: PropTypes.string.isRequired\n};\n```\n\n#### Public Route\n\nSame thing as ProtectedRoute but does the oposite. If it finds 'login' in the url it will redirect the user to a fallback path.\n\n```javascript\nimport { Switch } from \"react-router-dom\";\nimport { PublicRoute } from \"@flasd/scaffold\";\n\nexport default function App() {\n  return (\n    \u003cSwitch\u003e\n      \u003cPublicRoute\n        path=\"/login\"\n        component={Login}\n        fallbackPath=\"/home\"\n      /\u003e\n    \u003c/Switch\u003e\n  );\n}\n\n// It has the following prop-types\nPublicRoute.propTypes = {\n  component: PropTypes.oneOfType([PropTypes.node, PropTypes.string]).isRequired,\n  fallbackPath: PropTypes.string.isRequired,\n  path: PropTypes.string.isRequired\n};\n```\n\n#### withAuth\n\nDecorator to inject auth state and functions into a component. The AuthContext manages authentication internaly and exposes two methods to interface with your control: `login()` \u0026 `logout()`.\n\n```javascript\nimport { withAuth } from '@flasd/scaffold';\n\nexport function MyComponent(props) {\n  const {\n     user,\n     hasAuth,\n     fingerprint,\n     login,\n     logout,\n  } = props;\n\n  return \u003cdiv\u003eHello\u003c/div\u003e;\n}\n\nexport default withAuth()(MyComponent);\n```\n\nOk, let's break it down:\n##### login\nThe login function should be called after you authenticated your user with your backend. It spectsa JWT token with a paylaod or just an Object, that follows the following schema:\n\n```typescript\ntype User = {\n  uid: !String,\n  name: !String,\n  role: !String,\n}\n```\n\n##### logout\n\nLogs the user out. Simple as that.\n\n##### fingerprint\n\nThe first time your app runs on a user machine, we create a fingerprint from he's/she's machine. You can use this to ensure users are not moving tokens around.\n\n##### user \u0026 hasAuth\n\n`user` follows the same schema as shown above. `hasAuth` is a boolean.\n\n#### withTheme\n\nInject theme variables into any component:\n\n```javascript\nimport { withTheme } from '@flasd/scaffold';\n\nexport function MyComponent(props) {\n  const {\n    mainColor,\n    accentColor,\n    logoUrl,\n    fontFamily,\n    baseFontSize,\n  } = props;\n\n  return \u003cdiv\u003eHello\u003c/div\u003e;\n}\n\nexport default withTheme()(MyComponent);\n```\nAll properties are strings and the defaults are just empty strings. You can overide them globally when you render `\u003cScafold /\u003e` or your can pass a object to `withTheme` with the properties you wish to overide.\n\n### Copyright e Licença\n\nCopyright (c) 2019 [Marcel de Oliveira Coelho](https://github.com/flasd) under the [MIT License](https://github.com/flasd/scaffold/blob/master/LICENSE.md). Go Crazy. :rocket:","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflasd%2Fscaffold","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fflasd%2Fscaffold","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fflasd%2Fscaffold/lists"}