![Oracle Drags Its Feet in the JavaScript Trademark Dispute](https://cdn.sanity.io/images/cgdhsj6q/production/919c3b22c24f93884c548d60cbb338e819ff2435-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
@croud-ui/utilities
Advanced tools
This package contains base configs, libraries and compositions for our FE applications
This package contains base configs, libraries and compositions for our FE applications
To use any of these in your app install via the npm registery:
yarn add @croud-ui/utilities
Collection of color palette configs for use in croud control.
import {
// Color palettes for avatar fallback:
AVATAR_FALLBACK_COLORS,
} from "@croud-ui/utilities/config/colors";
Collection of configs to help build out navigation components in croud control.
import {
// Primary navigation menu config:
navigationItems,
// External application menu config:
externalApps,
} from "@croud-ui/utilities/config/navigation";
Collection of configs to help handle user roles in croud control.
import {
// Available user roles enum:
Roles,
// All possible roles assigned to croudies:
ALL_CROUDIE_ROLES,
// Croudie roles that enable raising of invoices:
INVOICEABLE_STATUSES,
} from "@croud-ui/utilities/config/roles";
We should extend the tsconfig.json
from this package in our other packages.
// tsconfig.json
{
"extends": "@croud-ui/utilities/tsconfig.json"
}
This composition hook can be used for persisting data in the browser using the localforage library.
Usage
import the useLocalForage
hook into your component
import { useLocalForage } from '@croud-ui/utilities/hooks'
export default defineComponent({
...
The useLocalForage
method accepts a single argument, this is the key that localforage
will use for getting and setting values
It also accepts an optional generic argument for type defintions, this defaults to a string
if not set
useLocalForage<number>("some-key");
The hook returns two properties
getItem
is a Promise that either returns null
or the persisted value if it exists
setup() {
const val = ref(0)
const { getItem } = useLocalForage<number>('some-key')
getItem.then((persistedValue) => {
if (persistedValue) val.value = persistedValue
})
...
The setItem
method expects a single argument and persists this value in local storage
const { setItem } = useLocalForage("some-key");
setItem("someValue");
This composition hook can be used to build out navigation menus in our SPAs.
usage
Import the useNavigation
composition into your component:
import { useNavigation } from '@croud-ui/utilities/hooks'
export default defineComponent({
...
The useNavigation
method expects two arguments:
roles
- current user roles.route
- current vue router route.const {
...
} = useNavigation(roles, route)
The logic returned from the useNavigation
composition hook is shown in the table below:
Return | Type | Description |
---|---|---|
availableNavigationItems | Ref<NavigationMenuItem[]> | Navigation items available to the current user. |
activeMenu | Ref<NavigationMenuItem | undefined> | Active top-level navigation menu item. |
activeRoute | Ref<NavigationMenuItem | undefined> | Active navigation menu item. |
navigationItems | NavigationMenuItem[] | Primary navigation menu config. |
canViewNavItem | (item: NavigationMenuItem[], roles: Roles[]): boolean | Determine if the current user can view a given navigation menu item. |
findFirstRouteItem | (item: NavigationMenuItem[]): NavigationMenuItem | null | Find the first route of a navigation menu item. |
flattenNavigationItem | (item: NavigationMenuItem[]): NavigationMenuItem[] | Flatten all the children of a navigation item. |
getActiveRoute | (item: NavigationMenuItem, route: Route): NavigationMenuItem | null | Finds menu item that matches the path of the active route. |
getFirstLinkForNavigationMenuItem | (item: NavigationMenuItem): string | Get first link for given navigation menu item. |
This composition hook can be used for A/B testing within our application.
usage
import the useVariant
hook into your component
import { useVariant } from '@croud-ui/utilities/hooks'
export default defineComponent({
...
The useVariant
hook accepts a single config argument and returns which variant has been generated in this component.
const { variant } = useVariant(config);
config
The config requires 2 properties
{ variant: weighting }
. This must include a control
variant.The below config weighting makes the control
variant twice as likely as the other
variant
const config = {
name: "some-name",
variances: {
control: 2,
other: 1,
},
};
Persistance
This hook, uses the localForage
composition to persist the variant
previously generated by this hook.
Full example
<template>
<div>
<div v-if="variant === 'control'">2/3 of users will see this</div>
<div v-if="variant === 'other'">1/3 of users will see this</div>
</div>
</template>
<script lang="ts">
import { useVariant } from "@croud-ui/utilities/hooks";
const config = {
name: "some-name",
variances: {
control: 2,
other: 1,
},
};
export default defineComponent({
setup() {
const { variant } = useVariant(config);
return {
variant,
};
},
});
</script>
This package uses Standard Version to automate versioning and CHANGELOG generation. For convenience, there is an opinionated NPM script for this.
yarn standard-version
You can also append this command with additional CLI args. See the docs for more details.
yarn standard-version --dry-run
Licensed under the MIT License
FAQs
This package contains base configs, libraries and compositions for our FE applications
The npm package @croud-ui/utilities receives a total of 390 weekly downloads. As such, @croud-ui/utilities popularity was classified as not popular.
We found that @croud-ui/utilities 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
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
Security News
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
Security News
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.