{"id":25895386,"url":"https://github.com/diamondlightsource/sci-react-ui","last_synced_at":"2025-07-18T14:36:09.344Z","repository":{"id":261801954,"uuid":"876189862","full_name":"DiamondLightSource/sci-react-ui","owner":"DiamondLightSource","description":"A collection of common, material UI styled, components for use at Diamond and beyond.","archived":false,"fork":false,"pushed_at":"2025-07-07T14:52:50.000Z","size":17271,"stargazers_count":5,"open_issues_count":21,"forks_count":1,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-07-07T15:50:57.005Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://diamondlightsource.github.io/sci-react-ui/","language":"TypeScript","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/DiamondLightSource.png","metadata":{"files":{"readme":"readme.md","changelog":"changelog.md","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,"zenodo":null}},"created_at":"2024-10-21T14:46:37.000Z","updated_at":"2025-07-01T12:12:21.000Z","dependencies_parsed_at":"2024-11-08T14:41:11.383Z","dependency_job_id":"dea4b8b3-5e5f-4d6a-b839-5cb9af487310","html_url":"https://github.com/DiamondLightSource/sci-react-ui","commit_stats":null,"previous_names":["diamondlightsource/sci-react-ui"],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/DiamondLightSource/sci-react-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiamondLightSource%2Fsci-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiamondLightSource%2Fsci-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiamondLightSource%2Fsci-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiamondLightSource%2Fsci-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DiamondLightSource","download_url":"https://codeload.github.com/DiamondLightSource/sci-react-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DiamondLightSource%2Fsci-react-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265780548,"owners_count":23827279,"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","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-03-02T22:31:07.877Z","updated_at":"2025-07-18T14:36:09.332Z","avatar_url":"https://github.com/DiamondLightSource.png","language":"TypeScript","readme":"Scientific React UI\n===================\n\nScientific React UI components, based on MUI.\n_Early development release._\n\nA theme and component library to make websites at scientific installations simple to create.\n\nUsing\n-----\n### Installing\n\nInstall as usual:\n\n```sh\nnpm i @diamondlightsource/sci-react-ui\n```\n\n### Usage\n\nFirst use the ThemeProvider and supply a theme.\n\n```js\nimport { ThemeProvider, DiamondTheme } from \"@diamondlightsource/sci-react-ui\";\n\nroot.render(\n  \u003cThemeProvider theme={DiamondTheme}\u003e\n    \u003cApp /\u003e\n  \u003c/ThemeProvider\u003e,\n);\n```\n\nThere are currently two themes, `GenericTheme` or `DiamondTheme`, but you can also create/adapt your own.\n\nNavigation components support either static links (with href) or the use of a routing library (with linkComponent and to).\nFor NavLink and FooterLink, if both linkComponent and to are provided, it will use linkComponent. If not, it falls back to using href.\n\nAn example with static links\n\n```js\n\u003cNavbar\u003e\n  \u003cNavLinks\u003e\n    \u003cNavLink href=\"/about\"\u003eAbout\u003c/NavLink\u003e\n  \u003c/NavLinks\u003e\n\u003c/Navbar\u003e\n```\n\nAn example using react-router:\n\n```js\nimport { NavLink } from \"react-router-dom\";\n\n\u003cNavbar linkComponent={NavLink}\u003e\n  \u003cNavLinks\u003e\n    \u003cNavLink linkComponent={NavLink} to=\"/about\"\u003e\n      About\n    \u003c/NavLink\u003e\n  \u003c/NavLinks\u003e\n\u003c/Navbar\u003e\n```\n\nFor Breadcrumbs, to use static links, omit the linkComponent prop and Breadcrumbs will use a Link component with standard href attributes.\n\n```js\nimport { Breadcrumbs } from \"@diamondlightsource/sci-react-ui\";\n\nfunction App() {\n  return \u003cBreadcrumbs path={window.location.pathname} /\u003e;\n}\nexport default App;\n```\n\nTo use the Breadcrumbs component with your routing library, use a route provider from your preferred library. For example, to use react-router's BrowserRouter, install react-router-dom:\n\n```sh\nnpm i react-router-dom\n```\n\nNext, use the BrowserRouter which can be used at the top level:\n\n```js\nimport { BrowserRouter } from \"react-router-dom\";\nimport {\n\tThemeProvider,\n\tDiamondTheme\n} from \"@diamondlightsource/sci-react-ui\";\n\nroot.render(\n\t\u003cThemeProvider theme={DiamondTheme}\u003e\n\t\t\u003cBrowserRouter\u003e\n\t\t\t\u003cApp /\u003e\n\t\t\u003c/BrowserRouter\u003e\n\t\u003c/ThemeProvider\u003e\n)\n```\n\nThen pass your library's corresponding Link component to Breadcrumbs in the linkComponent prop, for example:\n\n```js\nimport { NavLink } from \"react-router-dom\";\nimport { Breadcrumbs } from \"@diamondlightsource/sci-react-ui\";\n\nfunction App() {\n  return \u003cBreadcrumbs path={window.location.pathname} linkComponent={NavLink} /\u003e;\n}\nexport default App;\n```\nThe Navbar component supports multiple slot props for flexible layout customization: leftSlot, centreSlot, rightSlot.\nIf a logo is defined (either via the logo prop or from the theme), the layout will arrange elements in the following order from left to right: logo, leftSlot, rightSlot.\nThe centreSlot is absolutely positioned at 50% horizontally, which means it stays centered regardless of the content on the left or right. However, if the content in the left or right slots is too wide, it may overlap with the centre slot.\n\nAny children passed to the Navbar (NavLinks in the following example) will be placed in a horizontal Stack after the leftSlot.\n\nTo control the width of the Navbar contents, containerWidth can be passed which sets the maxWidth property of a Container. This can be set to false to not constrain the contents or to a Breakpoint e.g. 'sm' where 'lg' is the default.\n\n```js\nimport { Container, Typography } from \"@mui/material\";\nimport { Navbar, NavLink, NavLinks } from \"@diamondlightsource/sci-react-ui\";\n\nfunction App() {\n  return (\n    \u003c\u003e\n      \u003cNavbar\n        leftSlot={\u003cTypography\u003eleft\u003c/Typography\u003e}\n        centreSlot={\u003cTypography\u003ecentre\u003c/Typography\u003e}\n        rightSlot={\u003cTypography\u003eright\u003c/Typography\u003e}\n        containerWidth={false}\n      \u003e\n        \u003cNavLinks key=\"links\"\u003e\n          \u003cNavLink href=\"#\" key=\"first\"\u003e\n            A link\n          \u003c/NavLink\u003e\n        \u003c/NavLinks\u003e\n      \u003c/Navbar\u003e\n    \u003c/\u003e\n  );\n}\nexport default App;\n```\n\nThe Footer component supports multiple slot props, the same as Navbar (leftSlot, centreSlot, rightSlot).\n\nIf a logo is defined (either via the logo prop or from the theme), the layout will arrange elements in the following order from left to right: leftSlot, rightSlot, logo.\nThe centreSlot is absolutely positioned at 50% horizontally, which means it stays centered regardless of the content on the left or right. However, if the content in the left or right slots is too wide, it may overlap with the centre slot.\n\nAny children passed to the Footer will be placed in a horizontal Stack after the leftSlot.\n\n### Documentation\n\nDocumentation is created with Storybook.\nRead and play with it at [diamondlightsource.github.io/sci-react-ui](https://diamondlightsource.github.io/sci-react-ui/)\n\nDeveloping\n----------\n\nCode can be found at [github.com/DiamondLightSource/sci-react-ui](https://github.com/DiamondLightSource/sci-react-ui).\n\nYou'll need `pnpm` installed to build it. See [tools.md](./tools.md) for list of other tools used in this library\n\n### Build\n\nFirst install all packages\n\n```sh\npnpm install\n```\n\nBuild with rollup\n\n```sh\npnpm run rollup\n```\n\n### Storybook \n\nTo view the components in Storybook use:\n\n```sh\npnpm run storybook\n```\n\n\n### Unit Test\n\nTest with Jest\n\n```sh\npnpm run test\n```\n\n### App test\n\nCreate a test app.\n\nTo test the package, you may be able to `link` the package directly from source:\n```sh\npnpm link \u003cpath-to-this-app-folder\u003e\n```\nBut if that doesn't work, you can try `pack`, then `install`:\n\nIn the package repo:\n```sh\npnpm pack\n```\nIn the test app repo:\n```sh\npnpm install \u003cpath-to-this-app-folder\u003e/diamondlightsource-sci-react-ui-0.0.1.tgz\n```\n\nPublishing\n----------\n\nSteps needed when publishing a new version.\n- Create a new branch\n  - Update the version in [./package.json](package.json) (greater than the published one!)\n  - Update the changelog in [./changelog.md](changelog.md) with added/changed/fixed, new version number and today's date.\n  - Check this readme still makes sense with the new changes you are about to publish.\n  - Check the introduction file [./src/storybook/Introduction.mdx](src/storybook/Introduction.mdx) in Storybook still makes sense.\n- Push the branch, get it reviewed and merge.\n- Now create a new tag se a tag in the format \"v\" followed by the version (e.g. \"v1.2.3\")\n  - Push it.\n- A new npm version should now have been published.\n\n### GitHub release\n- GitHub releases and create a new draft release https://github.com/DiamondLightSource/sci-react-ui/releases\n  - Select the new tag in the \"Choose a tag\" drop down.\n  - Copy in the npm url \"See https://www.npmjs.com/package/@diamondlightsource/sci-react-ui\" \n  - Copy in the top section of the changelog.\n  - Press \"Publish Release\"\n- It is now published!\n\n\n### Post Publish Changes\nIt's useful to increase the version in [./package.json](package.json) with add \"alpha\", e.g `\"version\": \"0.2.1alpha\",`.\nand create a new section in  [./changelog.md](changelog.md) so subsequent changes can be append when needed/ e.g.:\n```text\n[v#.#.#] - 2025-##-##\n---------------------\n\n### Added\n- \n\n### Fixed\n- \n\n### Changed\n-\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiamondlightsource%2Fsci-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiamondlightsource%2Fsci-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiamondlightsource%2Fsci-react-ui/lists"}