Tutorial Commit chromaui#1 with Chromatic UI Change.

package.json

@@ -22,7 +22,8 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "storybook": "start-storybook -p 6006 -s public",
-    "build-storybook": "build-storybook -s public"
+    "build-storybook": "build-storybook -s public",
+    "chromatic": "npx chromatic --project-token=cfa867cf458b"
   },
   "eslintConfig": {
     "extends": [
@@ -53,11 +54,11 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.4.9",
-    "@storybook/addon-essentials": "^6.4.9",
-    "@storybook/addon-links": "^6.4.9",
-    "@storybook/node-logger": "^6.4.9",
+    "@storybook/addon-actions": "^6.4.16",
+    "@storybook/addon-essentials": "^6.4.16",
+    "@storybook/addon-links": "^6.4.16",
+    "@storybook/node-logger": "^6.4.16",
     "@storybook/preset-create-react-app": "^3.1.7",
-    "@storybook/react": "^6.4.9"
+    "@storybook/react": "^6.4.16"
   }
 }

src/components/Task.js

@@ -1,22 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Checkbox,
-  Flex,
-  IconButton,
-  Input,
-  Box,
-  VisuallyHidden,
-} from '@chakra-ui/react';
-import { BellIcon } from '@chakra-ui/icons';
+import { Checkbox, Flex, IconButton, Input, Box, VisuallyHidden } from '@chakra-ui/react';
+import { StarIcon } from '@chakra-ui/icons';
 
-export const Task = ({
-  task: { id, title, state },
-  onArchiveTask,
-  onTogglePinTask,
-  onEditTitle,
-  ...props
-}) => (
+export const Task = ({ task: { id, title, state }, onArchiveTask, onTogglePinTask, onEditTitle, ...props }) => (
   <Flex
     as="li"
     _notLast={{
@@ -33,11 +20,7 @@ export const Task = ({
     tabIndex="0"
     {...props}
   >
-    <Checkbox
-      px={4}
-      isChecked={state === 'TASK_ARCHIVED'}
-      onChange={(e) => onArchiveTask(e.target.checked, id)}
-    >
+    <Checkbox px={4} isChecked={state === 'TASK_ARCHIVED'} onChange={(e) => onArchiveTask(e.target.checked, id)}>
       <VisuallyHidden>Archive</VisuallyHidden>
     </Checkbox>
     <Box width="full" as="label">
@@ -47,8 +30,7 @@ export const Task = ({
         flex="1 1 auto"
         color={state === 'TASK_ARCHIVED' ? 'gray.400' : 'gray.700'}
         textDecoration={state === 'TASK_ARCHIVED' ? 'line-through' : 'none'}
-        fontSize="md"
-        fontWeight="bold"
+        fontSize="sm"
         isTruncated
         value={title}
         onChange={(e) => onEditTitle(e.target.value, id)}
@@ -59,7 +41,7 @@ export const Task = ({
       flex="none"
       aria-label={state === 'TASK_PINNED' ? 'unpin' : 'pin'}
       variant={state === 'TASK_PINNED' ? 'unpin' : 'pin'}
-      icon={<BellIcon />}
+      icon={<StarIcon />}
       onClick={() => onTogglePinTask(state, id)}
     />
   </Flex>

src/components/Task.stories.js

@@ -0,0 +1,53 @@
+import React from 'react';
+
+import { Task } from './Task';
+
+export default {
+  component: Task,
+  title: 'Task',
+  argTypes: {
+    onArchiveTask: { action: 'onArchiveTask' },
+    onTogglePinTask: { action: 'onTogglePinTask' },
+    onEditTask: { action: 'onEditTask' },
+  },
+};
+
+const Template = (args) => <Task {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  task: {
+    id: '1',
+    title: 'Buy milk',
+    state: 'TASK_INBOX',
+  },
+};
+
+export const Pinned = Template.bind({});
+Pinned.args = {
+  task: {
+    id: '2',
+    title: 'QA dropdown',
+    state: 'TASK_PINNED',
+  },
+};
+
+export const Archived = Template.bind({});
+Archived.args = {
+  task: {
+    id: '3',
+    title: 'Write schema for account menu',
+    state: 'TASK_ARCHIVED',
+  },
+};
+
+const longTitleString = `This task's name is absurdly large. In fact, I think if I keep going I might end up with content overflow. What will happen? The star that represents a pinned task could have text overlapping. The text could cut-off abruptly when it reaches the star. I hope not!`;
+
+export const LongTitle = Template.bind({});
+LongTitle.args = {
+  task: {
+    id: '4',
+    title: longTitleString,
+    state: 'TASK_INBOX',
+  },
+};