Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adding UI components #2

Open
wants to merge 11 commits into
base: main
Choose a base branch
from
Open
1 change: 1 addition & 0 deletions apps/web/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";
import type { Preview } from "@storybook/react";
import "../src/App.css";
import "../src/index.css";

const preview: Preview = {
parameters: {
Expand Down
19 changes: 10 additions & 9 deletions apps/web/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,20 +22,21 @@
"@eslint/js": "^9.13.0",
"@rentment/eslint-config": "workspace:*",
"@rentment/typescript-config": "workspace:*",
"@storybook/addon-essentials": "^8.4.2",
"@storybook/addon-interactions": "^8.4.2",
"@storybook/addon-onboarding": "^8.4.2",
"@storybook/blocks": "^8.4.2",
"@storybook/react": "^8.4.2",
"@storybook/react-vite": "^8.4.2",
"@storybook/test": "^8.4.2",
"@storybook/addon-essentials": "^8.4.7",
"@storybook/addon-interactions": "^8.4.7",
"@storybook/addon-onboarding": "^8.4.7",
"@storybook/blocks": "^8.4.7",
"@storybook/react": "^8.4.7",
"@storybook/react-vite": "^8.4.7",
"@storybook/test": "^8.4.7",
"@types/react": "^18.3.12",
"@types/react-dom": "^18.3.1",
"@vitejs/plugin-react": "^4.3.3",
"eslint-plugin-storybook": "^0.11.0",
"globals": "^15.11.0",
"storybook": "^8.4.2",
"jsdoc-type-pratt-parser": "^4.1.0",
"storybook": "^8.4.7",
"typescript": "~5.6.2",
"vite": "^5.4.10"
"vite": "^5.4.11"
}
}
39 changes: 1 addition & 38 deletions apps/web/src/App.css
Original file line number Diff line number Diff line change
@@ -1,42 +1,5 @@
#root {
max-width: 1280px;
/* max-width: 1280px; */
margin: 0 auto;
padding: 2rem;
text-align: center;
}

.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}

.card {
padding: 2em;
}

.read-the-docs {
color: #888;
}
158 changes: 22 additions & 136 deletions apps/web/src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,143 +1,29 @@
import { useState } from "react";
import reactLogo from "./assets/react.svg";
import viteLogo from "/vite.svg";
import { BaseWrapper } from "./components/BaseComponents/BaseWrapper";
import "./App.css";
import { FaSignInAlt } from "react-icons/fa";
import { Button } from "./components";
// import reactLogo from './assets/react.svg';
// import viteLogo from '/vite.svg';
// import { FaSignInAlt } from 'react-icons/fa';
// import { Button } from './components';

function App() {
const [count, setCount] = useState(0);

return (
<>
<div>
<a href="https://vite.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<h1>Vite + React</h1>
<div className="card">
<button onClick={() => setCount((count) => count + 1)}>
count is {count}
</button>
<p>
Edit <code>src/App.tsx</code> and save to test HMR
</p>
</div>
<p className="read-the-docs">
Click on the Vite and React logos to learn more
</p>
<div
style={{
display: "flex",
flexWrap: "wrap",
gap: "10px",
backgroundColor: "#AAA",
padding: "20px",
}}
>
<Button
label="متن دکمه"
color="primary"
variant="solid"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="primary"
variant="outline"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="primary"
variant="text"
icon={<FaSignInAlt />}
/>

<Button
label="متن دکمه"
color="secondary"
variant="solid"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="secondary"
variant="outline"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="secondary"
variant="text"
icon={<FaSignInAlt />}
/>

<Button
label="متن دکمه"
color="black"
variant="solid"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="black"
variant="outline"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="black"
variant="text"
icon={<FaSignInAlt />}
/>

<Button
label="متن دکمه"
color="white"
variant="solid"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="white"
variant="outline"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
color="white"
variant="text"
icon={<FaSignInAlt />}
/>

<Button
label="متن دکمه"
disabled={true}
color="primary"
variant="solid"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
disabled={true}
color="primary"
variant="outline"
icon={<FaSignInAlt />}
/>
<Button
label="متن دکمه"
disabled={true}
color="primary"
variant="text"
icon={<FaSignInAlt />}
/>
</div>
</>
<BaseWrapper
headerProps={{
navLinks: [
{ label: "رزرو خودرو", href: "#" },
{ label: "خدمات ما", href: "#" },
{ label: "بلاگ", href: "#" },
{ label: "درباره ما", href: "#" },
{ label: "تماس با ما", href: "#" },
],
user: {
name: "اولدوز بهاور",
avatarUrl: "https://via.placeholder.com/64",
},
}}
>
Hello!
</BaseWrapper>
);
}

Expand Down
20 changes: 20 additions & 0 deletions apps/web/src/components/BaseComponents/BaseWrapper.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
.base-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
width: 100vw;
}

.base-wrapper__content {
flex: 1;
padding: 16px;
background-color: #f5f5f5;
}

.base-wrapper__footer {
padding: 16px;
background-color: #1976d2;
color: white;
text-align: center;
font-size: 14px;
}
23 changes: 23 additions & 0 deletions apps/web/src/components/BaseComponents/BaseWrapper.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import React from "react";
import { Header, HeaderProps } from "../Header/Header";
import { Footer } from "../Footer/Footer";
import "./BaseWrapper.css";

export interface BaseWrapperProps {
/** Header configuration */
headerProps: HeaderProps;
/** Main content of the page */
children: React.ReactNode;
}

const BaseWrapper: React.FC<BaseWrapperProps> = ({ headerProps, children }) => {
return (
<div className="base-wrapper">
<Header {...headerProps} />
<main className="base-wrapper__content">{children}</main>
<Footer />
</div>
);
};

export { BaseWrapper };
52 changes: 51 additions & 1 deletion apps/web/src/components/Checkbox/Checkbox.css
Original file line number Diff line number Diff line change
@@ -1 +1,51 @@
/* Base Styles */
.checkbox {
display: flex;
align-items: center;
gap: 8px;
cursor: pointer;
}

.checkbox--disabled {
cursor: not-allowed;
opacity: 0.6;
}

.checkbox__input {
display: none;
}

.checkbox__custom {
width: 20px;
height: 20px;
border: 2px solid #1976d2;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition:
background-color 0.2s,
border-color 0.2s;
}

.checkbox__input:checked + .checkbox__custom {
background-color: #1976d2;
border-color: #1976d2;
}

.checkbox__custom::after {
content: "";
width: 12px;
height: 12px;
background-color: #fff;
border-radius: 2px;
display: none;
}

.checkbox__input:checked + .checkbox__custom::after {
display: block;
}

.checkbox__label {
font-size: 16px;
color: #333;
}
18 changes: 0 additions & 18 deletions apps/web/src/components/Checkbox/Checkbox.stories.ts

This file was deleted.

Loading
Loading