datocms / plugins-sdk Goto Github PK

View Code? Open in Web Editor NEW

8.0 8.0 5.0 2.16 MB

An SDK to customize the functionality of the DatoCMS webapp.

Home Page: https://www.datocms.com/docs/building-plugins

License: MIT License

JavaScript 0.32% TypeScript 89.89% CSS 9.79%

datocms plugins-sdk

plugins-sdk's Introduction

👉 Visit the DatoCMS homepage or see What is DatoCMS?

DatoCMS Plugin SDK

Monorepo with Typescript libraries to help you build DatoCMS plugins.

Packages

datocms-plugin-sdk
- Typescript SDK to build DatoCMS plugins.
datocms-react-ui
- React component library to mimic the DatoCMS interface inside plugins.
cra-template-datocms-plugin
- Create React App template to bootstrap new plugins in no time.

License

This repository is published under the MIT license.

What is DatoCMS?

DatoCMS is the REST & GraphQL Headless CMS for the modern web.

Trusted by over 25,000 enterprise businesses, agency partners, and individuals across the world, DatoCMS users create online content at scale from a central hub and distribute it via API. We ❤️ our developers, content editors and marketers!

Quick links:

⚡️ Get started with a free DatoCMS account
🔖 Go through the docs
⚙️ Get support from us and the community
🆕 Stay up to date on new features and fixes on the changelog

Our featured repos:

datocms/react-datocms: React helper components for images, Structured Text rendering, and more
datocms/js-rest-api-clients: Node and browser JavaScript clients for updating and administering your content. For frontend fetches, we recommend using our GraphQL Content Delivery API instead.
datocms/cli: Command-line interface that includes our Contentful importer and Wordpress importer
datocms/plugins: Example plugins we've made that extend the editor/admin dashboard
DatoCMS Starters has examples for various Javascript frontend frameworks

Or see all our public repos

plugins-sdk's People

Contributors

Stargazers

Watchers

Forkers

okasi marcelofinamorvieira rumtraubenuss rconjoe arcataroger

plugins-sdk's Issues

require() of ES modules is not supported // ERR_REQUIRE_ESM

Hello,

I'm a DatoCMS lover and I just start using the plugins-sdk to create my own :)
I have a little issue with the package which is ES module format ready.

error - Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: /[...]/node_modules/lodash-es/get.js
require() of ES modules is not supported.
require() of /[...]/node_modules/lodash-es/get.js from /[...]/node_modules/datocms-plugins-sdk/lib/index.js is an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which defines all .js files in that package scope as ES modules.
Instead rename get.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /[...]/node_modules/lodash-es/package.json.

There is of course still the solution to use the entry point :

<script src="https://unpkg.com/datocms-plugins-sdk"></script>

I don't know if it's the best option when we can import it and as ES modules are still experimental is there any reason to keep it for this plugin ? :)

Thanks ✌️

Dropdown does not expand it's menu

We are facing the problem when using the Dropdown UI element that it does not expand fully see:

Also inside inside a fieldset:

Any suggestion what we do wrong?

Here is the code:

<Canvas ctx={props.ctx}>
      {isEnabled ? (
        <Dropdown
          renderTrigger={({ open, onClick }) => (
            <Button
              onClick={onClick}
              leftIcon={<CreateIcon />}
              rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
              
            >
              Create new...
            </Button>
          )}
        >
          <DropdownMenu>
            <DropdownOption onClick={() => {}}>
              Individual list for all locales
            </DropdownOption>
            <DropdownOption onClick={() => {}}>
              Single list for all locales
            </DropdownOption>
            <DropdownOption onClick={() => {}}>
              Single list only for {props.ctx.locale.toUpperCase()}
            </DropdownOption>
            <DropdownSeparator />
          </DropdownMenu>
        </Dropdown>
      ) : null}
    </Canvas>

iframe height calculations cause iframe to get too big

"datocms-plugin-sdk": "0.7.2",
"datocms-react-ui": "0.7.2",
"react": "18.2.0",
"react-dom": "18.2.0"

It seems there is an issue with the iframe height calculations. When I have an element with a max height set and an overflow within the iframe accounts for the height of the overflowing element.

This happens because the getMaxScrollHeight (here) is looping through all elements within the body and returns the larges scrollHeight and in some cases that is an overflowing element.

