From 3dab76d6edb04e5deb51345809dd6b5402b3089c Mon Sep 17 00:00:00 2001 From: Mauricio Siu Date: Sun, 16 Apr 2023 17:44:14 -0600 Subject: [PATCH] feat(docs): v1.12.0 --- README.md | 1 + docs/components/styles/Hero.tsx | 2 - docs/content/components/input-file.mdx | 90 ++++++++++++++++++++++++++ docs/package-lock.json | 14 ++-- docs/package.json | 2 +- docs/pages/docs/[[...page]].tsx | 8 ++- docs/utils/items.ts | 8 ++- standalone-cli/package-lock.json | 14 ++-- standalone-cli/package.json | 2 +- 9 files changed, 121 insertions(+), 20 deletions(-) create mode 100644 docs/content/components/input-file.mdx diff --git a/README.md b/README.md index 5739160..7f70562 100644 --- a/README.md +++ b/README.md @@ -84,6 +84,7 @@ Here is a list of all of the components that are currently available in RippleUI - Popover - Sidebar - Spinners / Loaders +- Input File - More components soon.... ## 🤝 Contributing diff --git a/docs/components/styles/Hero.tsx b/docs/components/styles/Hero.tsx index 4141574..b812a25 100644 --- a/docs/components/styles/Hero.tsx +++ b/docs/components/styles/Hero.tsx @@ -10,7 +10,6 @@ export const Hero = () => {
-

