Merge branch 'master' of github.com:npocccties/ChibiCHiLO into feat-i…

…mport-books

LICENSE

@@ -2,6 +2,7 @@ MIT License
 
 Copyright (c) 2020-2021 NPO CCC-TIES
 Copyright (c) 2020-2021 National Institute of Informatics
+Copyright (c) 2020-2021 Osaka University
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

components/atoms/DescriptionList.stories.tsx

@@ -0,0 +1,11 @@
+export default { title: "atoms/DescriptionList" };
+
+import DescriptionList from "./DescriptionList";
+
+const value = [...Array(10)].fill({ key: "key", value: "value" });
+
+export const Default = () => <DescriptionList value={value} />;
+
+export const Inline = () => <DescriptionList inline value={value} />;
+
+export const Nowrap = () => <DescriptionList nowrap value={value} />;

components/atoms/DescriptionList.tsx

@@ -0,0 +1,84 @@
+import clsx from "clsx";
+import { makeStyles, createStyles } from "@material-ui/core/styles";
+import type { Theme } from "@material-ui/core/styles";
+import grey from "@material-ui/core/colors/grey";
+
+type StyleProps = {
+  color: string;
+  fontSize: string;
+};
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      margin: 0,
+      color: ({ color }: StyleProps) => color,
+      fontSize: ({ fontSize }: StyleProps) => fontSize,
+      lineHeight: 1.25,
+      "& > $item:not(:last-child)": {
+        marginBottom: theme.spacing(0.5),
+      },
+      "&$inline > $item, &$nowrap > $item": {
+        display: "inline-flex",
+      },
+      "&$inline > $item:not(:last-child), &$nowrap > $item:not(:last-child)": {
+        marginRight: theme.spacing(1.25),
+      },
+      "&$nowrap": {
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+    },
+    item: {
+      display: "flex",
+      "& > dt::after": {
+        content: "':'",
+        marginRight: theme.spacing(0.25),
+      },
+      "& > dd": {
+        margin: 0,
+      },
+    },
+    inline: {},
+    nowrap: {},
+  })
+);
+
+type Props = {
+  className?: string;
+  color?: string;
+  fontSize?: string;
+  inline?: boolean;
+  nowrap?: boolean;
+  value: Array<{ key: string; value: string }>;
+};
+
+export default function DescriptionList({
+  className,
+  color = grey[700],
+  fontSize = "0.75rem",
+  inline = false,
+  nowrap = false,
+  value,
+}: Props) {
+  const classes = useStyles({ color, fontSize });
+
+  return (
+    <dl
+      className={clsx(
+        className,
+        classes.root,
+        { [classes.inline]: inline },
+        { [classes.nowrap]: nowrap }
+      )}
+    >
+      {value.map(({ key, value }, index) => (
+        <div key={index} className={classes.item}>
+          <dt>{key}</dt>
+          <dd>{value}</dd>
+        </div>
+      ))}
+    </dl>
+  );
+}

components/atoms/EditButton.stories.tsx

@@ -0,0 +1,7 @@
+export default { title: "atoms/EditButton" };
+
+import EditButton from "./EditButton";
+
+export const Book = () => <EditButton variant="book" />;
+
+export const Topic = () => <EditButton variant="topic" />;

components/atoms/EditButton.tsx

@@ -0,0 +1,24 @@
+import EditOutlinedIcon from "@material-ui/icons/EditOutlined";
+import IconButton from "$atoms/IconButton";
+
+type Props = Omit<Parameters<typeof IconButton>[0], "tooltipProps"> & {
+  variant: "book" | "topic";
+};
+
+const label = {
+  book: "ブック",
+  topic: "トピック",
+} as const;
+
+export default function EditButton({ variant, ...other }: Props) {
+  return (
+    <IconButton
+      tooltipProps={{ title: `${label[variant]}を編集` }}
+      color="primary"
+      size="small"
+      {...other}
+    >
+      <EditOutlinedIcon />
+    </IconButton>
+  );
+}

components/atoms/IconButton.stories.tsx

@@ -0,0 +1,12 @@
+export default { title: "atoms/IconButton" };
+
+import CloseIcon from "@material-ui/icons/Close";
+import IconButton from "./IconButton";
+
+export const Default = () => {
+  return (
+    <IconButton tooltipProps={{ title: "閉じる" }}>
+      <CloseIcon />
+    </IconButton>
+  );
+};

components/atoms/IconButton.tsx

