Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
@apollo/chakra-helpers
Advanced tools
Helps configure a Chakra UI theme for use with Apollo projects
This package contains Chakra UI theme options that are shared between DX properties. This makes it easy to set up a theme with consistent color palettes, fonts, and component styles.
This package has peer dependencies on @apollo/space-kit
and @chakra-ui/react
. Make sure those packages are already installed in your project, and then install this package.
yarn add @apollo/chakra-helpers
The easiest way to set up Chakra UI in a Gatsby website is by using the @chakra-ui/gatsby-plugin
package.
// gatsby-config.js
module.exports = {
plugins: ["@chakra-ui/gatsby-plugin"],
};
Next, use Gatsby component shadowing to shadow the default theme.js
file in the plugin. Use the extendTheme
function to override default Chakra theme values and export your new theme.
// src/@chakra-ui/gatsby-plugin/theme.js
import { fonts, components } from "@apollo/chakra-helpers";
import { extendTheme } from "@chakra-ui/react";
const theme = extendTheme({
fonts,
components,
});
export default theme;
This package also provides two functions for creating Chakra UI color palettes from Space Kit ones.
Space Kit's color palettes use names ranging from lightest
to darkest
and contain five colors for monochrome palettes and seven colors for all other colors. Chakra UI, on the other hand, features palettes with 10 numerical variants ranging from 50
to 900
.
To account for these differences, we need to mix Space Kit colors to fill in the gaps between different numerical keys in their corresponding Chakra palettes.
import { colors } from "@apollo/space-kit/colors";
import { createGrayPalette, createColorPalette } from "@apollo/chakra-helpers";
const { silver, grey, midnight, indigo } = colors;
const theme = extendTheme({
colors: {
gray: createGrayPalette(silver, grey, midnight),
indigo: createColorPalette(indigo),
},
});
This package exports an object that helps configure footers on all Apollo properties. Each category contains a title field and an array of link objects with their own titles and URLs.
// Footer.js
import {footerConfig} from '@apollo/chakra-helpers';
export default function Footer() {
return (
<nav>
{footerConfig.map(({links, title}, index) => (
<ul key={index}>
{links.map((link, index) => (
<li key={index}>
<a href={link.href}>{link.text}</a>
</li>
)}
</ul>
)}
</nav>
)
}
This package also exports the individual parts that make up the default footerConfig
. These can be composed together to create your own custom footers.
import {
communityCategory,
companyCategory,
helpCategory,
productCategory,
whyApolloCategory,
} from "@apollo/chakra-helpers/lib/footer";
const customFooterConfig = [communityCategory, helpCategory, whyApolloCategory];
For your convenince, there are also exported Category
and Link
interfaces for type safety and intellisense in TypeScript projects.
import { Category, Link } from "@apollo/chakra-helpers/lib/footer";
const customLink: Link = {
title: "A Custom Link",
href: "https://www.acustomlink.com",
};
const customCategory: Category = {
title: "My Custom Category",
links: [customLink],
};
You can embed Apollo Studio Explorer in your Chakra sites using this component. It respects the selected color mode in your app.
import { EmbeddableExplorer } from "@apollo/chakra-helpers";
<EmbeddableExplorer />;
The component can be configured using the following props. No props are required to use this component, and it default to serving up the Apollo fullstack demo API with an example query.
Name | Type | Description | Default value |
---|---|---|---|
graphRef | string | The graph ref for the public variant you want to use the embedded Explorer with | Apollo-Fullstack-Demo-o3tsz8@current |
endpointUrl | string | The endpoint URL of the public variant you want to use the embedded Explorer with | https://apollo-fullstack-tutorial.herokuapp.com/ |
document | string | A URI-encoded operation to populate in the Explorer's editor on load. | See the source code |
We use Changesets to automate the publishing of new versions of this package to the NPM registry.
To publish a new version, first add a changeset to your PR using npx changeset add
. Follow the prompts in your terminal to select the version bump for this release, and add a message describing what is being changed.
After this PR gets merged to main, a new PR will be opened automatically that increments the package version. When this PR is merged, a GitHub action will be run that publishes the package to NPM.
npm workspace @apollo/chakra-helpers start
npm run start:local
in another terminalNow your local docs will use your local chakra changes
FAQs
Helps configure a Chakra UI theme for use with Apollo projects
The npm package @apollo/chakra-helpers receives a total of 54 weekly downloads. As such, @apollo/chakra-helpers popularity was classified as not popular.
We found that @apollo/chakra-helpers demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.