wip

.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 {
+.w-1\/3 {
-  width: 75%;
+  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 {
+.p-5 {
-  padding: 1.5rem;
+  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;
   }

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 (
-    <>
-      <Sidebar />
-      <DashboardContent />
-    </>
-  )
-}
-```
-
-## 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

src/components/Card/index.ts

@@ -1,3 +1 @@
-import * as Card from "./Card";
+export * from "./Card";
-
-export { Card }

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: () => (
-//     <Combobox label="Animals" items={animals}>
-//       {animals.map((animal) => (
-//         <ComboboxItem key={animal.value}>{animal.label}</ComboboxItem>
-//       ))}
-//     </Combobox>
-//   ),
-// };
-
 export const Default: Story = {
   render: () => <Combobox label="Animals" options={animals} />,
 };

src/components/Combobox/Combobox.tsx

@@ -42,7 +42,9 @@ const Combobox = React.forwardRef<T.ComboboxElement, T.ComboboxProps>(
     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.

src/examples/Dashboard/Dashboard.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
-import { Box } from "../../components/Box";
+import { Box, cx } from '../../index';
-import { cx } from "../../utils";
+
-import { Header } from "./Header";
 import { Sidebar } from "./Sidebar";
 import { Content } from "./Content";
-import { Flyout } from "../../components/Flyout";
 
 const Dashboard = () => {
   return (

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<typeof SignUp> = {
+  title: "Examples / SignUp",
+  component: SignUp,
+};
+
+export default meta;
+type Story = StoryObj<typeof SignUp>;
+
+export const Default: Story = {
+  render: () => <SignUp />,
+};
+
+Default.parameters = {
+  layout: "fullscreen",
+};

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 (
+    <Box className={cx(["w-1/3", "mx-auto", "p-5"])}>
+      <Card.$ paddless>
+        <Card.Header>
+          <Card.Title>Sign up</Card.Title>
+          <Card.Description>Create a new account.</Card.Description>
+        </Card.Header>
+
+        <Card.Body>
+          <Box>
+            <Input label={"Email address"} />
+          </Box>
+        </Card.Body>
+
+        <Card.Footer>
+          <Button>Sign Up</Button>
+        </Card.Footer>
+      </Card.$>
+    </Box>
+  );
+};
+
+export { SignUp };

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";