See recording:

Screen.Recording.2023-02-06.at.20.45.37.mov

Yandex Cloud Support

I forked and added support for Yandex Cloud (translations 2.0 API). If anyone is interested let me know. There is no CORS support so the request needs to be proxied unfortunately (otherwise I would have a PR).

DatoCMS instance crashes when you don't use a correct Font-Awesome icon name

Hi @stefanoverna,

We are currently working on a custom page plugin and we want to be able to make the user choose a icon from Font Awesome for the mainNavigationTabs link. With this I came accross an error that makes it really difficult to develop or release the plugin.

When we add an item to the navigation tab like so:

import { connect, IntentCtx, RenderPageCtx } from 'datocms-plugin-sdk'

import PageScreen from './entrypoints/PageScreen/PageScreen'
import { render } from './utils/render'

import 'datocms-react-ui/styles.css'
import './styles/index.css'

connect({
  mainNavigationTabs(ctx: IntentCtx) {
    return [
      {
        label: 'Page',
        icon: 'cogs',
        placement: ['before', 'content'],
        pointsTo: {
          pageId: 'page',
        },
      },
    ]
  },
  renderPage(pageId, ctx: RenderPageCtx) {
    if (pageId === 'page') {
      return render(<PageScreen ctx={ctx} />)
    }
  },
})

