From 18bdfaa5a0e755fbdacda3a57509be0fe75ef066 Mon Sep 17 00:00:00 2001
From: Glen Wider <skyhigh4@web.de>
Date: Tue, 30 Mar 2021 11:06:57 +0200
Subject: [PATCH] add width prop

---
 src/components/App.tsx                        |  4 +-
 src/components/CodeReview.tsx                 | 56 ++++++++++---------
 src/components/CodeReviewCard.tsx             | 51 -----------------
 ...ard.stories.tsx => CodeReview.stories.tsx} |  9 +--
 4 files changed, 36 insertions(+), 84 deletions(-)
 delete mode 100644 src/components/CodeReviewCard.tsx
 rename src/stories/{CodeReviewCard.stories.tsx => CodeReview.stories.tsx} (61%)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 40a3dbb..ba2a05f 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import './App.css';
-import CodeReviewCard from "./CodeReviewCard";
+import CodeReview from "./CodeReview";
 
 const exampleCode = `
 (function someDemo() {
@@ -14,7 +14,7 @@ return () => <App />;
 function App() {
   return (
       <div className={"code"}>
-        <CodeReviewCard code={exampleCode} language={"jsx"}/>
+        <CodeReview code={exampleCode} language={"jsx"} width={500}/>
       </div>
   );
 }
diff --git a/src/components/CodeReview.tsx b/src/components/CodeReview.tsx
index e2981b8..4eb0bee 100644
--- a/src/components/CodeReview.tsx
+++ b/src/components/CodeReview.tsx
@@ -1,8 +1,8 @@
-import React, {FunctionComponent} from "react";
-import { Pre, Line, LineNo, LineContent } from "./styles"
-import Highlight, { defaultProps } from "prism-react-renderer";
-import theme from "prism-react-renderer/themes/nightOwl";
-import "./CodeReview.less";
+import React from "react";
+import {Card} from "antd";
+import Highlight, {defaultProps} from "prism-react-renderer";
+import theme from "prism-react-renderer/themes/github";
+import {Line, LineContent, LineNo, Pre} from "./styles";
 
 type Language =
     | "markup"
@@ -38,30 +38,32 @@ type Language =
     | "wasm"
     | "yaml";
 
-type CodeReviewProps = {
-    code: string
-    language: Language
+export interface CodeReviewProps  {
+    code: string;
+    language: Language;
+    width: number;
 }
-
-export const CodeReview: FunctionComponent<CodeReviewProps> = ({ code, language }) => {
+export const CodeReview: React.FC<CodeReviewProps> = ({ code, language, width }) => {
     return (
-        <Highlight {...defaultProps} theme={theme} code={code} language={language}>
-            {({ className, style, tokens, getLineProps, getTokenProps }) => (
-                <Pre className={className} style={style}>
-                    {tokens.map((line, i) => (
-                        <Line key={i} {...getLineProps({ line, key: i })}>
-                            <LineNo>{i + 1}</LineNo>
-                            <LineContent>
-                                {line.map((token, key) => (
-                                    <span key={key} {...getTokenProps({ token, key })} />
-                                ))}
-                            </LineContent>
-                        </Line>
-                    ))}
-                </Pre>
-            )}
-        </Highlight>
-    )
+            <Card style={{ width: width }}>
+                <Highlight {...defaultProps} theme={theme} code={code} language={language}>
+                    {({ className, style, tokens, getLineProps, getTokenProps }) => (
+                        <Pre className={className} style={style}>
+                            {tokens.map((line, i) => (
+                                <Line key={i} {...getLineProps({ line, key: i })}>
+                                    <LineNo>{i + 1}</LineNo>
+                                    <LineContent>
+                                        {line.map((token, key) => (
+                                            <span key={key} {...getTokenProps({ token, key })} />
+                                        ))}
+                                    </LineContent>
+                                </Line>
+                            ))}
+                        </Pre>
+                    )}
+                </Highlight>
+            </Card>
+        )
 }
 
 export default CodeReview;
\ No newline at end of file
diff --git a/src/components/CodeReviewCard.tsx b/src/components/CodeReviewCard.tsx
deleted file mode 100644
index aa64efd..0000000
--- a/src/components/CodeReviewCard.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import {Card} from "antd";
-import CodeReview from "./CodeReview";
-
-type Language =
-    | "markup"
-    | "bash"
-    | "clike"
-    | "c"
-    | "cpp"
-    | "css"
-    | "javascript"
-    | "jsx"
-    | "coffeescript"
-    | "actionscript"
-    | "css-extr"
-    | "diff"
-    | "git"
-    | "go"
-    | "graphql"
-    | "handlebars"
-    | "json"
-    | "less"
-    | "makefile"
-    | "markdown"
-    | "objectivec"
-    | "ocaml"
-    | "python"
-    | "reason"
-    | "sass"
-    | "scss"
-    | "sql"
-    | "stylus"
-    | "tsx"
-    | "typescript"
-    | "wasm"
-    | "yaml";
-
-export interface CodeReviewCardProps  {
-    code: string;
-    language: Language;
-}
-export const CodeReviewCard: React.FC<CodeReviewCardProps> = ({ code, language }) => {
-    return (
-            <Card style={{ width: 500 }}>
-                <CodeReview code={code} language={language}/>
-            </Card>
-        )
-}
-
-export default CodeReviewCard;
\ No newline at end of file
diff --git a/src/stories/CodeReviewCard.stories.tsx b/src/stories/CodeReview.stories.tsx
similarity index 61%
rename from src/stories/CodeReviewCard.stories.tsx
rename to src/stories/CodeReview.stories.tsx
index ed08e4e..9f5a6c4 100644
--- a/src/stories/CodeReviewCard.stories.tsx
+++ b/src/stories/CodeReview.stories.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
-import {CodeReviewCard, CodeReviewCardProps} from "../components/CodeReviewCard";
+import {CodeReview, CodeReviewProps} from "../components/CodeReview";
 import { Story, Meta } from '@storybook/react/types-6-0';
 
 
 export default {
-    componenet: CodeReviewCard,
+    component: CodeReview,
     title: 'CodeReviewCard'
 } as Meta;
 
-const Template: Story<CodeReviewCardProps> = (args) => <CodeReviewCard {...args} />;
+const Template: Story<CodeReviewProps> = (args) => <CodeReview {...args} />;
 
 const jsxCode = `
 (function someDemo() {
@@ -22,5 +22,6 @@ return () => <App />;
 export const Default = Template.bind({});
 Default.args = {
     code: jsxCode,
-    language: "jsx"
+    language: "jsx",
+    width: 500
 }
\ No newline at end of file