From 4bb7e0d6b0d9a43e2263c91843f034bb4d00185a Mon Sep 17 00:00:00 2001 From: Yash Sehgal Date: Sat, 2 Mar 2024 17:14:00 +0530 Subject: [PATCH] Adding docs for getting started and all components (#3) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 💄 Add proper layout for gradient in bg * 🛠️ Change prettier code format flow in scripts * 💄 Add code block component for docs * 💄 Add steps for project setup and config * 🎨 Code format using prettier * 💄 Docs layout <> Button code docs v1 * 🎨 Prettier code format * 🔥 Remove prettier format after package/registry updates * 🎨 Prettier code format * 🚸 Improve project setup flow --- .../(component-docs)/button/page.mdx | 9 + app/components/(component-docs)/layout.tsx | 14 + app/components/common/components-list.tsx | 18 + app/components/page.tsx | 34 + app/getting-started/page.tsx | 9 + app/globals.css | 2 +- app/layout.tsx | 14 +- app/page.tsx | 3 +- common/content.ts | 5 + components/layouts/page-header.tsx | 18 + components/sections/landing-hero-section.tsx | 38 +- components/sections/setup-section.tsx | 132 ++ components/sections/website-navigation.tsx | 9 +- components/ui/button.tsx | 2 +- components/website/code-block.tsx | 68 + components/website/component-block.tsx | 47 + components/website/component-docs-header.tsx | 18 + components/{ui => website}/navbar-logo.tsx | 0 generators/update-setup-code.ts | 85 +- helpers/copy-to-clipboard.ts | 7 + mdx-components.tsx | 7 + next.config.mjs | 17 +- package.json | 12 +- package/registry/setup-code.json | 1 - package/registry/setup-code.tsx | 26 + tailwind.config.ts | 8 +- yarn.lock | 1894 +++++++++++++---- 27 files changed, 2033 insertions(+), 464 deletions(-) create mode 100644 app/components/(component-docs)/button/page.mdx create mode 100644 app/components/(component-docs)/layout.tsx create mode 100644 app/components/common/components-list.tsx create mode 100644 app/components/page.tsx create mode 100644 app/getting-started/page.tsx create mode 100644 common/content.ts create mode 100644 components/layouts/page-header.tsx create mode 100644 components/sections/setup-section.tsx create mode 100644 components/website/code-block.tsx create mode 100644 components/website/component-block.tsx create mode 100644 components/website/component-docs-header.tsx rename components/{ui => website}/navbar-logo.tsx (100%) create mode 100644 helpers/copy-to-clipboard.ts create mode 100644 mdx-components.tsx delete mode 100644 package/registry/setup-code.json create mode 100644 package/registry/setup-code.tsx diff --git a/app/components/(component-docs)/button/page.mdx b/app/components/(component-docs)/button/page.mdx new file mode 100644 index 0000000..faeedad --- /dev/null +++ b/app/components/(component-docs)/button/page.mdx @@ -0,0 +1,9 @@ +import ComponentDocsHeader from '@/components/website/component-docs-header'; +import { SETUP_CODE } from '@/package/registry/setup-code.tsx'; +import { CodeBlock } from '@/components/website/code-block.tsx'; + + + + + {SETUP_CODE['button'].code} + diff --git a/app/components/(component-docs)/layout.tsx b/app/components/(component-docs)/layout.tsx new file mode 100644 index 0000000..6bfebeb --- /dev/null +++ b/app/components/(component-docs)/layout.tsx @@ -0,0 +1,14 @@ +import { ResponsiveControl } from '@/components/layouts/responsive-control'; +import { ReactNode } from 'react'; + +export default function ComponentDocsLayout({ + children, +}: { + children: ReactNode; +}) { + return ( +
+ {children} +
+ ); +} diff --git a/app/components/common/components-list.tsx b/app/components/common/components-list.tsx new file mode 100644 index 0000000..39d294d --- /dev/null +++ b/app/components/common/components-list.tsx @@ -0,0 +1,18 @@ +import { Button } from '@/components/ui/button'; +import { ReactNode } from 'react'; + +export type ComponentListItemType = { + name: string; + description: string; + path: string; + render: ReactNode; +}; +export const ComponentsList: ComponentListItemType[] = [ + { + name: 'Button', + description: + 'A framer-motion supported button with size and design variants.', + path: '/components/button', + render: , + }, +]; diff --git a/app/components/page.tsx b/app/components/page.tsx new file mode 100644 index 0000000..5914280 --- /dev/null +++ b/app/components/page.tsx @@ -0,0 +1,34 @@ +import { PageHeader } from '@/components/layouts/page-header'; +import { ResponsiveControl } from '@/components/layouts/responsive-control'; +import { ComponentBlock } from '@/components/website/component-block'; +import { + ComponentListItemType, + ComponentsList, +} from './common/components-list'; + +export default function ComponentsPage() { + return ( +
+ + +

{'Components'}

+ + +
+ + {ComponentsList.map( + (component: ComponentListItemType, index: number) => { + return ( + + ); + }, + )} + +
+
+ ); +} diff --git a/app/getting-started/page.tsx b/app/getting-started/page.tsx new file mode 100644 index 0000000..3caf33b --- /dev/null +++ b/app/getting-started/page.tsx @@ -0,0 +1,9 @@ +import { SetupSection } from '@/components/sections/setup-section'; + +export default async function GettingStarted() { + return ( +
+ +
+ ); +} diff --git a/app/globals.css b/app/globals.css index d47d1f6..cd0d96e 100644 --- a/app/globals.css +++ b/app/globals.css @@ -8,7 +8,7 @@ body { } html { - @apply bg-black; + @apply bg-neutral-900; } body { diff --git a/app/layout.tsx b/app/layout.tsx index 890d8ed..4cfdb10 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -5,6 +5,7 @@ import { CSPostHogProvider } from '@/services/posthog/provider'; import WebsiteNavigation from '@/components/sections/website-navigation'; import FullPageGridDesign from '@/components/layouts/full-page-grid-design'; import { TailwindIndicator } from '@/components/dev/tailwind-breakpoint-indicator'; +import { ResponsiveControl } from '@/components/layouts/responsive-control'; const inter = Inter({ subsets: ['latin'], @@ -28,7 +29,18 @@ export default function RootLayout({
-
+
+ + {/*
*/} +
+
+
+
+
+
+
+ {/*
*/} + {children}
diff --git a/app/page.tsx b/app/page.tsx index c309165..e89d3ff 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,8 +1,9 @@ import LandingHeroSection from '@/components/sections/landing-hero-section'; +import { SetupSection } from '@/components/sections/setup-section'; export default function Home(): JSX.Element { return ( -
+
); diff --git a/common/content.ts b/common/content.ts new file mode 100644 index 0000000..487256d --- /dev/null +++ b/common/content.ts @@ -0,0 +1,5 @@ +export const SetupSectionContent = { + headline: 'Project Setup and Configurations', + description: + "In order to use the components and cookies you must have the following dependencies and configs in your project. Here's a step-by-step setup guide.", +}; diff --git a/components/layouts/page-header.tsx b/components/layouts/page-header.tsx new file mode 100644 index 0000000..8199c93 --- /dev/null +++ b/components/layouts/page-header.tsx @@ -0,0 +1,18 @@ +import { cn } from '@/helpers/utils'; +import { forwardRef } from 'react'; + +export interface PageHeaderProps extends React.HTMLAttributes {} + +export const PageHeader = forwardRef( + ({ className, ...args }, ref) => { + return ( +
+ ); + }, +); + +PageHeader.displayName = 'PageHeader'; diff --git a/components/sections/landing-hero-section.tsx b/components/sections/landing-hero-section.tsx index 2fd7ce8..e44de0b 100644 --- a/components/sections/landing-hero-section.tsx +++ b/components/sections/landing-hero-section.tsx @@ -1,9 +1,11 @@ +import Link from 'next/link'; +import { PageHeader } from '../layouts/page-header'; import { ResponsiveControl } from '../layouts/responsive-control'; import { Button } from '../ui/button'; export default function LandingHeroSection() { return ( -
+

Build your UI fast
@@ -21,25 +23,25 @@ export default function LandingHeroSection() {

- - - + + + + + + +
-
-
-
-
-
-
-
-
- + ); } diff --git a/components/sections/setup-section.tsx b/components/sections/setup-section.tsx new file mode 100644 index 0000000..226ae7a --- /dev/null +++ b/components/sections/setup-section.tsx @@ -0,0 +1,132 @@ +import { SetupSectionContent } from '@/common/content'; +import { ResponsiveControl } from '../layouts/responsive-control'; +import { forwardRef } from 'react'; +import { cn } from '@/helpers/utils'; +import { PageHeader } from '../layouts/page-header'; +import { Button } from '../ui/button'; +import { CodeBlock } from '../website/code-block'; +import { SETUP_CODE } from '@/package/registry/setup-code'; +import Link from 'next/link'; + +type SetupStepType = { + title: string; + description: string; + action?: { + name: string; + path: string; + }; + code?: + | string + | { + content: string; + fileName: string; + }; +}; + +export interface SetupSectionProps + extends React.HTMLAttributes {} + +export interface SetupStepContainerProps + extends React.HTMLAttributes { + stepContent: SetupStepType; + stepIndex: number; +} + +const SetupData: SetupStepType[] = [ + { + title: 'Have a basic NextJS + Typescript + Tailwind project setup', + description: + 'The setup is going to require a NextJS app with Typescript & Tailwind. Make sure you have a simple project setup, If you have it already, you can go to the next step.', + code: `# using npm \nnpx create-next-app app-name \n\n# using yarn \nyarn create next-app app-name`, + }, + { + title: 'Installing dependencies', + description: + 'All the cookies, components and required utilities are using various npm dependencies. Install them as your first step to get started.', + code: 'yarn add lucide-react framer-motion clsx tailwind-merge', + }, + { + title: 'Add configuration for animations', + description: + 'The configurations are going to provide basic animations to your components. You can customize and add custom animations in this code.', + code: { + content: SETUP_CODE['animation-config'].code, + fileName: SETUP_CODE['animation-config'].registerAt, + }, + }, + { + title: 'Add cn() as to helpers', + description: + 'Components are using cn() to combine the classNames, supporting tailwind-merge. All thanks to shadcn for writing this.', + code: { + content: SETUP_CODE.utils.code, + fileName: SETUP_CODE.utils.registerAt, + }, + }, +]; + +export const SetupSection = forwardRef( + ({ className, ...args }, ref) => { + return ( +
+ + +

+ {SetupSectionContent.headline} +

+
+

+ {SetupSectionContent.description} +

+
+
+ + + +
+ + +
+ + {SetupData.map((setup, index) => { + return ( + + ); + })} + +
+
+ ); + }, +); + +SetupSection.displayName = 'SetupSection'; + +export const SetupStepContainer = forwardRef< + HTMLDivElement, + SetupStepContainerProps +>(({ className, stepContent, stepIndex, ...args }, ref) => { + return ( +
+
+
+

{stepContent.title}

+

{stepContent.description}

+
+ {typeof stepContent.code === 'string' ? ( + {stepContent.code} + ) : ( + + {stepContent.code?.content} + + )} +
+
+ ); +}); + +SetupStepContainer.displayName = 'SetupStepContainer'; diff --git a/components/sections/website-navigation.tsx b/components/sections/website-navigation.tsx index 9df83a4..a07440d 100644 --- a/components/sections/website-navigation.tsx +++ b/components/sections/website-navigation.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; import { ResponsiveControl } from '../layouts/responsive-control'; -import { NavbarLogo } from '../ui/navbar-logo'; +import { NavbarLogo } from '../website/navbar-logo'; import { Button } from '../ui/button'; type NavbarOptionType = { path: string; name: string }; @@ -12,7 +12,7 @@ const NavbarOptions: NavbarOptionType[] = [ export default function WebsiteNavigation() { return ( -