Repository: logging-studio/retroui Branch: main Commit: df2d6e9f895d Files: 367 Total size: 735.5 KB Directory structure: gitextract_ggy5d18g/ ├── .eslintrc.json ├── .github/ │ ├── FUNDING.yml │ └── workflows/ │ └── deploy.yml ├── .gitignore ├── .prettierrc ├── .vscode/ │ └── settings.json ├── CONTRIBUTING.md ├── Dockerfile ├── LICENCE.md ├── README.md ├── app/ │ ├── (docs)/ │ │ └── docs/ │ │ ├── [[...slug]]/ │ │ │ └── page.tsx │ │ └── layout.tsx │ ├── (marketing)/ │ │ ├── blogs/ │ │ │ ├── [slug]/ │ │ │ │ └── page.tsx │ │ │ ├── layout.tsx │ │ │ └── page.tsx │ │ ├── page.tsx │ │ ├── showcase/ │ │ │ └── page.tsx │ │ └── themes/ │ │ └── page.tsx │ ├── (sink)/ │ │ └── demo/ │ │ └── components/ │ │ └── page.tsx │ ├── actions/ │ │ └── newsletter.ts │ ├── global.css │ ├── layout.tsx │ ├── robots.ts │ ├── rss.xml/ │ │ └── route.ts │ └── sitemap.ts ├── bun.lockb ├── components/ │ ├── CodeBlock.tsx │ ├── ComponentInstall.tsx │ ├── ComponentShowcase.tsx │ ├── ComponentSource.tsx │ ├── CopyTheme.tsx │ ├── HamburgerMenu.tsx │ ├── JoinNewsletter.tsx │ ├── MDX.tsx │ ├── RichTextCodeBlock.tsx │ ├── RichTextConverter.tsx │ ├── SideNav.tsx │ ├── TableOfContents.tsx │ ├── Testimonial.tsx │ ├── ThemeWrapper.tsx │ ├── TopNav.tsx │ ├── WorksWithSection.tsx │ ├── footer.tsx │ ├── index.ts │ └── retroui/ │ ├── Accordion.tsx │ ├── Alert.tsx │ ├── Avatar.tsx │ ├── Badge.tsx │ ├── BasicCard.tsx │ ├── Breadcrumb.tsx │ ├── Button.tsx │ ├── Calendar.tsx │ ├── Card.tsx │ ├── Carousel.tsx │ ├── Checkbox.tsx │ ├── Command.tsx │ ├── CommandDisplay.tsx │ ├── ContextMenu.tsx │ ├── Dialog.tsx │ ├── Drawer.tsx │ ├── Empty.tsx │ ├── IconButton.tsx │ ├── Input.tsx │ ├── Label.tsx │ ├── Loader.tsx │ ├── Login.tsx │ ├── Menu.tsx │ ├── Popover.tsx │ ├── ProductCard.tsx │ ├── Progress.tsx │ ├── Radio.tsx │ ├── Select.tsx │ ├── Slider.tsx │ ├── Sonner.tsx │ ├── Switch.tsx │ ├── Tab.tsx │ ├── Table.tsx │ ├── TableOfContents.tsx │ ├── Text.tsx │ ├── Textarea.tsx │ ├── Toggle.tsx │ ├── ToggleGroup.tsx │ ├── Tooltip.tsx │ ├── charts/ │ │ ├── AreaChart.tsx │ │ ├── BarChart.tsx │ │ ├── LineChart.tsx │ │ └── PieChart.tsx │ └── index.ts ├── config/ │ ├── components.ts │ ├── index.ts │ ├── navigation.ts │ └── theme.ts ├── content/ │ ├── blogs/ │ │ ├── retroui-with-payload-cms.mdx │ │ ├── top-10-nextjs-ui-library.mdx │ │ ├── top-5-react-ui-library.mdx │ │ └── why-neobrutalism-is-perfect-for-modern-websites.mdx │ └── docs/ │ ├── charts/ │ │ ├── area-chart.mdx │ │ ├── bar-chart.mdx │ │ ├── line-chart.mdx │ │ └── pie-chart.mdx │ ├── components/ │ │ ├── accordion.mdx │ │ ├── alert.mdx │ │ ├── avatar.mdx │ │ ├── badge.mdx │ │ ├── breadcrumb.mdx │ │ ├── button.mdx │ │ ├── calendar.mdx │ │ ├── card.mdx │ │ ├── carousel.mdx │ │ ├── checkbox.mdx │ │ ├── command.mdx │ │ ├── context-menu.mdx │ │ ├── dialog.mdx │ │ ├── drawer.mdx │ │ ├── empty.mdx │ │ ├── input.mdx │ │ ├── label.mdx │ │ ├── loader.mdx │ │ ├── menu.mdx │ │ ├── popover.mdx │ │ ├── progress.mdx │ │ ├── radio.mdx │ │ ├── select.mdx │ │ ├── slider.mdx │ │ ├── sonner.mdx │ │ ├── switch.mdx │ │ ├── tab.mdx │ │ ├── table.mdx │ │ ├── text.mdx │ │ ├── textarea.mdx │ │ ├── toc.mdx │ │ ├── toggle-group.mdx │ │ ├── toggle.mdx │ │ └── tooltip.mdx │ ├── index.mdx │ ├── install/ │ │ ├── index.mdx │ │ ├── nextjs.mdx │ │ └── vite.mdx │ └── utils/ │ └── cn.mdx ├── contentlayer.config.ts ├── contexts/ │ └── ThemeContext.tsx ├── lib/ │ ├── payload.ts │ ├── registry.ts │ ├── toc.ts │ └── utils.ts ├── next.config.mjs ├── package.json ├── postcss.config.mjs ├── preview/ │ ├── blocks/ │ │ ├── course-card.tsx │ │ ├── sign-in.tsx │ │ └── team-members.tsx │ ├── charts/ │ │ ├── area-chart-style-default.tsx │ │ ├── area-chart-style-minimal.tsx │ │ ├── area-chart-style-multiple.tsx │ │ ├── area-chart-style-stacked.tsx │ │ ├── bar-chart-style-default.tsx │ │ ├── bar-chart-style-grouped.tsx │ │ ├── bar-chart-style-horizontal.tsx │ │ ├── bar-chart-style-multiple.tsx │ │ ├── bar-chart-style-stacked.tsx │ │ ├── line-chart-style-curved.tsx │ │ ├── line-chart-style-default.tsx │ │ ├── line-chart-style-dots.tsx │ │ ├── line-chart-style-multiple.tsx │ │ ├── pie-chart-style-default.tsx │ │ ├── pie-chart-style-donut.tsx │ │ └── pie-chart-style-small.tsx │ └── components/ │ ├── accordion-style-default.tsx │ ├── alert-style-all-status.tsx │ ├── alert-style-default.tsx │ ├── alert-style-solid.tsx │ ├── alert-style-with-icon.tsx │ ├── avatar-style-circle-fallbacks.tsx │ ├── avatar-style-circle-sizes.tsx │ ├── avatar-style-circle.tsx │ ├── badge-style-default.tsx │ ├── badge-style-rounded.tsx │ ├── badge-style-sizes.tsx │ ├── badge-style-variants.tsx │ ├── breadcrumb-custom-separator.tsx │ ├── breadcrumb-link-component.tsx │ ├── breadcrumb-style-collapsed.tsx │ ├── breadcrumb-style-default.tsx │ ├── button-style-default.tsx │ ├── button-style-icon.tsx │ ├── button-style-link.tsx │ ├── button-style-outline.tsx │ ├── button-style-secondary.tsx │ ├── button-style-with-icon.tsx │ ├── calendar-style-default.tsx │ ├── card-style-commerce.tsx │ ├── card-style-default.tsx │ ├── card-style-testimonial.tsx │ ├── carousel-style-default.tsx │ ├── carousel-style-sizes.tsx │ ├── carousel-style-vertical.tsx │ ├── checkbox-style-default.tsx │ ├── checkbox-style-sizes.tsx │ ├── checkbox-style-variants.tsx │ ├── command-style-default.tsx │ ├── command-style-dialog.tsx │ ├── context-menu-style-default.tsx │ ├── dialog-style-default.tsx │ ├── dialog-style-width-variant.tsx │ ├── dialog-style-with-footer.tsx │ ├── dialog-style-with-form.tsx │ ├── drawer-style-default.tsx │ ├── drawer-style-right-direction.tsx │ ├── empty-style-custom-everything.tsx │ ├── empty-style-custom-icon.tsx │ ├── empty-style-default.tsx │ ├── empty-style-table.tsx │ ├── input-style-default.tsx │ ├── input-style-error.tsx │ ├── input-style-with-label.tsx │ ├── label-style-default.tsx │ ├── label.tsx │ ├── loader-style-custom.tsx │ ├── loader-style-default.tsx │ ├── loader-style-outline.tsx │ ├── loader-style-sizes.tsx │ ├── loader-style-solid.tsx │ ├── menu-style-default.tsx │ ├── popover-style-default-shadow.tsx │ ├── popover-style-default.tsx │ ├── progress-style-default.tsx │ ├── radio-style-default.tsx │ ├── radio-style-sizes.tsx │ ├── radio-style-variants.tsx │ ├── retro-player.tsx │ ├── select-style-default.tsx │ ├── slider-style-default.tsx │ ├── sonner-style-colored-status.tsx │ ├── sonner-style-default.tsx │ ├── sonner-style-error.tsx │ ├── sonner-style-status.tsx │ ├── switch-style-default.tsx │ ├── switch-style-disabled.tsx │ ├── tab-style-default.tsx │ ├── table-style-default.tsx │ ├── table-with-checkbox.tsx │ ├── table-with-sticky-header.tsx │ ├── text-headings.tsx │ ├── textarea-style-default.tsx │ ├── toc-style-default.tsx │ ├── toc-style-depth.tsx │ ├── toc-style-manual.tsx │ ├── toggle-group-style-default.tsx │ ├── toggle-group-style-outline-muted.tsx │ ├── toggle-group-style-outlined.tsx │ ├── toggle-group-style-solid.tsx │ ├── toggle-style-default.tsx │ ├── toggle-style-outline-muted.tsx │ ├── toggle-style-outlined.tsx │ ├── toggle-style-solid.tsx │ ├── tooltip-style-default.tsx │ ├── tooltip-style-primary.tsx │ ├── tooltip-style-solid.tsx │ └── typography-p.tsx ├── public/ │ └── r/ │ ├── accordion-style-default.json │ ├── accordion.json │ ├── alert-style-all-status.json │ ├── alert-style-default.json │ ├── alert-style-solid.json │ ├── alert-style-with-icon.json │ ├── alert.json │ ├── area-chart.json │ ├── avatar-style-circle-sizes.json │ ├── avatar-style-circle.json │ ├── avatar-style-fallbacks.json │ ├── avatar.json │ ├── badge-style-default.json │ ├── badge-style-sizes.json │ ├── badge-style-variants.json │ ├── badge.json │ ├── bar-chart.json │ ├── breadcrumb.json │ ├── button-style-default.json │ ├── button-style-link.json │ ├── button-style-outline.json │ ├── button-style-secondary.json │ ├── button-style-with-icon.json │ ├── button.json │ ├── calendar.json │ ├── card-style-commerce.json │ ├── card-style-default.json │ ├── card-style-testimonial.json │ ├── card.json │ ├── carousel.json │ ├── checkbox-style-default.json │ ├── checkbox-style-toggle.json │ ├── checkbox.json │ ├── command.json │ ├── context-menu.json │ ├── dialog-style-default.json │ ├── dialog-style-width-variant.json │ ├── dialog-style-with-footer.json │ ├── dialog-style-with-form.json │ ├── dialog.json │ ├── drawer.json │ ├── input-style-default.json │ ├── input-style-error.json │ ├── input-style-with-label.json │ ├── input.json │ ├── label.json │ ├── line-chart.json │ ├── loader.json │ ├── menu-style-default.json │ ├── menu.json │ ├── pie-chart.json │ ├── popover-style-default-shadow.json │ ├── popover-style-default.json │ ├── popover-style-primary-shadow.json │ ├── popover-style-primary.json │ ├── popover.json │ ├── progress-style-default.json │ ├── progress.json │ ├── radio-style-default.json │ ├── radio-style-sizes.json │ ├── radio-style-variants.json │ ├── radio.json │ ├── registry.json │ ├── select-style-default.json │ ├── select.json │ ├── slider.json │ ├── sonner-style-default.json │ ├── sonner-style-error.json │ ├── sonner-style-rich-colors.json │ ├── sonner-style-warning.json │ ├── sonner.json │ ├── switch-style-default.json │ ├── switch-style-disabled.json │ ├── switch.json │ ├── tab-style-default.json │ ├── tab.json │ ├── table-style-default.json │ ├── table-with-checkbox.json │ ├── table-with-sticky-header.json │ ├── table.json │ ├── text-headings.json │ ├── text.json │ ├── textarea-style-default.json │ ├── textarea.json │ ├── toc.json │ ├── toggle-group-outlined.json │ ├── toggle-group-style-default.json │ ├── toggle-group-style-outline-muted.json │ ├── toggle-group-style-outlined.json │ ├── toggle-group-style-solid.json │ ├── toggle-group.json │ ├── toggle-style-default.json │ ├── toggle-style-outline-muted.json │ ├── toggle-style-outlined.json │ ├── toggle-style-solid.json │ ├── toggle.json │ ├── tooltip-style-default.json │ ├── tooltip-style-primary.json │ ├── tooltip-style-solid.json │ ├── tooltip.json │ ├── typography-p.json │ └── utils.json ├── registry.json ├── showcase.json ├── tasks.md ├── tsconfig.json └── types/ ├── index.d.ts └── unist.d.ts ================================================ FILE CONTENTS ================================================ ================================================ FILE: .eslintrc.json ================================================ { "extends": "next/core-web-vitals" } ================================================ FILE: .github/FUNDING.yml ================================================ github: Logging-Studio ================================================ FILE: .github/workflows/deploy.yml ================================================ name: "Deploy to VPS" on: release: types: - published jobs: build-and-deploy: runs-on: ubuntu-latest steps: - name: Check out the repository uses: actions/checkout@v4 - name: Setup Docker Buildx uses: docker/setup-buildx-action@v3 - name: DockerHub login uses: docker/login-action@v3 with: username: ${{ secrets.DOCKERHUB_USERNAME }} password: ${{ secrets.DOCKERHUB_TOKEN }} - name: Build and push to DockerHub run: | docker build -t devarifhossain/retroui:1.2.0 ./ docker push devarifhossain/retroui:1.2.0 # - name: Set up SSH # uses: webfactory/ssh-agent@v0.9.0 # with: # ssh-private-key: ${{ secrets.SSH_PRIVATE_KEY }} # - name: Add VPS to known_hosts # run: | # ssh-keyscan -H ${{ secrets.VPS_HOST }} >> ~/.ssh/known_hosts # - name: Deploy to VPS # run: | # ssh ${{ secrets.VPS_USERNAME }}@${{ secrets.VPS_HOST }} "cd /root/retroui && git pull && docker compose -f ./infra/docker-compose.prod.yml up web --build -d" ================================================ FILE: .gitignore ================================================ # 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 # contentlayer .contentlayer package-lock.json .env ================================================ FILE: .prettierrc ================================================ { "tabWidth": 2, "semi": true, "printWidth": 80 } ================================================ FILE: .vscode/settings.json ================================================ { "cSpell.words": ["clsx", "rehype", "retroui"], "tailwindCSS.experimental.classRegex": [ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"], ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"] ], "yaml.schemas": { "https://json.schemastore.org/github-workflow.json": "file:///Users/arifhossain/Projects/ptm/retro-ui/.github/workflows/deploy.yml" }, } ================================================ FILE: CONTRIBUTING.md ================================================ # Contributing to RetroUI Thank you for your interest in contributing to RetroUI 🙏. I hope this guide to help you get started. ## Getting Started 1. Fork this repository 2. Clone the forked repository to your local machine. ```bash git clone https://github.com//retroui.git ``` 3. Navigate to the project directory ```bash cd retroui ``` 4. Create a new branch ```bash git switch -c new-branch-name ``` 5. install dependencies ```bash pnpm i ``` 6. Run the project ```bash pnpm dev ``` ## Adding a New Component 1. Create the main component in `/components/retroui/NewComponent/NewComponent.tsx` ```ts export function NewComponent() { return
This is your component.
; } ``` 2. Export your component in `/components/retroui/NewComponent/index.ts` and `/components/retroui/index.ts` ```ts export * from "./NewComponent"; ``` 3. Create a preview to showcase your component in `preview/components/new-component.tsx` ```typescript export default function NewComponentStyle() { return ( Error ); } ``` 4. Add your component preview to the list of components registry in `config/components.ts` ```typescript export const componentConfig = { registry: { ... "new-component": { name: "new-component", filePath: "preview/components/new-component.tsx", preview: lazy(() => import("@/preview/components/new-component")), }, }, }; ``` 5. Add documentation for your component in `content/docs/components/...mdx` ```md --- title: Badge description: The component that looks like a button but isn't clickable! lastUpdated: 08 Oct, 2024 --- ... ### New Component // name of the component in the registry ``` ## Ask for Help For any help or questions, please open a new GitHub issue. ================================================ FILE: Dockerfile ================================================ FROM node:22.7.0-slim WORKDIR /retroui COPY ./package.json ./pnpm-lock.yaml ./ RUN npm i pnpm -g \ && pnpm install --frozen-lockfile --no-cache \ && pnpm store prune COPY . . RUN pnpm run build EXPOSE 3000 CMD [ "pnpm", "run", "start" ] ================================================ FILE: LICENCE.md ================================================ MIT License Copyright (c) 2024 Arif Hossain Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Retro UI RetroUI is a retro-styled Tailwind CSS component library for modern web apps. ![RetroUI banner](./public/banner.png) ### [Why Another UI Library?](https://www.youtube.com/watch?v=7goHwy6k3gU) ### [Documentation](https://retroui.dev/docs) ### [Contributing Guide](./CONTRIBUTING.md) ## License [MIT](./LICENCE.md)
## Supported By Vercel OSS Program ================================================ FILE: app/(docs)/docs/[[...slug]]/page.tsx ================================================ import React from "react"; import { allDocs } from "contentlayer/generated"; import { notFound } from "next/navigation"; import { format } from "date-fns"; import MDX from "@/components/MDX"; import { Text } from "@/components/retroui/Text"; import { Metadata } from "next"; import { MoveUpRightIcon } from "lucide-react"; import { generateToc } from "@/lib/toc"; import TableOfContents from "@/components/TableOfContents"; interface IProps { params: { slug: string[] }; } function getDocParams({ params }: IProps) { const slug = `/docs${params.slug ? `/${params.slug.join("/")}` : ""}`; const doc = allDocs.find((doc) => doc.url === slug); if (!doc) { return null; } return doc; } export async function generateMetadata({ params }: IProps): Promise { const doc = getDocParams({ params }); if (!doc) { return { title: "Not Found | Retro UI", }; } return { title: `${doc.title} | Retro UI`, description: doc.description, }; } export default async function page({ params }: IProps) { const doc = getDocParams({ params }); if (!doc) { return notFound(); } const toc = await generateToc(doc.body.raw); return ( <> {/* Main Content */}
{doc.title}