I get a page and a link like I expect. But when I now try to add another random icon (like walkie-talkie https://fontawesome.com/icons/walkie-talkie?f=classic&s=solid) like this:

import { connect, IntentCtx, RenderPageCtx } from 'datocms-plugin-sdk'

import PageScreen from './entrypoints/PageScreen/PageScreen'
import { render } from './utils/render'

import 'datocms-react-ui/styles.css'
import './styles/index.css'

connect({
  mainNavigationTabs(ctx: IntentCtx) {
    return [
      {
        label: 'Page',
        icon: 'walkie-talkie',
        placement: ['before', 'content'],
        pointsTo: {
          pageId: 'page',
        },
      },
    ]
  },
  renderPage(pageId, ctx: RenderPageCtx) {
    if (pageId === 'page') {
      return render(<PageScreen ctx={ctx} />)
    }
  },
})

I get an error and I am not able to use the Dato instance anymore.

Some font-awesome icons indeed work, but I found it really hard to know which ones I could actually use (and thus make sure the user doesn't choose an Font-Awesome icon that creates an error in Dato). The only insight I have is that I got the impression that the only icons that work, where the Pro icons from Font Awesome version 5.8.2. All icons released in later versions don't seem to work.

Since this will crash your DatoCMS instance instantly this looks like an issue that needs a fix from your side (like not showing an icon at all if the icon doesn't exist or set a default icon?), but maybe there is another fix to mitigate this problem? I hope to hear from you soon!

Automatically resized height after expanding select

Hello! Thanks for the plugin it's awesome.

I'm experiencing an issue with a custom component, it's not a big deal but it's a bit annoying and I wasn't able to make it work.
When I use the dropdown, canvas is resized and when collapsed it's not getting back to the original size, which results in a blank space after the input.

Is there a way of fixing this?

I'm using version 0.7.7 of datocms-plugin-sdk.
And react-select version 5.7.2.

I'm not sure if this is an issue with the plugin or the react-select component.

Video:

Screen.Recording.2023-06-01.at.13.08.30.mov

Code:

import { useCallback, useEffect, useMemo, useState } from 'react';

import { RenderFieldExtensionCtx } from 'datocms-plugin-sdk';
import { Canvas } from 'datocms-react-ui';
import get from 'lodash-es/get';
import Select from 'react-select';

import getAidboxApi from '../utils/getAidboxApi';

import usePluginParameters from './hooks/usePluginParameters';

type TreatmentsConnectorProps = {
  ctx: RenderFieldExtensionCtx;
  isMulti: boolean;
};

type Option = {
  value: string;
  label: string;
};

const SEPARATOR = ',';

const TreatmentsConnector = ({ ctx, isMulti }: TreatmentsConnectorProps) => {
  const initialValue = get(ctx.formValues, ctx.fieldPath) as string | null;
  const [options, setOptions] = useState([] as Option[]);

  const initialOptions = useMemo(
    () =>
      initialValue
        ?.split(SEPARATOR)
        ?.map((k) => options.find((opt) => opt.value === k))
        ?.filter((v) => !!v),
    [initialValue, options]
  );

  const {
    aidbox_base_url: baseUrl,
    aidbox_client_id: clientId,
    aidbox_client_secret: clientSecret,
  } = usePluginParameters(ctx, ['aidbox_base_url', 'aidbox_client_id', 'aidbox_client_secret']);

  const api = useMemo(() => getAidboxApi({ baseUrl, clientId, clientSecret }), [baseUrl, clientId, clientSecret]);

  const fetchTreatmentsOptions = useCallback(async () => {
    const result = await api.findResources('Treatment', { perPage: 100, search: { _elements: 'name,alias', _filter: 'enabled eq true' } });
    setOptions(
      result.resources
        .map((treatment: { alias: string; name: string }) => ({
          value: treatment.alias,
          label: treatment.name,
        }))
        .concat([{ value: 'general', label: 'General' }])
    );
  }, [api]);

  useEffect(() => {
    fetchTreatmentsOptions();
  }, [fetchTreatmentsOptions]);

  const handleSelectMultipleValues = useCallback(
    (selectedValues: Option[]) => {
      ctx.setFieldValue(ctx.fieldPath, selectedValues.map((val) => val.value).join(SEPARATOR));
    },
    [ctx]
  );

  const handleSelectSingleValue = useCallback(
    (selectedValue: Option) => {
      ctx.setFieldValue(ctx.fieldPath, selectedValue.value);
    },
    [ctx]
  );

  return (
    <Canvas ctx={ctx}>
      <Select
        key={`${ctx.fieldPath}-${isMulti ? initialOptions?.length : initialOptions?.[0] ?? 'empty'}`}
        defaultValue={initialOptions}
        isMulti={isMulti}
        options={options}
        className="basic-multi-select"
        classNamePrefix="select"
        onChange={(values) => (isMulti ? handleSelectMultipleValues(values as Option[]) : handleSelectSingleValue(values as Option))}
      />
    </Canvas>
  );
};

export default TreatmentsConnector;

Warning "Failed to parse source map" in datocms-react-ui

I used "create-react-app" with the DatoCMS template as instructed in the plugin docs. After updating packages to their latest versions today, when I run npm start or npm run build I get these warnings:

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\connect.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\connect.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\guards.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\guards.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\index.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\types.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-plugin-sdk\src\types.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ButtonGroup\Button\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ButtonGroup\Button\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ButtonGroup\Group\index.tsx' file: Error: ENOENT: no such file or directory, open 
'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ButtonGroup\Group\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ButtonGroup\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ButtonGroup\index.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Button\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Button\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Canvas\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Canvas\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ContextInspector\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\ContextInspector\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Dropdown.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Dropdown.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\DropdownContext.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\DropdownContext.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Group.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Group.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Menu.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Menu.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\MenuContext.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\MenuContext.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Option.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Option.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\OptionAction.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\OptionAction.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Portal.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Portal.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Separator.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Separator.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Text.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\Text.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Dropdown\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FieldError\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FieldError\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FieldGroup\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FieldGroup\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FieldHint\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FieldHint\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FormLabel\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\FormLabel\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Form\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Form\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Section\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Section\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SelectField\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SelectField\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SelectInput\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SelectInput\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SidebarPanel\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SidebarPanel\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Spinner\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Spinner\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SwitchField\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SwitchField\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SwitchInput\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\SwitchInput\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\TextField\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\TextField\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\TextInput\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\TextInput\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Button\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Button\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Stack\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Stack\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Title\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Title\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Toolbar\index.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\Toolbar\index.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\Toolbar\index.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\generateStyleFromCtx\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\generateStyleFromCtx\index.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\icons.tsx' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\icons.tsx'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\index.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\mergeRefs\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\mergeRefs\index.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\useClickOutside\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\useClickOutside\index.ts'

Failed to parse source map from 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\useMediaQuery\index.ts' file: Error: ENOENT: no such file or directory, open 'C:\Path\to\my\project\node_modules\datocms-react-ui\src\useMediaQuery\index.ts'

package.json:

{
    "name": "my-plugin-name",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@types/node": "^17.0.0",
        "@types/react": "^17.0.37",
        "@types/react-dom": "^17.0.11",
        "datocms-client": "^3.5.9",
        "datocms-plugin-sdk": "^0.3.26",
        "datocms-react-ui": "^0.3.26",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-scripts": "5.0.0",
        "typescript": "^4.5.4"
    },
    "scripts": {
        "start": "cross-env BROWSER='none' PUBLIC_URL='/' react-scripts start",
        "build": "cross-env PUBLIC_URL='.' react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "prepublishOnly": "npm run build"
    },
    "eslintConfig": {
        "extends": [
            "react-app"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    },
    "devDependencies": {
        "cross-env": "^7.0.3"
    },
    "datoCmsPlugin": {
        "title": "",
        "previewImage": "",
        "coverImage": "",
        "entryPoint": "build/index.html"
    }
}

React UI: The muted button does not have a visually distinct disabled state

Perhaps it's by design, but the muted button type (and unlike the primary and negative button types) does not have an explicit styling for its disabled state so it remains the same visually when that state is turned on.

This applies to version 0.3.17 of the datocms-react-ui package.

The relevant styling file is located here: https://github.com/datocms/plugins-sdk/blob/master/packages/react-ui/src/Button/styles.module.css. Note that lack of a &.disabled selector inside the .buttonType-muted class.

Sidebar dissapears with `contentAreaSidebarItems`

Hi again @stefanoverna,

Thanks for the fast reply on my previous issue. I'm raising this issue more as a question and I'm interested to see if this is something that could be changed or if this works as designed.

When I add the settingsAreaSidebarItemGroups and click on the link it opens the page as expected, rendering it inside the settings page.
Like so:

import { connect, IntentCtx, RenderPageCtx } from 'datocms-plugin-sdk'

import PageScreen from './entrypoints/PageScreen/PageScreen'
import { render } from './utils/render'

import 'datocms-react-ui/styles.css'
import './styles/index.css'

connect({
  settingsAreaSidebarItemGroups(ctx: IntentCtx) {
    return [
      {
        label: 'Custom page',
        placement: ['before', 'permissions'],
        items: [
          {
            label: 'Page',
            icon: 'cogs',
            placement: ['before', 'content'],
            pointsTo: {
              pageId: 'page',
            },
          },
        ],
     }
  },
  renderPage(pageId, ctx: RenderPageCtx) {
    if (pageId === 'page') {
      return render(<PageScreen ctx={ctx} />)
    }
  },
})

But when I do the same with contentAreaSidebarItems, click the link and open the page it will open in a fully new view and the sidebar disappears.
Like so:

import { connect, IntentCtx, RenderPageCtx } from 'datocms-plugin-sdk'

import PageScreen from './entrypoints/PageScreen/PageScreen'
import { render } from './utils/render'

import 'datocms-react-ui/styles.css'
import './styles/index.css'

connect({
  contentAreaSidebarItems(ctx: IntentCtx) {
    return [
      {
        label: 'Page',
        icon: 'cogs',
        placement: ['before', 'menuItems'],
        pointsTo: {
          pageId: 'page',
        },
      },
    ]
  },
  renderPage(pageId, ctx: RenderPageCtx) {
    if (pageId === 'page') {
      return render(<PageScreen ctx={ctx} />)
    }
  },
})

I expect the sidebar to still be visible (or have an option to show/hide the sidebar). Is this something that is possible or could be added?

Thanks in advance!

Usage with storybook/unit tests

Hi! We're currently developing a set of plugins for a client of ours. It would be great to be able to use the SDK/UI packages in storybook as well. To do that, we would need a mock ctx for the <Canvas />. Can you provide one? If not as an export, at least here as copypasta? :)

Thanks for your consideration!

I can't get canvas to resize select field or dropdown

The Canvas component seems to be working fine, except for when I am using a select or a dropdown that expands over the original canvas. When I added text it handled the resize just fine.

This was happening with the select example below, as well as the dropdown example from the documentation. I haven't made any substantial changes but am running react 18 (came w the starter pack) and upgraded utils/render to use createRoot

Screen.Recording.2022-08-24.at.9.18.49.AM.mov

deps:

"datocms-plugin-sdk": "^0.6.1",
"datocms-react-ui": "^0.6.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4"

/utils/render.tsx

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import 'datocms-react-ui/styles.css';

export function render(component: React.ReactNode): void {
  const container = document.getElementById('root');
  const root = createRoot(container!);
  root.render(<StrictMode>{component}</StrictMode>);
}

index.tsx

connect({
  manualFieldExtensions(ctx: IntentCtx) {
    return [
      {
        id: 'financialInstitution',
        name: 'Financial Institution',
        type: 'editor',
        fieldTypes: ['string'],
      }
    ]
 },
  renderFieldExtension(fieldExtensionId: string, ctx: RenderFieldExtensionCtx) {
    switch (fieldExtensionId) {
      case 'financialInstitution':
        return render(<FinancialInstitutionSelect ctx={ctx} />);
    }
  },
)

FinancialInstitutionSelect.tsx

import { useState } from 'react';
import { RenderFieldExtensionCtx } from 'datocms-plugin-sdk';
import {  Canvas, SelectField, SelectInput } from 'datocms-react-ui';
import 'datocms-react-ui/styles.css';


type Props = {
  ctx: RenderFieldExtensionCtx;
};

export default function FinancialInstitutionSelect({ ctx }: Props) {
  const FI_ARRAY = [
    {
      rssdId: '324340',
      name: 'ChoiceOne Bank',
      value: '324340',
      label: 'ChoiceOne Bank'
    },
    {
      rssdId: '999999',
      name: 'Garden FI',
      value: '999999',
      label: 'Garden FI'
    }
  ]
  return (
    <Canvas ctx={ctx}>
      <p style={{ fontSize: 'var(--font-size-m)' }}>
        Hello! I am inside of a plugin!
      </p>
      <SelectInput isMulti={false} options={FI_ARRAY} onChange={(newValue) => ctx.setFieldValue(ctx.fieldPath, newValue)} />
    </Canvas>
  );
}

react-ui SelectField renders wrong value on for attribute on label

On the label for a SelectField the for attribute always has the value of id.

Fix: #19

react-ui <Dropdown /> not rendering correctly in Webkit browsers

Firefox:

Safari:

Reproduction repo: https://github.com/moritzjacobs/datocms-react-ui-dropdown-repro/ via npx tmplr datocms/datocms-plugin-template

import { connect, RenderFieldExtensionCtx } from "datocms-plugin-sdk";
import "datocms-react-ui/styles.css";
import ConfigScreen from "./entrypoints/ConfigScreen";
import { render } from "./utils/render";
import {
  Canvas,
  Dropdown,
  Button,
  CaretUpIcon,
  CaretDownIcon,
  DropdownMenu,
  DropdownOption,
  DropdownSeparator,
} from "datocms-react-ui";

const Foobar = ({ ctx }: { ctx: RenderFieldExtensionCtx }) => {
  return (
    <Canvas ctx={ctx}>
      <Dropdown
        renderTrigger={({ open, onClick }) => (
          <Button
            onClick={onClick}
            rightIcon={open ? <CaretUpIcon /> : <CaretDownIcon />}
          >
            Options
          </Button>
        )}
      >
        <DropdownMenu>
          <DropdownOption onClick={() => {}}>Edit</DropdownOption>
          <DropdownOption disabled onClick={() => {}}>
            Duplicate
          </DropdownOption>
          <DropdownSeparator />
          <DropdownOption red onClick={() => {}}>
            Delete
          </DropdownOption>
        </DropdownMenu>
      </Dropdown>
    </Canvas>
  );
};

connect({
  renderConfigScreen(ctx) {
    return render(<ConfigScreen ctx={ctx} />);
  },
  manualFieldExtensions() {
    console.log("manualFieldExtensions");
    return [
      {
        id: "foobar",
        name: "Foobar: Just a test",
        type: "editor",
        fieldTypes: ["string"],
      },
    ];
  },
  renderFieldExtension(fieldExtensionId: string, ctx: RenderFieldExtensionCtx) {
    switch (fieldExtensionId) {
      case "foobar":
        return render(<Foobar ctx={ctx} />);
    }
  },
});

… using the "Basic example" from here.

Thanks for your support!