aljaz/landscape-template
1
0
Fork 0
mirror of https://github.com/aljazceru/landscape-template.git synced 2026-01-29 19:24:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

refactor: projects stories directories naming

Browse Source
This commit is contained in:
MTG2000
2022-04-20 12:45:35 +03:00
parent 622a98b5f4
commit f116f34fd0
24 changed files with 102 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton.tsx Normal file
View File

@@ -0,0 +1,15 @@
import Skeleton from 'react-loading-skeleton'
export default function ProjectCardMiniSkeleton() {
return (
<div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 items-center" >
<Skeleton width={80} height={80} containerClassName='flex-shrink-0' />
<div className="justify-around items-start min-w-0">
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap"><Skeleton width="15ch" /></p>
<p className="text-body5 text-gray-600 font-light my-[5px]"><Skeleton width="10ch" /></p>
<span className="font-light text-body5"> <Skeleton width="5ch"></Skeleton> </span>
</div>
</div>
);
}

30
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.stories.tsx Normal file
View File

@@ -0,0 +1,30 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { MOCK_DATA } from 'src/mocks/data';
import ProjectCardMini from './ProjectCardMini';
import ProjectCardMiniSkeleton from './ProjectCardMini.Skeleton';
export default {
title: 'Projects/Components/Project Card Mini',
component: ProjectCardMini,
} as ComponentMeta<typeof ProjectCardMini>;
const Template: ComponentStory<typeof ProjectCardMini> = (args) => <ProjectCardMini {...args} />;
export const Default = Template.bind({});
Default.args = {
project: MOCK_DATA.projects[0]
}
const SkeletonTemplate: ComponentStory<typeof ProjectCardMiniSkeleton> = (args) => <ProjectCardMiniSkeleton />;
export const LoadingState = SkeletonTemplate.bind({});
LoadingState.args = {
}

22
src/features/Projects/Components/ProjectCardMini/ProjectCardMini.tsx Normal file
View File

@@ -0,0 +1,22 @@
import { MdLocalFireDepartment } from "react-icons/md";
import { ProjectCard } from "src/utils/interfaces";
interface Props {
project: ProjectCard
onClick: (projectId: number) => void
}
export default function ProjectCardMini({ project, onClick }: Props) {
return (
<div className="bg-gray-25 select-none px-16 py-16 flex min-w-[296px] gap-16 border border-gray-200 rounded-10 hover:cursor-pointer hover:bg-gray-100" onClick={() => onClick(project.id)}>
<img src={project.thumbnail_image} alt={project.title} draggable="false" className="flex-shrink-0 w-80 h-80 bg-gray-200 border-0 rounded-8"></img>
<div className="justify-around items-start min-w-0">
<p className="text-body4 w-full font-bold overflow-ellipsis overflow-hidden whitespace-nowrap">{project.title}</p>
<p className="text-body5 text-gray-600 font-light my-[5px]">{project.category.title}</p>
<span className="chip-small bg-warning-50 text-yellow-700 font-light text-body5 py-[3px] px-10"> <MdLocalFireDepartment className='inline-block text-fire transform text-body4 align-middle' /> {project.votes_count} </span>
</div>
</div>
);
}

28
src/features/Projects/pages/CategoryPage/CategoryPage.stories.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ModifyArgs } from 'src/utils/storybook/utils';
import CategoryPage from './CategoryPage';
export default {
title: 'Projects/Category Page',
component: CategoryPage,
argTypes: {
backgroundColor: { control: 'color' },
},
parameters: {
modifyArgs: {
router: {
routePath: "/:id",
currentPath: "/1"
}
} as ModifyArgs
}
} as ComponentMeta<typeof CategoryPage>;
const Template: ComponentStory<typeof CategoryPage> = (args) => <CategoryPage {...args as any} ></CategoryPage>
export const Page = Template.bind({});
Page.args = {
}

2
src/features/Projects/pages/CategoryPage/HeaderImage/HeaderImage.stories.tsx
View File

