update to bennie

.github/workflows/master.yml

@@ -40,7 +40,7 @@ jobs:
       - name: deploy
         uses: cloudflare/pages-action@v1
         with:
-          projectName: "phoenix-web"
+          projectName: "bolanosdev"
           directory: "./build/client"
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
           accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}

.gitmodules

@@ -1,6 +1,3 @@
-[submodule "packages/phoenix"]
-	path = packages/phoenix-ui
-	url = [email protected]:bolanosdev/phoenix-ui.git
-[submodule "packages/phoenix-ui"]
-	path = packages/phoenix-ui
-	url = [email protected]:bolanosdev/phoenix-ui.git
+[submodule "packages/bennie-ui"]
+	path = packages/bennie-ui
+	url = [email protected]:bennie-ui/bennie-ui.git

app/app.css

@@ -0,0 +1,4 @@
+body {
+  -webkit-font-smoothing: antialiased;
+  background-color: #151720;
+}

app/app.styles.ts

@@ -0,0 +1,23 @@
+import { ComponentProperties } from "@bennie-ui/types";
+
+export const main_styles: ComponentProperties = {
+  size: "sm",
+  margin: { x: "auto" },
+  flex: { direction: "col" },
+  width: { value: "full" },
+  colors: {
+    text: { color: "gray", weight: "400" },
+    background: { color: "white" },
+  },
+  dark: {
+    colors: {
+      text: { color: "gray", weight: "400" },
+      background: { color: "gray", weight: "800" },
+    },
+  },
+  overrides: {
+    large: {
+      width: { value: "2/3" },
+    },
+  },
+};

app/components/header/header.styles.ts

@@ -0,0 +1,13 @@
+import { ComponentProperties } from "@bennie-ui/types";
+
+type HeaderStyles = {
+  container: ComponentProperties;
+};
+export const header_styles: HeaderStyles = {
+  container: {
+    margin: { all: "2" },
+    height: { value: "12" },
+    flex: { justifyContent: "between", alignItems: "center" },
+    colors: { text: { color: "white" } },
+  },
+};

app/components/header/header.tsx

@@ -1,20 +1,29 @@
 import { FC } from "react";
-import { Section } from "packages/phoenix-ui/components/primitives/section/src";
+import { Icon } from "@bennie-ui/icons";
+import { Button } from "@bennie-ui/button";
+import { Section } from "@bennie-ui/section";
 
