@plone/volto 18.0.0-alpha.23 → 18.0.0-alpha.25

package/CHANGELOG.md

@@ -17,6 +17,29 @@ myst:
 
 <!-- towncrier release notes start -->
 
+## 18.0.0-alpha.25 (2024-03-24)
+
+### Internal
+
+- Remove dangling unused lines in StoryBook config @sneridagh [#5911](https://github.com/plone/volto/issues/5911)
+- Upgrade Storybook to version 8. @sneridagh [#5912](https://github.com/plone/volto/issues/5912)
+
+### Documentation
+
+- Update information about Quanta plans. [@jensens] [#5903](https://github.com/plone/volto/issues/5903)
+
+## 18.0.0-alpha.24 (2024-03-23)
+
+### Feature
+
+- Add id attribute to discussions container and individual comments [@ericof] [#5904](https://github.com/plone/volto/issues/5904)
+
+### Internal
+
+- Move `testing-library` Cypress commands import to inner commands, so it can be imported from the outside. @sneridagh [#5906](https://github.com/plone/volto/issues/5906)
+- Add new cypress helper for slate `getSlateEditorAndType` @sneridagh [#5909](https://github.com/plone/volto/issues/5909)
+- Upgrade @typescript-eslint @sneridagh [#5910](https://github.com/plone/volto/issues/5910)
+
 ## 18.0.0-alpha.23 (2024-03-21)
 
 ### Feature

package/cypress/support/commands.js

@@ -1,4 +1,5 @@
 /* eslint-disable no-console */
+import '@testing-library/cypress/add-commands';
 import { getIfExists } from '../helpers';
 import { ploneAuth } from './constants';
 
@@ -21,8 +22,6 @@ const ploneAuthObj = {
   pass: ploneAuth[1],
 };
 
-export * from './volto-slate';
-
 // --- isInViewport ----------------------------------------------------------
 Cypress.Commands.add('isInViewport', (element) => {
   cy.get(element).then(($el) => {

package/cypress/support/helpers.js

@@ -0,0 +1 @@
+export * from './volto-slate';

package/cypress/support/volto-slate.js

@@ -75,3 +75,7 @@ export const selectSlateNodeOfWord = (el) => {
     win.document.dispatchEvent(event);
   });
 };
+
+export const getSlateEditorAndType = (selector, type) => {
+  return cy.get(selector).focus().click().wait(1000).type(type).wait(1000);
+};

package/package.json

@@ -9,7 +9,7 @@
     }
   ],
   "license": "MIT",
-  "version": "18.0.0-alpha.23",
+  "version": "18.0.0-alpha.25",
   "repository": {
     "type": "git",
     "url": "git@github.com:plone/volto.git"
@@ -251,18 +251,19 @@
     "@babel/plugin-syntax-export-namespace-from": "7.8.3",
     "@babel/runtime": "7.20.6",
     "@babel/types": "7.20.5",
+    "@jest/globals": "^29.7.0",
     "@loadable/babel-plugin": "5.13.2",
     "@loadable/webpack-plugin": "5.15.2",
-    "@jest/globals": "^29.7.0",
     "@sinonjs/fake-timers": "^6.0.1",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-controls": "6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
+    "@storybook/addon-actions": "^8.0.4",
+    "@storybook/addon-controls": "^8.0.4",
+    "@storybook/addon-docs": "^8.0.4",
+    "@storybook/addon-essentials": "^8.0.4",
+    "@storybook/addon-links": "^8.0.4",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/react": "^8.0.4",
+    "@storybook/react-webpack5": "^8.0.4",
+    "@storybook/theming": "^8.0.4",
     "@testing-library/cypress": "10.0.1",
     "@testing-library/jest-dom": "6.4.2",
     "@testing-library/react": "14.2.0",
@@ -274,8 +275,8 @@
     "@types/react-router-dom": "^5.3.3",
     "@types/react-test-renderer": "18.0.7",
     "@types/uuid": "^9.0.2",
-    "@typescript-eslint/eslint-plugin": "7.1.1",
-    "@typescript-eslint/parser": "7.1.1",
+    "@typescript-eslint/eslint-plugin": "7.3.1",
+    "@typescript-eslint/parser": "7.3.1",
     "autoprefixer": "10.4.8",
     "axe-core": "4.4.2",
     "babel-loader": "9.1.0",
@@ -306,8 +307,8 @@
     "identity-obj-proxy": "3.0.0",
     "jest": "26.6.3",
     "jest-environment-jsdom": "^26",
-    "jsdom": "^16.7.0",
     "jest-file": "1.0.0",
+    "jsdom": "^16.7.0",
     "jsonwebtoken": "9.0.0",
     "less": "3.11.1",
     "less-loader": "11.1.0",
@@ -331,6 +332,7 @@
     "release-it": "^17.1.1",
     "semver": "^7.5.4",
     "start-server-and-test": "1.14.0",
+    "storybook": "^8.0.4",
     "style-loader": "3.3.1",
     "stylelint": "16.2.1",
     "stylelint-config-idiomatic-order": "10.0.0",
@@ -344,7 +346,7 @@
     "typescript": "^5.4.2",
     "use-trace-update": "1.3.2",
     "wait-on": "6.0.0",
-    "webpack": "5.76.1",
+    "webpack": "5.90.1",
     "webpack-bundle-analyzer": "4.10.1",
     "webpack-dev-server": "4.11.1",
     "webpack-node-externals": "3.0.0",
@@ -382,7 +384,7 @@
     "release": "release-it",
     "release-major-alpha": "release-it major --preRelease=alpha",
     "release-alpha": "release-it --preRelease=alpha",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
 }

package/src/components/manage/UniversalLink/{UniversalLink.stories.mdx → UniversalLink.stories.js}

@@ -1,30 +1,9 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
 import UniversalLinkComponent from './UniversalLink';
 import { injectIntl } from 'react-intl';
 import configureStore from 'redux-mock-store';
 import { Provider } from 'react-intl-redux';
 
-<Meta
-  title="UniversalLink"
-  argTypes={{
-    href: { control: 'text' },
-    item: { control: 'object' },
-    text: { control: 'text' },
-  }}
-  decorators={[
-    (Story) => (
-      <div style={{ width: '400px' }}>
-        <Story />
-      </div>
-    ),
-  ]}
-/>
-
-# UniversalLink
-
-Link to url or item
-
-export const UniversalLink = (args) => {
+const UniversalLink = (args) => {
   const mockStore = configureStore();
   const store = mockStore({
     userSession: {
@@ -57,8 +36,37 @@ export const UniversalLink = (args) => {
   );
 };
 
-<Story name="UniversalLink">{injectIntl(UniversalLink).bind({})}</Story>
+export default {
+  title: 'UniversalLink',
 
-# Props
+  argTypes: {
+    href: {
+      control: 'text',
+    },
 
-<ArgsTable of={UniversalLinkComponent} />
+    item: {
+      control: 'object',
+    },
+
+    text: {
+      control: 'text',
+    },
+  },
+
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          width: '400px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export const UniversalLink_ = {
+  render: injectIntl(UniversalLink).bind({}),
+  name: 'UniversalLink',
+};

package/src/components/theme/Avatar/Avatar.stories.js

@@ -0,0 +1,24 @@
+import Avatar from './Avatar';
+
+const UserAvatar = (args) => <Avatar {...args} />;
+
+export default {
+  title: 'Avatar',
+
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+  },
+};
+
+export const Avatar3 = {
+  render: UserAvatar.bind({}),
+  name: 'Avatar',
+
+  args: {
+    title: 'Plone',
+    color: '#007eb6',
+    size: 60,
+  },
+};

package/src/components/theme/Comments/Comments.jsx

@@ -213,7 +213,7 @@ const Comments = (props) => {
   // recursively makes comments with their replies nested
   // each iteration will show replies to the specific comment using allCommentsWithCildren
   const commentElement = (comment) => (
-    <Comment key={comment.comment_id}>
+    <Comment key={comment.comment_id} id={comment.comment_id}>
       <Avatar
         src={flattenToAppURL(comment.author_image)}
         title={comment.author_name || 'Anonymous'}
@@ -345,7 +345,7 @@ const Comments = (props) => {
         </div>
       )}
       {/* all comments  */}
-      <Comment.Group threaded>
+      <Comment.Group threaded id={'discussion'}>
         {allPrimaryComments.map((item) => commentElement(item))}
       </Comment.Group>
 

package/src/components/theme/Title/Title.stories.js

@@ -0,0 +1,22 @@
+import TitleComponent from './Title';
+
+const Title = (args) => <TitleComponent {...args} />;
+
+export default {
+  title: 'Title',
+
+  argTypes: {
+    title: {
+      control: 'text',
+    },
+  },
+};
+
+export const Title_ = {
+  render: Title.bind({}),
+  name: 'Title',
+
+  args: {
+    title: 'Welcome to Plone',
+  },
+};

package/types/components/manage/UniversalLink/UniversalLink.stories.d.ts

@@ -0,0 +1,22 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        namespace href {
+            let control: string;
+        }
+        namespace item {
+            let control_1: string;
+            export { control_1 as control };
+        }
+        namespace text {
+            let control_2: string;
+            export { control_2 as control };
+        }
+    }
+    let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
+}
+export default _default;
+export namespace UniversalLink_ {
+    let render: any;
+    let name: string;
+}

package/types/components/theme/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,20 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        export namespace title_1 {
+            let control: string;
+        }
+        export { title_1 as title };
+    }
+}
+export default _default;
+export namespace Avatar3 {
+    let render: any;
+    let name: string;
+    namespace args {
+        let title_2: string;
+        export { title_2 as title };
+        export let color: string;
+        export let size: number;
+    }
+}

package/types/components/theme/Title/Title.stories.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    let title: string;
+    namespace argTypes {
+        export namespace title_1 {
+            let control: string;
+        }
+        export { title_1 as title };
+    }
+}
+export default _default;
+export namespace Title_ {
+    let render: any;
+    let name: string;
+    namespace args {
+        let title_2: string;
+        export { title_2 as title };
+    }
+}

package/src/components/theme/Avatar/Avatar.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import Avatar from './Avatar';
-
-<Meta
-  title="Avatar"
-  argTypes={{
-    title: { control: 'text' },
-  }}
-/>
-
-# Avatar
-
-```jsx static
-<Avatar title="Plone" color="#007eb6" size={60} />
-```
-
-export const UserAvatar = (args) => <Avatar {...args} />;
-
-<Story name="Avatar" args={{ title: 'Plone', color: '#007eb6', size: 60 }}>
-  {UserAvatar.bind({})}
-</Story>
-
-## Props
-
-<ArgsTable of={Avatar} />

package/src/components/theme/Title/Title.stories.mdx

@@ -1,25 +0,0 @@
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
-import TitleComponent from './Title';
-
-<Meta
-  title="Title"
-  argTypes={{
-    title: { control: 'text' },
-  }}
-/>
-
-# Title
-
-```jsx static
-<Title title="Plone" />
-```
-
-export const Title = (args) => <TitleComponent {...args} />;
-
-<Story name="Title" args={{ title: 'Welcome to Plone' }}>
-  {Title.bind({})}
-</Story>
-
-## Props
-
-<ArgsTable of={TitleComponent} />