{"id":26475424,"url":"https://github.com/opencast/appkit","last_synced_at":"2025-03-19T23:17:04.623Z","repository":{"id":179154166,"uuid":"657230177","full_name":"opencast/appkit","owner":"opencast","description":"Work in progress!","archived":false,"fork":false,"pushed_at":"2025-02-20T11:50:30.000Z","size":86,"stargazers_count":0,"open_issues_count":2,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-19T02:19:18.204Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@opencast/appkit","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/opencast.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-06-22T15:44:13.000Z","updated_at":"2025-02-20T11:30:13.000Z","dependencies_parsed_at":"2024-06-05T15:17:27.214Z","dependency_job_id":"6e7ca34f-57c9-4c37-8c1e-d178f9e45a3e","html_url":"https://github.com/opencast/appkit","commit_stats":null,"previous_names":["opencast/appkit"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencast%2Fappkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencast%2Fappkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencast%2Fappkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/opencast%2Fappkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/opencast","download_url":"https://codeload.github.com/opencast/appkit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244520140,"owners_count":20465632,"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-19T23:17:04.224Z","updated_at":"2025-03-19T23:17:04.615Z","avatar_url":"https://github.com/opencast.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AppKit: library for Opencast-related React apps\n\n\u003e **Important**: This is still very much work in progress!\n\u003e Expect frequent releases with breaking changes.\n\nLibrary for the development of (React + TS + emotion.js)-based apps in the Opencast context.\nIt provides a number of React components and various other utilty features.\nIn order to ensure style consistency across our apps, appkit \"includes\" a design and is not suitable as a general purpose library;\nthat's the whole point: to get a pre-defined design.\n\n\n## Usage\n\n- `npm install --save @opencast/appkit`\n- Make sure all of [appkit's `peerDependencies`](./package.json) are installed (should be done by NPM in the previous step).\n- Provide color values, most likely by copying [`colors.css`](./src/colors.css) into your `index.html`. See \"colors\" section below.\n- Optionally configure appkit via `AppkitConfigProvider`.\n\n## Icons: [Lucide](https://lucide.dev/)\n\nWhile this library does not ship any icons itself, apps in the Opencast context should use the same icons to ensure consistency.\nTherefore, **use [Lucide icons](https://lucide.dev/)!**\nThere are only two exceptions: use `search` and `translate` from [Hero icons v1 (outline version)](https://v1.heroicons.com/) instead of the alternatives from Lucide.\nHint: it's convenient to use [`react-icons`](https://react-icons.github.io/react-icons/) to import all needed icons into your codebase.\n\nShould your app require an icon that's not available in Lucide, you can create a new one (or check Hero).\nThis should follow [Lucide's Design Principles](https://lucide.dev/guide/design/icon-design-guide).\nUnless the icon is very particular (i.e. unlikely to be useful in any other application), it should be [contributed back to Lucide](https://github.com/lucide-icons/lucide/blob/main/CONTRIBUTING.md).\n\n\n## Colors\n\nThis library also contains a color scheme with a set of fixed colors.\nThese can be configured, but you should likely stick to the given colors as close as possible, especially the neutral ones.\nSee [`colors.css`](./src/colors.css): you likely want to copy that into your `index.html` directly;\nalso see the color color scheme section below.\n\n### Neutral\n\nNeutral colors that can be used throughout the design.\nYou may make the grey tone configurable in your app (e.g. to allow organizations to choose a slightly warm grey), but the individual colors must still have the same perceived brightness values as specified here.\n(Note: perceived brightness is the same as L in the LCH color space, but NOT the same as the L in HSL!)\n\n**Light mode**\n```\n             Perceived brightness  sRGB hex code\nneutral00    100                   #ffffff\nneutral05    99.7                  #fefefe\nneutral10    95.9                  #f3f3f3\nneutral15    92.0                  #e8e8e8\nneutral20    88.0                  #dddddd\nneutral25    83.9                  #d1d1d1\nneutral30    78.0                  #c1c1c1\nneutral40    67.0                  #a3a3a3\nneutral50    50.0                  #777777\nneutral60    37.0                  #575757\nneutral70    27.0                  #404040\nneutral80    17.0                  #2a2a2a\nneutral90    8.0                   #181818\n```\n\n**Dark mode**\n```\n             Perceived brightness  sRGB hex code\nneutral00    5.0                   #111111\nneutral05    7.7                   #171717\nneutral10    11.5                  #1e1e1e\nneutral15    15.3                  #262626\nneutral20    19.1                  #2e2e2e\nneutral25    22.9                  #373737\nneutral30    26.7                  #3f3f3f\nneutral40    32.7                  #4d4d4d\nneutral50    43.4                  #676767\nneutral60    56.0                  #868686\nneutral70    62.0                  #969696\nneutral80    68.0                  #a6a6a6\nneutral90    79.0                  #c4c4c4\n```\n\n### Accent color\n\n**Light mode**\n```\naccent9   #044a81   lch(30.1%  37.2  266.4)\naccent8   #215D99   lch(38.1%  39.1  266.2)\naccent7   #3073B8   lch(46.8%  43.5  265.8)\naccent6   #3E8AD8   lch(55.5%  47.8  265.0)\naccent5   #4DA1F7   lch(64.0%  51.6  264.3)\naccent4   #71B4F9   lch(71.0%  42.0  260.1)\n```\n\n**Dark mode**\n```\naccent9   #85ace3   lch(69.1%  32.5  264.7)\naccent8   #7da4db   lch(66.1%  32.7  265.0)\naccent7   #588ccd   lch(56.8%  39.6  265.5)\naccent6   #1f72ba   lch(46.1%  45.8  264.7)\naccent5   #1c619e   lch(39.4%  40.0  264.4)\naccent4   #195483   lch(33.9%  32.8  260.3)\n```\n\n### Destructive color\n\n**Light mode**\n```\ndanger0   #feedeb   lch(95.1%   6.5  28.9)\ndanger1   #ffd2cd   lch(88.0%  18.0  29.1)\ndanger2   #feaba1   lch(78.1%  35.6  31.1)\ndanger4   #c22a2c   lch(44.0%  71.0  33.2)\ndanger5   #880e11   lch(29.0%  59.9  35.9)\n```\n\n**Dark mode**\n```\ndanger0   #361314   lch(11.5%  19.8  24.5)\ndanger1   #462522   lch(19.2%  18.2  30.2)\ndanger2   #712f2a   lch(29.0%  35.0  31.6)\ndanger4   #e0584d   lch(56.1%  64.1  33.4)\ndanger5   #fb7c67   lch(67.1%  59.8  36.1)\n```\n\n### Happy color\n\nBy default, this is the same as the accent color.\n\"Happy\" just means that it can be used for \"call to action\" and positive contexts.\nAll colors except red can be used in these contexts, so this color should only be changed (i.e. be different from accent) if the accent color is some kind of red.\n\n## Color Scheme Switching\n\nAppkit provides utlities to have multiple color schemes in your app: `useColorScheme` and `ColorSchemeProvider`.\nThis currently supports `light`, `dark`, `light-high-contrast` and `dark-high-contrast`.\nIf your app does not support high contrast modes, you can disable those.\nSee the [documentation on `ColorSchemeProvider`](./src/colorScheme.tsx) to understand how this system works and what you have to do to set it up.\n\n\n## Local development\n\nTo work on appkit or test patches locally (i.e. whenever you can't use NPM releases), you can include like this:\n\n- In your local `appkit` directory run `npm link` (`sudo` likely required)\n- In the directory of the app you want to use appkit with,, run `npm link @opencast/appkit`\n\nThis essentially just does `ln -s /path/to/appkit /path/to/app/node_modules/@opencast/appkit`, i.e. create a symbolic link.\nWhenever you run `npm ci` or `npm install` in the app's directory, that link is overwritten and replaced with the NPM version of appkit; then you have to run the second command `npm link @opencast/appkit` again.\n\nUnfortunately, this can lead to problems with webpack and duplicated dependencies.\nTo avoid that, add the following to your webpack config:\n\n```js\nresolve: {\n    alias: {\n      \"react\": path.join(__dirname, \"node_modules/react\"),\n      \"@emotion/react\": path.join(__dirname, \"node_modules/@emotion/react\"),\n    },\n},\n```\n\nA more in-depth explanation of why this is necessary can be found [here](https://gist.github.com/LukasKalbertodt/382cb53a85fcf6e7d1f5235625c6f4fb).\nWhenever you encounter weird runtime errors complaining about imports or invalid hook calls, it could be this issue.\nThen you can try adding another alias for the problematic dependency.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencast%2Fappkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fopencast%2Fappkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fopencast%2Fappkit/lists"}