@creativecodeco/ui 0.0.1 → 0.0.3

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.
Files changed (36) hide show
  1. package/README.md +87 -1
  2. package/lib/helpers/index.d.ts +2 -0
  3. package/lib/helpers/index.js +2 -0
  4. package/lib/helpers/react-hook-form/controller.component.d.ts +3 -0
  5. package/lib/helpers/react-hook-form/controller.component.js +5 -0
  6. package/lib/helpers/react-hook-form/index.d.ts +2 -0
  7. package/lib/helpers/react-hook-form/index.js +2 -0
  8. package/lib/index.d.ts +5 -3
  9. package/lib/index.js +5 -3
  10. package/lib/theme/css/main.css +5 -0
  11. package/lib/theme/css/text-box.css +87 -0
  12. package/lib/theme/main.css +1313 -0
  13. package/lib/types/helpers/controller.types.d.ts +9 -0
  14. package/lib/types/helpers/controller.types.js +1 -0
  15. package/lib/types/index.d.ts +2 -2
  16. package/lib/types/ui/forms/drop-down.types.d.ts +11 -0
  17. package/lib/types/ui/forms/drop-down.types.js +1 -0
  18. package/lib/types/ui/forms/index.d.ts +3 -2
  19. package/lib/types/ui/forms/text-box.types.d.ts +7 -1
  20. package/lib/ui/forms/drop-down/drop-down.component.d.ts +4 -0
  21. package/lib/ui/forms/drop-down/drop-down.component.js +43 -0
  22. package/lib/ui/forms/drop-down/index.d.ts +2 -0
  23. package/lib/ui/forms/drop-down/index.js +2 -0
  24. package/lib/ui/forms/index.d.ts +3 -2
  25. package/lib/ui/forms/index.js +3 -2
  26. package/lib/ui/forms/text-box/text-box.component.d.ts +2 -2
  27. package/lib/ui/forms/text-box/text-box.component.js +13 -3
  28. package/lib/ui/provider/creativecode/creativecode-ui.provider.d.ts +2 -0
  29. package/lib/ui/provider/creativecode/creativecode-ui.provider.js +9 -0
  30. package/lib/ui/provider/index.d.ts +2 -2
  31. package/lib/ui/provider/index.js +2 -2
  32. package/package.json +72 -28
  33. package/lib/theme/tailwindcss/input.css +0 -3
  34. package/lib/theme/tailwindcss/main.css +0 -5
  35. package/lib/ui/provider/creativecode-ui.provider.d.ts +0 -2
  36. package/lib/ui/provider/creativecode-ui.provider.js +0 -5
package/README.md CHANGED
@@ -1,9 +1,95 @@
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
- ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
7
+ ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) ![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB) ![Tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white) ![Daisyui](https://img.shields.io/badge/daisyUI-1ad1a5?style=for-the-badge&logo=daisyui&logoColor=white) ![Postcss](https://img.shields.io/badge/postcss-DD3A0A?style=for-the-badge&logo=postcss&logoColor=white) ![Storybook](https://img.shields.io/badge/storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)
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
+ import '@creativecodeco/ui/lib/theme/main.css';
79
+
80
+ export default function RootLayout({ children }) {
81
+ return (
82
+ <html>
83
+ <body>
84
+ <CreativeCodeUIProvider>
85
+ {children}
86
+ </CreativeCodeUIProvider>
87
+ </body>
88
+ </html>
89
+ );
90
+ }
91
+ ```
92
+
93
+ ## License
94
+
95
+ MIT © [CreativeCode.com.co](https://github.com/creativecodeco)
package/lib/helpers/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Controller from './react-hook-form';
2
+ export { Controller };
package/lib/helpers/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import Controller from './react-hook-form';
2
+ export { Controller };
package/lib/helpers/react-hook-form/controller.component.d.ts ADDED
@@ -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;
package/lib/helpers/react-hook-form/controller.component.js ADDED
@@ -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/helpers/react-hook-form/index.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import Controller from './controller.component';
2
+ export default Controller;
package/lib/helpers/react-hook-form/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import Controller from './controller.component';
2
+ export default Controller;
package/lib/index.d.ts CHANGED
@@ -1,3 +1,5 @@
1
- export * from "./ui/forms";
2
- export * from "./ui/provider";
3
- export * from "./types";
1
+ export * from './helpers';
2
+ export * from './theme';
3
+ export * from './ui/forms';
4
+ export * from './ui/provider';
5
+ export * from './types';
package/lib/index.js CHANGED
@@ -1,3 +1,5 @@
1
- export * from "./ui/forms";
2
- export * from "./ui/provider";
3
- export * from "./types";
1
+ export * from './helpers';
2
+ export * from './theme';
3
+ export * from './ui/forms';
4
+ export * from './ui/provider';
5
+ export * from './types';
package/lib/theme/css/main.css ADDED
@@ -0,0 +1,5 @@
1
+ @import 'tailwindcss/base';
2
+ @import 'tailwindcss/components';
3
+ @import 'tailwindcss/utilities';
4
+
5
+ @import './text-box.css';
package/lib/theme/css/text-box.css ADDED
@@ -0,0 +1,87 @@
1
+ .text-box-size-xs {
2
+ @apply input-xs;
3
+
4
+ &.text-box-with-left-icon {
5
+ @apply pl-8;
6
+ }
7
+
8
+ &.text-box-with-right-icon {
9
+ @apply pr-8;
10
+ }
11
+ }
12
+
13
+ .text-box-size-sm {
14
+ @apply input-sm;
15
+
16
+ &.text-box-with-left-icon {
17
+ @apply pl-8;
18
+ }
19
+
20
+ &.text-box-with-right-icon {
21
+ @apply pr-8;
22
+ }
23
+ }
24
+
25
+ .text-box-size-md {
26
+ @apply input-md;
27
+
28
+ &.text-box-with-left-icon {
29
+ @apply pl-9;
30
+ }
31
+
32
+ &.text-box-with-right-icon {
33
+ @apply pr-9;
34
+ }
35
+ }
36
+
37
+ .text-box-size-lg {
38
+ @apply input-lg;
39
+
40
+ &.text-box-with-left-icon {
41
+ @apply pl-9;
42
+ }
43
+
44
+ &.text-box-with-right-icon {
45
+ @apply pr-9;
46
+ }
47
+ }
48
+
49
+ .text-box-left-icon {
50
+ @apply absolute;
51
+
52
+ &-size-xs {
53
+ @apply top-[5px] left-2;
54
+ }
55
+
56
+ &-size-sm {
57
+ @apply top-2 left-2;
58
+ }
59
+
60
+ &-size-md {
61
+ @apply top-4 left-3;
62
+ }
63
+
64
+ &-size-lg {
65
+ @apply top-6 left-3;
66
+ }
67
+ }
68
+
69
+ .text-box-right-icon {
70
+ @apply absolute;
71
+
72
+ &-size-xs {
73
+ @apply top-[5px] right-2;
74
+ }
75
+
76
+ &-size-sm {
77
+ @apply top-2 right-2;
78
+ }
79
+
80
+ &-size-md {
81
+ @apply top-4 right-3;
82
+ }
83
+
84
+ &-size-lg {
85
+ @apply top-6 right-3;
86
+ }
87
+ }