Merge pull request #8 from Platzi-Master-C8/develop

Develop - Add Icons Package

.eslintrc.js

@@ -105,5 +105,11 @@ module.exports = {
         'testing-library/no-node-access': 'off'
       }
     },
+    {
+      files: ['./packages/**/src/**/index.js', './packages/**/src/**/index.d.ts'],
+      'rules': {
+        'no-restricted-exports': 'off'
+      }
+    }
   ]
 };

.gitignore

@@ -207,5 +207,5 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
-
+yarn.lock
 # End of https://www.toptal.com/developers/gitignore/api/react,node,macos,linux,windows

.storybook/preview-head.html

@@ -0,0 +1 @@
+<link href="https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700&display=swap" rel="stylesheet">

.storybook/preview.js

@@ -1,9 +1,43 @@
+import { ThemeProvider } from 'emotion-theming';
+import { createTheme } from "@mui/material/styles";
+
+import { THEME } from '@master-c8/theme';
+
+const getHiredTheme = createTheme(THEME);
+
+const getStyles = ({ __sb } = {}) => ({
+  display: 'flex',
+  flexDirection: __sb?.fd || 'column',
+  maxHeight: __sb?.mh || 'auto',
+  justifyContent: 'flex-start',
+  alignContent: 'flex-start',
+  flexWrap: 'wrap',
+  height: '100%',
+  gap: '10px 30px',
+  alignItems: 'center'
+})
+
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
+  actions: { 
+    argTypesRegex: "^on[A-Z].*" 
+  },
   controls: {
     matchers: {
       color: /(background|color)$/i,
       date: /Date$/,
     },
-  },
-}
+  }
+}
+
+export const decorators = [
+  (Story) => (
+    <ThemeProvider theme={getHiredTheme}>
+      <Story/>
+    </ThemeProvider>
+  ),
+  (Story, { parameters }) => (
+    <div style={getStyles(parameters)}>
+      <Story />
+    </div>
+  ),
+];

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ['@babel/preset-env', '@babel/preset-react'],
+  presets: ['@babel/preset-env', ['@babel/preset-react', { runtime: 'automatic' }]],
 };

config/jest.config.js

@@ -4,8 +4,10 @@ module.exports = {
   setupFilesAfterEnv: ['<rootDir>/config/tests.config.js'],
   testEnvironment: 'jsdom',
   moduleNameMapper: {
-    '@gethired/commons': '<rootDir>/packages/components',
-    '@gethired/commons/*': '<rootDir>/packages/components/$1',
+    '@master-c8/commons': '<rootDir>/packages/components',
+    '@master-c8/commons/*': '<rootDir>/packages/components/$1',
+    '@master-c8/icons': '<rootDir>/packages/icons',
+    '@master-c8/icons/*': '<rootDir>/packages/icons/$1',
   },
   modulePathIgnorePatterns: ['dist'],
 };

package.json

@@ -6,7 +6,7 @@
     "test": "jest --config ./config/jest.config.js",
     "test:watch": "jest --config ./config/jest.config.js --watch-all",
     "test:coverage": "jest --config ./config/jest.config.js --coverage",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 -c .storybook watch-css -s ./packages/components/src",
     "dev": "start-storybook -p 5555",
     "build-storybook": "build-storybook"
   },
@@ -22,6 +22,7 @@
     "@emotion/styled": "^11.6.0",
     "@mui/material": "^5.2.1",
     "@mui/styled-engine-sc": "^5.1.0",
+    "@mui/styles": "^5.2.2",
     "@storybook/addon-actions": "^6.4.0",
     "@storybook/addon-essentials": "^6.4.0",
     "@storybook/addon-links": "^6.4.0",

packages/components/package.json

