@catena-x/portal-shared-components v3.0.8
Catena-X Portal Shared UI Components
Contains the Shared UI Components that are used to build the 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 a different setup like npm/npx or JavaScript there are other templates available.
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
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.
+ 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.
+ 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
+ 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.
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)
} />
</>
)
}
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
Steps to run local storybook
yarn
yarn start
License
Distributed under the Apache 2.0 License. See LICENSE for more information.
4 days ago
11 days ago
11 days ago
17 days ago
30 days ago
30 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
8 months ago
8 months ago
11 months ago
8 months ago
10 months ago
8 months ago
11 months ago
8 months ago
10 months ago
8 months ago
10 months ago
8 months ago
7 months ago
6 months ago
6 months ago
8 months ago
9 months ago
8 months ago
9 months ago
7 months ago
10 months ago
7 months ago
9 months ago
7 months ago
10 months ago
7 months ago
10 months ago
7 months ago
7 months ago
10 months ago
8 months ago
9 months ago
9 months ago
9 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago