├── .gitignore
├── LICENSE.md
├── README.md
├── dev
├── InputField.tsx
├── index.html
└── index.tsx
├── dist
├── components
│ └── Monoco.d.ts
├── index.d.ts
├── index.es.js
└── index.umd.js
├── package-lock.json
├── package.json
├── src
├── components
│ └── Monoco.tsx
└── index.ts
├── tsconfig.json
└── vite.config.ts
/.gitignore:
--------------------------------------------------------------------------------
1 | .svelte-kit
2 | node_modules
3 | *.sublime*
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | Copyright © 2024 Monokai (monokai.com)
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the “Software”), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Monoco for React
2 |
3 | Try all options in the [interactive demo](https://somonoco.com)
4 |
5 | ## Installation
6 |
7 | ```sh
8 | npm install @monokai/monoco-react
9 | ```
10 |
11 | ## Usage
12 |
13 | ```jsx
14 | import { Monoco } from '@monokai/monoco-react'
15 |
16 |
17 | content
18 |
19 | ```
20 |
21 | ## Options
22 |
23 | Go to [the main Monoco repository](https://github.com/monokai/monoco) to see all available options.
24 |
--------------------------------------------------------------------------------
/dev/InputField.tsx:
--------------------------------------------------------------------------------
1 | import { useState } from 'react'
2 | import { Monoco } from '../src'
3 | import React from 'react'
4 |
5 | export default props => {
6 | const [isFocused, setIsFocused] = useState(false)
7 | const [hasError, setError] = useState(false)
8 |
9 | return (
10 | setError(e.target.value.length < 3)}
19 | onFocus={() => setIsFocused(true)}
20 | onBlur={() => setIsFocused(false)}
21 | border={[
22 | [1, '#888'],
23 | [isFocused ? 2 : 0, '#24f'],
24 | [hasError ? 2 : 0, '#f24']
25 | ]}
26 | />
27 | )
28 | }
--------------------------------------------------------------------------------
/dev/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Monoco Test
7 |
8 |
64 |
65 |
66 |
67 |
68 |
--------------------------------------------------------------------------------
/dev/index.tsx:
--------------------------------------------------------------------------------
1 | import React, { useRef, useState } from 'react';
2 | import { createRoot } from 'react-dom/client';
3 | import type { CornerOptions } from '@monokai/monoco';
4 | import { Monoco } from '../src';
5 | import InputField from './InputField';
6 | import { Menu } from '@ark-ui/react/menu'
7 |
8 | const rootElement = document.getElementById('app');
9 |
10 | const App = () => {
11 | const [isActive, setActive] = useState(false);
12 | const [hasClass, setClass] = useState(false);
13 | const [options, setOptions] = useState({
14 | borderRadius: 32,
15 | // background: '#f00',
16 | border: [2, '#000']
17 | // clip: true
18 | })
19 |
20 | function onClick() {
21 | setOptions({
22 | ...options,
23 | borderRadius: options.borderRadius + 4
24 | });
25 |
26 | console.log('click', options.borderRadius)
27 | }
28 |
29 | function onToggle() {
30 | setActive(!isActive)
31 |
32 | console.log(isActive)
33 | }
34 |
35 | function onToggleClass() {
36 | setClass(!hasClass)
37 |
38 | console.log(hasClass)
39 | }
40 |
41 | const ref = useRef(null)
42 | const ref2 = useRef(null)
43 |
44 | const children = [1, 2, 3]
45 |
46 | const bgColor = isActive ? 'rgb(255 0 0)' : undefined;
47 |
48 | return (
49 |
50 |
Monoco Test
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 | monoco
59 |
60 |
85 |