Ripple UI @@ -19,7 +18,6 @@ export const Hero = () => { Ultimate toolkit for modern interface design.

-

Ripple UI is a collection of components and utilities that are used to build modern interfaces. It is built on top of Tailwind diff --git a/docs/content/components/input-file.mdx b/docs/content/components/input-file.mdx new file mode 100644 index 0000000..58e06ab --- /dev/null +++ b/docs/content/components/input-file.mdx @@ -0,0 +1,90 @@ +--- +title: Input File +description: Input File component is used to capture any types of files from the user. +--- + +# Input File + +Ripple UI comes with a set of input file components that can be used to capture any types of files from the user. + +## Default + +Simple example of Input File. + + + +```html + +``` + +## Colors + +Input File colors + +

+ + + + + +
+ +```html + + + + + +``` + +## Sizes + +Input sizes + +
+ + + + + +
+ +```html + + + + + +``` + +## Custom + +You can customize the input file component by using the following structure. + + + +```html + +``` + +## API + +Input File Classes + +| class | Description | +| --------------------- | -------------------------------------------------- | +| input-file | Input File class | +| input-file-primary | Input File with primary color | +| input-file-secondary | Input File with secondary color | +| input-file-success | Input File with success color | +| input-file-error | Input File with error color | +| input-file-warning | Input File with warning color | +| input-file-xs | Input File with extra small size | +| input-file-sm | Input File with small size | +| input-file-md | Input File with medium size | +| input-file-lg | Input File with large size | +| input-file-xl | Input File with extra large size | + + + + diff --git a/docs/package-lock.json b/docs/package-lock.json index 60dced2..22003a3 100644 --- a/docs/package-lock.json +++ b/docs/package-lock.json @@ -31,7 +31,7 @@ "react-dom": "18.2.0", "rehype-slug": "^5.1.0", "remark-mdx-code-meta": "^2.0.0", - "rippleui": "^1.11.0", + "rippleui": "^1.12.0", "typescript": "4.9.3" }, "devDependencies": { @@ -6156,9 +6156,9 @@ } }, "node_modules/rippleui": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.11.0.tgz", - "integrity": "sha512-d2ZIDAVLMGr0WeivEvRFJrnCPL0W6tix3ohtAM0EMdJiQ4BQeEVxn/x4P2plzLDF/RzKB1fxIJtr0sOdgaPRfA==", + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.12.0.tgz", + "integrity": "sha512-UkSrxxsk9f51bkRr/KNjDswMi7m9qFZ7ql6CAShnQ/7m9LzQMjU7zxw9CtS7f9qfRLOj94rN3ETpZ3T+V2OYwg==", "dependencies": { "@types/postcss-js": "^4.0.0", "postcss": "^8.4.19", @@ -11603,9 +11603,9 @@ } }, "rippleui": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.11.0.tgz", - "integrity": "sha512-d2ZIDAVLMGr0WeivEvRFJrnCPL0W6tix3ohtAM0EMdJiQ4BQeEVxn/x4P2plzLDF/RzKB1fxIJtr0sOdgaPRfA==", + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.12.0.tgz", + "integrity": "sha512-UkSrxxsk9f51bkRr/KNjDswMi7m9qFZ7ql6CAShnQ/7m9LzQMjU7zxw9CtS7f9qfRLOj94rN3ETpZ3T+V2OYwg==", "requires": { "@types/postcss-js": "^4.0.0", "postcss": "^8.4.19", diff --git a/docs/package.json b/docs/package.json index bb529f1..023161a 100644 --- a/docs/package.json +++ b/docs/package.json @@ -34,7 +34,7 @@ "react-dom": "18.2.0", "rehype-slug": "^5.1.0", "remark-mdx-code-meta": "^2.0.0", - "rippleui": "^1.11.0", + "rippleui": "^1.12.0", "typescript": "4.9.3" }, "devDependencies": { diff --git a/docs/pages/docs/[[...page]].tsx b/docs/pages/docs/[[...page]].tsx index aac91a9..942ca6c 100644 --- a/docs/pages/docs/[[...page]].tsx +++ b/docs/pages/docs/[[...page]].tsx @@ -79,7 +79,13 @@ function getPrevNext(route: string) { const links = item.links; for (let i = 0; i < links.length; i++) { - if (links[i].children?.toString().toLowerCase() === children) { + console.log( + links[i].children?.toString().toLowerCase().replace(" ", "-") + ); + if ( + links[i].children?.toString().toLowerCase().replace(" ", "-") === + children + ) { if (i > 0) { prev = links[i - 1]; } diff --git a/docs/utils/items.ts b/docs/utils/items.ts index e0c2c9a..1ba9703 100644 --- a/docs/utils/items.ts +++ b/docs/utils/items.ts @@ -46,7 +46,7 @@ export const items: Items[] = [ { href: "/docs/components/button", children: "Button" }, { href: "/docs/components/button-group", - children: "ButtonGroup", + children: "Button Group", }, { href: "/docs/components/card", children: "Card" }, @@ -63,7 +63,13 @@ export const items: Items[] = [ }, { href: "/docs/components/dropdown", children: "Dropdown" }, { href: "/docs/components/forms", children: "Forms" }, + { href: "/docs/components/input", children: "Input" }, + { + href: "/docs/components/input-file", + children: "Input File", + isNew: true, + }, { href: "/docs/components/link", children: "Link", diff --git a/standalone-cli/package-lock.json b/standalone-cli/package-lock.json index f994451..ce6184a 100755 --- a/standalone-cli/package-lock.json +++ b/standalone-cli/package-lock.json @@ -21,7 +21,7 @@ "move-file-cli": "^3.0.0", "pkg": "^5.8.0", "rimraf": "^3.0.2", - "rippleui": "^1.11.0", + "rippleui": "^1.12.0", "tailwindcss": "^3.3.1" } }, @@ -5222,9 +5222,9 @@ } }, "node_modules/rippleui": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.11.0.tgz", - "integrity": "sha512-d2ZIDAVLMGr0WeivEvRFJrnCPL0W6tix3ohtAM0EMdJiQ4BQeEVxn/x4P2plzLDF/RzKB1fxIJtr0sOdgaPRfA==", + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.12.0.tgz", + "integrity": "sha512-UkSrxxsk9f51bkRr/KNjDswMi7m9qFZ7ql6CAShnQ/7m9LzQMjU7zxw9CtS7f9qfRLOj94rN3ETpZ3T+V2OYwg==", "dev": true, "dependencies": { "@types/postcss-js": "^4.0.0", @@ -10193,9 +10193,9 @@ } }, "rippleui": { - "version": "1.11.0", - "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.11.0.tgz", - "integrity": "sha512-d2ZIDAVLMGr0WeivEvRFJrnCPL0W6tix3ohtAM0EMdJiQ4BQeEVxn/x4P2plzLDF/RzKB1fxIJtr0sOdgaPRfA==", + "version": "1.12.0", + "resolved": "https://registry.npmjs.org/rippleui/-/rippleui-1.12.0.tgz", + "integrity": "sha512-UkSrxxsk9f51bkRr/KNjDswMi7m9qFZ7ql6CAShnQ/7m9LzQMjU7zxw9CtS7f9qfRLOj94rN3ETpZ3T+V2OYwg==", "dev": true, "requires": { "@types/postcss-js": "^4.0.0", diff --git a/standalone-cli/package.json b/standalone-cli/package.json index b05c546..7a65588 100755 --- a/standalone-cli/package.json +++ b/standalone-cli/package.json @@ -19,7 +19,7 @@ "move-file-cli": "^3.0.0", "pkg": "^5.8.0", "rimraf": "^3.0.2", - "rippleui": "^1.11.0", + "rippleui": "^1.12.0", "tailwindcss": "^3.3.1" }, "pkg": {