sharonamr · jennysky · Dec 9, 2022 · Dec 10, 2022 · Dec 10, 2022 · Dec 14, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -16,13 +16,15 @@
   },
   "peerDependencies": {
     "react": "18.x",
-    "react-dom": "18.x"
+    "react-dom": "18.x",
+    "styled-components": "^5.3.6"
   },
   "devDependencies": {
     "@types/react": "^18.0.24",
     "@types/react-dom": "^18.0.8",
+    "@types/styled-components": "^5.1.26",
     "@vitejs/plugin-react": "^2.2.0",
     "typescript": "^4.6.4",
     "vite": "^3.2.3"
   }
-}
+}
diff --git a/packages/components/src/Button/Button.tsx b/packages/components/src/Button/Button.tsx
@@ -1,5 +1,28 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
 
-export const Button: React.FC<PropsWithChildren<{onClick: () => void, size?: number}>> = ({ children, onClick, size = 200 }) => {
-  return <button className="btn" style={{width: size}} onClick={onClick}>{children}</button>;
-};
+const StyledButton = styled.button<{ $size: number }>`
+  border-radius: 1rem;
+  background-color: rgb(237 40 126 / 1);
+  padding: 0.5rem 1rem;
+  color: white;
+  width: ${(props) => props.$size}px;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  :hover {
+    background-color: rgb(251 57 151 /1);
+  }
+`;
+
+export const Button: React.FC<
+  PropsWithChildren<{ onClick?: () => void; size?: number; className?: string }>
+> = ({ children, onClick, size = 200, className }) => {
+  return (
+    <StyledButton $size={size} onClick={onClick} className={className}>
+      {children}
+    </StyledButton>
+  );
+};
diff --git a/packages/components/src/Button/index.ts b/packages/components/src/Button/index.ts
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/packages/components/src/Card/Card.tsx b/packages/components/src/Card/Card.tsx
@@ -1,17 +1,40 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+import { Button } from '../Button';
 