@@ -45,7 +45,8 @@
     }
   },
   "dependencies": {
-    "@master-c8/theme": "0.1.4",
+    "@master-c8/theme": "0.1.3",
+    "@master-c8/icons": "0.1.0",
     "prop-types": "15.7.2"
   },
   "publishConfig": {

packages/components/src/ButtonExample/ButtonExample.js

@@ -1,8 +1,16 @@
-import { Button } from '@mui/material';
-import { ThemeProvider } from '@master-c8/theme';
-import { forwardRef } from 'react';
+import { Button as ButtonMui } from '@mui/material';
+import PropTypes from 'prop-types';
 
-const ButtonExample = forwardRef(function ButtonExample(props, ref) {
-  return <Button ref={ref} {...props} />;
-});
-export default ButtonExample;
+const Button = ({ ...props }) => {
+  return (
+    <ButtonMui {...props}/>
+  );
+};
+
+Button.propTypes = {
+  color: PropTypes.oneOf(['primary', 'secondary']),
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  variant: PropTypes.oneOf(['contained', 'outlined']),
+};
+
+export default Button;

packages/components/src/ButtonExample/ButtonExample.stories.js

@@ -1,16 +1,58 @@
-import { ThemeProvider } from '@master-c8/theme';
-
 import ButtonExample from './ButtonExample';
 
 export default {
-  title: 'example/button',
+  title: 'Design System/Atoms/Button',
   component: ButtonExample,
+  parameters: { __sb: { fd: 'row' } },
+  argTypes: {
+    color: {},
+    size: {
+      options: ['small', 'large'],
+      control: { type: 'select' },
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+};
+
+const Template = (args) => <ButtonExample {...args} />;
+
+export const Primary = Template.bind({});
+
+Primary.args = {
+  children: 'BUTTON',
+  variant: 'contained',
+};
+
+const getListTemplate = (Component) =>
+  ({ items, ...args }) =>
+    items.map((item, index) => {
+      return <Component key={index} {...args} {...item} />;
+    });
+
+const ListTemplate = getListTemplate(ButtonExample);
+
+export const Sizes = ListTemplate.bind({});
+
+Sizes.args = {
+  items: ['small', 'medium', 'large'].map((size) => ({ size })),
+  children: 'BUTTON',
+  variant: 'contained',
+  color: 'primary',
 };
 
-export const Default = () => {
-  return (
-    <ThemeProvider>
-      <ButtonExample variant="contained">Button Dafault</ButtonExample>
-    </ThemeProvider>
-  );
+export const Colors = ListTemplate.bind({});
+
+Colors.args = {
+  items: ['primary', 'secondary'].map((color) => ({ color })),
+  children: 'BUTTON',
+  variant: 'contained',
+};
+
+export const Variants = ListTemplate.bind({});
+
+Variants.args = {
+  items: ['contained', 'outlined'].map((variant) => ({ variant })),
+  children: 'BUTTON',
 };

packages/components/src/IconsStory/Icons.stories.js

@@ -0,0 +1,42 @@
+import * as IconsPackage from '@master-c8/icons';
+
+export default {
+  title: 'Design System/Atoms/Icons',
+  component: 'Icons',
+  parameters: { __sb: { fd: 'row' } },
+  argTypes: {
+    color: {
+      options: [
+        'primary',
+        'secondary',
+        'error',
+        'info',
+        'success',
+        'warning',
+        'inherit',
+        'action',
+        'disabled',
+      ],
+      control: { type: 'select' },
+      table: {
+        category: 'Sizes',
+      },
+    },
+    fontSize: {
+      options: ['small', 'large'],
+      control: { type: 'select' },
+      table: {
+        category: 'Sizes',
+      },
+    },
+  },
+};
+
+export const Icons = (args) => {
+  const iconsKeyList = Object.keys(IconsPackage);
+  return iconsKeyList.map((key) => {
+    const Icon = IconsPackage[key];
+    IconsPackage[key].displayName = key;
+    return <Icon {...args} key={key} />;
+  });
+};

packages/components/src/Logotype/Logotype.d.ts

@@ -0,0 +1,5 @@
+import { HTMLProps } from 'react';
+
+export interface LogotypeProps extends HTMLProps<HTMLImageElement> {}
+
+export default function Logotype(props: LogotypeProps): JSX.Element;

packages/components/src/Logotype/Logotype.stories.js

@@ -0,0 +1,14 @@
+import Logotype from './Logotype';
+
+export default {
+  title: 'Design System/Atoms/Logo',
+  component: Logotype,
+};
+
+const Template = (args) => <Logotype {...args} />;
+
+export const Logo = Template.bind({});
+
+Logo.args = {
+  width: 220,
+};

packages/components/src/Logotype/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './Logotype';
+export * from './Logotype';

packages/components/src/Logotype/index.js

@@ -0,0 +1 @@
+export { default } from './Logotype';

packages/components/src/index.d.ts

@@ -1,2 +1,2 @@
-export { default as ButtonExample } from './ButtonExample';
-export * from './ButtonExample';
+export { default as Logotype } from './Logotype';
+export * from './Logotype';

packages/components/src/index.js

@@ -1 +1 @@
-export { default as ButtonExample } from './ButtonExample';
+export { default as Logotype } from './Logotype';

packages/icons/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@master-c8/icons",
+  "version": "0.1.0",
+  "private": false,
+  "description": "Platzi Master C8 Theme",
+  "main": "./dist/index",
+  "author": "Platzi Master C8",
+  "license": "MIT",
+  "keywords": [
+    "platzi master",
+    "c8",
+    "react",
+    "gethired-commons",
+    "platzi",
+    "theme",
+    "icons"
+  ],
+  "contributors": [
+    {
+      "name": "Kevin Cruz",
+      "github": "https://github.com/kevfarid"
+    },
+    {
+      "name": "Yadu Lopez",
+      "github": "https://github.com/yadurani"
+    }
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Platzi-Master-C8/gethired-commons.git",
+    "directory": "packages/theme"
+  },
+  "bugs": {
+    "url": "https://github.com/Platzi-Master-C8/gethired-commons/issues"
+  },
+  "homepage": "https://github.com/Platzi-Master-C8/gethired-commons",
+  "scripts": {
+    "build": "NODE_ENV=production && rm -rf ./dist && mkdir dist && npx babel --config-file ../../babel.config src/ --out-dir dist --copy-files --ignore '**/*.spec.js' --ignore '**/*.stories.@(js|jsx|ts|tsx)' --no-copy-ignored"
+  },
+  "peerDependencies": {
+    "@types/react": ">=16.8.0",
+    "react": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "prop-types": "15.7.2",
+    "@mui/material": "^5.2.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=12.0.0"
+  }
+}
+