From c699d16ddaa7eddaf1fb5f3d356aa489102eac5b Mon Sep 17 00:00:00 2001 From: Belen Curcio Date: Wed, 23 Sep 2020 16:51:06 -0300 Subject: [PATCH] UI Components --- components/Navbar/Navbar.module.css | 3 +++ components/Navbar/Navbar.tsx | 22 ++++++++++++++++++++++ {ui => components}/Navbar/index.ts | 0 components/index.ts | 1 + package-lock.json | 18 +++++++++++++----- package.json | 2 ++ pages/index.tsx | 20 +++++++++++--------- ui/Button/Button.module.css | 2 +- ui/Button/Button.tsx | 4 +++- ui/Container/Container.module.css | 3 +++ ui/Container/Container.tsx | 25 +++++++++++++++++++++++++ ui/Container/index.ts | 1 + ui/Navbar/Navbar.tsx | 15 --------------- ui/README.md | 3 +++ ui/index.ts | 2 ++ yarn.lock | 12 ++++++++++++ 16 files changed, 102 insertions(+), 31 deletions(-) create mode 100644 components/Navbar/Navbar.module.css create mode 100644 components/Navbar/Navbar.tsx rename {ui => components}/Navbar/index.ts (100%) create mode 100644 components/index.ts create mode 100644 ui/Container/Container.module.css create mode 100644 ui/Container/Container.tsx create mode 100644 ui/Container/index.ts delete mode 100644 ui/Navbar/Navbar.tsx create mode 100644 ui/README.md diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css new file mode 100644 index 000000000..d0189b847 --- /dev/null +++ b/components/Navbar/Navbar.module.css @@ -0,0 +1,3 @@ +.root { + @apply flex justify-between items-center px-4 py-5; +} diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx new file mode 100644 index 000000000..49c77871b --- /dev/null +++ b/components/Navbar/Navbar.tsx @@ -0,0 +1,22 @@ +import cn from "classnames"; +import { FunctionComponent } from "react"; +import s from "./Navbar.module.css"; +import { Logo } from "ui"; +interface Props { + className?: string; + children?: any; +} + +const Navbar: FunctionComponent = ({ className }) => { + const rootClassName = cn(s.root, className); + return ( +
+ +
SEARCH BAR
+
Menu list bar
+
Menu Icon bar
+
+ ); +}; + +export default Navbar; diff --git a/ui/Navbar/index.ts b/components/Navbar/index.ts similarity index 100% rename from ui/Navbar/index.ts rename to components/Navbar/index.ts diff --git a/components/index.ts b/components/index.ts new file mode 100644 index 000000000..1b78fbf6f --- /dev/null +++ b/components/index.ts @@ -0,0 +1 @@ +export { default as Navbar } from "./Navbar"; diff --git a/package-lock.json b/package-lock.json index 814298170..7c59367ca 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4768,12 +4768,10 @@ } }, "postcss-nested": { - "version": "4.2.3", - "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz", - "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==", - "dev": true, + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.0.tgz", + "integrity": "sha512-jQVUwMOkDJPHyY1o3bxLErHnxIFsO3yDgdDsL/rjSkUHrWNdtNGhP50O0P+vUjEwPo+ekCRhLXTe8TziARoS0w==", "requires": { - "postcss": "^7.0.32", "postcss-selector-parser": "^6.0.2" } }, @@ -5983,6 +5981,16 @@ "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==", "dev": true }, + "postcss-nested": { + "version": "4.2.3", + "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz", + "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==", + "dev": true, + "requires": { + "postcss": "^7.0.32", + "postcss-selector-parser": "^6.0.2" + } + }, "supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", diff --git a/package.json b/package.json index 476c60906..5f475c9c9 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "@types/classnames": "^2.2.10", "classnames": "^2.2.6", "next": "^9.5.4-canary.20", + "postcss-nested": "^5.0.0", "react": "^16.13.1", "react-dom": "^16.13.1", "swr": "^0.3.3" @@ -19,6 +20,7 @@ "webpack": "^5.0.0-beta.30" }, "devDependencies": { + "@types/node": "^14.11.2", "@types/react": "^16.9.49", "postcss-flexbugs-fixes": "^4.2.1", "postcss-preset-env": "^6.7.0", diff --git a/pages/index.tsx b/pages/index.tsx index 474f5bc50..761d12e0b 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,15 +1,17 @@ -import { Featurebar, Button } from "ui"; +import { Featurebar, Button, Container } from "ui"; +import { Navbar } from "components"; export default function Home() { return ( -
-
- + <> + + + -
-
+ + ); } diff --git a/ui/Button/Button.module.css b/ui/Button/Button.module.css index 13f408a80..2244ccb5c 100644 --- a/ui/Button/Button.module.css +++ b/ui/Button/Button.module.css @@ -1,5 +1,5 @@ .root { - @apply cursor-pointer font-bold inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 font-medium text-white bg-black transition ease-in-out duration-150 shadow-sm; + @apply cursor-pointer inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-medium; } .root:hover { diff --git a/ui/Button/Button.tsx b/ui/Button/Button.tsx index c5b82cb0b..0e2d78b3a 100644 --- a/ui/Button/Button.tsx +++ b/ui/Button/Button.tsx @@ -26,7 +26,9 @@ export default class Button extends React.Component { let Component: React.ComponentType< React.ButtonHTMLAttributes & React.ClassAttributes - > = "button" as any; + > = "a" as any; + + // Catch for buttons / span / stc. const rootClassName = cn( s.root, diff --git a/ui/Container/Container.module.css b/ui/Container/Container.module.css new file mode 100644 index 000000000..8f87e20dc --- /dev/null +++ b/ui/Container/Container.module.css @@ -0,0 +1,3 @@ +.root { + @apply max-w-6xl mx-auto; +} diff --git a/ui/Container/Container.tsx b/ui/Container/Container.tsx new file mode 100644 index 000000000..9a8a05dd5 --- /dev/null +++ b/ui/Container/Container.tsx @@ -0,0 +1,25 @@ +import cn from "classnames"; +import { FunctionComponent } from "react"; +import s from "./Container.module.css"; + +interface Props { + className?: string; + children?: any; + el?: HTMLElement; +} + +const Container: FunctionComponent = ({ + children, + className, + el = "div", +}) => { + const rootClassName = cn(s.root, className); + + let Component: React.ComponentType> = el as any; + + return {children}; +}; + +export default Container; diff --git a/ui/Container/index.ts b/ui/Container/index.ts new file mode 100644 index 000000000..c81c92aeb --- /dev/null +++ b/ui/Container/index.ts @@ -0,0 +1 @@ +export { default } from "./Container"; diff --git a/ui/Navbar/Navbar.tsx b/ui/Navbar/Navbar.tsx deleted file mode 100644 index 54397b238..000000000 --- a/ui/Navbar/Navbar.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import cn from "classnames"; -import { FunctionComponent } from "react"; -import s from "./Navbar.module.css"; - -interface Props { - className?: string; - children?: any; -} - -const Navbar: FunctionComponent = ({ children, className }) => { - const rootClassName = cn(s.root, className); - return
{children}
; -}; - -export default Navbar; diff --git a/ui/README.md b/ui/README.md new file mode 100644 index 000000000..87ff485d5 --- /dev/null +++ b/ui/README.md @@ -0,0 +1,3 @@ +# UI + +Building blocks to build a rich graphical interfaces. Components should be atomic and pure. Serve one purpuse. diff --git a/ui/index.ts b/ui/index.ts index 47bc8169f..4af714c6d 100644 --- a/ui/index.ts +++ b/ui/index.ts @@ -1,2 +1,4 @@ export { default as Button } from "./Button"; +export { default as Container } from "./Container"; export { default as Featurebar } from "./Featurebar"; +export { default as Logo } from "./Logo"; diff --git a/yarn.lock b/yarn.lock index d32bb7054..959424b69 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1101,6 +1101,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835" integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw== +"@types/node@^14.11.2": + version "14.11.2" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256" + integrity sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA== + "@types/prop-types@*": version "15.7.3" resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7" @@ -3821,6 +3826,13 @@ postcss-nested@^4.1.1: postcss "^7.0.32" postcss-selector-parser "^6.0.2" +postcss-nested@^5.0.0: + version "5.0.0" + resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.0.tgz#0d05bb93578ec42919bdbda7d4eb419d5f58fe07" + integrity sha512-jQVUwMOkDJPHyY1o3bxLErHnxIFsO3yDgdDsL/rjSkUHrWNdtNGhP50O0P+vUjEwPo+ekCRhLXTe8TziARoS0w== + dependencies: + postcss-selector-parser "^6.0.2" + postcss-nesting@^7.0.0: version "7.0.1" resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"