@@ -0,0 +1,15 @@
+import MuiIconButton from "@material-ui/core/IconButton";
+import Tooltip from "@material-ui/core/Tooltip";
+
+type Props = Parameters<typeof MuiIconButton>[0] & {
+  tooltipProps: Omit<Parameters<typeof Tooltip>[0], "children">;
+};
+
+export default function IconButton(props: Props) {
+  const { tooltipProps, ...others } = props;
+  return (
+    <Tooltip {...tooltipProps}>
+      <MuiIconButton {...others} />
+    </Tooltip>
+  );
+}

components/atoms/Markdown.stories.tsx

@@ -0,0 +1,25 @@
+export default { title: "atoms/Markdown" };
+
+import Markdown from "./Markdown";
+import outdent from "outdent";
+
+export const Default = () => (
+  <Markdown>
+    {outdent`
+    # h1
+
+    ## h2
+
+    ### h3
+
+    #### h4
+
+    ###### h5
+
+    ###### h6
+
+    paragraph
+    paragraph
+  `}
+  </Markdown>
+);

components/atoms/Markdown.tsx

@@ -0,0 +1,24 @@
+import ReactMarkdown from "react-markdown";
+import gfm from "remark-gfm";
+import breaks from "remark-breaks";
+import Link from "@material-ui/core/Link";
+import type { LinkProps } from "@material-ui/core/Link";
+
+function MarkdownLink<Element extends React.ElementType>(
+  props: LinkProps<Element>
+) {
+  return <Link target="_blank" rel="noreferrer" {...props} />;
+}
+
+type Props = Pick<Parameters<typeof ReactMarkdown>[0], "children">;
+
+export default function Markdown({ children }: Props) {
+  const components = {
+    a: MarkdownLink,
+  };
+  return (
+    <ReactMarkdown remarkPlugins={[gfm, breaks]} components={components}>
+      {children}
+    </ReactMarkdown>
+  );
+}

components/atoms/PreviewButton.stories.tsx

@@ -0,0 +1,7 @@
+export default { title: "atoms/PreviewButton" };
+
+import PreviewButton from "./PreviewButton";
+
+export const Book = () => <PreviewButton variant="book" />;
+
+export const Topic = () => <PreviewButton variant="topic" />;

components/atoms/PreviewButton.tsx

@@ -0,0 +1,24 @@
+import VisibilityOutlinedIcon from "@material-ui/icons/VisibilityOutlined";
+import IconButton from "$atoms/IconButton";
+
+type Props = Omit<Parameters<typeof IconButton>[0], "tooltipProps"> & {
+  variant: "book" | "topic";
+};
+
+const label = {
+  book: "ブック",
+  topic: "トピック",
+} as const;
+
+export default function PreviewButton({ variant, ...other }: Props) {
+  return (
+    <IconButton
+      tooltipProps={{ title: `${label[variant]}をプレビュー` }}
+      size="small"
+      color="primary"
+      {...other}
+    >
+      <VisibilityOutlinedIcon />
+    </IconButton>
+  );
+}

components/atoms/RemoveButton.stories.tsx

@@ -0,0 +1,7 @@
+export default { title: "atoms/RemoveButton" };
+
+import RemoveButton from "./RemoveButton";
+
+export const Topic = () => <RemoveButton variant="topic" />;
+
+export const Section = () => <RemoveButton variant="section" />;

components/atoms/RemoveButton.tsx

@@ -0,0 +1,24 @@
+import RemoveIcon from "@material-ui/icons/Remove";
+import IconButton from "$atoms/IconButton";
+
+type Props = Omit<Parameters<typeof IconButton>[0], "tooltipProps"> & {
+  variant: "topic" | "section";
+};
+
+const label = {
+  topic: "トピック",
+  section: "セクション",
+} as const;
+
+export default function RemoveButton({ variant, ...other }: Props) {
+  return (
+    <IconButton
+      color="primary"
+      size="small"
+      {...other}
+      tooltipProps={{ title: `この${label[variant]}を取り除く` }}
+    >
+      <RemoveIcon />
+    </IconButton>
+  );
+}

components/atoms/TreeItem.stories.tsx

@@ -5,7 +5,6 @@ import TreeView from "@material-ui/lab/TreeView";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import ChevronRightIcon from "@material-ui/icons/ChevronRight";
 import IconButton from "@material-ui/core/IconButton";
-import InfoOutlinedIcon from "@material-ui/icons/InfoOutlined";
 import EditOutlinedIcon from "@material-ui/icons/EditOutlined";
 
 export const Default = () => (
@@ -18,9 +17,6 @@ export const Default = () => (
       label={
         <>
           コンピュータ・サイエンス
-          <IconButton size="small">
-            <InfoOutlinedIcon />
-          </IconButton>
           <IconButton size="small" color="primary">
             <EditOutlinedIcon />
           </IconButton>