{"id":27247547,"url":"https://github.com/dev-family/admiral","last_synced_at":"2025-05-15T23:06:34.610Z","repository":{"id":175621061,"uuid":"391381076","full_name":"dev-family/admiral","owner":"dev-family","description":"Admiral is a frontend framework for creating back office in React. It provides out-of-the-box components and tools that make developing an admin interface easy and fast.","archived":false,"fork":false,"pushed_at":"2025-05-06T13:16:18.000Z","size":20924,"stargazers_count":193,"open_issues_count":4,"forks_count":25,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-05-08T18:53:27.707Z","etag":null,"topics":["admin","admin-dashboard","admin-dashboard-component","admin-dashboard-ui","admin-on-rest","admin-panel","admin-template","admin-ui","dashboard","developer-tools","react","react-admin","react-admin-dashboard","react-admin-template","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/dev-family.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":"2021-07-31T14:37:29.000Z","updated_at":"2025-05-06T13:16:09.000Z","dependencies_parsed_at":"2023-07-20T03:00:35.173Z","dependency_job_id":"e0c5b718-1598-4b52-856a-3523042f6a82","html_url":"https://github.com/dev-family/admiral","commit_stats":{"total_commits":418,"total_committers":18,"mean_commits":23.22222222222222,"dds":"0.46411483253588515","last_synced_commit":"ed61f147f97dc082f5998bdc1788a5b94da2e89b"},"previous_names":["dev-family/admiral"],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-family%2Fadmiral","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-family%2Fadmiral/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-family%2Fadmiral/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dev-family%2Fadmiral/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dev-family","download_url":"https://codeload.github.com/dev-family/admiral/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254436944,"owners_count":22070946,"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":["admin","admin-dashboard","admin-dashboard-component","admin-dashboard-ui","admin-on-rest","admin-panel","admin-template","admin-ui","dashboard","developer-tools","react","react-admin","react-admin-dashboard","react-admin-template","reactjs"],"created_at":"2025-04-10T22:57:58.138Z","updated_at":"2025-05-15T23:06:29.538Z","avatar_url":"https://github.com/dev-family.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n \u003ca target='_blank' href=\"https://admiral.dev.family\"\u003e\n \u003cimg src=\"https://admiral.dev.family/images/admiral-logo-npm.svg\" width=\"318px\" alt=\"Admiral logo\" /\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\u003ch3 align=\"center\"\u003eRevolutionize Your Workflow with Admiral: A Powerful Solution for Tailored Admin Panels and Business Applications\u003c/h3\u003e\n\n\u003cp align=\"center\"\u003e \u003ca target='_blank' href='https://admiral.dev.family'\u003eTry live demo\u003c/a\u003e\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca href=\"https://twitter.com/admiral_family\"\u003e\n \u003cimg src=\"https://img.shields.io/twitter/url/https/twitter.com/bukotsunikki.svg?style=social\u0026label=Follow%20%40admiral_family\" alt=\"Twitter\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/@devfamily/admiral\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/dt/@devfamily/admiral.svg?color=643add\u0026labelColor=86ce2c\" alt=\"Downloads\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://www.npmjs.com/package/@devfamily/admiral\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/v/@devfamily/admiral.svg?color=643add\u0026labelColor=86ce2c\" alt=\"Version\" /\u003e\n \u003c/a\u003e\n \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n \u003cimg src=\"https://img.shields.io/npm/l/@devfamily/admiral.svg?color=643add\u0026labelColor=86ce2c\" alt=\"License\" /\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n \u003ca target='_blank' href=\"https://admiral.dev.family\"\u003e\n \u003cimg src=\"https://admiral.dev.family/images/github-original.png\" alt=\"Admiral Administration panel\" /\u003e\n \u003c/a\u003e\n\u003c/p\u003e\n\nAdmiral is a frontend framework for creating back office in React. It provides out-of-the-box components and tools that make developing an admin interface easy and fast.\n\nMade with :purple_heart: by [dev.family](https://dev.family/?utm_source=github\u0026utm_medium=admiral\u0026utm_campaign=readme)\n\n## πŸ“– Table of Contents\n\n- [✨ Features](#-features)\n- [🚨 What problems do we solve](#what-problems-do-we-solve)\n- [πŸ”¨ Installation](#-installation)\n - [NPX](#-npx)\n - [Use one of our examples](#-use-one-of-our-examples)\n - [git clone](#-git-clone)\n- [πŸ“¦ Usage](#-usage)\n - [πŸ“¦ Interaction with API](#interaction-with-api)\n - [πŸ“¦ Menu](#menu)\n - [πŸ“¦ Hooks](#hooks)\n - [πŸ“¦ Icons](#icons)\n - [πŸ“¦ Custom Theme](#custom-theme)\n- [πŸ—ΊοΈ Roadmap](#%EF%B8%8F-roadmap)\n- [πŸ†How can I support the developers?](#-how-can-i-support-the-developers)\n- [🀝 Contributing](#-contributing)\n- [Β© License](#%EF%B8%8F-license)\n- [πŸ“š Contact](#-contact)\n\n## ✨ Features\n\n- πŸ“€ Out-of-the-box React components used.\n- πŸ›‘ It is written in TypeScript and has built-in typing.\n- πŸ‘¨β€πŸ’» Adaptive design: The library interface scales to any screen size. This is convenient when used on mobile devices.\n- 🌍 Localization: we support different languages.\n- πŸ‘¨β€πŸŽ¨ An interface that is intuitively easy to work with.\n- 🎨 Different design themes: you can change the color scheme of the interface to suit your needs.\n\n## 🚨What problems do we solve\n\n- **Development complexity.** Development complexity. We have collected ready-made components and tools to simplify and speed up development. Especially for those who are new to React.\n- **Inconsistent design.** We created a unified design and style for all components so that you don't have any trouble generating new ones.\n- **Support complexity.** We gathered all the necessary components and tools in one library, so that you don't waste your time looking for them.\n- **Low performance.** We use modern technologies such as React Hooks, Redux, and GraphQL to achieve high performance and fast responsiveness of the interface. Your admin area will no longer be slowed down by the large number of requests to the server and complex operations on the client.\n- **CRUD.** We have prepared tools to quickly create CRUD (Create, Read, Update, Delete) interfaces. Generate tables with data, forms for creating and editing objects, and components for deleting objects - in 5 minutes.\n\n## πŸ”¨ Installation\n\n**Requirements:**\n\n- The recommended Node.js versions are between 14.21.3 and 20.3.0. However, any version above 14.21.3 can be used. If any version incompatibilities are found, please create an [issue](https://github.com/dev-family/admiral/issues) describing the problem.\n\nThere are several options for installing Admiral:\n\n### πŸ“¦ NPX\n\n_To use npx, make sure you have **Node.js**_\n\n```bash\nnpx create-admiral-app@latest\n```\n\nWhen you enter this command into the console, you will see 2 installation options:\n\n- Install the template with backend on Express.js.\n- Install the template without backend.\n\nIf you choose \"**Install the template with the backend setting on Express.js**\", you will install the fully customized template with backend on Express.js.\n\n[Detailed installation and startup instructions](examples/express-server/README.md)\n\nAll environment variables will be set automatically. If you want to configure them manually, go to the project folder and open the **.env.**\nYou will have 1 CRUDs from the start - **Users**. To find them pass the way - `admiral/src/crud/users/index.tsx`\n\nIf you choose \"**Install the template without backend setting**\", you get just the frontend shell of Admiral in the admiral folder with CRUD - **Users**. To find it pass the way - `admiral/src/crud/users/index.tsx`. To use your backend, read the [Documentation](#interaction-with-api)\n\nAdmiral is available at http://localhost:3000. If port 3000 is busy, any other free port will be selected.\n\nIn the console you will see something like this\n\n```bash\nPort 3000 is in use, trying another one...\n\nvite v2.9.15 dev server running at:\n\n\u003e Local: http://localhost:3001/\n\u003e Network: http://192.168.100.82:3001/\n\nready in 459ms.\n```\n\n### πŸ“¦ Use one of our examples\n\nDetailed installation and startup instructions are in each of the examples.\n\n- [Express Server](examples/express-server/README.md)\n\nOpen your browser and go to http://localhost:3000.\n\n### πŸ“¦ Git Clone\n\nYes, that's right. You can just clone this repository and enter the following commands:\n\n```bash\nyarn\nyarn dev\n```\n\nThen go to http://localhost:3000. The Admiral with mock data is now available to you.\n\n## πŸ“¦ Usage\n\nThe App.tsx file is the entry point into the application. It is where the library is initialized and where the components are rendered `Admin`.\n\n```tsx\nimport React from 'react'\nimport { Admin, createRoutesFrom, OAuthProvidersEnum } from '../admiral'\nimport Menu from './config/menu'\nimport dataProvider from './dataProvider'\nimport authProvider from './authProvider'\n\nconst apiUrl = '/api'\n// import all pages from pages folder and create routes\nconst Routes = createRoutesFrom(import.meta.globEager('../pages/**/*'))\n\nfunction App() {\n return (\n \u003cAdmin\n dataProvider={dataProvider(apiUrl)}\n authProvider={authProvider(apiUrl)}\n menu={Menu}\n oauthProviders={[\n OAuthProvidersEnum.Google,\n OAuthProvidersEnum.Github,\n OAuthProvidersEnum.Jira,\n ]}\n \u003e\n \u003cRoutes /\u003e\n \u003c/Admin\u003e\n )\n}\n\nexport default App\n```\n\n\u003cbr\u003e\n\n### Interaction with API\n\n#### Auth - [AuthProvider](src/authProvider.ts)\n\nThe main contract for authorization in the system is the interface `AuthProvider`.\n\n```ts\nexport interface AuthProvider {\n login: (params: any) =\u003e Promise\u003cany\u003e\n logout: (params: any) =\u003e Promise\u003cvoid | false | string\u003e\n checkAuth: (params: any) =\u003e Promise\u003cvoid\u003e\n getIdentity: () =\u003e Promise\u003cUserIdentity\u003e\n oauthLogin?: (provider: OAuthProvidersEnum) =\u003e Promise\u003c{ redirect: string }\u003e\n oauthCallback?: (provider: OAuthProvidersEnum, data: string) =\u003e Promise\u003cany\u003e\n\n [key: string]: any\n}\n```\n\n[Example of implementation](src/authProvider.ts)\nThe interface itself can be customized to your liking, but it is important to respect the contract it provides.\n[Detailed contract description](admiral/auth/interfaces.ts)\n\nLet's look at the basic methods of implementation:\n\n| Method | Name | Description | Parameters | Return value |\n| ------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------- |\n| login | User Authentication | Makes a POST request to `/api/login` and stores the `token` field in localStorage, which is used in further requests | `params` - object with the fields `username` and `password` | An object with a `token` field and a `user` object with `email` and `name` fields |\n| logout | User Logout | Makes a POST request to `/api/logout` and removes the `token` field from localStorage | | `void` |\n| checkAuth | User authorization check | Makes a GET request to `/api/checkAuth` and checks token validity, expects a status code - 200. Used every time the API is used | Bearer `token` | Status code 200 |\n| getIdentity | Receiving user data | Makes a GET request to `/api/getIdentity` and returns an object with user data | Bearer `token` | Object `user` with the fields `email` and `name` |\n| oauthLogin | Authorization via OAuth | Makes a GET request to `/api/auth/social-login/${provider}` and returns an object with the `redirect` field, which is used for the redirect | `provider` - OAuth provider | Object with the field `redirect` |\n| oauthCallback | Callback authorization via OAuth | Makes a POST request to `/api/auth/social-login/${provider}/callback` and stores the `token` field in localStorage, which is used in further requests | `provider` - OAuth provider, `data` - data received from OAuth provider where the `token` field exists | Object with the field `token` |\n\n#### CRUD [DataProvider](src/dataProvider.ts)\n\nThe main contract for working with data represents the interface `DataProvider`.\n\n```ts\nexport interface DataProvider {\n getList: (\n resource: string,\n params: Partial\u003cGetListParams\u003e,\n ) =\u003e Promise\u003cGetListResult\u003cRecordType\u003e\u003e\n reorderList: (resource: string, params: ReorderParams) =\u003e Promise\u003cvoid\u003e\n getOne: (resource: string, params: GetOneParams) =\u003e Promise\u003cGetOneResult\u003cRecordType\u003e\u003e\n getCreateFormData: (resource: string) =\u003e Promise\u003cGetFormDataResult\u003cRecordType\u003e\u003e\n getFiltersFormData: (\n resource: string,\n urlState?: Record\u003cstring, any\u003e,\n ) =\u003e Promise\u003cGetFiltersFormDataResult\u003e\n create: (resource: string, params: CreateParams) =\u003e Promise\u003cCreateResult\u003cRecordType\u003e\u003e\n getUpdateFormData: (\n resource: string,\n params: GetOneParams,\n ) =\u003e Promise\u003cGetFormDataResult\u003cRecordType\u003e\u003e\n update: (resource: string, params: UpdateParams) =\u003e Promise\u003cUpdateResult\u003cRecordType\u003e\u003e\n deleteOne: (resource: string, params: DeleteParams) =\u003e Promise\u003cDeleteResult\u003cRecordType\u003e\u003e\n\n [key: string]: any\n}\n```\n\n[Example of implementation](src/dataProvider.ts)\n[Detailed contract description](admiral/dataProvider/interfaces.ts)\n\nLet's look at the basic methods of implementation:\n\n| Method | Name | Description | Parameters |\n| ------------------ | ------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |\n| getList | Getting a list of entities | Makes a GET request to `/api/${resource}` and returns an object with data to be used in the `List` component | `resource` - resource name, `params` - object with query parameters |\n| reorderList | Changing the order of entities | Makes a POST request to `/api/${resource}/reorder` and returns an object with data to be used in the `List` component | `resource` - resource name, `params` - object with query parameters |\n| getOne | Obtaining an entity | Makes a GET request to `/api/${resource}/${id}` and returns an object with data to be used in the `Show` component | `resource` - resource name, `id` - entity identifier |\n| getCreateFormData | Getting data for an entity creation form (Select, AjaxSelect) | Makes a GET request to `/api/${resource}/create` and returns an object with data to be used in the `Create` component | `resource` - resource name |\n| getFiltersFormData | Receiving data for filters | Makes a GET request to `/api/${resource}/filters` and returns an object with data to be used in the `Filters` component | `resource` - resource name, `urlState` - object with parameters from the url to be used in the component `Filters` |\n| create | Creating an Entity | Makes a POST request to `/api/${resource}` and returns an object with data to be used in the component `Create` | `resource` - resource name, `params` - entity data object |\n| getUpdateFormData | Getting data for an entity edit form (Select, AjaxSelect) | Makes a GET request to `/api/${resource}/${id}/update` and returns an object with data to be used in the component `Edit` | `resource` - resource name, `id` - entity identifier |\n| update | Updating an entity | Makes a POST request to `/api/${resource}/${id}` and returns an object with the data to be used in the component `Edit` | `resource` - resource name, `id` - entity identifier, `params` - entity data object |\n| delete | Deleting an Entity | Makes DELETE request to `/api/${resource}/${id}` and returns an object with data to be used in the component `Delete` | `resource` - resource name, `id` - entity identifier |\n\n##### getList Query Example [Receive 10 Users per page with filter by id=1]\n\nQuery:\n\n```http request\nhttp://localhost/admin/users?page=1\u0026perPage=10\u0026filter%5Bid%5D=1\n```\n\nResult:\n\n```json\n{\n \"items\": [\n {\n \"id\": 1,\n \"name\": \"Dev family\",\n \"email\": \"info@dev.family\",\n \"role\": \"Administrator\",\n \"created_at\": \"2023-05-05 14:17:51\"\n }\n ],\n \"meta\": {\n \"current_page\": 1,\n \"from\": 1,\n \"last_page\": 1,\n \"per_page\": 10,\n \"to\": 1,\n \"total\": 1\n }\n}\n```\n\n##### getOne Query Example [Receive User where id=1]\n\nQuery:\n\n```http request\nhttp://localhost/admin/users/1/update?id=1\n```\n\nResult:\n\n```json\n{\n \"data\": {\n \"id\": 1,\n \"name\": \"Dev family\",\n \"email\": \"info@dev.family\",\n \"role_id\": 1\n },\n \"values\": {\n \"role_id\": [\n {\n \"label\": \"Administrator\",\n \"value\": 1\n }\n ]\n }\n}\n```\n\n❗**Note**: We utilize the HTTP status code 422 Unprocessable Entity to handle validation errors.\n\n##### Example Validation Error\n\n```json\n{\n \"errors\": {\n \"name\": [\"Field 'name' is invalid.\"],\n \"email\": [\"Field 'email' is invalid.\"]\n },\n \"message\": \"Validation failed\"\n}\n```\n\n#### Pagination\n\nPagination work with `getList` method. You can pass `page` and `perPage` params to `getList` method, and it will return `PaginationResult` object with `items` and `meta` fields.\n\n#### Filters\n\nFilters work with `getList` method. You can pass `filter[$field]` param to `getList` method, and it will return `PaginationResult` object with `items` and `meta` fields.\n\n#### Sorting\n\nSorting work with `getList` method. You can pass `sort[$field]` param to `getList` method, and it will return `PaginationResult` object with `items` and `meta` fields.\n\n### Routing\n\nAdmiral has a **file-system based** router.\n\nA page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages' directory. When a file is added to the pages' directory, it's automatically available as a route.\n[react-router-dom](https://v5.reactrouter.com/web/guides/quick-start) is used under the hood.\n\n#### Index routes\n\nThe router will automatically route files named index to the root of the directory.\n\n`pages/index.ts β†’ /`\n`pages/users/index.ts β†’ /users`\n\n#### Nested routes\n\nThe router supports nested files. If you create a nested folder structure, files will automatically be routed in the same way still.\n\n`pages/users/create.ts β†’ /users/create`\n\n#### Dynamic route segments\n\nTo match a dynamic segment, you can use the bracket syntax. This allows you to match named parameters.\n\n`pages/users/[id].ts β†’ /users/:id (/users/42)`\n\n\u003cbr\u003e\n\n\n\n### Admin component\n\nThis component is the most important in your admin panel. With it, you can set the fundamental settings and configurations of your application, such as: navigation, logo, api for requests to a server, api authorization, localization, theme and other things.\n\n**Example of using:**\n\n\n```tsx\n \u003cAdmin\n dataProvider={dataProvider(apiUrl)}\n authProvider={authProvider(apiUrl)}\n menu={Menu}\n oauthProviders={[\n OAuthProvidersEnum.Google,\n OAuthProvidersEnum.Github,\n OAuthProvidersEnum.Jira,\n ]}\n\u003e\n \u003cRoutes /\u003e\n\u003c/Admin\u003e\n```\n\nThe component accepts the following propses:\n\n**menu**\n\nHere you can customize your navigation.\nYou should use special components from our package: Menu, MenuItemLink, SubMenu.\nYou can find an example [here](https://github.com/dev-family/admiral/blob/master/src/config/menu.tsx).\n\n**logo**\n\nYou can change the logo that is displayed in the aside navbar.\nThe prop accepts a link to an svg, JSX component, or a file with the svg format.\n\n**loginLogo**\n\nYou can change the logo that is displayed in the authorization form.\nThe prop accepts a link to an svg, JSX component, or a file with the svg format.\n\n**asideContent**\n\nWith this tool, you can add the necessary content to the aside navbar under the links. You have to pass ReactNode.\n\n**dataProvider**\n\nThe main contract for working with data. You can get more info in our [documentation](https://github.com/dev-family/admiral?tab=readme-ov-file#crud-dataprovider).\n\n\n**authProvider**\n\nThe main contract for authorization in the system. You can get more info in our [documentation](https://github.com/dev-family/admiral?tab=readme-ov-file#auth---authprovider).\n\n**themePresets**\n\nYou can customize the color theme for your application. You can get more info in our [documentation](https://github.com/dev-family/admiral?tab=readme-ov-file#custom-theme).\n\n**locale**\n\nLocalization can be imported from the admiral package and applied to the Admin component.\nThe text data in all standard components will have the language selected using admiralLocales.\n\nExample:\n```tsx\nimport { admiralLocales} from '@devfamily/admiral'\n\n\u003cAdmin locale={admiralLocales.enUS} /\u003e\n```\n \n \nThe localization scheme of your admin panel, which you can get using the useLocaleProvider hook. You can find an example of the scheme [here](https://github.com/dev-family/admiral/blob/master/admiral/crud/locale/LocaleContext.tsx).\n\n\n**oauthProviders**\n\nUse OAuth authorization using this props. Pass the name of the required provider in the array using OAuthProvidersEnum enum from the admiral.\n\n**baseAppUrl**\n\nAdd the props to change the base path of the app.\n\n\u003cbr\u003e\n\n### Menu component\n\nA menu is an array of objects that have the following structure:\n\n```tsx\nimport { Menu, SubMenu, MenuItemLink } from '../../admiral'\n\nconst CustomMenu = () =\u003e {\n return (\n \u003cMenu\u003e\n \u003cMenuItemLink icon=\"FiCircle\" name=\"First Menu Item\" to=\"/first\" /\u003e\n \u003cSubMenu icon=\"FiCircle\" name=\"Second Menu Item\"\u003e\n \u003cMenuItemLink icon=\"FiCircle\" name=\"Sub Menu Item\" to=\"/second\" /\u003e\n \u003c/SubMenu\u003e\n \u003c/Menu\u003e\n )\n}\n\nexport default CustomMenu\n```\n\n\u003cbr\u003e\n\n### Hooks\n\nOur application uses React hooks. You can use them from anywhere in the application inside the React components.\nThese are the hooks you can use:\n\n#### useNav\n\nThis hook allows you to receive and manage the status of the navigation bar\n\n```tsx\nimport { useNav } from '@devfamily/admiral'\nconst { collapsed, toggleCollapsed, visible, toggle, open, close } = useNav()\n```\n\n- collapsed - a variable containing the state of the navigation panel (collapsed or not)\n- toggleCollapsed - a method that allows you to control the state of the navigation panel.\n- visible - a variable containing the state of the burger menu (open-closed).\n- toggle - a method that allows you to manage the state of the burger menu (opening-closing).\n- open - a method that allows you to open the burger menu.\n- close - a method that allows you to close the burger menu.\n\n#### useForm\n\nThis hook allows you to get form values and manage the state of the form. The hook can be used in components used in \"form\" inside the configuration of the createCRUD function.\n\n```tsx\nimport { useForm } from '@devfamily/admiral'\nconst {\n values,\n options,\n errors,\n setErrors,\n setValues,\n setOptions,\n isSubmitting,\n isFetching,\n locale,\n} = useForm()\n```\n\n- options - options, which are returned from the server for this form.\n- errors - errors, which are returned from the server when initializing the form, or when submitting the form.\n- setErrors - a method for recording the errors.\n- setValues - a method for recording the values.\n- setOptions - a method for recording the options.\n- isSubmitting - form submitting status.\n- isFetching - form initialization status.\n- locale - localization configuration for the form.\n\n#### useTheme\n\nThis hook allows you to receive and manage the state of theme.\n\n```tsx\nimport { useTheme } from '@devfamily/admiral'\nconst { themeName, setTheme } = useTheme()\n```\n\n- themeName - name of the active theme.\n- setTheme - a method to change the theme, you need to pass argument name as 'dark' or 'light.\n\n#### useGetIdentty\n\nA hook that allows you to get the state obtained by calling AuthProvider.getIdentity()\n\n```tsx\nimport { useGetIdentty } from '@devfamily/admiral'\nconst { identity, loading, loaded, error } = useGetIdentty()\n```\n\n- identity - a variable containing the state.\n- loading - a state initialization status.\n- loaded - a variable that indicates that the state has been initialized.\n- error - a object of errors.\n\n\u003cbr\u003e\n\n### Icons\n\nIcons used in Admiral are from [React Icons](https://react-icons.github.io/react-icons/).\n\n### Custom theme\n\nThemeProvider uses [@consta/uikit](https://github.com/consta-design-system/uikit) [Theme component](https://github.com/consta-design-system/uikit/tree/master/src/components/Theme) under the hood.\n\nYou can pass your presets to `Admin` component with `themePresets` prop:\n\n```jsx\nimport React from 'react'\nimport { Admin, createRoutesFrom } from '../admiral'\nimport Menu from './config/menu'\nimport dataProvider from './dataProvider'\nimport authProvider from './authProvider'\nimport themeLight from './theme/presets/themeLight'\nimport themeDark from './theme/presets/themeDark'\n\nconst apiUrl = '/api'\nconst Routes = createRoutesFrom(import.meta.globEager('../pages/**/*'))\n\nfunction App() {\n return (\n \u003cAdmin\n dataProvider={dataProvider(apiUrl)}\n authProvider={authProvider(apiUrl)}\n menu={Menu}\n themePresets={{ light: themeLight, dark: themeDark }}\n \u003e\n \u003cRoutes /\u003e\n \u003c/Admin\u003e\n )\n}\n```\n\n#### To create your own preset:\n\n1. Create a directory for presets. Inside make folders for each modifier - the same as in the [Theme component](https://github.com/dev-family/admiral/tree/master/admiral/theme/presets).\n2. Create CSS files. In the folders with the modifiers put the CSS files that will be responsible for those modifiers. \n You will get something similar:\n\n ```\n presets/\n _color/\n _Theme_color_themeDark.css\n _Theme_color_themeLight.css\n _control/\n _Theme_control_themeLight.css\n _font/\n _Theme_font_themeLight.css\n _size/\n _Theme_size_themeLight.css\n _space/\n _Theme_space_themeLight.css\n _shadow/\n _Theme_shadow_themeLight.css\n themeLight.ts\n themeDark.ts\n ```\n\n3. Configure the variables in CSS files.\n4. Create a preset files (themeLight, themeDark). \n Import the CSS files you are going to use. \n Create a preset object. Specify which values (i.e. CSS files) for which modifiers to use in the preset. You will get something similar:\n\n ```js\n // in presets/themeLight.ts\n import './_color/_Theme_color_themeLight.css'\n import './_color/_Theme_color_themeDark.css'\n import './_control/_Theme_control_themeLight.css'\n import './_font/_Theme_font_themeLight.css'\n import './_size/_Theme_size_themeLight.css'\n import './_space/_Theme_space_themeLight.css'\n import './_shadow/_Theme_shadow_themeLight.css'\n\n export default {\n color: {\n primary: 'themeLight',\n accent: 'themeDark',\n invert: 'themeDark',\n },\n control: 'themeLight',\n font: 'themeLight',\n size: 'themeLight',\n space: 'themeLight',\n shadow: 'themeLight',\n }\n ```\n\n5. Pass your presets to `Admin` component as in the example above.\n\n❗**Note**: postcss plugins are used for color transformation in admiral [presets example](https://github.com/dev-family/admiral/tree/master/admiral/theme/presets). If you want to reproduce, setup [postcss](https://github.com/postcss/postcss) and [postcss-color-mod-function plugin](https://github.com/csstools/postcss-color-mod-function).\n\n## πŸ—ΊοΈ Roadmap\n\n- [x] Routing\n- [x] Menu\n- [x] Icons\n- [x] Custom theme\n- [x] OAuth\n- [ ] Documentation\n- [ ] Custom login page\n- [ ] Laravel Example\n- [ ] Websockets\n\n## πŸ† How can I support the developers?\n\n- Star our GitHub repo ⭐\n- Create pull requests, submit bugs, suggest new features or documentation updates πŸ”§\n- Read us on [Medium](https://medium.com/@dev.family)\n- Follow us on [Twitter](https://twitter.com/dev___family) 🐾\n- Like our page on [LinkedIn](https://www.linkedin.com/company/dev-family) πŸ‘\n\n## 🀝 Contributing\n\nIf you want to participate in the development of Admiral, make a Fork of the repository, make the desired changes and send a pull request. We will be glad to consider your suggestions!\n\n## ©️ License\n\nThis library is distributed under the MIT license.\n\n## πŸ“š Contact\n\nIf you have any questions, please contact us at: \u003ca href=\"mailto:admiral@dev.family\"\u003eadmiral@dev.family\u003c/a\u003e\nWe're always happy to receive your feedback!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-family%2Fadmiral","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdev-family%2Fadmiral","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdev-family%2Fadmiral/lists"}