chore: wip

MFarabi619 · Aug 17, 2024 · f294627 · f294627
1 parent aae555e
commit f294627
Show file tree

Hide file tree

Showing 15 changed files with 270 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -107,6 +107,7 @@
     "chromatic": "^11.5.5",
     "commitizen": "^4.3.0",
     "commitlint": "^19.3.0",
+    "concurrently": "^8.2.2",
     "eslint": "8.57.0",
     "eslint-plugin-format": "^0.1.2",
     "eslint-plugin-react-hooks": "^4.6.2",
@@ -118,8 +119,10 @@
     "playwright": "^1.45.1",
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",
+    "react-icons": "^5.2.1",
     "react-syntax-highlighter": "^15.5.0",
     "semantic-release": "^24.0.0",
+    "sharp": "^0.33.4",
     "storybook": "^8.2.2",
     "storybook-dark-mode": "^4.0.2",
     "tailwindcss": "^3.4.4",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/collections/Documents.ts → src/collections/documents.ts b/src/collections/Documents.ts → src/collections/documents.ts
diff --git a/src/collections/features.ts b/src/collections/features.ts
@@ -0,0 +1,20 @@
+import * as lucideIcons from 'react-icons/lu'
+import type { CollectionConfig } from 'payload'
+
+export const Features: CollectionConfig = {
+  slug: 'features',
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      label: 'Title',
+      required: true,
+    },
+    {
+      name: 'description',
+      type: 'text',
+      label: 'Description',
+      required: true,
+    },
+  ],
+}
diff --git a/src/collections/Media.ts → src/collections/media.ts b/src/collections/Media.ts → src/collections/media.ts
diff --git a/src/collections/Users.ts → src/collections/users.ts b/src/collections/Users.ts → src/collections/users.ts
diff --git a/src/components/sections/home-page/features.stories.tsx b/src/components/sections/home-page/features.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { Features } from '@/components/sections/home-page/features'
-import { FEATURES_CONTENT } from '@/content/web/features'
+import { FEATURES_CONTENT } from '@/content/home-page/features'
 
 const meta = {
   title: 'Stack Builder Website/Features Section',

diff --git a/src/components/sections/home-page/features.tsx b/src/components/sections/home-page/features.tsx
@@ -1,10 +1,10 @@
 import { cn } from '@/lib/utils'
-import { FEATURES_CONTENT } from '@/content/web/features'
+import { FEATURES_CONTENT } from '@/content/home-page/features'
 
 export function Features() {
   return (
     <section className="md:h-screen flex justify-center items-center">
-      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4  relative z-10 py-10 max-w-7xl mx-auto">
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 relative z-10 py-10 max-w-7xl mx-auto">
         {FEATURES_CONTENT.map((feature: { title: string, description: string, icon: React.ReactNode }, index: number) => (
           <Feature key={feature.title} {...feature} index={index} />
         ))}
@@ -38,8 +38,10 @@ function Feature({
       {index >= 4 && (
         <div className="opacity-0 group-hover/feature:opacity-100 transition duration-200 absolute inset-0 h-full w-full bg-gradient-to-b from-neutral-100 dark:from-neutral-800 to-transparent pointer-events-none" />
       )}
-      <div className="mb-4 relative z-10 px-10 text-neutral-600 dark:text-neutral-400">
-        {icon}
+      <div className="mb-4 relative flex z-10 px-10 text-neutral-600 dark:text-neutral-400">
+        <div className="scale-150">
+          {icon}
+        </div>
       </div>
       <div className="text-lg font-bold mb-2 relative z-10 px-10">
         <div className="absolute left-0 inset-y-0 h-6 group-hover/feature:h-8 w-1 rounded-tr-full rounded-br-full bg-neutral-300 dark:bg-neutral-700 group-hover/feature:bg-violet-700 transition-all duration-200 origin-center" />

diff --git a/src/components/sections/home-page/hero.tsx b/src/components/sections/home-page/hero.tsx
@@ -1,6 +1,6 @@
 import { FlipWords } from '@/components/ui/flip-words'
 import { HomePageButton } from '@/components/ui/home-button'
-import { buttons } from '@/content/web/buttons'
+import { hero_section_buttons_content } from '@/content/home-page/hero-section-buttons-content'
 import { Boxes } from '@/components/ui/background-boxes'
 
 const words = ['vision', 'ideas', 'stack', 'way']
@@ -15,11 +15,11 @@ export function Hero() {
           Your
           <FlipWords words={words} />
         </span>
-        {buttons.slice(0, 1).map(button => (
+        {hero_section_buttons_content.slice(0, 1).map(button => (
           <HomePageButton key={button.href} {...(button)} />
         ))}
         <section className="flex flex-col space-y-3 sm:flex-row sm:space-x-2 sm:space-y-0 w-2/3 sm:w-fit">
-          {buttons.slice(1).map(button => (
+          {hero_section_buttons_content.slice(1).map(button => (
             <HomePageButton key={button.href} {...(button)} />
           ))}
         </section>

diff --git a/src/components/ui/home-button.stories.tsx b/src/components/ui/home-button.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react'
 import { HomePageButton } from '@/components/ui/home-button'
-import { buttons } from '@/content/web/buttons'
+import { hero_section_buttons_content } from '@/content/home-page/hero-section-buttons-content'
 
 const meta = {
   title: 'Zenith Design System/Home Page Buttons',
@@ -27,7 +27,7 @@ type Story = StoryObj<typeof meta>
 
 export const StackBuilder: Story = {
   args: {
-    ...buttons[0],
+    ...hero_section_buttons_content[0],
   },
   parameters: {
     design: {
@@ -38,7 +38,7 @@ export const StackBuilder: Story = {
 
 export const Figma: Story = {
   args: {
-    ...buttons[1],
+    ...hero_section_buttons_content[1],
   },
   parameters: {
     design: {
@@ -49,7 +49,7 @@ export const Figma: Story = {
 
 export const Storybook: Story = {
   args: {
-    ...buttons[2],
+    ...hero_section_buttons_content[2],
   },
   parameters: {
     design: {
@@ -60,7 +60,7 @@ export const Storybook: Story = {
 
 export const EslintConfigInspector: Story = {
   args: {
-    ...buttons[3],
+    ...hero_section_buttons_content[3],
   },
   parameters: {
     design: {
@@ -71,7 +71,7 @@ export const EslintConfigInspector: Story = {
 
 export const Github: Story = {
   args: {
-    ...buttons[4],
+    ...hero_section_buttons_content[4],
   },
   parameters: {
     design: {
@@ -82,7 +82,7 @@ export const Github: Story = {
 
 export const Fumadocs: Story = {
   args: {
-    ...buttons[5],
+    ...hero_section_buttons_content[5],
   },
   parameters: {
     design: {

diff --git a/src/content/docs/development/manual-setup/storybook.mdx b/src/content/docs/development/manual-setup/storybook.mdx
@@ -133,10 +133,12 @@ For convenience, the following code is in sync based on the current Storybook co
 
 ```bash
 pnpm i -D \
-  @storybook/{addon-a11y,addon-actions,addon-backgrounds,addon-controls,addon-designs,addon-docs,addon-interactions,addon-links,addon-measure,addon-onboarding,addon-outline,addon-storysource,addon-themes,addon-toolbars,addon-viewport,blocks,components,icons,manager-api,nextjs,react,source-loader,test,test-runner,theming,types} \
+  @storybook/{addon-a11y,addon-actions,addon-backgrounds,addon-controls,addon-designs,addon-docs,addon-interactions,addon-links,addon-measure,addon-onboarding,addon-outline,addon-storysource,addon-themes,addon-toolbars,addon-viewport,blocks,components,icons,manager-api,source-loader,test,test-runner,theming,types} \
   @chromatic-com/storybook \
   storybook \
-  storybook-dark-mode
+  storybook-dark-mode \
+  @whitespace/storybook-addon-html \
+  next-themes \
 ```
 
 <Files>
@@ -200,6 +202,8 @@ Extend the range of viewports with more options.
 </Tab>
 </Tabs>
 
+You will also need have the dark class applied to the layout body in (home)/layout.tsx.
+
 ### Inspiration
 
 [Fin UI](https://ui.fin.africa/?path=/docs/foundations-installation--docs)