Skip to content

Commit

Permalink
Merge pull request #9 from bootwindproject/development
Browse files Browse the repository at this point in the history 
Adding some stories in 'core' section and adding some minor adjusment
  • Loading branch information
@zuramai
zuramai authored Nov 29, 2023
2 parents fe7d783 + 615b34e commit 9674d42
Show file tree
Hide file tree
Showing 11 changed files with 857 additions and 50 deletions.
21 changes: 9 additions & 12 deletions packages/breadcrumb/src/lib/breadcrumb.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, items, class
return (
<nav className={cn("flex", className)} aria-label="Breadcrumb">
<ol role="list" className="flex items-center space-x-2">
{items?.map((item,index) => (
{items?.map((item, index) => (
<li key={index}>
<div className="flex items-center">
<div className="inline-flex items-center">
{index > 0 && (
<GoChevronRight
className="mr-2 h-3 w-3 flex-shrink-0 text-gray-500"
Expand Down Expand Up @@ -60,30 +60,27 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
}) => {
const content = href ? (
<a
className={`text-sm font-medium ${
isActive ? 'text-indigo-600' : 'text-gray-500 hover:text-gray-700'
}`}
className={`text-sm font-medium ${isActive ? 'text-indigo-600' : 'text-gray-500 hover:text-gray-700'
}`}
href={href}
>
{children}
</a>
) : (
<span
className={`text-sm font-medium ${
isActive ? 'text-indigo-600' : 'text-gray-500'
}`}
className={`text-sm font-medium ${isActive ? 'text-indigo-600' : 'text-gray-500'
}`}
>
{children}
</span>
);

return (
<div className={cn("breadcrumb", className)}>
<div className={cn("breadcrumb inline-flex", className)}>
{icon &&
React.cloneElement(icon as React.ReactElement, {
className: `${isActive ? 'text-indigo-600' : 'text-gray-500'} ${
children ? 'mr-2' : ''
}`,
className: `${isActive ? 'text-indigo-600' : 'text-gray-500'} ${children ? 'mr-2' : ''
}`,
})}
{content}
</div>
Expand Down
70 changes: 70 additions & 0 deletions packages/core/src/stories/BackdropBlur.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
import { Meta } from '@storybook/react';

export default {
title: 'Components/Core/Backdrop Blur',
} as Meta;

export const AllBackdropBlur = () => {

return (
<div style={{
backgroundImage: "url(" + 'https://w0.peakpx.com/wallpaper/390/257/HD-wallpaper-macos-ventura-ios-16-dark-wwdc-2022-apple.jpg' + ")", backgroundPosition: 'center',
backgroundSize: 'cover',
backgroundRepeat: 'no-repeat'
}} className='p-4'>
<p className='px-5 mb-8 text-white'>All the backrop blur used by default tailwind classes https://tailwindcss.com/docs/backdrop-blur</p>
<div className="flex gap-5 mb-5 px-5">
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-none" />
<p className='text-white flex justify-between mt-5'>
<span>blur-none</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-sm" />
<p className='text-white flex justify-between mt-5'>
<span>blur-sm</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur" />
<p className='text-white flex justify-between mt-5'>
<span>blur</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-md" />
<p className='text-white flex justify-between mt-5'>
<span>blur-md</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-lg" />
<p className='text-white flex justify-between mt-5'>
<span>blur-lg</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-xl" />
<p className='text-white flex justify-between mt-5'>
<span>blur-xl</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-2xl" />
<p className='text-white flex justify-between mt-5'>
<span>blur-2xl</span>
</p>
</div>
</div>
<div className="flex gap-5 mb-5 px-5">
<div>
<div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-3xl" />
<p className='text-white flex justify-between mt-5'>
<span>blur-3xl</span>
</p>
</div>
</div>
</div>
)
}
66 changes: 66 additions & 0 deletions packages/core/src/stories/Blur.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
import { Meta } from '@storybook/react';

export default {
title: 'Components/Core/Blur',
} as Meta;

export const AllBlur = () => {

return (
<div className='bg-gradient-to-b from-blue-400 to-blue-600 p-4'>
<p className='px-5 mb-8 text-white'>All the blur used by default tailwind classes https://tailwindcss.com/docs/blur</p>
<div className="flex gap-5 mb-5 px-5">
<div>
<div className="w-48 h-48 bg-white rounded-lg blur-[0px]" />
<p className='text-white flex justify-between mt-5'>
<span>blur-none</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white rounded-lg blur-sm" />
<p className='text-white flex justify-between mt-5'>
<span>blur-sm</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white rounded-lg blur" />
<p className='text-white flex justify-between mt-5'>
<span>blur</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white rounded-lg blur-md" />
<p className='text-white flex justify-between mt-5'>
<span>blur-md</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white rounded-lg blur-lg" />
<p className='text-white flex justify-between mt-5'>
<span>blur-lg</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white rounded-lg blur-xl" />
<p className='text-white flex justify-between mt-5'>
<span>blur-xl</span>
</p>
</div>
<div>
<div className="w-48 h-48 bg-white rounded-lg blur-2xl" />
<p className='text-white flex justify-between mt-5'>
<span>blur-2xl</span>
</p>
</div>
</div>
<div className="flex gap-5 mb-5 px-5">
<div>
<div className="w-48 h-48 bg-white rounded-lg blur-3xl" />
<p className='text-white flex justify-between mt-5'>
<span>blur-3xl</span>
</p>
</div>
</div>
</div>
)
}
22 changes: 10 additions & 12 deletions packages/core/src/stories/Colors.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,7 @@
import { Meta } from '@storybook/react';

import Title from '@bootwind/title';

export default {
title: 'Components/Core/Colors',
argTypes: {
variant: {
control: { type: 'radio', options: ['primary', 'secondary', 'ghost'] },
},
size: {
control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] },
},
},
} as Meta;

export const AllColors = () => {
Expand Down Expand Up @@ -42,8 +32,16 @@ export const AllColors = () => {
const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]

return (
<div>

<div className='bg-[#F4F5F7] p-4'>
<div className="flex gap-5 mb-5 px-5">
<div>
<div className={`color-swatch bg-primary w-48 h-16 rounded-md`} >
</div>
<p className='flex justify-between'>
<span>primary</span>
</p>
</div>
</div>
{colors.map(color => {
return (
<div className="flex gap-5 mb-5 px-5">
Expand Down
32 changes: 32 additions & 0 deletions packages/core/src/stories/Container.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { Meta } from '@storybook/react';

export default {
title: 'Components/Core/Container',
} as Meta;

export const AllContainer = () => {

return (
<div className='bg-[#F4F5F7] p-4'>
<p className='px-5 mb-5'>All the container used by default tailwind classes https://tailwindcss.com/docs/container</p>

<div className="w-[1536px] h-[440px] flex-col justify-start items-center gap-[30px] inline-flex">
<div className="w-[640px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
<div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">sm (640px)</div>
</div>
<div className="w-[768px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
<div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">md (768px)</div>
</div>
<div className="w-[1024px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
<div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">lg (1024px)</div>
</div>
<div className="w-[1280px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
<div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">xl (1280px)</div>
</div>
<div className="w-[1536px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
<div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">2xl (1536px)</div>
</div>
</div>
</div>
)
}
91 changes: 91 additions & 0 deletions packages/core/src/stories/Gradients.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,91 @@
import { Meta } from '@storybook/react';

export default {
title: 'Components/Core/Gradients',
} as Meta;

export const AllGradients = () => {

return (
<div className='bg-[#F4F5F7] p-4'>
<p className='px-5 mb-5'>All the gradients use bg-gradient-to-b tailwind classes and the color from - to is below the gradients box.</p>
<div className="flex gap-5 mb-5 px-5">
<div>
<div className="w-48 h-20 bg-gradient-to-b from-fuchsia-500 to-indigo-600 rounded-lg" />
<p className='flex justify-between'>
<span>fuchsia-500 → indigo-600</span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-indigo-500 to-indigo-800 rounded-lg" />
<p className='flex justify-between'>
<span>indigo-500 → indigo-800 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-pink-500 to-indigo-600 rounded-lg" />
<p className='flex justify-between'>
<span>pink-500 → indigo-600 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-sky-400 to-purple-500 rounded-lg" />
<p className='flex justify-between'>
<span>sky-400 → purple-500 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-violet-400 to-purple-700 rounded-lg" />
<p className='flex justify-between'>
<span>violet-400 → purple-700 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-blue-400 to-blue-600 rounded-lg" />
<p className='flex justify-between'>
<span>blue-400 → blue-600 </span>
</p>
</div>
</div>

<div className="flex gap-5 mb-5 px-5">
<div>
<div className="w-48 h-20 bg-gradient-to-b from-emerald-400 to-lime-700 rounded-lg" />
<p className='flex justify-between'>
<span>emerald-400 → lime-700 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-yellow-200 to-lime-700 rounded-lg" />
<p className='flex justify-between'>
<span>yellow-200 → lime-700 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-green-400 to-blue-500 rounded-lg" />
<p className='flex justify-between'>
<span>green-400 → blue-500 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-blue-500 to-pink-500 rounded-lg" />
<p className='flex justify-between'>
<span>blue-500 → pink-500 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-orange-500 to-pink-600 rounded-lg" />
<p className='flex justify-between'>
<span>orange-500 → pink-600 </span>
</p>
</div>
<div>
<div className="w-48 h-20 bg-gradient-to-b from-fuchsia-700 to-red-500 rounded-lg" />
<p className='flex justify-between'>
<span>fuchsia-700 → red-500 </span>
</p>
</div>
</div>
</div>
)
}
Loading

0 comments on commit 9674d42

Please sign in to comment.