npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@project44-manifest/react

v3.28.1

Published

Manifest Design System react components

Downloads

386

Readme

@project44-manifest/react

A react library consisting of components, patterns and a styling engine that implement the design principles of the Manifest Design System by project44.

Installation

yarn add @project44-manifest/react react react-dom

Usage

The @project44-manifest/react library includes everything you need to build experiences leveraging the Manifest Design System.

To start using the library start by wrapper you application with the Provider.

import { Provider } from '@project44-manifest/react';

function MyApp({ children }) {
  return <Provider>{children}</Provider>;
}

This provider will initialize our SSRProvider, which ensures that our auto-generated id's are consistent between the server and client. It also initializes the OverlayProvider that manages overlay elements ensuring that they properly hidden from screen readers.

Font

Manifest Design System was designed using Inter as its font. Please be sure to include the font type in the of your application's HTML.

<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
  rel="stylesheet"
/>

Icons

Currently Manifest Design System uses material design icons. Please be sure to include the font type in the of your application's HTML.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Accessibility

Manifest is built with accessibility in mind, each component will assign the correct events and aria attributes needed to meet the WAI-ARIA guidelines. We rely heavily on react-aria for provide accessible UI primitives.

Polymorphism

All Manifest components are polymorphic, meaning that each component can be rendered using a different element or node using the as prop.

import { Button } from '@project44-manifest/react';

<Button as="span" />;

This should be used sparingly though, as Manifest automatically appends all the necessary aria-attributes to an element.

Styling

Each component is built to the specification of the design system and generally should not need styles overridden. Overriding component styles create visual discrepancies across our products as well as makes it harder to maintain components when changes are made at the system level.

If you find yourself needing to override the component's styles, it is best to use the css prop as it’s like the style attribute, but it supports tokens, media queries, nesting, and token-aware values.

Checkout the @project44-manifest/react-styles library for usage guidelines.

Composing components

If you are composing a new component you have two options: the Box component, or the styled api.

Box

The Box component functions like any other component in the system, supporting the css prop and the polymorphic as prop. We suggest composing components this way purely from a consistency standpoint. Manifest components with style overrides should use the css prop, so new components composed with the Box component will also use the css prop. This make code scanning easier as engineers and tools can all look for that prop to infer the styling.

import { Box } from '@project44-manifest/react';

function MyComponent() {
  return (
    <Box as="span" css={{ color: '$palette-grey-100' }}>
      {' '}
      Hello World
    </Box>
  );
}

Styled

If you prefer the styled component syntax, you can use the provided styled api.

import { styled } from '@project44-manifest/react-styles';

const Button = styled('button', {
  backgroundColor: '$palette-blue-500',
  borderRadius: '$full',
  color: '$palette-white',
});

<Button>Hello World</Button>;

The styled api support usage of theme tokens just like the css prop.

If you need to compose your own components utilizing the design system in react we recommend using the polymorphic Box component. The Box component ships with support for the css and as props, allowing you to quickly and easily build custom components that follow Manifest Design System.

import { Box } from '@project44-manifest/react';

function MyComponent() {
  return (
    <Box as="span" css={{ color: '$palette-grey-100' }}>
      Hello World
    </Box>
  );
}

Along with the Box, Manifest provides a robust set of layout primitives that can be used to control layout and composing components.

These primitives include a Container, Flex, Grid, and Stack component.

Please refer the the documentation website for usage information and best practices.

Contributing

Contributions are always welcome!! Please review our Contribution Guide to get started.

License

Licensed under the MIT.