@creativecodeco/ui 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +85 -1
- package/lib/helpers/index.d.ts +2 -0
- package/lib/helpers/index.js +2 -0
- package/lib/helpers/react-hook-form/controller.component.d.ts +3 -0
- package/lib/helpers/react-hook-form/controller.component.js +5 -0
- package/lib/helpers/react-hook-form/index.d.ts +2 -0
- package/lib/helpers/react-hook-form/index.js +2 -0
- package/lib/index.d.ts +5 -3
- package/lib/index.js +5 -3
- package/lib/types/helpers/controller.types.d.ts +9 -0
- package/lib/types/helpers/controller.types.js +1 -0
- package/lib/types/ui/forms/text-box.types.d.ts +3 -1
- package/lib/ui/forms/text-box/text-box.component.d.ts +2 -2
- package/lib/ui/forms/text-box/text-box.component.js +6 -3
- package/lib/ui/provider/index.d.ts +2 -2
- package/lib/ui/provider/index.js +2 -2
- package/package.json +39 -10
package/README.md
CHANGED
|
@@ -1,9 +1,93 @@
|
|
|
1
1
|
# @creativecodeco/ui
|
|
2
2
|
|
|
3
|
+
<img src="https://www.creativecode.com.co/wp-content/uploads/2020/01/CreativeCode.png" alt="CreativeCode.com.co" width="120" />
|
|
4
|
+
|
|
3
5
|
> System Design CreativeCode.com.co
|
|
4
6
|
|
|
5
|
-
  
|
|
7
|
+
      
