Merge branch 'release/0.1.2'

README.md

@@ -68,7 +68,7 @@ ln -nfs %cd%/.githooks/pre-commit.sh .git/hooks/pre-commit
 Note: This requires npm
 
 ### Where to go from here
-- [Gettings Started](./docs/getting-started.md])
+- [CLI docs (Getting started)](./cli/README.md)
 
 ### Roadmap
 At the moment we only support React, but we are looking in to the posibility to make it possible

cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@frojdagency/jewl-cli",
   "description": "CLI tool for Jewl. Import your components with ease",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "author": "Mikael Engström <[email protected]>",
   "homepage": "https://github.com/Frojd/Frojd-Jewl/",
   "bugs": {

cli/src/commands/clone.ts

@@ -11,6 +11,7 @@ import {
   getLocalComponentPath,
   getRepositoryComponentPath,
 } from '../utils/config'
+import * as fs from "fs";
 
 export default class Clone extends Command {
   static args = {
@@ -77,6 +78,10 @@ export default class Clone extends Command {
     fse.copySync(componentAbsPath, componentDestinationAbsPath)
     addComponentMapping(componentName, directoryName, newName)
 
+    if (componentName != newName) {
+      this.searchReplaceFiles(componentDestinationAbsPath, componentName, newName)
+    }
+
     // TODO: Ask if dependency should be installed
     if (_package.jewlDependencies) {
       this.log(`Installing subcomponents (jewl dependencies)...`)
@@ -95,6 +100,24 @@ export default class Clone extends Command {
     }
   }
 
+  private searchReplaceFiles(componentPath: string, componentName: string, newName: string) {
+
+    fs.readdirSync(componentPath).forEach(originalFileName => {
+      const originalFilePath = path.join(componentPath, originalFileName)
+
+      // Update contents
+      const contents = fs.readFileSync(originalFilePath, "utf8", )
+      const status = fs.rmSync(originalFilePath)
+      fs.writeFileSync(originalFilePath, contents.replaceAll(componentName, newName))
+
+      // Rename file
+      const newFileName = originalFileName.replace(componentName, newName)
+      if (newFileName != originalFileName) {
+        fse.moveSync(originalFilePath, path.join(componentPath, newFileName))
+      }
+    })
+  }
+
   private async installJewlDependencies(dependencies: Array<string>, currentLocalName: string) {
     for (const dep of dependencies) {
       const paths = dep.split('/')

component-library/.prettierignore

@@ -15,3 +15,4 @@ setupTests.js
 jest.config.js
 public
 storybook-static
+*.md

component-library/.storybook/main.js

@@ -16,6 +16,10 @@ module.exports = {
             directory: '../app/containers',
             titlePrefix: 'Containers',
         },
+        {
+            directory: '../app/layouts',
+            titlePrefix: 'Layouts',
+        },
     ],
 
     addons: [

component-library/app/_styleguide/Buttons.js

@@ -315,5 +315,4 @@ const Buttons = ({}) => {
 
 Buttons.propTypes = {};
 
-
 export default Buttons;

component-library/app/_styleguide/Typography.js

@@ -119,5 +119,4 @@ const Typography = ({}) => {
 
 Typography.propTypes = {};
 
-
 export default Typography;

component-library/app/components/__Component__/__Component__.data.js

@@ -0,0 +1,3 @@
+const data = {};
+
+export default data;

component-library/app/components/__Component__/__Component__.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import s from './__Component__.module.scss';
+
+const __Component__ = () => {
+    return <div className={s.Root}>__Component__</div>;
+};
+
+__Component__.propTypes = {};
+
+export default __Component__;

component-library/app/components/__Component__/__Component__.md

@@ -0,0 +1,3 @@
+__Component__
+
+[__Component__ source code on Github](https://github.com/Frojd/Frojd-Jewl/tree/develop/component-library/app/components/__Component__)

component-library/app/components/__Component__/__Component__.module.scss

@@ -0,0 +1,4 @@
+@import '../../styles/includes';
+
+.Root {
+}

component-library/app/components/__Component__/__Component__.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Component from './__Component__';
+import data from './__Component__.data';
+import readme from './__Component__.md';
+
+const Story = {
+    component: Component,
+    parameters: {
+        docs: { description: { component: readme } },
+    },
+};
+export default Story;
+
+const Template = (args) => <Component {...args} />;
+
+export const Default = Template.bind({});
+Default.args = { ...data };

component-library/app/components/__Component__/__Component__.test.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import 'i18n';
+import { render, screen } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+/* eslint-enable no-unused-vars */
+
+import TestComponent, { componentName as testName } from './';
+import data from './__Component__.data';
+
+describe(`<${testName} />`, () => {
+    it(`Renders an empty ${testName}`, () => {
+        render(<TestComponent />);
+    });
+
+    it(`Renders ${testName} with data`, () => {
+        render(<TestComponent {...data} />);
+    });
+
+    // it(`Renders ${testName} snapshot with data`, () => {
+    //     const componentJson = renderer
+    //         .create(<TestComponent {...data} />)
+    //         .toJSON();
+    //     expect(componentJson).toMatchSnapshot();
+    // });
+});

component-library/app/components/__Component__/index.js

@@ -0,0 +1,4 @@
+import Component from './__Component__';
+export default Component;
+
+export const componentName = '__Component__';

component-library/app/components/__Component__/package.json

@@ -0,0 +1,10 @@
+{
+    "name": "__Component__",
+    "version": "1.0.0",
+    "dependencies": {
+        "react": "*",
+        "prop-types": "*"
+    },
+    "jewlDependencies": [
+    ]
+}

component-library/app/containers/__Container__/__Container__.data.js

@@ -0,0 +1,7 @@
+import base from '../../layouts/Base/Base.data';
+
+const data = {
+    ...base,
+};
+
+export default data;

component-library/app/containers/__Container__/__Container__.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Base from '../../layouts/Base';
+import s from './__Container__.module.scss';
+
+const __Container__ = () => {
+    return <div className={s.Root}>__Container__</div>;
+};
+
+__Container__.propTypes = {};
+
+export default Base(__Container__);

component-library/app/containers/__Container__/__Container__.md

@@ -0,0 +1,3 @@
+__Container__
+
+[__Container__ source code on Github](https://github.com/Frojd/Frojd-Jewl/tree/develop/component-library/app/containers/__Container__)

component-library/app/containers/__Container__/__Container__.module.scss

@@ -0,0 +1,4 @@
+@import '../../styles/includes';
+
+.Root {
+}

component-library/app/containers/__Container__/__Container__.stories.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import Container from './__Container__';
+import data from './__Container__.data';
+import readme from './__Container__.md';
+
+const Story = {
+    component: Container,
+    parameters: {
+        docs: { description: { component: readme } },
+    },
+};
+export default Story;
+
+const Template = (args) => <Container {...args} />;
+
+export const Default = Template.bind({});
+Default.args = { ...data };

component-library/app/containers/__Container__/__Container__.test.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import 'i18n';
+import { render, screen } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+/* eslint-enable no-unused-vars */
+
+import TestComponent, { componentName as testName } from './';
+import data from './__Container__.data';
+
+describe(`<${testName} />`, () => {
+    it(`Renders an empty ${testName}`, () => {
+        render(<TestComponent />);
+    });
+
+    it(`Renders ${testName} with data`, () => {
+        render(<TestComponent {...data} />);
+    });
+
+    // it(`Renders ${testName} snapshot with data`, () => {
+    //     const componentJson = renderer
+    //         .create(<TestComponent {...data} />)
+    //         .toJSON();
+    //     expect(componentJson).toMatchSnapshot();
+    // });
+});

component-library/app/containers/__Container__/index.js

@@ -0,0 +1,4 @@
+import Container from './__Container__';
+export default Container;
+
+export const componentName = '__Container__';

component-library/app/containers/__Container__/package.json

@@ -0,0 +1,11 @@
+{
+    "name": "__Container__",
+    "version": "1.0.0",
+    "dependencies": {
+        "react": "*",
+        "prop-types": "*"
+    },
+    "jewlDependencies": [
+        "layouts/Base"
+    ]
+}

component-library/app/containers/index.js

@@ -1,6 +1,7 @@
 import dynamic from 'next/dynamic';
 
 const Containers = {
+    __Container__: dynamic(() => import('./__Container__')),
     Landing: dynamic(() => import('./Landing')),
     NotFound: dynamic(() => import('./NotFound')),
     Page: dynamic(() => import('./Page')),

component-library/app/layouts/Base/Base.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import Layout from './Base';
+import data from './Base.data';
+import readme from './Base.md';
+
+const Story = {
+    component: Layout,
+    parameters: {
+        docs: { description: { component: readme } },
+    },
+};
+export default Story;
+
+const Container = () => <div>--Layout Container--</div>;
+
+const Template = (args) => <Container {...args} />;
+
+export const Default = Layout(Template).bind({});
+Default.args = { ...data };

component-library/app/layouts/Base/Base.test.js

@@ -0,0 +1,26 @@
+/* eslint-disable no-unused-vars */
+import React from 'react';
+import '../../i18n';
+import { render, screen } from '@testing-library/react';
+import renderer from 'react-test-renderer';
+/* eslint-enable no-unused-vars */
+
+import TestComponent, { componentName as testName } from './';
+import data from './Base.data';
+
+describe(`<${testName} />`, () => {
+    it(`Renders an empty ${testName}`, () => {
+        render(<TestComponent />);
+    });
+
+    it(`Renders ${testName} with data`, () => {
+        render(<TestComponent {...data} />);
+    });
+
+    // it(`Renders ${testName} snapshot with data`, () => {
+    //     const componentJson = renderer
+    //         .create(<TestComponent {...data} />)
+    //         .toJSON();
+    //     expect(componentJson).toMatchSnapshot();
+    // });
+});

component-library/app/layouts/Base/index.js

@@ -1,2 +1,4 @@
 import Base from './Base';
 export default Base;
+
+export const componentName = 'Base';

component-library/app/layouts/__Layout__/__Layout__.data.js

@@ -0,0 +1,3 @@
+const data = {};
+
+export default data;

component-library/app/layouts/__Layout__/__Layout__.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import s from './__Layout__.module.scss';
+
+const __Layout__ = (Container) => {
+    const { displayName } = Container;
+
+    const Wrapper = ({ containerName = '', ...restProps }) => {
+        const name = containerName ? containerName : displayName;
+        const classes = classNames(s.Root, [s[`Root--${name}`]]);
+        return (
+            <div className={classes}>
+                <div className={s.Document} role="document">
+                    <main className={s.Main} id="mainContent">
+                        <Container {...restProps} />
+                    </main>
+                </div>
+            </div>
+        );
+    };
+
+    Wrapper.propTypes = {
+        containerName: PropTypes.string,
+    };
+
+    return Wrapper;
+};
+
+__Layout__.propTypes = {
+    displayName: PropTypes.string,
+};
+
+export default __Layout__;

component-library/app/layouts/__Layout__/__Layout__.md

@@ -0,0 +1,3 @@
+__Layout__
+
+[__Layout__ source code on Github](https://github.com/Frojd/Frojd-Jewl/tree/develop/component-library/app/layouts/__Layout__)

component-library/app/layouts/__Layout__/__Layout__.module.scss

@@ -0,0 +1,11 @@
+@import '../../styles/includes';
+
+.Root {
+}
+
+.Document {
+}
+
+.Main {
+    display: block; /* For IE11 compatibility */
+}