fix(docs): re-enable storybook autodocs and fix README

.storybook/preview.tsx

@@ -33,7 +33,7 @@ const withTheme = (Story) => {
 export const decorators = [withTheme]
 
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
+  actions: {},
   controls: {
     matchers: {
       color: /(background|color)$/i,

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.5
+
+- Add storybook autodocs and fix README
+
 ## 3.0.4
 
 - Re-introduce some props for backward compatibility

DEPENDENCIES

@@ -145,7 +145,7 @@ npm/npmjs/-/debug/2.6.9, MIT, approved, clearlydefined
 npm/npmjs/-/debug/3.2.7, MIT, approved, clearlydefined
 npm/npmjs/-/debug/4.3.4, MIT, approved, clearlydefined
 npm/npmjs/-/decimal.js/10.4.3, MIT, approved, clearlydefined
-npm/npmjs/-/dedent/1.5.1, MIT, approved, clearlydefined
+npm/npmjs/-/dedent/1.5.1, MIT, approved, #14381
 npm/npmjs/-/deep-eql/4.1.3, MIT, approved, #4591
 npm/npmjs/-/deep-equal/2.2.3, MIT, approved, #8406
 npm/npmjs/-/deep-is/0.1.4, MIT, approved, #2130
@@ -598,7 +598,7 @@ npm/npmjs/-/pumpify/1.5.1, MIT, approved, clearlydefined
 npm/npmjs/-/punycode/2.3.1, MIT, approved, #6373
 npm/npmjs/-/pure-rand/6.1.0, MIT, approved, clearlydefined
 npm/npmjs/-/qs/6.11.0, BSD-3-Clause, approved, #7556
-npm/npmjs/-/qs/6.12.0, BSD-3-Clause, approved, clearlydefined
+npm/npmjs/-/qs/6.12.0, BSD-3-Clause, approved, #14380
 npm/npmjs/-/querystringify/2.2.0, MIT, approved, clearlydefined
 npm/npmjs/-/queue-microtask/1.2.3, MIT, approved, clearlydefined
 npm/npmjs/-/ramda/0.29.0, MIT, approved, #8976

README.md

@@ -1,75 +1,160 @@
 # Catena-X Portal Shared UI Components
 
-Contains the Shared UI Components that are used to build the [Portal Frontend](https://github.com/eclipse-tractusx/portal-frontend).
-Detailed documentation: https://eclipse-tractusx.github.io/portal-shared-components/
+Contains the Shared UI Components that are used to build the [Portal Frontend](https://github.com/eclipse-tractusx/portal-frontend) and other applications in the Catena-X ecosystem.
+
+- Source Code: https://github.com/eclipse-tractusx/portal-shared-components
+- NPM Library: https://npmjs.com/package/@catena-x/portal-shared-components
+- Components Storybook: https://eclipse-tractusx.github.io/portal-shared-components/
 
 ## User documentation
 
 To use components in your own project follow this guide.
 First create a new react app and add dependencies for the library and Material UI.
-We are using yarn and TypeScript, if you prefer npm/npx or JavaScript use those.
+We are using yarn and TypeScript, if you prefer a different setup like npm/npx or
+JavaScript there are other templates available.
 
-    yarn create react-app sample-shared-components --template typescript
+    yarn create vite sample-shared-components --template react-ts
     cd sample-shared-components
     yarn add @catena-x/portal-shared-components @mui/icons-material @mui/material
 
-Install dependencies and start the development server
-
-    yarn start
-
-Edit `src/index.tsx` and wrap the `App` with the CX `SharedThemeProvider` context
-
-    ReactDOM.createRoot(
-        document.getElementById('root') as HTMLElement
-    ).render(
-        <React.StrictMode>
-            <SharedThemeProvider>
-                <App />
-            </SharedThemeProvider>
-        </React.StrictMode>
-    )
-
-Edit `src/index.css` and add this stylings
-
-Note: replace <YOUR_PORTAL_HOSTNAME> with your installation host name.
-
-    @font-face {
-        font-family: "LibreFranklin-SemiBold";
-        font-display: block;
-        src: url("https://<YOUR_PORTAL_HOSTNAME>/assets/fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype");
-        font-weight: 600;
-    }
-    @font-face {
-        font-family: "LibreFranklin-Medium";
-        font-display: block;
-        src: url("https://<YOUR_PORTAL_HOSTNAME>/assets/fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype");
-        font-weight: 500;
-    }
-    @font-face {
-        font-family: "LibreFranklin";
-        font-display: block;
-        src: url("https://<YOUR_PORTAL_HOSTNAME>/assets/fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype");
-        font-weight: 400;
-    }
-    @font-face {
-        font-family: "LibreFranklin-Light";
-        font-display: block;
-        src: url("https://<YOUR_PORTAL_HOSTNAME>/assets/fonts/LibreFranklin-VariableFont_wght.ttf") format("truetype");
-        font-weight: 300;
-    }
-
-    body {
-        margin: 0;
-        font-family: 'LibreFranklin', 'Libre Franklin', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
-        color: black;
-        font-weight: 300;
+Then start the development server and open the browser
+
+    yarn dev
+    # press o + enter
+
+Check the default Vite React App in your browser which shows a button counting the
+number of times it has been clicked. Now let's modify this App so it's using the
+Shared Components instead of default HTML elements.
+
+Edit `src/main.tsx` to import and wrap the `App` with the Catena-X `SharedThemeProvider` context.
+
+```diff
++ import { SharedThemeProvider } from '@catena-x/portal-shared-components'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
++   <SharedThemeProvider>
+      <App />
++   </SharedThemeProvider>
+  </React.StrictMode>,
+)
+```
+
+Open `src/App.tsx` to import the Button component and replace the default button with it.
+
+```diff
++ import { Button } from '@catena-x/portal-shared-components'
+...
+-   <button ...>
++   <Button ...>
+...
+-   </button>
++   </Button>
+```
+
+Then check in your browser how the appearance of the button has changed from
+a dark more rectangle shaped to a larger blue more rounded one. However the
+behavior of the button hasn't changed.
+
+Now let's have a look at a more complex example. In a first step we remove the
+stylings because the components are coming with Catena-X UI styling presets.
+
+Remove the css import from `src/main.tsx`
+
+```diff
++ import './index.css'
+```
+
+Add two more libraries
+
+    yarn add amount-to-words @javascript-packages/roman-numerals
+
+Then open `src/App.tsx` again and overwrite the content with this example.
+
+```diff
+import { useState } from 'react'
+import { Button, Cards, ViewSelector } from '@catena-x/portal-shared-components'
+import { numberToWords } from 'amount-to-words'
+import { toRoman } from '@javascript-packages/roman-numerals'
+
+const isPrime = (num: number) => {
+    for (let i = 2, s = Math.sqrt(num); i <= s; i++)
+        if (num % i === 0)
+            return false
+    return num > 1
+}
+
+enum ViewType {
+    ALL = 'ALL',
+    ODD = 'ODD',
+    EVEN = 'EVEN',
+    PRIME = 'PRIME',
+}
+
+const viewFilter: Record<ViewType, (n: number) => boolean> = {
+    ALL: () => true,
+    ODD: (n) => n % 2 === 1,
+    EVEN: (n) => n % 2 === 0,
+    PRIME: isPrime,
+}
+
+const svgtext = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" style="background-color:green"><style>text{font:36px bold;stroke-linejoin:round;stroke:#ffa600;fill:#b3cb2d;text-anchor:middle;dominant-baseline:middle;stroke-width:4px;paint-order:stroke;}</style><text x="32" y="36">N</text></svg>'
+
+const generateImage = (n: number) => `data:image/svg+xml,${encodeURIComponent(svgtext.replace('N', n.toString()))}`
+
+const generateCard = (n: number) => ({
+    title: numberToWords(n),
+    subtitle: n === 0 ? '0' : toRoman(n),
+    subscriptionStatus: isPrime(n) ? 'Prime' : undefined,
+    description: 'This is a description of the card',
+    image: {
+        src: generateImage(n),
     }
+})
+
+const cardsArgs = {
+    variant: 'compact',
+    expandOnHover: true,
+    imageSize: 'medium',
+    imageShape: 'round',
+    buttonText: 'View',
+}
+
+function App() {
+    const [count, setCount] = useState<number>(1)
+    const [view, setView] = useState<ViewType>(ViewType.ALL)
+
+    return (
+        <>
+            <Button onClick={() => { setCount(() => count + 1) }}> count is {count} </Button>
+            <ViewSelector views={
+                Object.keys(ViewType)
+                    .map(
+                        (buttonText) => ({
+                            buttonText,
+                            buttonValue: buttonText,
+                            onButtonClick: (e: React.MouseEvent) => { setView(e.target.value as ViewType) },
+                        })
+                    )
+            }
+                activeView={view}
+            />
+            <Cards {...cardsArgs} items={
+                new Array(count)
+                    .fill(0)
+                    .map((_, i) => i)
+                    .filter(viewFilter[view])
+                    .map(generateCard)
+            } />
+        </>
+    )
+}
 
-Open `App.tsx` and replace the code with this example
+export default App
+```
 
-    import { Button } from "@catena-x/portal-shared-components";
-    const App = () => <Button onClick={() => { alert('clicked') }}>Click me</Button>
-    export default App;
+This example shows several components working together. Every button click
+adds a new card for that number and you can filter the cards by various criteria.
 
 ## Developer documentation
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Alert/Alert.stories.tsx

@@ -25,6 +25,7 @@ import { Alert as Component } from '.'
 export default {
   title: 'Alert',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {
     children: {},
   },

src/components/basic/BaseImage/BaseImage.stories.tsx

@@ -25,6 +25,7 @@ import { BaseImage as Component } from '.'
 export default {
   title: 'Image',
   component: Component,
+  tags: ['autodocs'],
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (

src/components/basic/Breadcrumb/Breadcrumb.stories.tsx

@@ -26,6 +26,7 @@ import { Breadcrumb as Component } from '.'
 export default {
   title: 'Breadcrumb',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {},
 }
 

src/components/basic/Button/BackButton.stories.tsx

@@ -25,6 +25,7 @@ import { BackButton as Component } from './BackButton'
 export default {
   title: 'Buttons',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {
     onBackButtonClick: {
       action: 'onClick',

src/components/basic/Button/LoadMoreButton.stories.tsx

@@ -25,6 +25,7 @@ import { LoadMoreButton as Component } from './LoadMoreButton'
 export default {
   title: 'Buttons',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {},
 }
 

src/components/basic/Carousel/Carousel.stories.tsx

@@ -26,6 +26,7 @@ import uniqueId from 'lodash/uniqueId'
 export default {
   title: 'Carousel',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {
     children: {},
   },

src/components/basic/Carousel/CarouselBox.stories.tsx

@@ -26,6 +26,7 @@ import uniqueId from 'lodash/uniqueId'
 export default {
   title: 'Carousel',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {
     children: {},
   },

src/components/basic/CategoryDivider/CategoryDivider.stories.tsx

@@ -25,6 +25,7 @@ import { CategoryDivider as Component } from '.'
 export default {
   title: 'CategoryDivider',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {},
 }
 

src/components/basic/Checkbox/Checkbox.stories.tsx

@@ -25,6 +25,7 @@ import { Checkbox as Component } from '.'
 export default {
   title: 'Form',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {
     onClick: {
       action: 'onClick',

src/components/basic/Chip/DraggableChip.stories.tsx

@@ -25,6 +25,7 @@ import { DraggableChip as Component } from './DraggableChip'
 export default {
   title: 'Chip',
   component: Component,
+  tags: ['autodocs'],
   args: {
     children: 'name_use_case_4',
     isSelected: false,

src/components/basic/Chip/chip.stories.tsx

@@ -24,6 +24,7 @@ import { Chip as Component } from '.'
 export default {
   title: 'Chip',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {},
   parameters: {},
 }

src/components/basic/CircularProgress/circularProgress.stories.tsx

@@ -25,6 +25,7 @@ import { CircularProgress as Component } from '.'
 export default {
   title: 'Loading',
   component: Component,
+  tags: ['autodocs'],
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (

src/components/basic/CustomAccordion/CustomAccordion.stories.tsx

@@ -29,6 +29,7 @@ import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'
 export default {
   title: 'CustomAccordion',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {
     children: {},
   },

src/components/basic/Datepicker/Datepicker.stories.tsx

@@ -26,6 +26,7 @@ import { Datepicker as Component } from '.'
 export default {
   title: 'Datepicker',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {},
 }
 

src/components/basic/Dialog/Dialog.stories.tsx

@@ -29,6 +29,7 @@ import { DialogHeader } from './DialogHeader'
 export default {
   title: 'Modal',
   component: Component,
+  tags: ['autodocs'],
   argTypes: {
     maxWidth: {
       control: 'inline-radio',

src/components/basic/Dialog/DialogActions.stories.tsx

@@ -26,6 +26,7 @@ import { Button } from '../Button'
 export default {
   title: 'Modal',
   component: Component,
+  tags: ['autodocs'],
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (

src/components/basic/Dialog/DialogHeader.stories.tsx

@@ -25,6 +25,7 @@ import { DialogHeader as Component } from './DialogHeader'
 export default {
   title: 'Modal',
   component: Component,
+  tags: ['autodocs'],
 }
 
 const Template: ComponentStory<typeof Component> = (args: any) => (