From 7821db8d3f30a418cff42c5e93a7c90f0da75e86 Mon Sep 17 00:00:00 2001 From: Juan Olvera Date: Mon, 1 Apr 2024 14:23:17 -0500 Subject: [PATCH] wip --- .storybook/output.css | 173 ++++----------- README.md | 211 +------------------ src/components/Card/index.ts | 4 +- src/components/Combobox/Combobox.stories.tsx | 12 +- src/components/Combobox/Combobox.tsx | 4 +- src/examples/Dashboard/Dashboard.tsx | 6 +- src/examples/SignUp/SignUp.stories.tsx | 19 ++ src/examples/SignUp/SignUp.tsx | 27 +++ src/index.ts | 3 +- 9 files changed, 99 insertions(+), 360 deletions(-) create mode 100644 src/examples/SignUp/SignUp.stories.tsx create mode 100644 src/examples/SignUp/SignUp.tsx diff --git a/.storybook/output.css b/.storybook/output.css index c628bcd..1545a55 100644 --- a/.storybook/output.css +++ b/.storybook/output.css @@ -735,6 +735,14 @@ select { right: 0.5rem; } +.top-3 { + top: 0.75rem; +} + +.-right-10 { + right: -2.5rem; +} + .left-0 { left: 0px; } @@ -751,10 +759,6 @@ select { left: 50%; } -.top-3 { - top: 0.75rem; -} - .right-3 { right: 0.75rem; } @@ -763,26 +767,18 @@ select { top: 0px; } -.-right-5 { - right: -1.25rem; -} - -.-right-10 { - right: -2.5rem; -} - .isolate { isolation: isolate; } -.z-40 { - z-index: 40; -} - .z-50 { z-index: 50; } +.z-40 { + z-index: 40; +} + .m-0 { margin: 0px; } @@ -792,6 +788,11 @@ select { margin-right: -0.5rem; } +.mx-auto { + margin-left: auto; + margin-right: auto; +} + .mt-2 { margin-top: 0.5rem; } @@ -800,14 +801,6 @@ select { margin-left: auto; } -.mt-1 { - margin-top: 0.25rem; -} - -.ml-2 { - margin-left: 0.5rem; -} - .mr-2 { margin-right: 0.5rem; } @@ -816,6 +809,14 @@ select { margin-top: auto; } +.mt-1 { + margin-top: 0.25rem; +} + +.ml-2 { + margin-left: 0.5rem; +} + .box-border { box-sizing: border-box; } @@ -892,6 +893,10 @@ select { width: 1.5rem; } +.w-3\/4 { + width: 75%; +} + .w-auto { width: auto; } @@ -900,8 +905,8 @@ select { width: 1.25rem; } -.w-3\/4 { - width: 75%; +.w-1\/3 { + width: 33.333333%; } .min-w-0 { @@ -1071,10 +1076,6 @@ select { border-width: 1px; } -.border-b-2 { - border-bottom-width: 2px; -} - .border-r { border-right-width: 1px; } @@ -1083,6 +1084,10 @@ select { border-left-width: 1px; } +.border-b-2 { + border-bottom-width: 2px; +} + .border-r-2 { border-right-width: 2px; } @@ -1125,23 +1130,13 @@ select { background-color: transparent; } -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} - -.bg-gray-900 { - --tw-bg-opacity: 1; - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); -} - .bg-black\/80 { background-color: rgb(0 0 0 / 0.8); } -.bg-gray-800 { +.bg-black { --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } .bg-opacity-50 { @@ -1168,8 +1163,8 @@ select { padding: 1rem; } -.p-6 { - padding: 1.5rem; +.p-5 { + padding: 1.25rem; } .py-0\.5 { @@ -1259,10 +1254,6 @@ select { padding-right: 0.75rem; } -.pl-72 { - padding-left: 18rem; -} - .pb-4 { padding-bottom: 1rem; } @@ -1331,11 +1322,6 @@ select { color: rgb(239 68 68 / var(--tw-text-opacity)); } -.text-gray-400 { - --tw-text-opacity: 1; - color: rgb(156 163 175 / var(--tw-text-opacity)); -} - .text-gray-200 { --tw-text-opacity: 1; color: rgb(229 231 235 / var(--tw-text-opacity)); @@ -1372,14 +1358,6 @@ select { transition-duration: 300ms; } -.duration-500 { - transition-duration: 500ms; -} - -.duration-200 { - transition-duration: 200ms; -} - .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -1430,14 +1408,6 @@ select { animation-duration: 300ms; } -.duration-500 { - animation-duration: 500ms; -} - -.duration-200 { - animation-duration: 200ms; -} - .ease-in-out { animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @@ -1470,36 +1440,11 @@ html { background-color: transparent; } -.hover\:bg-gray-800:hover { - --tw-bg-opacity: 1; - background-color: rgb(31 41 55 / var(--tw-bg-opacity)); -} - -.hover\:bg-gray-300:hover { - --tw-bg-opacity: 1; - background-color: rgb(209 213 219 / var(--tw-bg-opacity)); -} - .hover\:bg-mono-hover:hover { --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity)); } -.hover\:text-white:hover { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.hover\:text-mono-primary:hover { - --tw-text-opacity: 1; - color: rgb(39 39 42 / var(--tw-text-opacity)); -} - -.hover\:text-mono-text:hover { - --tw-text-opacity: 1; - color: rgb(107 114 128 / var(--tw-text-opacity)); -} - .focus\:rounded-md:focus { border-radius: 0.375rem; } @@ -1663,42 +1608,6 @@ html { animation-duration: 500ms; } -.group[data-state=closed] .group-data-\[state\=closed\]\:duration-300 { - transition-duration: 300ms; -} - -.group[data-state=open] .group-data-\[state\=open\]\:duration-500 { - transition-duration: 500ms; -} - -.group[data-state=open] .group-data-\[state\=open\]\:animate-in { - animation-name: enter; - animation-duration: 150ms; - --tw-enter-opacity: initial; - --tw-enter-scale: initial; - --tw-enter-rotate: initial; - --tw-enter-translate-x: initial; - --tw-enter-translate-y: initial; -} - -.group[data-state=closed] .group-data-\[state\=closed\]\:animate-out { - animation-name: exit; - animation-duration: 150ms; - --tw-exit-opacity: initial; - --tw-exit-scale: initial; - --tw-exit-rotate: initial; - --tw-exit-translate-x: initial; - --tw-exit-translate-y: initial; -} - -.group[data-state=closed] .group-data-\[state\=closed\]\:duration-300 { - animation-duration: 300ms; -} - -.group[data-state=open] .group-data-\[state\=open\]\:duration-500 { - animation-duration: 500ms; -} - @media (prefers-reduced-motion: no-preference) { @keyframes spin { to { @@ -1775,10 +1684,6 @@ html { display: flex; } - .lg\:hidden { - display: none; - } - .lg\:w-72 { width: 18rem; } diff --git a/README.md b/README.md index cfbe6fd..aececc1 100644 --- a/README.md +++ b/README.md @@ -1,210 +1,7 @@ -# Ew UI +## Getting started -Probably the most opinionated React UI library. +Install Tailwind CSS via npm: -## Type of pages +```bash -1. App pages. Pages behind the login. -2. Public pages. Pages accessible to everyone. - -## Dashboard - -You build your own Dashboard using the DashboardContent component and the sidebar, like so: - -```jsx -function Dashboard() { - return ( - <> - - - - ) -} -``` - -## Color palette - -You need to define these values: - -```js -"ew-primary": { - DEFAULT: "#7F5aF0", -}, -"ew-accent": { - DEFAULT: "#444652", -}, -"ew-text": { - DEFAULT: "#333", -}, -"ew-text-light": { - DEFAULT: "#fff", -}, -"ew-link": { - DEFAULT: "#006bb8", -}, -"ew-success": { - DEFAULT: "#12E999", -}, -"ew-warning": { - DEFAULT: "#FBBD23", -}, -"ew-error": { - DEFAULT: "#BD271E", -}, -"ew-bg": { - DEFAULT: "#fff", -}, -"ew-bg-dark": { - DEFAULT: "#333", -} -``` - -Then, generate the shades for each color using https://www.tints.dev/ and fill the objects as: - -```js -"ew-primary": { - DEFAULT: "#7F5aF0", - 50: "#F1ECFD", - 100: "#E6DEFC", - 200: "#CCBEF9", - 300: "#B39DF6", - 400: "#9A7CF3", - 500: "#7F5AF0", - 600: "#521FEB", - 700: "#3A11B6", - 800: "#270B7A", - 900: "#13063D", - 950: "#09031C", -}, -"ew-accent": { - DEFAULT: "#444652", - 50: "#E9EAF1", - 100: "#D0D2E2", - 200: "#A1A4C4", - 300: "#757AA9", - 400: "#505581", - 500: "#333652", - 600: "#292C42", - 700: "#1F2132", - 800: "#14151F", - 900: "#0A0A10", - 950: "#060609", -}, -"ew-text": { - DEFAULT: "#333", - 50: "#EBEBEB", - 100: "#D6D6D6", - 200: "#ADADAD", - 300: "#858585", - 400: "#5C5C5C", - 500: "#333333", - 600: "#292929", - 700: "#1F1F1F", - 800: "#141414", - 900: "#0A0A0A", - 950: "#050505", -}, -"ew-text-light": { - DEFAULT: "#fff", - 50: "#FFFFFF", - 100: "#FFFFFF", - 200: "#FFFFFF", - 300: "#FFFFFF", - 400: "#FFFFFF", - 500: "#FFFFFF", - 600: "#CCCCCC", - 700: "#999999", - 800: "#666666", - 900: "#333333", - 950: "#1A1A1A", -}, -"ew-link": { - DEFAULT: "#006bb8", - 50: "#E0F2FF", - 100: "#BDE3FF", - 200: "#7AC8FF", - 300: "#3DAEFF", - 400: "#0092FA", - 500: "#006BB8", - 600: "#005694", - 700: "#004170", - 800: "#002A47", - 900: "#001524", - 950: "#000C14", -}, -"ew-success": { - DEFAULT: "#12E999", - 50: "#E7FDF5", - 100: "#D0FBEB", - 200: "#A0F8D8", - 300: "#71F4C4", - 400: "#3DF0AE", - 500: "#12E999", - 600: "#0EB97A", - 700: "#0B8E5E", - 800: "#075F3F", - 900: "#042F1F", - 950: "#021810", -}, -"ew-warning": { - DEFAULT: "#FBBD23", - 50: "#FFF9EB", - 100: "#FEF2D2", - 200: "#FDE4A5", - 300: "#FDD87D", - 400: "#FCCB50", - 500: "#FBBD23", - 600: "#E1A304", - 700: "#AA7B03", - 800: "#6E5002", - 900: "#372801", - 950: "#1E1601", -}, -"ew-error": { - DEFAULT: "#BD271E", - 50: "#FBE6E5", - 100: "#F7D1CF", - 200: "#EF9E9A", - 300: "#E77069", - 400: "#DF3D35", - 500: "#BD271E", - 600: "#961E18", - 700: "#721712", - 800: "#4B0F0C", - 900: "#280806", - 950: "#120403", -}, -"ew-bg": { - DEFAULT: "#fff", - 50: "#FFFFFF", - 100: "#FFFFFF", - 200: "#FFFFFF", - 300: "#FFFFFF", - 400: "#FFFFFF", - 500: "#FFFFFF", - 600: "#CCCCCC", - 700: "#999999", - 800: "#666666", - 900: "#333333", - 950: "#1A1A1A", -}, -"ew-bg-dark": { - DEFAULT: "#333", - 50: "#EBEBEB", - 100: "#D6D6D6", - 200: "#ADADAD", - 300: "#858585", - 400: "#5C5C5C", - 500: "#333333", - 600: "#292929", - 700: "#1F1F1F", - 800: "#141414", - 900: "#0A0A0A", - 950: "#050505", -}, -``` - -Resources: - -* https://www.webdesignrankings.com/resources/lolcolors/ -* https://www.happyhues.co/palettes/4 \ No newline at end of file +``` \ No newline at end of file diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts index 3b5f268..24d3212 100644 --- a/src/components/Card/index.ts +++ b/src/components/Card/index.ts @@ -1,3 +1 @@ -import * as Card from "./Card"; - -export { Card } \ No newline at end of file +export * from "./Card"; diff --git a/src/components/Combobox/Combobox.stories.tsx b/src/components/Combobox/Combobox.stories.tsx index 4379c02..5298dff 100644 --- a/src/components/Combobox/Combobox.stories.tsx +++ b/src/components/Combobox/Combobox.stories.tsx @@ -23,18 +23,10 @@ const animals = [ { label: "Lion", value: "lion" }, { label: "Monkey", value: "monkey" }, { label: "Panda", value: "panda" }, + { label: "Car", value: "car" }, + { label: "Car Payment", value: "car_payment" }, ]; -// export const Default: Story = { -// render: () => ( -// -// {animals.map((animal) => ( -// {animal.label} -// ))} -// -// ), -// }; - export const Default: Story = { render: () => , }; diff --git a/src/components/Combobox/Combobox.tsx b/src/components/Combobox/Combobox.tsx index 912b1b3..38de6ad 100644 --- a/src/components/Combobox/Combobox.tsx +++ b/src/components/Combobox/Combobox.tsx @@ -42,7 +42,9 @@ const Combobox = React.forwardRef( const classes = cx(styles.comboboxStyles({ hasError }), props.className); const handleOnSelect = (selectedValue: string) => { - const option = options.find((option) => option.value === selectedValue); + const option = options.find( + (option) => option.label.toLowerCase() === selectedValue + ); if (!_.isNil(option)) { // If same option then unselect it. diff --git a/src/examples/Dashboard/Dashboard.tsx b/src/examples/Dashboard/Dashboard.tsx index fb2ee8d..558ed76 100644 --- a/src/examples/Dashboard/Dashboard.tsx +++ b/src/examples/Dashboard/Dashboard.tsx @@ -1,10 +1,8 @@ import * as React from "react"; -import { Box } from "../../components/Box"; -import { cx } from "../../utils"; -import { Header } from "./Header"; +import { Box, cx } from '../../index'; + import { Sidebar } from "./Sidebar"; import { Content } from "./Content"; -import { Flyout } from "../../components/Flyout"; const Dashboard = () => { return ( diff --git a/src/examples/SignUp/SignUp.stories.tsx b/src/examples/SignUp/SignUp.stories.tsx new file mode 100644 index 0000000..7a09953 --- /dev/null +++ b/src/examples/SignUp/SignUp.stories.tsx @@ -0,0 +1,19 @@ +import React from "react"; +import type { Meta, StoryObj } from "@storybook/react"; +import { SignUp } from "./SignUp"; + +const meta: Meta = { + title: "Examples / SignUp", + component: SignUp, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + render: () => , +}; + +Default.parameters = { + layout: "fullscreen", +}; diff --git a/src/examples/SignUp/SignUp.tsx b/src/examples/SignUp/SignUp.tsx new file mode 100644 index 0000000..a4a411a --- /dev/null +++ b/src/examples/SignUp/SignUp.tsx @@ -0,0 +1,27 @@ +import * as React from "react"; +import { Box, Button, Card, Input, cx } from "../../index"; + +const SignUp = () => { + return ( + + + + Sign up + Create a new account. + + + + + + + + + + + + + + ); +}; + +export { SignUp }; diff --git a/src/index.ts b/src/index.ts index 343961f..a5bc1a2 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,6 +1,7 @@ +import * as Card from "./components/Card"; +export { Card }; export { Box } from "./components/Box"; export { Button } from "./components/Button"; -export { Card } from "./components/Card"; export { Divider } from "./components/Divider"; export { Input } from "./components/Input"; export { Modal } from "./components/Modal";