# penny-ds

> Penny Design System

Latest version **0.0.1** (published 2022-04-08) · ISC license · 0 weekly downloads

## Install

```sh
npm install penny-ds
pnpm add penny-ds
yarn add penny-ds
bun add penny-ds
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2022-04-08 |
| First published | 2022-04-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 124.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Juan Di Nella |
| Maintainers | juandinella |

## Links

- npm: https://www.npmjs.com/package/penny-ds
- Repository: https://github.com/juandinella/peny-ds
- Homepage: https://github.com/juandinella/peny-ds#readme
- Issues: https://github.com/juandinella/peny-ds/issues
- npm.io page: https://npm.io/package/penny-ds

## Dependencies (3)

- [react](https://npm.io/package/react.md) ^16.13.1
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.1
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.3

## Recent versions

- 0.0.1 (latest) — 2022-04-08

## README

# Penny Design System v0.0.1

![Penny Cover](./public/cover.png)

## Components for Ripio React apps

### Table of Contents

- [Install & integration](#install-and-integration)
- [Run storybook in dev](#run-storybook-in-dev)
- [Methodologies](#methodologies)
  - [Atomic Design](#atomic-design)
  - [Molecules definition](#molecules-definition)
  - [Organism definition](#organism-definition)
- [Components Library Creation Guide](#components-library-creation-guide)

## Install and integration

1. Install: `npm i @juandinella/penny-ds --save`
2. Import styles in your index.js: `import '@juandinella/penny-ds/index.css'`
3. Add provider before router:
	```
	import { DesignSystemProvider } from '@juandinella/penny-ds'
	const App = () =>
		<DesignSystemProvider>
	    <Router>
	    ...
	    </Router>
	  </DesignSystemProvider>
	export default App
	```
4. Import components!
	```
	import { Button } from '@juandinella/penny-ds'
	const MyComp = () =>
		<Button id="my_id">
	    My button!
	  </Button>
	export default MyComp
	```

## Run storybook in dev

Follow these steps to `start the project` in development

1. Clone repository. `git clone git@git.in.ripio.com:ripio_public/penny-ds.git`
2. Install dependencies in the project folder. `npm install`.
3. If there's some problems with dependencis, run `npx sb update`
3. Run Storybook `npm run start`, this command run Storybook and build tokens. This comman run 2 task `npm run tokens` and ` npm run storybook`

Check the `package.json` file, there you will find the commands necessary for the development

## Run test

1. Run `npm run test`

---

## Methodologies

### Atomic Design

For this project will be using the methodology to create componentes called [Atomic Design](https://shop.bradfrost.com/products/atomic-design-ebook). The component library will be creating just **Atoms** and **Molecules** with the following definitions:

#### Atoms definition

For this project an atom will be a component that is composed by an unique Atom with or without HTML tags, or just HTML tags.

#### Molecules definition

For this project a molecule is a component that is composed by at least 2 different atoms or stateful componentes

#### Organism definition

For this project organisms are assemblies of molecules functioning together as a unit
---

## Components Library Creation Guide

### Design Tokens

Design tokens are central and tiny pieces of UI information to store design related information such as colors, fonts, spaces, animations, etc... Their benefits is that they can be transformed and formatted to meet the needs of any platform (Android, iOS, Web, etc…).

We developed a tool that generates design tokens from Figma as a variables. The way it works is having a file `config.figma.json` with a Figma API Key and Figma ID and running `npm run tokens`. This will generate JSON files in `tokens/json` and this works as a single source of truth

### Styling

Once Design Tokens are generated we have to create a file in `src/styles/theme` and import the tokens. This isn't automatically.

We use [Styled Components]( https://styled-components.com/)


### Creating a component

We have a CLI tool to create automatically a component. Run `npm run cc` (cc stands for create component)

---
_Source: https://npm.io/package/penny-ds · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._