{doc.description}

{doc.links && (
{doc.links?.api_reference && ( API Reference )} {doc.links && doc.links?.source && ( Source )}
)}

Last Updated: {format(doc.lastUpdated, "dd MMM, yyy")}

{/* Table of Contents */}
); } ================================================ FILE: app/(docs)/docs/layout.tsx ================================================ import SideNav from "@/components/SideNav"; import { Metadata } from "next"; export const metadata: Metadata = { title: "Getting Started | RetroUI", }; export default function ComponentLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (
{/* Sidebar */}
{children}
); } ================================================ FILE: app/(marketing)/blogs/[slug]/page.tsx ================================================ import React from "react"; import { notFound } from "next/navigation"; import { format } from "date-fns"; import { Avatar, Badge, Button, Text } from "@/components/retroui"; import { Metadata } from "next"; import Image from "next/image"; import Link from "next/link"; import { RichText } from "@payloadcms/richtext-lexical/react"; import { JSXConverters } from "@/components/RichTextConverter"; interface IProps { params: { slug: string[] }; } type Post = { id: number, title: string, slug: string, publishedAt: string, content: any, excerpt: string, tags: { name: string, slug: string }[], featuredImage: { url: string, alt: string }, } async function getBlogParams({ params }: IProps) { const res = await fetch(`https://cms.retroui.dev/api/posts/slug/${params.slug}`, { method: 'GET', credentials: 'include', next: { revalidate: 60, }, }) const post = await res.json() return post; } export async function generateMetadata({ params }: IProps): Promise { const blog: Post = await getBlogParams({ params }); if (!blog) { return { title: "Not Found | Retro UI", }; } return { title: `${blog.title} | RetroUI Blogs`, description: blog.excerpt, alternates: { canonical: `https://www.retroui.dev/blogs/${blog.slug}`, }, openGraph: { type: "article", images: blog.featuredImage.url, title: `${blog.title} | RetroUI Blogs`, publishedTime: blog.publishedAt, authors: ["Arif Hossain"], }, }; } export default async function page({ params }: IProps) { const blog: Post | null = await getBlogParams({ params }); if (!blog) { return notFound(); } return (
{format(new Date(blog.publishedAt), "dd, MMMM yyyy")} |
{blog.tags.map((tag) => ( {tag.name} ))}
{blog.title} {blog.excerpt} {blog.featuredImage.alt}
AH
Arif Hossain @ariflogs
); } ================================================ FILE: app/(marketing)/blogs/layout.tsx ================================================ import { Metadata } from "next"; import Footer from "@/components/footer"; export const metadata: Metadata = { title: "RetroUI Blogs", }; export default function BlogsLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return ( <>
{children}