-export const Card: React.FC<PropsWithChildren<{ title: string }>> = ({ children, title }) => {
+const StyledContainer = styled.div`
+  padding: 1rem;
+  border-radius: 0.375rem;
+  border-width: 1px;
+  border-color: #f3f4f6;
+  border-style: solid;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+`;
+
+const StyledButton = styled(Button)`
+  margin-top: 1.5rem;
+`;
+
+const StyledContent = styled.div`
+  padding-top: 0.5rem;
+`;
+
+const StyledTitle = styled.h2`
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+`;
+
+export const Card: React.FC<PropsWithChildren<{ title: string }>> = ({
+  children,
+  title,
+}) => {
   return (
-    <div className="p-4">
-      <div className="card w-96 bg-base-100 shadow-xl">
-        <div>
-          <h2 className="text-secondary text-xl">{title}</h2>
-          <p className="pt-2">{children}</p>
-          <div className="justify-end">
-            <button className="btn mt-6 bg-secondary">Done</button>
-          </div>
-        </div>
+    <StyledContainer>
+      <StyledTitle>{title}</StyledTitle>
+      <StyledContent>{children}</StyledContent>
+      <div>
+        <StyledButton>Done</StyledButton>
       </div>
-    </div>
+    </StyledContainer>
   );
-};
+};
diff --git a/packages/components/src/Card/index.ts b/packages/components/src/Card/index.ts
@@ -0,0 +1 @@
+export * from './Card';
diff --git a/packages/components/src/MenuButton/MenuButton.tsx b/packages/components/src/MenuButton/MenuButton.tsx
@@ -0,0 +1,46 @@
+import styled from 'styled-components';
+import { PropsWithChildren } from 'react';
+
+const StyledButton = styled.button`
+  margin-top: 0.25rem;
+  width: 100%;
+  text-align: start;
+  color: rgb(40 49 115/1);
+  background-color: transparent;
+  outline: none;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s;
+
+  & > a {
+    transition: color 150ms linear;
+    cursor: pointer;
+    text-decoration: none;
+    display: block;
+    width: 100%;
+    padding: 0.5rem 1rem;
+    background-color: #ffffff;
+    transition-property: all;
+    font-weight: 500;
+    border-radius: 9999px;
+    border-width: 0;
+    color: rgb(40 49 115);
+    outline: 0;
+
+    :hover {
+      background-color: #f3f4f6;
+    }
+  }
+
+  & > .active {
+    background-color: #e5e7eb;
+    font-weight: 500;
+  }
+`;
+
+export const MenuButton = ({
+  children,
+  className,
+}: PropsWithChildren<{ className?: string }>) => {
+  return <StyledButton className={className}>{children}</StyledButton>;
+};
diff --git a/packages/components/src/MenuButton/index.ts b/packages/components/src/MenuButton/index.ts
@@ -0,0 +1 @@
+export * from './MenuButton';
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -1,2 +1,3 @@
-export * from './Button/Button';
-export * from './Card/Card';
+export * from './Button';
+export * from './Card';
+export * from './MenuButton';
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -19,7 +19,8 @@
   },
   "peerDependencies": {
     "react": "18.x",
-    "react-dom": "18.x"
+    "react-dom": "18.x",
+    "styled-components": "^5.3.6"
   },
   "dependencies": {
     "esbuild-wasm": "^0.15.14",

diff --git a/packages/core/src/components/Button/Button.tsx b/packages/core/src/components/Button/Button.tsx
@@ -0,0 +1,24 @@
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+const StyledButton = styled.button<{ $size: number }>`
+  border-radius: 1rem;
+  background-color: rgb(237 40 126 / 1);
+  padding: 0.5rem 1rem;
+  color: white;
+  width: ${(props) => props.$size};
+
+  :hover {
+    background-color: rgb(251 57 151 /1);
+  }
+`;
+
+export const Button: React.FC<
+  PropsWithChildren<{ onClick?: () => void; size?: number; className?: string }>
+> = ({ children, onClick, size = 200, className }) => {
+  return (
+    <StyledButton $size={size} onClick={onClick} className={className}>
+      {children}
+    </StyledButton>
+  );
+};
diff --git a/packages/core/src/components/Button/index.ts b/packages/core/src/components/Button/index.ts
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/packages/core/src/components/DocsCode.tsx b/packages/core/src/components/DocsCode.tsx
@@ -1,26 +1,54 @@
-import { PropsWithChildren, useEffect, useState } from "react";
-import { Preview } from "./Preview";
+import { PropsWithChildren, useEffect, useState } from 'react';
+import styled from 'styled-components';
 import Editor from 'react-simple-code-editor';
 import { highlight, languages } from 'prismjs';
 import 'prismjs/components/prism-jsx';
+import { Preview } from './Preview';
 
-export const DocsCode: React.FC<PropsWithChildren<{ code: string, dependencies: object }>> = ({ code: defaultCode, dependencies }) => {
+const StyledEditor = styled(Editor).attrs((props) => ({
+    className: 'blox-code-editor',
+}))`
+  margin-bottom: 1rem;
+  background-color: #111827;
+  color: #d1d5db;
+  font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  border-radius: 0.5rem;
+`;
+
+const StyledCodePreview = styled.div.attrs((props) => ({
+    className: 'blox-code-preview',
+}))`
+  padding: 2rem;
+  margin-bottom: 2rem;
+  border-radius: 0.5rem;
+  border-width: 1px;
+  border-color: #f3f4f6;
+  border-style: solid;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+`;
+
+export const DocsCode: React.FC<
+  PropsWithChildren<{ code: string; dependencies: object }>
+> = ({ code: defaultCode, dependencies }) => {
   const [code, setCode] = useState(defaultCode);
   useEffect(() => {
     setCode(defaultCode);
   }, [defaultCode]);
   return (
     <>
-      <Editor
+      <StyledEditor
         value={code}
-        onValueChange={code => setCode(code)}
-        highlight={code => highlight(code, languages.jsx, 'jsx')}
+        onValueChange={(code) => setCode(code)}
+        highlight={(code) => highlight(code, languages.jsx, 'jsx')}
         padding={10}
-        className="blox-code-editor"
       />
-      <div className="blox-code-preview">
-        <Preview code={code} dependencies={dependencies}>docs code: {code}</Preview>
-      </div>
+      <StyledCodePreview>
+        <Preview code={code} dependencies={dependencies}>
+          docs code: {code}
+        </Preview>
+      </StyledCodePreview>
     </>
   );
-};
+};
diff --git a/packages/core/src/components/Preview.tsx b/packages/core/src/components/Preview.tsx
@@ -2,6 +2,7 @@ import React, { PropsWithChildren, useCallback, useState, useEffect } from "reac
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import * as reactLib from 'react';
 import { transpile } from "../utils/transpiler";
+import { Button } from "./Button";
 
 const evalCode = (code: string, scope: Record<string, any>) => {
   const scopeKeys = Object.keys(scope);
@@ -21,7 +22,7 @@ const ErrorFallback: React.FC<FallbackProps> = ({ error, resetErrorBoundary }) =
   return (
     <div role="alert">
       <ErrorMessage>{error.message}</ErrorMessage>
-      <button className='btn' onClick={resetErrorBoundary}>Try again</button>
+      <Button onClick={resetErrorBoundary}>Try again</Button>
     </div>
   )
 }
@@ -87,4 +88,4 @@ export const Preview: React.FC<PropsWithChildren<{ code: string, dependencies: R
   >
     <TranspiledElement code={code} dependencies={dependencies} />
   </ErrorBoundary>
-);
+);
diff --git a/packages/core/src/components/PropsTable.tsx b/packages/core/src/components/PropsTable.tsx
@@ -1,14 +1,62 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
 
