Rishabh 3d6fb0d6b1 Added new package for admin-x settings

refs https://github.com/TryGhost/Team/issues/3151

- adds a new vite + typescript + storybook + TW package for setting up admin settings in react with base config that works with Ghost monorepo
- includes base components/design system for new settings UI
- adds eslint rule config to the package to match rest of Ghost codebase
- this is an experimental package as we figure out the best patterns for new admin packages in Ghost monorepo

Co-authored-by: Peter Zimon <zimo@ghost.org>

2023-05-16 12:23:24 +05:30

1.3 KiB

Raw Blame History

Admin X Settings

Experimental re-write of Ghost Admin Settings in React

Development

Pre-requisites

Run yarn in Ghost monorepo root
Run yarn in this directory

Running the development version

Run yarn dev to start the development server to test/develop the settings standalone. This will generate a demo site from the index.html file which renders the app and makes it available on http://localhost:5173

Running inside Admin

To test/develop inside of Admin you can run yarn preview then in Ghost set your adminX value in config.local.json to http://localhost:4173/admin-x-settings.umd.js and load Admin as usual. Replace Ghost Admin's settings url with settings-x to load the new settings.

{
    ...
    "adminX": {
        "url": "http://localhost:4173/admin-x-settings.umd.js"
    }
}

yarn preview by itself only serves the library files, it's possible ro run yarn build --watch in a separate terminal tab to have auto-rebuild whilst developing.

Usage

Develop

This is a monorepo package.

Follow the instructions for the top-level repo.

git clone this repo & cd into it as usual
Run yarn to install top-level dependencies.

Test

yarn lint run just eslint
yarn test run lint and tests

1.3 KiB Raw Blame History