Increase printWidth

balajmarius · Feb 4, 2020 · 2386b4f · 2386b4f
1 parent 491793f
commit 2386b4f
Show file tree

Hide file tree

Showing 13 changed files with 29 additions and 76 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+node_modules/
+app/.next/
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 80,
+  "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "all",
   "arrowParens": "always",

diff --git a/packages/app/components/Editor.tsx b/packages/app/components/Editor.tsx
@@ -13,13 +13,7 @@ interface IEditor {
   onChange(value: string): void;
 }
 
-function Editor({
-  value,
-  mode,
-  isReadOnly,
-  debounceChangePeriod,
-  onChange,
-}: IEditor) {
+function Editor({ value, mode, isReadOnly, debounceChangePeriod, onChange }: IEditor) {
   return (
     <AceEditor
       mode={mode}

diff --git a/packages/app/components/Headings.tsx b/packages/app/components/Headings.tsx
@@ -17,12 +17,7 @@ function Headings({ primary, secondary, inverse }: IHeadings) {
   return (
     <Grid columns="1fr auto" direction={direction} gap={10}>
       <GridCell>
-        <Text
-          align={align}
-          size="medium"
-          display="monospace"
-          textColor="lightGrey"
-        >
+        <Text align={align} size="medium" display="monospace" textColor="lightGrey">
           {secondary}
         </Text>
       </GridCell>

diff --git a/packages/app/containers/SettingsBar.tsx b/packages/app/containers/SettingsBar.tsx
@@ -46,32 +46,16 @@ const Status = styled.div<IStatus>`
   background: ${({ variant }) => getVariantColor(variant)};
 `;
 
-function SettingsBar({
-  variant,
-  type,
-  jsxSingleQuote,
-  memo,
-  onChangeType,
-  onChangeQuote,
-  onChangeMemo,
-}: ISettingsBar) {
+function SettingsBar({ type, memo, variant, jsxSingleQuote, onChangeType, onChangeQuote, onChangeMemo }: ISettingsBar) {
   const isFunctional = type === 'functional';
 
   return (
     <Section>
       <Grid columns="1fr 2fr 1fr">
         <GridCell>
           <Grid columns="auto auto auto" justify="flex-start" gap={20}>
-            <Switch
-              label="Functional"
-              checked={isFunctional}
-              onChange={onChangeType}
-            />
-            <Switch
-              label="Single quotes"
-              checked={jsxSingleQuote}
-              onChange={onChangeQuote}
-            />
+            <Switch label="Functional" checked={isFunctional} onChange={onChangeType} />
+            <Switch label="Single quotes" checked={jsxSingleQuote} onChange={onChangeQuote} />
             <Switch label="Memo" checked={memo} onChange={onChangeMemo} />
           </Grid>
         </GridCell>

diff --git a/packages/app/layouts/Layout.tsx b/packages/app/layouts/Layout.tsx
@@ -52,10 +52,7 @@ function Layout({ children }: ILayout) {
         <meta name="description" content="Convert SVG to valid JSX" />
         <meta name="keywords" content="svg, jsx, svg2jsx" />
         <meta name="author" content="Bălaj Marius" />
-        <meta
-          name="copyright"
-          content="Copyright Bălaj Marius 2019. All Rights Reserved."
-        />
+        <meta name="copyright" content="Copyright Bălaj Marius 2019. All Rights Reserved." />
         <link rel="shortcut icon" href="static/favicon.ico" />
         <title>Editor - Convert SVG to valid JSX</title>
       </Head>

diff --git a/packages/app/pages/_document.tsx b/packages/app/pages/_document.tsx
@@ -4,9 +4,7 @@ import { AppType, RenderPageResult } from 'next-server/dist/lib/utils';
 import { ServerStyleSheet } from 'styled-components';
 
 class Root extends Document<DocumentInitialProps> {
-  static async getInitialProps(
-    ctx: DocumentContext,
-  ): Promise<DocumentInitialProps> {
+  static async getInitialProps(ctx: DocumentContext): Promise<DocumentInitialProps> {
     const sheet = new ServerStyleSheet();
     const initialRenderPage = ctx.renderPage;
 
@@ -15,18 +13,14 @@ class Root extends Document<DocumentInitialProps> {
 
       ctx.renderPage = (): RenderPageResult | Promise<RenderPageResult> =>
         initialRenderPage({
-          enhanceApp: (App: AppType) => (props: any): ReactElement =>
-            sheet.collectStyles(<App {...props} />),
+          enhanceApp: (App: AppType) => (props: any): ReactElement => sheet.collectStyles(<App {...props} />),
         });
 
       return {
         ...initialProps,
         styles: (
           <Fragment>
-            <link
-              rel="stylesheet"
-              href="https://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata"
-            />
+            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700|Inconsolata" />
             {initialProps.styles}
             {sheet.getStyleElement()}
           </Fragment>

diff --git a/packages/app/pages/api/transform.ts b/packages/app/pages/api/transform.ts
@@ -3,10 +3,7 @@ import { NextApiRequest, NextApiResponse } from 'next-server/dist/lib/utils';
 
 import httpStatusCode from '../../utils/httpStatusCode';
 
-export default async function(
-  req: NextApiRequest,
-  res: NextApiResponse,
-): Promise<void> {
+export default async function(req: NextApiRequest, res: NextApiResponse): Promise<void> {
   try {
     const jsx = await transform(req.body.svg, req.body.config);
     res.status(httpStatusCode.OK).send({ jsx });

diff --git a/packages/app/pages/index.tsx b/packages/app/pages/index.tsx
@@ -42,12 +42,7 @@ function HomePage() {
         onChangeMemo={setMemo}
       />
 
-      <Playground
-        svg={editor.svg}
-        jsx={transformer.jsx}
-        onDrop={setFile}
-        onChange={setSvg}
-      />
+      <Playground svg={editor.svg} jsx={transformer.jsx} onDrop={setFile} onChange={setSvg} />
     </Layout>
   );
 }

diff --git a/packages/app/styles/editor.ts b/packages/app/styles/editor.ts
@@ -57,8 +57,4 @@ function createStyle(require: Function, exports: any): void {
   require('../lib/dom').importCssString(style, 'ace_svg2jsx');
 }
 
-ace.define(
-  'ace/theme/svg2jsx',
-  ['require', 'exports', 'module', 'ace/lib/dom'],
-  createStyle,
-);
+ace.define('ace/theme/svg2jsx', ['require', 'exports', 'module', 'ace/lib/dom'], createStyle);
diff --git a/packages/app/utils/getFileText.ts b/packages/app/utils/getFileText.ts
@@ -1,8 +1,6 @@
 import pretty from 'pretty';
 
-export default function getFileText(
-  file: File,
-): Promise<string | ArrayBuffer | DOMException> {
+export default function getFileText(file: File): Promise<string | ArrayBuffer | DOMException> {
   const fileReader = new FileReader();
 
   return new Promise((resolve, reject) => {

diff --git a/packages/transform/lib/stringifier.js b/packages/transform/lib/stringifier.js
@@ -34,9 +34,7 @@ function stringifyAttributes(attributes = {}) {
     const isStyleAttribute = isPlainObject(attribute);
 
     if (isStyleAttribute) {
-      return (
-        accumulator + ` ${attributeName}={{ ${stringifyStyle(attribute)} }}`
-      );
+      return accumulator + ` ${attributeName}={{ ${stringifyStyle(attribute)} }}`;
     }
 
     return accumulator + ` ${attributeName}="${attribute}"`;

diff --git a/test/unit/transform.spec.js b/test/unit/transform.spec.js
@@ -2,9 +2,7 @@ const transform = require('../../packages/transform');
 
 describe('transform tests', () => {
   test('clean attributes', async () => {
-    const transformed = await transform(
-      '<svg id=" test " strok="blue" fill="   red" />',
-    );
+    const transformed = await transform('<svg id=" test " strok="blue" fill="   red" />');
 
     expect(transformed).toEqual(expect.not.stringMatching(/strok/));
     expect(transformed).toMatchSnapshot();
@@ -18,9 +16,7 @@ describe('transform tests', () => {
   });
 
   test('convert attributes', async () => {
-    const transformed = await transform(
-      '<svg class="test" data-name="svg" fill-rule="evenodd"/>',
-    );
+    const transformed = await transform('<svg class="test" data-name="svg" fill-rule="evenodd"/>');
 
     expect(transformed).toEqual(expect.stringMatching(/className=/));
     expect(transformed).toEqual(expect.not.stringMatching(/class=/));
@@ -32,9 +28,7 @@ describe('transform tests', () => {
   });
 
   test('convert inline styles to style objects', async () => {
-    const transformed = await transform(
-      '<svg style="margin-left:20px;padding-top:20px;" />',
-    );
+    const transformed = await transform('<svg style="margin-left:20px;padding-top:20px;" />');
 
     expect(transformed).toEqual(expect.stringMatching(/marginLeft: 20/));
     expect(transformed).toEqual(expect.stringMatching(/paddingTop: 20/));
@@ -145,4 +139,13 @@ describe('transform tests', () => {
     expect(transformed.match(/height="125"/g)).toHaveLength(1);
     expect(transformed).toMatchSnapshot();
   });
+
+  test('keep ID attribute', async () => {
+    const transformed = await transform('<svg id="svg-test" />', {
+      cleanupIDs: false,
+    });
+
+    expect(transformed.match(/id="svg-test"/g)).toHaveLength(1);
+    expect(transformed).toMatchSnapshot();
+  });
 });