SentientGeeks
/
Next-Architecture
8
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

Storybook fixed

master
Prakash Maity 10 months ago
parent
a2bf690e7f
commit
9b973ea512
7 changed files with 79 additions and 126 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +26
    -10
      .storybook/main.ts
  2. +3
    -1
      .storybook/preview.ts
  3. +12
    -10
      package.json
  4. +2
    -105
      src/app/page.tsx
  5. +20
    -0
      src/components/ui/input/PinInput.stories.ts
  6. +15
    -0
      src/components/ui/input/PinInput.tsx
  7. +1
    -0
      src/stories/Button.stories.ts

+ 26
- 10
.storybook/main.ts View File

@ -1,21 +1,37 @@
import type { StorybookConfig } from "@storybook/nextjs";
import type { StorybookConfig } from '@storybook/nextjs';
const config: StorybookConfig = { const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
addons: [ addons: [
"@storybook/addon-onboarding",
"@storybook/addon-links",
"@storybook/addon-essentials",
"@chromatic-com/storybook",
"@storybook/addon-interactions",
'@storybook/addon-onboarding',
'@storybook/addon-links',
'@storybook/addon-essentials',
'@chromatic-com/storybook',
'@storybook/addon-interactions',
{
name: '@storybook/addon-postcss',
options: {
cssLoaderOptions: {
// When you have splitted your css over multiple files
// and use @import('./other-styles.css')
importLoaders: 1,
},
postcssLoaderOptions: {
// When using postCSS 8
implementation: require('postcss'),
},
},
},
'@storybook/addon-mdx-gfm'
], ],
framework: { framework: {
name: "@storybook/nextjs",
name: '@storybook/nextjs',
options: {}, options: {},
}, },
docs: { docs: {
autodocs: "tag",
autodocs: 'tag',
}, },
staticDirs: ["..\\public"],
staticDirs: ['..\\public'],
}; };
export default config; export default config;

+ 3
- 1
.storybook/preview.ts View File

@ -1,4 +1,5 @@
import type { Preview } from "@storybook/react";
import type { Preview } from '@storybook/react';
import '../src/app/globals.css';
const preview: Preview = { const preview: Preview = {
parameters: { parameters: {
@ -12,3 +13,4 @@ const preview: Preview = {
}; };
export default preview; export default preview;

+ 12
- 10
package.json View File

@ -25,15 +25,17 @@
"tailwindcss-animate": "^1.0.7" "tailwindcss-animate": "^1.0.7"
}, },
"devDependencies": { "devDependencies": {
"@chromatic-com/storybook": "^1.2.22",
"@storybook/addon-essentials": "^8.0.0",
"@storybook/addon-interactions": "^8.0.0",
"@storybook/addon-links": "^8.0.0",
"@storybook/addon-onboarding": "^8.0.0",
"@storybook/blocks": "^8.0.0",
"@storybook/nextjs": "^8.0.0",
"@storybook/react": "^8.0.0",
"@storybook/test": "^8.0.0",
"@chromatic-com/storybook": "^1.2.23",
"@storybook/addon-essentials": "^8.0.2",
"@storybook/addon-interactions": "^8.0.2",
"@storybook/addon-links": "^8.0.2",
"@storybook/addon-mdx-gfm": "^8.0.2",
"@storybook/addon-onboarding": "^8.0.2",
"@storybook/addon-postcss": "^2.0.0",
"@storybook/blocks": "^8.0.2",
"@storybook/nextjs": "^8.0.2",
"@storybook/react": "^8.0.2",
"@storybook/test": "^8.0.2",
"@tanstack/eslint-plugin-query": "^5.27.7", "@tanstack/eslint-plugin-query": "^5.27.7",
"@types/node": "^20", "@types/node": "^20",
"@types/react": "^18", "@types/react": "^18",
@ -43,7 +45,7 @@
"eslint-config-next": "14.1.3", "eslint-config-next": "14.1.3",
"eslint-plugin-storybook": "^0.8.0", "eslint-plugin-storybook": "^0.8.0",
"postcss": "^8", "postcss": "^8",
"storybook": "^8.0.0",
"storybook": "^8.0.2",
"tailwindcss": "^3.3.0", "tailwindcss": "^3.3.0",
"typescript": "^5" "typescript": "^5"
} }


+ 2
- 105
src/app/page.tsx View File

@ -1,113 +1,10 @@
import PinInput from "@/components/ui/input/PinInput";
import Image from "next/image"; import Image from "next/image";
export default function Home() { export default function Home() {
return ( return (
<main className="flex min-h-screen flex-col items-center justify-between p-24"> <main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
{/* <code className="font-mono font-bold">src/app/page.tsx</code> */}
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{" "}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
</div>
<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-full sm:before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full sm:after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>
<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore starter templates for Next.js.
</p>
</a>
<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50 text-balance`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
<PinInput />
</main> </main>
); );
} }

+ 20
- 0
src/components/ui/input/PinInput.stories.ts View File

@ -0,0 +1,20 @@
import type { Meta, StoryObj } from '@storybook/react';
import PinInput from './PinInput';
const meta = {
title: 'Example/PinInput',
component: PinInput,
parameters: {
// Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
layout: 'centered',
},
tags: ['autodocs'],
} satisfies Meta<typeof PinInput>;
export default meta;
type Story = StoryObj<typeof meta>;
// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
export const Primary: Story = {
args: {},
};

+ 15
- 0
src/components/ui/input/PinInput.tsx View File

@ -0,0 +1,15 @@
import React from 'react'
const PinInput = () => {
return (
<a href="#_" className="relative px-5 py-2 font-medium text-white group">
<span className="absolute inset-0 w-full h-full transition-all duration-300 ease-out transform translate-x-0 -skew-x-12 bg-purple-500 group-hover:bg-purple-700 group-hover:skew-x-12"></span>
<span className="absolute inset-0 w-full h-full transition-all duration-300 ease-out transform skew-x-12 bg-purple-700 group-hover:bg-purple-500 group-hover:-skew-x-12"></span>
<span className="absolute bottom-0 left-0 hidden w-10 h-20 transition-all duration-100 ease-out transform -translate-x-8 translate-y-10 bg-purple-600 -rotate-12"></span>
<span className="absolute bottom-0 right-0 hidden w-10 h-20 transition-all duration-100 ease-out transform translate-x-10 translate-y-8 bg-purple-400 -rotate-12"></span>
<span className="relative">Button Text</span>
</a>
)
}
export default PinInput

+ 1
- 0
src/stories/Button.stories.ts View File

@ -50,3 +50,4 @@ export const Small: Story = {
label: 'Button', label: 'Button',
}, },
}; };

Write Preview
Loading…
Cancel
Save