Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
@ausuliv/frontend-components
Advanced tools
Common components for RedHat Cloud Services project.
This package consists of shared components required by RedHat Cloud Services team.
With npm
npm i -S @redhat-cloud-services/frontend-components
With yarn
yarn add @redhat-cloud-services/frontend-components
This package is dependent on @ausuliv/frontend-components-utilities and will automatically install it trough direct dependencies.
cjs
or esm
from your import paths.components
fragment from your import path// v2
import { Ansible } from '@ausuliv/frontend-components/components/cjs/Ansible';
// v3
import Ansible from '@ausuliv/frontend-components/Ansible';
/** OR */
import { Ansible } from '@ausuliv/frontend-components/Ansible';
Importing CSS for components is no longer required. Components import their styling whenever they are rendered for the first time.
-@import '~@ausuliv/frontend-components/index.css';
When importing a partial component like TextFilter
from ConditionalFilter
, use direct import shorthand from ConditionalFilter
. Do not import from TextFilter
file directly!
All imports must have at most only one level!
// OK
import { X } from '@ausuliv/frontend-components/<ModuleName>'
// Wrong!!
import X from '@ausuliv/frontend-components/<ModuleName>/X'
Deeper imports will break automatic csj/esm module resolution.
In order not to improve your bundle size you you should either import components trough direct imports or use babel plugin to change relative imports to direct imports. You can mix both direct imports and babel plugin, it's just convenient to use the babel plugin so you don't have to change all of your imports.
For speedy build times, you can use direct import paths For instance tableToolbar
can be imported as:
import TableToolbar from '@ausuliv/frontend-components/TableToolbar';
You can also use shorthand imports.
There are 2 plugins that can be used to change relative imports to direct imports
Since our components require a bit more setting up, we are recommending using babel-plugin-transform-imports
.
Change your babel config to be javascript config babel.config.js
so you can use JS functions to properly transform your imports.
Not every component has its own directory. You can use mapper to map component name to directory.
const FECMapper = {
SkeletonSize: 'Skeleton',
PageHeaderTitle: 'PageHeader'
};
module.exports = {
presets: [
// your presets go here
],
plugins: [
// your plugins
[
'transform-imports',
{
'@redhat-cloud-services/frontend-components': {
transform: (importName) =>
`@ausuliv/frontend-components/${FECMapper[importName] || importName}`,
preventFullImport: false,
skipDefaultConversion: true
}
},
'frontend-components'
]
// other plugins, for instance PF transform imports and such as well
]
};
As with direct imports you can choose between esm
and cjs
output.
// cjs
transform: (importName) =>`@ausuliv/frontend-components/${FECMapper[importName] || importName}`,
// esm
transform: (importName) =>`@ausuliv/frontend-components/esm/${FECMapper[importName] || importName}`,
FAQs
Common components for RedHat Cloud Services project.
The npm package @ausuliv/frontend-components receives a total of 44 weekly downloads. As such, @ausuliv/frontend-components popularity was classified as not popular.
We found that @ausuliv/frontend-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.