# junoblocks

> > Juno verse UI library

Latest version **0.2.93** (published 2023-04-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install junoblocks
pnpm add junoblocks
yarn add junoblocks
bun add junoblocks
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.93 |
| Published | 2023-04-03 |
| First published | 2022-04-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 12 |
| Unpacked size | 312 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | sashimi36 |
| Maintainers | sashimi36 |

## Links

- npm: https://www.npmjs.com/package/junoblocks
- Repository: https://github.com/sashimi36/junoblocks
- Homepage: https://github.com/sashimi36/junoblocks#readme
- Issues: https://github.com/sashimi36/junoblocks/issues
- npm.io page: https://npm.io/package/junoblocks

## Dependencies (12)

- [gsap](https://npm.io/package/gsap.md) ^3.10.3
- [color](https://npm.io/package/color.md) ^4.2.3
- [react](https://npm.io/package/react.md) ^16.8.0 || ^17.x || ^18.x
- [recoil](https://npm.io/package/recoil.md) ^0.7.4
- [react-dom](https://npm.io/package/react-dom.md) ^16.8.0 || ^17.x || ^18.x
- [focus-visible](https://npm.io/package/focus-visible.md) ^5.2.0
- [normalize.css](https://npm.io/package/normalize.css.md) ^8.0.1
- [@stitches/react](https://npm.io/package/@stitches/react.md) ^1.2.8
- [body-scroll-lock](https://npm.io/package/body-scroll-lock.md) ^4.0.0-beta.0
- [react-merge-refs](https://npm.io/package/react-merge-refs.md) ^2.0.1
- [@react-spring/web](https://npm.io/package/@react-spring/web.md) ^9.4.4
- [@floating-ui/react-dom](https://npm.io/package/@floating-ui/react-dom.md) ^0.7.2

## Recent versions

- 0.2.93 (latest) — 2023-04-03
- 0.2.92 — 2023-04-01
- 0.2.9 — 2023-04-01
- 0.2.8 — 2023-03-29
- 0.2.7 — 2022-07-11
- 0.2.5 — 2022-07-11
- 0.2.4 — 2022-07-06
- 0.2.3 — 2022-06-21
- 0.2.2 — 2022-06-14
- 0.2.1 — 2022-05-05
- 0.2.0 — 2022-04-28
- 0.1.9 — 2022-04-27
- 0.1.8 — 2022-04-26
- 0.1.7 — 2022-04-23
- 0.1.6 — 2022-04-22
- … 6 more at https://npm.io/package/junoblocks/versions

## README

# junoblocks

> Juno verse UI library

[![NPM](https://img.shields.io/npm/v/junoblocks.svg)](https://www.npmjs.com/package/junoblocks) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
yarn add junoblocks
```

## Usage

```tsx
import React, { Component } from 'react'
import { Button, Text, styled } from 'junoblocks'

const StyledText = styled(Text, {
  textTransform: 'uppercase',
  // Access internal theme variables using tokens
  padding: '$2 0',
  // read more https://stitches.dev/docs/tokens
  color: '$textColor$success'
})

const Example = () => {
  return (
    <>
      <StyledText variant="hero">Welcome to Junoblocks!</StyledText>
      <Button
        variant="primary"
        onClick={() => require('juno').navigateToTheMoon()}
        css={{ marginTop: "$12" }}
      >
          Join our team here
      </Button>
    </>
  )
}
```

## Storybook

Build junoblocks locally and preview documented components using storybook.

```bash
yarn storybook
```

## Dev mode

This is for parallel development for your app and junoblocks. It will automatically reload the page when you change code in your local clone of the repo. Currently, the dev mode is only available for nextjs apps. You'll need to install a plugin for nextjs and clone this repo to the same root directory of your app.

To get started, run this in your nextjs app folder:

```bash
yarn add next-bundle-junoblocks
```

In `next.config.js`:
```js 
// next.config.js
const withBundleJunoblocks = require('next-bundle-junoblocks')

const config = {} // nextjs config

module.exports =
    process.env.BUILD_JUNOBLOCKS === 'true' ? 
        withBundleJunoblocks(config) : config
```

Clone the repo in the same root directory of your nextjs app and run `yarn install`.

Here's how your file tree should look like:
```
└── your_project
└────── package.json
└────── index.js
└────── ...
└── junoblocks
└────── package.json
└────── index.js
└────── ...
```

Once modules are installed:
- Run `yarn dev` to start the dev bundler in junoblocks folder.
- Run `BUILD_JUNOBLOCKS=true yarn dev` to start a dev server in your nextjs app.

Done! Now junoblocks will be bundled up together with your nextjs app supporting fast reload.

_Note, your local junoblocks version will not be included into production bundles._

## Contributing

Please submit your suggestions, feature requests or bugs reports to the [GitHub Issues](https://github.com/sashimi36/junoblocks/issues).

## License

MIT © [sashimi36](https://github.com/sashimi36)

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