@jetbrains/ring-ui 7.0.75 → 7.0.76

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jetbrains/ring-ui",
-  "version": "7.0.75",
+  "version": "7.0.76",
   "description": "JetBrains UI library",
   "author": {
     "name": "JetBrains"
@@ -63,7 +63,7 @@
     "postpublish": "pinst --enable",
     "postrelease-ci": "git push --follow-tags",
     "prea11y-audit": "playwright install",
-    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
+    "prebuild": "rimraf components && tsc --project tsconfig-build.json && cpy './**/*' '!**/*.stories.*' '!**/*.figma.*' '!**/*.ts' '!**/*.tsx' '!**/test-helpers/mocks/**' ../components --parents --cwd=src/",
     "prepare": "webpack -c .storybook/custom-header/webpack.config.js",
     "prepublishOnly": "pinst --disable",
     "prerelease-built-ci": "node scripts/prepare-built-package.js",
@@ -124,7 +124,6 @@
     "@vitejs/plugin-react": "^5.0.4",
     "@vitest/eslint-plugin": "^1.3.23",
     "acorn": "^8.15.0",
-    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-require-context-hook": "^1.0.0",
     "caniuse-lite": "^1.0.30001754",
     "chai-as-promised": "^8.0.2",
@@ -211,6 +210,7 @@
     "@types/react-virtualized": "9.22.3",
     "@types/util-deprecate": "^1.0.4",
     "babel-loader": "10.0.0",
+    "babel-plugin-react-compiler": "^1.0.0",
     "babel-plugin-transform-define": "^2.1.4",
     "browserslist": "^4.27.0",
     "change-case": "^4.1.1",

package/components/avatar/avatar.figma.js

@@ -1,45 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=5990-522
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-
-const round = instance.getBoolean('Round');
-const size = parseInt(instance.getString('Size'), 10);
-const content = instance.getString('Content');
-
-const props = [];
-const DEFAULT_SIZE = 20;
-const isDefaultSize = size === DEFAULT_SIZE;
-const imports = [`import Avatar${isDefaultSize ? '' : ', {Size}'} from '@jetbrains/ring-ui/components/avatar/avatar'`];
-if (!isDefaultSize) {
-  props.push(`size={Size.Size${size}}`);
-}
-switch (content) {
-  case 'color/image':
-    props.push('url="avatar.png"');
-    break;
-  case 'name':
-    props.push('username="Samuel Morse"');
-    break;
-  case 'label':
-    props.push(`info="${instance.findText('Content').textContent}"`);
-    break;
-  case 'icon':
-    imports.push(
-      "import Icon from '@jetbrains/ring-ui/components/icon/icon'",
-      "import warningIcon from '@jetbrains/icons/warning.svg'",
-    );
-    props.push('info={<Icon glyph={warningIcon} />}');
-    break;
-  default:
-}
-if (round) {
-  props.push('round');
-}
-
-export default {
-  id: 'avatar',
-  example: figma.code`${imports.join('\n')}
-
-<Avatar ${props.map(prop => `${prop} `).join('')}/>`,
-};

package/components/avatar-stack/avatar-stack.figma.js

@@ -1,33 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=5990-752
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const sizeString = instance.getString('Size');
-const [sizeSubstring] = sizeString.match(/\d+/) ?? [];
-const size = parseInt(sizeSubstring, 10);
-const children = instance.findConnectedInstances(() => true);
-
-const imports = ["import AvatarStack from '@jetbrains/ring-ui/components/avatar-stack/avatar-stack'"];
-const props = [];
-
-const DEFAULT_SIZE = 20;
-const isDefaultSize = size === DEFAULT_SIZE;
-if (!isDefaultSize) {
-  props.push(`size={Size.Size${size}}`);
-}
-
-const renderedChildren = children.map(child => {
-  const {example} = child.executeTemplate();
-  const [childImports, code] = example[0].code.split('\n\n');
-  return {imports: childImports, code};
-});
-
-export default {
-  id: 'avatar-stack',
-  example: figma.code`${imports.join('\n')}
-${renderedChildren[0].imports}
-
-<AvatarStack ${props.map(prop => `${prop} `).join('')}>
-  ${renderedChildren.map(({code}) => code).join('\n  ')}
-</AvatarStack>`,
-};

package/components/breadcrumbs/breadcrumbs.figma.js

@@ -1,31 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=460%3A2730
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-
-const imports = [
-  "import Breadcrumbs from '@jetbrains/ring-ui/components/breadcrumbs/breadcrumbs'",
-  "import Link from '@jetbrains/ring-ui/components/link/link'",
-];
-
-const children = instance
-  .findLayers(() => true)
-  .map(layer => layer.textContent)
-  .filter(text => text !== '/');
-
-export default {
-  id: 'breadcrumbs',
-  example: figma.code`${imports.join('\n')}
-
-<Breadcrumbs>
-  ${children
-    .map((text, index) => {
-      const props = [`href="/page${index + 1}"`];
-      if (index === children.length - 1) {
-        props.push('active');
-      }
-      return `<Link ${props.map(prop => `${prop} `).join('')}>${text}</Link>`;
-    })
-    .join('\n  ')}
-</Breadcrumbs>`,
-};

package/components/button/button.figma.js

@@ -1,95 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=9954-528
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-
-const size = instance.getString('Size');
-const type = instance.getString('Type');
-const state = instance.getString('State');
-const variant = instance.getString('Variant');
-
-const imports = ["import Button from '@jetbrains/ring-ui/components/button/button'"];
-const props = [];
-const DEFAULT_SIZE = 'M';
-const isDefaultSize = size === DEFAULT_SIZE;
-
-if (!isDefaultSize) {
-  imports.push("import {ControlsHeight} from '@jetbrains/ring-ui/components/global/controls-height'");
-  props.push(`height={ControlsHeight.${size}}`);
-}
-
-switch (variant) {
-  case 'Red outlined':
-    props.push('danger');
-    break;
-  case 'Main':
-    props.push('primary');
-    break;
-  case 'Green':
-    props.push('success');
-    break;
-  case 'Red solid':
-    props.push('error');
-    break;
-  case 'Gray':
-    props.push('secondary');
-    break;
-  case 'Ghost':
-    props.push('ghost');
-    break;
-  case 'Text':
-    props.push('inline');
-    break;
-  default:
-}
-
-const children = instance.findLayers(() => true)[0].findText('Button').textContent;
-const use12pxIcon = size === 'S' && variant !== 'Text';
-let useButtonGroup = false;
-switch (type) {
-  case 'R-Icon-Label':
-    props.push('dropdown');
-    break;
-  case 'L-Icon-Label':
-    imports.push(`import downloadIcon from '@jetbrains/icons/download${use12pxIcon ? '-12px' : ''}'`);
-    props.push('icon={downloadIcon}');
-    break;
-  case 'Icon':
-    imports.push(`import addIcon from '@jetbrains/icons/add${use12pxIcon ? '-12px' : ''}'`);
-    props.push('icon={addIcon}');
-    break;
-  case 'Split':
-    imports.push("import ButtonGroup from '@jetbrains/ring-ui/components/button-group/button-group'");
-    imports.push(`import chevronDownIcon from '@jetbrains/icons/chevron-down${use12pxIcon ? '-12px' : ''}'`);
-    useButtonGroup = true;
-    break;
-  default:
-}
-
-switch (state) {
-  case 'Disabled':
-    props.push('disabled');
-    break;
-  default:
-}
-
-const joinedProps = props.map(prop => `${prop} `).join('');
-// prettier-ignore
-const button = children ?
-`<Button ${joinedProps}>
-  ${children}
-</Button>` : `<Button ${joinedProps}/>`;
-
-export default {
-  id: 'button',
-  example: figma.code`${imports.join('\n')}
-
-${
-  // prettier-ignore
-  useButtonGroup ?
-      `<ButtonGroup>
-  ${button}
-  <Button ${joinedProps} icon={chevronDownIcon} />
-</ButtonGroup>` : button
-}`,
-};

package/components/checkbox/checkbox-group.figma.js

@@ -1,31 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=226-2666
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const labelType = instance.getString('Label');
-const children = instance.findConnectedInstances(() => true);
-const label = instance.findText('Group description').textContent;
-
-const isFormLabel = labelType === 'form';
-const imports = [
-  `import ControlLabel${isFormLabel ? ', {LabelType}' : ''} from '@jetbrains/ring-ui/components/control-label/control-label'`,
-];
-const labelProps = [];
-if (isFormLabel) {
-  labelProps.push('type={LabelType.FORM}');
-}
-
-const renderedChildren = children.map(child => {
-  const {example} = child.executeTemplate();
-  const [childImports, code] = example[0].code.split('\n\n');
-  return {imports: childImports, code};
-});
-
-export default {
-  id: 'checkbox-group',
-  example: figma.code`${imports.join('\n')}
-${renderedChildren[0].imports}
-
-<ControlLabel ${labelProps.map(prop => `${prop} `).join('')}>${label}</ControlLabel>
-${renderedChildren.map(({code}) => code).join('\n<br />\n')}`,
-};

package/components/checkbox/checkbox.figma.js

@@ -1,38 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI?node-id=224%3A1943
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const selected = instance.getString('Selected');
-const hasLabel = instance.getBoolean('Label');
-const label = instance.findText('Label').textContent;
-const hasHelpText = instance.getBoolean('Help Text');
-const helpText = instance.findText('Description').textContent;
-const state = instance.getString('State');
-
-const imports = ["import Checkbox from '@jetbrains/ring-ui/components/checkbox/checkbox'"];
-const props = [];
-switch (selected) {
-  case 'selected':
-    props.push('defaultChecked');
-    break;
-  case 'intermediate':
-    props.push('indeterminate', 'defaultChecked');
-    break;
-  default:
-}
-if (hasLabel) {
-  props.push(`label="${label}"`);
-}
-if (hasHelpText) {
-  props.push(`help="${helpText}"`);
-}
-if (state === 'Disabled') {
-  props.push('disabled');
-}
-
-export default {
-  id: 'checkbox',
-  example: figma.code`${imports.join('\n')}
-
-<Checkbox ${props.map(prop => `${prop} `).join('')}/>`,
-};

package/components/error-bubble/error-bubble.figma.js

@@ -1,15 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=1228-2869
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const error = instance.findLayers(() => true)[0].textContent;
-
-const imports = ["import ErrorBubble from '@jetbrains/ring-ui/components/error-bubble/error-bubble'"];
-const props = [`error={\`${error}\``];
-
-export default {
-  id: 'error-bubble',
-  example: figma.code`${imports.join('\n')}
-
-<ErrorBubble ${props.map(prop => `${prop} `).join('')}/>`,
-};

package/components/input/input.figma.js

@@ -1,74 +0,0 @@
-// url=https://www.figma.com/design/HY6d4uE1xxaQXCMG9fe6Y2/RingUI-(Internal)?node-id=7538-7763
-import figma from '@figma/code-connect';
-
-const instance = figma.selectedInstance;
-const size = instance.getString('Size');
-const state = instance.getString('State');
-const formVariant = instance.getBoolean('Form variant');
-const icon = instance.getBoolean('Icon');
-const clearable = instance.getBoolean('Clearable');
-const hasLabel = instance.getBoolean('Label');
-const label = instance.findText('Label').textContent;
-const hasHelpText = instance.getBoolean('Help text');
-const helpText = instance.findText('Help text').textContent;
-const hasText = instance.getBoolean('Text');
-const text = instance.findText('Text').textContent;
-const hasPlaceholder = instance.getBoolean('Placeholder');
-const placeholder = instance.findText('Placeholder').textContent;
-
-const imports = ["import Input from '@jetbrains/ring-ui/components/input/input'"];
-const props = [];
-const DEFAULT_SIZE = 'M';
-const isDefaultSize = size === DEFAULT_SIZE;
-
-if (!isDefaultSize) {
-  imports.push("import {ControlsHeight} from '@jetbrains/ring-ui/components/global/controls-height'");
-  props.push(`height={ControlsHeight.${size}}`);
-}
-
-switch (state) {
-  case 'disabled':
-    props.push('disabled');
-    break;
-  case 'error':
-    props.push('error=""');
-    break;
-  default:
-}
-
-if (formVariant) {
-  imports.push("import {LabelType} from '../control-label/control-label'");
-  props.push('labelType={LabelType.FORM}');
-}
-
-if (icon) {
-  imports.push("import searchIcon from '@jetbrains/icons/search'");
-  props.push('icon={searchIcon}');
-}
-
-if (clearable) {
-  props.push('onClear={() => {}}');
-}
-
-if (hasLabel) {
-  props.push(`label="${label}"`);
-}
-
-if (hasHelpText) {
-  props.push(`help="${helpText}"`);
-}
-
-if (hasText) {
-  props.push(`defaultValue="${text}"`);
-}
-
-if (hasPlaceholder) {
-  props.push(`placeholder="${placeholder}"`);
-}
-
-export default {
-  id: 'input',
-  example: figma.code`${imports.join('\n')}
-
-<Input ${props.map(prop => `${prop} `).join('')}/>`,
-};