-export const PropsTable: React.FC<PropsWithChildren<{ table: { props: object } }>> = ({ table }) => {
+const StyledTable = styled.table.attrs((props) => ({
+    className: 'blox-props-table',
+}))`
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  width: 100%;
+  color: rgb(40 49 115 / 1);
+`;
+
+const StyledHeader = styled.th`
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  text-align: left;
+  width: 33.333333%;
+`;
+
+const StyledRow = styled.tr`
+  border-bottom-width: 1px;
+`;
+
+const StyledData = styled.td`
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+`;
+
+const StyledType = styled(StyledData)`
+  color: #8d0e40;
+`;
+
+export const PropsTable: React.FC<
+  PropsWithChildren<{ table: { props: object } }>
+> = ({ table }) => {
   return (
-    <table className="blox-props-table">
-      <tr><th>Prop</th><th>Type</th><th>Default</th></tr>
-      {
-        Object.entries(table['props']).map(([key, value]) => (
-          <tr><td>{key}{!value.required && '?'}</td><td className="blox-props-table-type">{value.type.name}</td><td>{value.defaultValue?.value || '-'}</td></tr>
-        ))
-      }
-    </table>
+    <StyledTable>
+      <StyledRow>
+        <StyledHeader>Prop</StyledHeader>
+        <StyledHeader>Type</StyledHeader>
+        <StyledHeader>Default</StyledHeader>
+      </StyledRow>
+      {Object.entries(table['props']).map(([key, value]) => (
+        <StyledRow key={key}>
+          <StyledData>
+            {key}
+            {!value.required && '?'}
+          </StyledData>
+          <StyledType>{value.type.name}</StyledType>
+          <StyledData>{value.defaultValue?.value || '-'}</StyledData>
+        </StyledRow>
+      ))}
+    </StyledTable>
   );
-};
+};
diff --git a/packages/docs/blox/Menu.template.hbs b/packages/docs/blox/Menu.template.hbs
@@ -1,13 +1,20 @@
 import { NavLink } from "react-router-dom";
+import { MenuButton } from 'blox-example-components'
+import styled from "styled-components";
+
+const StyledMenuButton = styled(MenuButton)`
+    margin-top: 0.25rem;
+`;
 
 export const Menu = ({className}) => (
+
 <div className={className}>
   {{#each components}}
-  <div className='blox-menu-btn'>
+  <StyledMenuButton>
     <NavLink to="/{{this}}">
       {{this}}
     </NavLink>
-  </div>
+  </StyledMenuButton>
   {{/each}}
 </div>
-);
+);