update crc card playground

src/components/architecture/crc-card.vue

@@ -7,10 +7,12 @@ interface Props {
   responsabilities?: string[]
   collaborators?: string[]
   editable?: boolean
+  isPlayground?: boolean
 }
 
 const emits = defineEmits<{
   (e: "submit", crc: CrcCardEntity): void
+  (e: "remove", crcName: string): void
 }>()
 
 const props = withDefaults(defineProps<Props>(), {
@@ -18,6 +20,7 @@ const props = withDefaults(defineProps<Props>(), {
   responsabilities: () => [],
   collaborators: () => [],
   editable: false,
+  isPlayground: false,
 })
 
 const componentName = ref(props.name)
@@ -65,6 +68,10 @@ const clearCard = () => {
 }
 
 const submitCard = () => {
+  if (!componentName.value) {
+    return
+  }
+
   emits("submit", {
     name: componentName.value,
     responsabilities: allReponsabilities.value,
@@ -72,6 +79,14 @@ const submitCard = () => {
   })
   clearCard()
 }
+
+const removeCard = () => {
+  if (!componentName.value) {
+    return
+  }
+
+  emits("remove", componentName.value)
+}
 </script>
 
 <template>
@@ -86,7 +101,10 @@ const submitCard = () => {
       <h3 v-else>
         {{ componentName }}
       </h3>
-      <button v-if="editable" @click="submitCard">create</button>
+      <button v-if="editable" :disabled="!componentName" @click="submitCard">
+        create
+      </button>
+      <button @click="removeCard" v-else-if="isPlayground">×</button>
     </section>
     <section>
       <div class="responsabilities">

src/components/architecture/crc-project.vue

@@ -7,6 +7,9 @@ const crcCards = ref<CrcCardEntity[]>([])
 const addCrcCard = (card: CrcCardEntity) => {
   crcCards.value = [...crcCards.value, card]
 }
+const removeCard = (cardName: string) => {
+  crcCards.value = crcCards.value.filter((card) => card.name !== cardName)
+}
 </script>
 
 <template>
@@ -19,6 +22,8 @@ const addCrcCard = (card: CrcCardEntity) => {
         :name="card.name"
         :responsabilities="card.responsabilities"
         :collaborators="card.collaborators"
+        @remove="removeCard"
+        is-playground
       />
     </section>
   </div>

src/pages/crc-cards-playground.mdx

@@ -5,4 +5,6 @@ layout: post
 
 # CRC Card playground
 
+Let's make CRC Card! I've wrote a [whole article](/posts/crc-cards-as-training-material) about it.
+
 <CrcProject />

src/pages/posts/crc-cards-as-training-material.mdx

@@ -7,7 +7,7 @@ draft: true
 
 # CRC Cards as training material
 
-CRC Card: **C**lass name, **R**esponsibilities, **C**ollaborators.
+> CRC Card: **C**lass name, **R**esponsibilities, **C**ollaborators.
 
 [CRC Cards](https://en.wikipedia.org/wiki/Class-responsibility-collaboration_card) are a teaching tool on how to design software. They were proposed by [Kent Beck](https://www.kentbeck.com) and [Ward Cunningham](https://en.wikipedia.org/wiki/Ward_Cunningham), and, hell yeah it's useful.
 
@@ -136,15 +136,15 @@ const newBookmark = await fetch(`/users/${user.id}/bookmarks`, {
 
 Only the `user id` is necessary, why not just give the user id instead of the whole object? That will be our first simplification <OrderTag order={1} />.
 
-> We'll simplify at the very end, once we'll be finished with our CRC card.
+> ℹ️ We'll simplify at the very end, once we'll be finished with our CRC card.
 
-> Here is a classic responsibility leak I frequentely see. When you're developing a feature, you have the big picture but `UserBookmarks` and its local knowledge don't care about the user having a `user.address.line1` property.
+> ℹ️ Here is a classic responsibility leak I frequentely see. When you're developing a feature, you have the big picture but `UserBookmarks` and its local knowledge don't care about the user having a `user.address.line1` property.
 
 ## The secret sauce
 
 Now comes where we'll challenge how the component does its magic.
 
-### Tell me about your hooks, I'll tell you who you are
+### _"Tell me about your hooks, I'll tell you who you are"_
 
 Without being a rule of thumb, I like to count how many `use` there are in the component, it gives me good approximation about how many responsibilities lies.
 
@@ -160,7 +160,7 @@ Without being a rule of thumb, I like to count how many `use` there are in the c
   responsabilities={[
     "Display user bookmarks",
     "fetching bookmarks",
-    "handling async processes (loading, error)",
+    "handling async processes (loading and error state)",
     "handling add bookmark modal visibility",
   ]}
   collaborators={["Home.tsx"]}
@@ -216,7 +216,7 @@ export const UserBookmarks: FunctionComponent<Props> = ({ userId }) => {
 // ...
 ```
 
-### <OrderTag order={2} /> not responsible about the animation
+### <OrderTag order={2} /> not responsible of child's animation
 
 ```tsx
 // removing the magic number at the same time