deleted canvas/ peer dependencies

my-chart-test/package-lock.json

@@ -13156,9 +13156,7 @@
       "engines": {
         "node": ">=10"
       },
-      "peerDependencies": {
-        "canvas": "^2.5.0"
-      },
+
       "peerDependenciesMeta": {
         "canvas": {
           "optional": true

src/contents/wiki.tsx

@@ -177,10 +177,11 @@ function Troubleshooting(){
       <div id="nono" className="noshow">
         This combination returns no instances. 
       </div>
-      {/* <div className="filterable all react type property">
-        <Collapsible title="Argument of type X is not assignable to parameter of type Y.">
+       <div className="filterable all react type property">
+        <Collapsible title="Argument of type X is not assignable to parameter of type Y. ">
         <h6>Example</h6>
         <h6>Solutions</h6>
+       
         </Collapsible>
       </div>
       <div className="filterable all react type"> 
@@ -189,10 +190,38 @@ function Troubleshooting(){
         <h6>Solutions</h6>
         </Collapsible>
       </div>
+      <div className="filterable all css"> 
+        <Collapsible title="I added css styles but they do not show">
+        <h6>Example</h6>
+        <p>The color is not showing on hover.</p>
+        <Code>.nav-link:hover &#123;
+          color: var(--darkpurple);
+          background-color: var(--yellow) !important;
+          border-radius: 3px;
+          &#125;</Code>
+        <h6>Solution</h6>
+        <p>Styles not showing is often a case of a different style overriding your style. Some styles are pre defined by bootstrap or other packages you may use. </p>
+        <p> If an external package is overriding your style, you need to add the <b>!important</b> tag to your style. </p>
+        <p> If one of your own styles is overriding the new style, you can change your old style or define a new, more specific style case. E.g. by using a more specific css path. But you may still need to add the <b>!important</b> tag. </p>
+        <Code> .nav-link:hover &#123;
+          color: var(--darkpurple) <b>!important</b>;
+          background-color: var(--yellow) !important;
+          border-radius: 3px;
+          &#125;
+          </Code>
+        </Collapsible>
+      </div>
       <div className="filterable all  react type property">
         <Collapsible title="Property x is missing in type y but required in type z.">
         <h6>Example</h6>
+        <p className="problem-error"> Argument of type '&#123; [x: string]: any; &#125;' is not assignable to parameter of type '&#123; classNames: string[]; &#125;'.
+        Property 'classNames' is missing in type '&#123; [x: string]: any; &#125;' but required in type '&#123; classNames: string[]; &#125;'.</p>
+        <p> for </p>
+        <Code>className=&#123;joinClassNames(&#123;[&#39;text-event&#39;, className]&#125;)&#125; </Code>
         <h6>Solutions</h6>
+        <p>In this example, the problem was that the property "classNames" was not explicitly named.</p>
+        <p>Changing it to </p>
+          <Code>className=&#123;joinClassNames(&#123;<b>classNames:</b>[&#39;text-event &#39;, className]&#125;)&#125;</Code>
         </Collapsible>
       </div>
       <div className="filterable all react type property">
@@ -204,7 +233,40 @@ function Troubleshooting(){
       <div className="filterable all react type property">
         <Collapsible title="Type X is missing the following properties from type Y: a, b, c">
         <h6>Example</h6>
+        <p className="problem-error">
+        Type '&#123; date: string; text: string; &#125;' is missing the following properties from type 'TextEventProps': marker, card
+        </p>
+        <p>In reference of the interface TextEventProps:</p>
+        <Code>
+        <p>interface TextEventProps &#123; </p>
+        <p>date: string; </p>
+        <p>text: string; </p>
+        <p>marker: React.ReactNode; </p>
+        <p>id: string; </p>
+        <p>card: Function; </p>
+        &#125;
+        </Code>
+        <p>For the code:</p>
+        <Code>
+          <p> &lt;TextEvent </p>
+          <p> id="05"</p>
+          <p> date="14-06-2024"</p>
+          <p> text="Test test"</p>
+          <p> /&gt;</p>
+        </Code>
         <h6>Solutions</h6>
+        <p>One solution could be getting rid of the properties you do not need everywhere and create new property interfaces for all cases.</p>
+        <p>If you want to stick to more general Interfaces, you can make properties optional:</p>
+        <Code>
+        <p>interface TextEventProps &#123; </p>
+        <p>date: string; </p>
+        <p>text: string; </p>
+        <p>marker?: React.ReactNode; </p>
+        <p>id: string; </p>
+        <p>card?: Function; </p>
+        &#125;
+        </Code>
+        <p>Remember that this can lead to different return cases for your functions.</p>
         </Collapsible>
       </div>
       <div className="filterable all react type">
@@ -224,7 +286,7 @@ function Troubleshooting(){
         <h6>Example</h6>
         <h6>Solutions</h6>
         </Collapsible>
-      </div> */}
+      </div> 
       <div className="filterable all react module">
         <Collapsible title="Module Z has already exported a member named A. Consider explicitly re-exporting to resolve the ambiguity.">
         <h6>Example</h6>