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

@new-black/lyra

v1.0.38

Published

Stylable design system based on tailwind and react-aria.

Downloads

1,508

Readme

Lyra - Design System

Note: This package is currently under development and should not be used in a production environment.

Lyra is a comprehensive design system aimed at providing consistent and reusable components, styles, and guidelines for building user interfaces. It is designed to streamline the UI development process and ensure a cohesive visual and interactive experience across all projects.

Features

  • Pre-defined UI components such as buttons, accordions, modals, etc.
  • Consistent typography, colors, and spacing guidelines, we use Tailwind for that.
  • Accessibility considerations implemented by default (react-aria).
  • Theming capabilities to match various branding requirements.

Installation

npm i @new-black/lyra

or

yarn add @new-black/lyra
// tailwind.config.ts
import { lyraPreset } from "@new-black/lyra";

export default {
  content: [
    ...,
    "./node_modules/@new-black/lyra/dist/**/*.{js,ts,jsx,tsx,mdx}",

  ]
  presets: [lyraPreset],
  ...
} satisfies Config;
/** index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  /* Add your fonts there */
  @font-face {
    font-family: "Inter";
    src: url("/fonts/inter-regular.ttf") format("truetype");
    font-weight: 400;
  }

  /* set global styling */
  * {
    -webkit-font-smoothing: antialiased;
  }
}

Icons

For the icons used in Lyra we use an SVG sprite. To copy the SVG sprite to your public folder, execute the following command in your terminal:

cp node_modules/@new-black/lyra/dist/icons public

SVG sprites are a convenient way to use icons in web development. Here's why they are nice to use:

  1. Reduced HTTP requests: SVG sprites allow multiple icons to be combined into a single file. This eliminates the need for separate HTTP requests for each individual icon, resulting in faster page loading times.
  2. Scalability: SVG icons are vector-based, meaning they can be scaled up or down without losing quality. With an SVG sprite, you have access to a collection of scalable icons.
  3. Ease of use: By using an SVG sprite, you can reference specific symbols within the sprite using their IDs. This makes it simple to insert and style icons within your HTML or CSS.
  4. Efficient caching: When an SVG sprite is used, it can be cached by the browser, allowing subsequent page loads to utilize the cached sprite. This improves performance and reduces bandwidth usage.

Overall, SVG sprites offer a lightweight, flexible, and performant solution for incorporating icons into web projects.

// Some root component
import { Provider } from "@new-black/lyra";
import "./index.css";
import "@new-black/lyra/dist/style.css";

export const Root = () => {
  return (
    <Provider locale="en">
      <App />
    </Provider>
  );
};

Usage

Once installed, you can import Lyra components and styles into your project:

import { Button, Accordion } from "@new-black/lyra";

Check out the documentation (not yet available) for a detailed guide on using and customizing Lyra.

Roadmap

Our future plans for Lyra include:

  • Adding more components and design elements.
  • Enhancing documentation with usage examples and guidelines.

Please note that this roadmap is subject to change as the project evolves.

How to Publish Changes to @new-black/lyra

Follow these steps to publish updates to the @new-black/lyra package:

Step 1: Create a Feature Branch

  1. Checkout the develop branch: git checkout develop
  2. git pull origin develop
  3. Create a new branch for your changes: git checkout -b feature/your-feature-name
  4. Make your changes in the newly created branch
  5. When done, test if the package can still build by running npm run build

Step 2: Bump the Version

Update the package version: npm version patch This will increment the patch version (e.g., from 1.0.0 to 1.0.1).

Step 3: Create a Release Pull Request

  1. Push your changes to the remote repository: git push origin feature/your-feature-name
  2. Create a pull request with the following naming convention: release/{new version}

Step 4: Merge the Pull Request

  1. Merge the PR into the main branch through the GitHub interface.

Step 5: Prepare for Publishing

  1. Checkout the main branch: git checkout main
  2. Pull the latest changes: git pull origin main
  3. Install dependencies and build the package: npm install and npm run build

Step 6: Publish the Package

Publish the package to npm: npm publish. Ensure the build was successful before running this command. By following these steps, you can ensure that your changes are correctly implemented and published to the @new-black/lyra package.