Added other guideilnes for frontend

Co-authored-by: Federico Cucinella <[email protected]>

frontend/.gitignore

@@ -23,5 +23,4 @@ yarn-debug.log*
 yarn-error.log*
 
 storybook-static
-yarn.lock
 .env

frontend/Dockerfile

@@ -9,7 +9,8 @@ RUN mkdir --parent /tmp/frontend
 WORKDIR /tmp/frontend
 
 COPY --chown=node:node ./package.json /tmp/frontend/package.json
-RUN yarn install --frozen-lockfile
+COPY --chown=node:node ./yarn.lock /tmp/frontend/yarn.lock
+RUN yarn install
 
 ARG BUILD_TARGET
 ARG SUBROUTE="/"

frontend/README.md

@@ -55,7 +55,7 @@ Each component needs to have its own folder with the following structure, e.g. f
 
 ### File structure
 
-Refer to the [Example component](./src/components/Example/) for a demo
+Refer to the [Example component](./src/components/Examples/ExampleButton/) for a demo.
 
 #### Component
 
@@ -66,6 +66,51 @@ Each component file needs to host a single component and needs to have the follo
 - component props interface with the name `${ComponentName}Props` (if needed)
 - functional component declaration
 
+Additionally:
+
+- if a task (like manipulating dynamic elements, animations, resizing) can be **_easily_** implemented using tailwind/css follow that implementation instead of relying on React/TS
+- have jsx only inside the return statement of the component
+
+  - Invalid:
+
+  ```ts
+  const Example: FC<IExampleProps> = ({ ...props }) => {
+    const { text, disabled, onClick, size, specialCSS } = props;
+    // do not have jsx outside the return
+    const content = <h5 className={specialCSS ? 'rainbow-text' : ''}>{text}</h5>
+
+    return (
+    <Button
+        disabled={disabled}
+        size={size}
+        onClick={onClick}
+        type="primary"
+        className="p-10"
+    >
+        {content}
+    </Button>
+  );
+  ```
+
+  - Accepted:
+
+  ```tsx
+  const Example: FC<IExampleProps> = ({ ...props }) => {
+    const { text, disabled, onClick, size, specialCSS } = props;
+
+    return (
+    <Button
+        disabled={disabled}
+        size={size}
+        onClick={onClick}
+        type="primary"
+        className="p-10"
+    >
+        <h5 className={specialCSS ? 'rainbow-text' : ''}>{text}</h5>
+    </Button>
+  );
+  ```
+
 #### Storybook
 
 Each storybook file needs to have the following structure:
@@ -76,6 +121,8 @@ Each storybook file needs to have the following structure:
 - template declaration
 - component stories
 
+Include in the `title` of the export default the path to create a hierarchy for your components. The path should be `Components/${subComponentsFolders}/${ComponentName}`
+
 ## Useful links
 
 - [Useful answer for deploying react app on subroute](https://stackoverflow.com/a/58508562/11143279)

frontend/src/components/Example/Example.stories.tsx → frontend/src/components/Examples/ExampleButton/ExampleButton.stories.tsx

@@ -1,20 +1,24 @@
-import Example, { IExampleProps } from './Example';
+import ExampleButton, { IExampleButtonProps } from './ExampleButton';
 import { Story, Meta } from '@storybook/react';
-import { someKeysOf } from '../../utils';
+import { someKeysOf } from '../../../utils';
 
 export default {
-  title: 'Components/Example',
-  component: Example,
-  argTypes: { onClick: { action: 'clicked' } },
+  title: 'Components/Examples/ExampleButton',
+  component: ExampleButton,
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
 } as Meta;
 
-const defaultArgs: someKeysOf<IExampleProps> = {
-  text: 'Example',
+const defaultArgs: someKeysOf<IExampleButtonProps> = {
+  text: 'Example Button',
   disabled: false,
   specialCSS: false,
 };
 
-const Template: Story<IExampleProps> = args => <Example {...args} />;
+const Template: Story<IExampleButtonProps> = args => (
+  <ExampleButton {...args} />
+);
 
 export const Default = Template.bind({});
 

frontend/src/components/Examples/ExampleButton/ExampleButton.tsx

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { Button } from 'antd';
+import { SizeType } from 'antd/lib/config-provider/SizeContext';
+import './ExampleButton.css';
+
+export interface IExampleButtonProps {
+  text: string;
+  disabled: boolean;
+  onClick: () => void;
+  specialCSS: boolean;
+  size: SizeType;
+}
+
+const Example: FC<IExampleButtonProps> = ({ ...props }) => {
+  const { text, disabled, onClick, size, specialCSS } = props;
+  return (
+    <div className="p-10">
+      <Button
+        disabled={disabled}
+        size={size}
+        onClick={onClick}
+        type="primary"
+        className="m-10 rounded-xl"
+      >
+        <h5 className={specialCSS ? 'rainbow-text' : ''}>{text}</h5>
+      </Button>
+    </div>
+  );
+};
+
+export default Example;

frontend/src/components/Examples/ExampleButton/index.ts

@@ -0,0 +1,2 @@
+import Example from './ExampleButton';
+export default Example;