steve/tok-to-insta-follower-bridge
1
0
Fork 0
mirror of https://github.com/snachodog/tok-to-insta-follower-bridge.git synced 2025-04-10 14:11:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

chore: clean storybook

Browse Source
This commit is contained in:
kawamataryo 2024-11-24 14:41:14 +09:00
parent f1aac1abe8
commit 04841ea7bf
12 changed files with 40 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
.storybook/main.ts
View File

@ -1,5 +1,7 @@
import type { StorybookConfig } from "@storybook/react-vite";
import { defineConfig } from 'vite';
const config: StorybookConfig = {
stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
addons: [
@ -15,5 +17,12 @@ const config: StorybookConfig = {
docs: {
autodocs: "tag",
},
viteFinal: (config) => {
config.define = {
...config.define,
'process.env': process.env,
};
return config;
},
};
export default config;

2
src/lib/components/AlertError.stories.tsx
View File

@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
import AlertError from "./AlertError";
const meta: Meta<typeof AlertError> = {
title: "CSUI/AlertError",
title: "Components/AlertError",
component: AlertError,
};
export default meta;

2
src/lib/components/AlertSuccess.stories.tsx
View File

@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
import AlertSuccess from "./AlertSuccess";
const meta: Meta<typeof AlertSuccess> = {
title: "CSUI/AlertSuccess",
title: "Components/AlertSuccess",
component: AlertSuccess,
};
export default meta;

15
src/lib/components/Header.stories.tsx
View File

@ -1,15 +0,0 @@
import type { Meta, StoryObj } from "@storybook/react";
import Header from "./Header";
const meta = {
title: "Header",
component: Header,
parameters: {
layout: "fullscreen",
},
} satisfies Meta<typeof Header>;
export default meta;
type Story = StoryObj<typeof meta>;
export const Default: Story = {};

49
src/lib/components/Header.tsx
View File

@ -1,49 +0,0 @@
const Header = () => {
return (
<div className="navbar bg-base-100 border-b border-base-200">
<div className="flex-1 flex items-center gap-2">
<svg
className="w-5 h-5"
xmlns="http://www.w3.org/2000/svg"
width="48"
height="48"
viewBox="0 0 48 48"
>
<g
fill="none"
stroke="currentColor"
strokeLinejoin="round"
strokeWidth="4"
>
<path
strokeLinecap="round"
d="M36 8H13c-3 0-9 2-9 8s6 8 9 8h22c3 0 9 2 9 8s-6 8-9 8H12"
/>
<path d="M40 12a4 4 0 1 0 0-8a4 4 0 0 0 0 8ZM8 44a4 4 0 1 0 0-8a4 4 0 0 0 0 8Z" />
</g>
</svg>
<span className="text-2xl font-bold">Sky Follower Bridge</span>
</div>
<div className="flex-none">
<a
href="https://github.com/kawamataryo/sky-follower-bridge"
target="_blank"
rel="noopener noreferrer"
className="btn btn-ghost"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
className="fill-current"
>
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />
</svg>
</a>
</div>
</div>
);
};
export default Header;

23
src/lib/components/MatchTypeFilter.stories.tsx
View File

@ -1,23 +0,0 @@
import type { Meta, StoryObj } from "@storybook/react";
import { BSKY_USER_MATCH_TYPE } from "../constants";
import MatchTypeFilter from "./MatchTypeFilter";
const meta: Meta<typeof MatchTypeFilter> = {
title: "CSUI/MatchTypeFilter",
component: MatchTypeFilter,
};
export default meta;
type Story = StoryObj<typeof MatchTypeFilter>;
export const Default: Story = {
args: {
value: {
[BSKY_USER_MATCH_TYPE.HANDLE]: true,
[BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: false,
[BSKY_USER_MATCH_TYPE.DESCRIPTION]: true,
},
onChange: () => {},
},
};

42
src/lib/components/MatchTypeFilter.tsx
View File

@ -1,42 +0,0 @@
import React from "react";
import type { MatchType } from "../../types";
import { BSKY_USER_MATCH_TYPE, MATCH_TYPE_LABEL_AND_COLOR } from "../constants";
export type MatchTypeFilterValue = {
[BSKY_USER_MATCH_TYPE.DESCRIPTION]: boolean;
[BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: boolean;
[BSKY_USER_MATCH_TYPE.HANDLE]: boolean;
};
export type props = {
value: MatchTypeFilterValue;
onChange: (key: MatchType) => void;
};
const MatchTypeFilter = ({ value, onChange }: props) => {
return (
<div className="flex gap-2 items-center">
{Object.keys(value).map((key: MatchType) => (
<div className="form-control" key={key}>
<label
htmlFor={key}
className={`badge badge-${
MATCH_TYPE_LABEL_AND_COLOR[key].color
} gap-1 cursor-pointer py-3 ${value[key] ? "" : "badge-outline"}`}
>
<input
type="checkbox"
id={key}
checked={value[key]}
onChange={() => onChange(key)}
className="checkbox checkbox-xs"
/>
<span className="">{MATCH_TYPE_LABEL_AND_COLOR[key].label}</span>
</label>
</div>
))}
</div>
);
};
export default MatchTypeFilter;

45
src/lib/components/Modal.stories.tsx
View File

@ -1,13 +1,12 @@
import type { Meta, StoryObj } from "@storybook/react";
import { useRef } from "react";
import BlueskyIconSvg from "./Icons/BlueskyIconSvg";
import Modal from "./Modal";
import UserCard, { type Props as UserCardProps } from "./UserCard";
import type { Props as UserCardProps } from "./UserCard";
const meta: Meta<typeof UserCard> = {
title: "CSUI/Modal",
component: UserCard,
const meta: Meta<typeof Modal> = {
title: "Components/Modal",
component: Modal,
};
export default meta;
@ -34,42 +33,6 @@ const DefaultTemplate: Story = {
},
};
const ShowModalTemplate: Story = {
render: () => {
const modalRef = useRef<HTMLDialogElement>(null);
return (
<>
<button
type="button"
className="btn btn-primary"
onClick={() => modalRef.current?.showModal()}
>
open
</button>
<Modal anchorRef={modalRef} open>
<div className="flex justify-between">
<h1 className="text-xl font-bold">🔎 Find Bluesky Users</h1>
<div className="text-xl">34 / 160</div>
</div>
<div className="flex gap-1 items-center mt-3">
<p className="">Match type: </p>
<div className="badge badge-info">Same handle name</div>
<div className="badge badge-warning">Same display name</div>
<div className="badge badge-secondary">
Included handle name in description
</div>
</div>
</Modal>
</>
);
},
};
export const Default = {
...DefaultTemplate,
};
export const ShowModal = {
...ShowModalTemplate,
};

24
src/lib/components/Sidebar.stories.tsx
View File

@ -1,5 +1,5 @@
import type { Meta, StoryObj } from "@storybook/react";
import { BSKY_USER_MATCH_TYPE } from "../constants";
import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "../constants";
import Sidebar from "./Sidebar";
const meta = {
@ -15,7 +15,7 @@ type Story = StoryObj<typeof meta>;
export const Default: Story = {
args: {
detectedCount: 42,
detectedCount: 40,
filterValue: {
[BSKY_USER_MATCH_TYPE.HANDLE]: true,
[BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: false,
@ -25,6 +25,16 @@ export const Default: Story = {
onChangeFilter: (key) => {
console.log(`Filter changed: ${key}`);
},
matchTypeStats: {
[BSKY_USER_MATCH_TYPE.HANDLE]: 10,
[BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: 10,
[BSKY_USER_MATCH_TYPE.DESCRIPTION]: 10,
[BSKY_USER_MATCH_TYPE.FOLLOWING]: 10,
},
actionAll: async () => {
console.log("actionAll");
},
actionMode: ACTION_MODE.FOLLOW,
},
};
@ -40,5 +50,15 @@ export const NoDetections: Story = {
onChangeFilter: (key) => {
console.log(`Filter changed: ${key}`);
},
matchTypeStats: {
[BSKY_USER_MATCH_TYPE.HANDLE]: 0,
[BSKY_USER_MATCH_TYPE.DISPLAY_NAME]: 0,
[BSKY_USER_MATCH_TYPE.DESCRIPTION]: 0,
[BSKY_USER_MATCH_TYPE.FOLLOWING]: 0,
},
actionAll: async () => {
console.log("actionAll");
},
actionMode: ACTION_MODE.FOLLOW,
},
};

2
src/lib/components/Sidebar.tsx
View File

@ -14,7 +14,7 @@ type Props = {
onChangeFilter: (key: MatchType) => void;
actionAll: () => Promise<void>;
actionMode: (typeof ACTION_MODE)[keyof typeof ACTION_MODE];
matchTypeStats: Record<MatchType, number>;
matchTypeStats: Record<Exclude<MatchType, "none">, number>;
};
const Sidebar = ({

2
src/lib/components/UserCard.stories.tsx
View File

@ -4,7 +4,7 @@ import { ACTION_MODE, BSKY_USER_MATCH_TYPE } from "../constants";
import UserCard, { type Props } from "./UserCard";
const meta: Meta<typeof UserCard> = {
title: "CSUI/UserCard",
title: "Components/UserCard",
component: UserCard,
};
export default meta;

2
src/lib/components/UserCardSkelton.stories.tsx
View File

@ -3,7 +3,7 @@ import type { Meta, StoryObj } from "@storybook/react";
import UserCardSkeleton from "./UserCardSkeleton";
const meta: Meta<typeof UserCardSkeleton> = {
title: "CSUI/UserCardSkeleton",
title: "Components/UserCardSkeleton",
component: UserCardSkeleton,
};
export default meta;