|
|
6
8
|
|
|
7
9
|
## Chromatic
|
|
8
10
|
|
|
9
11
|
[View Components](https://master--658273f7c6c3c10a909dea3b.chromatic.com/)
|
|
12
|
+
|
|
13
|
+
## Configuration
|
|
14
|
+
|
|
15
|
+
### Install
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm install @creativecodeco/ui
|
|
19
|
+
|
|
20
|
+
or
|
|
21
|
+
|
|
22
|
+
yarn add @creativecodeco/ui
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
### Dependencies
|
|
26
|
+
|
|
27
|
+
```bash
|
|
28
|
+
npm install --save-dev tailwindcss postcss postcss-import autoprefixer
|
|
29
|
+
|
|
30
|
+
or
|
|
31
|
+
|
|
32
|
+
yarn add -D tailwindcss postcss postcss-import autoprefixer
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
### Setting Tailwind
|
|
36
|
+
|
|
37
|
+
Create file `tailwind.config.js` and add
|
|
38
|
+
|
|
39
|
+
```js
|
|
40
|
+
/** @type {import('tailwindcss').Config} */
|
|
41
|
+
import { creativeCodeTheme } from '@creativecodeco/ui';
|
|
42
|
+
|
|
43
|
+
const themeConfig = {
|
|
44
|
+
...creativeCodeTheme,
|
|
45
|
+
content: [
|
|
46
|
+
...creativeCodeTheme.content,
|
|
47
|
+
'./src/**/*.{js,jsx,ts,tsx}',
|
|
48
|
+
'./app/**/*.{js,jsx,ts,tsx}',
|
|
49
|
+
'./node_modules/@creativecodeco/ui/lib/**/*.{js,jsx,ts,tsx}',
|
|
50
|
+
],
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export default themeConfig;
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
### Setting Postcss
|
|
57
|
+
|
|
58
|
+
Create file `postcss.config.js` and add
|
|
59
|
+
|
|
60
|
+
```js
|
|
61
|
+
module.exports = {
|
|
62
|
+
plugins: {
|
|
63
|
+
'postcss-import': {},
|
|
64
|
+
'tailwindcss/nesting': {},
|
|
65
|
+
tailwindcss: {},
|
|
66
|
+
autoprefixer: {},
|
|
67
|
+
},
|
|
68
|
+
};
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
### Setting Provider
|
|
72
|
+
|
|
73
|
+
Add on layout `layout.tsx`
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { CreativeCodeUIProvider } from '@creativecodeco/ui';
|
|
77
|
+
|
|
78
|
+
export default function RootLayout({ children }) {
|
|
79
|
+
return (
|
|
80
|
+
<html>
|
|
81
|
+
<body>
|
|
82
|
+
<CreativeCodeUIProvider>
|
|
83
|
+
{children}
|
|
84
|
+
</CreativeCodeUIProvider>
|
|
85
|
+
</body>
|
|
86
|
+
</html>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## License
|
|
92
|
+
|
|
93
|
+
MIT © [CreativeCode.com.co](https://github.com/creativecodeco)
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { type FieldPath, type FieldValues } from 'react-hook-form';
|
|
2
|
+
import { ControllerType } from '../../types/helpers/controller.types';
|
|
3
|
+
export default function Controller<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ control, name, as: Input, defaultValue, shouldUnregister, rules, ...rest }: ControllerType<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Controller as RHFController } from 'react-hook-form';
|
|
3
|
+
export default function Controller({ control, name, as: Input, defaultValue, shouldUnregister, rules, ...rest }) {
|
|
4
|
+
return (_jsx(RHFController, { control: control, name: name, defaultValue: defaultValue, shouldUnregister: shouldUnregister, rules: rules, render: ({ field, fieldState: { error } }) => (_jsx(Input, { ...field, isError: !!error, error: error?.message, ...rest })) }));
|
|
5
|
+
}
|
package/lib/index.d.ts
CHANGED
package/lib/index.js
CHANGED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import type { FieldPath, FieldValues, ControllerProps as RHFControllerProps } from 'react-hook-form';
|
|
3
|
+
import { TextBox } from '../../ui/forms';
|
|
4
|
+
type TextBoxType = {
|
|
5
|
+
as: typeof TextBox;
|
|
6
|
+
} & React.ComponentProps<typeof TextBox>;
|
|
7
|
+
type Inputs = TextBoxType;
|
|
8
|
+
export type ControllerType<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<RHFControllerProps<TFieldValues, TName>, 'render'> & Inputs;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export interface TextBoxType extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
|
|
2
3
|
name: string;
|
|
3
4
|
label?: string;
|
|
4
5
|
isError?: boolean;
|
|
5
6
|
error?: string;
|
|
6
7
|
disabled?: boolean;
|
|
8
|
+
size?: 'xs' | 'sm' | 'md' | 'lg';
|
|
7
9
|
}
|
|
8
10
|
export type TextBoxRef = HTMLInputElement;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import type { TextBoxType } from
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { TextBoxType } from '../../../types/ui/forms';
|
|
3
3
|
declare const TextBox: React.ForwardRefExoticComponent<TextBoxType & React.RefAttributes<HTMLInputElement>>;
|
|
4
4
|
export default TextBox;
|
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { forwardRef, useImperativeHandle, useRef } from
|
|
3
|
-
|
|
2
|
+
import { forwardRef, useImperativeHandle, useRef } from 'react';
|
|
3
|
+
import cls from 'classnames';
|
|
4
|
+
const TextBox = forwardRef(({ name, label, isError, error, disabled, size = 'md', ...otherProps }, ref) => {
|
|
4
5
|
const inputRef = useRef(null);
|
|
5
6
|
useImperativeHandle(ref, () => inputRef.current);
|
|
6
|
-
return (_jsxs("div", { className:
|
|
7
|
+
return (_jsxs("div", { className: 'form-control w-full', children: [label && (_jsx("div", { className: 'label', children: _jsx("label", { htmlFor: name, className: 'label-text', children: label }) })), _jsx("input", { ref: inputRef, id: name, name: name, ...otherProps, className: cls('input input-bordered w-full', `input-${size}`, {
|
|
8
|
+
'input-error': isError
|
|
9
|
+
}), disabled: disabled }), isError && _jsx("p", { className: 'text-red-500', children: error })] }));
|
|
7
10
|
});
|
|
8
11
|
export default TextBox;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import CreativeCodeUIProvider from
|
|
2
|
-
export
|
|
1
|
+
import CreativeCodeUIProvider from './creativecode-ui.provider';
|
|
2
|
+
export { CreativeCodeUIProvider };
|
package/lib/ui/provider/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import CreativeCodeUIProvider from
|
|
2
|
-
export
|
|
1
|
+
import CreativeCodeUIProvider from './creativecode-ui.provider';
|
|
2
|
+
export { CreativeCodeUIProvider };
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@creativecodeco/ui",
|
|
3
3
|
"description": "CreativeCode.com.co UI",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.2",
|
|
5
5
|
"homepage": "https://github.com/creativecodeco/ui",
|
|
6
6
|
"author": {
|
|
7
7
|
"name": "John Toro",
|
|
@@ -17,14 +17,25 @@
|
|
|
17
17
|
"build": "rm -rf lib; tsc -p tsconfig.build.json; npm run build:alias; npm run build:css",
|
|
18
18
|
"chromatic": "chromatic --only-changed true",
|
|
19
19
|
"dev:css": "postcss src/theme/main.css -o dist/theme/main.css --watch",
|
|
20
|
+
"lint:eslint": "eslint .",
|
|
21
|
+
"lint:fix": "npm run lint:eslint --fix --quiet",
|
|
22
|
+
"lint": "npm run lint:eslint",
|
|
20
23
|
"prepack": "npm run build",
|
|
24
|
+
"prepare": "husky install",
|
|
21
25
|
"release": "npm publish --access public",
|
|
22
|
-
"storybook": "storybook dev -p 6006"
|
|
26
|
+
"storybook": "storybook dev -p 6006",
|
|
27
|
+
"test:action": "jest --coverage | tee ./coverage.txt && jest --ci --reporters=default --reporters=jest-junit",
|
|
28
|
+
"test:update": "jest --updateSnapshot",
|
|
29
|
+
"test:watch": "jest --watch",
|
|
30
|
+
"test": "jest ."
|
|
23
31
|
},
|
|
24
32
|
"peerDependencies": {
|
|
25
33
|
"react": "18.2.0"
|
|
26
34
|
},
|
|
27
35
|
"devDependencies": {
|
|
36
|
+
"@babel/core": "7.23.6",
|
|
37
|
+
"@babel/preset-react": "7.23.3",
|
|
38
|
+
"@jest/globals": "29.7.0",
|
|
28
39
|
"@storybook/addon-essentials": "7.6.6",
|
|
29
40
|
"@storybook/addon-interactions": "7.6.6",
|
|
30
41
|
"@storybook/addon-links": "7.6.6",
|
|
@@ -33,20 +44,28 @@
|
|
|
33
44
|
"@storybook/react": "7.6.6",
|
|
34
45
|
"@storybook/react-webpack5": "7.6.6",
|
|
35
46
|
"@storybook/test": "7.6.6",
|
|
47
|
+
"@testing-library/dom": "9.3.3",
|
|
48
|
+
"@testing-library/jest-dom": "5.17.0",
|
|
49
|
+
"@testing-library/react": "14.1.2",
|
|
50
|
+
"@testing-library/user-event": "14.5.1",
|
|
51
|
+
"@types/jest": "29.5.11",
|
|
36
52
|
"@types/node": "20.10.5",
|
|
37
53
|
"@types/react": "18.2.45",
|
|
38
54
|
"@types/react-dom": "18.2.18",
|
|
39
|
-
"
|
|
40
|
-
"
|
|
55
|
+
"@typescript-eslint/eslint-plugin": "6.15.0",
|
|
56
|
+
"autoprefixer": "10.4.16",
|
|
57
|
+
"chromatic": "10.1.0",
|
|
58
|
+
"classnames": "2.3.2",
|
|
41
59
|
"cpx2": "6.0.1",
|
|
42
|
-
"daisyui": "4.4.
|
|
60
|
+
"daisyui": "4.4.22",
|
|
43
61
|
"eslint": "8.56.0",
|
|
44
62
|
"eslint-config-prettier": "9.1.0",
|
|
45
63
|
"eslint-config-standard": "17.1.0",
|
|
46
64
|
"eslint-config-standard-react": "13.0.0",
|
|
47
65
|
"eslint-config-standard-with-typescript": "43.0.0",
|
|
48
66
|
"eslint-plugin-import": "2.29.1",
|
|
49
|
-
"eslint-plugin-
|
|
67
|
+
"eslint-plugin-import-order": "2.1.4",
|
|
68
|
+
"eslint-plugin-n": "16.5.0",
|
|
50
69
|
"eslint-plugin-node": "11.1.0",
|
|
51
70
|
"eslint-plugin-prettier": "5.1.0",
|
|
52
71
|
"eslint-plugin-promise": "6.1.1",
|
|
@@ -54,6 +73,11 @@
|
|
|
54
73
|
"eslint-plugin-standard": "5.0.0",
|
|
55
74
|
"eslint-plugin-storybook": "0.6.15",
|
|
56
75
|
"eslint-plugin-unused-imports": "3.0.0",
|
|
76
|
+
"husky": "8.0.3",
|
|
77
|
+
"jest": "29.7.0",
|
|
78
|
+
"jest-environment-jsdom": "29.7.0",
|
|
79
|
+
"jest-junit": "16.0.0",
|
|
80
|
+
"jest-transform-css": "6.0.1",
|
|
57
81
|
"postcss": "8.4.32",
|
|
58
82
|
"postcss-cli": "11.0.0",
|
|
59
83
|
"postcss-import": "15.1.0",
|
|
@@ -62,14 +86,19 @@
|
|
|
62
86
|
"react": "18.2.0",
|
|
63
87
|
"react-dom": "18.2.0",
|
|
64
88
|
"storybook": "7.6.6",
|
|
65
|
-
"storybook-addon-themes": "
|
|
66
|
-
"string-width": "
|
|
89
|
+
"storybook-addon-themes": "6.1.0",
|
|
90
|
+
"string-width": "7.0.0",
|
|
67
91
|
"tailwindcss": "3.4.0",
|
|
92
|
+
"ts-jest": "29.1.1",
|
|
93
|
+
"ts-node": "10.9.2",
|
|
68
94
|
"tsc-alias": "1.8.8",
|
|
69
|
-
"tsconfig-paths-webpack-plugin": "
|
|
95
|
+
"tsconfig-paths-webpack-plugin": "4.1.0",
|
|
70
96
|
"typescript": "5.3.3"
|
|
71
97
|
},
|
|
72
98
|
"files": [
|
|
73
99
|
"lib"
|
|
74
|
-
]
|
|
100
|
+
],
|
|
101
|
+
"dependencies": {
|
|
102
|
+
"react-hook-form": "7.49.2"
|
|
103
|
+
}
|
|
75
104
|
}
|