commit 25daf1844eba9352e11c60352507571c99ccac0d Author: Benjamin Toby Date: Wed Oct 16 15:20:34 2024 +0100 First Commit diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..57eb077 --- /dev/null +++ b/.gitignore @@ -0,0 +1,40 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js +.yarn/install-state.gz + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts + +# Remove test +/pages +/public diff --git a/README.md b/README.md new file mode 100644 index 0000000..a75ac52 --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +# or +pnpm dev +# or +bun dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..0565094 Binary files /dev/null and b/bun.lockb differ diff --git a/components/elements/ColorSchemeSelector.tsx b/components/elements/ColorSchemeSelector.tsx new file mode 100644 index 0000000..61ea54c --- /dev/null +++ b/components/elements/ColorSchemeSelector.tsx @@ -0,0 +1,19 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; +import Toggle, { TWUI_TOGGLE_PROPS } from "./Toggle"; + +export default function ColorSchemeSelector({ + toggleProps, + ...props +}: DetailedHTMLProps, HTMLDivElement> & { + toggleProps?: TWUI_TOGGLE_PROPS; +}) { + return ( +
+ +
+ ); +} diff --git a/components/elements/Toggle.tsx b/components/elements/Toggle.tsx new file mode 100644 index 0000000..76f993a --- /dev/null +++ b/components/elements/Toggle.tsx @@ -0,0 +1,47 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export type TWUI_TOGGLE_PROPS = DetailedHTMLProps< + HTMLAttributes, + HTMLDivElement +> & { + active?: boolean; + circleProps?: DetailedHTMLProps< + HTMLAttributes, + HTMLDivElement + >; +}; + +/** + * # Toggle Component + * @className_wrapper twui-toggle-wrapper + * @className_circle twui-toggle-circle + */ +export default function Toggle({ + circleProps, + active, + ...props +}: TWUI_TOGGLE_PROPS) { + return ( +
+
+
+ ); +} diff --git a/components/form/Form.tsx b/components/form/Form.tsx new file mode 100644 index 0000000..489c14b --- /dev/null +++ b/components/form/Form.tsx @@ -0,0 +1,17 @@ +import { DetailedHTMLProps, FormHTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Form({ + ...props +}: DetailedHTMLProps, HTMLFormElement>) { + return ( +
+ ); +} diff --git a/components/form/Input.tsx b/components/form/Input.tsx new file mode 100644 index 0000000..516f99c --- /dev/null +++ b/components/form/Input.tsx @@ -0,0 +1,17 @@ +import { DetailedHTMLProps, InputHTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Input({ + ...props +}: DetailedHTMLProps, HTMLInputElement>) { + return ( + + ); +} diff --git a/components/layout/Button.tsx b/components/layout/Button.tsx new file mode 100644 index 0000000..23465ae --- /dev/null +++ b/components/layout/Button.tsx @@ -0,0 +1,65 @@ +import { + AnchorHTMLAttributes, + ButtonHTMLAttributes, + DetailedHTMLProps, + HTMLAttributeAnchorTarget, + HTMLAttributes, +} from "react"; +import { ClassNameValue, twMerge } from "tailwind-merge"; + +export default function Button({ + href, + target, + variant, + color, + linkProps, + ...props +}: DetailedHTMLProps< + ButtonHTMLAttributes, + HTMLButtonElement +> & { + variant?: "normal" | "ghost" | "outlined"; + color?: "primary" | "secondary" | "accent"; + href?: string; + target?: HTMLAttributeAnchorTarget; + linkProps?: DetailedHTMLProps< + AnchorHTMLAttributes, + HTMLAnchorElement + >; +}) { + const finalClassName: string = (() => { + if (variant == "normal" || !variant) { + if (color == "primary" || !color) return "bg-blue-500 text-white"; + } else if (variant == "outlined") { + if (color == "primary" || !color) + return ( + "bg-transparent outline outline-1 outline-blue-500" + + " text-blue-500" + ); + } else if (variant == "ghost") { + } + + return ""; + })(); + + const buttonComponent = ( + + ); + + if (href) + return ( + + {buttonComponent} + + ); + return buttonComponent; +} diff --git a/components/layout/Container.tsx b/components/layout/Container.tsx new file mode 100644 index 0000000..98fb94b --- /dev/null +++ b/components/layout/Container.tsx @@ -0,0 +1,23 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +/** + * # Default Container + * @className twui-container + */ +export default function Container({ + ...props +}: DetailedHTMLProps, HTMLDivElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/layout/Footer.tsx b/components/layout/Footer.tsx new file mode 100644 index 0000000..9ded3db --- /dev/null +++ b/components/layout/Footer.tsx @@ -0,0 +1,21 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Footer({ + ...props +}: DetailedHTMLProps, HTMLElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/layout/H1.tsx b/components/layout/H1.tsx new file mode 100644 index 0000000..76a01bd --- /dev/null +++ b/components/layout/H1.tsx @@ -0,0 +1,12 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function H1({ + ...props +}: DetailedHTMLProps, HTMLHeadingElement>) { + return ( +

+ {props.children} +

+ ); +} diff --git a/components/layout/H2.tsx b/components/layout/H2.tsx new file mode 100644 index 0000000..26d2414 --- /dev/null +++ b/components/layout/H2.tsx @@ -0,0 +1,12 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function H2({ + ...props +}: DetailedHTMLProps, HTMLHeadingElement>) { + return ( +

+ {props.children} +

+ ); +} diff --git a/components/layout/H3.tsx b/components/layout/H3.tsx new file mode 100644 index 0000000..ab778e7 --- /dev/null +++ b/components/layout/H3.tsx @@ -0,0 +1,12 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function H3({ + ...props +}: DetailedHTMLProps, HTMLHeadingElement>) { + return ( +

+ {props.children} +

+ ); +} diff --git a/components/layout/H4.tsx b/components/layout/H4.tsx new file mode 100644 index 0000000..4783c7c --- /dev/null +++ b/components/layout/H4.tsx @@ -0,0 +1,12 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function H4({ + ...props +}: DetailedHTMLProps, HTMLHeadingElement>) { + return ( +

+ {props.children} +

+ ); +} diff --git a/components/layout/H5.tsx b/components/layout/H5.tsx new file mode 100644 index 0000000..3d6db10 --- /dev/null +++ b/components/layout/H5.tsx @@ -0,0 +1,12 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function H5({ + ...props +}: DetailedHTMLProps, HTMLHeadingElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/layout/HR.tsx b/components/layout/HR.tsx new file mode 100644 index 0000000..47c59fb --- /dev/null +++ b/components/layout/HR.tsx @@ -0,0 +1,16 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function HR({ + ...props +}: DetailedHTMLProps, HTMLHRElement>) { + return ( +
+ ); +} diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx new file mode 100644 index 0000000..a3bf9d0 --- /dev/null +++ b/components/layout/Header.tsx @@ -0,0 +1,25 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +/** + * # Default Header + * @className twui-header + */ +export default function Header({ + ...props +}: DetailedHTMLProps, HTMLElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/layout/Link.tsx b/components/layout/Link.tsx new file mode 100644 index 0000000..c99a35b --- /dev/null +++ b/components/layout/Link.tsx @@ -0,0 +1,21 @@ +import { AnchorHTMLAttributes, DetailedHTMLProps } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Link({ + ...props +}: DetailedHTMLProps< + AnchorHTMLAttributes, + HTMLAnchorElement +>) { + return ( + + {props.children} + + ); +} diff --git a/components/layout/Main.tsx b/components/layout/Main.tsx new file mode 100644 index 0000000..7495c30 --- /dev/null +++ b/components/layout/Main.tsx @@ -0,0 +1,18 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Main({ + ...props +}: DetailedHTMLProps, HTMLElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/layout/P.tsx b/components/layout/P.tsx new file mode 100644 index 0000000..6fefdc9 --- /dev/null +++ b/components/layout/P.tsx @@ -0,0 +1,12 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function P({ + ...props +}: DetailedHTMLProps, HTMLHeadingElement>) { + return ( +

+ {props.children} +

+ ); +} diff --git a/components/layout/Row.tsx b/components/layout/Row.tsx new file mode 100644 index 0000000..88951ba --- /dev/null +++ b/components/layout/Row.tsx @@ -0,0 +1,18 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Row({ + ...props +}: DetailedHTMLProps, HTMLDivElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/layout/Section.tsx b/components/layout/Section.tsx new file mode 100644 index 0000000..6259c56 --- /dev/null +++ b/components/layout/Section.tsx @@ -0,0 +1,19 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Section({ + ...props +}: DetailedHTMLProps, HTMLElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/components/layout/Span.tsx b/components/layout/Span.tsx new file mode 100644 index 0000000..ae715e8 --- /dev/null +++ b/components/layout/Span.tsx @@ -0,0 +1,12 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Span({ + ...props +}: DetailedHTMLProps, HTMLHeadingElement>) { + return ( + + {props.children} + + ); +} diff --git a/components/layout/Stack.tsx b/components/layout/Stack.tsx new file mode 100644 index 0000000..44832c9 --- /dev/null +++ b/components/layout/Stack.tsx @@ -0,0 +1,15 @@ +import { DetailedHTMLProps, HTMLAttributes } from "react"; +import { twMerge } from "tailwind-merge"; + +export default function Stack({ + ...props +}: DetailedHTMLProps, HTMLDivElement>) { + return ( +
+ {props.children} +
+ ); +} diff --git a/next.config.mjs b/next.config.mjs new file mode 100644 index 0000000..d5456a1 --- /dev/null +++ b/next.config.mjs @@ -0,0 +1,6 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, +}; + +export default nextConfig; diff --git a/package.json b/package.json new file mode 100644 index 0000000..4587cf7 --- /dev/null +++ b/package.json @@ -0,0 +1,28 @@ +{ + "name": "tailwind-ui-library", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev -p 3270", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "tailwind-merge": "^2.5.4", + "postcss": "^8", + "tailwindcss": "^3.4.14" + }, + "devDependencies": { + "next": "14.2.15", + "react": "^18", + "react-dom": "^18", + "typescript": "^5", + "@types/node": "^20", + "@types/react": "^18", + "@types/react-dom": "^18" + }, + "exports": { + ".": "./components" + } +} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..1a69fd2 --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,8 @@ +/** @type {import('postcss-load-config').Config} */ +const config = { + plugins: { + tailwindcss: {}, + }, +}; + +export default config; diff --git a/styles/globals.css b/styles/globals.css new file mode 100644 index 0000000..97fde7c --- /dev/null +++ b/styles/globals.css @@ -0,0 +1,29 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; + +:root { + --background: #ffffff; + --foreground: #171717; + --color-link: #233599; +} + +@media (prefers-color-scheme: dark) { + :root { + --background: #0a0a0a; + --foreground: #ededed; + --color-link: #233599; + } +} + +body { + color: var(--foreground); + background: var(--background); + font-family: Arial, Helvetica, sans-serif; +} + +@layer utilities { + .text-balance { + text-wrap: balance; + } +} diff --git a/tailwind.config.ts b/tailwind.config.ts new file mode 100644 index 0000000..caafc4b --- /dev/null +++ b/tailwind.config.ts @@ -0,0 +1,20 @@ +import type { Config } from "tailwindcss"; + +const config: Config = { + content: [ + "./pages/**/*.{js,ts,jsx,tsx,mdx}", + "./components/**/*.{js,ts,jsx,tsx,mdx}", + "./app/**/*.{js,ts,jsx,tsx,mdx}", + ], + theme: { + extend: { + colors: { + background: "var(--background)", + foreground: "var(--foreground)", + link: "var(--link)", + }, + }, + }, + plugins: [], +}; +export default config; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..649790e --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,21 @@ +{ + "compilerOptions": { + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "bundler", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "paths": { + "@/*": ["./*"] + } + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}