@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
import HeaderImage from './HeaderImage';
export default {
title: 'Category Page/Header Image',
title: 'Projects/Category Page/Header Image',
component: HeaderImage,
argTypes: {
backgroundColor: { control: 'color' },

2
src/features/Projects/pages/CategoryPage/ProjectsGrid/ProjectsGrid.stories.tsx
View File

@@ -4,7 +4,7 @@ import { MOCK_DATA } from 'src/mocks/data';
import ProjectsGrid from './ProjectsGrid';
export default {
title: 'Category Page/Projects Grid',
title: 'Projects/Category Page/Projects Grid',
component: ProjectsGrid,
argTypes: {
backgroundColor: { control: 'color' },

5
src/features/Projects/pages/CategoryPage/ProjectsGrid/ProjectsGrid.tsx
View File

@@ -1,5 +1,6 @@
import ProjectCardMini from 'src/Components/Cards/ProjectCardMini/ProjectCardMini'
import ProjectCardMiniSkeleton from 'src/Components/Cards/ProjectCardMini/ProjectCardMini.Skeleton';
import ProjectCardMini from "src/features/Projects/Components/ProjectCardMini/ProjectCardMini";
import ProjectCardMiniSkeleton from 'src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton';
import { openModal } from 'src/redux/features/modals.slice';
import { openProject } from 'src/redux/features/project.slice';
import { useAppDispatch } from 'src/utils/hooks';

2
src/features/Projects/pages/ExplorePage/Categories/Categories.stories.tsx
View File

@@ -4,7 +4,7 @@ import Categories from './Categories';
export default {
title: 'Explore Page/Categories',
title: 'Projects/Explore Page/Categories',
component: Categories,
} as ComponentMeta<typeof Categories>;

28
src/features/Projects/pages/ExplorePage/ExplorePage.stories.tsx Normal file
View File

@@ -0,0 +1,28 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import { ModifyArgs } from 'src/utils/storybook/utils';
import ExplorePage from './ExplorePage';
export default {
title: 'Projects/Explore Page',
component: ExplorePage,
argTypes: {
backgroundColor: { control: 'color' },
},
parameters: {
modifyArgs: {
router: {
routePath: "/:id",
currentPath: "/1"
}
} as ModifyArgs
}
} as ComponentMeta<typeof ExplorePage>;
const Template: ComponentStory<typeof ExplorePage> = (args) => <ExplorePage {...args as any} ></ExplorePage>
export const Page = Template.bind({});
Page.args = {
}

1
src/features/Projects/pages/ExplorePage/ExplorePage.tsx
View File

@@ -1,4 +1,3 @@
import Categories from "./Categories/Categories";
import Header from "./Header/Header";
import ProjectsSection from "./ProjectsSection/ProjectsSection";

2
src/features/Projects/pages/ExplorePage/Header/Header.stories.tsx
View File

@@ -4,7 +4,7 @@ import Header from './Header';
export default {
title: 'Explore Page/Header',
title: 'Projects/Explore Page/Header',
component: Header,
} as ComponentMeta<typeof Header>;

2
src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.Skeleton.tsx
View File

@@ -1,6 +1,6 @@
import ProjectCardMiniSkeleton from "src/Components/Cards/ProjectCardMini/ProjectCardMini.Skeleton";
import Skeleton from "react-loading-skeleton";
import ProjectCardMiniSkeleton from "src/features/Projects/Components/ProjectCardMini/ProjectCardMini.Skeleton";
export default function ProjectsRowSkeleton() {

2
src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.stories.tsx
View File

@@ -6,7 +6,7 @@ import { MOCK_DATA } from 'src/mocks/data';
export default {
title: 'Explore Page/ProjectsRow',
title: 'Projects/Explore Page/ProjectsRow',
component: ProjectsRow,
} as ComponentMeta<typeof ProjectsRow>;

2
src/features/Projects/pages/ExplorePage/ProjectsRow/ProjectsRow.tsx
View File

@@ -4,12 +4,12 @@ import Carousel from 'react-multi-carousel';
import { MdDoubleArrow, } from 'react-icons/md';
import { useAppDispatch } from "src/utils/hooks";
import { openModal } from "src/redux/features/modals.slice";
import ProjectCardMini from "src/Components/Cards/ProjectCardMini/ProjectCardMini";
import { useResizeListener } from 'src/utils/hooks'
import { IoIosArrowBack, IoIosArrowForward } from "react-icons/io";
import './style.css';
import { Link } from "react-router-dom";
import { openProject } from "src/redux/features/project.slice";
import ProjectCardMini from "src/features/Projects/Components/ProjectCardMini/ProjectCardMini";
interface Props {
title: string | ReactNode,

2
src/features/Projects/pages/ExplorePage/ProjectsSection/ProjectsSection.stories.tsx
View File

@@ -4,7 +4,7 @@ import ProjectsSection from './ProjectsSection';
export default {
title: 'Explore Page/Projects Section',
title: 'Projects/Explore Page/Projects Section',
component: ProjectsSection,
} as ComponentMeta<typeof ProjectsSection>;

19
src/features/Projects/pages/HottestPage/HottestPage.stories.tsx Normal file
View File

@@ -0,0 +1,19 @@
import { ComponentStory, ComponentMeta } from '@storybook/react';
import HottestPage from './HottestPage';
export default {
title: 'Projects/Hottest Page',
component: HottestPage,
argTypes: {
backgroundColor: { control: 'color' },
},
} as ComponentMeta<typeof HottestPage>;
const Template: ComponentStory<typeof HottestPage> = (args) => <HottestPage {...args as any} ></HottestPage>
export const Page = Template.bind({});
Page.args = {
}

2
src/features/Projects/pages/ProjectPage/ClaimProject/Claim_CopySignatureCard.stories.tsx
View File

@@ -5,7 +5,7 @@ import Claim_CopySignatureCard from './Claim_CopySignatureCard';
import { ModalsDecorator } from 'src/utils/storybook/decorators';
export default {
title: 'Project/Claim/Copy Signature Card',
title: 'Projects/Claim/Copy Signature Card',
component: Claim_CopySignatureCard,
decorators: [ModalsDecorator]

2
src/features/Projects/pages/ProjectPage/ClaimProject/Claim_FundWithdrawCard.stories.tsx
View File

@@ -5,7 +5,7 @@ import Claim_FundWithdrawCard from './Claim_FundWithdrawCard';
import { ModalsDecorator } from 'src/utils/storybook/decorators';
export default {
title: 'Project/Claim/Fund Withdraw Card',
title: 'Projects/Claim/Fund Withdraw Card',
component: Claim_FundWithdrawCard,
decorators: [ModalsDecorator]

2
src/features/Projects/pages/ProjectPage/ClaimProject/Claim_GenerateSignatureCard.stories.tsx
View File

@@ -5,7 +5,7 @@ import Claim_GenerateSignatureCard from './Claim_GenerateSignatureCard';
import { ModalsDecorator } from 'src/utils/storybook/decorators';
export default {
title: 'Project/Claim/Generate Signature Card',
title: 'Projects/Claim/Generate Signature Card',
component: Claim_GenerateSignatureCard,
decorators: [ModalsDecorator]

2
src/features/Projects/pages/ProjectPage/ClaimProject/Claim_SubmittedCard.stories.tsx
View File

@@ -5,7 +5,7 @@ import Claim_SubmittedCard from './Claim_SubmittedCard';
import { ModalsDecorator } from 'src/utils/storybook/decorators';
export default {
title: 'Project/Claim/Submitted Card',
title: 'Projects/Claim/Submitted Card',
component: Claim_SubmittedCard,
decorators: [ModalsDecorator]

2
src/features/Projects/pages/ProjectPage/ProjectDetailsCard/ProjectDetailsCard.stories.tsx
View File

@@ -6,7 +6,7 @@ import ProjectDetailsCardSkeleton from './ProjectDetailsCard.Skeleton';
import { ModalsDecorator } from 'src/utils/storybook/decorators';
export default {
title: 'Project/Project Details Card',
title: 'Projects/Project Page/Project Details Modal',
component: ProjectDetailsCard,
decorators: [ModalsDecorator],

2
src/features/Projects/pages/ProjectPage/VoteButton/VoteButton.stories.tsx
View File

@@ -4,7 +4,7 @@ import VoteButton from './VoteButton';
import { centerDecorator } from 'src/utils/storybook/decorators';
export default {
title: 'Project/Tip Button',
title: 'Projects/Project Page/Tip Button',
component: VoteButton,
decorators: [
centerDecorator

2
src/features/Projects/pages/ProjectPage/VoteCard/VoteCard.stories.tsx
View File

@@ -5,7 +5,7 @@ import VoteCard from './VoteCard';
import { ModalsDecorator } from 'src/utils/storybook/decorators';
export default {
title: 'Project/Vote Card',
title: 'Projects/Project Page/Vote Card',
component: VoteCard,
decorators: [ModalsDecorator]