+import { header_styles } from "./header.styles";
 export const Header: FC = () => {
   return (
     <div className="header-wrapper">
       <header>
-        <Section
-          height={{ value: "14" }}
-          colors={{ text: { color: "gray" } }}
-          dark={{ colors: { text: { color: "white" } } }}
-          margin={{ x: "auto" }}
-        >
-          <Section flex={{ justifyContent: "justify-between" }}>
-            <Section>Bolanos Dev</Section>
-            <Section>Middle</Section>
-            <Section>Right</Section>
+        <Section {...header_styles.container}>
+          <Section flex={{ justifyContent: "start", alignItems: "center" }}>
+            <Section size="2xl">Bolanos Dev</Section>
+          </Section>
+          <Section>
+            <Button
+              onClick={() => {
+                alert("user profile");
+              }}
+            >
+              <Icon
+                figure="UserIcon"
+                colors={{ text: { color: "black" } }}
+                dark={{ colors: { text: { color: "white" } } }}
+              />
+            </Button>
           </Section>
         </Section>
       </header>

app/components/header/logo.tsx

@@ -1,14 +1,14 @@
 import React from "react";
-import { Text, Link } from "@phoenix-ui/text";
+import { Text, Link } from "@bennie-ui/text";
 
 export const Logo: React.FunctionComponent = () => (
   <div className="logo">
     <Link
       href="/"
       align="left"
       colors={{ text: { color: "gray" } }}
-      size="text-2xl"
-      weight="font-bold"
+      size="2xl"
+      weight="bold"
       display="block"
     >
       Bolanos Dev

app/components/header/navigation.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react";
-import { Link } from "@phoenix-ui/text";
+import { Link } from "@bennie-ui/text";
 
 type Link = { url: string; text: string };
 
@@ -21,7 +21,7 @@ const Navigation: FC<{
           <li key={i} className="inline">
             <Link
               href={link.url}
-              size="text-sm"
+              size="sm"
               colors={{ text: { color: "gray" } }}
             >
               {link.text}
@@ -32,7 +32,7 @@ const Navigation: FC<{
           <li key={i} className="inline">
             <Link
               href={link.url}
-              size="text-sm"
+              size="sm"
               colors={{ text: { color: "slate" } }}
             >
               {link.text}

app/root.tsx

@@ -7,9 +7,10 @@ import {
 } from "@remix-run/react";
 
 import type { LinksFunction } from "@remix-run/node";
-import { Section } from "@phoenix-ui/section";
+import { Section } from "@bennie-ui/section";
+import baselineStylesHref from "@bennie-ui/baseline/compiled/baseline.css?url";
 import { Header } from "./components/header";
-import baselineStylesHref from "@phoenix-ui/baseline/compiled/baseline.css?url";
+import { main_styles } from "./app.styles";
 
 export const links: LinksFunction = () => [
   { rel: "stylesheet", href: baselineStylesHref },
@@ -25,13 +26,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <Meta />
         <Links />
       </head>
-      <body className="w-full h-full dark:bg-gray-800 ">
-        <Section
-          className="w-2/3 flex flex-col"
-          margin={{ x: "auto" }}
-          colors={{ text: { color: "gray" } }}
-          dark={{ colors: { text: { color: "white" } } }}
-        >
+      <body className="w-full h-full bg-white dark:bg-gray-800">
+        <Section {...main_styles}>
           <Header />
           <Section id="main-content">{children}</Section>
         </Section>

app/routes/_index.tsx

@@ -1,46 +1,26 @@
 import type { MetaFunction } from "@remix-run/cloudflare";
-import { Text } from "@phoenix-ui/text";
-import { Button } from "@phoenix-ui/button";
-import { Section } from "@phoenix-ui/section";
+import { Text } from "@bennie-ui/text";
+import { Section } from "@bennie-ui/section";
+import { Icon } from "@bennie-ui/icons";
 
 export const meta: MetaFunction = () => {
   return [
     { title: "New Remix App" },
     {
       name: "description",
-      content: "Welcome to BolanosDev! Using Phoenix-UI and Cloudflare!",
+      content: "Welcome to BolanosDev! Using Bennie-UI and Cloudflare!",
     },
   ];
 };
 
 export default function Index() {
   return (
-    <Section padding={{ all: "0.5" }}>
-      <Text display="block" colors={{ text: { color: "teal" } }} align="center">
-        Welcome to BolanosDev
-      </Text>
-
-      <Button
-        colors={{ text: { color: "red" }, background: { color: "teal" } }}
-      >
-        Hello World
-      </Button>
-      <ul>
-        <li>
-          <a
-            target="_blank"
-            href="https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/"
-            rel="noreferrer"
-          >
-            Cloudflare Pages Docs{" "}
-          </a>
-        </li>
-        <li>
-          <a target="_blank" href="https://remix.run/docs" rel="noreferrer">
-            Remix Docs
-          </a>
-        </li>
-      </ul>
+    <Section
+      padding={{ all: "0.5" }}
+      width={{ value: "full" }}
+      colors={{ background: { color: "gray", weight: "900" } }}
+    >
+      <Text>Hero Image</Text>
     </Section>
   );
 }

app/routes/examples.tsx

@@ -1,19 +1,19 @@
-import { ComponentProperties } from "packages/phoenix-ui/libraries/types";
-import { Text } from "@phoenix-ui/text";
-import { Button } from "@phoenix-ui/button";
-import { Section } from "@phoenix-ui/section";
+import { ComponentProperties } from "packages/bennie-ui/libraries/types";
+import { Button } from "@bennie-ui/button";
 
 export default function Examples() {
   const props: ComponentProperties = {
     children: "Content",
     colors: {
       text: { color: "white" },
       background: { color: "red" },
+      border: { color: "teal", weight: "900" },
     },
     dark: {
       colors: {
         text: { color: "red" },
         background: { color: "white" },
+        border: { color: "rose", weight: "900" },
       },
     },
     overrides: {
@@ -22,11 +22,13 @@ export default function Examples() {
         colors: {
           text: { color: "sky" },
           background: { color: "teal" },
+          border: { color: "lime" },
         },
         dark: {
           colors: {
             text: { color: "teal" },
             background: { color: "sky" },
+            border: { color: "red" },
           },
         },
       },
@@ -35,11 +37,13 @@ export default function Examples() {
         colors: {
           text: { color: "orange" },
           background: { color: "lime" },
+          border: { color: "orange" },
         },
         dark: {
           colors: {
             text: { color: "lime" },
             background: { color: "orange" },
+            border: { color: "sky" },
           },
         },
       },
@@ -48,17 +52,7 @@ export default function Examples() {
 
   return (
     <div>
-      <Text {...props}>Text</Text>
-      <br />
-      <Button
-        action="primary"
-        {...props}
-        className="text-green-500 bg-yellow-500"
-      >
-        Button with Classes
-      </Button>
-      <br />
-      <Section {...props}>Section</Section>
+      <Button {...props}>Button with Classes</Button>
     </div>
   );
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "phoenix-web",
+  "name": "bolanosdev-web",
   "private": true,
   "sideEffects": false,
   "type": "module",
@@ -14,8 +14,8 @@
     "typegen": "wrangler types"
   },
   "workspaces": [
-    "packages/phoenix-ui/libraries/*",
-    "packages/phoenix-ui/components/primitives/*"
+    "packages/bennie-ui/libraries/*",
+    "packages/bennie-ui/components/primitives/*"
   ],
   "dependencies": {
     "@heroicons/react": "^2.1.3",

remix.conf.js

@@ -5,5 +5,5 @@ export default {
   // assetsBuildDirectory: "public/build",
   // publicPath: "/build/",
   // serverBuildPath: "build/index.js",
-  serverDependenciesToBundle: [/^@phoenix-ui\//],
+  serverDependenciesToBundle: [/^@bennie-ui\//],
 };