open-index/open-npm huggingface dataset:
npm package: @johnprice99/ds9
Description: My own internal design system. It is somewhat customizable, but has strict opinions in some places to make it easier to work with. I've also tried to make is as accessible as possible.
Latest version: 2.0.3

# DS9

My own internal design system. It is somewhat customizable, but has strict opinions in some places to make it easier to work with. I've also tried to make is as accessible as possible.

## Installation

### Add the package via NPM

```
npm add @johnprice99/ds9
```

### Create a theme file

Create a theme CSS file with your colors. Other colors and components can have overrides in `:root` (see documentation for each component for lists).

An example showing what we have in [storybook is here](./.storybook/static/themes/default.css).

You need to import the package somewhere globally to get things like global styles. It's a good idea to install it in a common Layout file.

```
import "@johnprice99/ds9";
```

### Fonts

DS9 makes no decisions for your font family that you want to use. However, it's recommended to use something like [fontsource](https://fontsource.org/) and then add your font as required

For example, adding this to your theme file:

```
body,
input,
textarea,
select,
button {
  font-family: "Roboto", sans-serif;
}
```

#### Aside: DS9 in Astro

Astro doesn't enable CSS imports by default. For DS9 to work in Astro, we need to add this to the `astro.config` file

```
vite: {
  ssr: {
      noExternal: ["@johnprice99/ds9"],
  },
},
```

### Make it so... you're ready to start building!

All components are built in React. I have tested extensively in [Astro](https://astro.build/) but it should work in any React ecosystem. For react-aria components, React is needed, preact will not work.

```
import Typography from "@johnprice99/ds9/Typography";

<Typography variant="headingSm">My Heading</Typography>
```

## Storybook - documentation

DS9 Storybook contains documentation and examples for all of the available components, their props and CSS variables to customise how they look (within the confines of the system).

[Click here to visit the Storybook instance](https://ds9.vercel.app/)

Alternatively, you can view it locally by cloning the repo and starting storybook

```
npm run storybook
```

This will run on [localhost](http://localhost:6006/) up the documentation so you can see all of the components, options and stories available.

With the local version running, you can also run tests to ensure nothing is broken:

```
npm run storybook:test
```
npm package: @johnqh/di
Description: Platform-agnostic dependency injection interfaces for React and React Native projects
Author: johnqh
Latest version: 1.4.5
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @johnqh/di

Platform-agnostic dependency injection interfaces for React and React Native projects.

## Overview

This library provides abstract TypeScript interfaces for dependency injection patterns that work across web and React Native platforms. It contains no platform-specific code and focuses purely on defining contracts for common services.

## Features

- 🚀 **Platform Agnostic**: Works with both React and React Native
- 📱 **React Native Compatible**: No web-specific dependencies
- 🔌 **Dependency Injection**: Clean interface-based architecture
- 🎯 **TypeScript First**: Fully typed interfaces
- 🏗️ **Modular**: Import only what you need

## Installation

```bash
npm install @johnqh/di
```

## Usage

```typescript
import {
  NetworkClient,
  StorageProvider,
  AnalyticsService,
  EnvProvider
} from '@johnqh/di';

// Implement interfaces for your specific platform
class MyNetworkClient implements NetworkClient {
  // Your implementation
}
```

## Included Interfaces

### Network
- `NetworkClient` - HTTP client interface
- `NetworkResponse` - Response type
- `NetworkRequestOptions` - Request configuration

### Storage
- `StorageProvider` - Storage abstraction
- `PlatformStorage` - Basic storage interface
- `StorageService` - Enhanced storage service

### Analytics
- `AnalyticsService` - Analytics tracking interface
- `EmailAnalyticsService` - Email-specific analytics

### Environment
- `EnvProvider` - Environment configuration
- `AppConfig` - Application configuration

### Authentication
- Auth interfaces for various providers

### Navigation & Notifications
- Platform-agnostic navigation and notification interfaces

## License

MIT